diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md
index 5bb6047..d88decc 100644
--- a/docs/RELEASE-NOTES.md
+++ b/docs/RELEASE-NOTES.md
@@ -4,6 +4,8 @@
 
 ## [Unreleased]
 
+## [2026-04-09]
+
 ### 추가
 - 디자인 시스템 Float 카탈로그 추가 (Modal / Dropdown / Overlay / Toast)
 - 디자인 시스템 폰트/색상 토큰을 전 탭 컴포넌트에 전면 적용 (admin, aerial, assets, board, hns, incidents, prediction, reports, rescue, scat, weather)
diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index 9ab297a..578ed71 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -1458,19 +1458,19 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
       <div className="flex flex-col gap-1">
         <button
           onClick={() => map?.zoomIn()}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
         >
           +
         </button>
         <button
           onClick={() => map?.zoomOut()}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
         >
           −
         </button>
         <button
           onClick={() => map?.flyTo({ center: [center[1], center[0]], zoom, duration: 1000 })}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
         >
           &#x1F3AF;
         </button>
diff --git a/frontend/src/common/styles/components.css b/frontend/src/common/styles/components.css
index 0bd81c1..38faee2 100644
--- a/frontend/src/common/styles/components.css
+++ b/frontend/src/common/styles/components.css
@@ -30,6 +30,22 @@
     background: transparent;
   }
 
