diff --git a/backend/src/aerial/aerialRouter.ts b/backend/src/aerial/aerialRouter.ts
index 3921d71..7f892e7 100644
--- a/backend/src/aerial/aerialRouter.ts
+++ b/backend/src/aerial/aerialRouter.ts
@@ -435,6 +435,103 @@ router.post('/satellite/:sn/status', requireAuth, requirePermission('aerial', 'C
   }
 });
 
+// ============================================================
+// UP42 위성 패스 조회 (실시간 위성 목록 + 궤도)
+// ============================================================
+
+/** 한국 주변 위성 패스 시뮬레이션 데이터 (UP42 API 연동 시 교체) */
+function generateKoreaSatellitePasses() {
+  const now = new Date();
+  const passes = [
+    {
+      id: 'pass-kmp3a-1', satellite: 'KOMPSAT-3A', provider: 'KARI', type: 'optical',
+      resolution: '0.5m', color: '#a855f7',
+      startTime: new Date(now.getTime() + 2 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 2 * 3600000 + 14 * 60000).toISOString(),
+      maxElevation: 72, direction: 'descending',
+      orbit: [
+        { lat: 42.0, lon: 126.5 }, { lat: 40.5, lon: 127.0 }, { lat: 39.0, lon: 127.4 },
+        { lat: 37.5, lon: 127.8 }, { lat: 36.0, lon: 128.1 }, { lat: 34.5, lon: 128.4 },
+        { lat: 33.0, lon: 128.6 }, { lat: 31.5, lon: 128.8 },
+      ],
+    },
+    {
+      id: 'pass-pneo-1', satellite: 'Pléiades Neo', provider: 'Airbus', type: 'optical',
+      resolution: '0.3m', color: '#06b6d4',
+      startTime: new Date(now.getTime() + 3.5 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 3.5 * 3600000 + 12 * 60000).toISOString(),
+      maxElevation: 65, direction: 'ascending',
+      orbit: [
+        { lat: 30.0, lon: 130.0 }, { lat: 31.5, lon: 129.2 }, { lat: 33.0, lon: 128.5 },
+        { lat: 34.5, lon: 127.8 }, { lat: 36.0, lon: 127.1 }, { lat: 37.5, lon: 126.4 },
+        { lat: 39.0, lon: 125.8 }, { lat: 40.5, lon: 125.2 },
+      ],
+    },
+    {
+      id: 'pass-s1-1', satellite: 'Sentinel-1 SAR', provider: 'ESA', type: 'sar',
+      resolution: '20m', color: '#f59e0b',
+      startTime: new Date(now.getTime() + 5 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 5 * 3600000 + 18 * 60000).toISOString(),
+      maxElevation: 58, direction: 'descending',
+      orbit: [
+        { lat: 43.0, lon: 124.0 }, { lat: 41.0, lon: 125.0 }, { lat: 39.0, lon: 126.0 },
+        { lat: 37.0, lon: 126.8 }, { lat: 35.0, lon: 127.5 }, { lat: 33.0, lon: 128.0 },
+        { lat: 31.0, lon: 128.5 },
+      ],
+    },
+    {
+      id: 'pass-wv3-1', satellite: 'Maxar WorldView-3', provider: 'Maxar', type: 'optical',
+      resolution: '0.31m', color: '#3b82f6',
+      startTime: new Date(now.getTime() + 8 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 8 * 3600000 + 10 * 60000).toISOString(),
+      maxElevation: 80, direction: 'descending',
+      orbit: [
+        { lat: 41.0, lon: 129.5 }, { lat: 39.5, lon: 129.0 }, { lat: 38.0, lon: 128.5 },
+        { lat: 36.5, lon: 128.0 }, { lat: 35.0, lon: 127.5 }, { lat: 33.5, lon: 127.0 },
+        { lat: 32.0, lon: 126.5 },
+      ],
+    },
+    {
+      id: 'pass-skysat-1', satellite: 'SkySat', provider: 'Planet', type: 'optical',
+      resolution: '0.5m', color: '#22c55e',
+      startTime: new Date(now.getTime() + 12 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 12 * 3600000 + 8 * 60000).toISOString(),
+      maxElevation: 55, direction: 'ascending',
+      orbit: [
+        { lat: 31.0, lon: 127.0 }, { lat: 32.5, lon: 126.5 }, { lat: 34.0, lon: 126.0 },
+        { lat: 35.5, lon: 125.5 }, { lat: 37.0, lon: 125.0 }, { lat: 38.5, lon: 124.5 },
+        { lat: 40.0, lon: 124.0 },
+      ],
+    },
+    {
+      id: 'pass-s2-1', satellite: 'Sentinel-2', provider: 'ESA', type: 'optical',
+      resolution: '10m', color: '#ec4899',
+      startTime: new Date(now.getTime() + 18 * 3600000).toISOString(),
+      endTime: new Date(now.getTime() + 18 * 3600000 + 20 * 60000).toISOString(),
+      maxElevation: 62, direction: 'descending',
+      orbit: [
+        { lat: 42.0, lon: 128.0 }, { lat: 40.0, lon: 128.0 }, { lat: 38.0, lon: 128.0 },
+        { lat: 36.0, lon: 128.0 }, { lat: 34.0, lon: 128.0 }, { lat: 32.0, lon: 128.0 },
+      ],
+    },
+  ];
+  return passes;
+}
+
+// GET /api/aerial/satellite/passes — 한국 주변 실시간 위성 패스 목록 (UP42 API 연동 준비)
+router.get('/satellite/passes', requireAuth, requirePermission('aerial', 'READ'), async (_req, res) => {
+  try {
+    // TODO: UP42 API 연동 시 아래 코드를 실제 API 호출로 교체
+    // const token = await getUp42Token()
+    // const passes = await fetchUp42Catalog(token, { bbox: [124, 33, 132, 39] })
+    const passes = generateKoreaSatellitePasses();
+    res.json({ passes, source: 'simulation', note: 'UP42 API 연동 시 실제 데이터로 교체 예정' });
+  } catch (err) {
+    console.error('[aerial] 위성 패스 조회 오류:', err);
+    res.status(500).json({ error: '위성 패스 조회 실패' });
+  }
+});
+
 // ============================================================
 // OIL INFERENCE 라우트
 // ============================================================