+  /* ═══ Incidents 사고 팝업 ✕ 버튼 — 라이트 지도 기준 검은색 고정 ═══ */
+  .incident-popup .maplibregl-popup-close-button {
+    color: #1a1d21;
+    background: transparent;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    top: 6px;
+    right: 6px;
+  }
+  .incident-popup .maplibregl-popup-close-button:hover {
+    color: #000;
+    background: transparent;
+  }
+
   /* ═══ Scrollbar ═══ */
   .scrollbar-thin {
     scrollbar-width: thin;
diff --git a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
index 97d3094..82b7a9d 100755
--- a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
@@ -219,7 +219,7 @@ export function HNSLeftPanel({
   };
 
   return (
-    <div className="w-80 min-w-[320px] flex flex-col h-full bg-bg-surface border-r border-stroke overflow-hidden">
+    <div className="w-full min-w-0 flex flex-col h-full bg-bg-surface border-r border-stroke overflow-hidden">
       {/* Scrollable Content */}
       <div
         className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent bg-bg-base"
diff --git a/frontend/src/tabs/hns/components/HNSRightPanel.tsx b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
index 026572d..df6ccd5 100755
--- a/frontend/src/tabs/hns/components/HNSRightPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
@@ -35,8 +35,8 @@ export function HNSRightPanel({
 }: HNSRightPanelProps) {
   if (!dispersionResult) {
     return (
-      <div className="w-[300px] bg-bg-surface border-l border-stroke p-4 overflow-auto">
-        <div className="flex flex-col gap-3 items-center justify-center h-full text-fg-disabled text-label-1">
+      <div className="w-full h-full bg-bg-surface border-l border-stroke p-4 overflow-auto flex items-center justify-center">
+        <div className="flex flex-col gap-3 items-center text-fg-disabled text-label-1">
           <div style={{ fontSize: '32px', opacity: 0.3 }}>📊</div>
           <div>예측 실행 후 결과가 표시됩니다</div>
         </div>
@@ -58,7 +58,7 @@ export function HNSRightPanel({
           : 'ALOHA';
 
   return (
-    <div className="w-[300px] bg-bg-surface border-l border-stroke p-4 overflow-auto flex flex-col gap-4">
+    <div className="w-full bg-bg-surface border-l border-stroke p-4 overflow-auto flex flex-col gap-4">
       {/* Header */}
       <div>
         <div className="flex items-center gap-1.5 mb-2">
diff --git a/frontend/src/tabs/hns/components/HNSView.tsx b/frontend/src/tabs/hns/components/HNSView.tsx
index bfe59fb..4a49115 100755
--- a/frontend/src/tabs/hns/components/HNSView.tsx
+++ b/frontend/src/tabs/hns/components/HNSView.tsx
@@ -262,6 +262,8 @@ function DispersionTimeSlider({
 export function HNSView() {
   const { activeSubTab, setActiveSubTab } = useSubMenu('hns');
   const { user } = useAuthStore();
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null);
   const [isSelectingLocation, setIsSelectingLocation] = useState(false);
   const [isRunningPrediction, setIsRunningPrediction] = useState(false);
@@ -890,22 +892,66 @@ export function HNSView() {
     <div className="flex flex-1 overflow-hidden">
       {/* Left Panel - 분석 목록일 때는 숨김 */}
       {activeSubTab === 'analysis' && (
-        <HNSLeftPanel
-          activeSubTab={activeSubTab}
-          onSubTabChange={setActiveSubTab}
-          incidentCoord={incidentCoord}
-          onCoordChange={setIncidentCoord}
-          onMapSelectClick={() => setIsSelectingLocation(true)}
-          onRunPrediction={handleRunPrediction}
-          isRunningPrediction={isRunningPrediction}
-          onParamsChange={handleParamsChange}
-          onReset={handleReset}
-          loadedParams={loadedParams}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 320 }}>
+          <HNSLeftPanel
+            activeSubTab={activeSubTab}
+            onSubTabChange={setActiveSubTab}
+            incidentCoord={incidentCoord}
+            onCoordChange={setIncidentCoord}
+            onMapSelectClick={() => setIsSelectingLocation(true)}
+            onRunPrediction={handleRunPrediction}
+            isRunningPrediction={isRunningPrediction}
+            onParamsChange={handleParamsChange}
+            onReset={handleReset}
+            loadedParams={loadedParams}
+          />
+        </div>
       )}
 
       {/* Center - Map/Content Area */}
       <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+        )}
+
+        {/* Right panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+        )}
+
         {activeSubTab === 'list' ? (
           <HNSAnalysisListTable
             onTabChange={(v) =>
@@ -942,14 +988,16 @@ export function HNSView() {
 
       {/* Right Panel - 분석 목록일 때는 숨김 */}
       {activeSubTab === 'analysis' && (
-        <HNSRightPanel
-          dispersionResult={dispersionResult}
-          computedResult={computedResult}
-          weatherData={inputParams?.weather ?? null}
-          onOpenRecalc={() => setRecalcModalOpen(true)}
-          onOpenReport={handleOpenReport}
-          onSave={handleSave}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 300 }}>
+          <HNSRightPanel
+            dispersionResult={dispersionResult}
+            computedResult={computedResult}
+            weatherData={inputParams?.weather ?? null}
+            onOpenRecalc={() => setRecalcModalOpen(true)}
+            onOpenReport={handleOpenReport}
+            onSave={handleSave}
+          />
+        </div>
       )}
 
       {/* HNS 재계산 모달 */}
diff --git a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
index d47f56a..6afccdd 100644
--- a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
+++ b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
@@ -1,4 +1,7 @@
 import { useState } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { useDraggable } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
 
 /**
  * 해양환경관리법 제22조 기반 선박 발생 오염물 배출 규정
@@ -100,33 +103,30 @@ const RULES: DischargeRule[] = [
 ];
 
 const ZONE_LABELS = ['~3해리', '3~12해리', '12~25해리', '25~50해리', '50해리+'];
-const ZONE_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#64748b'];
+const ZONE_COLORS = [
+  'var(--color-danger)',
+  'var(--color-warning)',
+  'var(--color-caution)',
+  'var(--color-success)',
+  'var(--fg-disabled)',
+];
 
 function StatusBadge({ status }: { status: Status }) {
   if (status === 'forbidden')
     return (
       <span
-        className="text-caption font-bold px-1.5 py-0.5 rounded"
-        style={{ background: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' }}
+        className="text-caption px-1.5 py-0.5 rounded"
+        style={{
+          background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
+          color: 'var(--color-danger)',
+        }}
       >
         배출불가
       </span>
     );
-  if (status === 'allowed')
-    return (
-      <span
-        className="text-caption font-bold px-1.5 py-0.5 rounded"
-        style={{ background: 'rgba(34,197,94,0.15)', color: 'var(--color-success)' }}
-      >
-        배출가능
-      </span>
-    );
   return (
-    <span
-      className="text-caption font-bold px-1.5 py-0.5 rounded"
-      style={{ background: 'rgba(234,179,8,0.15)', color: 'var(--color-caution)' }}
-    >
-      조건부
+    <span className="text-caption px-1.5 py-0.5 rounded text-fg-sub">
+      {status === 'allowed' ? '배출가능' : '조건부'}
     </span>
   );
 }
@@ -139,15 +139,36 @@ interface DischargeZonePanelProps {
   onClose: () => void;
 }
 
-export function DischargeZonePanel({
+export function DischargeZonePanel(props: DischargeZonePanelProps) {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  function handleDragEnd(event: DragEndEvent) {
+    setOffset((prev) => ({ x: prev.x + event.delta.x, y: prev.y + event.delta.y }));
+  }
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <DraggablePanel {...props} offset={offset} />
+    </DndContext>
+  );
+}
+
+function DraggablePanel({
   lat,
   lon,
   distanceNm,
   zoneIndex,
   onClose,
-}: DischargeZonePanelProps) {
+  offset,
+}: DischargeZonePanelProps & { offset: { x: number; y: number } }) {
   const zoneIdx = zoneIndex;
   const [expandedCat, setExpandedCat] = useState<string | null>(null);
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: 'discharge-panel',
+  });
+
+  const tx = offset.x + (transform?.x ?? 0);
+  const ty = offset.y + (transform?.y ?? 0);
 
   const categories = [...new Set(RULES.map((r) => r.category))];
 
@@ -161,22 +182,33 @@ export function DischargeZonePanel({
         border: '1px solid var(--stroke-default)',
         boxShadow: '0 16px 48px rgba(0,0,0,0.5)',
         backdropFilter: 'blur(12px)',
+        transform: `translate(${tx}px, ${ty}px)`,
       }}
     >
-      {/* Header */}
+      {/* Header — drag handle */}
       <div
+        ref={setNodeRef}
+        {...listeners}
+        {...attributes}
         className="shrink-0 flex items-center justify-between"
         style={{
           padding: '10px 14px',
           borderBottom: '1px solid var(--stroke-default)',
           background: 'var(--bg-elevated)',
+          cursor: 'grab',
+          userSelect: 'none',
         }}
       >
         <div>
-          <div className="text-label-2 font-bold text-fg font-korean">🚢 오염물 배출 규정</div>
+          <div className="text-label-2 text-fg font-korean">🚢 오염물 배출 규정</div>
           <div className="text-caption text-fg-sub font-korean">해양환경관리법 제22조</div>
         </div>
-        <span onClick={onClose} className="text-title-3 cursor-pointer text-fg-sub hover:text-fg">
+        <span
+          onClick={onClose}
+          onPointerDown={(e) => e.stopPropagation()}
+          className="text-title-3 cursor-pointer text-fg-sub hover:text-fg"
+          style={{ pointerEvents: 'all' }}
+        >
           ✕
         </span>
       </div>
@@ -194,10 +226,7 @@ export function DischargeZonePanel({
         </div>
         <div className="flex items-center justify-between mb-2">
           <span className="text-caption text-fg-sub font-korean">영해기선 거리</span>
-          <span
-            className="text-label-2 font-bold font-mono"
-            style={{ color: ZONE_COLORS[zoneIdx] }}
-          >
+          <span className="text-label-2 font-mono" style={{ color: ZONE_COLORS[zoneIdx] }}>
             {distanceNm.toFixed(1)} NM
           </span>
         </div>
@@ -206,12 +235,10 @@ export function DischargeZonePanel({
           {ZONE_LABELS.map((label, i) => (
             <div
               key={label}
-              className="flex-1 text-center rounded-sm"
+              className="flex-1 text-center rounded-sm text-[10px]"
               style={{
-                padding: '3px 0',
-                fontSize: 8,
-                fontWeight: i === zoneIdx ? 700 : 400,
-                color: i === zoneIdx ? 'var(--fg-default)' : 'var(--fg-sub)',
+                padding: '2px 0',
+                color: i === zoneIdx ? '#000' : 'var(--fg-sub)',
                 background: i === zoneIdx ? ZONE_COLORS[i] : 'var(--hover-overlay)',
                 border: i === zoneIdx ? 'none' : '1px solid var(--stroke-light)',
               }}
@@ -231,8 +258,7 @@ export function DischargeZonePanel({
           const catRules = RULES.filter((r) => r.category === cat);
           const isExpanded = expandedCat === cat;
           const allForbidden = catRules.every((r) => r.zones[zoneIdx] === 'forbidden');
-          const allAllowed = catRules.every((r) => r.zones[zoneIdx] === 'allowed');
-          const summaryColor = allForbidden ? '#ef4444' : allAllowed ? '#22c55e' : '#eab308';
+          const summaryColor = allForbidden ? 'var(--color-danger)' : 'var(--fg-sub)';
 
           return (
             <div key={cat} style={{ borderBottom: '1px solid var(--stroke-light)' }}>
@@ -245,11 +271,11 @@ export function DischargeZonePanel({
                   <div
                     style={{ width: 6, height: 6, borderRadius: '50%', background: summaryColor }}
                   />
-                  <span className="text-caption font-bold text-fg font-korean">{cat}</span>
+                  <span className="text-caption text-fg font-korean">{cat}</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-caption font-semibold" style={{ color: summaryColor }}>
-                    {allForbidden ? '전체 불가' : allAllowed ? '전체 가능' : '항목별 상이'}
+                  <span className="text-caption" style={{ color: summaryColor }}>
+                    {allForbidden ? '전체 불가' : '허용'}
                   </span>
                   <span className="text-caption text-fg-sub">{isExpanded ? '▾' : '▸'}</span>
                 </div>
@@ -268,7 +294,7 @@ export function DischargeZonePanel({
                         borderRadius: 4,
                       }}
                     >
-                      <span className="text-caption text-fg font-korean">{rule.item}</span>
+                      <span className="text-caption text-fg-sub font-korean">{rule.item}</span>
                       <StatusBadge status={rule.zones[zoneIdx]} />
                     </div>
                   ))}
diff --git a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
index ef73bcc..cfe263f 100755
--- a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
@@ -250,11 +250,11 @@ export function IncidentsLeftPanel({
         />
         <button
           onClick={resetPage}
-          className="text-label-2 font-semibold cursor-pointer whitespace-nowrap text-white border-none"
+          className="rounded-sm text-label-2 font-semibold cursor-pointer whitespace-nowrap text-color-accent"
           style={{
             padding: '5px 12px',
-            background: 'linear-gradient(135deg,var(--color-accent),var(--color-info))',
-            borderRadius: 'var(--radius-sm)',
+            border: '1px solid rgba(6,182,212,.3)',
+            background: 'rgba(6,182,212,.08)',
           }}
         >
           조회
@@ -349,7 +349,7 @@ export function IncidentsLeftPanel({
               setSelectedStatus(s.id);
               resetPage();
             }}
-            className="flex items-center gap-1 text-caption font-semibold cursor-pointer"
+            className="flex items-center gap-1 text-caption cursor-pointer"
             style={{
               padding: '4px 10px',
               borderRadius: '12px',
@@ -435,7 +435,7 @@ export function IncidentsLeftPanel({
               >
                 {/* Row 1: name + status */}
                 <div className="flex items-center justify-between mb-[5px]">
-                  <div className="flex items-center gap-1.5 text-xs font-bold">
+                  <div className="flex items-center gap-1.5 text-xs">
                     <span
                       className="shrink-0"
                       style={{
@@ -449,7 +449,7 @@ export function IncidentsLeftPanel({
                     {inc.name}
                   </div>
                   <span
-                    className="shrink-0 text-caption font-semibold"
+                    className="shrink-0 text-caption"
                     style={{
                       padding: '2px 10px',
                       borderRadius: '10px',
@@ -463,9 +463,9 @@ export function IncidentsLeftPanel({
                 {/* Row 2: meta */}
                 <div className="flex items-center gap-2 text-caption text-fg-disabled mb-[5px]">
                   <span>
-                    📅 {inc.date} {inc.time}
+                    {inc.date} {inc.time}
                   </span>
-                  <span>🏛 {inc.office}</span>
+                  <span> {inc.office}</span>
                 </div>
                 {/* Row 3: tags + buttons */}
                 <div className="flex items-center justify-between">
@@ -485,12 +485,12 @@ export function IncidentsLeftPanel({
                     )}
                     {inc.oilType && (
                       <span
-                        className="text-caption font-medium text-color-warning"
+                        className="text-caption font-medium text-fg-sub"
                         style={{
                           padding: '2px 8px',
                           borderRadius: '3px',
-                          background: 'rgba(249,115,22,0.08)',
-                          border: '1px solid rgba(249,115,22,0.2)',
+                          background: 'rgba(100,116,139,0.08)',
+                          border: '1px solid rgba(100,116,139,0.2)',
                         }}
                       >
                         {inc.oilType}
@@ -498,12 +498,12 @@ export function IncidentsLeftPanel({
                     )}
                     {inc.prediction && (
                       <span
-                        className="text-caption font-medium text-color-success"
+                        className="text-caption font-medium text-fg-sub"
                         style={{
                           padding: '2px 8px',
                           borderRadius: '3px',
-                          background: 'rgba(34,197,94,0.08)',
-                          border: '1px solid rgba(34,197,94,0.2)',
+                          background: 'rgba(100,116,139,0.08)',
+                          border: '1px solid rgba(100,116,139,0.2)',
                         }}
                       >
                         {inc.prediction}
@@ -528,7 +528,7 @@ export function IncidentsLeftPanel({
                         transition: '0.15s',
                       }}
                     >
-                      🌤
+                      기상정보
                     </button>
                     {(inc.mediaCount ?? 0) > 0 && (
                       <button
@@ -548,7 +548,7 @@ export function IncidentsLeftPanel({
                           transition: '0.15s',
                         }}
                       >
-                        📹 <span className="text-caption">{inc.mediaCount}</span>
+                        <span className="text-caption">{inc.mediaCount}</span>
                       </button>
                     )}
                   </div>
diff --git a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
index 9b10f34..c23570a 100755
--- a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
@@ -50,31 +50,8 @@ interface AnalysisItem {
   checked: boolean;
 }
 
-/* ── 카테고리별 고유 색상 (목록 순서 인덱스 기반 — 중복 없음) ── */
-const CATEGORY_PALETTE: [number, number, number][] = [
-  [239, 68, 68], // red
-  [249, 115, 22], // orange
-  [234, 179, 8], // yellow
-  [132, 204, 22], // lime
-  [20, 184, 166], // teal
-  [6, 182, 212], // cyan
-  [59, 130, 246], // blue
-  [99, 102, 241], // indigo
-  [168, 85, 247], // purple
-  [236, 72, 153], // pink
-  [244, 63, 94], // rose
-  [16, 185, 129], // emerald
-  [14, 165, 233], // sky
-  [139, 92, 246], // violet
-  [217, 119, 6], // amber
-  [45, 212, 191], // turquoise
-];
-
-function getCategoryColor(index: number): [number, number, number] {
-  return CATEGORY_PALETTE[index % CATEGORY_PALETTE.length];
-}
-
-/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반) ── */
+/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반, 미사용 보존) ── */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const CATEGORY_ICON: Record<string, string> = {
   어장정보: '🐟',
   양식장: '🦪',
@@ -140,8 +117,20 @@ function getActiveModels(p: PredictionAnalysis): string {
 
 /* ── HNS/구난 섹션 (미개발, 고정 구조만 유지) ────── */
 const STATIC_SECTIONS = [
-  { key: 'hns', icon: '🧪', title: 'HNS 대기확산', color: '#a855f7', colorRgb: '168,85,247' },
-  { key: 'rsc', icon: '🚨', title: '긴급구난', color: '#06b6d4', colorRgb: '6,182,212' },
+  {
+    key: 'hns',
+    icon: '🧪',
+    title: 'HNS 대기확산',
+    color: 'var(--color-accent)',
+    colorRgb: '6,182,212',
+  },
+  {
+    key: 'rsc',
+    icon: '🚨',
+    title: '긴급구난',
+    color: 'var(--color-accent)',
+    colorRgb: '6,182,212',
+  },
 ];
 
 /* ── Component ───────────────────────────────────── */
@@ -292,7 +281,7 @@ export function IncidentsRightPanel({
     key: 'oil',
     icon: '🛢',
     title: '유출유 확산예측',
-    color: '#f97316',
+    color: 'var(--color-accent)',
     colorRgb: '249,115,22',
     totalLabel: `전체 ${predItems.length}건`,
     items: predItems.map((p) => {
@@ -310,7 +299,7 @@ export function IncidentsRightPanel({
 
   if (!incident) {
     return (
-      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-[280px] min-w-[280px]">
+      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-full h-full">
         <div className="text-center text-fg-disabled text-label-2">
           <div className="text-[32px] mb-2 opacity-30">📊</div>
           좌측에서 사고를 선택하면
@@ -327,7 +316,7 @@ export function IncidentsRightPanel({
       <div className="px-[14px] py-2.5 border-b border-stroke shrink-0">
         <div className="text-xs font-bold mb-0.5">🔬 통합분석 조회</div>
         <div className="text-caption text-fg-disabled">
-          선택: <b className="text-color-accent">{incident.name}</b>
+          선택: <span className="text-fg-disabled">{incident.name}</span>
         </div>
       </div>
 
@@ -344,22 +333,19 @@ export function IncidentsRightPanel({
             <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
               <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-1.5">
-                  <span className="text-sm">{sec.icon}</span>
-                  <span className="text-xs font-bold" style={{ color: sec.color }}>
-                    {sec.title}
-                  </span>
+                  {/* <span className="text-sm">{sec.icon}</span> */}
+                  <span className="text-xs">{sec.title}</span>
                 </div>
                 <button
                   className="text-caption font-semibold cursor-pointer"
                   style={{
                     padding: '3px 10px',
                     borderRadius: '4px',
-                    background: `rgba(${sec.colorRgb},0.1)`,
-                    border: `1px solid rgba(${sec.colorRgb},0.25)`,
+                    border: '1px solid var(--stroke-default)',
                     color: sec.color,
                   }}
                 >
-                  📋 조회
+                  조회
                 </button>
               </div>
               <div className="flex flex-col gap-1">
@@ -374,8 +360,7 @@ export function IncidentsRightPanel({
                       className="flex items-center gap-1.5"
                       style={{
                         padding: '5px 8px',
-                        background: `rgba(${sec.colorRgb},0.06)`,
-                        border: `1px solid rgba(${sec.colorRgb},0.15)`,
+                        border: '1px solid var(--stroke-default)',
                         borderRadius: '4px',
                       }}
                     >
@@ -415,22 +400,19 @@ export function IncidentsRightPanel({
           <div key={sec.key} className="bg-bg-elevated border border-stroke rounded-md p-2.5">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-1.5">
-                <span className="text-sm">{sec.icon}</span>
-                <span className="text-xs font-bold" style={{ color: sec.color }}>
-                  {sec.title}
-                </span>
+                {/* <span className="text-sm">{sec.icon}</span> */}
+                <span className="text-xs">{sec.title}</span>
               </div>
               <button
                 className="text-caption font-semibold cursor-pointer"
                 style={{
                   padding: '3px 10px',
                   borderRadius: '4px',
-                  background: `rgba(${sec.colorRgb},0.1)`,
-                  border: `1px solid rgba(${sec.colorRgb},0.25)`,
+                  border: '1px solid var(--stroke-default)',
                   color: sec.color,
                 }}
               >
-                📋 조회
+                조회
               </button>
             </div>
             <div className="text-caption text-fg-disabled text-center py-1.5">준비 중입니다</div>
@@ -443,8 +425,8 @@ export function IncidentsRightPanel({
         {/* 민감자원 */}
         <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
           <div className="flex items-center gap-1.5 mb-2">
-            <span className="text-sm">🐟</span>
-            <span className="text-xs font-bold text-color-success">민감자원</span>
+            {/* <span className="text-sm">🐟</span> */}
+            <span className="text-xs">민감자원</span>
           </div>
           <div className="flex flex-col gap-[3px]">
             {sensCategories.length === 0 ? (
@@ -452,38 +434,33 @@ export function IncidentsRightPanel({
                 해당 사고 영역의 민감자원이 없습니다
               </div>
             ) : (
-              sensCategories.map((cat, i) => {
-                const icon = CATEGORY_ICON[cat.category] ?? '🌊';
+              sensCategories.map((cat) => {
                 const areaLabel =
                   cat.totalArea != null
                     ? `${cat.totalArea.toLocaleString('ko-KR', { maximumFractionDigits: 0 })}ha`
                     : `${cat.count}개소`;
-                const [r, g, b] = getCategoryColor(i);
-                const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
                 return (
                   <label
                     key={cat.category}
-                    className="flex items-center cursor-pointer text-caption gap-[5px] rounded-[3px]"
-                    style={{ padding: '4px 6px', background: `rgba(${r},${g},${b},0.06)` }}
+                    className="flex items-center cursor-pointer text-caption gap-[5px]"
+                    style={{ padding: '3px 0' }}
                   >
                     <input
                       type="checkbox"
                       checked={checkedSensCategories.has(cat.category)}
                       onChange={() => toggleSensCategory(cat.category)}
-                      style={{ accentColor: hex }}
+                      style={{ accentColor: 'var(--color-accent)' }}
                     />
                     <span
                       style={{
-                        width: 8,
-                        height: 8,
+                        width: 6,
+                        height: 6,
                         borderRadius: '50%',
-                        background: hex,
+                        background: 'var(--color-accent)',
                         flexShrink: 0,
                         display: 'inline-block',
-                        border: `1px solid rgba(${r},${g},${b},0.45)`,
                       }}
                     />
-                    <span>{icon}</span>
                     <span className="flex-1">{cat.category}</span>
                     <span className="text-fg-disabled font-mono shrink-0">({areaLabel})</span>
                   </label>
@@ -496,10 +473,9 @@ export function IncidentsRightPanel({
         {/* 근처 방제자원 */}
         <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
           <div className="flex items-center gap-1.5 mb-2">
-            <span className="text-sm">🛡</span>
-            <span className="text-xs font-bold text-color-boom">근처 방제자원</span>
+            <span className="text-xs font-bold text-color-accent">근처 방제자원</span>
             {nearbyOrgs.length > 0 && (
-              <span className="ml-auto text-caption font-mono text-color-boom">
+              <span className="ml-auto text-caption font-mono text-color-accent">
                 {nearbyOrgs.length}개
               </span>
             )}
@@ -519,21 +495,18 @@ export function IncidentsRightPanel({
               반경 내 방제자원 없음
             </div>
           ) : (
-            <div className="flex flex-col gap-[3px] max-h-[200px] overflow-y-auto">
+            <div className="flex flex-col max-h-[200px] overflow-y-auto">
               {nearbyOrgs.map((org) => (
                 <div
                   key={org.orgSn}
-                  className="flex items-start gap-1.5 rounded-[3px] px-[6px] py-[5px]"
-                  style={{
-                    background: 'rgba(245,158,11,0.05)',
-                    border: '1px solid rgba(245,158,11,0.08)',
-                  }}
+                  className="flex items-start gap-1.5 px-[2px] py-[5px]"
+                  style={{ borderBottom: '1px solid var(--stroke-default)' }}
                 >
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1 mb-[2px]">
                       <span
-                        className="text-caption px-[4px] py-[1px] rounded-[2px] font-bold shrink-0"
-                        style={{ background: 'rgba(245,158,11,0.15)', color: '#f59e0b' }}
+                        className="text-caption px-[4px] py-[1px] rounded-[2px] font-bold shrink-0 text-color-accent"
+                        style={{ background: 'rgba(6,182,212,0.1)' }}
                       >
                         {org.orgTp}
                       </span>
@@ -544,7 +517,7 @@ export function IncidentsRightPanel({
                       {org.totalAssets > 0 ? ` · 장비 ${org.totalAssets}개` : ''}
                     </div>
                   </div>
-                  <span className="text-caption font-mono text-color-boom shrink-0">
+                  <span className="text-caption font-mono text-color-accent shrink-0">
                     {org.distanceNm.toFixed(1)} nm
                   </span>
                 </div>
@@ -553,10 +526,10 @@ export function IncidentsRightPanel({
           )}
 
           {/* Radius slider */}
-          <div className="mt-2 pt-2" style={{ borderTop: '1px solid rgba(245,158,11,0.1)' }}>
+          <div className="mt-2 pt-2" style={{ borderTop: '1px solid var(--stroke-default)' }}>
             <div className="flex items-center justify-between mb-[5px]">
               <span className="text-caption text-fg-disabled">탐색 반경</span>
-              <span className="text-caption font-bold font-mono text-color-boom">
+              <span className="text-caption font-bold font-mono text-color-accent">
                 {nearbyRadius} nm
               </span>
             </div>
@@ -572,7 +545,7 @@ export function IncidentsRightPanel({
                 height: '4px',
                 background: 'var(--stroke-default)',
                 borderRadius: '2px',
-                accentColor: '#f59e0b',
+                accentColor: 'var(--color-accent)',
               }}
             />
           </div>
@@ -605,7 +578,8 @@ export function IncidentsRightPanel({
                   color: isActive ? 'var(--color-accent)' : 'var(--fg-disabled)',
                 }}
               >
-                {v.icon} {v.label}
+                {/* {v.icon} */}
+                {v.label}
               </button>
             );
           })}
@@ -627,9 +601,7 @@ export function IncidentsRightPanel({
           className="w-full text-label-2 font-bold cursor-pointer"
           style={{
             padding: '8px',
-            background: analysisActive
-              ? 'linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.1))'
-              : 'linear-gradient(135deg,rgba(6,182,212,0.15),rgba(59,130,246,0.1))',
+            background: analysisActive ? 'rgba(239,68,68,0.1)' : 'rgba(6,182,212,0.1)',
             border: analysisActive
               ? '1px solid rgba(239,68,68,0.3)'
               : '1px solid rgba(6,182,212,0.3)',
diff --git a/frontend/src/tabs/incidents/components/IncidentsView.tsx b/frontend/src/tabs/incidents/components/IncidentsView.tsx
index 9d6837b..705a8db 100755
--- a/frontend/src/tabs/incidents/components/IncidentsView.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx
@@ -137,6 +137,8 @@ export function IncidentsView() {
   const [hoverInfo, setHoverInfo] = useState<HoverInfo | null>(null);
 
   const [dischargeMode, setDischargeMode] = useState(false);
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [dischargeInfo, setDischargeInfo] = useState<{
     lat: number;
     lon: number;
@@ -195,12 +197,17 @@ export function IncidentsView() {
     if (sections.length === 0) return;
     const tags: { icon: string; label: string; color: string }[] = [];
     sections.forEach((s) => {
-      if (s.key === 'oil') tags.push({ icon: '🛢', label: '유출유', color: '#f97316' });
-      if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: '#a855f7' });
-      if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: '#06b6d4' });
+      if (s.key === 'oil')
+        tags.push({ icon: '🛢', label: '유출유', color: 'var(--color-warning)' });
+      if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: 'var(--color-tertiary)' });
+      if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: 'var(--color-accent)' });
     });
     if (sensitiveCount > 0)
-      tags.push({ icon: '🐟', label: `민감자원 ${sensitiveCount}건`, color: '#22c55e' });
+      tags.push({
+        icon: '🐟',
+        label: `민감자원 ${sensitiveCount}건`,
+        color: 'var(--color-success)',
+      });
     setAnalysisTags(tags);
     setAnalysisActive(true);
   };
@@ -573,11 +580,13 @@ export function IncidentsView() {
   return (
     <div className="flex flex-1 overflow-hidden">
       {/* Left Panel */}
-      <IncidentsLeftPanel
-        incidents={incidents}
-        selectedIncidentId={selectedIncidentId}
-        onIncidentSelect={setSelectedIncidentId}
-      />
+      <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 360 }}>
+        <IncidentsLeftPanel
+          incidents={incidents}
+          selectedIncidentId={selectedIncidentId}
+          onIncidentSelect={setSelectedIncidentId}
+        />
+      </div>
 
       {/* Center - Map + Analysis Views */}
       <div className="flex-1 flex flex-col overflow-hidden">
@@ -588,7 +597,8 @@ export function IncidentsView() {
             style={{
               height: 36,
               padding: '0 16px',
-              background: 'linear-gradient(90deg,rgba(6,182,212,0.06),var(--bg-surface))',
+              background:
+                'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 6%, transparent), var(--bg-surface))',
             }}
           >
             <div className="flex items-center gap-2">
@@ -601,8 +611,8 @@ export function IncidentsView() {
                     className="text-caption font-semibold rounded-md"
                     style={{
                       padding: '2px 8px',
-                      background: `${t.color}18`,
-                      border: `1px solid ${t.color}40`,
+                      background: `color-mix(in srgb, ${t.color} 18%, transparent)`,
+                      border: `1px solid color-mix(in srgb, ${t.color} 40%, transparent)`,
                       color: t.color,
                     }}
                   >
@@ -625,10 +635,13 @@ export function IncidentsView() {
                   className="text-caption font-semibold cursor-pointer rounded-sm"
                   style={{
                     padding: '3px 10px',
-                    background: viewMode === v.mode ? 'rgba(6,182,212,0.12)' : 'var(--bg-card)',
+                    background:
+                      viewMode === v.mode
+                        ? 'color-mix(in srgb, var(--color-accent) 12%, transparent)'
+                        : 'var(--bg-card)',
                     border:
                       viewMode === v.mode
-                        ? '1px solid rgba(6,182,212,0.3)'
+                        ? '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)'
                         : '1px solid var(--stroke-default)',
                     color: viewMode === v.mode ? 'var(--color-accent)' : 'var(--fg-disabled)',
                   }}
@@ -641,8 +654,8 @@ export function IncidentsView() {
                 className="text-caption font-semibold cursor-pointer rounded-sm"
                 style={{
                   padding: '3px 8px',
-                  background: 'rgba(239,68,68,0.06)',
-                  border: '1px solid rgba(239,68,68,0.2)',
+                  background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-danger) 20%, transparent)',
                   color: 'var(--color-danger)',
                 }}
               >
@@ -654,6 +667,44 @@ export function IncidentsView() {
 
         {/* Map / Analysis Content Area */}
         <div className="flex-1 relative overflow-hidden">
+          {/* Left panel toggle button */}
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+
+          {/* Right panel toggle button */}
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+
           {/* Default Map (visible when not in analysis or in overlay mode) */}
           {(!analysisActive || viewMode === 'overlay') && (
             <div className="absolute inset-0">
@@ -691,12 +742,13 @@ export function IncidentsView() {
                     onClose={() => setIncidentPopup(null)}
                     closeButton={true}
                     closeOnClick={false}
+                    className="incident-popup"
                   >
                     <div className="text-center min-w-[180px] text-xs">
-                      <div className="font-semibold text-fg" style={{ marginBottom: 6 }}>
+                      <div className="font-semibold" style={{ marginBottom: 6, color: '#1a1d21' }}>
                         {incidentPopup.incident.name}
                       </div>
-                      <div className="text-label-2 text-fg-disabled leading-[1.6]">
+                      <div className="text-label-2 leading-[1.6]" style={{ color: '#4b5563' }}>
                         <div>상태: {getStatusLabel(incidentPopup.incident.status)}</div>
                         <div>
                           일시: {incidentPopup.incident.date} {incidentPopup.incident.time}
@@ -706,7 +758,7 @@ export function IncidentsView() {
                           <div>원인: {incidentPopup.incident.causeType}</div>
                         )}
                         {incidentPopup.incident.prediction && (
-                          <div className="text-color-accent">
+                          <div className="font-semibold" style={{ color: 'var(--color-info)' }}>
                             {incidentPopup.incident.prediction}
                           </div>
                         )}
@@ -750,7 +802,7 @@ export function IncidentsView() {
                         width: 180,
                         height: 120,
                         background:
-                          'radial-gradient(ellipse, rgba(249,115,22,0.35) 0%, rgba(249,115,22,0.1) 50%, transparent 70%)',
+                          'radial-gradient(ellipse, color-mix(in srgb, var(--color-warning) 35%, transparent) 0%, color-mix(in srgb, var(--color-warning) 10%, transparent) 50%, transparent 70%)',
                         borderRadius: '50%',
                         transform: 'rotate(-15deg)',
                       }}
@@ -765,7 +817,7 @@ export function IncidentsView() {
                         width: 150,
                         height: 100,
                         background:
-                          'radial-gradient(ellipse, rgba(168,85,247,0.3) 0%, rgba(168,85,247,0.08) 50%, transparent 70%)',
+                          'radial-gradient(ellipse, color-mix(in srgb, var(--color-tertiary) 30%, transparent) 0%, color-mix(in srgb, var(--color-tertiary) 8%, transparent) 50%, transparent 70%)',
                         borderRadius: '50%',
                         transform: 'rotate(20deg)',
                       }}
@@ -779,7 +831,8 @@ export function IncidentsView() {
                         left: '42%',
                         width: 200,
                         height: 200,
-                        border: '2px dashed rgba(6,182,212,0.4)',
+                        border:
+                          '2px dashed color-mix(in srgb, var(--color-accent) 40%, transparent)',
                         borderRadius: '50%',
                       }}
                     />
@@ -796,18 +849,16 @@ export function IncidentsView() {
                 className="absolute z-[500] cursor-pointer rounded-md text-caption font-bold font-korean"
                 style={{
                   top: 10,
-                  right: dischargeMode ? 340 : 180,
+                  right: 180,
                   padding: '6px 10px',
-                  background: dischargeMode ? 'rgba(6,182,212,0.15)' : 'rgba(13,17,23,0.88)',
-                  border: dischargeMode
-                    ? '1px solid rgba(6,182,212,0.4)'
-                    : '1px solid var(--stroke-default)',
-                  color: dischargeMode ? '#22d3ee' : 'var(--fg-disabled)',
+                  background: 'var(--bg-base)',
+                  border: '1px solid var(--stroke-default)',
+                  color: dischargeMode ? 'var(--color-accent)' : 'var(--fg-disabled)',
                   backdropFilter: 'blur(8px)',
-                  transition: 'all 0.2s',
+                  transition: 'color 0.2s',
                 }}
               >
-                🚢 배출규정 {dischargeMode ? 'ON' : 'OFF'}
+                배출규정 {dischargeMode ? 'ON' : 'OFF'}
               </button>
 
               {/* 오염물 배출 규정 패널 */}
@@ -830,9 +881,9 @@ export function IncidentsView() {
                     left: '50%',
                     transform: 'translate(-50%, -50%)',
                     padding: '12px 20px',
-                    background: 'rgba(13,17,23,0.9)',
-                    border: '1px solid rgba(6,182,212,0.3)',
-                    color: '#22d3ee',
+                    background: 'var(--bg-base)',
+                    border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
+                    color: 'var(--color-accent)',
                     backdropFilter: 'blur(8px)',
                     pointerEvents: 'none',
                   }}
@@ -845,14 +896,14 @@ export function IncidentsView() {
               <div
                 className="absolute top-[10px] right-[10px] z-[500] rounded-md"
                 style={{
-                  background: 'rgba(13,17,23,0.88)',
+                  background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
                   padding: '8px 12px',
                   backdropFilter: 'blur(8px)',
                 }}
               >
                 <div className="flex items-center gap-1.5 mb-[5px]">
-                  <div
+                  {/* <div
                     style={{
                       width: 6,
                       height: 6,
@@ -860,20 +911,14 @@ export function IncidentsView() {
                       background: 'var(--color-success)',
                       animation: 'pd 1.5s infinite',
                     }}
-                  />
-                  <span className="text-caption font-bold">AIS Live</span>
+                  /> */}
+                  <span className="text-caption">AIS Live</span>
                   <span className="text-caption text-fg-disabled font-mono">MarineTraffic</span>
                 </div>
                 <div className="flex gap-2.5 text-caption font-mono">
-                  <div className="text-fg-sub">
-                    선박 <b className="text-color-accent">20</b>
-                  </div>
-                  <div className="text-fg-sub">
-                    사고 <b className="text-red-400">6</b>
-                  </div>
-                  <div className="text-fg-sub">
-                    방제선 <b className="text-cyan-500">2</b>
-                  </div>
+                  <div className="text-fg-sub">선박 20</div>
+                  <div className="text-fg-sub">사고 6</div>
+                  <div className="text-fg-sub">방제선 2</div>
                 </div>
               </div>
 
@@ -881,29 +926,29 @@ export function IncidentsView() {
               <div
                 className="absolute bottom-[10px] left-[10px] z-[500] rounded-md flex flex-col gap-1.5"
                 style={{
-                  background: 'rgba(13,17,23,0.88)',
+                  background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
                   padding: '8px 12px',
                   backdropFilter: 'blur(8px)',
                 }}
               >
                 <div className="text-caption font-bold text-fg-sub">사고 상태</div>
-                <div className="flex gap-2.5">
+                <div className="grid grid-cols-3 gap-1.5">
                   {[
-                    { c: '#ef4444', l: '대응중' },
-                    { c: '#f59e0b', l: '조사중' },
-                    { c: '#6b7280', l: '종료' },
+                    { c: 'var(--color-danger)', l: '대응중' },
+                    { c: 'var(--color-warning)', l: '조사중' },
+                    { c: 'var(--fg-disabled)', l: '종료' },
                   ].map((s) => (
-                    <div key={s.l} className="flex items-center gap-1">
+                    <div key={s.l} className="flex flex-col items-center gap-0.5">
                       <div style={{ width: 8, height: 8, borderRadius: '50%', background: s.c }} />
                       <span className="text-caption text-fg-disabled">{s.l}</span>
                     </div>
                   ))}
                 </div>
                 <div className="text-caption font-bold text-fg-sub mt-0.5">AIS 선박</div>
-                <div className="flex flex-wrap gap-[6px_12px]">
+                <div className="grid grid-cols-3 gap-1.5">
                   {VESSEL_LEGEND.map((vl) => (
-                    <div key={vl.type} className="flex items-center gap-1">
+                    <div key={vl.type} className="flex flex-col items-center gap-0.5">
                       <div
                         style={{
                           width: 0,
@@ -913,7 +958,7 @@ export function IncidentsView() {
                           borderBottom: `7px solid ${vl.color}`,
                         }}
                       />
-                      <span className="text-caption text-fg-disabled">{vl.type}</span>
+                      <span className="text-caption text-fg-disabled text-center">{vl.type}</span>
                     </div>
                   ))}
                 </div>
@@ -993,11 +1038,15 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(249,115,22,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-warning) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
-                  <span className="text-caption font-bold" style={{ color: '#f97316' }}>
+                  <span
+                    className="text-caption font-bold"
+                    style={{ color: 'var(--color-warning)' }}
+                  >
                     🛢 유출유 확산예측
                   </span>
                 </div>
@@ -1006,7 +1055,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🛢', label: '유출유', color: '#f97316' }}
+                    tag={{ icon: '🛢', label: '유출유', color: 'var(--color-warning)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1016,11 +1065,15 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(168,85,247,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-tertiary) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
-                  <span className="text-caption font-bold" style={{ color: '#a855f7' }}>
+                  <span
+                    className="text-caption font-bold"
+                    style={{ color: 'var(--color-tertiary)' }}
+                  >
                     🧪 HNS 대기확산
                   </span>
                 </div>
@@ -1029,7 +1082,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🧪', label: 'HNS', color: '#a855f7' }}
+                    tag={{ icon: '🧪', label: 'HNS', color: 'var(--color-tertiary)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1039,7 +1092,8 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(6,182,212,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
@@ -1050,7 +1104,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🚨', label: '구난', color: '#06b6d4' }}
+                    tag={{ icon: '🚨', label: '구난', color: 'var(--color-accent)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1074,8 +1128,8 @@ export function IncidentsView() {
                 className="cursor-pointer rounded text-caption font-semibold"
                 style={{
                   padding: '4px 12px',
-                  background: 'rgba(59,130,246,0.1)',
-                  border: '1px solid rgba(59,130,246,0.2)',
+                  background: 'color-mix(in srgb, var(--color-info) 10%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)',
                   color: 'var(--color-info)',
                 }}
               >
@@ -1085,9 +1139,9 @@ export function IncidentsView() {
                 className="cursor-pointer rounded text-caption font-semibold"
                 style={{
                   padding: '4px 12px',
-                  background: 'rgba(168,85,247,0.1)',
-                  border: '1px solid rgba(168,85,247,0.2)',
-                  color: '#a78bfa',
+                  background: 'color-mix(in srgb, var(--color-tertiary) 10%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent)',
+                  color: 'var(--color-tertiary)',
                 }}
               >
                 🔗 R&D 연계
@@ -1098,17 +1152,19 @@ export function IncidentsView() {
       </div>
 
       {/* Right Panel */}
-      <IncidentsRightPanel
-        incident={selectedIncident}
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        onRunAnalysis={handleRunAnalysis}
-        analysisActive={analysisActive}
-        onCloseAnalysis={handleCloseAnalysis}
-        onCheckedPredsChange={handleCheckedPredsChange}
-        onSensitiveDataChange={handleSensitiveDataChange}
-        selectedVessel={selectedVessel}
-      />
+      <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 280 }}>
+        <IncidentsRightPanel
+          incident={selectedIncident}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          onRunAnalysis={handleRunAnalysis}
+          analysisActive={analysisActive}
+          onCloseAnalysis={handleCloseAnalysis}
+          onCheckedPredsChange={handleCheckedPredsChange}
+          onSensitiveDataChange={handleSensitiveDataChange}
+          selectedVessel={selectedVessel}
+        />
+      </div>
     </div>
   );
 }
@@ -1145,11 +1201,11 @@ function SplitPanelContent({
       model: 'KOSPS + OpenDrift · BUNKER-C 150kL',
       items: [
         { label: '예측 시간', value: '72시간 (3일)' },
-        { label: '최대 확산거리', value: '12.3 NM', color: '#f97316' },
-        { label: '해안 도달 시간', value: '18시간 후', color: '#ef4444' },
+        { label: '최대 확산거리', value: '12.3 NM', color: 'var(--color-warning)' },
+        { label: '해안 도달 시간', value: '18시간 후', color: 'var(--color-danger)' },
         { label: '영향 해안선', value: '27.5 km' },
         { label: '풍화율', value: '32.4%' },
-        { label: '잔존유량', value: '101.4 kL', color: '#f97316' },
+        { label: '잔존유량', value: '101.4 kL', color: 'var(--color-warning)' },
       ],
       summary:
         '여수항 남동쪽 방향 확산, 18시간 후 돌산도 해안 도달 예상. 조류 영향으로 남서쪽 이동.',
@@ -1158,12 +1214,12 @@ function SplitPanelContent({
       title: 'HNS 대기확산 결과',
       model: 'ALOHA + PHAST · 톨루엔 5톤',
       items: [
-        { label: 'IDLH 범위', value: '1.2 km', color: '#ef4444' },
-        { label: 'ERPG-2 범위', value: '2.8 km', color: '#f97316' },
-        { label: 'ERPG-1 범위', value: '5.1 km', color: '#eab308' },
+        { label: 'IDLH 범위', value: '1.2 km', color: 'var(--color-danger)' },
+        { label: 'ERPG-2 범위', value: '2.8 km', color: 'var(--color-warning)' },
+        { label: 'ERPG-1 범위', value: '5.1 km', color: 'var(--color-caution)' },
         { label: '풍향', value: 'SW → NE 방향' },
         { label: '대기 안정도', value: 'D등급 (중립)' },
-        { label: '영향 인구', value: '약 2,400명', color: '#ef4444' },
+        { label: '영향 인구', value: '약 2,400명', color: 'var(--color-danger)' },
       ],
       summary: '남서풍에 의해 북동쪽 내륙 방향 확산. IDLH 1.2km 이내 즉시 대피 필요.',
     },
@@ -1171,12 +1227,12 @@ function SplitPanelContent({
       title: '긴급구난 SAR 결과',
       model: 'SAROPS · Monte Carlo 10,000회 시뮬레이션',
       items: [
-        { label: '95% 확률 범위', value: '8.5 NM²', color: '#06b6d4' },
+        { label: '95% 확률 범위', value: '8.5 NM²', color: 'var(--color-accent)' },
         { label: '최적 탐색 경로', value: 'Sector Search' },
         { label: '예상 표류 속도', value: '1.8 kn' },
         { label: '표류 방향', value: 'NE (045°)' },
-        { label: '생존 가능 시간', value: '36시간', color: '#ef4444' },
-        { label: '필요 자산', value: '헬기 2 + 경비정 3', color: '#f97316' },
+        { label: '생존 가능 시간', value: '36시간', color: 'var(--color-danger)' },
+        { label: '필요 자산', value: '헬기 2 + 경비정 3', color: 'var(--color-warning)' },
       ],
       summary: '북동쪽 방향 표류 예상. 06:00 기준 최적 탐색 패턴: 섹터탐색(Sector Search).',
     },
@@ -1190,8 +1246,8 @@ function SplitPanelContent({
         className="rounded-sm"
         style={{
           padding: '10px 12px',
-          background: `${tag.color}08`,
-          border: `1px solid ${tag.color}20`,
+          background: `color-mix(in srgb, ${tag.color} 8%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${tag.color} 20%, transparent)`,
         }}
       >
         <div className="text-label-2 font-bold" style={{ color: tag.color, marginBottom: 4 }}>
@@ -1219,7 +1275,7 @@ function SplitPanelContent({
             <span className="text-caption text-fg-disabled">{item.label}</span>
             <span
               className="text-caption font-semibold font-mono"
-              style={{ color: item.color || 'var(--fg-default)' }}
+              style={{ color: item.color || 'var(--fg)' }}
             >
               {item.value}
             </span>
@@ -1231,8 +1287,8 @@ function SplitPanelContent({
         className="rounded-sm text-caption text-fg-sub"
         style={{
           padding: '8px 10px',
-          background: `${tag.color}06`,
-          border: `1px solid ${tag.color}15`,
+          background: `color-mix(in srgb, ${tag.color} 6%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${tag.color} 15%, transparent)`,
           lineHeight: 1.6,
         }}
       >
@@ -1262,8 +1318,10 @@ function VesselPopupPanel({
   onClose: () => void;
   onDetail: () => void;
 }) {
-  const statusColor = v.status.includes('사고') ? '#ef4444' : '#22c55e';
-  const statusBg = v.status.includes('사고') ? 'rgba(239,68,68,0.15)' : 'rgba(34,197,94,0.1)';
+  const statusColor = v.status.includes('사고') ? 'var(--color-danger)' : 'var(--color-success)';
+  const statusBg = v.status.includes('사고')
+    ? 'color-mix(in srgb, var(--color-danger) 15%, transparent)'
+    : 'color-mix(in srgb, var(--color-success) 10%, transparent)';
 
   return (
     <div
@@ -1274,10 +1332,10 @@ function VesselPopupPanel({
         transform: 'translate(-50%,-50%)',
         zIndex: 9995,
         width: 300,
-        background: 'var(--bg-elevated)',
-        border: '1px solid var(--stroke-default)',
+        background: 'rgba(13,17,23,0.97)',
+        border: '1px solid rgba(48,54,61,0.8)',
         borderRadius: 12,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.6)',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.7)',
         overflow: 'hidden',
       }}
     >
@@ -1288,8 +1346,8 @@ function VesselPopupPanel({
           alignItems: 'center',
           gap: 8,
           padding: '10px 14px',
-          background: 'var(--bg-elevated)',
-          borderBottom: '1px solid var(--stroke-default)',
+          background: 'rgba(22,27,34,0.97)',
+          borderBottom: '1px solid rgba(48,54,61,0.8)',
         }}
       >
         <div
@@ -1299,23 +1357,33 @@ function VesselPopupPanel({
           {v.flag}
         </div>
         <div className="flex-1 min-w-0">
-          <div className="text-label-1 font-[800] text-fg whitespace-nowrap overflow-hidden text-ellipsis">
+          <div
+            className="text-label-1 font-[800] whitespace-nowrap overflow-hidden text-ellipsis"
+            style={{ color: '#e6edf3' }}
+          >
             {v.name}
           </div>
-          <div className="text-caption text-fg-disabled font-mono">MMSI: {v.mmsi}</div>
+          <div className="text-caption font-mono" style={{ color: '#8b949e' }}>
+            MMSI: {v.mmsi}
+          </div>
         </div>
-        <span onClick={onClose} className="text-title-3 cursor-pointer text-fg-disabled p-[2px]">
+        <span
+          onClick={onClose}
+          className="text-title-3 cursor-pointer p-[2px]"
+          style={{ color: '#8b949e' }}
+        >
           ✕
         </span>
       </div>
 
       {/* Ship Image */}
       <div
-        className="w-full flex items-center justify-center text-[40px] text-fg-disabled"
+        className="w-full flex items-center justify-center text-[40px]"
         style={{
           height: 120,
-          background: '#0d1117',
-          borderBottom: '1px solid #21262d',
+          background: 'rgba(22,27,34,0.97)',
+          borderBottom: '1px solid rgba(48,54,61,0.6)',
+          color: '#484f58',
         }}
       >
         🚢
@@ -1324,14 +1392,14 @@ function VesselPopupPanel({
       {/* Tags */}
       <div
         className="flex gap-2"
-        style={{ padding: '6px 14px', borderBottom: '1px solid #21262d' }}
+        style={{ padding: '6px 14px', borderBottom: '1px solid rgba(48,54,61,0.6)' }}
       >
         <span
           className="text-caption font-bold rounded text-color-info"
           style={{
             padding: '2px 8px',
-            background: 'rgba(59,130,246,0.12)',
-            border: '1px solid rgba(59,130,246,0.25)',
+            background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
+            border: '1px solid color-mix(in srgb, var(--color-info) 25%, transparent)',
           }}
         >
           {v.typS}
@@ -1341,7 +1409,7 @@ function VesselPopupPanel({
           style={{
             padding: '2px 8px',
             background: statusBg,
-            border: `1px solid ${statusColor}40`,
+            border: `1px solid color-mix(in srgb, ${statusColor} 40%, transparent)`,
             color: statusColor,
           }}
         >
@@ -1361,12 +1429,20 @@ function VesselPopupPanel({
           }}
         >
           <div className="flex justify-between">
-            <span className="text-caption text-fg-disabled">출항지</span>
-            <span className="text-caption text-fg-sub font-semibold font-mono">{v.depart}</span>
+            <span className="text-caption" style={{ color: '#8b949e' }}>
+              출항지
+            </span>
+            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
+              {v.depart}
+            </span>
           </div>
           <div className="flex justify-between">
-            <span className="text-caption text-fg-disabled">입항지</span>
-            <span className="text-caption text-fg-sub font-semibold font-mono">{v.arrive}</span>
+            <span className="text-caption" style={{ color: '#8b949e' }}>
+              입항지
+            </span>
+            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
+              {v.arrive}
+            </span>
           </div>
         </div>
         <PopupRow label="데이터 수신" value="2026-02-25 14:32:00" muted />
@@ -1376,31 +1452,34 @@ function VesselPopupPanel({
       <div className="flex gap-1.5" style={{ padding: '10px 14px' }}>
         <button
           onClick={onDetail}
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-info"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(59,130,246,0.12)',
-            border: '1px solid rgba(59,130,246,0.3)',
+            color: '#58a6ff',
+            background: 'rgba(88,166,255,0.12)',
+            border: '1px solid rgba(88,166,255,0.3)',
           }}
         >
           📋 상세정보
         </button>
         <button
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-tertiary"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(168,85,247,0.1)',
-            border: '1px solid rgba(168,85,247,0.25)',
+            color: '#a5d6ff',
+            background: 'rgba(165,214,255,0.1)',
+            border: '1px solid rgba(165,214,255,0.25)',
           }}
         >
           🔍 항적조회
         </button>
         <button
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-accent"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(6,182,212,0.1)',
-            border: '1px solid rgba(6,182,212,0.25)',
+            color: '#22d3ee',
+            background: 'rgba(34,211,238,0.1)',
+            border: '1px solid rgba(34,211,238,0.25)',
           }}
         >
           📐 항로예측
@@ -1429,7 +1508,7 @@ function PopupRow({
         borderBottom: '1px solid rgba(48,54,61,0.4)',
       }}
     >
-      <span className="text-fg-disabled">{label}</span>
+      <span style={{ color: '#8b949e' }}>{label}</span>
       <span
         className="font-semibold font-mono"
         style={{
@@ -1470,24 +1549,18 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
       }}
     >
       <div
-        className="flex flex-col overflow-hidden"
+        className="flex flex-col overflow-hidden bg-bg-surface border border-stroke"
         style={{
           width: 560,
           height: '85vh',
-          background: '#161b22',
-          border: '1px solid #30363d',
           borderRadius: 14,
           boxShadow: '0 24px 64px rgba(0,0,0,0.7)',
         }}
       >
         {/* Header */}
         <div
-          className="shrink-0 flex items-center justify-between"
-          style={{
-            padding: '14px 18px',
-            background: 'linear-gradient(135deg,#1c2333,#161b22)',
-            borderBottom: '1px solid #30363d',
-          }}
+          className="shrink-0 flex items-center justify-between bg-bg-surface border-b border-stroke"
+          style={{ padding: '14px 18px' }}
         >
           <div className="flex items-center gap-[10px]">
             <span className="text-lg">{v.flag}</span>
@@ -1505,12 +1578,8 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
 
         {/* Tabs */}
         <div
-          className="shrink-0 flex gap-0.5 overflow-x-auto"
-          style={{
-            padding: '0 18px',
-            background: '#0d1117',
-            borderBottom: '1px solid #21262d',
-          }}
+          className="shrink-0 flex gap-0.5 overflow-x-auto bg-bg-base border-b border-stroke"
+          style={{ padding: '0 18px' }}
         >
           {TAB_LABELS.map((t) => (
             <button
@@ -1520,8 +1589,9 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
               style={{
                 padding: '8px 11px',
                 fontWeight: tab === t.key ? 600 : 400,
-                color: tab === t.key ? '#58a6ff' : '#8b949e',
-                borderBottom: tab === t.key ? '2px solid #58a6ff' : '2px solid transparent',
+                color: tab === t.key ? 'var(--color-accent)' : 'var(--fg-disabled)',
+                borderBottom:
+                  tab === t.key ? '2px solid var(--color-accent)' : '2px solid transparent',
                 background: 'none',
                 border: 'none',
                 transition: '0.15s',
@@ -1539,7 +1609,7 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
             padding: '16px 18px',
             gap: 14,
             scrollbarWidth: 'thin',
-            scrollbarColor: '#30363d transparent',
+            scrollbarColor: 'var(--stroke-default) transparent',
           }}
         >
           {tab === 'info' && <TabInfo v={v} />}
@@ -1570,7 +1640,7 @@ function Sec({
   return (
     <div
       style={{
-        border: `1px solid ${borderColor || '#21262d'}`,
+        border: `1px solid ${borderColor || 'var(--stroke-default)'}`,
         borderRadius: 8,
         overflow: 'hidden',
       }}
@@ -1579,8 +1649,8 @@ function Sec({
         className="text-label-2 font-bold text-fg-sub flex items-center justify-between"
         style={{
           padding: '8px 12px',
-          background: bgColor || '#0d1117',
-          borderBottom: `1px solid ${borderColor || '#21262d'}`,
+          background: bgColor || 'var(--bg-base)',
+          borderBottom: `1px solid ${borderColor || 'var(--stroke-default)'}`,
         }}
       >
         <span>{title}</span>
@@ -1610,15 +1680,17 @@ function Cell({
     <div
       style={{
         padding: '8px 12px',
-        borderBottom: '1px solid rgba(33,38,45,0.6)',
-        borderRight: span ? 'none' : '1px solid rgba(33,38,45,0.6)',
+        borderBottom: '1px solid color-mix(in srgb, var(--stroke-default) 60%, transparent)',
+        borderRight: span
+          ? 'none'
+          : '1px solid color-mix(in srgb, var(--stroke-default) 60%, transparent)',
         gridColumn: span ? '1 / -1' : undefined,
       }}
     >
       <div className="text-caption text-fg-disabled" style={{ marginBottom: 2 }}>
         {label}
       </div>
-      <div className="text-label-2 font-semibold font-mono" style={{ color: color || '#f0f6fc' }}>
+      <div className="text-label-2 font-semibold font-mono" style={{ color: color || 'var(--fg)' }}>
         {value}
       </div>
     </div>
@@ -1633,7 +1705,7 @@ function StatusBadge({ label, color }: { label: string; color: string }) {
         padding: '2px 6px',
         borderRadius: 8,
         marginLeft: 'auto',
-        background: `${color}25`,
+        background: `color-mix(in srgb, ${color} 25%, transparent)`,
         color,
       }}
     >
@@ -1647,11 +1719,8 @@ function TabInfo({ v }: { v: Vessel }) {
   return (
     <>
       <div
-        className="w-full rounded-lg overflow-hidden flex items-center justify-center text-[60px] text-fg-disabled"
-        style={{
-          height: 160,
-          background: '#0d1117',
-        }}
+        className="w-full rounded-lg overflow-hidden flex items-center justify-center text-[60px] text-fg-disabled bg-bg-base"
+        style={{ height: 160 }}
       >
         🚢
       </div>
@@ -1659,7 +1728,11 @@ function TabInfo({ v }: { v: Vessel }) {
       <Sec title="📡 실시간 현황">
         <Grid>
           <Cell label="선박상태" value={v.status} />
-          <Cell label="속도 / 항로" value={`${v.speed} kn / ${v.heading}°`} color="#22d3ee" />
+          <Cell
+            label="속도 / 항로"
+            value={`${v.speed} kn / ${v.heading}°`}
+            color="var(--color-accent)"
+          />
           <Cell label="위도" value={`${v.lat.toFixed(4)}°N`} />
           <Cell label="경도" value={`${v.lng.toFixed(4)}°E`} />
           <Cell label="흘수" value={`${v.draft}m`} />
@@ -1685,24 +1758,21 @@ function TabNav(_props: { v: Vessel }) {
   const hours = ['08', '09', '10', '11', '12', '13', '14'];
   const heights = [45, 60, 78, 82, 70, 85, 75];
   const colors = [
-    'rgba(34,197,94,.3)',
-    'rgba(34,197,94,.4)',
-    'rgba(59,130,246,.4)',
-    'rgba(59,130,246,.5)',
-    'rgba(59,130,246,.5)',
-    'rgba(59,130,246,.6)',
-    'rgba(6,182,212,.5)',
+    'color-mix(in srgb, var(--color-success) 30%, transparent)',
+    'color-mix(in srgb, var(--color-success) 40%, transparent)',
+    'color-mix(in srgb, var(--color-info) 40%, transparent)',
+    'color-mix(in srgb, var(--color-info) 50%, transparent)',
+    'color-mix(in srgb, var(--color-info) 50%, transparent)',
+    'color-mix(in srgb, var(--color-info) 60%, transparent)',
+    'color-mix(in srgb, var(--color-accent) 50%, transparent)',
   ];
 
   return (
     <>
       <Sec title="🗺 최근 항적 (24h)">
         <div
-          className="flex items-center justify-center relative overflow-hidden"
-          style={{
-            height: 180,
-            background: '#0d1117',
-          }}
+          className="flex items-center justify-center relative overflow-hidden bg-bg-base"
+          style={{ height: 180 }}
         >
           <svg
             width="100%"
@@ -1713,25 +1783,49 @@ function TabNav(_props: { v: Vessel }) {
             <path
               d="M50,150 C80,140 120,100 160,95 S240,70 280,50 S340,30 370,20"
               fill="none"
-              stroke="#58a6ff"
+              stroke="var(--color-accent)"
               strokeWidth="2"
               strokeDasharray="6,3"
               opacity=".6"
             />
-            <circle cx="50" cy="150" r="4" fill="#8b949e" />
-            <circle cx="160" cy="95" r="3" fill="#58a6ff" opacity=".5" />
-            <circle cx="280" cy="50" r="3" fill="#58a6ff" opacity=".5" />
-            <circle cx="370" cy="20" r="5" fill="#58a6ff" />
-            <text x="45" y="168" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <circle cx="50" cy="150" r="4" fill="var(--fg-disabled)" />
+            <circle cx="160" cy="95" r="3" fill="var(--color-accent)" opacity=".5" />
+            <circle cx="280" cy="50" r="3" fill="var(--color-accent)" opacity=".5" />
+            <circle cx="370" cy="20" r="5" fill="var(--color-accent)" />
+            <text
+              x="45"
+              y="168"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               08:00
             </text>
-            <text x="150" y="113" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <text
+              x="150"
+              y="113"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               10:30
             </text>
-            <text x="270" y="68" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <text
+              x="270"
+              y="68"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               12:45
             </text>
-            <text x="350" y="16" fill="#58a6ff" fontSize="9" fontFamily="monospace">
+            <text
+              x="350"
+              y="16"
+              fill="var(--color-accent)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               현재
             </text>
           </svg>
@@ -1766,16 +1860,16 @@ function TabNav(_props: { v: Vessel }) {
         <ActionBtn
           icon="🔍"
           label="전체 항적 조회"
-          bg="rgba(168,85,247,0.1)"
-          bd="rgba(168,85,247,0.25)"
-          fg="#a78bfa"
+          bg="color-mix(in srgb, var(--color-tertiary) 10%, transparent)"
+          bd="color-mix(in srgb, var(--color-tertiary) 25%, transparent)"
+          fg="var(--color-tertiary)"
         />
         <ActionBtn
           icon="📐"
           label="항로 예측"
-          bg="rgba(6,182,212,0.1)"
-          bd="rgba(6,182,212,0.25)"
-          fg="#22d3ee"
+          bg="color-mix(in srgb, var(--color-accent) 10%, transparent)"
+          bd="color-mix(in srgb, var(--color-accent) 25%, transparent)"
+          fg="var(--color-accent)"
         />
       </div>
     </>
@@ -1814,8 +1908,8 @@ function TabSpec({ v }: { v: Vessel }) {
             className="flex items-center gap-2 rounded"
             style={{
               padding: '5px 8px',
-              background: 'rgba(239,68,68,0.06)',
-              border: '1px solid rgba(239,68,68,0.12)',
+              background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+              border: '1px solid color-mix(in srgb, var(--color-danger) 12%, transparent)',
             }}
           >
             <span className="text-label-1">🛢</span>
@@ -1830,7 +1924,7 @@ function TabSpec({ v }: { v: Vessel }) {
                 className="text-caption font-bold text-color-danger"
                 style={{
                   padding: '2px 6px',
-                  background: 'rgba(239,68,68,0.15)',
+                  background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
                   borderRadius: 3,
                 }}
               >
@@ -1859,27 +1953,27 @@ function TabInsurance(_props: { v: Vessel }) {
 
       <Sec
         title="🚢 선체보험 (H&M)"
-        borderColor="rgba(6,182,212,0.2)"
-        bgColor="rgba(6,182,212,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-accent) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-accent) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
           <Cell label="보험사" value="삼성화재해상보험" />
-          <Cell label="보험가액" value="USD 28,500,000" color="#22d3ee" />
-          <Cell label="보험기간" value="2025.01 ~ 2026.01" color="#22c55e" />
+          <Cell label="보험가액" value="USD 28,500,000" color="var(--color-accent)" />
+          <Cell label="보험기간" value="2025.01 ~ 2026.01" color="var(--color-success)" />
           <Cell label="면책금" value="USD 150,000" />
         </Grid>
       </Sec>
 
       <Sec
         title="📦 화물보험 (Cargo)"
-        borderColor="rgba(168,85,247,0.2)"
-        bgColor="rgba(168,85,247,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-tertiary) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-tertiary) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
           <Cell label="보험사" value="DB손해보험" />
-          <Cell label="보험가액" value="USD 42,100,000" color="#a855f7" />
+          <Cell label="보험가액" value="USD 42,100,000" color="var(--color-tertiary)" />
           <Cell label="적하물" value="벙커C유 72,850톤" />
           <Cell label="조건" value="ICC(A) All Risks" />
         </Grid>
@@ -1887,17 +1981,17 @@ function TabInsurance(_props: { v: Vessel }) {
 
       <Sec
         title="🛢 유류오염배상 (CLC/IOPC)"
-        borderColor="rgba(239,68,68,0.2)"
-        bgColor="rgba(239,68,68,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-danger) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-danger) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
-          <Cell label="배상보증서" value="유효 (2025-12-31)" color="#22c55e" />
+          <Cell label="배상보증서" value="유효 (2025-12-31)" color="var(--color-success)" />
           <Cell label="발급기관" value="한국선주상호보험" />
-          <Cell label="CLC 한도" value="89.77M SDR" color="#ef4444" />
+          <Cell label="CLC 한도" value="89.77M SDR" color="var(--color-danger)" />
           <Cell label="IOPC 기금" value="203M SDR" />
           <Cell label="추가기금" value="750M SDR" />
-          <Cell label="총 배상한도" value="약 1,042.77M SDR" color="#f97316" />
+          <Cell label="총 배상한도" value="약 1,042.77M SDR" color="var(--color-warning)" />
         </Grid>
       </Sec>
 
@@ -1905,8 +1999,8 @@ function TabInsurance(_props: { v: Vessel }) {
         className="rounded-sm text-caption text-fg-disabled"
         style={{
           padding: '8px 10px',
-          background: 'rgba(59,130,246,0.04)',
-          border: '1px solid rgba(59,130,246,0.1)',
+          background: 'color-mix(in srgb, var(--color-info) 4%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-info) 10%, transparent)',
           lineHeight: 1.6,
         }}
       >
@@ -1923,13 +2017,13 @@ function TabDangerous({ v }: { v: Vessel }) {
     <>
       <Sec
         title="⚠ 위험물 화물 신고정보"
-        bgColor="rgba(249,115,22,0.06)"
+        bgColor="color-mix(in srgb, var(--color-warning) 6%, transparent)"
         badge={
           <span
             className="text-caption font-bold text-color-danger"
             style={{
               padding: '2px 6px',
-              background: 'rgba(239,68,68,0.15)',
+              background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
               borderRadius: 8,
             }}
           >
@@ -1938,7 +2032,11 @@ function TabDangerous({ v }: { v: Vessel }) {
         }
       >
         <Grid>
-          <Cell label="화물명" value={v.cargo.split('·')[0].trim() || '—'} color="#f97316" />
+          <Cell
+            label="화물명"
+            value={v.cargo.split('·')[0].trim() || '—'}
+            color="var(--color-warning)"
+          />
           <Cell label="컨테이너갯수/총량" value="— / 72,850 톤" />
           <Cell label="하역업체코드" value="KRY-2847" />
           <Cell label="하역기간" value="02-26 ~ 02-28" />
@@ -1965,7 +2063,7 @@ function TabDangerous({ v }: { v: Vessel }) {
                   width: 14,
                   height: 14,
                   borderRadius: '50%',
-                  border: '2px solid #22d3ee',
+                  border: '2px solid var(--color-accent)',
                 }}
               >
                 ✓
@@ -1977,8 +2075,8 @@ function TabDangerous({ v }: { v: Vessel }) {
             className="text-caption font-semibold text-color-info cursor-pointer whitespace-nowrap shrink-0 rounded"
             style={{
               padding: '6px 14px',
-              background: 'rgba(59,130,246,0.1)',
-              border: '1px solid rgba(59,130,246,0.2)',
+              background: 'color-mix(in srgb, var(--color-info) 10%, transparent)',
+              border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)',
             }}
           >
             📎 첨부[화물적부도]
@@ -1988,41 +2086,44 @@ function TabDangerous({ v }: { v: Vessel }) {
 
       <Sec
         title="🔥 IMO 위험물 분류"
-        borderColor="rgba(239,68,68,0.2)"
-        bgColor="rgba(239,68,68,0.06)"
+        borderColor="color-mix(in srgb, var(--color-danger) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-danger) 6%, transparent)"
       >
         <Grid>
-          <Cell label="IMO Class" value="Class 3" color="#ef4444" />
+          <Cell label="IMO Class" value="Class 3" color="var(--color-danger)" />
           <Cell label="분류" value="인화성 액체" />
           <Cell label="UN No." value="UN 1993" />
           <Cell label="포장등급" value="III" />
-          <Cell label="인화점" value="60°C 이상" color="#f97316" />
-          <Cell label="해양오염물질" value="해당 (P)" color="#ef4444" />
+          <Cell label="인화점" value="60°C 이상" color="var(--color-warning)" />
+          <Cell label="해양오염물질" value="해당 (P)" color="var(--color-danger)" />
         </Grid>
       </Sec>
 
-      <Sec title="🚨 비상 대응 요약 (EmS)" bgColor="rgba(234,179,8,0.06)">
+      <Sec
+        title="🚨 비상 대응 요약 (EmS)"
+        bgColor="color-mix(in srgb, var(--color-caution) 6%, transparent)"
+      >
         <div className="flex flex-col gap-1.5 bg-bg-base" style={{ padding: '10px 12px' }}>
           <EmsRow
             icon="🔥"
             label="화재시"
             value="포말소화제, CO₂ 소화기 사용 · 물분무 냉각"
-            bg="rgba(239,68,68,0.05)"
-            bd="rgba(239,68,68,0.12)"
+            bg="color-mix(in srgb, var(--color-danger) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-danger) 12%, transparent)"
           />
           <EmsRow
             icon="🌊"
             label="유출시"
             value="오일펜스 전개 · 유흡착재 투입 · 해상 기름 회수"
-            bg="rgba(59,130,246,0.05)"
-            bd="rgba(59,130,246,0.12)"
+            bg="color-mix(in srgb, var(--color-info) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-info) 12%, transparent)"
           />
           <EmsRow
             icon="🫁"
             label="보호장비"
             value="내화학장갑, 보안경, 방독마스크 · 레벨C 보호복"
-            bg="rgba(168,85,247,0.05)"
-            bd="rgba(168,85,247,0.12)"
+            bg="color-mix(in srgb, var(--color-tertiary) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-tertiary) 12%, transparent)"
           />
         </div>
       </Sec>
@@ -2031,8 +2132,8 @@ function TabDangerous({ v }: { v: Vessel }) {
         className="rounded-sm text-caption text-fg-disabled"
         style={{
           padding: '8px 10px',
-          background: 'rgba(249,115,22,0.04)',
-          border: '1px solid rgba(249,115,22,0.1)',
+          background: 'color-mix(in srgb, var(--color-warning) 4%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-warning) 10%, transparent)',
           lineHeight: 1.6,
         }}
       >
@@ -2124,7 +2225,11 @@ function VesselTooltipContent({ vessel: v }: { vessel: Vessel }) {
 
 function IncidentTooltipContent({ incident: i }: { incident: IncidentCompat }) {
   const statusColor =
-    i.status === 'active' ? '#ef4444' : i.status === 'investigating' ? '#f59e0b' : '#6b7280';
+    i.status === 'active'
+      ? 'var(--color-danger)'
+      : i.status === 'investigating'
+        ? 'var(--color-warning)'
+        : 'var(--fg-disabled)';
 
   return (
     <>
diff --git a/frontend/src/tabs/prediction/components/LeftPanel.tsx b/frontend/src/tabs/prediction/components/LeftPanel.tsx
index 71ccb72..4edb0b6 100755
--- a/frontend/src/tabs/prediction/components/LeftPanel.tsx
+++ b/frontend/src/tabs/prediction/components/LeftPanel.tsx
@@ -130,7 +130,7 @@ export function LeftPanel({
   };
 
   return (
-    <div className="w-80 min-w-[320px] bg-bg-surface border-r border-stroke flex flex-col">
+    <div className="w-full min-w-0 h-full bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
       {/* Scrollable Content */}
       <div
         className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent"
diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index c37afb9..cec53b4 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -166,6 +166,8 @@ export const ALL_MODELS: PredictionModel[] = ['KOSPS', 'POSEIDON', 'OpenDrift'];
 
 export function OilSpillView() {
   const { activeSubTab, setActiveSubTab } = useSubMenu('prediction');
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [enabledLayers, setEnabledLayers] = useState<Set<string>>(new Set());
   const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null);
   const [flyToCoord, setFlyToCoord] = useState<{ lon: number; lat: number } | undefined>(undefined);
@@ -1129,88 +1131,132 @@ export function OilSpillView() {
     <div className="relative flex flex-1 overflow-hidden">
       {/* Left Sidebar */}
       {activeSubTab === 'analysis' && (
-        <LeftPanel
-          selectedAnalysis={selectedAnalysis}
-          enabledLayers={enabledLayers}
-          onToggleLayer={handleToggleLayer}
-          accidentTime={accidentTime}
-          onAccidentTimeChange={(v) => {
-            setAccidentTime(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('accidentTime');
-              return n;
-            });
-          }}
-          incidentCoord={incidentCoord}
-          onCoordChange={(v) => {
-            setIncidentCoord(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('coord');
-              return n;
-            });
-          }}
-          isSelectingLocation={isSelectingLocation}
-          onMapSelectClick={() => setIsSelectingLocation((prev) => !prev)}
-          onRunSimulation={handleRunSimulation}
-          isRunningSimulation={isRunningSimulation}
-          selectedModels={selectedModels}
-          onModelsChange={(v) => {
-            setSelectedModels(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('models');
-              return n;
-            });
-          }}
-          visibleModels={visibleModels}
-          onVisibleModelsChange={setVisibleModels}
-          hasResults={oilTrajectory.length > 0}
-          predictionTime={predictionTime}
-          onPredictionTimeChange={setPredictionTime}
-          spillType={spillType}
-          onSpillTypeChange={setSpillType}
-          oilType={oilType}
-          onOilTypeChange={setOilType}
-          spillAmount={spillAmount}
-          onSpillAmountChange={setSpillAmount}
-          incidentName={incidentName}
-          onIncidentNameChange={(v) => {
-            setIncidentName(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('incidentName');
-              return n;
-            });
-          }}
-          spillUnit={spillUnit}
-          onSpillUnitChange={setSpillUnit}
-          boomLines={boomLines}
-          onBoomLinesChange={setBoomLines}
-          oilTrajectory={oilTrajectory}
-          algorithmSettings={algorithmSettings}
-          onAlgorithmSettingsChange={setAlgorithmSettings}
-          isDrawingBoom={isDrawingBoom}
-          onDrawingBoomChange={setIsDrawingBoom}
-          drawingPoints={drawingPoints}
-          onDrawingPointsChange={setDrawingPoints}
-          containmentResult={containmentResult}
-          onContainmentResultChange={setContainmentResult}
-          layerOpacity={layerOpacity}
-          onLayerOpacityChange={setLayerOpacity}
-          layerBrightness={layerBrightness}
-          onLayerBrightnessChange={setLayerBrightness}
-          layerColors={layerColors}
-          onLayerColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
-          sensitiveResources={sensitiveResourceCategories}
-          onImageAnalysisResult={handleImageAnalysisResult}
-          validationErrors={validationErrors}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 320 }}>
+          <LeftPanel
+            selectedAnalysis={selectedAnalysis}
+            enabledLayers={enabledLayers}
+            onToggleLayer={handleToggleLayer}
+            accidentTime={accidentTime}
+            onAccidentTimeChange={(v) => {
+              setAccidentTime(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('accidentTime');
+                return n;
+              });
+            }}
+            incidentCoord={incidentCoord}
+            onCoordChange={(v) => {
+              setIncidentCoord(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('coord');
+                return n;
+              });
+            }}
+            isSelectingLocation={isSelectingLocation}
+            onMapSelectClick={() => setIsSelectingLocation((prev) => !prev)}
+            onRunSimulation={handleRunSimulation}
+            isRunningSimulation={isRunningSimulation}
+            selectedModels={selectedModels}
+            onModelsChange={(v) => {
+              setSelectedModels(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('models');
+                return n;
+              });
+            }}
+            visibleModels={visibleModels}
+            onVisibleModelsChange={setVisibleModels}
+            hasResults={oilTrajectory.length > 0}
+            predictionTime={predictionTime}
+            onPredictionTimeChange={setPredictionTime}
+            spillType={spillType}
+            onSpillTypeChange={setSpillType}
+            oilType={oilType}
+            onOilTypeChange={setOilType}
+            spillAmount={spillAmount}
+            onSpillAmountChange={setSpillAmount}
+            incidentName={incidentName}
+            onIncidentNameChange={(v) => {
+              setIncidentName(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('incidentName');
+                return n;
+              });
+            }}
+            spillUnit={spillUnit}
+            onSpillUnitChange={setSpillUnit}
+            boomLines={boomLines}
+            onBoomLinesChange={setBoomLines}
+            oilTrajectory={oilTrajectory}
+            algorithmSettings={algorithmSettings}
+            onAlgorithmSettingsChange={setAlgorithmSettings}
+            isDrawingBoom={isDrawingBoom}
+            onDrawingBoomChange={setIsDrawingBoom}
+            drawingPoints={drawingPoints}
+            onDrawingPointsChange={setDrawingPoints}
+            containmentResult={containmentResult}
+            onContainmentResultChange={setContainmentResult}
+            layerOpacity={layerOpacity}
+            onLayerOpacityChange={setLayerOpacity}
+            layerBrightness={layerBrightness}
+            onLayerBrightnessChange={setLayerBrightness}
+            layerColors={layerColors}
+            onLayerColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
+            sensitiveResources={sensitiveResourceCategories}
+            onImageAnalysisResult={handleImageAnalysisResult}
+            validationErrors={validationErrors}
+          />
+        </div>
       )}
 
       {/* Center - Map/Content Area */}
       <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+        )}
+
+        {/* Right panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+        )}
+
         {activeSubTab === 'list' ? (
           <AnalysisListTable
             onTabChange={setActiveSubTab}
@@ -1655,44 +1701,46 @@ export function OilSpillView() {
 
       {/* Right Panel */}
       {activeSubTab === 'analysis' && (
-        <RightPanel
-          onOpenBacktrack={handleOpenBacktrack}
-          onOpenRecalc={() => {
-            if (!selectedAnalysis) {
-              alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
-              return;
+        <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 300 }}>
+          <RightPanel
+            onOpenBacktrack={handleOpenBacktrack}
+            onOpenRecalc={() => {
+              if (!selectedAnalysis) {
+                alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
+                return;
+              }
+              setRecalcModalOpen(true);
+            }}
+            onOpenReport={handleOpenReport}
+            detail={analysisDetail}
+            summary={
+              stepSummariesByModel[windHydrModel]?.[currentStep] ??
+              summaryByModel[windHydrModel] ??
+              simulationSummary
             }
-            setRecalcModalOpen(true);
-          }}
-          onOpenReport={handleOpenReport}
-          detail={analysisDetail}
-          summary={
-            stepSummariesByModel[windHydrModel]?.[currentStep] ??
-            summaryByModel[windHydrModel] ??
-            simulationSummary
-          }
-          boomBlockedVolume={boomBlockedVolume}
-          displayControls={displayControls}
-          onDisplayControlsChange={setDisplayControls}
-          windHydrModel={windHydrModel}
-          windHydrModelOptions={windHydrModelOptions}
-          onWindHydrModelChange={setWindHydrModel}
-          analysisTab={analysisTab}
-          onSwitchAnalysisTab={setAnalysisTab}
-          drawAnalysisMode={drawAnalysisMode}
-          analysisPolygonPoints={analysisPolygonPoints}
-          circleRadiusNm={circleRadiusNm}
-          onCircleRadiusChange={setCircleRadiusNm}
-          analysisResult={analysisResult}
-          incidentCoord={incidentCoord}
-          centerPoints={centerPoints}
-          predictionTime={predictionTime}
-          onStartPolygonDraw={handleStartPolygonDraw}
-          onRunPolygonAnalysis={handleRunPolygonAnalysis}
-          onRunCircleAnalysis={handleRunCircleAnalysis}
-          onCancelAnalysis={handleCancelAnalysis}
-          onClearAnalysis={handleClearAnalysis}
-        />
+            boomBlockedVolume={boomBlockedVolume}
+            displayControls={displayControls}
+            onDisplayControlsChange={setDisplayControls}
+            windHydrModel={windHydrModel}
+            windHydrModelOptions={windHydrModelOptions}
+            onWindHydrModelChange={setWindHydrModel}
+            analysisTab={analysisTab}
+            onSwitchAnalysisTab={setAnalysisTab}
+            drawAnalysisMode={drawAnalysisMode}
+            analysisPolygonPoints={analysisPolygonPoints}
+            circleRadiusNm={circleRadiusNm}
+            onCircleRadiusChange={setCircleRadiusNm}
+            analysisResult={analysisResult}
+            incidentCoord={incidentCoord}
+            centerPoints={centerPoints}
+            predictionTime={predictionTime}
+            onStartPolygonDraw={handleStartPolygonDraw}
+            onRunPolygonAnalysis={handleRunPolygonAnalysis}
+            onRunCircleAnalysis={handleRunCircleAnalysis}
+            onCancelAnalysis={handleCancelAnalysis}
+            onClearAnalysis={handleClearAnalysis}
+          />
+        </div>
       )}
 
       {/* 확산 예측 실행 중 로딩 오버레이 */}
diff --git a/frontend/src/tabs/prediction/components/RightPanel.tsx b/frontend/src/tabs/prediction/components/RightPanel.tsx
index 483c862..0109d13 100755
--- a/frontend/src/tabs/prediction/components/RightPanel.tsx
+++ b/frontend/src/tabs/prediction/components/RightPanel.tsx
@@ -117,7 +117,7 @@ export function RightPanel({
   }, [incidentCoord, centerPoints, summary, predictionTime]);
 
   return (
-    <div className="w-[300px] min-w-[300px] bg-bg-surface border-l border-stroke flex flex-col">
+    <div className="w-full min-w-0 h-full bg-bg-surface border-l border-stroke flex flex-col overflow-hidden">
       {/* Tab Header */}
       <div className="flex border-b border-stroke">
         <button className="flex-1 py-3 text-center text-label-1 font-medium text-color-accent border-b-2 border-color-accent transition-all font-korean">
@@ -572,7 +572,7 @@ export function RightPanel({
 
       {/* Bottom Action Buttons */}
       <div className="flex gap-1.5 p-3 border-t border-stroke">
-        <button className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-color-accent text-color-accent font-korean hover:bg-[rgba(6,182,212,0.08)] transition-colors">
+        <button className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border  border-stroke font-korean hover:bg-[rgba(6,182,212,0.08)] transition-colors">
           저장
         </button>
         <button
@@ -589,7 +589,7 @@ export function RightPanel({
         </button>
         <button
           onClick={onOpenBacktrack}
-          className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-[var(--color-tertiary)] text-[var(--color-tertiary)] font-korean hover:bg-[rgba(168,85,247,0.08)] transition-colors"
+          className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-stroke  font-korean hover:bg-[rgba(168,85,247,0.08)] transition-colors"
         >
           역추적
         </button>
diff --git a/frontend/src/tabs/scat/components/PreScatView.tsx b/frontend/src/tabs/scat/components/PreScatView.tsx
index d7a0ec1..56808a8 100755
--- a/frontend/src/tabs/scat/components/PreScatView.tsx
+++ b/frontend/src/tabs/scat/components/PreScatView.tsx
@@ -16,6 +16,8 @@ import ScatRightPanel from './ScatRightPanel';
 // ═══ Main PreScatView ═══
 
 export function PreScatView() {
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [segments, setSegments] = useState<ScatSegment[]>([]);
   const [zones, setZones] = useState<ApiZoneItem[]>([]);
   const [jurisdictions, setJurisdictions] = useState<string[]>([]);
@@ -199,29 +201,70 @@ export function PreScatView() {
 
   return (
     <div className="flex w-full h-full bg-bg-base overflow-hidden">
-      <ScatLeftPanel
-        segments={segments}
-        zones={zones}
-        jurisdictions={jurisdictions}
-        offices={offices}
-        selectedOffice={selectedOffice}
-        onOfficeChange={setSelectedOffice}
-        selectedSeg={selectedSeg}
-        onSelectSeg={setSelectedSeg}
-        onOpenPopup={handleOpenPopup}
-        jurisdictionFilter={jurisdictionFilter}
-        onJurisdictionChange={setJurisdictionFilter}
-        areaFilter={areaFilter}
-        onAreaChange={setAreaFilter}
-        phaseFilter={phaseFilter}
-        onPhaseChange={setPhaseFilter}
-        statusFilter={statusFilter}
-        onStatusChange={setStatusFilter}
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-      />
+      {/* Left Panel */}
+      <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 340 }}>
+        <ScatLeftPanel
+          segments={segments}
+          zones={zones}
+          jurisdictions={jurisdictions}
+          offices={offices}
+          selectedOffice={selectedOffice}
+          onOfficeChange={setSelectedOffice}
+          selectedSeg={selectedSeg}
+          onSelectSeg={setSelectedSeg}
+          onOpenPopup={handleOpenPopup}
+          jurisdictionFilter={jurisdictionFilter}
+          onJurisdictionChange={setJurisdictionFilter}
+          areaFilter={areaFilter}
+          onAreaChange={setAreaFilter}
+          phaseFilter={phaseFilter}
+          onPhaseChange={setPhaseFilter}
+          statusFilter={statusFilter}
+          onStatusChange={setStatusFilter}
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+        />
+      </div>
+
+      <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        <button
+          onClick={() => setLeftCollapsed((v) => !v)}
+          className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+          style={{
+            left: 0,
+            width: 18,
+            height: 40,
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--stroke-default)',
+            borderLeft: 'none',
+            borderRadius: '0 6px 6px 0',
+            color: 'var(--fg-sub)',
+            cursor: 'pointer',
+          }}
+        >
+          {leftCollapsed ? '▶' : '◀'}
+        </button>
+
+        {/* Right panel toggle button */}
+        <button
+          onClick={() => setRightCollapsed((v) => !v)}
+          className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+          style={{
+            right: 0,
+            width: 18,
+            height: 40,
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--stroke-default)',
+            borderRight: 'none',
+            borderRadius: '6px 0 0 6px',
+            color: 'var(--fg-sub)',
+            cursor: 'pointer',
+          }}
+        >
+          {rightCollapsed ? '◀' : '▶'}
+        </button>
 
-      <div className="flex-1 relative">
         <ScatMap
           segments={segments}
           zones={zones}
@@ -237,7 +280,10 @@ export function PreScatView() {
         /> */}
       </div>
 
-      <ScatRightPanel detail={panelDetail} loading={panelLoading} />
+      {/* Right Panel */}
+      <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 280 }}>
+        <ScatRightPanel detail={panelDetail} loading={panelLoading} />
+      </div>
 
       {popupData && (
         <ScatPopup data={popupData} segCode={selectedSeg.code} onClose={handleClosePopup} />
diff --git a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
index 7cdc25d..0e8b725 100644
--- a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
+++ b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
@@ -156,7 +156,7 @@ function ScatLeftPanel({
   }, []);
 
   return (
-    <div className="w-[340px] min-w-[340px] bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
+    <div className="w-full h-full min-w-0 bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
       {/* Filters */}
       <div className="p-3.5 border-b border-stroke">
         <div className="flex items-center gap-1.5 text-caption font-bold uppercase tracking-wider text-fg mb-3">
@@ -269,7 +269,11 @@ function ScatLeftPanel({
             rowCount={filtered.length}
             rowHeight={88}
             overscanCount={5}
-            style={{ height: listHeight }}
+            style={{
+              height: listHeight,
+              scrollbarWidth: 'thin',
+              scrollbarColor: 'var(--stroke-default) transparent',
+            }}
             rowComponent={SegRow}
             rowProps={{
               filtered,
diff --git a/frontend/src/tabs/scat/components/ScatMap.tsx b/frontend/src/tabs/scat/components/ScatMap.tsx
index e96525a..9fb5227 100644
--- a/frontend/src/tabs/scat/components/ScatMap.tsx
+++ b/frontend/src/tabs/scat/components/ScatMap.tsx
@@ -310,7 +310,7 @@ function ScatMap({
       </div>
 
       {/* Right info cards */}
-      <div className="absolute top-3.5 right-3.5 w-[260px] flex flex-col gap-2 z-[1000] max-h-[calc(100%-100px)] overflow-y-auto scrollbar-thin">
+      <div className="absolute top-3.5 right-8 w-[260px] flex flex-col gap-2 z-[1000] max-h-[calc(100%-100px)] overflow-y-auto scrollbar-thin">
         {/* ESI Legend */}
         <div className="bg-[color-mix(in_srgb,var(--bg-base)_92%,transparent)] backdrop-blur-xl border border-stroke rounded-md p-3.5 shadow-[0_4px_20px_rgba(0,0,0,0.3)]">
           <div className="text-caption font-bold uppercase tracking-wider text-fg-disabled mb-2.5">
diff --git a/frontend/src/tabs/scat/components/ScatRightPanel.tsx b/frontend/src/tabs/scat/components/ScatRightPanel.tsx
index 331b1c9..ee8b25b 100644
--- a/frontend/src/tabs/scat/components/ScatRightPanel.tsx
+++ b/frontend/src/tabs/scat/components/ScatRightPanel.tsx
@@ -23,7 +23,7 @@ export default function ScatRightPanel({
 
   if (!detail && !loading) {
     return (
-      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-[280px] min-w-[280px] h-full">
+      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-full h-full">
         <div className="text-3xl mb-2">🏖️</div>
         <div className="text-center text-fg-disabled text-label-2 leading-relaxed">
           좌측 목록에서 구간을
@@ -37,7 +37,7 @@ export default function ScatRightPanel({
   }
 
   return (
-    <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden h-full w-[280px] min-w-[280px]">
+    <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden h-full w-full">
       {/* 헤더 */}
       <div className="px-3.5 py-2.5 border-b border-stroke shrink-0">
         {detail ? (
diff --git a/frontend/src/tabs/weather/components/WeatherMapControls.tsx b/frontend/src/tabs/weather/components/WeatherMapControls.tsx
index 9d6714f..fac20c1 100644
--- a/frontend/src/tabs/weather/components/WeatherMapControls.tsx
+++ b/frontend/src/tabs/weather/components/WeatherMapControls.tsx
@@ -33,7 +33,7 @@ export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
           <div key={tooltip} className="relative group">
             <button
               onClick={onClick}
-              className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-base"
+              className="w-[38px] h-[38px] bg-bg-surface border border-stroke rounded-sm shadow-md text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-base"
             >
               {label}
             </button>
diff --git a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
index 28175dd..5d9b442 100755
--- a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
+++ b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
@@ -33,26 +33,26 @@ interface WeatherMapOverlayProps {
   selectedStationId: string | null;
 }
 
-// 풍속에 따른 hex 색상 반환
+// 풍속에 따른 색상 반환
 function getWindHexColor(speed: number, isSelected: boolean): string {
-  if (isSelected) return '#06b6d4';
-  if (speed > 10) return '#ef4444';
-  if (speed > 7) return '#f59e0b';
-  return '#3b82f6';
+  if (isSelected) return 'var(--color-accent)';
+  if (speed > 10) return 'var(--color-danger)';
+  if (speed > 7) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
-// 파고에 따른 hex 색상 반환
+// 파고에 따른 색상 반환
 function getWaveHexColor(height: number): string {
-  if (height > 2.5) return '#ef4444';
-  if (height > 1.5) return '#f59e0b';
-  return '#3b82f6';
+  if (height > 2.5) return 'var(--color-danger)';
+  if (height > 1.5) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
-// 수온에 따른 hex 색상 반환
+// 수온에 따른 색상 반환
 function getTempHexColor(temp: number): string {
-  if (temp > 8) return '#ef4444';
-  if (temp > 6) return '#f59e0b';
-  return '#3b82f6';
+  if (temp > 8) return 'var(--color-danger)';
+  if (temp > 6) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
 /**
@@ -91,15 +91,17 @@ export function WeatherMapOverlay({
                     width={24}
                     height={24}
                     viewBox="0 0 24 24"
-                    style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))' }}
+                    style={{ filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.5))' }}
                   >
-                    {/* 위쪽이 바람 방향을 나타내는 삼각형 */}
-                    <polygon points="12,2 4,22 12,16 20,22" fill={color} opacity="0.9" />
+                    {/* 흰 외곽선 레이어 */}
+                    <polygon points="12,2 4,22 12,16 20,22" fill="white" opacity="0.9" />
+                    {/* 색상 레이어 */}
+                    <polygon points="12,3 5,21 12,15.5 19,21" fill={color} opacity="0.95" />
                   </svg>
                 </div>
                 <span
-                  style={{ color, textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
-                  className="text-xs font-bold leading-none"
+                  className="text-xs font-bold leading-none px-1 py-px rounded-sm bg-bg-base/80"
+                  style={{ color }}
                 >
                   {station.wind.speed.toFixed(1)}
                 </span>
@@ -205,7 +207,6 @@ export function useWeatherDeckLayers(
   onStationClick: (station: WeatherStation) => void,
 ): Layer[] {
   return useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const result: Layer[] = [];
 
     // 파고 분포 ScatterplotLayer (Circle 대체, 반경 = 파고 * 15km)
diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
index d7950b2..7d73638 100755
--- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
+++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 interface WeatherData {
   stationName: string;
   location: { lat: number; lon: number };
@@ -46,20 +48,14 @@ interface WeatherRightPanelProps {
   weatherData: WeatherData | null;
 }
 
-/** 풍속 등급 색상 */
-function windColor(speed: number): string {
-  if (speed >= 14) return '#ef4444';
-  if (speed >= 10) return '#f97316';
-  if (speed >= 6) return '#eab308';
-  return '#22c55e';
+/** 풍속 텍스트 색상 (2단계 — danger | accent) */
+function windTextColor(speed: number): string {
+  return speed >= 10 ? 'var(--color-danger)' : 'var(--color-accent)';
 }
 
-/** 파고 등급 색상 */
-function waveColor(height: number): string {
-  if (height >= 3) return '#ef4444';
-  if (height >= 2) return '#f97316';
-  if (height >= 1) return '#eab308';
-  return '#22c55e';
+/** 파고 텍스트 색상 (2단계 — danger | accent) */
+function waveTextColor(height: number): string {
+  return height >= 2 ? 'var(--color-danger)' : 'var(--color-accent)';
 }
 
 /** 풍향 텍스트 */
@@ -86,13 +82,38 @@ function windDirText(deg: number): string {
 }
 
 export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (collapsed) {
+    return (
+      <div className="flex flex-col bg-bg-surface border-l border-stroke w-8 shrink-0">
+        <button
+          onClick={() => setCollapsed(false)}
+          className="flex-1 flex flex-col items-center justify-start pt-3 gap-1 text-fg-sub hover:text-fg transition-colors"
+          title="패널 펼치기"
+        >
+          <span className="text-heading-2 leading-none">‹</span>
+          <span className="text-subtitle text-fg-disabled [writing-mode:vertical-rl]">펼치기</span>
+        </button>
+      </div>
+    );
+  }
+
   if (!weatherData) {
     return (
       <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
-        <div className="p-6 text-center">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-stroke bg-bg-elevated">
           <p className="text-fg-disabled text-title-4 font-korean">
             지도에서 해양 지점을 클릭하세요
           </p>
+          <button
+            onClick={() => setCollapsed(true)}
+            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2"
+            title="패널 접기"
+          >
+            <span className="text-subtitle text-fg-disabled">접기</span>
+            <span className="text-heading-2 leading-none">›</span>
+          </button>
         </div>
       </div>
     );
@@ -109,18 +130,30 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
     <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
       {/* 헤더 */}
       <div className="px-4 py-3 border-b border-stroke bg-bg-elevated">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-title-4 font-bold text-color-accent font-korean">
-            📍 {weatherData.stationName}
-          </span>
-          <span className="px-1.5 py-px text-label-2 rounded bg-[rgba(6,182,212,0.15)] text-color-accent font-bold">
-            기상예보관
-          </span>
+        <div className="flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-title-4 font-bold text-color-accent font-korean truncate">
+                📍 {weatherData.stationName}
+              </span>
+              <span className="px-1.5 py-px text-label-2 rounded bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-color-accent font-bold shrink-0">
+                기상예보관
+              </span>
+            </div>
+            <p className="text-label-2 text-fg-disabled font-mono">
+              {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '}
+              {weatherData.currentTime}
+            </p>
+          </div>
+          <button
+            onClick={() => setCollapsed(true)}
+            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2 mt-0.5"
+            title="패널 접기"
+          >
+            <span className="text-subtitle text-fg-disabled">접기</span>
+            <span className="text-heading-2 leading-none">›</span>
+          </button>
         </div>
-        <p className="text-label-2 text-fg-disabled font-mono">
-          {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '}
-          {weatherData.currentTime}
-        </p>
       </div>
 
       {/* 스크롤 콘텐츠 */}
@@ -131,13 +164,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 핵심 지표 3칸 카드 ── */}
         <div className="grid grid-cols-3 gap-1 px-3 py-2.5">
           <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
-            <div className="text-[20px] font-bold font-mono" style={{ color: windColor(wSpd) }}>
+            <div className="text-[20px] font-bold font-mono" style={{ color: windTextColor(wSpd) }}>
               {wSpd.toFixed(1)}
             </div>
             <div className="text-label-2 text-fg-disabled font-korean">풍속 (m/s)</div>
           </div>
           <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
-            <div className="text-[20px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>
+            <div className="text-[20px] font-bold font-mono" style={{ color: waveTextColor(wHgt) }}>
               {wHgt.toFixed(1)}
             </div>
             <div className="text-label-2 text-fg-disabled font-korean">파고 (m)</div>
@@ -152,9 +185,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 바람 상세 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            🌬️ 바람 현황
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌬️ 바람 현황</div>
           <div className="flex items-center gap-3 mb-2">
             {/* 풍향 컴파스 */}
             <div className="relative w-[50px] h-[50px] shrink-0">
@@ -202,11 +233,11 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                   y1="25"
                   x2={25 + 14 * Math.sin((wind.direction * Math.PI) / 180)}
                   y2={25 - 14 * Math.cos((wind.direction * Math.PI) / 180)}
-                  stroke={windColor(wSpd)}
+                  stroke="var(--color-accent)"
                   strokeWidth="2"
                   strokeLinecap="round"
                 />
-                <circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
+                <circle cx="25" cy="25" r="3" fill="var(--color-accent)" />
               </svg>
             </div>
             <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1.5 text-label-2">
@@ -222,19 +253,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
               </div>
               <div className="flex justify-between">
                 <span className="text-fg-disabled">1k 최고</span>
-                <span
-                  className="font-mono text-title-4"
-                  style={{ color: windColor(wind.speed_1k) }}
-                >
+                <span className="font-mono text-title-4 text-fg">
                   {Number(wind.speed_1k).toFixed(1)}
                 </span>
               </div>
               <div className="flex justify-between">
                 <span className="text-fg-disabled">3k 평균</span>
-                <span
-                  className="font-mono text-title-4"
-                  style={{ color: windColor(wind.speed_3k) }}
-                >
+                <span className="font-mono text-title-4 text-fg">
                   {Number(wind.speed_3k).toFixed(1)}
                 </span>
               </div>
@@ -248,11 +273,8 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
           <div className="flex items-center gap-2">
             <div className="flex-1 h-[5px] bg-bg-card rounded-full overflow-hidden">
               <div
-                className="h-full rounded-full transition-all"
-                style={{
-                  width: `${Math.min((wSpd / 20) * 100, 100)}%`,
-                  background: windColor(wSpd),
-                }}
+                className="h-full rounded-full transition-all bg-color-accent"
+                style={{ width: `${Math.min((wSpd / 20) * 100, 100)}%` }}
               />
             </div>
             <span className="text-label-2 font-mono text-fg-disabled shrink-0">
@@ -263,24 +285,20 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 파도 상세 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">🌊 파도</div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌊 파도</div>
           <div className="grid grid-cols-4 gap-1">
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono" style={{ color: waveColor(wHgt) }}>
-                {wHgt.toFixed(1)}m
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wHgt.toFixed(1)}m</div>
               <div className="text-caption text-fg-disabled">유의파고</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-danger">
+              <div className="text-title-3 font-bold font-mono text-fg">
                 {wave.maxHeight.toFixed(1)}m
               </div>
               <div className="text-caption text-fg-disabled">최고파고</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-accent">
-                {wave.period}s
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wave.period}s</div>
               <div className="text-caption text-fg-disabled">주기</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
@@ -295,7 +313,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 className="h-full rounded-full transition-all"
                 style={{
                   width: `${Math.min((wHgt / 5) * 100, 100)}%`,
-                  background: waveColor(wHgt),
+                  background: 'var(--color-accent)',
                 }}
               />
             </div>
@@ -307,14 +325,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 수온/공기 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            🌡️ 수온 · 공기
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌡️ 수온 · 공기</div>
           <div className="grid grid-cols-3 gap-1">
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-accent">
-                {wTemp.toFixed(1)}°
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wTemp.toFixed(1)}°</div>
               <div className="text-caption text-fg-disabled">수온</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
@@ -332,9 +346,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 시간별 예보 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            ⏰ 시간별 예보
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">⏰ 시간별 예보</div>
           <div className="grid grid-cols-5 gap-1">
             {forecast.map((f, i) => (
               <div
@@ -353,9 +365,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 천문/조석 ── */}
         {astronomy && (
           <div className="px-3 py-2 border-b border-stroke">
-            <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-              ☀️ 천문 · 조석
-            </div>
+            <div className="text-label-2 text-fg-disabled font-korean mb-2">☀️ 천문 · 조석</div>
             <div className="grid grid-cols-4 gap-1">
               {[
                 { icon: '🌅', label: '일출', value: astronomy.sunrise },
@@ -381,17 +391,21 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 날씨 특보 ── */}
         {alert && (
           <div className="px-3 py-2">
-            <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-              🚨 날씨 특보
-            </div>
+            <div className="text-label-2 text-fg-disabled font-korean mb-2">🚨 날씨 특보</div>
             <div
               className="px-2.5 py-2 rounded border"
-              style={{ background: 'rgba(239,68,68,.06)', borderColor: 'rgba(239,68,68,.2)' }}
+              style={{
+                background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+                borderColor: 'color-mix(in srgb, var(--color-danger) 20%, transparent)',
+              }}
             >
               <div className="flex items-center gap-2 text-label-2">
                 <span
                   className="px-1.5 py-px rounded text-label-2 font-bold"
-                  style={{ background: 'rgba(239,68,68,.15)', color: 'var(--color-danger)' }}
+                  style={{
+                    background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
+                    color: 'var(--color-danger)',
+                  }}
                 >
                   주의
                 </span>
diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx
index 834b510..058a7e4 100755
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@@ -90,7 +90,6 @@ const WEATHER_MAP_CENTER: [number, number] = [127.8, 36.5]; // [lng, lat]
 const WEATHER_MAP_ZOOM = 7;
 
 // deck.gl 오버레이 컴포넌트 (MapLibre 컨트롤로 등록)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DeckGLOverlay({ layers }: { layers: Layer[] }) {
   const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
   overlay.setProps({ layers });
@@ -178,7 +177,7 @@ function WeatherMapInner({
             {/* 핀 꼬리 */}
             <div className="w-px h-3 bg-color-accent" />
             {/* 좌표 라벨 */}
-            <div className="px-2 py-1 bg-bg-base/90 border border-color-accent rounded text-caption text-color-accent whitespace-nowrap backdrop-blur-sm">
+            <div className="px-2 py-1 bg-bg-base border border-color-accent rounded text-caption text-color-accent whitespace-nowrap shadow-md">
               {clickedLocation.lat.toFixed(3)}°N&nbsp;{clickedLocation.lon.toFixed(3)}°E
             </div>
           </div>
@@ -295,7 +294,7 @@ export function WeatherView() {
       {/* Main Map Area */}
       <div className="flex-1 relative flex flex-col overflow-hidden">
         {/* Tab Navigation */}
-        <div className="flex items-center border-b border-stroke bg-bg-surface shrink-0">
+        <div className="flex items-center border-b border-stroke bg-bg-surface shrink-0 pt-2 pb-2">
           <div className="flex items-center gap-2 px-6">
             {(['0', '3', '6', '9'] as TimeOffset[]).map((offset) => (
               <button
@@ -356,10 +355,7 @@ export function WeatherView() {
           </Map>
 
           {/* 레이어 컨트롤 */}
-          <div
-            className="absolute top-4 left-4 bg-bg-surface/85 border border-stroke rounded-md backdrop-blur-sm z-10"
-            style={{ padding: '6px 10px' }}
-          >
+          <div className="absolute top-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5">
             <div className="text-caption font-semibold text-fg mb-1.5 font-korean">기상 레이어</div>
             <div className="flex flex-col gap-1">
               <label className="flex items-center gap-1.5 cursor-pointer">
@@ -420,17 +416,12 @@ export function WeatherView() {
           </div>
 
           {/* 범례 */}
-          <div
-            className="absolute bottom-4 left-4 bg-bg-surface/85 border border-stroke rounded-md backdrop-blur-sm z-10"
-            style={{ padding: '6px 10px', maxWidth: 180 }}
-          >
-            <div className="text-caption font-semibold text-fg mb-1.5 font-korean">기상 범례</div>
-            <div className="flex flex-col gap-1.5" style={{ fontSize: 8 }}>
+          <div className="absolute bottom-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5 max-w-[180px]">
+            <div className="text-caption text-fg mb-1.5 font-korean">기상 범례</div>
+            <div className="flex flex-col gap-1.5 text-[8px]">
               {/* 바람 */}
               <div>
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  바람 (m/s)
-                </div>
+                <div className="text-fg-sub mb-0.5">바람 (m/s)</div>
                 <div className="flex items-center gap-px h-[6px] rounded-sm overflow-hidden mb-0.5">
                   <div className="flex-1 h-full" style={{ background: '#6271b7' }} />
                   <div className="flex-1 h-full" style={{ background: '#39a0f6' }} />
@@ -441,7 +432,7 @@ export function WeatherView() {
                   <div className="flex-1 h-full" style={{ background: '#f05421' }} />
                   <div className="flex-1 h-full" style={{ background: '#b41e46' }} />
                 </div>
-                <div className="flex justify-between text-fg-disabled" style={{ fontSize: 7 }}>
+                <div className="flex justify-between text-fg-disabled text-[7px]">
                   <span>3</span>
                   <span>5</span>
                   <span>7</span>
@@ -453,16 +444,14 @@ export function WeatherView() {
               </div>
               {/* 해류 */}
               <div className="pt-1 border-t border-stroke">
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  해류 (m/s)
-                </div>
+                <div className="text-fg-sub mb-0.5">해류 (m/s)</div>
                 <div className="flex items-center gap-px h-[6px] rounded-sm overflow-hidden mb-0.5">
                   <div className="flex-1 h-full" style={{ background: 'rgb(59, 130, 246)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(6, 182, 212)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(34, 197, 94)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(249, 115, 22)' }} />
                 </div>
-                <div className="flex justify-between text-fg-disabled" style={{ fontSize: 7 }}>
+                <div className="flex justify-between text-fg-disabled text-[7px]">
                   <span>0.2</span>
                   <span>0.4</span>
                   <span>0.6</span>
@@ -471,23 +460,18 @@ export function WeatherView() {
               </div>
               {/* 파고 */}
               <div className="pt-1 border-t border-stroke">
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  파고 (m)
-                </div>
+                <div className="text-fg-sub mb-0.5">파고 (m)</div>
                 <div className="flex items-center gap-1">
-                  <div className="w-2 h-2 rounded-full bg-blue-500" />
+                  <div className="w-2 h-2 rounded-full bg-color-info" />
                   <span className="text-fg-disabled">&lt;1.5 낮음</span>
-                  <div className="w-2 h-2 rounded-full bg-orange-500 ml-1" />
+                  <div className="w-2 h-2 rounded-full bg-color-warning ml-1" />
                   <span className="text-fg-disabled">~2.5</span>
-                  <div className="w-2 h-2 rounded-full bg-red-500 ml-1" />
+                  <div className="w-2 h-2 rounded-full bg-color-danger ml-1" />
                   <span className="text-fg-disabled">&gt;2.5</span>
                 </div>
               </div>
             </div>
-            <div
-              className="mt-1 pt-1 border-t border-stroke text-fg-disabled font-korean"
-              style={{ fontSize: 7 }}
-            >
+            <div className="mt-1 pt-1 border-t border-stroke text-fg-disabled text-[7px] font-korean">
               💡 지도 클릭 → 기상 예보 확인
             </div>
           </div>