diff --git a/database/migration/022_aerial_spectral_perm.sql b/database/migration/022_aerial_spectral_perm.sql
new file mode 100644
index 0000000..f7790ee
--- /dev/null
+++ b/database/migration/022_aerial_spectral_perm.sql
@@ -0,0 +1,19 @@
+-- aerial:spectral (AI 탐지/분석) 서브탭 권한 추가
+-- 기존 aerial 서브탭(satellite) 뒤, cctv 앞에 배치 (SORT_ORD = 6)
+
+-- 기존 cctv, theory 순서 밀기
+UPDATE AUTH_PERM_TREE SET SORT_ORD = 7 WHERE RSRC_CD = 'aerial:cctv';
+UPDATE AUTH_PERM_TREE SET SORT_ORD = 8 WHERE RSRC_CD = 'aerial:theory';
+
+-- spectral 리소스 추가
+INSERT INTO AUTH_PERM_TREE (RSRC_CD, PARENT_CD, RSRC_NM, RSRC_LEVEL, SORT_ORD)
+VALUES ('aerial:spectral', 'aerial', 'AI 탐지/분석', 1, 6)
+ON CONFLICT (RSRC_CD) DO NOTHING;
+
+-- 기존 역할에 spectral READ 권한 부여 (aerial READ 권한이 있는 역할)
+INSERT INTO AUTH_PERM (ROLE_SN, RSRC_CD, OPER_CD, USE_YN)
+SELECT ap.ROLE_SN, 'aerial:spectral', ap.OPER_CD, ap.USE_YN
+FROM AUTH_PERM ap
+WHERE ap.RSRC_CD = 'aerial'
+  AND ap.USE_YN = 'Y'
+ON CONFLICT (ROLE_SN, RSRC_CD, OPER_CD) DO NOTHING;
diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index 976aca8..140504e 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -1400,23 +1400,23 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
   const { current: map } = useMap()
 
   return (
-    <div className="absolute top-4 left-4 z-10">
-      <div className="flex flex-col gap-2">
+    <div className="absolute top-[80px] left-[10px] z-10">
+      <div className="flex flex-col gap-1">
         <button
           onClick={() => map?.zoomIn()}
-          className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
+          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-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-xs"
         >
           +
         </button>
         <button
           onClick={() => map?.zoomOut()}
-          className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-base"
+          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-text-2 flex items-center justify-center hover:bg-bg-hover hover:text-text-1 transition-all text-xs"
         >
           −
         </button>
         <button
           onClick={() => map?.flyTo({ center: [center[1], center[0]], zoom, duration: 1000 })}
-          className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-border rounded-sm text-text-2 flex items-center justify-center hover:text-text-1 transition-all text-sm"
+          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-text-2 flex items-center justify-center hover:text-text-1 transition-all text-[10px]"
         >
           &#x1F3AF;
         </button>
@@ -1435,7 +1435,7 @@ interface MapLegendProps {
 }
 
 function MapLegend({ dispersionResult, incidentCoord, oilTrajectory = [], selectedModels = new Set(['OpenDrift'] as PredictionModel[]) }: MapLegendProps) {
-  const [minimized, setMinimized] = useState(false)
+  const [minimized, setMinimized] = useState(true)
 
   if (dispersionResult && incidentCoord) {
     return (
diff --git a/frontend/src/common/hooks/useSubMenu.ts b/frontend/src/common/hooks/useSubMenu.ts
index 593d846..af37161 100755
--- a/frontend/src/common/hooks/useSubMenu.ts
+++ b/frontend/src/common/hooks/useSubMenu.ts
@@ -40,9 +40,10 @@ const subMenuConfigs: Record<MainTab, SubMenuItem[] | null> = {
     { id: 'media', label: '영상사진관리', icon: '📷' },
     { id: 'analysis', label: '영상사진합성', icon: '🧩' },
     { id: 'realtime', label: '실시간드론', icon: '🛸' },
-    { id: 'sensor', label: '오염/선박3D분석', icon: '🔍' },
-    { id: 'satellite', label: '위성요청', icon: '🛰' },
+    { id: 'satellite', label: '위성영상', icon: '🛰' },
     { id: 'cctv', label: 'CCTV 조회', icon: '📹' },
+    { id: 'spectral', label: 'AI 탐지/분석', icon: '🤖' },
+    { id: 'sensor', label: '오염/선박3D분석', icon: '🔍' },
     { id: 'theory', label: '항공탐색 이론', icon: '📐' }
   ],
   assets: null,
diff --git a/frontend/src/common/styles/components.css b/frontend/src/common/styles/components.css
index 373fe49..7593fa5 100644
--- a/frontend/src/common/styles/components.css
+++ b/frontend/src/common/styles/components.css
@@ -69,6 +69,76 @@
     color: var(--t3);
   }
 
+  /* Date/Time picker custom styling */
+  .prd-date-input::-webkit-calendar-picker-indicator,
+  .prd-time-input::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    width: 28px;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .prd-date-input,
+  .prd-time-input {
+    font-size: 10px;
+    color-scheme: dark;
+  }
+
+  .prd-date-input::-webkit-datetime-edit,
+  .prd-time-input::-webkit-datetime-edit {
+    color: var(--t2);
+    font-family: var(--fM);
+    font-size: 10px;
+    letter-spacing: 0.3px;
+  }
+
+  .prd-date-input::-webkit-datetime-edit-fields-wrapper,
+  .prd-time-input::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  .prd-date-input::-webkit-datetime-edit-year-field,
+  .prd-date-input::-webkit-datetime-edit-month-field,
+  .prd-date-input::-webkit-datetime-edit-day-field,
+  .prd-time-input::-webkit-datetime-edit-hour-field,
+  .prd-time-input::-webkit-datetime-edit-minute-field,
+  .prd-time-input::-webkit-datetime-edit-ampm-field {
+    color: var(--t2);
+    background: transparent;
+    padding: 1px 2px;
+    border-radius: 2px;
+  }
+
+  .prd-date-input::-webkit-datetime-edit-year-field:focus,
+  .prd-date-input::-webkit-datetime-edit-month-field:focus,
+  .prd-date-input::-webkit-datetime-edit-day-field:focus,
+  .prd-time-input::-webkit-datetime-edit-hour-field:focus,
+  .prd-time-input::-webkit-datetime-edit-minute-field:focus,
+  .prd-time-input::-webkit-datetime-edit-ampm-field:focus {
+    background: rgba(6, 182, 212, 0.12);
+    color: var(--cyan);
+  }
+
+  .prd-date-input::-webkit-datetime-edit-text,
+  .prd-time-input::-webkit-datetime-edit-text {
+    color: var(--t3);
+    padding: 0 1px;
+  }
+
+  /* Time hour/minute select (dark dropdown) */
+  select.prd-i.prd-time-select {
+    color-scheme: dark;
+    -webkit-appearance: menulist !important;
+    appearance: menulist !important;
+    background: var(--bg3) !important;
+    background-image: none !important;
+    padding-right: 4px;
+    color: var(--t1);
+    border-color: var(--bd);
+  }
+
   /* Select Dropdown */
   select.prd-i {
     cursor: pointer;
@@ -210,10 +280,11 @@
   .prd-mc {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 6px 13px;
+    justify-content: center;
+    gap: 4px;
+    padding: 5px 4px;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 9px;
     font-weight: 600;
     font-family: 'Noto Sans KR', sans-serif;
     cursor: pointer;
@@ -294,18 +365,20 @@
   .cod {
     position: absolute;
     bottom: 80px;
-    left: 16px;
-    background: rgba(18, 25, 41, 0.85);
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--bd);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(18, 25, 41, 0.5);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(30, 42, 66, 0.4);
     border-radius: 6px;
-    padding: 8px 12px;
+    padding: 5px 14px;
     font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    color: var(--t2);
+    font-size: 10px;
+    color: #1a1a2e;
+    font-weight: 600;
     z-index: 20;
     display: flex;
-    gap: 16px;
+    gap: 14px;
   }
 
   .cov {
@@ -316,40 +389,41 @@
   /* ═══ Weather Info Panel ═══ */
   .wip {
     position: absolute;
-    top: 16px;
-    left: 16px;
-    background: rgba(18, 25, 41, 0.9);
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--bd);
-    border-radius: 8px;
-    padding: 12px 14px;
+    top: 10px;
+    left: 10px;
+    background: rgba(18, 25, 41, 0.65);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(30, 42, 66, 0.5);
+    border-radius: 6px;
+    padding: 6px 10px;
     z-index: 20;
     display: flex;
-    gap: 20px;
+    gap: 12px;
   }
 
   .wii {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 1px;
     align-items: center;
   }
 
   .wii-icon {
-    font-size: 18px;
-    opacity: 0.6;
+    font-size: 12px;
+    opacity: 0.5;
   }
 
   .wii-value {
-    font-size: 15px;
+    font-size: 11px;
     font-weight: 700;
     color: var(--t1);
     font-family: 'JetBrains Mono', monospace;
   }
 
   .wii-label {
-    font-size: 9px;
-    color: var(--t3);
+    font-size: 7px;
+    color: #1a1a2e;
+    font-weight: 700;
     font-family: 'Noto Sans KR', sans-serif;
   }
 
diff --git a/frontend/src/tabs/aerial/components/AerialView.tsx b/frontend/src/tabs/aerial/components/AerialView.tsx
index 1688a40..7fe6779 100755
--- a/frontend/src/tabs/aerial/components/AerialView.tsx
+++ b/frontend/src/tabs/aerial/components/AerialView.tsx
@@ -5,6 +5,7 @@ import { OilAreaAnalysis } from './OilAreaAnalysis'
 import { RealtimeDrone } from './RealtimeDrone'
 import { SensorAnalysis } from './SensorAnalysis'
 import { SatelliteRequest } from './SatelliteRequest'
+import { WingAI } from './WingAI'
 import { CctvView } from './CctvView'
 
 export function AerialView() {
@@ -16,6 +17,8 @@ export function AerialView() {
         return <AerialTheoryView />
       case 'satellite':
         return <SatelliteRequest />
+      case 'spectral':
+        return <WingAI />
       case 'cctv':
         return <CctvView />
       case 'analysis':
diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
index 613e408..d5fe829 100644
--- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
+++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
@@ -1,4 +1,12 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Map, Source, Layer } from '@vis.gl/react-maplibre'
+import type { StyleSpecification } from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
+import { Marker } from '@vis.gl/react-maplibre'
+import { fetchSatellitePasses } from '../services/aerialApi'
+
+const VWORLD_API_KEY = import.meta.env.VITE_VWORLD_API_KEY || ''
+import type { SatellitePass } from '../services/aerialApi'
 
 interface SatRequest {
   id: string
@@ -9,20 +17,22 @@ interface SatRequest {
   requestDate: string
   expectedReceive: string
   resolution: string
-  status: '촬영중' | '대기' | '완료'
+  status: '촬영중' | '대기' | '완료' | '취소'
   provider?: string
   purpose?: string
   requester?: string
+  /** ISO 날짜 (필터용) */
+  dateKey?: string
 }
 
 const satRequests: SatRequest[] = [
-  { id: 'SAT-004', zone: '제주 서귀포 해상 (유출 해역 중심)', zoneCoord: '33.24°N 126.50°E', zoneArea: '15km²', satellite: 'KOMPSAT-3A', requestDate: '02-20 08:14', expectedReceive: '02-20 14:30', resolution: '0.5m', status: '촬영중', provider: 'KARI', purpose: '유출유 확산 모니터링', requester: '방제과 김해양' },
-  { id: 'SAT-005', zone: '가파도 북쪽 해안선', zoneCoord: '33.17°N 126.27°E', zoneArea: '8km²', satellite: 'KOMPSAT-3', requestDate: '02-20 09:02', expectedReceive: '02-21 09:00', resolution: '1.0m', status: '대기', provider: 'KARI', purpose: '해안선 오염 확인', requester: '방제과 이민수' },
-  { id: 'SAT-006', zone: '마라도 주변 해역', zoneCoord: '33.11°N 126.27°E', zoneArea: '12km²', satellite: 'Sentinel-2', requestDate: '02-20 09:30', expectedReceive: '02-21 11:00', resolution: '10m', status: '대기', provider: 'ESA Copernicus', purpose: '수질 분석용 다분광 촬영', requester: '환경분석팀 박수진' },
-  { id: 'SAT-007', zone: '대정읍 해안 오염 확산 구역', zoneCoord: '33.21°N 126.10°E', zoneArea: '20km²', satellite: 'KOMPSAT-3A', requestDate: '02-20 10:05', expectedReceive: '02-22 08:00', resolution: '0.5m', status: '대기', provider: 'KARI', purpose: '확산 예측 모델 검증', requester: '방제과 김해양' },
-  { id: 'SAT-003', zone: '제주 남방 100해리 해상', zoneCoord: '33.00°N 126.50°E', zoneArea: '25km²', satellite: 'Sentinel-1', requestDate: '02-19 14:00', expectedReceive: '02-19 23:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: 'SAR 유막 탐지', requester: '환경분석팀 박수진' },
-  { id: 'SAT-002', zone: '여수 오동도 인근 해역', zoneCoord: '34.73°N 127.68°E', zoneArea: '18km²', satellite: 'KOMPSAT-3A', requestDate: '02-18 11:30', expectedReceive: '02-18 17:45', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '유출 초기 범위 확인', requester: '방제과 김해양' },
-  { id: 'SAT-001', zone: '통영 해역 남측', zoneCoord: '34.85°N 128.43°E', zoneArea: '30km²', satellite: 'Sentinel-1', requestDate: '02-17 09:00', expectedReceive: '02-17 21:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: '야간 SAR 유막 모니터링', requester: '환경분석팀 박수진' },
+  { id: 'SAT-004', zone: '제주 서귀포 해상 (유출 해역 중심)', zoneCoord: '33.24°N 126.50°E', zoneArea: '15km²', satellite: 'KOMPSAT-3A', requestDate: '03-17 08:14', expectedReceive: '03-17 14:30', resolution: '0.5m', status: '촬영중', provider: 'KARI', purpose: '유출유 확산 모니터링', requester: '방제과 김해양', dateKey: '2026-03-17' },
+  { id: 'SAT-005', zone: '가파도 북쪽 해안선', zoneCoord: '33.17°N 126.27°E', zoneArea: '8km²', satellite: 'KOMPSAT-3', requestDate: '03-17 09:02', expectedReceive: '03-18 09:00', resolution: '1.0m', status: '대기', provider: 'KARI', purpose: '해안선 오염 확인', requester: '방제과 이민수', dateKey: '2026-03-17' },
+  { id: 'SAT-006', zone: '마라도 주변 해역', zoneCoord: '33.11°N 126.27°E', zoneArea: '12km²', satellite: 'Sentinel-2', requestDate: '03-16 09:30', expectedReceive: '03-16 23:00', resolution: '10m', status: '완료', provider: 'ESA Copernicus', purpose: '수질 분석용 다분광 촬영', requester: '환경분석팀 박수진', dateKey: '2026-03-16' },
+  { id: 'SAT-007', zone: '대정읍 해안 오염 확산 구역', zoneCoord: '33.21°N 126.10°E', zoneArea: '20km²', satellite: 'KOMPSAT-3A', requestDate: '03-16 10:05', expectedReceive: '03-17 08:00', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '확산 예측 모델 검증', requester: '방제과 김해양', dateKey: '2026-03-16' },
+  { id: 'SAT-003', zone: '제주 남방 100해리 해상', zoneCoord: '33.00°N 126.50°E', zoneArea: '25km²', satellite: 'Sentinel-1', requestDate: '03-15 14:00', expectedReceive: '03-15 23:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: 'SAR 유막 탐지', requester: '환경분석팀 박수진', dateKey: '2026-03-15' },
+  { id: 'SAT-002', zone: '여수 오동도 인근 해역', zoneCoord: '34.73°N 127.68°E', zoneArea: '18km²', satellite: 'KOMPSAT-3A', requestDate: '03-14 11:30', expectedReceive: '03-14 17:45', resolution: '0.5m', status: '완료', provider: 'KARI', purpose: '유출 초기 범위 확인', requester: '방제과 김해양', dateKey: '2026-03-14' },
+  { id: 'SAT-001', zone: '통영 해역 남측', zoneCoord: '34.85°N 128.43°E', zoneArea: '30km²', satellite: 'Sentinel-1', requestDate: '03-13 09:00', expectedReceive: '03-13 21:00', resolution: '20m', status: '완료', provider: 'ESA Copernicus', purpose: '야간 SAR 유막 모니터링', requester: '환경분석팀 박수진', dateKey: '2026-03-13' },
 ]
 
 const satellites = [
@@ -59,28 +69,70 @@ const up42Satellites = [
   { id: 'cop-dem', name: 'Copernicus DEM', res: '10m', type: 'elevation' as const, color: '#64748b', cloud: 0 },
 ]
 
-const up42Passes = [
-  { sat: 'KOMPSAT-3A', time: '오늘 14:10–14:24', res: '0.5m', cloud: '≤10%', note: '최우선 추천', color: '#a855f7' },
-  { sat: 'Pléiades Neo', time: '오늘 14:38–14:52', res: '0.3m', cloud: '≤15%', note: '초고해상도', color: '#06b6d4' },
-  { sat: 'Sentinel-1 SAR', time: '오늘 16:55–17:08', res: '20m', cloud: '야간/우천 가능', note: 'SAR', color: '#f59e0b' },
-  { sat: 'KOMPSAT-3', time: '내일 09:12', res: '1.0m', cloud: '≤15%', note: '', color: '#a855f7' },
-  { sat: 'Maxar WV-3', time: '내일 13:20', res: '0.5m', cloud: '≤20%', note: '', color: '#3b82f6' },
-]
+// up42Passes — 실시간 패스로 대체됨 (satPasses from API)
+
+const SAT_MAP_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {
+    'carto-dark': {
+      type: 'raster',
+      tiles: [
+        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+      ],
+      tileSize: 256,
+    },
+  },
+  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
+}
+
+/** 좌표 문자열 파싱 ("33.24°N 126.50°E" → {lat, lon}) */
+function parseCoord(coordStr: string): { lat: number; lon: number } | null {
+  const m = coordStr.match(/([\d.]+)°N\s+([\d.]+)°E/)
+  if (!m) return null
+  return { lat: parseFloat(m[1]), lon: parseFloat(m[2]) }
+}
 
 type SatModalPhase = 'none' | 'provider' | 'blacksky' | 'up42'
 
 export function SatelliteRequest() {
+  const [requests, setRequests] = useState(satRequests)
+  const [mainTab, setMainTab] = useState<'list' | 'map'>('list')
   const [statusFilter, setStatusFilter] = useState('전체')
   const [modalPhase, setModalPhase] = useState<SatModalPhase>('none')
   const [selectedRequest, setSelectedRequest] = useState<SatRequest | null>(null)
-  const [showMoreCompleted, setShowMoreCompleted] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
+  const PAGE_SIZE = 5
   // UP42 sub-tab
   const [up42SubTab, setUp42SubTab] = useState<'optical' | 'sar' | 'elevation'>('optical')
   const [up42SelSat, setUp42SelSat] = useState<string | null>(null)
-  const [up42SelPass, setUp42SelPass] = useState<number | null>(null)
+  const [up42SelPass, setUp42SelPass] = useState<string | null>(null)
+  const [satPasses, setSatPasses] = useState<SatellitePass[]>([])
+  const [satPassesLoading, setSatPassesLoading] = useState(false)
+  // 히스토리 지도 — 캘린더 + 선택 항목
+  const [mapSelectedDate, setMapSelectedDate] = useState(() => {
+    const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+  })
+  const [mapSelectedItem, setMapSelectedItem] = useState<SatRequest | null>(null)
+  const satImgOpacity = 90
+  const satImgBrightness = 100
+  const satShowOverlay = true
 
   const modalRef = useRef<HTMLDivElement>(null)
 
+  const loadSatPasses = useCallback(async () => {
+    setSatPassesLoading(true)
+    try {
+      const passes = await fetchSatellitePasses()
+      setSatPasses(passes)
+    } catch {
+      setSatPasses([])
+    } finally {
+      setSatPassesLoading(false)
+    }
+  }, [])
+
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
@@ -91,15 +143,21 @@ export function SatelliteRequest() {
     return () => document.removeEventListener('mousedown', handler)
   }, [modalPhase])
 
-  const allRequests = showMoreCompleted ? satRequests : satRequests.filter(r => r.status !== '완료' || r.id === 'SAT-003')
+  // UP42 모달 열릴 때 위성 패스 로드
+  useEffect(() => {
+    if (modalPhase === 'up42') loadSatPasses()
+  }, [modalPhase, loadSatPasses])
 
-  const filtered = allRequests.filter(r => {
+  const filtered = requests.filter(r => {
     if (statusFilter === '전체') return true
     if (statusFilter === '대기') return r.status === '대기'
     if (statusFilter === '진행') return r.status === '촬영중'
     if (statusFilter === '완료') return r.status === '완료'
+    if (statusFilter === '취소') return r.status === '취소'
     return true
   })
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+  const pagedItems = filtered.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
 
   const statusBadge = (s: SatRequest['status']) => {
     if (s === '촬영중') return (
@@ -110,6 +168,9 @@ export function SatelliteRequest() {
     if (s === '대기') return (
       <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold font-korean" style={{ background: 'rgba(59,130,246,.15)', border: '1px solid rgba(59,130,246,.3)', color: 'var(--blue)' }}>⏳ 대기</span>
     )
+    if (s === '취소') return (
+      <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold font-korean" style={{ background: 'rgba(239,68,68,.1)', border: '1px solid rgba(239,68,68,.2)', color: 'var(--red)' }}>✕ 취소</span>
+    )
     return (
       <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-semibold font-korean" style={{ background: 'rgba(34,197,94,.1)', border: '1px solid rgba(34,197,94,.2)', color: 'var(--green)' }}>✅ 완료</span>
     )
@@ -122,7 +183,7 @@ export function SatelliteRequest() {
     { value: '0.5m', label: '최고 해상도', color: 'var(--cyan)' },
   ]
 
-  const filters = ['전체', '대기', '진행', '완료']
+  const filters = ['전체', '대기', '진행', '완료', '취소']
 
   const up42Filtered = up42Satellites.filter(s => s.type === up42SubTab)
 
@@ -138,19 +199,35 @@ export function SatelliteRequest() {
   const bsInputStyle = { border: '1px solid #21262d', background: '#161b22', color: '#e2e8f0' }
 
   return (
-    <div className="overflow-y-auto py-5 px-6">
-      {/* 헤더 */}
-      <div className="flex items-center justify-between mb-5">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'linear-gradient(135deg,rgba(59,130,246,.2),rgba(168,85,247,.2))', border: '1px solid rgba(59,130,246,.3)' }}>🛰</div>
-          <div>
-            <div className="text-base font-bold font-korean text-text-1">위성 촬영 요청</div>
-            <div className="text-[11px] text-text-3 font-korean mt-0.5">위성 촬영 임무를 요청하고 수신 현황을 관리합니다</div>
-          </div>
+    <div className="overflow-y-auto px-6 pt-1 pb-2" style={{ height: mainTab === 'map' ? '100%' : undefined }}>
+      {/* 헤더 + 탭 + 새요청 한 줄 (높이 통일) */}
+      <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" style={{ background: 'linear-gradient(135deg,rgba(59,130,246,.2),rgba(168,85,247,.2))', border: '1px solid rgba(59,130,246,.3)' }}>🛰</div>
+          <div className="text-[12px] font-bold font-korean text-text-1">위성 촬영 요청</div>
         </div>
-        <button onClick={() => setModalPhase('provider')} className="px-4 py-2.5 text-white border-none rounded-sm text-[13px] font-semibold cursor-pointer font-korean flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg,var(--blue),var(--purple))' }}>🛰 새 요청</button>
+        <div className="flex gap-1 h-7">
+          <button
+            onClick={() => setMainTab('list')}
+            className="px-2.5 h-full rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
+            style={mainTab === 'list'
+              ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
+              : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+            }
+          >📋 요청 목록</button>
+          <button
+            onClick={() => setMainTab('map')}
+            className="px-2.5 h-full rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
+            style={mainTab === 'map'
+              ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
+              : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+            }
+          >🗺 히스토리 지도</button>
+        </div>
+        <button onClick={() => setModalPhase('provider')} className="ml-auto px-3 h-7 text-white border-none rounded-sm text-[10px] font-semibold cursor-pointer font-korean flex items-center gap-1 shrink-0" style={{ background: 'linear-gradient(135deg,var(--blue),var(--purple))' }}>🛰 새 요청</button>
       </div>
 
+      {mainTab === 'list' && (<>
       {/* 요약 통계 */}
       <div className="grid grid-cols-4 gap-3 mb-5">
         {stats.map((s, i) => (
@@ -187,8 +264,8 @@ export function SatelliteRequest() {
           ))}
         </div>
 
-        {/* 데이터 행 */}
-        {filtered.map(r => (
+        {/* 데이터 행 (페이징) */}
+        {pagedItems.map(r => (
           <div key={r.id}>
             <div
               onClick={() => setSelectedRequest(selectedRequest?.id === r.id ? null : r)}
@@ -197,7 +274,7 @@ export function SatelliteRequest() {
                 gridTemplateColumns: '60px 1fr 100px 100px 120px 80px 90px',
                 borderColor: 'rgba(255,255,255,.04)',
                 background: selectedRequest?.id === r.id ? 'rgba(99,102,241,.06)' : r.status === '촬영중' ? 'rgba(234,179,8,.03)' : 'transparent',
-                opacity: r.status === '완료' ? 0.7 : 1,
+                opacity: (r.status === '완료' || r.status === '취소') ? 0.6 : 1,
               }}
             >
               <div className="text-[11px] font-mono text-text-2">{r.id}</div>
@@ -232,8 +309,18 @@ export function SatelliteRequest() {
                   {r.status === '완료' && (
                     <button className="px-3 py-1.5 text-[10px] font-semibold font-korean rounded border cursor-pointer hover:bg-bg-hover transition-colors" style={{ background: 'rgba(34,197,94,.08)', borderColor: 'rgba(34,197,94,.2)', color: 'var(--green)' }}>📥 영상 다운로드</button>
                   )}
-                  {r.status === '대기' && (
-                    <button className="px-3 py-1.5 text-[10px] font-semibold font-korean rounded border cursor-pointer hover:bg-bg-hover transition-colors" style={{ background: 'rgba(239,68,68,.08)', borderColor: 'rgba(239,68,68,.2)', color: 'var(--red)' }}>✕ 요청 취소</button>
+                  {(r.status === '대기' || r.status === '촬영중') && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (confirm(`${r.id} (${r.zone}) 위성 촬영 요청을 취소하시겠습니까?`)) {
+                          setRequests(prev => prev.map(req => req.id === r.id ? { ...req, status: '취소' as const } : req))
+                          setSelectedRequest(null)
+                        }
+                      }}
+                      className="px-3 py-1.5 text-[10px] font-semibold font-korean rounded border cursor-pointer hover:bg-bg-hover transition-colors"
+                      style={{ background: 'rgba(239,68,68,.08)', borderColor: 'rgba(239,68,68,.2)', color: 'var(--red)' }}
+                    >✕ 요청 취소</button>
                   )}
                 </div>
               </div>
@@ -241,11 +328,36 @@ export function SatelliteRequest() {
           </div>
         ))}
 
-        <div
-          onClick={() => setShowMoreCompleted(!showMoreCompleted)}
-          className="text-center py-2.5 text-[10px] text-text-3 font-korean cursor-pointer hover:text-text-2 transition-colors"
-        >
-          {showMoreCompleted ? '▲ 완료 목록 접기' : '▼ 이전 완료 목록 더보기 (6건)'}
+        {/* 페이징 */}
+        <div className="flex items-center justify-between px-4 py-2">
+          <div className="text-[9px] text-text-3 font-korean">
+            총 {filtered.length}건 중 {(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, filtered.length)}
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+              disabled={currentPage <= 1}
+              className="px-2 py-1 rounded text-[10px] font-mono cursor-pointer border transition-colors"
+              style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: currentPage <= 1 ? 'var(--t3)' : 'var(--t1)', opacity: currentPage <= 1 ? 0.5 : 1 }}
+            >◀</button>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
+              <button
+                key={p}
+                onClick={() => setCurrentPage(p)}
+                className="w-7 h-7 rounded text-[10px] font-bold font-mono cursor-pointer border transition-colors"
+                style={currentPage === p
+                  ? { background: 'rgba(59,130,246,.15)', borderColor: 'rgba(59,130,246,.3)', color: 'var(--blue)' }
+                  : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+                }
+              >{p}</button>
+            ))}
+            <button
+              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+              disabled={currentPage >= totalPages}
+              className="px-2 py-1 rounded text-[10px] font-mono cursor-pointer border transition-colors"
+              style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: currentPage >= totalPages ? 'var(--t3)' : 'var(--t1)', opacity: currentPage >= totalPages ? 0.5 : 1 }}
+            >▶</button>
+          </div>
         </div>
       </div>
 
@@ -288,6 +400,179 @@ export function SatelliteRequest() {
           </div>
         </div>
       </div>
+      </>)}
+
+      {/* ═══ 촬영 히스토리 지도 뷰 ═══ */}
+      {mainTab === 'map' && (() => {
+        const dateFiltered = requests.filter(r => r.dateKey === mapSelectedDate)
+        const dateHasDots = [...new Set(requests.map(r => r.dateKey).filter(Boolean))]
+        return (
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden relative" style={{ height: 'calc(100vh - 160px)' }}>
+          <Map
+            initialViewState={{ longitude: 127.5, latitude: 34.5, zoom: 7 }}
+            mapStyle={SAT_MAP_STYLE}
+            style={{ width: '100%', height: '100%' }}
+            attributionControl={false}
+          >
+            {/* 선택된 날짜의 촬영 구역 폴리곤 */}
+            {dateFiltered.map(r => {
+              const coord = parseCoord(r.zoneCoord)
+              if (!coord) return null
+              const areaKm = parseFloat(r.zoneArea) || 10
+              const delta = Math.sqrt(areaKm) * 0.005
+              const isSelected = mapSelectedItem?.id === r.id
+              const statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6'
+              return (
+                <Source key={r.id} id={`zone-${r.id}`} type="geojson" data={{
+                  type: 'Feature', properties: {},
+                  geometry: { type: 'Polygon', coordinates: [[
+                    [coord.lon - delta, coord.lat - delta],
+                    [coord.lon + delta, coord.lat - delta],
+                    [coord.lon + delta, coord.lat + delta],
+                    [coord.lon - delta, coord.lat + delta],
+                    [coord.lon - delta, coord.lat - delta],
+                  ]] },
+                }}>
+                  <Layer id={`zone-fill-${r.id}`} type="fill" paint={{ 'fill-color': statusColor, 'fill-opacity': isSelected ? 0.35 : 0.12 }} />
+                  <Layer id={`zone-line-${r.id}`} type="line" paint={{ 'line-color': statusColor, 'line-width': isSelected ? 3 : 1.5 }} />
+                </Source>
+              )
+            })}
+
+            {/* 선택된 완료 항목: VWorld 위성 영상 오버레이 (BlackSky 스타일) */}
+            {mapSelectedItem && mapSelectedItem.status === '완료' && satShowOverlay && VWORLD_API_KEY && (
+              <Source
+                id="sat-vworld-overlay"
+                type="raster"
+                tiles={[`https://api.vworld.kr/req/wmts/1.0.0/${VWORLD_API_KEY}/Satellite/{z}/{y}/{x}.jpeg`]}
+                tileSize={256}
+              >
+                <Layer id="sat-vworld-layer" type="raster" paint={{
+                  'raster-opacity': satImgOpacity / 100,
+                  'raster-brightness-max': Math.min(satImgBrightness / 100 * 1.2, 1),
+                  'raster-brightness-min': Math.max((satImgBrightness - 100) / 200, 0),
+                }} />
+              </Source>
+            )}
+
+            {/* 선택된 항목 마커 */}
+            {mapSelectedItem && (() => {
+              const coord = parseCoord(mapSelectedItem.zoneCoord)
+              if (!coord) return null
+              return (
+                <Marker longitude={coord.lon} latitude={coord.lat} anchor="center">
+                  <div className="relative">
+                    <div className="w-4 h-4 rounded-full" style={{ background: 'rgba(6,182,212,.6)', border: '2px solid #fff', boxShadow: '0 0 12px rgba(6,182,212,.5)' }} />
+                    <div className="absolute inset-0 w-4 h-4 rounded-full animate-ping" style={{ background: 'rgba(6,182,212,.3)' }} />
+                  </div>
+                </Marker>
+              )
+            })()}
+          </Map>
+
+          {/* 좌상단: 캘린더 + 날짜별 리스트 */}
+          <div className="absolute top-3 left-3 w-[260px] rounded-lg border border-border z-10 overflow-hidden" style={{ background: 'rgba(18,25,41,.92)', backdropFilter: 'blur(8px)' }}>
+            {/* 캘린더 헤더 */}
+            <div className="px-3 py-2 border-b border-border">
+              <div className="text-[10px] font-bold text-text-2 font-korean mb-2">📅 촬영 날짜 선택</div>
+              <input
+                type="date"
+                value={mapSelectedDate}
+                onChange={e => { setMapSelectedDate(e.target.value); setMapSelectedItem(null) }}
+                className="w-full px-2.5 py-1.5 bg-bg-3 border border-border rounded text-[11px] font-mono text-text-1 outline-none focus:border-[var(--cyan)] transition-colors"
+              />
+              {/* 촬영 이력 있는 날짜 점 표시 */}
+              <div className="flex flex-wrap gap-1 mt-2">
+                {dateHasDots.map(d => (
+                  <button
+                    key={d}
+                    onClick={() => { setMapSelectedDate(d!); setMapSelectedItem(null) }}
+                    className="px-1.5 py-0.5 rounded text-[8px] font-mono cursor-pointer border transition-colors"
+                    style={mapSelectedDate === d
+                      ? { background: 'rgba(6,182,212,.2)', borderColor: 'var(--cyan)', color: 'var(--cyan)' }
+                      : { background: 'var(--bg0)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+                    }
+                  >{d?.slice(5)}</button>
+                ))}
+              </div>
+            </div>
+
+            {/* 날짜별 촬영 리스트 */}
+            <div className="max-h-[35vh] overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
+              <div className="px-3 py-1.5 border-b border-border text-[9px] text-text-3 font-korean sticky top-0" style={{ background: 'rgba(18,25,41,.95)' }}>
+                {mapSelectedDate} · {dateFiltered.length}건
+              </div>
+              {dateFiltered.length === 0 ? (
+                <div className="px-3 py-4 text-[10px] text-text-3 font-korean text-center">이 날짜에 촬영 이력이 없습니다</div>
+              ) : dateFiltered.map(r => {
+                const statusColor = r.status === '촬영중' ? '#eab308' : r.status === '완료' ? '#22c55e' : r.status === '취소' ? '#ef4444' : '#3b82f6'
+                const isSelected = mapSelectedItem?.id === r.id
+                return (
+                  <div
+                    key={r.id}
+                    onClick={() => setMapSelectedItem(isSelected ? null : r)}
+                    className="px-3 py-2 border-b cursor-pointer transition-colors"
+                    style={{
+                      borderColor: 'rgba(255,255,255,.04)',
+                      background: isSelected ? 'rgba(6,182,212,.1)' : 'transparent',
+                    }}
+                  >
+                    <div className="flex items-center justify-between mb-0.5">
+                      <span className="text-[10px] font-mono text-text-2">{r.id}</span>
+                      <span className="text-[8px] font-bold px-1.5 py-px rounded-full" style={{ background: `${statusColor}20`, color: statusColor }}>{r.status}</span>
+                    </div>
+                    <div className="text-[9px] text-text-1 font-korean truncate">{r.zone}</div>
+                    <div className="text-[8px] text-text-3 font-mono mt-0.5">{r.satellite} · {r.resolution}</div>
+                    {r.status === '완료' && (
+                      <div className="mt-1 text-[8px] font-korean" style={{ color: 'var(--cyan)' }}>📷 클릭하여 영상 보기</div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* 우상단: 범례 */}
+          <div className="absolute top-3 right-3 px-3 py-2.5 rounded-lg border border-border z-10" style={{ background: 'rgba(18,25,41,.9)', backdropFilter: 'blur(8px)' }}>
+            <div className="text-[10px] font-bold text-text-2 font-korean mb-2">촬영 이력</div>
+            {[
+              { label: '촬영중', color: '#eab308' },
+              { label: '대기', color: '#3b82f6' },
+              { label: '완료', color: '#22c55e' },
+              { label: '취소', color: '#ef4444' },
+            ].map(item => (
+              <div key={item.label} className="flex items-center gap-2 mb-1">
+                <div className="w-3 h-3 rounded-sm" style={{ background: item.color, opacity: 0.4, border: `1px solid ${item.color}` }} />
+                <span className="text-[9px] text-text-3 font-korean">{item.label}</span>
+              </div>
+            ))}
+            <div className="text-[8px] text-text-3 font-korean mt-1.5 pt-1.5 border-t border-border">총 {requests.length}건</div>
+          </div>
+
+          {/* 선택된 항목 상세 (하단) */}
+          {mapSelectedItem && (
+            <div className="absolute bottom-3 left-1/2 -translate-x-1/2 px-4 py-3 rounded-lg border border-border z-10 max-w-[500px]" style={{ background: 'rgba(18,25,41,.95)', backdropFilter: 'blur(8px)' }}>
+              <div className="flex items-center gap-3">
+                <div className="flex-1">
+                  <div className="text-[11px] font-bold text-text-1 font-korean mb-0.5">{mapSelectedItem.zone}</div>
+                  <div className="text-[9px] text-text-3 font-mono">{mapSelectedItem.satellite} · {mapSelectedItem.resolution} · {mapSelectedItem.zoneCoord}</div>
+                </div>
+                <div className="text-center shrink-0">
+                  <div className="text-[8px] text-text-3 font-korean">요청</div>
+                  <div className="text-[10px] font-mono text-text-1">{mapSelectedItem.requestDate}</div>
+                </div>
+                {mapSelectedItem.status === '완료' && (
+                  <div className="px-2 py-1 rounded text-[9px] font-bold font-korean shrink-0" style={{ background: 'rgba(34,197,94,.15)', color: '#22c55e' }}>
+                    📷 영상 표출중
+                  </div>
+                )}
+                <button onClick={() => setMapSelectedItem(null)} className="text-text-3 bg-transparent border-none cursor-pointer text-sm">✕</button>
+              </div>
+            </div>
+          )}
+        </div>
+        )
+      })()}
 
       {/* ═══ 모달: 제공자 선택 ═══ */}
       {modalPhase !== 'none' && (
@@ -596,7 +881,7 @@ export function SatelliteRequest() {
 
             {/* ── UP42 카탈로그 주문 ── */}
             {modalPhase === 'up42' && (
-              <div className="border rounded-[14px] w-[920px] max-h-[90vh] flex flex-col overflow-hidden border-[rgba(59,130,246,.3)]" style={{ background: '#0d1117', boxShadow: '0 24px 80px rgba(0,0,0,.7)' }}>
+              <div className="border rounded-[14px] w-[920px] flex flex-col overflow-hidden border-[rgba(59,130,246,.3)]" style={{ background: '#0d1117', boxShadow: '0 24px 80px rgba(0,0,0,.7)', height: '85vh' }}>
                 {/* 헤더 */}
                 <div className="px-6 py-4 border-b border-[#21262d] flex items-center justify-between shrink-0 relative">
                   <div className="absolute top-0 left-0 right-0 h-0.5" style={{ background: 'linear-gradient(90deg,#3b82f6,#06b6d4,#22c55e)' }} />
@@ -672,83 +957,121 @@ export function SatelliteRequest() {
                     </div>
                   </div>
 
-                  {/* 오른쪽: 지도 + AOI + 패스 */}
+                  {/* 오른쪽: 궤도 지도 + 패스 목록 */}
                   <div className="flex-1 flex flex-col overflow-hidden min-w-0">
-                    {/* 지도 영역 (placeholder) */}
-                    <div className="flex-1 relative" style={{ background: '#0a0e18' }}>
-                      {/* 검색바 */}
-                      <div className="absolute top-3 left-3 right-3 flex items-center gap-2 px-3 py-2 rounded-lg z-10 border border-[#21262d]" style={{ background: 'rgba(13,17,23,.9)', backdropFilter: 'blur(8px)' }}>
-                        <span className="text-[#8690a6] text-[13px]">🔍</span>
-                        <input type="text" placeholder="위치 또는 좌표 입력..." className="flex-1 bg-transparent border-none outline-none text-[11px] font-korean text-[#e2e8f0]" />
-                      </div>
+                    {/* 지도 영역 — 위성 궤도 표시 (최소 높이 보장) */}
+                    <div className="flex-1 relative" style={{ minHeight: 350 }}>
+                      <Map
+                        initialViewState={{ longitude: 128, latitude: 36, zoom: 5.5 }}
+                        mapStyle={SAT_MAP_STYLE}
+                        style={{ width: '100%', height: '100%' }}
+                        attributionControl={false}
+                      >
+                        {/* 한국 영역 AOI 박스 */}
+                        <Source id="korea-aoi" type="geojson" data={{
+                          type: 'Feature',
+                          properties: {},
+                          geometry: { type: 'Polygon', coordinates: [[[124, 33], [132, 33], [132, 39], [124, 39], [124, 33]]] },
+                        }}>
+                          <Layer id="korea-aoi-fill" type="fill" paint={{ 'fill-color': '#3b82f6', 'fill-opacity': 0.05 }} />
+                          <Layer id="korea-aoi-line" type="line" paint={{ 'line-color': '#3b82f6', 'line-width': 1.5, 'line-dasharray': [4, 3] }} />
+                        </Source>
 
-                      {/* 지도 placeholder */}
-                      <div className="absolute inset-0 flex items-center justify-center">
-                        <div className="text-center">
-                          <div className="text-3xl mb-2 opacity-20">🗺</div>
-                          <div className="text-[11px] font-korean opacity-40 text-[#64748b]">지도 영역 — AOI를 그려 위성 패스를 확인하세요</div>
+                        {/* 위성 궤도 라인 */}
+                        {satPasses.map(pass => (
+                          <Source key={pass.id} id={`orbit-${pass.id}`} type="geojson" data={{
+                            type: 'Feature',
+                            properties: {},
+                            geometry: { type: 'LineString', coordinates: pass.orbit.map(p => [p.lon, p.lat]) },
+                          }}>
+                            <Layer
+                              id={`orbit-line-${pass.id}`}
+                              type="line"
+                              paint={{
+                                'line-color': pass.color,
+                                'line-width': up42SelPass === pass.id ? 3 : 1.5,
+                                'line-opacity': up42SelPass === pass.id ? 1 : up42SelPass ? 0.2 : 0.6,
+                                'line-dasharray': pass.type === 'sar' ? [6, 4] : [1],
+                              }}
+                            />
+                            {/* 궤도 위 위성 위치 (중간점) */}
+                            {(up42SelPass === pass.id || !up42SelPass) && (
+                              <Layer
+                                id={`orbit-point-${pass.id}`}
+                                type="circle"
+                                filter={['==', '$type', 'LineString']}
+                                paint={{}}
+                              />
+                            )}
+                          </Source>
+                        ))}
+                      </Map>
+
+                      {/* 범례 오버레이 */}
+                      <div className="absolute top-3 left-3 px-3 py-2 rounded-lg z-10 border border-[#21262d]" style={{ background: 'rgba(13,17,23,.9)', backdropFilter: 'blur(8px)' }}>
+                        <div className="text-[9px] font-bold text-[#64748b] mb-1.5">🛰 위성 궤도</div>
+                        {satPasses.slice(0, 4).map(p => (
+                          <div key={p.id} className="flex items-center gap-1.5 mb-1">
+                            <div className="w-3 h-[2px] rounded-sm" style={{ background: p.color }} />
+                            <span className="text-[8px] text-[#94a3b8]">{p.satellite}</span>
+                          </div>
+                        ))}
+                        <div className="flex items-center gap-1.5 mt-1.5 pt-1.5 border-t border-[#21262d]">
+                          <div className="w-3 h-3 rounded border border-[#3b82f6]" style={{ background: 'rgba(59,130,246,.1)' }} />
+                          <span className="text-[8px] text-[#64748b]">한국 영역 AOI</span>
                         </div>
                       </div>
 
-                      {/* AOI 도구 버튼 (오른쪽 사이드) */}
-                      <div className="absolute top-14 right-3 flex flex-col gap-1 p-1.5 rounded-lg z-10 border border-[#21262d]" style={{ background: 'rgba(13,17,23,.9)' }}>
-                        <div className="text-[7px] font-bold text-center mb-0.5 text-[#64748b]">ADD</div>
-                        {[
-                          { icon: '⬜', title: '사각형 AOI' },
-                          { icon: '🔷', title: '다각형 AOI' },
-                          { icon: '⭕', title: '원형 AOI' },
-                          { icon: '📁', title: '파일 업로드' },
-                        ].map((t, i) => (
-                          <button key={i} className="w-7 h-7 flex items-center justify-center rounded text-sm cursor-pointer border-none bg-[#161b22] text-[#8690a6]" title={t.title}>{t.icon}</button>
-                        ))}
-                        <div className="h-px my-0.5 bg-[#21262d]" />
-                        <div className="text-[7px] font-bold text-center mb-0.5 text-[#64748b]">AOI</div>
-                        <button className="w-7 h-7 flex items-center justify-center rounded text-sm cursor-pointer border-none bg-[#161b22] text-[#8690a6]" title="저장된 AOI">💾</button>
-                        <button className="w-7 h-7 flex items-center justify-center rounded text-sm cursor-pointer border-none bg-[#161b22] text-[#ef4444]" title="AOI 삭제">🗑</button>
-                      </div>
-
-                      {/* 줌 컨트롤 */}
-                      <div className="absolute bottom-3 right-3 flex flex-col rounded-md overflow-hidden z-10 border border-[#21262d]">
-                        <button className="w-7 h-7 flex items-center justify-center text-sm cursor-pointer border-none bg-[#161b22] text-[#8690a6]">+</button>
-                        <button className="w-7 h-7 flex items-center justify-center text-sm cursor-pointer border-none border-t border-t-[#21262d] bg-[#161b22] text-[#8690a6]">−</button>
-                      </div>
-
-                      {/* 이 지역 검색 버튼 */}
-                      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10">
-                        <button className="px-4 py-2 rounded-full text-[10px] font-semibold cursor-pointer font-korean text-white border-none" style={{ background: 'rgba(59,130,246,.9)', boxShadow: '0 2px 12px rgba(59,130,246,.3)' }}>🔍 이 지역 검색</button>
-                      </div>
+                      {/* 로딩 */}
+                      {satPassesLoading && (
+                        <div className="absolute inset-0 flex items-center justify-center z-10" style={{ background: 'rgba(0,0,0,.5)' }}>
+                          <div className="text-[11px] text-[#60a5fa] font-korean animate-pulse">🛰 위성 패스 조회 중...</div>
+                        </div>
+                      )}
                     </div>
 
                     {/* 위성 패스 타임라인 */}
-                    <div className="border-t border-[#21262d] px-4 py-3 shrink-0" style={{ background: 'rgba(13,17,23,.95)' }}>
-                      <div className="text-[10px] font-bold font-korean mb-2 text-[#e2e8f0]">🛰 오늘 가용 위성 패스 — 선택된 AOI 통과 예정</div>
+                    <div className="border-t border-[#21262d] px-4 py-3 shrink-0 max-h-[200px] overflow-y-auto" style={{ background: 'rgba(13,17,23,.95)', scrollbarWidth: 'thin', scrollbarColor: '#21262d transparent' }}>
+                      <div className="text-[10px] font-bold font-korean mb-2 text-[#e2e8f0]">
+                        🛰 한국 주변 실시간 위성 패스 ({satPasses.length}개)
+                        <span className="text-[8px] text-[#64748b] font-normal ml-2">클릭하여 궤도 확인</span>
+                      </div>
                       <div className="flex flex-col gap-1.5">
-                        {up42Passes.map((p, i) => (
-                          <div
-                            key={i}
-                            onClick={() => setUp42SelPass(up42SelPass === i ? null : i)}
-                            className="flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors"
-                            style={{
-                              background: up42SelPass === i ? 'rgba(59,130,246,.1)' : '#161b22',
-                              border: up42SelPass === i ? '1px solid rgba(59,130,246,.3)' : '1px solid #21262d',
-                            }}
-                          >
-                            <div className="w-1.5 h-5 rounded-full shrink-0" style={{ background: p.color }} />
-                            <div className="flex-1 flex items-center gap-3 min-w-0">
-                              <span className="text-[10px] font-bold font-korean min-w-[100px] text-[#e2e8f0]">{p.sat}</span>
-                              <span className="text-[9px] font-bold font-mono min-w-[110px] text-[#60a5fa]">{p.time}</span>
-                              <span className="text-[9px] font-mono text-cyan-500">{p.res}</span>
-                              <span className="text-[8px] font-mono text-[#64748b]">{p.cloud}</span>
-                            </div>
-                            {p.note && (
+                        {satPasses.map(pass => {
+                          const start = new Date(pass.startTime)
+                          const timeStr = `${start.getHours().toString().padStart(2, '0')}:${start.getMinutes().toString().padStart(2, '0')}`
+                          const diffH = Math.max(0, (start.getTime() - Date.now()) / 3600000)
+                          const urgency = diffH < 3 ? '긴급' : diffH < 8 ? '예정' : '내일'
+                          return (
+                            <div
+                              key={pass.id}
+                              onClick={() => setUp42SelPass(up42SelPass === pass.id ? null : pass.id)}
+                              className="flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors"
+                              style={{
+                                background: up42SelPass === pass.id ? 'rgba(59,130,246,.1)' : '#161b22',
+                                border: up42SelPass === pass.id ? `1px solid ${pass.color}40` : '1px solid #21262d',
+                              }}
+                            >
+                              <div className="w-1.5 h-6 rounded-full shrink-0" style={{ background: pass.color }} />
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2">
+                                  <span className="text-[10px] font-bold font-korean text-[#e2e8f0]">{pass.satellite}</span>
+                                  <span className="text-[8px] text-[#64748b]">{pass.provider}</span>
+                                </div>
+                                <div className="flex items-center gap-2 mt-0.5">
+                                  <span className="text-[9px] font-bold font-mono text-[#60a5fa]">{timeStr}</span>
+                                  <span className="text-[9px] font-mono" style={{ color: pass.color }}>{pass.resolution}</span>
+                                  <span className="text-[8px] font-mono text-[#64748b]">EL {pass.maxElevation}° · {pass.direction === 'ascending' ? '↗ 상승' : '↘ 하강'}</span>
+                                </div>
+                              </div>
                               <span className="px-1.5 py-px rounded text-[8px] font-bold shrink-0" style={{
-                                background: p.note === '최우선 추천' ? 'rgba(34,197,94,.1)' : p.note === '초고해상도' ? 'rgba(6,182,212,.1)' : p.note === 'SAR' ? 'rgba(245,158,11,.1)' : 'rgba(99,102,241,.1)',
-                                color: p.note === '최우선 추천' ? '#22c55e' : p.note === '초고해상도' ? '#06b6d4' : p.note === 'SAR' ? '#f59e0b' : '#818cf8',
-                              }}>{p.note}</span>
-                            )}
-                            {up42SelPass === i && <span className="text-xs text-blue-500">✓</span>}
-                          </div>
-                        ))}
+                                background: urgency === '긴급' ? 'rgba(239,68,68,.1)' : urgency === '예정' ? 'rgba(6,182,212,.1)' : 'rgba(100,116,139,.1)',
+                                color: urgency === '긴급' ? '#ef4444' : urgency === '예정' ? '#06b6d4' : '#64748b',
+                              }}>{urgency}</span>
+                              {up42SelPass === pass.id && <span className="text-xs text-blue-500">✓</span>}
+                            </div>
+                          )
+                        })}
                       </div>
                     </div>
                   </div>
@@ -759,7 +1082,7 @@ export function SatelliteRequest() {
                   <div className="text-[9px] font-korean text-[#64748b]">원하는 위성을 찾지 못했나요? <span className="text-[#60a5fa] cursor-pointer">태스킹 주문 생성</span> 또는 <span className="text-[#60a5fa] cursor-pointer">자세히 보기 ↗</span></div>
                   <div className="flex items-center gap-2">
                     <span className="text-[11px] font-korean mr-1.5 text-[#8690a6]">
-                      선택: {up42SelSat ? up42Satellites.find(s => s.id === up42SelSat)?.name : '없음'}
+                      선택: {up42SelPass ? satPasses.find(p => p.id === up42SelPass)?.satellite : up42SelSat ? up42Satellites.find(s => s.id === up42SelSat)?.name : '없음'}
                     </span>
                     <button onClick={() => setModalPhase('provider')} className="px-4 py-2 rounded-lg border border-[#21262d] text-[11px] font-semibold cursor-pointer font-korean text-[#94a3b8] bg-[#161b22]">← 뒤로</button>
                     <button
diff --git a/frontend/src/tabs/aerial/components/WingAI.tsx b/frontend/src/tabs/aerial/components/WingAI.tsx
new file mode 100644
index 0000000..4b55647
--- /dev/null
+++ b/frontend/src/tabs/aerial/components/WingAI.tsx
@@ -0,0 +1,1137 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { Map, useControl } from '@vis.gl/react-maplibre';
+import { MapboxOverlay } from '@deck.gl/mapbox';
+import { PolygonLayer, ScatterplotLayer } from '@deck.gl/layers';
+import type { StyleSpecification, MapMouseEvent } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function DeckGLOverlay({ layers }: { layers: any[] }) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
+  overlay.setProps({ layers });
+  return null;
+}
+
+const AOI_MAP_STYLE: StyleSpecification = {
+  version: 8,
+  sources: {
+    'carto-dark': {
+      type: 'raster',
+      tiles: [
+        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+      ],
+      tileSize: 256,
+    },
+  },
+  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark', minzoom: 0, maxzoom: 22 }],
+};
+
+type WingAITab = 'detect' | 'change' | 'aoi';
+
+const tabItems: { id: WingAITab; label: string; icon: string; desc: string }[] = [
+  { id: 'detect', label: '객체 탐지', icon: '🎯', desc: '위성/드론 영상에서 선박·차량·시설물 자동 탐지 및 분류' },
+  { id: 'change', label: '변화 감지', icon: '🔄', desc: '동일 지역 다시점 영상 비교 분석 (Before/After)' },
+  { id: 'aoi', label: '연안자동감지', icon: '📍', desc: '연안 관심지역 등록 → 변화 자동 감지 및 알림' },
+];
+
+export function WingAI() {
+  const [activeTab, setActiveTab] = useState<WingAITab>('detect');
+
+  return (
+    <div className="overflow-y-auto px-6 pt-1 pb-2">
+      {/* 헤더 */}
+      <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"
+            style={{ background: 'linear-gradient(135deg,rgba(168,85,247,.2),rgba(236,72,153,.2))', border: '1px solid rgba(168,85,247,.3)' }}
+          >
+            🤖
+          </div>
+          <div className="text-[12px] font-bold font-korean text-text-1">AI 탐지/분석</div>
+          <span className="text-[9px] px-1.5 py-0.5 rounded font-bold" style={{ background: 'rgba(168,85,247,.12)', color: '#a855f7', border: '1px solid rgba(168,85,247,.25)' }}>WingAI</span>
+        </div>
+        <div className="flex gap-1 h-7">
+          {tabItems.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setActiveTab(t.id)}
+              className="px-2.5 h-full rounded text-[10px] font-bold font-korean cursor-pointer border transition-colors"
+              style={
+                activeTab === t.id
+                  ? { background: 'rgba(168,85,247,.12)', borderColor: 'rgba(168,85,247,.3)', color: '#a855f7' }
+                  : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+              }
+            >
+              {t.icon} {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 탭 콘텐츠 */}
+      {activeTab === 'detect' && <DetectPanel />}
+      {activeTab === 'change' && <ChangeDetectPanel />}
+      {activeTab === 'aoi' && <AoiPanel />}
+    </div>
+  );
+}
+
+/* ─── 객체 탐지 패널 (MMSI 선종 불일치 탐지) ─────────── */
+type MismatchStatus = '불일치' | '의심' | '정상' | '확인중';
+
+interface VesselDetection {
+  id: string;
+  mmsi: string;
+  vesselName: string;
+  /** AIS 등록 선종 */
+  aisType: string;
+  /** AI 영상 분석 선종 */
+  detectedType: string;
+  /** 불일치 여부 */
+  mismatch: boolean;
+  status: MismatchStatus;
+  confidence: string;
+  coord: string;
+  lon: number;
+  lat: number;
+  time: string;
+  detail: string;
+}
+
+function DetectPanel() {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [filterStatus, setFilterStatus] = useState<MismatchStatus | '전체'>('전체');
+
+  const detections: VesselDetection[] = [
+    { id: 'VD-001', mmsi: '440123456', vesselName: 'OCEAN GLORY', aisType: '화물선', detectedType: '유조선', mismatch: true, status: '불일치', confidence: '94.2%', coord: '33.24°N 126.50°E', lon: 126.50, lat: 33.24, time: '14:23', detail: 'AIS 화물선 등록 → 영상 분석 결과 유조선 선형 + 탱크 구조 탐지' },
+    { id: 'VD-002', mmsi: '441987654', vesselName: 'SEA PHOENIX', aisType: '유조선', detectedType: '화물선', mismatch: true, status: '불일치', confidence: '91.7%', coord: '34.73°N 127.68°E', lon: 127.68, lat: 34.73, time: '14:18', detail: 'AIS 유조선 등록 → 영상 분석 결과 컨테이너 적재 확인, 화물선 판정' },
+    { id: 'VD-003', mmsi: '440555123', vesselName: 'DONGBANG 7', aisType: '어선', detectedType: '화물선', mismatch: true, status: '의심', confidence: '78.3%', coord: '35.15°N 129.13°E', lon: 129.13, lat: 35.15, time: '14:10', detail: 'AIS 어선 등록 → 선체 규모 및 구조가 어선 대비 과대, 화물선 의심' },
+    { id: 'VD-004', mmsi: '440678901', vesselName: 'KOREA STAR', aisType: '화물선', detectedType: '화물선', mismatch: false, status: '정상', confidence: '97.8%', coord: '34.80°N 126.37°E', lon: 126.37, lat: 34.80, time: '14:05', detail: 'AIS 등록 선종과 영상 분석 결과 일치' },
+    { id: 'VD-005', mmsi: 'N/A', vesselName: '미식별', aisType: 'AIS 미수신', detectedType: '유조선', mismatch: true, status: '확인중', confidence: '85.6%', coord: '33.11°N 126.27°E', lon: 126.27, lat: 33.11, time: '14:01', detail: 'AIS 신호 없음 → 위성 SAR로 유조선급 선형 탐지, 불법 운항 의심' },
+    { id: 'VD-006', mmsi: '440234567', vesselName: 'BUSAN EXPRESS', aisType: '컨테이너선', detectedType: '유조선', mismatch: true, status: '불일치', confidence: '89.1%', coord: '35.05°N 129.10°E', lon: 129.10, lat: 35.05, time: '13:55', detail: 'AIS 컨테이너선 → 갑판 컨테이너 미확인, 탱크 구조 감지' },
+    { id: 'VD-007', mmsi: '440345678', vesselName: 'JEJU BREEZE', aisType: '여객선', detectedType: '여객선', mismatch: false, status: '정상', confidence: '98.1%', coord: '33.49°N 126.52°E', lon: 126.52, lat: 33.49, time: '13:50', detail: 'AIS 등록 선종과 영상 분석 결과 일치' },
+  ];
+
+  const mismatchCount = detections.filter((d) => d.mismatch).length;
+  const confirmingCount = detections.filter((d) => d.status === '확인중').length;
+
+  const stats = [
+    { value: String(detections.length), label: '분석 선박', color: '#3b82f6' },
+    { value: String(mismatchCount), label: '선종 불일치', color: '#ef4444' },
+    { value: String(confirmingCount), label: '확인 중', color: '#eab308' },
+    { value: String(detections.filter((d) => !d.mismatch).length), label: '정상', color: '#22c55e' },
+  ];
+
+  const filtered = filterStatus === '전체' ? detections : detections.filter((d) => d.status === filterStatus);
+
+  const statusStyle = (s: MismatchStatus) => {
+    if (s === '불일치') return { background: 'rgba(239,68,68,.12)', color: '#ef4444', border: '1px solid rgba(239,68,68,.25)' };
+    if (s === '의심') return { background: 'rgba(234,179,8,.12)', color: '#eab308', border: '1px solid rgba(234,179,8,.25)' };
+    if (s === '확인중') return { background: 'rgba(168,85,247,.12)', color: '#a855f7', border: '1px solid rgba(168,85,247,.25)' };
+    return { background: 'rgba(34,197,94,.12)', color: '#22c55e', border: '1px solid rgba(34,197,94,.25)' };
+  };
+
+  const filters: (MismatchStatus | '전체')[] = ['전체', '불일치', '의심', '확인중', '정상'];
+
+  return (
+    <div>
+      {/* 통계 카드 */}
+      <div className="grid grid-cols-4 gap-3 mb-5">
+        {stats.map((s, i) => (
+          <div key={i} className="bg-bg-2 border border-border rounded-md p-3.5 text-center">
+            <div className="text-[22px] font-bold font-mono" style={{ color: s.color }}>{s.value}</div>
+            <div className="text-[10px] text-text-3 mt-1 font-korean">{s.label}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-[1fr_380px] gap-4">
+        {/* 탐지 결과 지도 */}
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden" style={{ minHeight: 480 }}>
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <div className="text-[11px] font-bold font-korean text-text-1">🎯 선종 불일치 탐지 지도</div>
+            <div className="text-[9px] text-text-3 font-mono">{filtered.length}척 표시</div>
+          </div>
+          <div className="relative" style={{ height: 440 }}>
+            <Map
+              initialViewState={{ longitude: 127.5, latitude: 34.0, zoom: 6.5 }}
+              style={{ width: '100%', height: '100%' }}
+              mapStyle={AOI_MAP_STYLE}
+              attributionControl={false}
+            >
+              <DeckGLOverlay layers={[
+                new ScatterplotLayer({
+                  id: 'vessel-detect-markers',
+                  data: filtered,
+                  getPosition: (d: VesselDetection) => [d.lon, d.lat],
+                  getRadius: (d: VesselDetection) => selectedId === d.id ? 10 : 7,
+                  radiusUnits: 'pixels' as const,
+                  getFillColor: (d: VesselDetection) => {
+                    if (d.status === '불일치') return [239, 68, 68, 200];
+                    if (d.status === '의심') return [234, 179, 8, 200];
+                    if (d.status === '확인중') return [168, 85, 247, 200];
+                    return [34, 197, 94, 160];
+                  },
+                  getLineColor: [255, 255, 255, 255],
+                  lineWidthMinPixels: 2,
+                  stroked: true,
+                  pickable: true,
+                  onClick: ({ object }: { object: VesselDetection }) => {
+                    if (object) setSelectedId(object.id === selectedId ? null : object.id);
+                  },
+                  updateTriggers: { getRadius: [selectedId] },
+                }),
+              ]} />
+            </Map>
+            {/* 범례 */}
+            <div className="absolute bottom-3 left-3 bg-bg-2/90 border border-border rounded px-3 py-2 backdrop-blur-sm">
+              <div className="flex items-center gap-3">
+                {[
+                  { color: '#ef4444', label: '불일치' },
+                  { color: '#eab308', label: '의심' },
+                  { color: '#a855f7', label: '확인중' },
+                  { color: '#22c55e', label: '정상' },
+                ].map((l) => (
+                  <div key={l.label} className="flex items-center gap-1">
+                    <div className="w-2.5 h-2.5 rounded-full" style={{ background: l.color }} />
+                    <span className="text-[8px] font-korean text-text-3">{l.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 탐지 목록 */}
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden flex flex-col" style={{ maxHeight: 520 }}>
+          <div className="px-4 py-3 border-b border-border shrink-0">
+            <div className="flex items-center justify-between mb-2">
+              <div className="text-[11px] font-bold font-korean text-text-1">📋 MMSI 선종 검증 목록</div>
+              <div className="text-[9px] text-text-3 font-mono">{filtered.length}건</div>
+            </div>
+            <div className="flex gap-1">
+              {filters.map((f) => (
+                <button
+                  key={f}
+                  onClick={() => setFilterStatus(f)}
+                  className="px-2 py-0.5 rounded text-[9px] font-bold font-korean cursor-pointer border transition-colors"
+                  style={filterStatus === f
+                    ? { background: 'rgba(168,85,247,.12)', borderColor: 'rgba(168,85,247,.3)', color: '#a855f7' }
+                    : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+                  }
+                >
+                  {f}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="divide-y overflow-y-auto flex-1" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
+            {filtered.map((d) => (
+              <div
+                key={d.id}
+                onClick={() => setSelectedId(selectedId === d.id ? null : d.id)}
+                className="px-4 py-3 hover:bg-bg-hover/30 transition-colors cursor-pointer"
+                style={{ background: selectedId === d.id ? 'rgba(168,85,247,.04)' : undefined }}
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] font-mono text-text-3">{d.id}</span>
+                    <span className="text-[10px] font-bold font-korean text-text-1">{d.vesselName}</span>
+                  </div>
+                  <span className="px-1.5 py-0.5 rounded text-[9px] font-bold font-korean" style={statusStyle(d.status)}>
+                    {d.status}
+                  </span>
+                </div>
+                {/* 선종 비교 */}
+                <div className="flex items-center gap-1.5 mt-1.5">
+                  <span className="px-1.5 py-0.5 rounded text-[8px] font-bold font-korean" style={{ background: 'rgba(59,130,246,.1)', color: '#3b82f6', border: '1px solid rgba(59,130,246,.2)' }}>
+                    AIS: {d.aisType}
+                  </span>
+                  {d.mismatch && <span className="text-[10px]" style={{ color: '#ef4444' }}>≠</span>}
+                  {!d.mismatch && <span className="text-[10px]" style={{ color: '#22c55e' }}>=</span>}
+                  <span className="px-1.5 py-0.5 rounded text-[8px] font-bold font-korean" style={{
+                    background: d.mismatch ? 'rgba(239,68,68,.1)' : 'rgba(34,197,94,.1)',
+                    color: d.mismatch ? '#ef4444' : '#22c55e',
+                    border: `1px solid ${d.mismatch ? 'rgba(239,68,68,.2)' : 'rgba(34,197,94,.2)'}`,
+                  }}>
+                    AI: {d.detectedType}
+                  </span>
+                </div>
+                <div className="flex items-center gap-3 mt-1.5 text-[9px] text-text-4 font-mono">
+                  <span>MMSI {d.mmsi}</span>
+                  <span>{d.coord}</span>
+                  <span>{d.time}</span>
+                  <span>신뢰도 {d.confidence}</span>
+                </div>
+                {/* 펼침: 상세 */}
+                {selectedId === d.id && (
+                  <div className="mt-2 px-3 py-2 rounded text-[9px] font-korean" style={{ background: 'rgba(168,85,247,.04)', border: '1px solid rgba(168,85,247,.12)', color: '#c4b5fd' }}>
+                    {d.detail}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── 변화 감지 패널 (복합 정보원 시점 비교) ──────────── */
+type SourceType = 'satellite' | 'cctv' | 'drone' | 'ais';
+
+interface SourceConfig {
+  id: SourceType;
+  label: string;
+  icon: string;
+  color: string;
+  desc: string;
+}
+
+const SOURCES: SourceConfig[] = [
+  { id: 'satellite', label: '위성영상', icon: '🛰', color: '#a855f7', desc: 'KOMPSAT-3A / Sentinel SAR 수신 영상' },
+  { id: 'cctv', label: 'CCTV', icon: '📹', color: '#3b82f6', desc: 'KHOA / KBS 해안 CCTV 스냅샷' },
+  { id: 'drone', label: '드론', icon: '🛸', color: '#22c55e', desc: '정밀 촬영 / 열화상 이미지' },
+  { id: 'ais', label: 'AIS', icon: '🚢', color: '#f59e0b', desc: '선박 위치·항적·MMSI 궤적' },
+];
+
+interface ChangeRecord {
+  id: string;
+  area: string;
+  type: string;
+  date1: string;
+  time1: string;
+  date2: string;
+  time2: string;
+  severity: '심각' | '보통' | '낮음';
+  detail: string;
+  sources: SourceType[];
+  crossRef?: string;
+  /** 각 정보원별 AS-IS 시점 요약 */
+  asIsDetail: Partial<Record<SourceType, string>>;
+  /** 각 정보원별 현재 시점 요약 */
+  nowDetail: Partial<Record<SourceType, string>>;
+}
+
+function ChangeDetectPanel() {
+  const [layers, setLayers] = useState<Record<SourceType, boolean>>({
+    satellite: true, cctv: true, drone: true, ais: true,
+  });
+  const [sourceFilter, setSourceFilter] = useState<SourceType | 'all'>('all');
+  const [selectedChange, setSelectedChange] = useState<string | null>(null);
+
+  const toggleLayer = (id: SourceType) => setLayers((prev) => ({ ...prev, [id]: !prev[id] }));
+  const activeCount = Object.values(layers).filter(Boolean).length;
+
+  const changes: ChangeRecord[] = [
+    {
+      id: 'CHG-001', area: '여수항 북측 해안', type: '선박 이동',
+      date1: '03-14', time1: '14:00', date2: '03-16', time2: '14:23',
+      severity: '보통', detail: '정박 선박 3척 → 7척 (증가)',
+      sources: ['satellite', 'ais', 'cctv'],
+      crossRef: 'AIS MMSI 440123456 외 3척 신규 입항 — 위성+CCTV 동시 확인',
+      asIsDetail: { satellite: '정박 선박 3척 식별', ais: 'MMSI 3건 정박 상태', cctv: '여수 오동도 CCTV 정상' },
+      nowDetail: { satellite: '선박 7척 식별 (4척 증가)', ais: 'MMSI 7건 (신규 4건 입항)', cctv: '여수 오동도 CCTV 선박 증가 확인' },
+    },
+    {
+      id: 'CHG-002', area: '제주 서귀포 해상', type: '유막 확산',
+      date1: '03-15', time1: '10:30', date2: '03-16', time2: '14:23',
+      severity: '심각', detail: '유막 면적 2.1km² → 4.8km² (확산)',
+      sources: ['satellite', 'drone', 'cctv', 'ais'],
+      crossRef: '4개 정보원 교차확인 — 유막 남동 방향 확산 일치',
+      asIsDetail: { satellite: 'SAR 유막 2.1km² 탐지', drone: '열화상 유막 경계 포착', cctv: '서귀포 카메라 해면 이상 없음', ais: '인근 유조선 1척 정박' },
+      nowDetail: { satellite: 'SAR 유막 4.8km² 확산', drone: '열화상 유막 남동 2.7km 확대', cctv: '서귀포 카메라 해면 변색 감지', ais: '유조선 이탈, 방제선 2척 진입' },
+    },
+    {
+      id: 'CHG-003', area: '부산항 외항', type: '방제장비 배치',
+      date1: '03-10', time1: '09:00', date2: '03-16', time2: '14:23',
+      severity: '낮음', detail: '부유식 오일펜스 신규 배치 확인',
+      sources: ['drone', 'cctv'],
+      crossRef: 'CCTV 부산항 #204 + 드론 정밀 촬영 일치',
+      asIsDetail: { drone: '오일펜스 미배치', cctv: '부산 민락항 CCTV 해상 장비 없음' },
+      nowDetail: { drone: '오일펜스 300m 배치 확인', cctv: '부산 민락항 CCTV 오일펜스 포착' },
+    },
+    {
+      id: 'CHG-004', area: '통영 해역 남측', type: '미식별 선박',
+      date1: '03-13', time1: '22:00', date2: '03-16', time2: '14:23',
+      severity: '보통', detail: 'AIS 미송출 선박 2척 위성 포착',
+      sources: ['satellite', 'ais'],
+      crossRef: 'AIS 미등록 — 위성 SAR 반사 신호로 탐지, 불법 조업 의심',
+      asIsDetail: { satellite: '해역 내 선박 신호 없음', ais: '등록 선박 0척' },
+      nowDetail: { satellite: 'SAR 반사 2건 포착 (선박 추정)', ais: 'MMSI 미수신 — 미식별 선박' },
+    },
+    {
+      id: 'CHG-005', area: '인천 연안부두', type: '야간 이상징후',
+      date1: '03-15', time1: '03:42', date2: '03-16', time2: '03:45',
+      severity: '심각', detail: 'CCTV 야간 유출 의심 + AIS 정박선 이탈',
+      sources: ['cctv', 'ais'],
+      crossRef: 'KBS CCTV #9981 03:42 해면 반사 이상 → AIS 03:45 정박선 이탈 연계',
+      asIsDetail: { cctv: '인천 연안부두 CCTV 야간 정상', ais: '정박선 5척 정상 정박' },
+      nowDetail: { cctv: '03:42 해면 반사광 이상 감지', ais: '03:45 정박선 1척 이탈 (MMSI 441987654)' },
+    },
+    {
+      id: 'CHG-006', area: '마라도 주변 해역', type: '해안선 변화',
+      date1: '03-12', time1: '11:00', date2: '03-16', time2: '11:15',
+      severity: '낮음', detail: '해안 퇴적물 분포 변경 감지',
+      sources: ['satellite', 'drone'],
+      crossRef: '위성 다분광 + 드론 정밀 촬영 퇴적 방향 확인',
+      asIsDetail: { satellite: '해안선 퇴적 분포 기준점', drone: '미촬영' },
+      nowDetail: { satellite: '퇴적 남서 방향 이동 감지', drone: '정밀 촬영으로 퇴적 경계 확인' },
+    },
+  ];
+
+  const severityStyle = (s: '심각' | '보통' | '낮음') => {
+    if (s === '심각') return { background: 'rgba(239,68,68,.12)', color: '#ef4444', border: '1px solid rgba(239,68,68,.25)' };
+    if (s === '보통') return { background: 'rgba(234,179,8,.12)', color: '#eab308', border: '1px solid rgba(234,179,8,.25)' };
+    return { background: 'rgba(34,197,94,.12)', color: '#22c55e', border: '1px solid rgba(34,197,94,.25)' };
+  };
+
+  const sourceStyle = (src: SourceConfig, active = true) => active
+    ? { background: `${src.color}18`, color: src.color, border: `1px solid ${src.color}40` }
+    : { background: 'var(--bg3)', color: 'var(--t4)', border: '1px solid var(--bd)', opacity: 0.5 };
+
+  const filteredChanges = sourceFilter === 'all'
+    ? changes
+    : changes.filter((c) => c.sources.includes(sourceFilter));
+
+  return (
+    <div>
+      {/* 레이어 토글 바 */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="text-[10px] font-bold font-korean text-text-3 shrink-0">오버레이 레이어</div>
+        <div className="flex gap-1.5">
+          {SOURCES.map((s) => (
+            <button
+              key={s.id}
+              onClick={() => toggleLayer(s.id)}
+              className="px-2.5 py-1.5 rounded text-[9px] font-bold font-korean cursor-pointer border transition-all"
+              style={sourceStyle(s, layers[s.id])}
+            >
+              <span className="mr-1">{layers[s.id] ? '◉' : '○'}</span>
+              {s.icon} {s.label}
+            </button>
+          ))}
+        </div>
+        <div className="text-[9px] text-text-4 font-mono ml-auto">{activeCount}/4 레이어 활성</div>
+      </div>
+
+      {/* AS-IS / 현재 시점 비교 뷰 */}
+      <div className="grid grid-cols-2 gap-4 mb-4" style={{ minHeight: 400 }}>
+        {/* AS-IS 시점 */}
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border" style={{ background: 'rgba(234,179,8,.05)' }}>
+            <div className="flex items-center gap-2">
+              <span className="text-[11px] font-bold font-korean" style={{ color: '#eab308' }}>AS-IS</span>
+              <span className="text-[9px] px-1.5 py-0.5 rounded font-bold" style={{ background: 'rgba(234,179,8,.12)', color: '#eab308', border: '1px solid rgba(234,179,8,.25)' }}>과거 시점</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <input type="date" defaultValue="2026-03-14" className="text-[9px] font-mono px-2 py-1 rounded border outline-none" style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }} />
+              <input type="time" defaultValue="14:00" className="text-[9px] font-mono px-2 py-1 rounded border outline-none" style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }} />
+            </div>
+          </div>
+          {/* 활성 레이어 표시 */}
+          <div className="flex gap-1 px-3 py-2 border-b" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
+            {SOURCES.filter((s) => layers[s.id]).map((s) => (
+              <span key={s.id} className="px-1.5 py-0.5 rounded text-[8px] font-bold" style={sourceStyle(s)}>
+                {s.icon} {s.label}
+              </span>
+            ))}
+            {activeCount === 0 && <span className="text-[9px] text-text-4 font-korean">레이어를 선택하세요</span>}
+          </div>
+          {/* 지도 플레이스홀더 */}
+          <div className="flex items-center justify-center text-text-3" style={{ height: 320 }}>
+            <div className="text-center">
+              <div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
+                {SOURCES.filter((s) => layers[s.id]).map((s) => <span key={s.id}>{s.icon}</span>)}
+              </div>
+              <div className="text-[11px] font-korean text-text-3">과거 시점 복합 오버레이</div>
+              <div className="text-[9px] text-text-4 mt-1">
+                {SOURCES.filter((s) => layers[s.id]).map((s) => s.label).join(' + ')} 통합 표시
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 현재 시점 */}
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border" style={{ background: 'rgba(59,130,246,.05)' }}>
+            <div className="flex items-center gap-2">
+              <span className="text-[11px] font-bold font-korean" style={{ color: '#3b82f6' }}>현재</span>
+              <span className="text-[9px] px-1.5 py-0.5 rounded font-bold" style={{ background: 'rgba(59,130,246,.12)', color: '#3b82f6', border: '1px solid rgba(59,130,246,.25)' }}>NOW</span>
+            </div>
+            <span className="text-[9px] text-text-3 font-mono">2026-03-16 14:23</span>
+          </div>
+          {/* 활성 레이어 표시 */}
+          <div className="flex gap-1 px-3 py-2 border-b" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
+            {SOURCES.filter((s) => layers[s.id]).map((s) => (
+              <span key={s.id} className="px-1.5 py-0.5 rounded text-[8px] font-bold" style={sourceStyle(s)}>
+                {s.icon} {s.label}
+              </span>
+            ))}
+            {activeCount === 0 && <span className="text-[9px] text-text-4 font-korean">레이어를 선택하세요</span>}
+          </div>
+          {/* 지도 플레이스홀더 */}
+          <div className="flex items-center justify-center text-text-3" style={{ height: 320 }}>
+            <div className="text-center">
+              <div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
+                {SOURCES.filter((s) => layers[s.id]).map((s) => <span key={s.id}>{s.icon}</span>)}
+              </div>
+              <div className="text-[11px] font-korean text-text-3">현재 시점 복합 오버레이</div>
+              <div className="text-[9px] text-text-4 mt-1">
+                {SOURCES.filter((s) => layers[s.id]).map((s) => s.label).join(' + ')} 실시간 통합
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 복합 변화 감지 목록 */}
+      <div className="bg-bg-2 border border-border rounded-md overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <div className="text-[11px] font-bold font-korean text-text-1">🔄 복합 변화 감지 타임라인</div>
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1">
+              <button
+                onClick={() => setSourceFilter('all')}
+                className="px-2 py-0.5 rounded text-[9px] font-bold font-korean cursor-pointer border transition-colors"
+                style={sourceFilter === 'all' ? { background: 'rgba(168,85,247,.12)', borderColor: 'rgba(168,85,247,.3)', color: '#a855f7' } : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }}
+              >
+                전체
+              </button>
+              {SOURCES.map((s) => (
+                <button
+                  key={s.id}
+                  onClick={() => setSourceFilter(s.id)}
+                  className="px-2 py-0.5 rounded text-[9px] font-bold font-korean cursor-pointer border transition-colors"
+                  style={sourceFilter === s.id ? sourceStyle(s) : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }}
+                >
+                  {s.icon}
+                </button>
+              ))}
+            </div>
+            <div className="text-[9px] text-text-3 font-mono">{filteredChanges.length}건</div>
+          </div>
+        </div>
+
+        {/* 데이터 행 */}
+        {filteredChanges.map((c) => {
+          const isOpen = selectedChange === c.id;
+          return (
+            <div key={c.id} className="border-b" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
+              {/* 요약 행 */}
+              <div
+                onClick={() => setSelectedChange(isOpen ? null : c.id)}
+                className="grid gap-0 px-4 py-3 items-center hover:bg-bg-hover/30 transition-colors cursor-pointer"
+                style={{ gridTemplateColumns: '52px 1fr 100px 130px 60px', background: isOpen ? 'rgba(168,85,247,.04)' : undefined }}
+              >
+                <div className="text-[10px] font-mono text-text-3">{c.id}</div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] font-semibold text-text-1 font-korean">{c.area}</span>
+                    <span className="text-[10px] font-semibold font-korean" style={{ color: 'var(--t3)' }}>{c.type}</span>
+                  </div>
+                  <div className="text-[9px] text-text-4 font-korean mt-0.5">{c.detail}</div>
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {c.sources.map((sid) => {
+                    const cfg = SOURCES.find((s) => s.id === sid)!;
+                    return <span key={sid} className="px-1.5 py-0.5 rounded text-[8px] font-bold" style={sourceStyle(cfg)}>{cfg.icon}</span>;
+                  })}
+                </div>
+                <div className="text-[9px] font-mono text-text-2">
+                  <span style={{ color: '#eab308' }}>{c.date1} {c.time1}</span>
+                  <span className="text-text-4 mx-1">→</span>
+                  <span style={{ color: '#3b82f6' }}>{c.date2} {c.time2}</span>
+                </div>
+                <div>
+                  <span className="px-1.5 py-0.5 rounded text-[9px] font-bold font-korean" style={severityStyle(c.severity)}>{c.severity}</span>
+                </div>
+              </div>
+
+              {/* 펼침: 정보원별 AS-IS → 현재 상세 */}
+              {isOpen && (
+                <div className="px-4 pb-3 pt-1" style={{ background: 'rgba(168,85,247,.02)' }}>
+                  {/* 교차검증 */}
+                  {c.crossRef && (
+                    <div className="mb-3 px-3 py-2 rounded text-[9px] font-korean" style={{ background: 'rgba(168,85,247,.06)', border: '1px solid rgba(168,85,247,.15)', color: '#c4b5fd' }}>
+                      <span className="font-bold" style={{ color: '#a855f7' }}>교차검증</span> {c.crossRef}
+                    </div>
+                  )}
+                  {/* 정보원별 비교 그리드 */}
+                  <div className="grid gap-2">
+                    <div className="grid gap-0 px-3 py-1.5" style={{ gridTemplateColumns: '90px 1fr 1fr' }}>
+                      <div className="text-[8px] font-bold text-text-4 font-korean">정보원</div>
+                      <div className="text-[8px] font-bold font-korean" style={{ color: '#eab308' }}>AS-IS ({c.date1} {c.time1})</div>
+                      <div className="text-[8px] font-bold font-korean" style={{ color: '#3b82f6' }}>현재 ({c.date2} {c.time2})</div>
+                    </div>
+                    {c.sources.map((sid) => {
+                      const cfg = SOURCES.find((s) => s.id === sid)!;
+                      return (
+                        <div key={sid} className="grid gap-0 px-3 py-2 rounded" style={{ gridTemplateColumns: '90px 1fr 1fr', background: `${cfg.color}06`, border: `1px solid ${cfg.color}15` }}>
+                          <div className="flex items-center gap-1.5">
+                            <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={sourceStyle(cfg)}>{cfg.icon} {cfg.label}</span>
+                          </div>
+                          <div className="text-[9px] font-korean text-text-3">{c.asIsDetail[sid] || '-'}</div>
+                          <div className="text-[9px] font-korean text-text-1 font-semibold">{c.nowDetail[sid] || '-'}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ─── 연안자동감지 패널 ──────────────────────────────── */
+type ZoneStatus = '정상' | '경보' | '주의';
+type MonitorSource = 'satellite' | 'cctv' | 'drone' | 'ais';
+
+interface MonitorSourceConfig {
+  id: MonitorSource;
+  label: string;
+  icon: string;
+  color: string;
+  desc: string;
+}
+
+const MONITOR_SOURCES: MonitorSourceConfig[] = [
+  { id: 'satellite', label: '위성영상', icon: '🛰', color: '#a855f7', desc: 'KOMPSAT/Sentinel 주기 촬영' },
+  { id: 'cctv', label: 'CCTV', icon: '📹', color: '#3b82f6', desc: 'KHOA/KBS 해안 CCTV 실시간' },
+  { id: 'drone', label: '드론', icon: '🛸', color: '#22c55e', desc: '드론 정밀 촬영 / 열화상' },
+  { id: 'ais', label: 'AIS', icon: '🚢', color: '#f59e0b', desc: '선박 위치·항적 실시간 수신' },
+];
+
+interface MonitorZone {
+  id: string;
+  name: string;
+  interval: string;
+  lastCheck: string;
+  status: ZoneStatus;
+  alerts: number;
+  polygon: [number, number][];
+  color: string;
+  monitoring: boolean;
+  /** 활성 모니터링 소스 */
+  sources: MonitorSource[];
+}
+
+const INTERVAL_OPTIONS = ['1h', '3h', '6h', '12h', '24h'];
+
+const ZONE_COLORS = ['#a855f7', '#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#ec4899', '#06b6d4'];
+
+const INITIAL_ZONES: MonitorZone[] = [
+  {
+    id: 'AOI-001', name: '여수항 반경', interval: '6h', lastCheck: '03-16 14:00', status: '정상', alerts: 0, monitoring: true, color: '#3b82f6',
+    polygon: [[127.68, 34.78], [127.78, 34.78], [127.78, 34.70], [127.68, 34.70]],
+    sources: ['satellite', 'cctv', 'ais'],
+  },
+  {
+    id: 'AOI-002', name: '제주 서귀포 해상', interval: '3h', lastCheck: '03-16 13:30', status: '경보', alerts: 2, monitoring: true, color: '#ef4444',
+    polygon: [[126.45, 33.28], [126.58, 33.28], [126.58, 33.20], [126.45, 33.20]],
+    sources: ['satellite', 'drone', 'cctv', 'ais'],
+  },
+  {
+    id: 'AOI-003', name: '부산항 외항', interval: '12h', lastCheck: '03-16 08:00', status: '정상', alerts: 0, monitoring: true, color: '#22c55e',
+    polygon: [[129.05, 35.12], [129.20, 35.12], [129.20, 35.05], [129.05, 35.05]],
+    sources: ['cctv', 'ais'],
+  },
+  {
+    id: 'AOI-004', name: '통영 ~ 거제 해역', interval: '24h', lastCheck: '03-15 20:00', status: '주의', alerts: 1, monitoring: true, color: '#f59e0b',
+    polygon: [[128.30, 34.90], [128.65, 34.90], [128.65, 34.80], [128.30, 34.80]],
+    sources: ['satellite', 'drone'],
+  },
+];
+
+function AoiPanel() {
+  const [zones, setZones] = useState<MonitorZone[]>(INITIAL_ZONES);
+  const [selectedZone, setSelectedZone] = useState<string | null>(null);
+  // 드로잉 상태
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [drawingPoints, setDrawingPoints] = useState<[number, number][]>([]);
+  // 등록 폼
+  const [showForm, setShowForm] = useState(false);
+  const [formName, setFormName] = useState('');
+  // 실시간 시뮬
+  const [now, setNow] = useState(() => new Date());
+
+  // 시계 갱신 (1분마다)
+  useEffect(() => {
+    const t = setInterval(() => setNow(new Date()), 60_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const nextId = useRef(zones.length + 1);
+
+  // 지도 클릭 → 폴리곤 포인트 수집
+  const handleMapClick = useCallback((e: MapMouseEvent) => {
+    if (!isDrawing) return;
+    setDrawingPoints((prev) => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
+  }, [isDrawing]);
+
+  // 드로잉 시작
+  const startDrawing = () => {
+    setDrawingPoints([]);
+    setIsDrawing(true);
+    setShowForm(false);
+    setSelectedZone(null);
+  };
+
+  // 드로잉 완료 → 폼 표시
+  const finishDrawing = () => {
+    if (drawingPoints.length < 3) return;
+    setIsDrawing(false);
+    setShowForm(true);
+    setFormName('');
+  };
+
+  // 드로잉 취소
+  const cancelDrawing = () => {
+    setIsDrawing(false);
+    setDrawingPoints([]);
+    setShowForm(false);
+  };
+
+  // 구역 등록 (이름만 → 등록 후 설정)
+  const registerZone = () => {
+    if (!formName.trim() || drawingPoints.length < 3) return;
+    const newId = `AOI-${String(nextId.current++).padStart(3, '0')}`;
+    const newZone: MonitorZone = {
+      id: newId,
+      name: formName.trim(),
+      interval: '6h',
+      lastCheck: `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
+      status: '정상',
+      alerts: 0,
+      polygon: [...drawingPoints],
+      color: ZONE_COLORS[zones.length % ZONE_COLORS.length],
+      monitoring: true,
+      sources: ['satellite', 'cctv'],
+    };
+    setZones((prev) => [...prev, newZone]);
+    setDrawingPoints([]);
+    setShowForm(false);
+    setSelectedZone(newId);
+  };
+
+  // 구역 설정 변경
+  const updateZone = (id: string, patch: Partial<MonitorZone>) => {
+    setZones((prev) => prev.map((z) => z.id === id ? { ...z, ...patch } : z));
+  };
+
+  // 모니터링 소스 토글
+  const toggleSource = (id: string, src: MonitorSource) => {
+    setZones((prev) => prev.map((z) => {
+      if (z.id !== id) return z;
+      const has = z.sources.includes(src);
+      return { ...z, sources: has ? z.sources.filter((s) => s !== src) : [...z.sources, src] };
+    }));
+  };
+
+  // 모니터링 토글
+  const toggleMonitoring = (id: string) => {
+    setZones((prev) => prev.map((z) => z.id === id ? { ...z, monitoring: !z.monitoring } : z));
+  };
+
+  // 구역 삭제
+  const removeZone = (id: string) => {
+    setZones((prev) => prev.filter((z) => z.id !== id));
+    if (selectedZone === id) setSelectedZone(null);
+  };
+
+  const statusStyle = (s: ZoneStatus) => {
+    if (s === '경보') return { background: 'rgba(239,68,68,.12)', color: '#ef4444', border: '1px solid rgba(239,68,68,.25)' };
+    if (s === '주의') return { background: 'rgba(234,179,8,.12)', color: '#eab308', border: '1px solid rgba(234,179,8,.25)' };
+    return { background: 'rgba(34,197,94,.12)', color: '#22c55e', border: '1px solid rgba(34,197,94,.25)' };
+  };
+
+  // deck.gl 레이어: 등록된 폴리곤 + 드로잉 중 포인트
+  const deckLayers = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result: any[] = [];
+
+    // 등록된 구역 폴리곤
+    const visibleZones = zones.filter((z) => z.monitoring);
+    if (visibleZones.length > 0) {
+      result.push(
+        new PolygonLayer({
+          id: 'aoi-zones',
+          data: visibleZones,
+          getPolygon: (d: MonitorZone) => [...d.polygon, d.polygon[0]],
+          getFillColor: (d: MonitorZone) => {
+            const hex = d.color;
+            const r = parseInt(hex.slice(1, 3), 16);
+            const g = parseInt(hex.slice(3, 5), 16);
+            const b = parseInt(hex.slice(5, 7), 16);
+            const alpha = selectedZone === d.id ? 60 : 30;
+            return [r, g, b, alpha];
+          },
+          getLineColor: (d: MonitorZone) => {
+            const hex = d.color;
+            const r = parseInt(hex.slice(1, 3), 16);
+            const g = parseInt(hex.slice(3, 5), 16);
+            const b = parseInt(hex.slice(5, 7), 16);
+            return [r, g, b, selectedZone === d.id ? 220 : 140];
+          },
+          getLineWidth: (d: MonitorZone) => selectedZone === d.id ? 3 : 1.5,
+          lineWidthUnits: 'pixels',
+          pickable: true,
+          onClick: ({ object }: { object: MonitorZone }) => {
+            if (object && !isDrawing) setSelectedZone(object.id === selectedZone ? null : object.id);
+          },
+          updateTriggers: {
+            getFillColor: [selectedZone],
+            getLineColor: [selectedZone],
+            getLineWidth: [selectedZone],
+          },
+        }),
+      );
+
+      // 경보/주의 구역 중심점 펄스
+      const alertZones = visibleZones.filter((z) => z.status !== '정상');
+      if (alertZones.length > 0) {
+        result.push(
+          new ScatterplotLayer({
+            id: 'aoi-alert-pulse',
+            data: alertZones,
+            getPosition: (d: MonitorZone) => {
+              const lngs = d.polygon.map((p) => p[0]);
+              const lats = d.polygon.map((p) => p[1]);
+              return [(Math.min(...lngs) + Math.max(...lngs)) / 2, (Math.min(...lats) + Math.max(...lats)) / 2];
+            },
+            getRadius: 8000,
+            radiusUnits: 'meters' as const,
+            getFillColor: (d: MonitorZone) => d.status === '경보' ? [239, 68, 68, 80] : [234, 179, 8, 60],
+            getLineColor: (d: MonitorZone) => d.status === '경보' ? [239, 68, 68, 180] : [234, 179, 8, 150],
+            lineWidthMinPixels: 2,
+            stroked: true,
+          }),
+        );
+      }
+    }
+
+    // 드로잉 중 포인트
+    if (drawingPoints.length > 0) {
+      result.push(
+        new ScatterplotLayer({
+          id: 'drawing-points',
+          data: drawingPoints,
+          getPosition: (d: [number, number]) => d,
+          getRadius: 5,
+          radiusUnits: 'pixels' as const,
+          getFillColor: [168, 85, 247, 220],
+          getLineColor: [255, 255, 255, 255],
+          lineWidthMinPixels: 2,
+          stroked: true,
+        }),
+      );
+
+      // 드로잉 폴리곤 미리보기
+      if (drawingPoints.length >= 3) {
+        result.push(
+          new PolygonLayer({
+            id: 'drawing-preview',
+            data: [{ polygon: [...drawingPoints, drawingPoints[0]] }],
+            getPolygon: (d: { polygon: [number, number][] }) => d.polygon,
+            getFillColor: [168, 85, 247, 25],
+            getLineColor: [168, 85, 247, 200],
+            getLineWidth: 2,
+            lineWidthUnits: 'pixels',
+            getDashArray: [4, 4],
+          }),
+        );
+      }
+    }
+
+    return result;
+  }, [zones, drawingPoints, selectedZone, isDrawing]);
+
+  const activeMonitoring = zones.filter((z) => z.monitoring).length;
+  const alertCount = zones.filter((z) => z.status === '경보').length;
+  const warningCount = zones.filter((z) => z.status === '주의').length;
+  const totalAlerts = zones.reduce((s, a) => s + a.alerts, 0);
+
+  const inputCls = 'w-full px-2.5 py-1.5 rounded text-[10px] font-korean outline-none border';
+  const inputStyle = { background: '#161b22', borderColor: '#21262d', color: '#e2e8f0' };
+
+  return (
+    <div>
+      {/* 통계 */}
+      <div className="grid grid-cols-4 gap-3 mb-4">
+        {[
+          { value: String(activeMonitoring), label: '감시 구역', color: '#3b82f6' },
+          { value: String(alertCount), label: '경보', color: '#ef4444' },
+          { value: String(warningCount), label: '주의', color: '#eab308' },
+          { value: String(totalAlerts), label: '미확인 알림', color: '#a855f7' },
+        ].map((s, i) => (
+          <div key={i} className="bg-bg-2 border border-border rounded-md p-3 text-center">
+            <div className="text-[20px] font-bold font-mono" style={{ color: s.color }}>{s.value}</div>
+            <div className="text-[10px] text-text-3 mt-0.5 font-korean">{s.label}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-[1fr_360px] gap-4">
+        {/* 지도 영역 */}
+        <div className="bg-bg-2 border border-border rounded-md overflow-hidden" style={{ minHeight: 520 }}>
+          {/* 지도 헤더 */}
+          <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+            <div className="flex items-center gap-2">
+              <div className="text-[11px] font-bold font-korean text-text-1">📍 연안 감시 구역</div>
+              {isDrawing && (
+                <span className="text-[9px] px-1.5 py-0.5 rounded font-bold animate-pulse" style={{ background: 'rgba(168,85,247,.15)', color: '#a855f7', border: '1px solid rgba(168,85,247,.3)' }}>
+                  드로잉 모드 · 지도를 클릭하여 꼭짓점 추가 ({drawingPoints.length}점)
+                </span>
+              )}
+            </div>
+            <div className="flex gap-1.5">
+              {isDrawing ? (
+                <>
+                  <button
+                    onClick={finishDrawing}
+                    disabled={drawingPoints.length < 3}
+                    className="px-2.5 h-6 text-white border-none rounded-sm text-[9px] font-semibold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
+                    style={{ background: drawingPoints.length >= 3 ? 'linear-gradient(135deg,#a855f7,#ec4899)' : '#333' }}
+                  >
+                    완료 ({drawingPoints.length >= 3 ? `${drawingPoints.length}점` : '3점 이상'})
+                  </button>
+                  <button
+                    onClick={() => setDrawingPoints((p) => p.slice(0, -1))}
+                    disabled={drawingPoints.length === 0}
+                    className="px-2 h-6 rounded-sm text-[9px] font-semibold cursor-pointer font-korean border disabled:opacity-40"
+                    style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }}
+                  >
+                    되돌리기
+                  </button>
+                  <button
+                    onClick={cancelDrawing}
+                    className="px-2 h-6 rounded-sm text-[9px] font-semibold cursor-pointer font-korean border"
+                    style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: '#ef4444' }}
+                  >
+                    취소
+                  </button>
+                </>
+              ) : (
+                <button
+                  onClick={startDrawing}
+                  className="px-2.5 h-6 text-white border-none rounded-sm text-[9px] font-semibold cursor-pointer font-korean flex items-center gap-1"
+                  style={{ background: 'linear-gradient(135deg,#a855f7,#ec4899)' }}
+                >
+                  + 감시 구역 등록
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* MapLibre 지도 */}
+          <div style={{ height: 480, cursor: isDrawing ? 'crosshair' : undefined }}>
+            <Map
+              initialViewState={{ longitude: 127.8, latitude: 34.5, zoom: 6.5 }}
+              style={{ width: '100%', height: '100%' }}
+              mapStyle={AOI_MAP_STYLE}
+              attributionControl={false}
+              onClick={handleMapClick}
+            >
+              <DeckGLOverlay layers={deckLayers} />
+            </Map>
+          </div>
+        </div>
+
+        {/* 우측 패널 */}
+        <div className="flex flex-col gap-3" style={{ maxHeight: 520, overflowY: 'auto' }}>
+          {/* 등록 폼: 이름만 입력 → 바로 등록 */}
+          {showForm && drawingPoints.length >= 3 && (
+            <div className="bg-bg-2 border rounded-md overflow-hidden" style={{ borderColor: 'rgba(168,85,247,.3)' }}>
+              <div className="px-4 py-2.5 border-b font-korean" style={{ borderColor: 'rgba(168,85,247,.15)', background: 'rgba(168,85,247,.05)' }}>
+                <div className="text-[11px] font-bold" style={{ color: '#a855f7' }}>새 감시 구역 등록</div>
+                <div className="text-[9px] text-text-4 mt-0.5">폴리곤 {drawingPoints.length}점 설정 완료</div>
+              </div>
+              <div className="px-4 py-3">
+                <label className="text-[9px] font-bold text-text-3 font-korean block mb-1.5">구역 이름</label>
+                <input
+                  value={formName}
+                  onChange={(e) => setFormName(e.target.value)}
+                  placeholder="예: 여수항 북측 해안"
+                  className={inputCls}
+                  style={inputStyle}
+                  onKeyDown={(e) => { if (e.key === 'Enter') registerZone(); }}
+                  autoFocus
+                />
+                <div className="flex gap-2 mt-3">
+                  <button
+                    onClick={registerZone}
+                    disabled={!formName.trim()}
+                    className="flex-1 py-2 text-white border-none rounded text-[10px] font-bold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
+                    style={{ background: formName.trim() ? 'linear-gradient(135deg,#a855f7,#ec4899)' : '#333' }}
+                  >
+                    등록
+                  </button>
+                  <button
+                    onClick={cancelDrawing}
+                    className="px-4 py-2 rounded text-[10px] font-bold cursor-pointer font-korean border"
+                    style={{ background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }}
+                  >
+                    취소
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 선택된 구역: 모니터링 설정 패널 */}
+          {selectedZone && (() => {
+            const z = zones.find((zone) => zone.id === selectedZone);
+            if (!z) return null;
+            return (
+              <div className="bg-bg-2 border rounded-md overflow-hidden" style={{ borderColor: `${z.color}40` }}>
+                <div className="flex items-center justify-between px-4 py-2.5 border-b" style={{ borderColor: `${z.color}20`, background: `${z.color}08` }}>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] font-mono text-text-3">{z.id}</span>
+                    <span className="text-[11px] font-bold font-korean text-text-1">{z.name}</span>
+                  </div>
+                  <span className="px-1.5 py-0.5 rounded text-[9px] font-bold font-korean" style={statusStyle(z.status)}>
+                    {z.status}
+                  </span>
+                </div>
+                <div className="px-4 py-3 space-y-3">
+                  {/* 감시 주기 */}
+                  <div>
+                    <label className="text-[9px] font-bold text-text-3 font-korean block mb-1.5">감시 주기</label>
+                    <div className="flex gap-1">
+                      {INTERVAL_OPTIONS.map((iv) => (
+                        <button
+                          key={iv}
+                          onClick={(e) => { e.stopPropagation(); updateZone(z.id, { interval: iv }); }}
+                          className="px-2.5 py-1 rounded text-[9px] font-bold font-mono cursor-pointer border transition-colors"
+                          style={z.interval === iv
+                            ? { background: 'rgba(59,130,246,.12)', borderColor: 'rgba(59,130,246,.3)', color: '#3b82f6' }
+                            : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+                          }
+                        >
+                          {iv}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* 모니터링 방법 (정보원 소스) */}
+                  <div>
+                    <label className="text-[9px] font-bold text-text-3 font-korean block mb-1.5">모니터링 방법</label>
+                    <div className="space-y-1.5">
+                      {MONITOR_SOURCES.map((src) => {
+                        const active = z.sources.includes(src.id);
+                        return (
+                          <button
+                            key={src.id}
+                            onClick={(e) => { e.stopPropagation(); toggleSource(z.id, src.id); }}
+                            className="w-full flex items-center gap-2.5 px-3 py-2 rounded border cursor-pointer transition-all text-left"
+                            style={active
+                              ? { background: `${src.color}10`, borderColor: `${src.color}40`, color: src.color }
+                              : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t4)', opacity: 0.6 }
+                            }
+                          >
+                            <span className="text-sm shrink-0">{active ? '◉' : '○'}</span>
+                            <span className="text-sm shrink-0">{src.icon}</span>
+                            <div className="flex-1 min-w-0">
+                              <div className="text-[10px] font-bold font-korean">{src.label}</div>
+                              <div className="text-[8px] font-korean" style={{ color: active ? `${src.color}bb` : 'var(--t4)' }}>{src.desc}</div>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                    {z.sources.length === 0 && (
+                      <div className="text-[9px] text-text-4 font-korean mt-1.5">최소 1개 이상의 모니터링 방법을 선택하세요</div>
+                    )}
+                  </div>
+
+                  {/* 하단 컨트롤 */}
+                  <div className="flex items-center gap-2 pt-1 border-t" style={{ borderColor: 'rgba(255,255,255,.06)' }}>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); toggleMonitoring(z.id); }}
+                      className="px-3 py-1.5 rounded text-[9px] font-bold font-korean cursor-pointer border transition-colors"
+                      style={z.monitoring
+                        ? { background: 'rgba(34,197,94,.12)', borderColor: 'rgba(34,197,94,.25)', color: '#22c55e' }
+                        : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t3)' }
+                      }
+                    >
+                      {z.monitoring ? '◉ 감시 중' : '○ 일시정지'}
+                    </button>
+                    <span className="text-[9px] text-text-4 font-mono">{z.polygon.length}점 · {z.sources.length}소스 · {z.interval}</span>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); removeZone(z.id); }}
+                      className="ml-auto px-2 py-1.5 rounded text-[9px] font-bold font-korean cursor-pointer border"
+                      style={{ background: 'rgba(239,68,68,.08)', borderColor: 'rgba(239,68,68,.2)', color: '#ef4444' }}
+                    >
+                      삭제
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })()}
+
+          {/* 감시 구역 목록 */}
+          <div className="bg-bg-2 border border-border rounded-md overflow-hidden flex-1">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+              <div className="text-[11px] font-bold font-korean text-text-1">📋 등록된 감시 구역</div>
+              <div className="text-[9px] text-text-3 font-mono">{zones.length}건</div>
+            </div>
+            <div className="divide-y" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
+              {zones.map((z) => (
+                <div
+                  key={z.id}
+                  onClick={() => setSelectedZone(selectedZone === z.id ? null : z.id)}
+                  className="px-4 py-2.5 hover:bg-bg-hover/30 transition-colors cursor-pointer"
+                  style={{ background: selectedZone === z.id ? `${z.color}08` : undefined, borderLeft: `3px solid ${z.monitoring ? z.color : 'transparent'}` }}
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] font-mono text-text-3">{z.id}</span>
+                      <span className="text-[11px] font-semibold text-text-1 font-korean">{z.name}</span>
+                    </div>
+                    <span className="px-1.5 py-0.5 rounded text-[9px] font-bold font-korean" style={statusStyle(z.status)}>
+                      {z.status}
+                    </span>
+                  </div>
+                  {/* 활성 소스 배지 + 주기 */}
+                  <div className="flex items-center gap-1.5 mt-1">
+                    {z.sources.map((sid) => {
+                      const cfg = MONITOR_SOURCES.find((s) => s.id === sid)!;
+                      return (
+                        <span key={sid} className="px-1.5 py-0.5 rounded text-[8px] font-bold" style={{ background: `${cfg.color}15`, color: cfg.color, border: `1px solid ${cfg.color}30` }}>
+                          {cfg.icon}
+                        </span>
+                      );
+                    })}
+                    <span className="text-[9px] text-text-4 font-mono ml-auto">{z.interval} · {z.lastCheck}</span>
+                  </div>
+                  {z.alerts > 0 && (
+                    <div className="mt-1.5 px-2 py-1 rounded text-[9px] font-bold font-korean" style={{ background: 'rgba(239,68,68,.08)', color: '#ef4444' }}>
+                      미확인 알림 {z.alerts}건
+                    </div>
+                  )}
+                </div>
+              ))}
+              {zones.length === 0 && (
+                <div className="px-4 py-8 text-center">
+                  <div className="text-2xl opacity-30 mb-2">📍</div>
+                  <div className="text-[10px] text-text-4 font-korean">등록된 감시 구역이 없습니다</div>
+                  <div className="text-[9px] text-text-4 font-korean mt-1">"+ 감시 구역 등록" 버튼으로 시작하세요</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/aerial/services/aerialApi.ts b/frontend/src/tabs/aerial/services/aerialApi.ts
index 8b7d72d..d1eadb3 100644
--- a/frontend/src/tabs/aerial/services/aerialApi.ts
+++ b/frontend/src/tabs/aerial/services/aerialApi.ts
@@ -159,3 +159,26 @@ export async function stopDroneStreamApi(id: string): Promise<{ success: boolean
   const response = await api.post<{ success: boolean }>(`/aerial/drone/streams/${id}/stop`);
   return response.data;
 }
+
+// ============================================================
+// UP42 위성 패스 조회
+// ============================================================
+
+export interface SatellitePass {
+  id: string;
+  satellite: string;
+  provider: string;
+  type: 'optical' | 'sar' | 'elevation';
+  resolution: string;
+  color: string;
+  startTime: string;
+  endTime: string;
+  maxElevation: number;
+  direction: 'ascending' | 'descending';
+  orbit: Array<{ lat: number; lon: number }>;
+}
+
+export async function fetchSatellitePasses(): Promise<SatellitePass[]> {
+  const response = await api.get<{ passes: SatellitePass[] }>('/aerial/satellite/passes');
+  return response.data.passes;
+}
diff --git a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
new file mode 100644
index 0000000..34d1ea6
--- /dev/null
+++ b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
@@ -0,0 +1,202 @@
+import { useState } from 'react'
+
+/**
+ * 해양환경관리법 제22조 기반 선박 발생 오염물 배출 규정
+ * 영해기선으로부터의 거리에 따라 배출 가능 여부 결정
+ *
+ * 법률 근거:
+ * https://lbox.kr/v2/statute/%ED%95%B4%EC%96%91%ED%99%98%EA%B2%BD%EA%B4%80%EB%A6%AC%EB%B2%95/%EB%B3%B8%EB%AC%B8%20%3E%20%EC%A0%9C3%EC%9E%A5%20%3E%20%EC%A0%9C1%EC%A0%88%20%3E%20%EC%A0%9C22%EC%A1%B0
+ * 선박에서의 오염방지에 관한 규칙 제8조[별표 2] 및 제14조
+ */
+
+type Status = 'forbidden' | 'allowed' | 'conditional'
+
+interface DischargeRule {
+  category: string
+  item: string
+  zones: [Status, Status, Status, Status] // [~3NM, 3~12NM, 12~25NM, 25NM+]
+  condition?: string
+}
+
+const RULES: DischargeRule[] = [
+  // 폐기물
+  { category: '폐기물', item: '플라스틱 제품', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
+  { category: '폐기물', item: '포장유해물질·용기', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
+  { category: '폐기물', item: '중금속 포함 쓰레기', zones: ['forbidden', 'forbidden', 'forbidden', 'forbidden'] },
+  // 화물잔류물
+  { category: '화물잔류물', item: '부유성 화물잔류물', zones: ['forbidden', 'forbidden', 'forbidden', 'allowed'] },
+  { category: '화물잔류물', item: '침강성 화물잔류물', zones: ['forbidden', 'forbidden', 'allowed', 'allowed'] },
+  { category: '화물잔류물', item: '화물창 세정수', zones: ['forbidden', 'forbidden', 'conditional', 'conditional'], condition: '해양환경에 해롭지 않은 일반세제 사용시' },
+  // 음식물 찌꺼기
+  { category: '음식물찌꺼기', item: '미분쇄', zones: ['forbidden', 'forbidden', 'allowed', 'allowed'] },
+  { category: '음식물찌꺼기', item: '분쇄·연마', zones: ['forbidden', 'conditional', 'allowed', 'allowed'], condition: '크기 25mm 이하시' },
+  // 분뇨
+  { category: '분뇨', item: '분뇨저장장치', zones: ['forbidden', 'forbidden', 'conditional', 'conditional'], condition: '항속 4노트 이상시 서서히 배출' },
+  { category: '분뇨', item: '분뇨마쇄소독장치', zones: ['forbidden', 'conditional', 'conditional', 'conditional'], condition: '항속 4노트 이상시 / 400톤 미만 국내항해 선박은 3해리 이내 가능' },
+  { category: '분뇨', item: '분뇨처리장치', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '수산자원보호구역, 보호수면 및 육성수면은 불가' },
+  // 중수
+  { category: '중수', item: '거주구역 중수', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '수산자원보호구역, 보호수면, 수산자원관리수면, 지정해역 등은 불가' },
+  // 수산동식물
+  { category: '수산동식물', item: '자연기원물질', zones: ['allowed', 'allowed', 'allowed', 'allowed'], condition: '면허 또는 허가를 득한 자에 한하여 어업활동 수면' },
+]
+
+const ZONE_LABELS = ['~3해리', '3~12해리', '12~25해리', '25해리+']
+const ZONE_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e']
+
+function getZoneIndex(distanceNm: number): number {
+  if (distanceNm < 3) return 0
+  if (distanceNm < 12) return 1
+  if (distanceNm < 25) return 2
+  return 3
+}
+
+function StatusBadge({ status }: { status: Status }) {
+  if (status === 'forbidden') return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(239,68,68,0.15)', color: '#ef4444' }}>배출불가</span>
+  if (status === 'allowed') return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(34,197,94,0.15)', color: '#22c55e' }}>배출가능</span>
+  return <span className="text-[8px] font-bold px-1.5 py-0.5 rounded" style={{ background: 'rgba(234,179,8,0.15)', color: '#eab308' }}>조건부</span>
+}
+
+interface DischargeZonePanelProps {
+  lat: number
+  lon: number
+  distanceNm: number
+  onClose: () => void
+}
+
+export function DischargeZonePanel({ lat, lon, distanceNm, onClose }: DischargeZonePanelProps) {
+  const zoneIdx = getZoneIndex(distanceNm)
+  const [expandedCat, setExpandedCat] = useState<string | null>(null)
+
+  const categories = [...new Set(RULES.map(r => r.category))]
+
+  return (
+    <div
+      className="absolute top-4 right-4 z-[1000] rounded-lg overflow-hidden flex flex-col"
+      style={{
+        width: 320,
+        maxHeight: 'calc(100% - 32px)',
+        background: 'rgba(13,17,23,0.95)',
+        border: '1px solid #30363d',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(12px)',
+      }}
+    >
+      {/* Header */}
+      <div
+        className="shrink-0 flex items-center justify-between"
+        style={{
+          padding: '10px 14px',
+          borderBottom: '1px solid #30363d',
+          background: 'linear-gradient(135deg, #1c2333, #161b22)',
+        }}
+      >
+        <div>
+          <div className="text-[11px] font-bold text-[#f0f6fc] font-korean">🚢 오염물 배출 규정</div>
+          <div className="text-[8px] text-[#8b949e] font-korean">해양환경관리법 제22조</div>
+        </div>
+        <span onClick={onClose} className="text-[14px] cursor-pointer text-[#8b949e] hover:text-[#f0f6fc]">✕</span>
+      </div>
+
+      {/* Location Info */}
+      <div className="shrink-0" style={{ padding: '8px 14px', borderBottom: '1px solid #21262d' }}>
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-[9px] text-[#8b949e] font-korean">선택 위치</span>
+          <span className="text-[9px] text-[#c9d1d9] font-mono">{lat.toFixed(4)}°N, {lon.toFixed(4)}°E</span>
+        </div>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[9px] text-[#8b949e] font-korean">영해기선 거리 (추정)</span>
+          <span className="text-[11px] font-bold font-mono" style={{ color: ZONE_COLORS[zoneIdx] }}>
+            {distanceNm.toFixed(1)} NM
+          </span>
+        </div>
+        {/* Zone indicator */}
+        <div className="flex gap-1">
+          {ZONE_LABELS.map((label, i) => (
+            <div
+              key={label}
+              className="flex-1 text-center rounded-sm"
+              style={{
+                padding: '3px 0',
+                fontSize: 8,
+                fontWeight: i === zoneIdx ? 700 : 400,
+                color: i === zoneIdx ? '#fff' : '#8b949e',
+                background: i === zoneIdx ? ZONE_COLORS[i] : 'rgba(255,255,255,0.04)',
+                border: i === zoneIdx ? 'none' : '1px solid #21262d',
+              }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Rules */}
+      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: '#30363d transparent' }}>
+        {categories.map(cat => {
+          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'
+
+          return (
+            <div key={cat} style={{ borderBottom: '1px solid #21262d' }}>
+              <div
+                className="flex items-center justify-between cursor-pointer"
+                onClick={() => setExpandedCat(isExpanded ? null : cat)}
+                style={{ padding: '8px 14px' }}
+              >
+                <div className="flex items-center gap-2">
+                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: summaryColor }} />
+                  <span className="text-[10px] font-bold text-[#c9d1d9] font-korean">{cat}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-[8px] font-semibold" style={{ color: summaryColor }}>
+                    {allForbidden ? '전체 불가' : allAllowed ? '전체 가능' : '항목별 상이'}
+                  </span>
+                  <span className="text-[9px] text-[#8b949e]">{isExpanded ? '▾' : '▸'}</span>
+                </div>
+              </div>
+
+              {isExpanded && (
+                <div style={{ padding: '0 14px 10px' }}>
+                  {catRules.map((rule, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center justify-between"
+                      style={{
+                        padding: '5px 8px',
+                        marginBottom: 2,
+                        background: 'rgba(255,255,255,0.02)',
+                        borderRadius: 4,
+                      }}
+                    >
+                      <span className="text-[9px] text-[#c9d1d9] font-korean">{rule.item}</span>
+                      <StatusBadge status={rule.zones[zoneIdx]} />
+                    </div>
+                  ))}
+                  {catRules.some(r => r.condition && r.zones[zoneIdx] !== 'forbidden') && (
+                    <div className="mt-1" style={{ padding: '4px 8px' }}>
+                      {catRules.filter(r => r.condition && r.zones[zoneIdx] !== 'forbidden').map((r, i) => (
+                        <div key={i} className="text-[7px] text-[#8b949e] font-korean leading-relaxed">
+                          💡 {r.item}: {r.condition}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Footer */}
+      <div className="shrink-0" style={{ padding: '6px 14px', borderTop: '1px solid #21262d' }}>
+        <div className="text-[7px] text-[#8b949e] font-korean leading-relaxed">
+          ※ 거리는 최근접 해안선 기준 추정치입니다. 실제 영해기선과 차이가 있을 수 있습니다.
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/tabs/incidents/components/IncidentsView.tsx b/frontend/src/tabs/incidents/components/IncidentsView.tsx
index 29c41b2..77d6787 100755
--- a/frontend/src/tabs/incidents/components/IncidentsView.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useMemo } from 'react'
 import { Map, Popup, useControl } from '@vis.gl/react-maplibre'
 import { MapboxOverlay } from '@deck.gl/mapbox'
-import { ScatterplotLayer, IconLayer } from '@deck.gl/layers'
+import { ScatterplotLayer, IconLayer, PathLayer } from '@deck.gl/layers'
+import { PathStyleExtension } from '@deck.gl/extensions'
 import type { StyleSpecification } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { IncidentsLeftPanel, type Incident } from './IncidentsLeftPanel'
@@ -9,23 +10,25 @@ import { IncidentsRightPanel, type ViewMode, type AnalysisSection } from './Inci
 import { mockVessels, VESSEL_LEGEND, type Vessel } from '@common/mock/vesselMockData'
 import { fetchIncidents } from '../services/incidentsApi'
 import type { IncidentCompat } from '../services/incidentsApi'
+import { DischargeZonePanel } from './DischargeZonePanel'
+import { estimateDistanceFromCoast, getDischargeZoneLines } from '../utils/dischargeZoneData'
 
-// ── CartoDB Dark Matter 베이스맵 ────────────────────────
+// ── CartoDB Positron 베이스맵 (밝은 테마) ────────────────
 const BASE_STYLE: StyleSpecification = {
   version: 8,
   sources: {
-    'carto-dark': {
+    'carto-light': {
       type: 'raster',
       tiles: [
-        'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
-        'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
+        'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
+        'https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
+        'https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png',
       ],
       tileSize: 256,
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     },
   },
-  layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark' }],
+  layers: [{ id: 'carto-light-layer', type: 'raster', source: 'carto-light' }],
 }
 
 // ── DeckGLOverlay ──────────────────────────────────────
@@ -90,6 +93,10 @@ export function IncidentsView() {
   const [incidentPopup, setIncidentPopup] = useState<IncidentPopupInfo | null>(null)
   const [hoverInfo, setHoverInfo] = useState<HoverInfo | null>(null)
 
+  // Discharge zone mode
+  const [dischargeMode, setDischargeMode] = useState(false)
+  const [dischargeInfo, setDischargeInfo] = useState<{ lat: number; lon: number; distanceNm: number } | null>(null)
+
   // Analysis view mode
   const [viewMode, setViewMode] = useState<ViewMode>('overlay')
   const [analysisActive, setAnalysisActive] = useState(false)
@@ -223,10 +230,30 @@ export function IncidentsView() {
     })
   }, [])
 
+  // ── 배출 구역 경계선 레이어 ──
+  const dischargeZoneLayers = useMemo(() => {
+    if (!dischargeMode) return []
+    const zoneLines = getDischargeZoneLines()
+    return zoneLines.map((line, i) =>
+      new PathLayer({
+        id: `discharge-zone-${i}`,
+        data: [line],
+        getPath: (d: typeof line) => d.path,
+        getColor: (d: typeof line) => d.color,
+        getWidth: 2,
+        widthUnits: 'pixels',
+        getDashArray: [6, 3],
+        dashJustified: true,
+        extensions: [new PathStyleExtension({ dash: true })],
+        pickable: false,
+      })
+    )
+  }, [dischargeMode])
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const deckLayers: any[] = useMemo(
-    () => [incidentLayer, vesselIconLayer],
-    [incidentLayer, vesselIconLayer],
+    () => [incidentLayer, vesselIconLayer, ...dischargeZoneLayers],
+    [incidentLayer, vesselIconLayer, dischargeZoneLayers],
   )
 
   return (
@@ -320,8 +347,17 @@ export function IncidentsView() {
               <Map
                 initialViewState={{ longitude: 127.8, latitude: 35.0, zoom: 7 }}
                 mapStyle={BASE_STYLE}
-                style={{ width: '100%', height: '100%', background: '#0a0e1a' }}
+                style={{ width: '100%', height: '100%', background: '#f0f0f0' }}
                 attributionControl={false}
+                onClick={(e) => {
+                  if (dischargeMode && e.lngLat) {
+                    const lat = e.lngLat.lat
+                    const lon = e.lngLat.lng
+                    const distanceNm = estimateDistanceFromCoast(lat, lon)
+                    setDischargeInfo({ lat, lon, distanceNm })
+                  }
+                }}
+                cursor={dischargeMode ? 'crosshair' : undefined}
               >
                 <DeckGLOverlay layers={deckLayers} />
 
@@ -428,6 +464,57 @@ export function IncidentsView() {
                 </div>
               )}
 
+              {/* 오염물 배출 규정 토글 */}
+              <button
+                onClick={() => {
+                  setDischargeMode(!dischargeMode)
+                  if (dischargeMode) setDischargeInfo(null)
+                }}
+                className="absolute z-[500] cursor-pointer rounded-md text-[10px] font-bold font-korean"
+                style={{
+                  top: 10,
+                  right: dischargeMode ? 340 : 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 #30363d',
+                  color: dischargeMode ? '#22d3ee' : '#8b949e',
+                  backdropFilter: 'blur(8px)',
+                  transition: 'all 0.2s',
+                }}
+              >
+                🚢 배출규정 {dischargeMode ? 'ON' : 'OFF'}
+              </button>
+
+              {/* 오염물 배출 규정 패널 */}
+              {dischargeMode && dischargeInfo && (
+                <DischargeZonePanel
+                  lat={dischargeInfo.lat}
+                  lon={dischargeInfo.lon}
+                  distanceNm={dischargeInfo.distanceNm}
+                  onClose={() => setDischargeInfo(null)}
+                />
+              )}
+
+              {/* 배출규정 모드 안내 */}
+              {dischargeMode && !dischargeInfo && (
+                <div
+                  className="absolute z-[500] rounded-md text-[11px] font-korean font-semibold"
+                  style={{
+                    top: '50%',
+                    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',
+                    backdropFilter: 'blur(8px)',
+                    pointerEvents: 'none',
+                  }}
+                >
+                  📍 지도를 클릭하여 배출 규정을 확인하세요
+                </div>
+              )}
+
               {/* AIS Live Badge */}
               <div
                 className="absolute top-[10px] right-[10px] z-[500] rounded-md"
diff --git a/frontend/src/tabs/incidents/utils/dischargeZoneData.ts b/frontend/src/tabs/incidents/utils/dischargeZoneData.ts
new file mode 100644
index 0000000..558fe3d
--- /dev/null
+++ b/frontend/src/tabs/incidents/utils/dischargeZoneData.ts
@@ -0,0 +1,166 @@
+/**
+ * 해양환경관리법 제22조 기반 오염물 배출 구역 데이터 및 유틸리티
+ *
+ * 법률 근거:
+ * https://lbox.kr/v2/statute/%ED%95%B4%EC%96%91%ED%99%98%EA%B2%BD%EA%B4%80%EB%A6%AC%EB%B2%95/%EB%B3%B8%EB%AC%B8%20%3E%20%EC%A0%9C3%EC%9E%A5%20%3E%20%EC%A0%9C1%EC%A0%88%20%3E%20%EC%A0%9C22%EC%A1%B0
+ * 선박에서의 오염방지에 관한 규칙 제8조[별표 2] 및 제14조
+ */
+
+// 한국 해안선 — OpenStreetMap Nominatim 기반 실측 좌표
+// [lat, lon] 형식, 시계방향 (동해→남해→서해→DMZ)
+const COASTLINE_POINTS: [number, number][] = [
+  // 동해안 (북→남)
+  [38.6177, 128.6560], [38.5504, 128.4092], [38.4032, 128.7767],
+  [38.1904, 128.8902], [38.0681, 128.9977], [37.9726, 129.0715],
+  [37.8794, 129.1721], [37.8179, 129.2397], [37.6258, 129.3669],
+  [37.5053, 129.4577], [37.3617, 129.5700], [37.1579, 129.6538],
+  [37.0087, 129.6706], [36.6618, 129.7210], [36.3944, 129.6827],
+  [36.2052, 129.7641], [35.9397, 129.8124], [35.6272, 129.7121],
+  [35.4732, 129.6908], [35.2843, 129.5924], [35.1410, 129.4656],
+  [35.0829, 129.2125],
+  // 남해안 (부산→여수→목포)
+  [34.8950, 129.0658], [34.2050, 128.3063], [35.0220, 128.0362],
+  [34.9663, 127.8732], [34.9547, 127.7148], [34.8434, 127.6625],
+  [34.7826, 127.7422], [34.6902, 127.6324], [34.8401, 127.5236],
+  [34.8230, 127.4043], [34.6882, 127.4234], [34.6252, 127.4791],
+  [34.5525, 127.4012], [34.4633, 127.3246], [34.5461, 127.1734],
+  [34.6617, 127.2605], [34.7551, 127.2471], [34.6069, 127.0308],
+  [34.4389, 126.8975], [34.4511, 126.8263], [34.4949, 126.7965],
+  [34.5119, 126.7548], [34.4035, 126.6108], [34.3175, 126.5844],
+  [34.3143, 126.5314], [34.3506, 126.5083], [34.4284, 126.5064],
+  [34.4939, 126.4817], [34.5896, 126.3326], [34.6732, 126.2645],
+  // 서해안 (목포→인천)
+  [34.7200, 126.3011], [34.6946, 126.4256], [34.6979, 126.5245],
+  [34.7787, 126.5386], [34.8244, 126.5934], [34.8104, 126.4785],
+  [34.8234, 126.4207], [34.9328, 126.3979], [35.0451, 126.3274],
+  [35.1542, 126.2911], [35.2169, 126.3605], [35.3144, 126.3959],
+  [35.4556, 126.4604], [35.5013, 126.4928], [35.5345, 126.5822],
+  [35.5710, 126.6141], [35.5897, 126.5649], [35.6063, 126.4865],
+  [35.6471, 126.4885], [35.6693, 126.5419], [35.7142, 126.6016],
+  [35.7688, 126.7174], [35.8720, 126.7530], [35.8979, 126.7196],
+  [35.9225, 126.6475], [35.9745, 126.6637], [36.0142, 126.6935],
+  [36.0379, 126.6823], [36.1050, 126.5971], [36.1662, 126.5404],
+  [36.2358, 126.5572], [36.3412, 126.5442], [36.4297, 126.5520],
+  [36.4776, 126.5482], [36.5856, 126.5066], [36.6938, 126.4877],
+  [36.6780, 126.4330], [36.6512, 126.3888], [36.6893, 126.2307],
+  [36.6916, 126.1809], [36.7719, 126.1605], [36.8709, 126.2172],
+  [36.9582, 126.3516], [36.9690, 126.4287], [37.0075, 126.4870],
+  [37.0196, 126.5777], [36.9604, 126.6867], [36.9484, 126.7845],
+  [36.8461, 126.8388], [36.8245, 126.8721], [36.8621, 126.8791],
+  [36.9062, 126.9580], [36.9394, 126.9769], [36.9576, 126.9598],
+  [36.9757, 126.8689], [37.1027, 126.7874], [37.1582, 126.7761],
+  [37.1936, 126.7464], [37.2949, 126.7905], [37.4107, 126.6962],
+  [37.4471, 126.6503], [37.5512, 126.6568], [37.6174, 126.6076],
+  [37.6538, 126.5802], [37.7165, 126.5634], [37.7447, 126.5777],
+  [37.7555, 126.6207], [37.7818, 126.6339], [37.8007, 126.6646],
+  [37.8279, 126.6665], [37.9172, 126.6668], [37.9790, 126.7543],
+  // DMZ (간소화)
+  [38.1066, 126.8789], [38.1756, 126.9400], [38.2405, 127.0097],
+  [38.2839, 127.0903], [38.3045, 127.1695], [38.3133, 127.2940],
+  [38.3244, 127.5469], [38.3353, 127.7299], [38.3469, 127.7858],
+  [38.3066, 127.8207], [38.3250, 127.9001], [38.3150, 128.0083],
+  [38.3107, 128.0314], [38.3189, 128.0887], [38.3317, 128.1269],
+  [38.3481, 128.1606], [38.3748, 128.2054], [38.4032, 128.2347],
+  [38.4797, 128.3064], [38.5339, 128.6952], [38.6177, 128.6560],
+]
+
+// 제주도 — OpenStreetMap 기반 (26 points)
+const JEJU_POINTS: [number, number][] = [
+  [33.5168, 126.0128], [33.5067, 126.0073], [33.1190, 126.0102],
+  [33.0938, 126.0176], [33.0748, 126.0305], [33.0556, 126.0355],
+  [33.0280, 126.0492], [33.0159, 126.4783], [33.0115, 126.5186],
+  [33.0143, 126.5572], [33.0231, 126.5970], [33.0182, 126.6432],
+  [33.0201, 126.7129], [33.0458, 126.7847], [33.0662, 126.8169],
+  [33.0979, 126.8512], [33.1192, 126.9292], [33.1445, 126.9783],
+  [33.1683, 127.0129], [33.1974, 127.0430], [33.2226, 127.0634],
+  [33.2436, 127.0723], [33.4646, 127.2106], [33.5440, 126.0355],
+  [33.5808, 126.0814], [33.5168, 126.0128],
+]
+
+const ALL_COASTLINE = [...COASTLINE_POINTS, ...JEJU_POINTS]
+
+/** 두 좌표 간 대략적 해리(NM) 계산 (Haversine) */
+function haversineNm(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 3440.065
+  const dLat = (lat2 - lat1) * Math.PI / 180
+  const dLon = (lon2 - lon1) * Math.PI / 180
+  const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2
+  return 2 * R * Math.asin(Math.sqrt(a))
+}
+
+/** 클릭 지점에서 가장 가까운 해안선까지의 거리 (NM) */
+export function estimateDistanceFromCoast(lat: number, lon: number): number {
+  let minDist = Infinity
+  for (const [cLat, cLon] of ALL_COASTLINE) {
+    const dist = haversineNm(lat, lon, cLat, cLon)
+    if (dist < minDist) minDist = dist
+  }
+  return minDist
+}
+
+/**
+ * 해안선을 주어진 해리(NM) 만큼 바깥(바다쪽)으로 오프셋한 경계선 생성
+ */
+function offsetCoastline(points: [number, number][], distanceNm: number, outwardSign: number = 1): [number, number][] {
+  const degPerNm = 1 / 60
+  const result: [number, number][] = []
+
+  for (let i = 0; i < points.length; i++) {
+    const prev = points[(i - 1 + points.length) % points.length]
+    const curr = points[i]
+    const next = points[(i + 1) % points.length]
+
+    const cosLat = Math.cos(curr[0] * Math.PI / 180)
+    const dx0 = (curr[1] - prev[1]) * cosLat
+    const dy0 = curr[0] - prev[0]
+    const dx1 = (next[1] - curr[1]) * cosLat
+    const dy1 = next[0] - curr[0]
+
+    let nx = -(dy0 + dy1) / 2
+    let ny = (dx0 + dx1) / 2
+    const len = Math.sqrt(nx * nx + ny * ny) || 1
+    nx /= len
+    ny /= len
+
+    const latOff = outwardSign * nx * distanceNm * degPerNm
+    const lonOff = outwardSign * ny * distanceNm * degPerNm / cosLat
+
+    result.push([curr[0] + latOff, curr[1] + lonOff])
+  }
+
+  return result
+}
+
+export interface ZoneLine {
+  path: [number, number][]
+  color: [number, number, number, number]
+  label: string
+  distanceNm: number
+}
+
+export function getDischargeZoneLines(): ZoneLine[] {
+  const zones = [
+    { nm: 3, color: [239, 68, 68, 180] as [number, number, number, number], label: '3해리' },
+    { nm: 12, color: [249, 115, 22, 160] as [number, number, number, number], label: '12해리' },
+    { nm: 25, color: [234, 179, 8, 140] as [number, number, number, number], label: '25해리' },
+  ]
+
+  const lines: ZoneLine[] = []
+  for (const zone of zones) {
+    const mainOffset = offsetCoastline(COASTLINE_POINTS, zone.nm, -1)
+    lines.push({
+      path: mainOffset.map(([lat, lon]) => [lon, lat] as [number, number]),
+      color: zone.color,
+      label: zone.label,
+      distanceNm: zone.nm,
+    })
+    const jejuOffset = offsetCoastline(JEJU_POINTS, zone.nm, +1)
+    lines.push({
+      path: jejuOffset.map(([lat, lon]) => [lon, lat] as [number, number]),
+      color: zone.color,
+      label: `${zone.label} (제주)`,
+      distanceNm: zone.nm,
+    })
+  }
+  return lines
+}
diff --git a/frontend/src/tabs/prediction/components/PredictionInputSection.tsx b/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
index c8d7a57..01a25fd 100644
--- a/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
+++ b/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
@@ -1,5 +1,4 @@
-import { useState, useRef } from 'react'
-import { decimalToDMS } from '@common/utils/coordinates'
+import { useState, useRef, useEffect } from 'react'
 import { ComboBox } from '@common/components/ui/ComboBox'
 import type { PredictionModel } from './OilSpillView'
 import { analyzeImage } from '../services/predictionApi'
@@ -267,54 +266,33 @@ const PredictionInputSection = ({
           {/* 사고 발생 시각 */}
           <div className="flex flex-col gap-0.5">
             <label className="text-[9px] text-text-3 font-korean">사고 발생 시각 (KST)</label>
-            <input
-              className="prd-i"
-              type="datetime-local"
+            <DateTimeInput
               value={accidentTime}
-              onChange={(e) => onAccidentTimeChange(e.target.value)}
-              style={{ colorScheme: 'dark' }}
+              onChange={onAccidentTimeChange}
             />
           </div>
 
-          {/* Coordinates + Map Button */}
+          {/* Coordinates (DMS) + Map Button */}
           <div className="flex flex-col gap-1">
-            <div className="grid items-center gap-1" style={{ gridTemplateColumns: '1fr 1fr auto' }}>
-              <input
-                className="prd-i"
-                type="number"
-                step="0.0001"
-                value={incidentCoord?.lat ?? ''}
-                onChange={(e) => {
-                  const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
-                  onCoordChange({ lon: incidentCoord?.lon ?? 0, lat: isNaN(value) ? 0 : value })
-                }}
-                placeholder="위도°"
-              />
-              <input
-                className="prd-i"
-                type="number"
-                step="0.0001"
-                value={incidentCoord?.lon ?? ''}
-                onChange={(e) => {
-                  const value = e.target.value === '' ? 0 : parseFloat(e.target.value)
-                  onCoordChange({ lat: incidentCoord?.lat ?? 0, lon: isNaN(value) ? 0 : value })
-                }}
-                placeholder="경도°"
+            <div className="grid grid-cols-[1fr_auto] gap-x-1 gap-y-1">
+              <DmsCoordInput
+                label="위도"
+                isLatitude={true}
+                decimal={incidentCoord?.lat ?? 0}
+                onChange={(val) => onCoordChange({ lon: incidentCoord?.lon ?? 0, lat: val })}
               />
               <button
                 className={`prd-map-btn${isSelectingLocation ? ' active' : ''}`}
                 onClick={onMapSelectClick}
-              >📍 지도</button>
+                style={{ gridRow: '1 / 3', gridColumn: 2, whiteSpace: 'nowrap', height: '100%', minWidth: 48, padding: '0 10px' }}
+              >📍<br/>지도</button>
+              <DmsCoordInput
+                label="경도"
+                isLatitude={false}
+                decimal={incidentCoord?.lon ?? 0}
+                onChange={(val) => onCoordChange({ lat: incidentCoord?.lat ?? 0, lon: val })}
+              />
             </div>
-            {/* 도분초 표시 */}
-            {incidentCoord && !isNaN(incidentCoord.lat) && !isNaN(incidentCoord.lon) && (
-              <div
-                className="text-[9px] text-text-3 font-mono border border-border bg-bg-0"
-                style={{ padding: '4px 8px', borderRadius: 'var(--rS)' }}
-              >
-                {decimalToDMS(incidentCoord.lat, true)} / {decimalToDMS(incidentCoord.lon, false)}
-              </div>
-            )}
           </div>
 
           {/* Oil Type + Oil Kind */}
@@ -384,7 +362,7 @@ const PredictionInputSection = ({
 
           {/* Model Selection (다중 선택) */}
           {/* POSEIDON: 엔진 연동 완료. KOSPS: 준비 중 (ready: false) */}
-          <div className="flex flex-wrap gap-[3px]">
+          <div className="grid grid-cols-3 gap-[3px]">
             {([
               { id: 'KOSPS' as PredictionModel, color: 'var(--cyan)', ready: false },
               { id: 'POSEIDON' as PredictionModel, color: 'var(--red)', ready: true },
@@ -392,7 +370,7 @@ const PredictionInputSection = ({
             ] as const).map(m => (
               <div
                 key={m.id}
-                className={`prd-mc ${selectedModels.has(m.id) ? 'on' : ''} cursor-pointer`}
+                className={`prd-mc ${selectedModels.has(m.id) ? 'on' : ''} cursor-pointer text-center`}
                 onClick={() => {
                   if (!m.ready) {
                     alert(`${m.id} 모델은 현재 준비중입니다.`)
@@ -445,4 +423,294 @@ const PredictionInputSection = ({
   )
 }
 
+// ── 커스텀 날짜/시간 선택 컴포넌트 ─────────────────────
+function DateTimeInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const [showCal, setShowCal] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const datePart = value ? value.split('T')[0] : ''
+  const timePart = value && value.includes('T') ? value.split('T')[1] : '00:00'
+  const [hh, mm] = timePart.split(':').map(Number)
+
+  const parsed = datePart ? new Date(datePart + 'T00:00:00') : new Date()
+  const [viewYear, setViewYear] = useState(parsed.getFullYear())
+  const [viewMonth, setViewMonth] = useState(parsed.getMonth())
+
+  const selY = datePart ? parsed.getFullYear() : -1
+  const selM = datePart ? parsed.getMonth() : -1
+  const selD = datePart ? parsed.getDate() : -1
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setShowCal(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate()
+  const firstDay = new Date(viewYear, viewMonth, 1).getDay()
+  const days: (number | null)[] = []
+  for (let i = 0; i < firstDay; i++) days.push(null)
+  for (let i = 1; i <= daysInMonth; i++) days.push(i)
+
+  const pickDate = (day: number) => {
+    const m = String(viewMonth + 1).padStart(2, '0')
+    const d = String(day).padStart(2, '0')
+    onChange(`${viewYear}-${m}-${d}T${timePart}`)
+    setShowCal(false)
+  }
+
+  const updateTime = (newHH: number, newMM: number) => {
+    const date = datePart || new Date().toISOString().split('T')[0]
+    onChange(`${date}T${String(newHH).padStart(2, '0')}:${String(newMM).padStart(2, '0')}`)
+  }
+
+  const prevMonth = () => {
+    if (viewMonth === 0) { setViewYear(viewYear - 1); setViewMonth(11) }
+    else setViewMonth(viewMonth - 1)
+  }
+  const nextMonth = () => {
+    if (viewMonth === 11) { setViewYear(viewYear + 1); setViewMonth(0) }
+    else setViewMonth(viewMonth + 1)
+  }
+
+  const displayDate = datePart
+    ? `${selY}.${String(selM + 1).padStart(2, '0')}.${String(selD).padStart(2, '0')}`
+    : '날짜 선택'
+
+  const today = new Date()
+  const todayY = today.getFullYear()
+  const todayM = today.getMonth()
+  const todayD = today.getDate()
+
+  return (
+    <div ref={ref} className="flex items-center gap-1 relative">
+      {/* 날짜 버튼 */}
+      <button
+        type="button"
+        onClick={() => setShowCal(!showCal)}
+        className="prd-i flex-1 flex items-center justify-between cursor-pointer"
+        style={{ padding: '5px 8px', fontSize: 10 }}
+      >
+        <span className="font-mono" style={{ color: datePart ? 'var(--t1)' : 'var(--t3)' }}>{displayDate}</span>
+        <span className="text-[9px] opacity-60">📅</span>
+      </button>
+
+      {/* 시 */}
+      <TimeDropdown value={hh} max={24} onChange={(v) => updateTime(v, mm)} />
+      <span className="text-[8px] text-text-3 font-bold">:</span>
+      {/* 분 */}
+      <TimeDropdown value={mm} max={60} onChange={(v) => updateTime(hh, v)} />
+
+      {/* 캘린더 팝업 */}
+      {showCal && (
+        <div
+          className="absolute z-[9999] rounded-md overflow-hidden"
+          style={{
+            top: '100%',
+            left: 0,
+            marginTop: 4,
+            width: 200,
+            background: 'var(--bg3)',
+            border: '1px solid var(--bd)',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+          }}
+        >
+          {/* 헤더 */}
+          <div className="flex items-center justify-between" style={{ padding: '6px 8px', borderBottom: '1px solid var(--bd)' }}>
+            <button type="button" onClick={prevMonth} className="text-[10px] text-text-3 cursor-pointer px-1 hover:text-text-1">◀</button>
+            <span className="text-[10px] font-bold text-text-1 font-korean">{viewYear}년 {viewMonth + 1}월</span>
+            <button type="button" onClick={nextMonth} className="text-[10px] text-text-3 cursor-pointer px-1 hover:text-text-1">▶</button>
+          </div>
+          {/* 요일 */}
+          <div className="grid grid-cols-7 text-center" style={{ padding: '3px 4px 0' }}>
+            {['일', '월', '화', '수', '목', '금', '토'].map((d) => (
+              <span key={d} className="text-[8px] text-text-3 font-korean" style={{ padding: '2px 0' }}>{d}</span>
+            ))}
+          </div>
+          {/* 날짜 */}
+          <div className="grid grid-cols-7 text-center" style={{ padding: '2px 4px 6px' }}>
+            {days.map((day, i) => {
+              if (day === null) return <span key={`e-${i}`} />
+              const isSelected = viewYear === selY && viewMonth === selM && day === selD
+              const isToday = viewYear === todayY && viewMonth === todayM && day === todayD
+              return (
+                <button
+                  key={day}
+                  type="button"
+                  onClick={() => pickDate(day)}
+                  className="cursor-pointer rounded-sm"
+                  style={{
+                    padding: '3px 0',
+                    fontSize: 9,
+                    fontFamily: 'var(--fM)',
+                    fontWeight: isSelected ? 700 : 400,
+                    color: isSelected ? '#fff' : isToday ? 'var(--cyan)' : 'var(--t2)',
+                    background: isSelected ? 'var(--cyan)' : 'transparent',
+                    border: 'none',
+                  }}
+                >
+                  {day}
+                </button>
+              )
+            })}
+          </div>
+          {/* 오늘 버튼 */}
+          <div style={{ padding: '0 8px 6px' }}>
+            <button
+              type="button"
+              onClick={() => {
+                setViewYear(todayY)
+                setViewMonth(todayM)
+                pickDate(todayD)
+              }}
+              className="w-full text-[8px] font-korean font-semibold cursor-pointer rounded-sm"
+              style={{
+                padding: '3px 0',
+                background: 'rgba(6,182,212,0.08)',
+                border: '1px solid rgba(6,182,212,0.2)',
+                color: 'var(--cyan)',
+              }}
+            >
+              오늘
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── 커스텀 시간 드롭다운 (다크 테마) ───────────────────
+function TimeDropdown({ value, max, onChange }: { value: number; max: number; onChange: (v: number) => void }) {
+  const [open, setOpen] = useState(false)
+  const dropRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (dropRef.current && !dropRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  useEffect(() => {
+    if (open && listRef.current) {
+      const activeEl = listRef.current.querySelector('[data-active="true"]')
+      if (activeEl) activeEl.scrollIntoView({ block: 'center' })
+    }
+  }, [open])
+
+  return (
+    <div ref={dropRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="prd-i text-center font-mono cursor-pointer"
+        style={{ width: 38, padding: '5px 2px', fontSize: 9 }}
+      >
+        {String(value).padStart(2, '0')}
+      </button>
+      {open && (
+        <div
+          ref={listRef}
+          className="absolute z-[9999] overflow-y-auto rounded-md"
+          style={{
+            top: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginTop: 2,
+            width: 42,
+            maxHeight: 160,
+            background: 'var(--bg3)',
+            border: '1px solid var(--bd)',
+            boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'var(--bd) transparent',
+          }}
+        >
+          {Array.from({ length: max }, (_, i) => (
+            <button
+              key={i}
+              type="button"
+              data-active={i === value}
+              onClick={() => { onChange(i); setOpen(false) }}
+              className="w-full text-center font-mono cursor-pointer"
+              style={{
+                padding: '4px 0',
+                fontSize: 9,
+                color: i === value ? 'var(--cyan)' : 'var(--t2)',
+                background: i === value ? 'rgba(6,182,212,0.15)' : 'transparent',
+                fontWeight: i === value ? 700 : 400,
+                border: 'none',
+              }}
+            >
+              {String(i).padStart(2, '0')}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── 도분초 좌표 입력 컴포넌트 ──────────────────────────
+function DmsCoordInput({
+  label,
+  isLatitude,
+  decimal,
+  onChange,
+}: {
+  label: string
+  isLatitude: boolean
+  decimal: number
+  onChange: (val: number) => void
+}) {
+  const abs = Math.abs(decimal)
+  const d = Math.floor(abs)
+  const mDec = (abs - d) * 60
+  const m = Math.floor(mDec)
+  const s = parseFloat(((mDec - m) * 60).toFixed(2))
+  const dir = isLatitude ? (decimal >= 0 ? 'N' : 'S') : (decimal >= 0 ? 'E' : 'W')
+
+  const update = (deg: number, min: number, sec: number, direction: string) => {
+    let val = deg + min / 60 + sec / 3600
+    if (direction === 'S' || direction === 'W') val = -val
+    onChange(val)
+  }
+
+  const fieldStyle = { padding: '5px 2px', fontSize: 10, minWidth: 0 }
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-[8px] text-text-3 font-korean">{label}</span>
+      <div className="flex items-center gap-0.5">
+        <select
+          className="prd-i text-center"
+          value={dir}
+          onChange={(e) => update(d, m, s, e.target.value)}
+          style={{ width: 32, padding: '5px 1px', fontSize: 10, appearance: 'none', WebkitAppearance: 'none', backgroundImage: 'none' }}
+        >
+          {isLatitude ? (
+            <><option value="N">N</option><option value="S">S</option></>
+          ) : (
+            <><option value="E">E</option><option value="W">W</option></>
+          )}
+        </select>
+        <input className="prd-i text-center flex-1" type="number" min={0} max={isLatitude ? 90 : 180}
+          value={d} onChange={(e) => update(parseInt(e.target.value) || 0, m, s, dir)} style={fieldStyle} />
+        <span className="text-[9px] text-text-3">°</span>
+        <input className="prd-i text-center flex-1" type="number" min={0} max={59}
+          value={m} onChange={(e) => update(d, parseInt(e.target.value) || 0, s, dir)} style={fieldStyle} />
+        <span className="text-[9px] text-text-3">'</span>
+        <input className="prd-i text-center flex-1" type="number" min={0} max={59.99} step={0.01}
+          value={s} onChange={(e) => update(d, m, parseFloat(e.target.value) || 0, dir)} style={fieldStyle} />
+        <span className="text-[9px] text-text-3">"</span>
+      </div>
+    </div>
+  )
+}
+
 export default PredictionInputSection
diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
index 1911606..1f5afe0 100755
--- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
+++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
@@ -96,12 +96,34 @@ function StatCard({ value, label, valueClass = 'text-primary-cyan' }: { value: s
 
 /* ── Main Component ───────────────────────────────────────── */
 
+/** 풍속 등급 색상 */
+function windColor(speed: number): string {
+  if (speed >= 14) return '#ef4444'
+  if (speed >= 10) return '#f97316'
+  if (speed >= 6) return '#eab308'
+  return '#22c55e'
+}
+
+/** 파고 등급 색상 */
+function waveColor(height: number): string {
+  if (height >= 3) return '#ef4444'
+  if (height >= 2) return '#f97316'
+  if (height >= 1) return '#eab308'
+  return '#22c55e'
+}
+
+/** 풍향 텍스트 */
+function windDirText(deg: number): string {
+  const dirs = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']
+  return dirs[Math.round(deg / 22.5) % 16]
+}
+
 export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
   if (!weatherData) {
     return (
-      <div className="flex flex-col bg-bg-1 border-l border-border overflow-hidden w-[380px] shrink-0">
+      <div className="flex flex-col bg-bg-1 border-l border-border overflow-hidden w-[320px] shrink-0">
         <div className="p-6 text-center">
-          <p className="text-text-3 text-sm">지도에서 해양 지점을 클릭하세요</p>
+          <p className="text-text-3 text-[13px] font-korean">지도에서 해양 지점을 클릭하세요</p>
         </div>
       </div>
     );
@@ -121,7 +143,15 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
           <span className="px-2 py-0.5 text-[10px] rounded bg-primary-cyan/20 text-primary-cyan font-semibold">
             기상예보관
           </span>
+    <div className="flex flex-col bg-bg-1 border-l border-border overflow-hidden w-[320px] shrink-0">
+      {/* 헤더 */}
+      <div className="px-4 py-3 border-b border-border bg-bg-2">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="text-[13px] font-bold text-primary-cyan font-korean">📍 {weatherData.stationName}</span>
+          <span className="px-1.5 py-px text-[11px] rounded bg-primary-cyan/15 text-primary-cyan font-bold">기상예보관</span>
         </div>
+        <p className="text-[11px] text-text-3 font-mono">
+          {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E · {weatherData.currentTime}
         <p className="text-[11px] text-text-3 font-mono">
           {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E · {weatherData.currentTime}
         </p>
@@ -143,14 +173,71 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 {wave.height.toFixed(1)}
               </span>
               <span className="text-[12px] text-text-3 mt-1">파고 (m)</span>
+      {/* 스크롤 콘텐츠 */}
+      <div className="flex-1 overflow-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
+
+        {/* ── 핵심 지표 3칸 카드 ── */}
+        <div className="grid grid-cols-3 gap-1 px-3 py-2.5">
+          <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
+            <div className="text-[20px] font-bold font-mono" style={{ color: windColor(wSpd) }}>{wSpd.toFixed(1)}</div>
+            <div className="text-[11px] text-text-3 font-korean">풍속 (m/s)</div>
+          </div>
+          <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
+            <div className="text-[20px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}</div>
+            <div className="text-[11px] text-text-3 font-korean">파고 (m)</div>
+          </div>
+          <div className="text-center py-2.5 bg-bg-0 border border-border rounded-md">
+            <div className="text-[20px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}</div>
+            <div className="text-[11px] text-text-3 font-korean">수온 (°C)</div>
+          </div>
+        </div>
+
+        {/* ── 바람 상세 ── */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[11px] font-bold text-text-3 font-korean mb-2">🌬️ 바람 현황</div>
+          <div className="flex items-center gap-3 mb-2">
+            {/* 풍향 컴파스 */}
+            <div className="relative w-[50px] h-[50px] shrink-0">
+              <svg viewBox="0 0 50 50" className="w-full h-full">
+                <circle cx="25" cy="25" r="22" fill="none" stroke="var(--bd)" strokeWidth="1" />
+                <circle cx="25" cy="25" r="16" fill="none" stroke="var(--bd)" strokeWidth="0.5" strokeDasharray="2 2" />
+                {['N', 'E', 'S', 'W'].map((d, i) => {
+                  const angle = i * 90
+                  const rad = (angle - 90) * Math.PI / 180
+                  const x = 25 + 20 * Math.cos(rad)
+                  const y = 25 + 20 * Math.sin(rad)
+                  return <text key={d} x={x} y={y} textAnchor="middle" dominantBaseline="central" fill="var(--t3)" fontSize="6" fontWeight="bold">{d}</text>
+                })}
+                {/* 풍향 화살표 */}
+                <line
+                  x1="25" y1="25"
+                  x2={25 + 14 * Math.sin(weatherData.wind.direction * Math.PI / 180)}
+                  y2={25 - 14 * Math.cos(weatherData.wind.direction * Math.PI / 180)}
+                  stroke={windColor(wSpd)} strokeWidth="2" strokeLinecap="round"
+                />
+                <circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
+              </svg>
             </div>
             <div className="bg-bg-2 border border-border rounded-lg p-3 flex flex-col items-center">
               <span className="text-[22px] font-bold text-primary-cyan font-mono leading-none">
                 {temperature.current.toFixed(1)}
               </span>
               <span className="text-[12px] text-text-3 mt-1">수온 (°C)</span>
+            <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1.5 text-[11px]">
+              <div className="flex justify-between"><span className="text-text-3">풍향</span><span className="text-text-1 font-mono font-bold text-[13px]">{windDir} {weatherData.wind.direction}°</span></div>
+              <div className="flex justify-between"><span className="text-text-3">기압</span><span className="text-text-1 font-mono text-[13px]">{weatherData.pressure} hPa</span></div>
+              <div className="flex justify-between"><span className="text-text-3">1k 최고</span><span className="font-mono text-[13px]" style={{ color: windColor(weatherData.wind.speed_1k) }}>{Number(weatherData.wind.speed_1k).toFixed(1)}</span></div>
+              <div className="flex justify-between"><span className="text-text-3">3k 평균</span><span className="font-mono text-[13px]" style={{ color: windColor(weatherData.wind.speed_3k) }}>{Number(weatherData.wind.speed_3k).toFixed(1)}</span></div>
+              <div className="col-span-2 flex justify-between"><span className="text-text-3">가시거리</span><span className="text-text-1 font-mono text-[13px]">{weatherData.visibility} km</span></div>
             </div>
           </div>
+          {/* 풍속 게이지 바 */}
+          <div className="flex items-center gap-2">
+            <div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden">
+              <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wSpd / 20 * 100, 100)}%`, background: windColor(wSpd) }} />
+            </div>
+            <span className="text-[11px] font-mono text-text-3 shrink-0">{wSpd.toFixed(1)}/20</span>
+          </div>
         </div>
 
         {/* ── 바람 현황 ──────────────────────────────────── */}
@@ -164,7 +251,33 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
               <span className="flex justify-between"><span className="text-text-3">1k 최고</span><span className="text-text-1 font-semibold font-mono">{wind.speed_1k.toFixed(1)}</span></span>
               <span className="flex justify-between"><span className="text-text-3">3k 평균</span><span className="text-text-1 font-semibold font-mono">{wind.speed_3k.toFixed(1)}</span></span>
               <span className="flex justify-between"><span className="text-text-3">가시거리</span><span className="text-text-1 font-semibold font-mono">{visibility} km</span></span>
+        {/* ── 파도 상세 ── */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[11px] font-bold text-text-3 font-korean mb-2">🌊 파도</div>
+          <div className="grid grid-cols-4 gap-1">
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>{wHgt.toFixed(1)}m</div>
+              <div className="text-[10px] text-text-3">유의파고</div>
             </div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-status-red">{(wHgt * 1.6).toFixed(1)}m</div>
+              <div className="text-[10px] text-text-3">최고파고</div>
+            </div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-primary-cyan">{weatherData.wave.period}s</div>
+              <div className="text-[10px] text-text-3">주기</div>
+            </div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">NW</div>
+              <div className="text-[10px] text-text-3">파향</div>
+            </div>
+          </div>
+          {/* 파고 게이지 바 */}
+          <div className="flex items-center gap-2 mt-1.5">
+            <div className="flex-1 h-[5px] bg-bg-3 rounded-full overflow-hidden">
+              <div className="h-full rounded-full transition-all" style={{ width: `${Math.min(wHgt / 5 * 100, 100)}%`, background: waveColor(wHgt) }} />
+            </div>
+            <span className="text-[11px] font-mono text-text-3 shrink-0">{wHgt.toFixed(1)}/5m</span>
           </div>
           <ProgressBar
             value={wind.speed}
@@ -198,6 +311,22 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
             <StatCard value={`${temperature.current.toFixed(1)}°`} label="수온" />
             <StatCard value={`${temperature.feelsLike.toFixed(1)}°`} label="기온" />
             <StatCard value={`${salinity.toFixed(1)}`} label="염분(PSU)" />
+        {/* ── 수온/공기 ── */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[11px] font-bold text-text-3 font-korean mb-2">🌡️ 수온 · 공기</div>
+          <div className="grid grid-cols-3 gap-1">
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-primary-cyan">{wTemp.toFixed(1)}°</div>
+              <div className="text-[10px] text-text-3">수온</div>
+            </div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">2.1°</div>
+              <div className="text-[10px] text-text-3">기온</div>
+            </div>
+            <div className="text-center py-2 bg-bg-0 border border-border rounded">
+              <div className="text-[14px] font-bold font-mono text-text-1">31.2</div>
+              <div className="text-[10px] text-text-3">염분(PSU)</div>
+            </div>
           </div>
         </div>
 
@@ -214,6 +343,16 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 <span className="text-lg">{fc.icon}</span>
                 <span className="text-sm font-bold text-primary-cyan">{fc.temperature}°</span>
                 <span className="text-[10px] text-text-3">{fc.windSpeed}</span>
+        {/* ── 시간별 예보 ── */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[11px] font-bold text-text-3 font-korean mb-2">⏰ 시간별 예보</div>
+          <div className="grid grid-cols-5 gap-1">
+            {weatherData.forecast.map((f, i) => (
+              <div key={i} className="flex flex-col items-center py-2 px-1 bg-bg-0 border border-border rounded">
+                <span className="text-[11px] text-text-3 mb-0.5">{f.hour}</span>
+                <span className="text-lg mb-0.5">{f.icon}</span>
+                <span className="text-[13px] font-bold text-text-1">{f.temperature}°</span>
+                <span className="text-[11px] text-text-3 font-mono">{f.windSpeed}</span>
               </div>
             ))}
           </div>
@@ -269,8 +408,42 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 <span className="text-text-1 text-xs">{alert}</span>
               </div>
             </div>
+        {/* ── 천문/조석 ── */}
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-[11px] font-bold text-text-3 font-korean mb-2">☀️ 천문 · 조석</div>
+          <div className="grid grid-cols-4 gap-1">
+            {[
+              { icon: '🌅', label: '일출', value: sunriseTime },
+              { icon: '🌄', label: '일몰', value: sunsetTime },
+              { icon: '🌙', label: '월출', value: moonrise },
+              { icon: '🌜', label: '월몰', value: moonset },
+            ].map((item, i) => (
+              <div key={i} className="text-center py-2 bg-bg-0 border border-border rounded">
+                <div className="text-base mb-0.5">{item.icon}</div>
+                <div className="text-[10px] text-text-3">{item.label}</div>
+                <div className="text-[13px] font-bold font-mono text-text-1">{item.value}</div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-2 mt-1.5 px-2 py-1 bg-bg-0 border border-border rounded text-[11px]">
+            <span className="text-sm">🌓</span>
+            <span className="text-text-3">상현달 14일</span>
+            <span className="ml-auto text-text-1 font-mono">조차 6.7m</span>
           </div>
         )}
+        </div>
+
+        {/* ── 날씨 특보 ── */}
+        <div className="px-3 py-2">
+          <div className="text-[11px] font-bold text-text-3 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)' }}>
+            <div className="flex items-center gap-2 text-[11px]">
+              <span className="px-1.5 py-px rounded text-[11px] font-bold" style={{ background: 'rgba(239,68,68,.15)', color: 'var(--red)' }}>주의</span>
+              <span className="text-text-1 font-korean">풍랑주의보 예상 08:00~</span>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
   );
diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx
index 2fb34ac..66fbed2 100755
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@@ -396,99 +396,74 @@ export function WeatherView() {
           </Map>
 
           {/* 레이어 컨트롤 */}
-          <div className="absolute top-6 left-6 bg-bg-1/90 border border-border rounded-lg p-4 backdrop-blur-sm z-10">
-            <div className="text-sm font-semibold text-text-1 mb-3">기상 레이어</div>
-            <div className="space-y-2">
-              <label className="flex items-center gap-2 cursor-pointer">
+          <div className="absolute top-4 left-4 bg-bg-1/85 border border-border rounded-md backdrop-blur-sm z-10" style={{ padding: '6px 10px' }}>
+            <div className="text-[9px] font-semibold text-text-1 mb-1.5 font-korean">기상 레이어</div>
+            <div className="flex flex-col gap-1">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('windParticle')}
                   onChange={() => toggleLayer('windParticle')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌬️ 바람 흐름</span>
+                <span className="text-[9px] text-text-2">🌬️ 바람 흐름</span>
               </label>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('wind')}
                   onChange={() => toggleLayer('wind')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌬️ 바람 벡터</span>
+                <span className="text-[9px] text-text-2">🌬️ 바람 벡터</span>
               </label>
-              {/* 기상 데이터 레이어 — 임시 비활성화
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={enabledLayers.has('labels')}
-                  onChange={() => toggleLayer('labels')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
-                />
-                <span className="text-xs text-text-2">📊 기상 데이터</span>
-              </label>
-              */}
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('waves')}
                   onChange={() => toggleLayer('waves')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌊 파고 분포</span>
+                <span className="text-[9px] text-text-2">🌊 파고 분포</span>
               </label>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('temperature')}
                   onChange={() => toggleLayer('temperature')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌡️ 수온 분포</span>
+                <span className="text-[9px] text-text-2">🌡️ 수온 분포</span>
               </label>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('oceanCurrentParticle')}
                   onChange={() => toggleLayer('oceanCurrentParticle')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌊 해류 흐름</span>
+                <span className="text-[9px] text-text-2">🌊 해류 흐름</span>
               </label>
-              <label className="flex items-center gap-2 cursor-pointer">
+              <label className="flex items-center gap-1.5 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={enabledLayers.has('waterTemperature')}
                   onChange={() => toggleLayer('waterTemperature')}
-                  className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
+                  className="w-3 h-3 rounded border-border bg-bg-2 text-primary-cyan accent-[var(--cyan)]"
                 />
-                <span className="text-xs text-text-2">🌡️ 수온 색상도</span>
+                <span className="text-[9px] text-text-2">🌡️ 수온 색상도</span>
               </label>
-
-              {/* 해황예보도 레이어 — 임시 비활성화
-              <div className="pt-2 mt-2 border-t border-border">
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={enabledLayers.has('oceanForecast')}
-                    onChange={() => toggleLayer('oceanForecast')}
-                    className="w-4 h-4 rounded border-border bg-bg-2 text-primary-cyan focus:ring-primary-cyan"
-                  />
-                  <span className="text-xs text-text-2">🌊 해황예보도</span>
-                </label>
-              </div>
-              */}
             </div>
           </div>
 
           {/* 범례 */}
-          <div className="absolute bottom-6 left-6 bg-bg-1/90 border border-border rounded-lg p-4 backdrop-blur-sm z-10">
-            <div className="text-sm font-semibold text-text-1 mb-3">기상 범례</div>
-            <div className="space-y-3 text-xs">
-              {/* 바람 (Windy 스타일) */}
+          <div className="absolute bottom-4 left-4 bg-bg-1/85 border border-border rounded-md backdrop-blur-sm z-10" style={{ padding: '6px 10px', maxWidth: 180 }}>
+            <div className="text-[9px] font-semibold text-text-1 mb-1.5 font-korean">기상 범례</div>
+            <div className="flex flex-col gap-1.5" style={{ fontSize: 8 }}>
+              {/* 바람 */}
               <div>
-                <div className="font-semibold text-text-2 mb-1">바람 (m/s)</div>
-                <div className="flex items-center gap-1 h-3 rounded-sm overflow-hidden mb-1">
+                <div className="font-semibold text-text-2 mb-0.5" style={{ fontSize: 8 }}>바람 (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' }} />
                   <div className="flex-1 h-full" style={{ background: '#50d591' }} />
@@ -498,53 +473,38 @@ 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-text-3 text-[9px]">
-                  <span>3</span>
-                  <span>5</span>
-                  <span>7</span>
-                  <span>10</span>
-                  <span>13</span>
-                  <span>16</span>
-                  <span>20+</span>
+                <div className="flex justify-between text-text-3" style={{ fontSize: 7 }}>
+                  <span>3</span><span>5</span><span>7</span><span>10</span><span>13</span><span>16</span><span>20+</span>
                 </div>
               </div>
-
               {/* 해류 */}
-              <div className="pt-2 border-t border-border">
-                <div className="font-semibold text-text-2 mb-1">해류 (m/s)</div>
-                <div className="flex items-center gap-1 h-3 rounded-sm overflow-hidden mb-1">
+              <div className="pt-1 border-t border-border">
+                <div className="font-semibold text-text-2 mb-0.5" style={{ fontSize: 8 }}>해류 (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-text-3 text-[9px]">
-                  <span>0.2</span>
-                  <span>0.4</span>
-                  <span>0.6</span>
-                  <span>0.6+</span>
+                <div className="flex justify-between text-text-3" style={{ fontSize: 7 }}>
+                  <span>0.2</span><span>0.4</span><span>0.6</span><span>0.6+</span>
                 </div>
               </div>
-
               {/* 파고 */}
-              <div className="pt-2 border-t border-border">
-                <div className="font-semibold text-text-2 mb-1">파고 (m)</div>
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 rounded-full bg-blue-500" />
-                  <span className="text-text-3">&lt; 1.5: 낮음</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 rounded-full bg-orange-500" />
-                  <span className="text-text-3">1.5-2.5: 보통</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="w-3 h-3 rounded-full bg-red-500" />
-                  <span className="text-text-3">&gt; 2.5: 높음</span>
+              <div className="pt-1 border-t border-border">
+                <div className="font-semibold text-text-2 mb-0.5" style={{ fontSize: 8 }}>파고 (m)</div>
+                <div className="flex items-center gap-1">
+                  <div className="w-2 h-2 rounded-full bg-blue-500" />
+                  <span className="text-text-3">&lt;1.5 낮음</span>
+                  <div className="w-2 h-2 rounded-full bg-orange-500 ml-1" />
+                  <span className="text-text-3">~2.5</span>
+                  <div className="w-2 h-2 rounded-full bg-red-500 ml-1" />
+                  <span className="text-text-3">&gt;2.5</span>
                 </div>
               </div>
             </div>
-            <div className="mt-3 pt-3 border-t border-border text-xs text-text-3">
-              💡 지도를 클릭하여 해당 지점의 기상 예보를 확인하세요
+            <div className="mt-1 pt-1 border-t border-border text-text-3 font-korean" style={{ fontSize: 7 }}>
+              💡 지도 클릭 → 기상 예보 확인
             </div>
           </div>
         </div>