From c7b0b7a3c2f4a4005c0e8d7ce204f309dc43d18a Mon Sep 17 00:00:00 2001
From: leedano <dnlee@gcsc.co.kr>
Date: Thu, 2 Apr 2026 16:21:58 +0900
Subject: [PATCH] =?UTF-8?q?feat(design):=20HNS/=EC=98=88=EC=B8=A1/?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=ED=83=AD=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=ED=8F=B0=ED=8A=B8=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=ED=86=A0=ED=81=B0=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |    4 +
 docs/DESIGN-SYSTEM.md                         |  155 +
 frontend/index.html                           |    4 +-
 .../src/common/components/map/MapView.tsx     |   81 +-
 frontend/src/common/styles/base.css           |    6 +
 frontend/src/common/styles/components.css     |   37 +-
 .../hns/components/HNSAnalysisListTable.tsx   |  116 +-
 .../src/tabs/hns/components/HNSLeftPanel.tsx  |  952 ++-
 .../tabs/hns/components/HNSRecalcModal.tsx    |   16 +-
 .../src/tabs/hns/components/HNSRightPanel.tsx |   85 +-
 .../tabs/hns/components/HNSScenarioView.tsx   |  229 +-
 .../tabs/hns/components/HNSSubstanceView.tsx  |  884 +-
 .../src/tabs/hns/components/HNSTheoryView.tsx | 7601 ++++++++++++++---
 frontend/src/tabs/hns/components/HNSView.tsx  |   36 +-
 .../components/AnalysisListTable.tsx          |   86 +-
 .../components/BoomDeploymentTheoryView.tsx   |  520 +-
 .../components/OilSpillTheoryView.tsx         | 1620 ++--
 .../prediction/components/OilSpillView.tsx    |    2 +-
 .../src/tabs/rescue/components/RescueView.tsx |  482 +-
 frontend/tailwind.config.js                   |    5 +
 20 files changed, 8780 insertions(+), 4141 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9a71415..a7b64e4 100755
--- a/.gitignore
+++ b/.gitignore
@@ -99,3 +99,7 @@ frontend/public/hns-manual/images/
 # Lock files (keep for reproducible builds)
 !frontend/package-lock.json
 !backend/package-lock.json
+
+
+# mcp
+.mcp.json
\ No newline at end of file
diff --git a/docs/DESIGN-SYSTEM.md b/docs/DESIGN-SYSTEM.md
index d26224d..c03f287 100644
--- a/docs/DESIGN-SYSTEM.md
+++ b/docs/DESIGN-SYSTEM.md
@@ -7,6 +7,158 @@ WING-OPS UI 디자인 시스템의 비주얼 레퍼런스 카탈로그.
 
 ---
 
+## 버전 히스토리
+
+### v1.1 — 시맨틱 토큰 & 테마 시스템 (2026-03-28~)
+
+> 브랜치: `feature/predict-develop`, `feature/design-system-font`
+
+v1.0의 축약형 토큰 시스템을 시맨틱 네이밍으로 전면 전환하고, 다크/라이트 테마 전환 기능을 도입한 구조적 리팩토링.
+
+#### 변경된 점
+
+| 항목 | v1.0 | v1.1 |
+|------|------|------|
+| 토큰 네이밍 | 축약형 (`--bg0`, `--t1`, `--cyan`) | 시맨틱 (`--bg-base`, `--fg-default`, `--color-accent`) |
+| 폰트 | Outfit + Noto Sans KR + JetBrains Mono (3종) | PretendardGOV 단일 폰트 (4웨이트) |
+| 테마 | 다크 모드 전용 (하드코딩) | 다크/라이트 전환 지원 (`data-theme` 속성) |
+| 프리미티브 팔레트 | 7그룹 11단계 (Navy/Cyan/Blue/Red/Green/Orange/Yellow, 00~100) | 6그룹 10단계 (Gray/Blue/Green/Yellow/Red/Purple, 100~1000) |
+| 텍스트 대비 | `--t2: #b0b8cc`, `--t3: #8690a6` | `--fg-sub: #c0c8dc`, `--fg-disabled: #9ba3b8` (대비 향상) |
+| 버튼 스타일 | `.prd-btn.pri` 그라데이션 (cyan→blue) | 아웃라인/고스트 스타일 |
+| Tailwind 컬러 키 | 하드코딩 hex (`bg.0`, `text.1`, `primary.cyan`) | CSS 변수 참조 (`bg.base`, `fg.DEFAULT`, `color.accent`) |
+| 폰트 유틸리티 | 하드코딩 (`font-family: 'JetBrains Mono'`) | CSS 변수 경유 (`font-family: var(--font-mono)`) |
+
+#### 토큰 마이그레이션 매핑
+
+| v1.0 | v1.1 | 설명 |
+|------|------|------|
+| `--bg0` | `--bg-base` | 페이지 배경 |
+| `--bg1` | `--bg-surface` | 사이드바, 패널 |
+| `--bg2` | `--bg-elevated` | 테이블 헤더, 상위 요소 |
+| `--bg3` | `--bg-card` | 카드 배경 |
+| `--bgH` | `--bg-surface-hover` | 호버 상태 |
+| `--bd` | `--stroke-default` | 기본 구분선 |
+| `--bdL` | `--stroke-light` | 연한 구분선 |
+| `--t1` | `--fg-default` | 기본 텍스트 |
+| `--t2` | `--fg-sub` | 보조 텍스트 |
+| `--t3` | `--fg-disabled` | 비활성 텍스트 |
+| `--cyan` | `--color-accent` | 주요 강조 |
+| `--blue` | `--color-info` | 정보, 링크 |
+| `--red` | `--color-danger` | 위험, 삭제 |
+| `--orange` | `--color-warning` | 주의 |
+| `--yellow` | `--color-caution` | 경고 |
+| `--green` | `--color-success` | 성공, 정상 |
+| `--purple` | `--color-tertiary` | 3차 강조 |
+| `--boom` | `--color-boom` | 오일붐 전용 |
+| `--fK` | `--font-korean` | 한국어 폰트 스택 |
+| `--fM` | `--font-mono` | 모노 폰트 스택 |
+| `--rS` | `--radius-sm` | 소형 border radius |
+| `--rM` | `--radius-md` | 중형 border radius |
+
+#### 추가된 기능
+
+- **다크/라이트 테마 전환**: `themeStore.ts` (Zustand) + `data-theme` DOM 속성 + FOUC 방지 인라인 스크립트
+- **시맨틱 오버레이 토큰**: `--hover-overlay`, `--dropdown-bg` (테마별 불투명도 차별화)
+- **Navy 액센트 토큰**: `--color-navy`, `--color-navy-hover`, `--color-accent-muted`
+- **정적 컬러 토큰**: `--static-black`, `--static-white` (테마 무관 고정값)
+- **타이포그래피 스케일 (17개 토큰)**: Display 3종, Heading 3종, Title 6종, Body 2종, Label 2종, Caption 1종
+- **Letter-spacing 토큰 5종**: `--letter-spacing-display` (0.06em) ~ `--letter-spacing-label` (0.04em)
+- **Font weight 토큰 4종**: thin(300) / regular(400) / medium(500) / bold(700)
+- **Line height 토큰 4종**: tight(1.3) / snug(1.4) / normal(1.5) / relaxed(1.6)
+- **Tailwind tracking 유틸리티**: `tracking-display`, `tracking-heading`, `tracking-body`, `tracking-navigation`, `tracking-label`
+- **라이트 테마 컴포넌트 오버라이드**: CCTV 팝업, 날짜피커, 타임라인, 콤보박스, 좌표 표시 등
+- **폰트 렌더링 최적화**: `-webkit-font-smoothing: antialiased`, `text-rendering: optimizeLegibility`
+
+#### 업데이트된 부분
+
+- 92개+ 컴포넌트 파일의 토큰 마이그레이션 (축약형 → 시맨틱)
+- Stitch MCP 프로젝트 참조 제거 (독립 토큰 시스템으로 전환)
+- DESIGN-SYSTEM.md 문서 전면 재작성
+
+---
+
+### v1.0 — 초기 디자인 시스템 (2026-03-24~25)
+
+> 브랜치: `feature/stitch-mcp` | 도구: Google Stitch MCP
+
+WING-OPS 전용 디자인 시스템의 첫 구축. CSS 변수 기반 토큰 시스템, `.wing-*` 컴포넌트 클래스, 라이브 카탈로그 뷰어를 도입.
+
+#### 컬러 시스템
+
+- **프리미티브 팔레트**: 7개 그룹 (Navy/Cyan/Blue/Red/Green/Orange/Yellow), 각 11단계 스케일 (00~100)
+- **시맨틱 컬러**: 축약형 CSS 변수 — Background(`--bg0`~`--bgH`), Text(`--t1`~`--t3`), Border(`--bd`, `--bdL`)
+- **액센트 컬러**: `--cyan`(#06b6d4), `--blue`(#3b82f6), `--red`, `--green`, `--orange`, `--yellow`, `--purple`
+- **특수 컬러**: `--boom`(#f59e0b) — 오일붐 전용 Amber
+
+#### 타이포그래피
+
+- **3종 폰트 패밀리**: Outfit (영문 본문), Noto Sans KR (한국어), JetBrains Mono (좌표/수치)
+- **10개 `.wing-*` 타이포 클래스**: `.wing-title`(15px) ~ `.wing-badge`(9px)
+
+#### 컴포넌트 클래스
+
+| 카테고리 | 클래스 |
+|----------|--------|
+| 레이아웃 셸 | `.wing-panel`, `.wing-panel-scroll`, `.wing-header-bar`, `.wing-sidebar` |
+| 컨테이너 | `.wing-card`, `.wing-card-sm`, `.wing-section` |
+| 버튼 | `.wing-btn`, `.wing-btn-primary` (cyan→blue 그라데이션), `-secondary`, `-outline`, `-pdf`, `-danger` |
+| 입력 | `.wing-input` (cyan 포커스 링) |
+| 테이블 | `.wing-table`, `.wing-th`, `.wing-td`, `.wing-tr-hover` |
+| 탭 | `.wing-tab-bar`, `.wing-tab` (cyan 틴트 + 보더 활성) |
+| 모달 | `.wing-overlay` (블러 백드롭), `.wing-modal`, `.wing-modal-header` |
+| 유틸리티 | `.wing-divider`, `.wing-kv-row`, `.wing-kv-label`, `.wing-kv-value` |
+| 뱃지/아이콘 | `.wing-badge`, `.wing-icon-badge`, `.wing-icon-badge-sm` |
+
+#### 특수 컴포넌트
+
+| 영역 | 클래스 접두사 | 설명 |
+|------|--------------|------|
+| 예측 패널 | `.prd-*` | 폼 입력, 버튼, 맵 버튼 |
+| 콤보박스 | `.combo-*` | 커스텀 드롭다운 (검색 + 리스트) |
+| 타임라인 | `.tlb`, `.tlt`, `.tlr`, `.tlth` | 지도 하단 재생 컨트롤 |
+| 레이어 트리 | `.lyr-*` | 3단계 접이식 레이어 (색상 스와치 + 투명도) |
+| 오일붐 | `.boom-*` | 오일붐 드로잉 인디케이터 |
+| 역추적 | `.bt-*` | 역추적 리플레이 마커 + 속도 버튼 |
+| HNS | `.hns-scn-card` | HNS 시나리오 선택 카드 |
+| 모델 칩 | `.prd-mc` | 모델 선택 칩 (활성 `✓` 인디케이터) |
+
+#### 레이아웃
+
+- **데스크톱 전용** (≥ 1280px), Tablet/Mobile 미지원
+- **7단계 z-index 레이어**: Base(0) ~ Tooltip(60)
+- **Spacing**: Tailwind 기본 스케일 사용 (`gap-1`~`gap-8`)
+
+#### Border Radius
+
+- `rounded-sm`: **6px** (커스텀 오버라이드)
+- `rounded-md`: **10px** (커스텀 오버라이드)
+- 나머지 Tailwind 기본값 유지
+
+#### 애니메이션
+
+`fadeIn`, `fadeSlideDown`, `pulse-dot`, `pulse-border`, `comboIn`, `lyrPopIn`, `bt-collision-pulse`
+
+#### 디자인 카탈로그
+
+`/design` 라우트에 라이브 카탈로그 뷰어 배포:
+- **Foundations 탭**: Color Palette, Typography, Radius, Layout, Overview
+- **Components 탭**: Button, TextField, Overview (Button Catalog, Card, Icon Badge 섹션)
+- **다크/라이트 모드 토글** 내장
+- **테마 엔진**: `designTheme.ts` — 타입 안전한 `DesignTheme` 인터페이스
+
+#### SVG 아이콘 에셋
+
+23개 커스텀 아이콘 (`wing-` 접두사): `wing-anchor`, `wing-cargo`, `wing-chart-bar`, `wing-color-palette`, `wing-documentation`, `wing-elevation`, `wing-foundations`, `wing-layout-grid`, `wing-notification`, `wing-pdf-file`, `wing-settings`, `wing-typography`, `wing-wave-graph` 등
+
+#### Stitch MCP 연동
+
+Google Stitch 프로젝트 7개 스크린 참조:
+- Design Tokens, Component Catalog (Buttons/Badges), Form Components
+- Table & List Patterns, Modal Catalog, Operational Shell (Layout)
+- Container & Navigation
+
+---
+
 ## 테마 (Theme)
 
 ### 테마 전환 메커니즘
@@ -121,6 +273,7 @@ Primitive Tokens (정적)        Semantic Tokens (테마 반응형)
 | CSS 변수 | Tailwind 클래스 | Hex | 용도 |
 |----------|----------------|-----|------|
 | `--color-accent` | `text-color-accent` | `#06b6d4` | 주요 강조 (Cyan) |
+| `--color-accent-muted` | `bg-color-accent-muted` | `#0e7490` / `#0891b2`(light) | 차분한 강조 (버튼 배경 등) |
 | `--color-info` | `text-color-info` | `#3b82f6` | 정보, 링크 (Blue) |
 | `--color-tertiary` | `text-color-tertiary` | `#a855f7` | 3차 강조 (Purple) |
 | `--color-danger` | `text-color-danger` | `#ef4444` | 위험, 삭제 (Red) |
@@ -129,6 +282,8 @@ Primitive Tokens (정적)        Semantic Tokens (테마 반응형)
 | `--color-success` | `text-color-success` | `#22c55e` | 성공, 정상 (Green) |
 | `--color-boom` | `text-color-boom` | `#f59e0b` | 오일붐 전용 (Amber) |
 | `--color-boom-hover` | — | `#fbbf24` | 오일붐 호버 |
+| `--color-navy` | `bg-color-navy` | `#1e40af` / `#1d4ed8`(light) | Navy 버튼 배경 |
+| `--color-navy-hover` | `bg-color-navy-hover` | `#1d4ed8` / `#2563eb`(light) | Navy 호버 |
 
 #### Static Colors
 
diff --git a/frontend/index.html b/frontend/index.html
index d97625a..c8e4e5e 100755
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -10,7 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
-    <title>frontend</title>
+    <title>해양환경 위기대응 통합지원 시스템</title>
     <script>
       document.documentElement.setAttribute(
         'data-theme',
diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index 72c91a3..7255be6 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -547,7 +547,9 @@ function MapCaptureSetup({
             composite.width = Math.round(src.width * scale);
             composite.height = Math.round(src.height * scale);
             const ctx = composite.getContext('2d')!;
-            ctx.fillStyle = '#0f1117';
+            ctx.fillStyle =
+              getComputedStyle(document.documentElement).getPropertyValue('--bg-base').trim() ||
+              '#0f1117';
             ctx.fillRect(0, 0, composite.width, composite.height);
             ctx.drawImage(src, 0, 0, composite.width, composite.height);
             resolve(composite.toDataURL('image/jpeg', 0.82));
@@ -1037,14 +1039,6 @@ export function MapView({
         ...dispersionHeatmap.filter((p) => p.concentration > 0.01).map((p) => p.concentration),
       );
       const filtered = dispersionHeatmap.filter((p) => p.concentration > 0.01);
-      console.log(
-        '[MapView] HNS 히트맵:',
-        dispersionHeatmap.length,
-        '→ filtered:',
-        filtered.length,
-        'maxConc:',
-        maxConc.toFixed(2),
-      );
 
       if (filtered.length > 0) {
         // 경위도 바운드 계산
@@ -1108,10 +1102,11 @@ export function MapView({
           ctx.fill();
         }
 
+        const imageUrl = canvas.toDataURL();
         result.push(
           new BitmapLayer({
             id: 'hns-dispersion-bitmap',
-            image: canvas,
+            image: imageUrl,
             bounds: [minLon, minLat, maxLon, maxLat],
             opacity: 1.0,
             pickable: false,
@@ -1690,21 +1685,15 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
   return (
     <div className="absolute top-[80px] left-[10px] z-10">
       <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"
-        >
+        <button onClick={() => map?.zoomIn()} className="map-ctrl-btn">
           +
         </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"
-        >
+        <button onClick={() => map?.zoomOut()} className="map-ctrl-btn">
           −
         </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-[10px]"
+          className="map-ctrl-btn text-[10px]"
         >
           &#x1F3AF;
         </button>
@@ -1732,16 +1721,16 @@ function MapLegend({
 
   if (dispersionResult && incidentCoord) {
     return (
-      <div className="absolute top-4 right-4 bg-[rgba(18,25,41,0.95)] backdrop-blur-xl border border-stroke rounded-lg min-w-[200px] z-[20]">
+      <div className="absolute top-4 right-4 bg-bg-surface/95 backdrop-blur-xl border border-stroke rounded-lg min-w-[200px] z-[20]">
         {/* 헤더 + 최소화 버튼 */}
         <div
           className="flex items-center justify-between px-3.5 pt-3 pb-1 cursor-pointer"
           onClick={() => setMinimized(!minimized)}
         >
-          <span className="text-[10px] font-bold text-fg-disabled uppercase tracking-wider">
+          <span className="text-label-2 font-bold text-fg-disabled uppercase tracking-label">
             범례
           </span>
-          <span className="text-[10px] text-fg-disabled hover:text-fg transition-colors">
+          <span className="text-label-2 text-fg-disabled hover:text-fg transition-colors">
             {minimized ? '▶' : '▼'}
           </span>
         </div>
@@ -1750,53 +1739,49 @@ function MapLegend({
             <div className="flex items-center gap-1.5 mb-2.5">
               <div className="text-base">📍</div>
               <div>
-                <h4 className="text-[11px] font-bold text-color-warning">사고 위치</h4>
-                <div className="text-[8px] text-fg-disabled font-mono">
+                <h4 className="text-label-2 font-bold text-color-warning">사고 위치</h4>
+                <div className="text-caption text-fg-disabled font-mono">
                   {incidentCoord.lat.toFixed(4)}°N, {incidentCoord.lon.toFixed(4)}°E
                 </div>
               </div>
             </div>
             <div
-              className="text-[9px] text-fg-sub mb-2 rounded"
+              className="text-caption text-fg-sub mb-2 rounded"
               style={{ background: 'rgba(249,115,22,0.08)', padding: '8px' }}
             >
               <div className="flex justify-between mb-[3px]">
                 <span className="text-fg-disabled">물질</span>
-                <span className="font-semibold text-color-warning">
-                  {dispersionResult.substance}
-                </span>
+                <span className="font-medium text-color-warning">{dispersionResult.substance}</span>
               </div>
               <div className="flex justify-between mb-[3px]">
                 <span className="text-fg-disabled">풍향</span>
-                <span className="font-semibold font-mono">
-                  SW {dispersionResult.windDirection}°
-                </span>
+                <span className="font-medium font-mono">SW {dispersionResult.windDirection}°</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-fg-disabled">확산 구역</span>
-                <span className="font-semibold text-color-accent">
+                <span className="font-medium text-color-accent">
                   {dispersionResult.zones.length}개
                 </span>
               </div>
             </div>
             <div>
-              <h5 className="text-[9px] font-bold text-fg-disabled mb-2">위험 구역</h5>
+              <h5 className="text-caption font-bold text-fg-disabled mb-2">위험 구역</h5>
               <div className="flex flex-col gap-1.5">
-                <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+                <div className="flex items-center gap-2 text-label-2 text-fg-sub">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{ background: 'rgba(239,68,68,0.7)' }}
                   />
                   <span>치명적 위험 구역 (AEGL-3)</span>
                 </div>
-                <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+                <div className="flex items-center gap-2 text-label-2 text-fg-sub">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{ background: 'rgba(249,115,22,0.7)' }}
                   />
                   <span>높은 위험 구역 (AEGL-2)</span>
                 </div>
-                <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+                <div className="flex items-center gap-2 text-label-2 text-fg-sub">
                   <div
                     className="w-3 h-3 rounded-full"
                     style={{ background: 'rgba(234,179,8,0.7)' }}
@@ -1809,8 +1794,8 @@ function MapLegend({
               className="flex items-center gap-1.5 mt-2 rounded"
               style={{ padding: '6px', background: 'rgba(168,85,247,0.08)' }}
             >
-              <div className="text-xs">🧭</div>
-              <span className="text-[9px] text-fg-disabled">풍향 (방사형)</span>
+              <div className="text-label-1">🧭</div>
+              <span className="text-caption text-fg-disabled">풍향 (방사형)</span>
             </div>
           </div>
         )}
@@ -1821,7 +1806,7 @@ function MapLegend({
   if (oilTrajectory.length > 0) {
     return (
       <div
-        className="absolute top-4 right-4 bg-[rgba(18,25,41,0.92)] backdrop-blur-xl border border-stroke rounded-md z-[20]"
+        className="absolute top-4 right-4 bg-bg-surface/95 backdrop-blur-xl border border-stroke rounded-md z-[20]"
         style={{ minWidth: 155 }}
       >
         {/* 헤더 + 접기/펼치기 */}
@@ -1829,8 +1814,8 @@ function MapLegend({
           className="flex items-center justify-between px-3 py-2 cursor-pointer select-none"
           onClick={() => setMinimized(!minimized)}
         >
-          <span className="text-[10px] font-bold text-fg-sub font-korean">범례</span>
-          <span className="text-[9px] text-fg-disabled hover:text-fg transition-colors ml-3">
+          <span className="text-label-2 font-bold text-fg-sub font-korean">범례</span>
+          <span className="text-caption text-fg-disabled hover:text-fg transition-colors ml-3">
             {minimized ? '▶' : '▼'}
           </span>
         </div>
@@ -1839,7 +1824,7 @@ function MapLegend({
           <div className="px-3 pb-2.5 flex flex-col gap-[5px]">
             {/* 모델별 색상 */}
             {Array.from(selectedModels).map((model) => (
-              <div key={model} className="flex items-center gap-2 text-[10px] text-fg-sub">
+              <div key={model} className="flex items-center gap-2 text-label-2 text-fg-sub">
                 <div
                   className="w-[14px] h-[3px] rounded-sm"
                   style={{ background: MODEL_COLORS[model] }}
@@ -1848,14 +1833,14 @@ function MapLegend({
               </div>
             ))}
             {/* 앙상블 */}
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="w-[14px] h-[3px] rounded-sm" style={{ background: '#a855f7' }} />
               <span className="font-korean">앙상블</span>
             </div>
 
             {/* 오일펜스 라인 */}
             <div className="h-px bg-border my-0.5" />
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="flex gap-px">
                 <div className="w-[4px] h-[4px] rounded-full bg-[#f97316]" />
                 <div className="w-[4px] h-[4px] rounded-full bg-[#f97316]" />
@@ -1866,19 +1851,19 @@ function MapLegend({
 
             {/* 도달시간별 선종 */}
             <div className="h-px bg-border my-0.5" />
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="w-[14px] h-[3px] rounded-sm bg-[#ef4444]" />
               <span className="font-korean">위험 (&lt;6h)</span>
             </div>
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="w-[14px] h-[3px] rounded-sm bg-[#f97316]" />
               <span className="font-korean">경고 (6~12h)</span>
             </div>
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="w-[14px] h-[3px] rounded-sm bg-[#eab308]" />
               <span className="font-korean">주의 (12~24h)</span>
             </div>
-            <div className="flex items-center gap-2 text-[10px] text-fg-sub">
+            <div className="flex items-center gap-2 text-label-2 text-fg-sub">
               <div className="w-[14px] h-[3px] rounded-sm bg-[#22c55e]" />
               <span className="font-korean">안전</span>
             </div>
diff --git a/frontend/src/common/styles/base.css b/frontend/src/common/styles/base.css
index d467b91..a57e18b 100644
--- a/frontend/src/common/styles/base.css
+++ b/frontend/src/common/styles/base.css
@@ -46,6 +46,7 @@
     /* color — Palette */
     --color-info: #3b82f6;
     --color-accent: #06b6d4;
+    --color-accent-muted: #0e7490;
     --color-danger: #ef4444;
     --color-warning: #f97316;
     --color-caution: #eab308;
@@ -53,6 +54,8 @@
     --color-tertiary: #a855f7;
     --color-boom: #f59e0b;
     --color-boom-hover: #fbbf24;
+    --color-navy: #1e40af;
+    --color-navy-hover: #1d4ed8;
     /* font */
     --font-korean:
       'PretendardGOV', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
@@ -197,6 +200,9 @@
     --fg-disabled: #94a3b8;
     --hover-overlay: rgba(0, 0, 0, 0.04);
     --dropdown-bg: rgba(255, 255, 255, 0.97);
+    --color-accent-muted: #0891b2;
+    --color-navy: #1d4ed8;
+    --color-navy-hover: #2563eb;
   }
 
   * {
diff --git a/frontend/src/common/styles/components.css b/frontend/src/common/styles/components.css
index 7465c07..0bd81c1 100644
--- a/frontend/src/common/styles/components.css
+++ b/frontend/src/common/styles/components.css
@@ -372,6 +372,41 @@
     box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.3);
   }
 
+  /* Map Zoom/Reset Controls */
+  .map-ctrl-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    font-weight: 600;
+    transition: all 0.15s;
+    background: rgba(15, 21, 36, 0.75);
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .map-ctrl-btn:hover {
+    background: rgba(15, 21, 36, 0.9);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.25);
+  }
+
+  [data-theme='light'] .map-ctrl-btn {
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  [data-theme='light'] .map-ctrl-btn:hover {
+    background: rgba(255, 255, 255, 0.95);
+    color: rgba(0, 0, 0, 0.9);
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
   /* ═══ Coordinate Display ═══ */
   .cod {
     position: absolute;
@@ -951,7 +986,7 @@
     background: transparent;
     color: #8b949e;
     font-family: var(--font-korean);
-    font-size: 9px;
+    font-size: var(--font-size-label-2);
     font-weight: 600;
     cursor: pointer;
     text-align: center;
diff --git a/frontend/src/tabs/hns/components/HNSAnalysisListTable.tsx b/frontend/src/tabs/hns/components/HNSAnalysisListTable.tsx
index 5e718dc..e7bad63 100755
--- a/frontend/src/tabs/hns/components/HNSAnalysisListTable.tsx
+++ b/frontend/src/tabs/hns/components/HNSAnalysisListTable.tsx
@@ -15,9 +15,9 @@ const RISK_LABEL: Record<string, string> = {
 };
 
 const RISK_STYLE: Record<string, { bg: string; color: string }> = {
-  CRITICAL: { bg: 'rgba(239,68,68,0.2)', color: 'var(--color-danger)' },
-  HIGH: { bg: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' },
-  MEDIUM: { bg: 'rgba(249,115,22,0.15)', color: 'var(--color-warning)' },
+  CRITICAL: { bg: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' },
+  HIGH: { bg: 'rgba(249,115,22,0.15)', color: 'var(--color-warning)' },
+  MEDIUM: { bg: 'rgba(234,179,8,0.15)', color: 'var(--color-caution)' },
   LOW: { bg: 'rgba(34,197,94,0.15)', color: 'var(--color-success)' },
 };
 
@@ -101,31 +101,28 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
   return (
     <div className="flex flex-col h-full bg-bg-base">
       {/* Header */}
-      <div className="px-5 py-4 border-b border-stroke flex justify-between items-center bg-bg-surface">
-        <div className="flex items-center gap-3">
-          <div className="text-base font-bold flex items-center gap-2">
-            <span className="text-[18px]">📋</span>
-            HNS 대기확산 분석 목록
-          </div>
-          <span className="text-[10px] text-fg-disabled bg-bg-card font-mono px-[10px] py-1 rounded-xl">
-            총 {analyses.length}건
-          </span>
+      <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
+        <div>
+          <h1 className="text-heading-3 font-bold text-fg">HNS 대기확산 분석 목록</h1>
+          <p className="text-title-3 text-fg-disabled mt-1">총 {analyses.length}건</p>
         </div>
-        <div className="flex gap-2 items-center">
-          <input
-            type="text"
-            placeholder="검색..."
-            className="bg-bg-card border border-stroke rounded-sm text-[11px] px-3 py-2 w-[200px]"
-          />
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="검색..."
+              className="w-64 px-4 py-2 text-title-3 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
+            />
+          </div>
           <button
             onClick={() => onTabChange('analysis')}
-            className="text-color-warning text-[11px] font-semibold cursor-pointer flex items-center gap-1 px-4 py-2 rounded-sm"
+            className="px-4 py-2 text-title-3 font-semibold rounded-sm cursor-pointer text-color-accent"
             style={{
-              border: '1px solid rgba(249,115,22,0.3)',
-              background: 'linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.1))',
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
             }}
           >
-            <span className="text-sm">+</span> 새 분석
+            + 새 분석
           </button>
         </div>
       </div>
@@ -133,69 +130,69 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
       {/* Table */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="text-center text-fg-disabled text-[12px] py-20">로딩 중...</div>
+          <div className="text-center text-fg-disabled text-label-1 py-20">로딩 중...</div>
         ) : (
-          <table className="w-full text-[11px] border-collapse">
+          <table className="w-full text-label-2 border-collapse">
             <thead className="sticky top-0 z-10">
               <tr className="bg-bg-elevated border-b border-stroke">
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 w-[50px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   번호
                 </th>
-                <th className="text-left text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[180px]">
+                <th className="text-left text-label-1 font-bold text-fg-disabled px-4 py-3">
                   분석명
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[100px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   물질
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[130px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   사고일시
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[100px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   분석날짜
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[120px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   사고지점
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[90px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   유출량
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[80px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   알고리즘
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 w-[70px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   예측시간
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 w-[70px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   <div className="flex flex-col items-center gap-0.5">
                     <span>AEGL-3</span>
-                    <span className="text-[8px] text-fg-disabled">생명위협</span>
+                    <span className="text-caption text-fg-disabled">생명위협</span>
                   </div>
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 w-[70px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   <div className="flex flex-col items-center gap-0.5">
                     <span>AEGL-2</span>
-                    <span className="text-[8px] text-fg-disabled">건강피해</span>
+                    <span className="text-caption text-fg-disabled">건강피해</span>
                   </div>
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 w-[70px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   <div className="flex flex-col items-center gap-0.5">
                     <span>AEGL-1</span>
-                    <span className="text-[8px] text-fg-disabled">불쾌감</span>
+                    <span className="text-caption text-fg-disabled">불쾌감</span>
                   </div>
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[80px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   위험등급
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[90px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   피해반경
                 </th>
-                <th className="text-center text-[10px] font-semibold text-fg-sub px-4 py-3 min-w-[120px]">
+                <th className="text-center text-label-1 font-bold text-fg-disabled px-4 py-3">
                   분석자
                 </th>
               </tr>
             </thead>
             <tbody>
-              {analyses.map((item, index) => {
+              {analyses.map((item) => {
                 const rslt = item.rsltData as Record<string, unknown> | null;
                 const isLocal = !!(item as HnsAnalysisItem & { _isLocal?: boolean })._isLocal;
                 const riskLabel = RISK_LABEL[item.riskCd || ''] || item.riskCd || '—';
@@ -213,19 +210,10 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
                 return (
                   <tr
                     key={item.hnsAnlysSn}
-                    className="border-b border-stroke cursor-pointer"
+                    className="hover:bg-bg-elevated transition-colors cursor-pointer group"
                     onClick={() =>
                       onSelectAnalysis?.(item.hnsAnlysSn, isLocal && rslt ? rslt : undefined)
                     }
-                    style={{
-                      transition: 'background 0.15s',
-                      background: index % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.01)',
-                    }}
-                    onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-elevated)')}
-                    onMouseLeave={(e) =>
-                      (e.currentTarget.style.background =
-                        index % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.01)')
-                    }
                   >
                     <td className="text-center text-fg-disabled font-mono px-4 py-3">
                       {item.hnsAnlysSn}
@@ -233,23 +221,23 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
                     <td className="font-medium px-4 py-3">{item.anlysNm}</td>
                     <td className="text-center px-4 py-3">
                       <span
-                        className="text-[9px] font-semibold text-color-warning px-2 py-1 rounded"
-                        style={{ background: 'rgba(249,115,22,0.12)' }}
+                        className="text-caption font-semibold text-color-accent px-2 py-1 rounded"
+                        style={{ background: 'rgba(6,182,212,0.12)' }}
                       >
                         {substanceTag(item.sbstNm)}
                       </span>
                     </td>
-                    <td className="text-center text-fg-sub font-mono text-[10px] px-4 py-3">
+                    <td className="text-center text-fg-sub font-mono text-label-2 px-4 py-3">
                       {formatDate(item.acdntDtm, 'full')}
                     </td>
-                    <td className="text-center text-fg-disabled font-mono text-[10px] px-4 py-3">
+                    <td className="text-center text-fg-disabled font-mono text-label-2 px-4 py-3">
                       {formatDate(item.regDtm, 'date')}
                     </td>
                     <td className="text-center text-fg-sub px-4 py-3">{item.locNm || '—'}</td>
                     <td className="text-center text-fg-sub font-mono px-4 py-3">{amount}</td>
                     <td className="text-center px-4 py-3">
                       <span
-                        className="text-[9px] font-semibold text-color-accent px-2 py-1 rounded"
+                        className="text-caption font-semibold text-color-accent px-2 py-1 rounded"
                         style={{ background: 'rgba(6,182,212,0.12)' }}
                       >
                         {item.algoCd || '—'}
@@ -262,7 +250,7 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
                       <div
                         className="w-6 h-6 rounded-full mx-auto"
                         style={{
-                          background: aegl3 ? 'rgba(239,68,68,0.8)' : 'rgba(255,255,255,0.1)',
+                          background: aegl3 ? 'var(--color-danger)' : 'rgba(255,255,255,0.1)',
                           border: aegl3 ? 'none' : '1px solid var(--stroke-default)',
                         }}
                       />
@@ -271,7 +259,7 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
                       <div
                         className="w-6 h-6 rounded-full mx-auto"
                         style={{
-                          background: aegl2 ? 'rgba(249,115,22,0.8)' : 'rgba(255,255,255,0.1)',
+                          background: aegl2 ? 'var(--color-warning)' : 'rgba(255,255,255,0.1)',
                           border: aegl2 ? 'none' : '1px solid var(--stroke-default)',
                         }}
                       />
@@ -280,21 +268,21 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
                       <div
                         className="w-6 h-6 rounded-full mx-auto"
                         style={{
-                          background: aegl1 ? 'rgba(234,179,8,0.8)' : 'rgba(255,255,255,0.1)',
+                          background: aegl1 ? 'var(--color-caution)' : 'rgba(255,255,255,0.1)',
                           border: aegl1 ? 'none' : '1px solid var(--stroke-default)',
                         }}
                       />
                     </td>
                     <td className="text-center px-4 py-3">
                       <span
-                        className="text-[9px] font-semibold px-[10px] py-1 rounded"
+                        className="text-caption font-semibold px-[10px] py-1 rounded"
                         style={{ background: riskStyle.bg, color: riskStyle.color }}
                       >
                         {riskLabel}
                       </span>
                     </td>
                     <td className="text-center text-fg-sub font-mono px-4 py-3">{damageRadius}</td>
-                    <td className="text-center text-fg-disabled text-[10px] px-4 py-3">
+                    <td className="text-center text-fg-disabled text-label-2 px-4 py-3">
                       {item.analystNm || '—'}
                     </td>
                   </tr>
@@ -305,7 +293,7 @@ export function HNSAnalysisListTable({ onTabChange, onSelectAnalysis }: HNSAnaly
         )}
 
         {!loading && analyses.length === 0 && (
-          <div className="text-center text-fg-disabled text-[12px] py-20">
+          <div className="text-center text-fg-disabled text-label-1 py-20">
             분석 데이터가 없습니다.
           </div>
         )}
diff --git a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
index c5b3917..97d3094 100755
--- a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
@@ -70,6 +70,9 @@ export function HNSLeftPanel({
 }: HNSLeftPanelProps) {
   const [incidents, setIncidents] = useState<IncidentListItem[]>([]);
   const [selectedIncidentSn, setSelectedIncidentSn] = useState('');
+  const [expandedSections, setExpandedSections] = useState({ accident: true, params: true });
+  const toggleSection = (key: 'accident' | 'params') =>
+    setExpandedSections((prev) => ({ ...prev, [key]: !prev[key] }));
 
   const [accidentName, setAccidentName] = useState('');
   const [accidentDate, setAccidentDate] = useState<string>(() => {
@@ -218,486 +221,495 @@ 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">
       {/* Scrollable Content */}
-      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent bg-bg-base">
+      <div
+        className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent bg-bg-base"
+        style={{ scrollbarGutter: 'stable' }}
+      >
         {activeSubTab === 'analysis' && (
-          <div className="p-4">
-            {/* Header */}
-            <div className="flex items-center justify-between mb-[14px]">
-              <div className="flex items-center gap-2.5">
-                <div
-                  className="w-9 h-9 rounded-md flex items-center justify-center text-[18px]"
-                  style={{
-                    background:
-                      'linear-gradient(135deg, rgba(249,115,22,0.15), rgba(168,85,247,0.1))',
-                    border: '1px solid rgba(249,115,22,0.25)',
-                  }}
-                >
-                  🧪
-                </div>
-                <div>
-                  <div className="text-[13px] font-bold text-fg-sub font-korean">
-                    HNS 대기확산 예측
-                  </div>
-                  <div className="text-[10px] text-fg-disabled">
-                    ALOHA/CAMEO 기반 대기확산 시뮬레이션
-                  </div>
-                </div>
+          <div>
+            {/* 헤더 */}
+            <div className="p-4 border-b border-stroke">
+              <div className="text-title-4 font-bold text-fg-sub font-korean">
+                HNS 대기확산 예측
+              </div>
+              <div className="text-label-2 text-fg-disabled mt-0.5">
+                ALOHA/CAMEO 기반 대기확산 시뮬레이션
               </div>
             </div>
 
-            {/* Single Column Layout */}
-            <div className="flex flex-col gap-3">
-              {/* 사고 기본정보 */}
-              <div>
-                <div className="text-[13px] font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
-                  📋 사고 기본정보
-                </div>
-                <div className="flex flex-col gap-[6px]">
-                  {/* 사고명 직접 입력 */}
-                  <input
-                    className="prd-i w-full"
-                    value={accidentName}
-                    onChange={(e) => setAccidentName(e.target.value)}
-                    placeholder="사고명 직접 입력"
-                  />
-
-                  {/* 또는 사고 리스트에서 선택 */}
-                  <ComboBox
-                    className="prd-i"
-                    value={selectedIncidentSn}
-                    onChange={handleSelectIncident}
-                    placeholder="또는 사고 리스트에서 선택"
-                    options={incidents.map((inc) => ({
-                      value: String(inc.acdntSn),
-                      label: `${inc.acdntNm} (${new Date(inc.occrnDtm).toLocaleDateString('ko-KR')})`,
-                    }))}
-                  />
-
-                  {/* 사고 발생 일시 */}
-                  <div>
-                    <label className="text-[10px] text-fg-disabled block mb-0.5">
-                      사고 발생 일시
-                    </label>
-                    <div className="grid grid-cols-2 gap-1">
-                      <input
-                        className="prd-i"
-                        type="date"
-                        value={accidentDate}
-                        onChange={(e) => setAccidentDate(e.target.value)}
-                      />
-                      <input
-                        className="prd-i"
-                        type="time"
-                        value={accidentTime}
-                        onChange={(e) => setAccidentTime(e.target.value)}
-                      />
-                    </div>
-                  </div>
-
-                  {/* 좌표 + 지도 버튼 */}
-                  <div
-                    className="grid items-center gap-1"
-                    style={{ gridTemplateColumns: '1fr 1fr auto' }}
-                  >
-                    <input
-                      className="prd-i flex-1 font-mono"
-                      type="number"
-                      step="0.0001"
-                      value={incidentCoord?.lat.toFixed(4) ?? ''}
-                      placeholder="위도"
-                      onChange={(e) => {
-                        const lat = parseFloat(e.target.value) || 0;
-                        onCoordChange({ lon: incidentCoord?.lon ?? 0, lat });
-                      }}
-                    />
-                    <input
-                      className="prd-i flex-1 font-mono"
-                      type="number"
-                      step="0.0001"
-                      value={incidentCoord?.lon.toFixed(4) ?? ''}
-                      placeholder="경도"
-                      onChange={(e) => {
-                        const lon = parseFloat(e.target.value) || 0;
-                        onCoordChange({ lat: incidentCoord?.lat ?? 0, lon });
-                      }}
-                    />
-                    <button className="prd-map-btn" onClick={onMapSelectClick}>
-                      📍 지도
-                    </button>
-                  </div>
-
-                  {/* DMS 표시 */}
-                  <div
-                    className="text-[9px] text-fg-disabled font-mono border border-stroke bg-bg-base"
-                    style={{ padding: '4px 8px', borderRadius: 'var(--radius-sm)' }}
-                  >
-                    {incidentCoord
-                      ? `${toDMS(incidentCoord.lat, 'lat')} / ${toDMS(incidentCoord.lon, 'lon')}`
-                      : '지도에서 위치를 선택하세요'}
-                  </div>
-
-                  {/* 유출형태 + 물질명 */}
-                  <div className="grid grid-cols-2 gap-1">
-                    <ComboBox
-                      className="prd-i"
-                      value={releaseType}
-                      onChange={(v) => setReleaseType(v as ReleaseType)}
-                      options={[
-                        { value: '연속 유출', label: '연속' },
-                        { value: '순간 유출', label: '순간' },
-                        { value: '풀(Pool) 증발', label: '풀 증발' },
-                      ]}
-                    />
-                    <ComboBox
-                      className="prd-i"
-                      value={substance}
-                      onChange={handleSubstanceChange}
-                      options={[
-                        { value: '톨루엔 (Toluene)', label: '톨루엔' },
-                        { value: '벤젠 (Benzene)', label: '벤젠' },
-                        { value: '자일렌 (Xylene)', label: '자일렌' },
-                        { value: '스티렌 (Styrene)', label: '스티렌' },
-                        { value: '메탄올 (Methanol)', label: '메탄올' },
-                        { value: '아세톤 (Acetone)', label: '아세톤' },
-                        { value: '염소 (Chlorine)', label: '염소' },
-                        { value: '암모니아 (Ammonia)', label: '암모니아' },
-                        { value: '염화수소 (HCl)', label: '염화수소' },
-                        { value: '황화수소 (H2S)', label: '황화수소' },
-                      ]}
-                    />
-                  </div>
-
-                  {/* 유출량 + 단위 + 예측시간 */}
-                  <div
-                    className="grid items-center gap-1"
-                    style={{ gridTemplateColumns: '1fr 65px 1fr' }}
-                  >
-                    <input
-                      className="prd-i font-mono"
-                      type="number"
-                      value={releaseType === '순간 유출' ? totalRelease : emissionRate}
-                      onChange={(e) =>
-                        releaseType === '순간 유출'
-                          ? setTotalRelease(e.target.value)
-                          : setEmissionRate(e.target.value)
-                      }
-                      placeholder={releaseType === '순간 유출' ? 'g' : 'g/s'}
-                    />
-                    <ComboBox
-                      className="prd-i"
-                      value={releaseType === '순간 유출' ? 'g' : 'g/s'}
-                      onChange={() => {}}
-                      options={
-                        releaseType === '순간 유출'
-                          ? [
-                              { value: 'g', label: 'g' },
-                              { value: 'kg', label: 'kg' },
-                            ]
-                          : [
-                              { value: 'g/s', label: 'g/s' },
-                              { value: 'kg/s', label: 'kg/s' },
-                            ]
-                      }
-                    />
-                    <ComboBox
-                      className="prd-i"
-                      value={predictionTime}
-                      onChange={setPredictionTime}
-                      options={[
-                        { value: '6시간', label: '6시간' },
-                        { value: '12시간', label: '12시간' },
-                        { value: '24시간', label: '24시간' },
-                        { value: '48시간', label: '48시간' },
-                      ]}
-                    />
-                  </div>
-
-                  {/* 기상 정보 (자동조회) — 내부적으로 사용, UI 숨김 */}
-
-                  {/* 알고리즘 선택 */}
-                  <div className="grid grid-cols-2 gap-1">
-                    <div>
-                      <label className="text-[10px] text-fg-disabled block mb-0.5">
-                        예측 알고리즘
-                      </label>
-                      <ComboBox
-                        className="prd-i"
-                        value={algorithm}
-                        onChange={setAlgorithm}
-                        options={[
-                          { value: 'ALOHA (EPA)', label: 'ALOHA (EPA)' },
-                          { value: 'CAMEO', label: 'CAMEO' },
-                          { value: 'Gaussian Plume', label: 'Gaussian Plume' },
-                          { value: 'AERMOD', label: 'AERMOD' },
-                        ]}
-                      />
-                    </div>
-                    <div>
-                      <label className="text-[10px] text-fg-disabled block mb-0.5">
-                        확산 등급 기준
-                      </label>
-                      <ComboBox
-                        className="prd-i"
-                        value={criteriaModel}
-                        onChange={setCriteriaModel}
-                        options={[
-                          { value: 'AEGL', label: 'AEGL' },
-                          { value: 'ERPG', label: 'ERPG' },
-                          { value: 'TEEL', label: 'TEEL' },
-                          { value: 'PAC', label: 'PAC' },
-                        ]}
-                      />
-                    </div>
-                  </div>
-                </div>
+            {/* 사고 기본정보 */}
+            <div className="border-b border-stroke">
+              <div
+                onClick={() => toggleSection('accident')}
+                className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
+              >
+                <h3 className="text-title-4 font-bold text-fg-sub font-korean">사고 기본정보</h3>
+                <span className="text-label-2 text-fg-disabled">
+                  {expandedSections.accident ? '▼' : '▶'}
+                </span>
               </div>
+              {expandedSections.accident && (
+                <div className="px-4 pb-4">
+                  <div className="flex flex-col gap-[6px]">
+                    {/* 사고명 직접 입력 */}
+                    <input
+                      className="prd-i w-full"
+                      value={accidentName}
+                      onChange={(e) => setAccidentName(e.target.value)}
+                      placeholder="사고명 직접 입력"
+                    />
 
-              {/* 모델 파라미터 & 물질 정보 */}
-              <div>
-                <div className="text-[13px] font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
-                  🧪{' '}
+                    {/* 또는 사고 리스트에서 선택 */}
+                    <ComboBox
+                      className="prd-i"
+                      value={selectedIncidentSn}
+                      onChange={handleSelectIncident}
+                      placeholder="또는 사고 리스트에서 선택"
+                      options={incidents.map((inc) => ({
+                        value: String(inc.acdntSn),
+                        label: `${inc.acdntNm} (${new Date(inc.occrnDtm).toLocaleDateString('ko-KR')})`,
+                      }))}
+                    />
+
+                    {/* 사고 발생 일시 */}
+                    <div>
+                      <label className="text-label-2 text-fg-disabled block mb-0.5">
+                        사고 발생 일시
+                      </label>
+                      <div className="grid grid-cols-2 gap-1">
+                        <input
+                          className="prd-i"
+                          type="date"
+                          value={accidentDate}
+                          onChange={(e) => setAccidentDate(e.target.value)}
+                        />
+                        <input
+                          className="prd-i"
+                          type="time"
+                          value={accidentTime}
+                          onChange={(e) => setAccidentTime(e.target.value)}
+                        />
+                      </div>
+                    </div>
+
+                    {/* 좌표 + 지도 버튼 */}
+                    <div
+                      className="grid items-center gap-1"
+                      style={{ gridTemplateColumns: '1fr 1fr auto' }}
+                    >
+                      <input
+                        className="prd-i flex-1 font-mono"
+                        type="number"
+                        step="0.0001"
+                        value={incidentCoord?.lat.toFixed(4) ?? ''}
+                        placeholder="위도"
+                        onChange={(e) => {
+                          const lat = parseFloat(e.target.value) || 0;
+                          onCoordChange({ lon: incidentCoord?.lon ?? 0, lat });
+                        }}
+                      />
+                      <input
+                        className="prd-i flex-1 font-mono"
+                        type="number"
+                        step="0.0001"
+                        value={incidentCoord?.lon.toFixed(4) ?? ''}
+                        placeholder="경도"
+                        onChange={(e) => {
+                          const lon = parseFloat(e.target.value) || 0;
+                          onCoordChange({ lat: incidentCoord?.lat ?? 0, lon });
+                        }}
+                      />
+                      <button className="prd-map-btn" onClick={onMapSelectClick}>
+                        📍 지도
+                      </button>
+                    </div>
+
+                    {/* DMS 표시 */}
+                    <div
+                      className="text-caption text-fg-disabled font-mono border border-stroke bg-bg-base"
+                      style={{ padding: '4px 8px', borderRadius: 'var(--radius-sm)' }}
+                    >
+                      {incidentCoord
+                        ? `${toDMS(incidentCoord.lat, 'lat')} / ${toDMS(incidentCoord.lon, 'lon')}`
+                        : '지도에서 위치를 선택하세요'}
+                    </div>
+
+                    {/* 유출형태 + 물질명 */}
+                    <div className="grid grid-cols-2 gap-1">
+                      <ComboBox
+                        className="prd-i"
+                        value={releaseType}
+                        onChange={(v) => setReleaseType(v as ReleaseType)}
+                        options={[
+                          { value: '연속 유출', label: '연속' },
+                          { value: '순간 유출', label: '순간' },
+                          { value: '풀(Pool) 증발', label: '풀 증발' },
+                        ]}
+                      />
+                      <ComboBox
+                        className="prd-i"
+                        value={substance}
+                        onChange={handleSubstanceChange}
+                        options={[
+                          { value: '톨루엔 (Toluene)', label: '톨루엔' },
+                          { value: '벤젠 (Benzene)', label: '벤젠' },
+                          { value: '자일렌 (Xylene)', label: '자일렌' },
+                          { value: '스티렌 (Styrene)', label: '스티렌' },
+                          { value: '메탄올 (Methanol)', label: '메탄올' },
+                          { value: '아세톤 (Acetone)', label: '아세톤' },
+                          { value: '염소 (Chlorine)', label: '염소' },
+                          { value: '암모니아 (Ammonia)', label: '암모니아' },
+                          { value: '염화수소 (HCl)', label: '염화수소' },
+                          { value: '황화수소 (H2S)', label: '황화수소' },
+                        ]}
+                      />
+                    </div>
+
+                    {/* 유출량 + 단위 + 예측시간 */}
+                    <div
+                      className="grid items-center gap-1"
+                      style={{ gridTemplateColumns: '1fr 65px 1fr' }}
+                    >
+                      <input
+                        className="prd-i font-mono"
+                        type="number"
+                        value={releaseType === '순간 유출' ? totalRelease : emissionRate}
+                        onChange={(e) =>
+                          releaseType === '순간 유출'
+                            ? setTotalRelease(e.target.value)
+                            : setEmissionRate(e.target.value)
+                        }
+                        placeholder={releaseType === '순간 유출' ? 'g' : 'g/s'}
+                      />
+                      <ComboBox
+                        className="prd-i"
+                        value={releaseType === '순간 유출' ? 'g' : 'g/s'}
+                        onChange={() => {}}
+                        options={
+                          releaseType === '순간 유출'
+                            ? [
+                                { value: 'g', label: 'g' },
+                                { value: 'kg', label: 'kg' },
+                              ]
+                            : [
+                                { value: 'g/s', label: 'g/s' },
+                                { value: 'kg/s', label: 'kg/s' },
+                              ]
+                        }
+                      />
+                      <ComboBox
+                        className="prd-i"
+                        value={predictionTime}
+                        onChange={setPredictionTime}
+                        options={[
+                          { value: '6시간', label: '6시간' },
+                          { value: '12시간', label: '12시간' },
+                          { value: '24시간', label: '24시간' },
+                          { value: '48시간', label: '48시간' },
+                        ]}
+                      />
+                    </div>
+
+                    {/* 기상 정보 (자동조회) — 내부적으로 사용, UI 숨김 */}
+
+                    {/* 알고리즘 선택 */}
+                    <div className="grid grid-cols-2 gap-1">
+                      <div>
+                        <label className="text-label-2 text-fg-disabled block mb-0.5">
+                          예측 알고리즘
+                        </label>
+                        <ComboBox
+                          className="prd-i"
+                          value={algorithm}
+                          onChange={setAlgorithm}
+                          options={[
+                            { value: 'ALOHA (EPA)', label: 'ALOHA (EPA)' },
+                            { value: 'CAMEO', label: 'CAMEO' },
+                            { value: 'Gaussian Plume', label: 'Gaussian Plume' },
+                            { value: 'AERMOD', label: 'AERMOD' },
+                          ]}
+                        />
+                      </div>
+                      <div>
+                        <label className="text-label-2 text-fg-disabled block mb-0.5">
+                          확산 등급 기준
+                        </label>
+                        <ComboBox
+                          className="prd-i"
+                          value={criteriaModel}
+                          onChange={setCriteriaModel}
+                          options={[
+                            { value: 'AEGL', label: 'AEGL' },
+                            { value: 'ERPG', label: 'ERPG' },
+                            { value: 'TEEL', label: 'TEEL' },
+                            { value: 'PAC', label: 'PAC' },
+                          ]}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 모델 파라미터 & 물질 정보 */}
+            <div className="border-b border-stroke">
+              <div
+                onClick={() => toggleSection('params')}
+                className="flex items-center justify-between p-4 cursor-pointer hover:bg-[rgba(255,255,255,0.02)]"
+              >
+                <h3 className="text-title-4 font-bold text-fg-sub font-korean">
                   {releaseType === '연속 유출'
                     ? 'Plume'
                     : releaseType === '순간 유출'
                       ? 'Puff'
                       : 'Dense Gas'}{' '}
                   파라미터
-                </div>
-                <div className="flex flex-col gap-[6px]">
-                  {/* 모델별 입력 파라미터 */}
-                  <div
-                    className="p-[10px] rounded-md"
-                    style={{
-                      background: 'rgba(6,182,212,0.04)',
-                      border: '1px solid rgba(6,182,212,0.15)',
-                    }}
-                  >
-                    {/* 연속 유출 (Plume): 배출률, 누출지속시간, 누출높이 */}
-                    {releaseType === '연속 유출' && (
-                      <div className="flex flex-col gap-[6px]">
-                        <div className="grid grid-cols-2 gap-1">
-                          <div>
-                            <label className="text-[10px] text-fg-disabled block mb-0.5">
-                              배출률 (g/s)
-                            </label>
-                            <input
-                              className="prd-i w-full font-mono"
-                              type="number"
-                              value={emissionRate}
-                              onChange={(e) => setEmissionRate(e.target.value)}
-                              step="0.1"
-                              min="0"
-                            />
-                          </div>
-                          <div>
-                            <label className="text-[10px] text-fg-disabled block mb-0.5">
-                              지속시간 (s)
-                            </label>
-                            <input
-                              className="prd-i w-full font-mono"
-                              type="number"
-                              value={releaseDuration}
-                              onChange={(e) => setReleaseDuration(e.target.value)}
-                              step="10"
-                              min="1"
-                            />
-                          </div>
-                        </div>
-                        <div>
-                          <label className="text-[10px] text-fg-disabled block mb-0.5">
-                            누출 높이 (m)
-                          </label>
-                          <input
-                            className="prd-i w-full font-mono"
-                            type="number"
-                            value={releaseHeight}
-                            onChange={(e) => setReleaseHeight(e.target.value)}
-                            step="0.1"
-                            min="0"
-                          />
-                        </div>
-                      </div>
-                    )}
-
-                    {/* 순간 유출 (Puff): 총 누출량, 누출높이 */}
-                    {releaseType === '순간 유출' && (
-                      <div className="flex flex-col gap-[6px]">
-                        <div>
-                          <label className="text-[10px] text-fg-disabled block mb-0.5">
-                            총 누출량 (g)
-                          </label>
-                          <input
-                            className="prd-i w-full font-mono"
-                            type="number"
-                            value={totalRelease}
-                            onChange={(e) => setTotalRelease(e.target.value)}
-                            step="100"
-                            min="0"
-                          />
-                        </div>
-                        <div>
-                          <label className="text-[10px] text-fg-disabled block mb-0.5">
-                            누출 높이 (m)
-                          </label>
-                          <input
-                            className="prd-i w-full font-mono"
-                            type="number"
-                            value={releaseHeight}
-                            onChange={(e) => setReleaseHeight(e.target.value)}
-                            step="0.1"
-                            min="0"
-                          />
-                        </div>
-                      </div>
-                    )}
-
-                    {/* 풀(Pool) 증발 (Dense Gas): 배출률, 풀반경, 누출높이 */}
-                    {releaseType === '풀(Pool) 증발' && (
-                      <div className="flex flex-col gap-[6px]">
-                        <div className="grid grid-cols-2 gap-1">
-                          <div>
-                            <label className="text-[10px] text-fg-disabled block mb-0.5">
-                              배출률 (g/s)
-                            </label>
-                            <input
-                              className="prd-i w-full font-mono"
-                              type="number"
-                              value={emissionRate}
-                              onChange={(e) => setEmissionRate(e.target.value)}
-                              step="0.1"
-                              min="0"
-                            />
-                          </div>
-                          <div>
-                            <label className="text-[10px] text-fg-disabled block mb-0.5">
-                              풀 반경 (m)
-                            </label>
-                            <input
-                              className="prd-i w-full font-mono"
-                              type="number"
-                              value={poolRadius}
-                              onChange={(e) => setPoolRadius(e.target.value)}
-                              step="0.5"
-                              min="0.1"
-                            />
-                          </div>
-                        </div>
-                        <div>
-                          <label className="text-[10px] text-fg-disabled block mb-0.5">
-                            누출 높이 (m)
-                          </label>
-                          <input
-                            className="prd-i w-full font-mono"
-                            type="number"
-                            value={releaseHeight}
-                            onChange={(e) => setReleaseHeight(e.target.value)}
-                            step="0.1"
-                            min="0"
-                          />
-                        </div>
-                      </div>
-                    )}
-
-                    {/* 모델 설명 */}
-                    <div className="text-[9px] text-fg-disabled mt-1 leading-[1.4]">
-                      {releaseType === '연속 유출' &&
-                        '정상상태 연속 배출. 바람 방향으로 플룸이 형성됩니다.'}
-                      {releaseType === '순간 유출' &&
-                        '한 번에 전량 방출. 시간에 따라 구름이 이동하며 확산됩니다.'}
-                      {releaseType === '풀(Pool) 증발' &&
-                        '고밀도 가스가 지표면을 따라 확산됩니다 (Britter-McQuaid 모델).'}
-                    </div>
-                  </div>
-
-                  {/* 물질 위험 특성 */}
-                  <div
-                    className="p-2 rounded-sm mt-0.5"
-                    style={{
-                      background: 'rgba(249,115,22,0.05)',
-                      border: '1px solid rgba(249,115,22,0.12)',
-                    }}
-                  >
-                    <div className="text-[10px] font-bold text-color-warning mb-1">
-                      ⚠ 물질 위험 특성
-                    </div>
-                    <div className="grid grid-cols-2 gap-[3px] text-[9px]">
-                      <div className="flex justify-between">
-                        <span className="text-fg-disabled">분자량</span>
-                        <span className="font-mono">{tox.mw} g/mol</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-fg-disabled">가스밀도</span>
-                        <span className="font-mono">{tox.densityGas} kg/m³</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-fg-disabled">증기압</span>
-                        <span className="font-mono">{tox.vaporPressure} mmHg</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-fg-disabled">IDLH</span>
-                        <span className="text-color-danger font-semibold font-mono">
-                          {tox.idlh} ppm
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* AEGL 등급 범례 */}
-                  <div
-                    className="p-2 rounded-sm"
-                    style={{
-                      background: 'rgba(168,85,247,0.05)',
-                      border: '1px solid rgba(168,85,247,0.12)',
-                    }}
-                  >
-                    <div className="text-[10px] font-bold text-color-tertiary mb-1">
-                      📊 확산 등급 기준 (AEGL)
-                    </div>
-                    <div className="flex flex-col gap-0.5 text-[9px]">
-                      <div className="flex items-center gap-1">
-                        <div
-                          className="w-2 h-2 rounded-[2px]"
-                          style={{ background: 'rgba(239,68,68,0.7)' }}
-                        ></div>
-                        <span className="text-fg-disabled">
-                          AEGL-3 (생명위협) — {tox.aegl3} ppm
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <div
-                          className="w-2 h-2 rounded-[2px]"
-                          style={{ background: 'rgba(249,115,22,0.7)' }}
-                        ></div>
-                        <span className="text-fg-disabled">
-                          AEGL-2 (건강피해) — {tox.aegl2} ppm
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-1">
-                        <div
-                          className="w-2 h-2 rounded-[2px]"
-                          style={{ background: 'rgba(234,179,8,0.7)' }}
-                        ></div>
-                        <span className="text-fg-disabled">AEGL-1 (불쾌감) — {tox.aegl1} ppm</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                </h3>
+                <span className="text-label-2 text-fg-disabled">
+                  {expandedSections.params ? '▼' : '▶'}
+                </span>
               </div>
+              {expandedSections.params && (
+                <div className="px-4 pb-4">
+                  <div className="flex flex-col gap-[6px]">
+                    {/* 모델별 입력 파라미터 */}
+                    <div
+                      className="p-[10px] rounded-md"
+                      style={{
+                        background: 'rgba(6,182,212,0.04)',
+                        border: '1px solid rgba(6,182,212,0.15)',
+                      }}
+                    >
+                      {/* 연속 유출 (Plume): 배출률, 누출지속시간, 누출높이 */}
+                      {releaseType === '연속 유출' && (
+                        <div className="flex flex-col gap-[6px]">
+                          <div className="grid grid-cols-2 gap-1">
+                            <div>
+                              <label className="text-label-2 text-fg-disabled block mb-0.5">
+                                배출률 (g/s)
+                              </label>
+                              <input
+                                className="prd-i w-full font-mono"
+                                type="number"
+                                value={emissionRate}
+                                onChange={(e) => setEmissionRate(e.target.value)}
+                                step="0.1"
+                                min="0"
+                              />
+                            </div>
+                            <div>
+                              <label className="text-label-2 text-fg-disabled block mb-0.5">
+                                지속시간 (s)
+                              </label>
+                              <input
+                                className="prd-i w-full font-mono"
+                                type="number"
+                                value={releaseDuration}
+                                onChange={(e) => setReleaseDuration(e.target.value)}
+                                step="10"
+                                min="1"
+                              />
+                            </div>
+                          </div>
+                          <div>
+                            <label className="text-label-2 text-fg-disabled block mb-0.5">
+                              누출 높이 (m)
+                            </label>
+                            <input
+                              className="prd-i w-full font-mono"
+                              type="number"
+                              value={releaseHeight}
+                              onChange={(e) => setReleaseHeight(e.target.value)}
+                              step="0.1"
+                              min="0"
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      {/* 순간 유출 (Puff): 총 누출량, 누출높이 */}
+                      {releaseType === '순간 유출' && (
+                        <div className="flex flex-col gap-[6px]">
+                          <div>
+                            <label className="text-label-2 text-fg-disabled block mb-0.5">
+                              총 누출량 (g)
+                            </label>
+                            <input
+                              className="prd-i w-full font-mono"
+                              type="number"
+                              value={totalRelease}
+                              onChange={(e) => setTotalRelease(e.target.value)}
+                              step="100"
+                              min="0"
+                            />
+                          </div>
+                          <div>
+                            <label className="text-label-2 text-fg-disabled block mb-0.5">
+                              누출 높이 (m)
+                            </label>
+                            <input
+                              className="prd-i w-full font-mono"
+                              type="number"
+                              value={releaseHeight}
+                              onChange={(e) => setReleaseHeight(e.target.value)}
+                              step="0.1"
+                              min="0"
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      {/* 풀(Pool) 증발 (Dense Gas): 배출률, 풀반경, 누출높이 */}
+                      {releaseType === '풀(Pool) 증발' && (
+                        <div className="flex flex-col gap-[6px]">
+                          <div className="grid grid-cols-2 gap-1">
+                            <div>
+                              <label className="text-label-2 text-fg-disabled block mb-0.5">
+                                배출률 (g/s)
+                              </label>
+                              <input
+                                className="prd-i w-full font-mono"
+                                type="number"
+                                value={emissionRate}
+                                onChange={(e) => setEmissionRate(e.target.value)}
+                                step="0.1"
+                                min="0"
+                              />
+                            </div>
+                            <div>
+                              <label className="text-label-2 text-fg-disabled block mb-0.5">
+                                풀 반경 (m)
+                              </label>
+                              <input
+                                className="prd-i w-full font-mono"
+                                type="number"
+                                value={poolRadius}
+                                onChange={(e) => setPoolRadius(e.target.value)}
+                                step="0.5"
+                                min="0.1"
+                              />
+                            </div>
+                          </div>
+                          <div>
+                            <label className="text-label-2 text-fg-disabled block mb-0.5">
+                              누출 높이 (m)
+                            </label>
+                            <input
+                              className="prd-i w-full font-mono"
+                              type="number"
+                              value={releaseHeight}
+                              onChange={(e) => setReleaseHeight(e.target.value)}
+                              step="0.1"
+                              min="0"
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      {/* 모델 설명 */}
+                      <div className="text-caption text-fg-disabled mt-1 leading-[1.4]">
+                        {releaseType === '연속 유출' &&
+                          '정상상태 연속 배출. 바람 방향으로 플룸이 형성됩니다.'}
+                        {releaseType === '순간 유출' &&
+                          '한 번에 전량 방출. 시간에 따라 구름이 이동하며 확산됩니다.'}
+                        {releaseType === '풀(Pool) 증발' &&
+                          '고밀도 가스가 지표면을 따라 확산됩니다 (Britter-McQuaid 모델).'}
+                      </div>
+                    </div>
+
+                    {/* 물질 위험 특성 */}
+                    <div
+                      className="p-2 rounded-sm mt-0.5"
+                      style={{
+                        background: 'rgba(6,182,212,0.05)',
+                        border: '1px solid rgba(6,182,212,0.12)',
+                      }}
+                    >
+                      <div className="text-label-2 font-bold text-color-accent mb-1">
+                        ⚠ 물질 위험 특성
+                      </div>
+                      <div className="grid grid-cols-2 gap-[3px] text-caption">
+                        <div className="flex justify-between">
+                          <span className="text-fg-disabled">분자량</span>
+                          <span className="font-mono">{tox.mw} g/mol</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-fg-disabled">가스밀도</span>
+                          <span className="font-mono">{tox.densityGas} kg/m³</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-fg-disabled">증기압</span>
+                          <span className="font-mono">{tox.vaporPressure} mmHg</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-fg-disabled">IDLH</span>
+                          <span className="text-color-caution font-semibold font-mono">
+                            {tox.idlh} ppm
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* AEGL 등급 범례 */}
+                    <div
+                      className="p-2 rounded-sm"
+                      style={{
+                        background: 'rgba(6,182,212,0.05)',
+                        border: '1px solid rgba(6,182,212,0.12)',
+                      }}
+                    >
+                      <div className="text-label-2 font-bold text-color-accent mb-1">
+                        📊 확산 등급 기준 (AEGL)
+                      </div>
+                      <div className="flex flex-col gap-0.5 text-caption">
+                        <div className="flex items-center gap-1">
+                          <div
+                            className="w-2 h-2 rounded-[2px]"
+                            style={{ background: 'rgba(239,68,68,0.7)' }}
+                          ></div>
+                          <span className="text-fg-disabled">
+                            AEGL-3 (생명위협) — {tox.aegl3} ppm
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <div
+                            className="w-2 h-2 rounded-[2px]"
+                            style={{ background: 'rgba(6,182,212,0.7)' }}
+                          ></div>
+                          <span className="text-fg-disabled">
+                            AEGL-2 (건강피해) — {tox.aegl2} ppm
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <div
+                            className="w-2 h-2 rounded-[2px]"
+                            style={{ background: 'rgba(6,182,212,0.7)' }}
+                          ></div>
+                          <span className="text-fg-disabled">
+                            AEGL-1 (불쾌감) — {tox.aegl1} ppm
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
 
             {/* 실행 버튼 */}
-            <div className="flex flex-col gap-1 mt-2">
+            <div className="flex flex-col gap-1 px-4 py-3">
               <button
                 className="prd-btn pri"
-                style={{ padding: '7px', fontSize: '11px' }}
+                style={{ padding: '7px', fontSize: 'var(--font-size-label-2)' }}
                 onClick={onRunPrediction}
                 disabled={isRunningPrediction}
               >
-                {isRunningPrediction ? '⏳ 실행 중...' : '🧪 대기확산 예측 실행'}
+                {isRunningPrediction ? '⏳ 실행 중...' : '대기확산 예측 실행'}
               </button>
               <button
                 className="prd-btn sec"
-                style={{ padding: '7px', fontSize: '11px' }}
+                style={{ padding: '7px', fontSize: 'var(--font-size-label-2)' }}
                 onClick={handleReset}
               >
                 초기화
@@ -711,29 +723,29 @@ export function HNSLeftPanel({
             {/* Header */}
             <div className="flex items-center gap-2.5 mb-[14px]">
               <div
-                className="w-9 h-9 rounded-md flex items-center justify-center text-[18px]"
+                className="w-9 h-9 rounded-md flex items-center justify-center text-title-1"
                 style={{
-                  background: 'linear-gradient(135deg, rgba(6,182,212,0.15), rgba(168,85,247,0.1))',
+                  background: 'var(--bg-elevated)',
                   border: '1px solid rgba(6,182,212,0.25)',
                 }}
               >
                 📋
               </div>
               <div>
-                <div className="text-[13px] font-bold text-fg-sub font-korean">분석 목록</div>
-                <div className="text-[10px] text-fg-disabled">저장된 대기확산 예측 결과</div>
+                <div className="text-title-4 font-bold text-fg-sub font-korean">분석 목록</div>
+                <div className="text-label-2 text-fg-disabled">저장된 대기확산 예측 결과</div>
               </div>
             </div>
 
             {/* 필터 섹션 */}
             <div className="bg-bg-card border border-stroke rounded-md p-[14px] mb-3">
-              <div className="text-[13px] font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
+              <div className="text-title-4 font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
                 🔍 필터
               </div>
               <div className="flex flex-col gap-2">
                 {/* 기간 선택 */}
                 <div>
-                  <label className="text-[10px] text-fg-disabled block mb-0.5">기간</label>
+                  <label className="text-label-2 text-fg-disabled block mb-0.5">기간</label>
                   <ComboBox
                     value="최근 7일"
                     onChange={() => {}}
@@ -748,7 +760,7 @@ export function HNSLeftPanel({
 
                 {/* 물질 분류 */}
                 <div>
-                  <label className="text-[10px] text-fg-disabled block mb-0.5">물질 분류</label>
+                  <label className="text-label-2 text-fg-disabled block mb-0.5">물질 분류</label>
                   <ComboBox
                     value="전체"
                     onChange={() => {}}
@@ -764,7 +776,7 @@ export function HNSLeftPanel({
 
                 {/* 위험도 */}
                 <div>
-                  <label className="text-[10px] text-fg-disabled block mb-0.5">위험도</label>
+                  <label className="text-label-2 text-fg-disabled block mb-0.5">위험도</label>
                   <ComboBox
                     value="전체"
                     onChange={() => {}}
@@ -781,21 +793,21 @@ export function HNSLeftPanel({
 
             {/* 통계 요약 */}
             <div className="bg-bg-card border border-stroke rounded-md p-[14px]">
-              <div className="text-[13px] font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
+              <div className="text-title-4 font-bold text-fg-sub font-korean mb-3 flex items-center gap-1.5">
                 📊 통계
               </div>
               <div className="flex flex-col gap-2">
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
-                  <span className="text-[10px] text-fg-disabled">전체 분석</span>
+                  <span className="text-label-2 text-fg-disabled">전체 분석</span>
                   <span className="text-sm font-bold text-color-accent font-mono">8건</span>
                 </div>
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
-                  <span className="text-[10px] text-fg-disabled">고위험 (AEGL-3)</span>
-                  <span className="text-sm font-bold text-color-danger font-mono">3건</span>
+                  <span className="text-label-2 text-fg-disabled">고위험 (AEGL-3)</span>
+                  <span className="text-sm font-bold text-color-caution font-mono">3건</span>
                 </div>
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
-                  <span className="text-[10px] text-fg-disabled">중위험 (AEGL-2)</span>
-                  <span className="text-sm font-bold text-color-warning font-mono">5건</span>
+                  <span className="text-label-2 text-fg-disabled">중위험 (AEGL-2)</span>
+                  <span className="text-sm font-bold text-color-accent font-mono">5건</span>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/tabs/hns/components/HNSRecalcModal.tsx b/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
index 2e45289..e7e6602 100755
--- a/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
+++ b/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
@@ -82,20 +82,20 @@ export function HNSRecalcModal({ isOpen, onClose, onSubmit, currentParams }: HNS
         {/* Header */}
         <div className="px-5 py-4 border-b border-stroke flex items-center gap-3">
           <div
-            className="w-9 h-9 rounded-[10px] border border-[rgba(249,115,22,0.3)] flex items-center justify-center text-base shrink-0"
+            className="w-9 h-9 rounded-[10px] border border-[rgba(6,182,212,0.3)] flex items-center justify-center text-base shrink-0"
             style={{
-              background: 'linear-gradient(135deg, rgba(249,115,22,0.2), rgba(239,68,68,0.15))',
+              background: 'linear-gradient(135deg, rgba(6,182,212,0.2), rgba(59,130,246,0.15))',
             }}
           >
             🔄
           </div>
           <div className="flex-1">
-            <h2 className="text-[15px] font-bold m-0">대기확산 재계산</h2>
-            <div className="text-[10px] text-fg-disabled mt-0.5">조건을 변경하여 재계산합니다</div>
+            <h2 className="text-title-2 font-bold m-0">대기확산 재계산</h2>
+            <div className="text-label-2 text-fg-disabled mt-0.5">조건을 변경하여 재계산합니다</div>
           </div>
           <button
             onClick={onClose}
-            className="w-7 h-7 rounded-md border border-stroke bg-bg-card text-fg-disabled text-xs cursor-pointer flex items-center justify-center shrink-0"
+            className="w-7 h-7 rounded-md border border-stroke bg-bg-card text-fg-disabled text-label-1 cursor-pointer flex items-center justify-center shrink-0"
           >
             ✕
           </button>
@@ -183,16 +183,16 @@ export function HNSRecalcModal({ isOpen, onClose, onSubmit, currentParams }: HNS
         <div className="px-5 py-[14px] border-t border-stroke flex gap-2">
           <button
             onClick={onClose}
-            className="flex-1 py-2.5 text-xs font-semibold rounded-md cursor-pointer bg-bg-card border border-stroke text-fg-sub"
+            className="flex-1 py-2.5 text-label-1 font-semibold rounded-md cursor-pointer bg-bg-card border border-stroke text-fg-sub"
           >
             취소
           </button>
           <button
             onClick={handleRun}
-            className="flex-[2] py-2.5 text-xs font-bold rounded-md text-white"
+            className="flex-[2] py-2.5 text-label-1 font-bold rounded-md text-white"
             style={{
               cursor: 'pointer',
-              background: 'linear-gradient(135deg, var(--color-warning), #ef4444)',
+              background: 'linear-gradient(135deg, var(--color-accent), #ef4444)',
               border: 'none',
             }}
           >
diff --git a/frontend/src/tabs/hns/components/HNSRightPanel.tsx b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
index 5133d3a..026572d 100755
--- a/frontend/src/tabs/hns/components/HNSRightPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
@@ -36,7 +36,7 @@ export function HNSRightPanel({
   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-xs">
+        <div className="flex flex-col gap-3 items-center justify-center h-full text-fg-disabled text-label-1">
           <div style={{ fontSize: '32px', opacity: 0.3 }}>📊</div>
           <div>예측 실행 후 결과가 표시됩니다</div>
         </div>
@@ -67,13 +67,13 @@ export function HNSRightPanel({
               width: '6px',
               height: '6px',
               borderRadius: '50%',
-              background: 'var(--color-warning)',
+              background: 'var(--color-accent)',
               animation: 'pulse 1.5s infinite',
             }}
           ></div>
-          <h3 className="text-[13px] font-bold m-0">예측 결과</h3>
+          <h3 className="text-title-4 font-bold m-0">예측 결과</h3>
         </div>
-        <div className="text-[10px] text-fg-disabled font-mono">
+        <div className="text-label-2 text-fg-disabled font-mono">
           {dispersionResult.substance} · {modelLabel}
         </div>
       </div>
@@ -81,89 +81,80 @@ export function HNSRightPanel({
       {/* KPI Cards */}
       <div className="flex flex-col gap-2">
         {/* 최대 농도 */}
-        <div className="p-3 bg-bg-card border border-[rgba(239,68,68,0.2)] rounded-[var(--radius-sm)]">
-          <div className="text-[10px] text-fg-disabled mb-1.5">최대 농도</div>
-          <div className="text-[20px] font-bold font-mono text-color-danger">
+        <div className="p-3 bg-bg-card border border-stroke rounded-[var(--radius-sm)]">
+          <div className="text-label-2 text-fg-disabled mb-1.5">최대 농도</div>
+          <div className="text-title-1 font-bold font-mono text-color-caution">
             {maxConc > 0 ? maxConc.toFixed(1) : '—'}{' '}
-            <span className="text-[10px] font-medium">ppm</span>
+            <span className="text-label-2 font-medium">ppm</span>
           </div>
         </div>
 
         {/* 확산 면적 */}
-        <div className="p-3 bg-bg-card border border-[rgba(6,182,212,0.2)] rounded-[var(--radius-sm)]">
-          <div className="text-[10px] text-fg-disabled mb-1.5">AEGL-1 확산 면적</div>
-          <div className="text-[20px] font-bold font-mono text-color-accent">
-            {area > 0 ? area.toFixed(2) : '—'} <span className="text-[10px] font-medium">km²</span>
+        <div className="p-3 bg-bg-card border border-stroke rounded-[var(--radius-sm)]">
+          <div className="text-label-2 text-fg-disabled mb-1.5">AEGL-1 확산 면적</div>
+          <div className="text-title-1 font-bold font-mono text-color-accent">
+            {area > 0 ? area.toFixed(2) : '—'} <span className="text-label-2 font-medium">km²</span>
           </div>
         </div>
 
         {/* 풍속 */}
         <div className="p-3 bg-bg-card border border-stroke rounded-[var(--radius-sm)]">
-          <div className="text-[10px] text-fg-disabled mb-1.5">풍속</div>
-          <div className="text-[20px] font-bold font-mono">
-            {windSpd.toFixed(1)} <span className="text-[10px] font-medium">m/s</span>
+          <div className="text-label-2 text-fg-disabled mb-1.5">풍속</div>
+          <div className="text-title-1 font-bold font-mono">
+            {windSpd.toFixed(1)} <span className="text-label-2 font-medium">m/s</span>
           </div>
         </div>
 
         {/* 풍향 */}
         <div className="p-3 bg-bg-card border border-stroke rounded-[var(--radius-sm)]">
-          <div className="text-[10px] text-fg-disabled mb-1.5">풍향</div>
-          <div className="text-[20px] font-bold font-mono">
-            {windDirToCompass(windDir)} <span className="text-[10px] font-medium">{windDir}°</span>
+          <div className="text-label-2 text-fg-disabled mb-1.5">풍향</div>
+          <div className="text-title-1 font-bold font-mono">
+            {windDirToCompass(windDir)} <span className="text-label-2 font-medium">{windDir}°</span>
           </div>
         </div>
       </div>
 
       {/* AEGL Zone Details */}
       <div>
-        <h4 className="text-[11px] font-semibold text-fg-sub mt-0 mb-2.5">AEGL 구역 상세</h4>
+        <h4 className="text-label-2 font-semibold text-fg-sub mt-0 mb-2.5">AEGL 구역 상세</h4>
         <div className="flex flex-col gap-2">
           {/* AEGL-3 */}
-          <div
-            className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]"
-            style={{ borderLeft: '3px solid rgba(239,68,68,1)' }}
-          >
+          <div className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]">
             <div className="flex justify-between items-center mb-1">
-              <span className="text-[11px] font-semibold">AEGL-3 (생명위협)</span>
-              <span className="text-[10px] font-mono text-fg-disabled">
+              <span className="text-label-2 font-semibold">AEGL-3 (생명위협)</span>
+              <span className="text-label-2 font-mono text-fg-disabled">
                 {computedResult?.aeglDistances.aegl3 || 0}m
               </span>
             </div>
-            <div className="flex justify-between text-[10px] text-fg-disabled">
+            <div className="flex justify-between text-label-2 text-fg-disabled">
               <span>{dispersionResult.concentration['AEGL-3']}</span>
               <span className="font-mono">{computedResult?.aeglAreas.aegl3 ?? 0} km²</span>
             </div>
           </div>
 
           {/* AEGL-2 */}
-          <div
-            className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]"
-            style={{ borderLeft: '3px solid rgba(249,115,22,1)' }}
-          >
+          <div className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]">
             <div className="flex justify-between items-center mb-1">
-              <span className="text-[11px] font-semibold">AEGL-2 (건강피해)</span>
-              <span className="text-[10px] font-mono text-fg-disabled">
+              <span className="text-label-2 font-semibold">AEGL-2 (건강피해)</span>
+              <span className="text-label-2 font-mono text-fg-disabled">
                 {computedResult?.aeglDistances.aegl2 || 0}m
               </span>
             </div>
-            <div className="flex justify-between text-[10px] text-fg-disabled">
+            <div className="flex justify-between text-label-2 text-fg-disabled">
               <span>{dispersionResult.concentration['AEGL-2']}</span>
               <span className="font-mono">{computedResult?.aeglAreas.aegl2 ?? 0} km²</span>
             </div>
           </div>
 
           {/* AEGL-1 */}
-          <div
-            className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]"
-            style={{ borderLeft: '3px solid rgba(234,179,8,1)' }}
-          >
+          <div className="py-2.5 px-3 bg-bg-elevated rounded-[var(--radius-sm)]">
             <div className="flex justify-between items-center mb-1">
-              <span className="text-[11px] font-semibold">AEGL-1 (불쾌감)</span>
-              <span className="text-[10px] font-mono text-fg-disabled">
+              <span className="text-label-2 font-semibold">AEGL-1 (불쾌감)</span>
+              <span className="text-label-2 font-mono text-fg-disabled">
                 {computedResult?.aeglDistances.aegl1 || 0}m
               </span>
             </div>
-            <div className="flex justify-between text-[10px] text-fg-disabled">
+            <div className="flex justify-between text-label-2 text-fg-disabled">
               <span>{dispersionResult.concentration['AEGL-1']}</span>
               <span className="font-mono">{computedResult?.aeglAreas.aegl1 ?? 0} km²</span>
             </div>
@@ -174,10 +165,10 @@ export function HNSRightPanel({
       {/* 시간 정보 (puff/dense_gas) */}
       {computedResult && computedResult.modelType !== 'plume' && (
         <div className="p-2.5 bg-bg-card border border-stroke rounded-[var(--radius-sm)]">
-          <div className="text-[10px] text-fg-disabled mb-1">현재 시뮬레이션 시간</div>
-          <div className="text-[14px] font-bold font-mono text-color-accent">
+          <div className="text-label-2 text-fg-disabled mb-1">현재 시뮬레이션 시간</div>
+          <div className="text-title-3 font-bold font-mono text-color-accent">
             t = {computedResult.timeStep}s
-            <span className="text-[10px] font-normal text-fg-disabled ml-1.5">
+            <span className="text-label-2 font-normal text-fg-disabled ml-1.5">
               ({(computedResult.timeStep / 60).toFixed(1)}분)
             </span>
           </div>
@@ -185,7 +176,7 @@ export function HNSRightPanel({
       )}
 
       {/* Timestamp */}
-      <div className="mt-auto pt-3 border-t border-stroke text-[10px] text-fg-disabled font-mono">
+      <div className="mt-auto pt-3 border-t border-stroke text-label-2 text-fg-disabled font-mono">
         예측 시각: {new Date(dispersionResult.timestamp).toLocaleString('ko-KR')}
       </div>
 
@@ -193,19 +184,19 @@ export function HNSRightPanel({
       <div className="flex gap-1.5 pt-3 border-t border-stroke">
         <button
           onClick={onSave}
-          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-boom to-[#d97706] text-black font-korean"
+          className="flex-1 py-2 px-1 rounded text-label-2 font-semibold bg-color-navy text-static-white hover:bg-color-navy-hover font-korean"
         >
           💾 저장
         </button>
         <button
           onClick={onOpenRecalc}
-          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(249,115,22,0.1)] border border-[rgba(249,115,22,0.3)] text-color-warning font-korean"
+          className="flex-1 py-2 px-1 rounded text-label-2 font-semibold bg-bg-elevated border border-stroke text-fg font-korean"
         >
           🔄 재계산
         </button>
         <button
           onClick={onOpenReport}
-          className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-primary-cyan to-primary-blue text-white font-korean"
+          className="flex-1 py-2 px-1 rounded text-label-2 font-semibold bg-color-navy text-static-white hover:bg-color-navy-hover font-korean"
         >
           📄 보고서
         </button>
diff --git a/frontend/src/tabs/hns/components/HNSScenarioView.tsx b/frontend/src/tabs/hns/components/HNSScenarioView.tsx
index 91bf8d1..3a18050 100755
--- a/frontend/src/tabs/hns/components/HNSScenarioView.tsx
+++ b/frontend/src/tabs/hns/components/HNSScenarioView.tsx
@@ -49,10 +49,10 @@ interface HnsMaterial {
 }
 
 const SEVERITY_STYLE: Record<Severity, { bg: string; color: string }> = {
-  CRITICAL: { bg: 'rgba(239,68,68,0.2)', color: '#f87171' },
-  HIGH: { bg: 'rgba(249,115,22,0.15)', color: '#fb923c' },
-  MEDIUM: { bg: 'rgba(251,191,36,0.15)', color: '#fbbf24' },
-  RESOLVED: { bg: 'rgba(34,197,94,0.15)', color: '#22c55e' },
+  CRITICAL: { bg: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' },
+  HIGH: { bg: 'rgba(249,115,22,0.15)', color: 'var(--color-warning)' },
+  MEDIUM: { bg: 'rgba(234,179,8,0.15)', color: 'var(--color-caution)' },
+  RESOLVED: { bg: 'rgba(34,197,94,0.15)', color: 'var(--color-success)' },
 };
 
 // ─── Mock Data (시나리오 시뮬레이션 엔진 미구현 — 프론트 상수 유지) ──
@@ -352,8 +352,8 @@ export function HNSScenarioView() {
         <div className="flex items-center gap-2.5">
           <span className="text-base">📊</span>
           <div>
-            <div className="text-sm font-bold">HNS 대기확산 시나리오 관리</div>
-            <div className="text-[10px] text-fg-disabled">
+            <div className="text-title-4 font-bold">HNS 대기확산 시나리오 관리</div>
+            <div className="text-label-2 text-fg-disabled">
               시간·조건별 대기확산 예측 시나리오 비교·검토 및 대응 의사결정 지원
             </div>
           </div>
@@ -362,7 +362,7 @@ export function HNSScenarioView() {
           <select
             value={selectedIncident}
             onChange={(e) => setSelectedIncident(Number(e.target.value))}
-            className="prd-i w-[280px] text-[11px]"
+            className="prd-i w-[280px] text-label-2"
           >
             {incidents.length === 0 ? (
               <option value={0}>분석 데이터 없음</option>
@@ -376,10 +376,10 @@ export function HNSScenarioView() {
           </select>
           <button
             onClick={() => setModalOpen(true)}
-            className="cursor-pointer whitespace-nowrap font-bold text-color-warning text-[11px] px-[14px] py-1.5 rounded-sm"
+            className="cursor-pointer whitespace-nowrap font-semibold text-color-accent text-label-2 px-[14px] py-1.5 rounded-sm"
             style={{
-              background: 'rgba(249,115,22,0.12)',
-              border: '1px solid rgba(249,115,22,0.3)',
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
             }}
           >
             + 신규 시나리오
@@ -395,18 +395,18 @@ export function HNSScenarioView() {
           style={{ width: '370px', minWidth: '370px' }}
         >
           <div className="flex items-center justify-between border-b border-stroke px-[14px] py-2.5">
-            <span className="text-[11px] font-bold text-fg-disabled">
+            <span className="text-label-2 font-bold text-fg-disabled">
               시나리오 목록 — 톨루엔 대기확산
             </span>
             <div className="flex gap-1">
               {['시간순', '위험도순'].map((label, i) => (
                 <button
                   key={i}
-                  className="cursor-pointer px-2 py-[3px] text-[9px] font-semibold rounded-sm border border-stroke"
-                  style={{
-                    background: i === 0 ? 'rgba(249,115,22,0.08)' : 'var(--bg-card)',
-                    color: i === 0 ? 'var(--color-warning)' : 'var(--fg-disabled)',
-                  }}
+                  className={`cursor-pointer px-2 py-[3px] text-caption font-semibold rounded-sm border border-stroke ${
+                    i === 0
+                      ? 'bg-[rgba(6,182,212,0.08)] text-color-accent'
+                      : 'bg-bg-card text-fg-disabled'
+                  }`}
                 >
                   {label}
                 </button>
@@ -439,14 +439,14 @@ export function HNSScenarioView() {
                         checked={checked.has(idx)}
                         onChange={() => toggleCheck(idx)}
                         onClick={(e) => e.stopPropagation()}
-                        style={{ accentColor: 'var(--color-warning)' }}
+                        style={{ accentColor: 'var(--color-accent)' }}
                       />
-                      <span className="text-[12px] font-bold">
+                      <span className="text-label-1 font-bold">
                         {scn.id} {scn.name}
                       </span>
                     </div>
                     <span
-                      className="font-bold px-2 py-[2px] rounded-lg text-[8px]"
+                      className="font-bold px-2 py-[2px] rounded-lg text-caption"
                       style={{ background: sev.bg, color: sev.color }}
                     >
                       {scn.severity}
@@ -456,25 +456,25 @@ export function HNSScenarioView() {
                   {/* Time row */}
                   <div className="flex items-center gap-1.5 mb-1.5">
                     <span
-                      className="font-bold font-mono text-color-warning text-[9px] px-1.5 py-[2px] rounded-[3px]"
-                      style={{ background: 'rgba(249,115,22,0.1)' }}
+                      className="font-bold font-mono text-color-accent text-caption px-1.5 py-[2px] rounded-[3px]"
+                      style={{ background: 'rgba(6,182,212,0.1)' }}
                     >
                       {scn.timeStep}
                     </span>
-                    <span className="text-[9px] text-fg-disabled font-mono">{scn.datetime}</span>
-                    <span className="ml-auto text-fg-disabled text-[8px]">{scn.wind}</span>
+                    <span className="text-caption text-fg-disabled font-mono">{scn.datetime}</span>
+                    <span className="ml-auto text-fg-disabled text-caption">{scn.wind}</span>
                   </div>
 
                   {/* Metrics grid */}
-                  <div className="grid grid-cols-4 gap-1 font-mono text-[8px]">
+                  <div className="grid grid-cols-4 gap-1 font-mono text-caption">
                     {[
-                      { label: '최대농도', value: scn.maxConc, color: '#f87171' },
-                      { label: 'IDLH반경', value: scn.idlhRadius, color: '#f87171' },
-                      { label: 'ERPG-2', value: scn.erpg2, color: '#f97316' },
-                      { label: '영향인구', value: scn.population, color: '#f87171' },
+                      { label: '최대농도', value: scn.maxConc, color: 'var(--color-accent)' },
+                      { label: 'IDLH반경', value: scn.idlhRadius, color: 'var(--color-accent)' },
+                      { label: 'ERPG-2', value: scn.erpg2, color: 'var(--color-accent)' },
+                      { label: '영향인구', value: scn.population, color: 'var(--color-accent)' },
                     ].map((m, i) => (
                       <div key={i} className="text-center p-[3px] bg-bg-base rounded-[3px]">
-                        <div className="text-fg-disabled text-[7px]">{m.label}</div>
+                        <div className="text-fg-disabled text-caption">{m.label}</div>
                         <div className="font-bold" style={{ color: m.color }}>
                           {m.value}
                         </div>
@@ -483,7 +483,7 @@ export function HNSScenarioView() {
                   </div>
 
                   {/* Description */}
-                  <div className="text-fg-sub mt-1.5 text-[8px] leading-[1.4]">
+                  <div className="text-fg-sub mt-1.5 text-caption leading-[1.4]">
                     {scn.description}
                   </div>
                 </div>
@@ -495,15 +495,11 @@ export function HNSScenarioView() {
           <div className="flex gap-2 border-t border-stroke px-[14px] py-2.5">
             <button
               onClick={() => setActiveView(1)}
-              className="flex-1 cursor-pointer font-bold text-color-warning text-[11px] p-2 rounded-sm"
-              style={{
-                background: 'rgba(249,115,22,0.1)',
-                border: '1px solid rgba(249,115,22,0.3)',
-              }}
+              className="flex-1 cursor-pointer font-bold text-static-white text-label-2 p-2 rounded-sm bg-color-navy hover:bg-color-navy-hover"
             >
               📊 선택 시나리오 비교
             </button>
-            <button className="cursor-pointer font-semibold text-fg-sub text-[11px] px-[14px] py-2 rounded-sm bg-bg-card border border-stroke">
+            <button className="cursor-pointer font-semibold text-fg-sub text-label-2 px-[14px] py-2 rounded-sm bg-bg-card border border-stroke">
               📄 보고서
             </button>
           </div>
@@ -563,23 +559,13 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
       style={{ scrollbarWidth: 'thin' }}
     >
       {/* Hero card */}
-      <div
-        className="relative overflow-hidden rounded-md p-4"
-        style={{
-          background: 'linear-gradient(135deg, rgba(249,115,22,0.06), rgba(239,68,68,0.04))',
-          border: '1px solid rgba(249,115,22,0.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-0.5"
-          style={{ background: 'linear-gradient(90deg, #f97316, #ef4444, #a855f7)' }}
-        />
+      <div className="rounded-md p-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-2 mb-3">
-          <span className="text-sm font-bold">
+          <span className="text-title-4 font-bold">
             {scenario.id} {scenario.name}
           </span>
           <span
-            className="font-bold px-2 py-[2px] rounded-lg text-[9px]"
+            className="font-bold px-2 py-[2px] rounded-lg text-caption"
             style={{
               background: SEVERITY_STYLE[scenario.severity].bg,
               color: SEVERITY_STYLE[scenario.severity].color,
@@ -587,31 +573,27 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
           >
             {scenario.severity}
           </span>
-          <span className="ml-auto text-[10px] text-fg-disabled font-mono">
+          <span className="ml-auto text-label-2 text-fg-disabled font-mono">
             {scenario.datetime}
           </span>
         </div>
         <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
           {[
-            { label: '최대농도', value: d.maxConc, color: '#f87171' },
-            { label: 'IDLH 반경', value: d.idlhRadius, color: '#f87171' },
-            { label: 'ERPG-2', value: d.erpg2, color: '#f97316' },
+            { label: '최대농도', value: d.maxConc, color: 'var(--color-accent)' },
+            { label: 'IDLH 반경', value: d.idlhRadius, color: 'var(--color-accent)' },
+            { label: 'ERPG-2', value: d.erpg2, color: 'var(--color-accent)' },
             {
               label: '풍향/풍속',
               value: `${d.windDir}\n${d.windSpeed}`,
               color: 'var(--color-accent)',
             },
-            { label: '영향인구', value: d.population, color: '#f87171' },
-            { label: '유출량', value: d.spillAmount, color: 'var(--color-warning)' },
+            { label: '영향인구', value: d.population, color: 'var(--color-accent)' },
+            { label: '유출량', value: d.spillAmount, color: 'var(--color-accent)' },
           ].map((m, i) => (
-            <div
-              key={i}
-              className="text-center rounded-sm p-2"
-              style={{ background: 'rgba(0,0,0,0.15)' }}
-            >
-              <div className="text-fg-disabled text-[8px]">{m.label}</div>
+            <div key={i} className="text-center rounded-sm p-2 bg-bg-base">
+              <div className="text-fg-disabled text-caption">{m.label}</div>
               <div
-                className="text-base font-bold font-mono whitespace-pre-line mt-[2px]"
+                className="text-title-3 font-bold font-mono whitespace-pre-line mt-[2px]"
                 style={{ color: m.color, lineHeight: 1.2 }}
               >
                 {m.value}
@@ -625,21 +607,29 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
       <div className="grid grid-cols-2 gap-3">
         {/* Threat Zones */}
         <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
-          <h4 className="text-[12px] font-bold mb-2.5">⚠️ 위험 구역</h4>
+          <h4 className="text-label-1 font-bold mb-2.5">⚠️ 위험 구역</h4>
           <div className="flex flex-col gap-1.5">
             {[
-              { label: 'IDLH (즉시위험)', value: scenario.zones.idlh, color: '#ef4444' },
-              { label: 'ERPG-2 (대피권고)', value: scenario.zones.erpg2, color: '#f97316' },
-              { label: 'ERPG-1 (주의권고)', value: scenario.zones.erpg1, color: '#fbbf24' },
-              { label: 'TWA (작업허용)', value: scenario.zones.twa, color: '#22c55e' },
+              {
+                label: 'IDLH (즉시위험)',
+                value: scenario.zones.idlh,
+                color: 'var(--color-danger)',
+              },
+              {
+                label: 'ERPG-2 (대피권고)',
+                value: scenario.zones.erpg2,
+                color: 'var(--color-warning)',
+              },
+              {
+                label: 'ERPG-1 (주의권고)',
+                value: scenario.zones.erpg1,
+                color: 'var(--color-caution)',
+              },
+              { label: 'TWA (작업허용)', value: scenario.zones.twa, color: 'var(--color-success)' },
             ].map((z, i) => (
-              <div
-                key={i}
-                className="flex justify-between items-center bg-bg-base rounded-sm"
-                style={{ padding: '6px 8px', borderLeft: `3px solid ${z.color}` }}
-              >
-                <span className="text-[10px] text-fg-sub">{z.label}</span>
-                <span className="text-[11px] font-bold font-mono" style={{ color: z.color }}>
+              <div key={i} className="flex justify-between items-center bg-bg-base rounded-sm">
+                <span className="text-label-2 text-fg-sub">{z.label}</span>
+                <span className="text-label-2 font-bold font-mono" style={{ color: z.color }}>
                   {z.value}
                 </span>
               </div>
@@ -649,14 +639,14 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
 
         {/* Actions */}
         <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
-          <h4 className="text-[12px] font-bold mb-2.5">🛡 대응 권고 사항</h4>
+          <h4 className="text-label-1 font-bold mb-2.5">🛡 대응 권고 사항</h4>
           <div className="flex flex-col gap-1.5">
             {scenario.actions.map((action, i) => (
               <div
                 key={i}
-                className="flex items-start gap-1.5 text-[10px] text-fg-sub bg-bg-base rounded-sm leading-[1.4] py-[5px] px-2"
+                className="flex items-start gap-1.5 text-label-2 text-fg-sub bg-bg-base rounded-sm leading-[1.4] py-[5px] px-2"
               >
-                <span className="text-color-warning font-bold shrink-0">•</span>
+                <span className="text-color-accent font-bold shrink-0">•</span>
                 {action}
               </div>
             ))}
@@ -666,7 +656,7 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
 
       {/* Weather */}
       <div className="rounded-md border border-stroke bg-bg-elevated p-[14px]">
-        <h4 className="text-[12px] font-bold mb-2.5">🌊 기상 조건</h4>
+        <h4 className="text-label-1 font-bold mb-2.5">🌊 기상 조건</h4>
         <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(6, 1fr)' }}>
           {[
             { label: '풍향', value: scenario.weather.dir, icon: '🌬' },
@@ -677,9 +667,9 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
             { label: '혼합층', value: scenario.weather.mixHeight, icon: '📏' },
           ].map((w, i) => (
             <div key={i} className="text-center p-2 rounded-sm bg-bg-base">
-              <div className="text-sm mb-0.5">{w.icon}</div>
-              <div className="text-[12px] font-bold font-mono">{w.value}</div>
-              <div className="text-fg-disabled mt-0.5 text-[8px]">{w.label}</div>
+              <div className="text-title-3 mb-0.5">{w.icon}</div>
+              <div className="text-label-1 font-bold font-mono">{w.value}</div>
+              <div className="text-fg-disabled mt-0.5 text-caption">{w.label}</div>
             </div>
           ))}
         </div>
@@ -744,10 +734,10 @@ const CHART_DATA = [
 ];
 
 const SEV_COLOR: Record<Severity, string> = {
-  CRITICAL: '#f87171',
-  HIGH: '#fb923c',
-  MEDIUM: '#fbbf24',
-  RESOLVED: '#22c55e',
+  CRITICAL: 'var(--color-danger)',
+  HIGH: 'var(--color-warning)',
+  MEDIUM: 'var(--color-caution)',
+  RESOLVED: 'var(--color-success)',
 };
 
 function ScenarioComparison() {
@@ -776,13 +766,13 @@ function ScenarioComparison() {
       style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
     >
       {/* Title */}
-      <div className="text-[13px] font-bold mb-0.5">
+      <div className="text-title-4 font-bold mb-0.5">
         📊 시나리오 비교 — 시간대별 대기확산 지표 추이
       </div>
 
       {/* ── Chart 1: 최대 지표면 농도 추이 (Line + Area) ── */}
       <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
-        <div className="text-[11px] font-bold mb-2.5">최대 지표면 농도 (ppm) 변화 추이</div>
+        <div className="text-label-2 font-bold mb-2.5">최대 지표면 농도 (ppm) 변화 추이</div>
         <svg viewBox="0 0 500 140" className="w-full" style={{ height: '130px' }}>
           <defs>
             <linearGradient id="hnsGrad" x1="0" y1="0" x2="0" y2="1">
@@ -799,7 +789,7 @@ function ScenarioComparison() {
             y1={10 + (1 - 500 / concMax) * 110}
             x2="480"
             y2={10 + (1 - 500 / concMax) * 110}
-            stroke="rgba(239,68,68,.2)"
+            stroke="rgba(59,130,246,.2)"
             strokeWidth={0.5}
             strokeDasharray="4,3"
           />
@@ -817,7 +807,7 @@ function ScenarioComparison() {
             y1={10 + (1 - 300 / concMax) * 110}
             x2="480"
             y2={10 + (1 - 300 / concMax) * 110}
-            stroke="rgba(249,115,22,.2)"
+            stroke="rgba(6,182,212,.2)"
             strokeWidth={0.5}
             strokeDasharray="4,3"
           />
@@ -874,7 +864,7 @@ function ScenarioComparison() {
       <div className="grid grid-cols-2 gap-[14px]">
         {/* Chart 2: 위험 반경 변화 (Multi-line) */}
         <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
-          <div className="text-[11px] font-bold mb-2.5">위험 반경 (km) 변화</div>
+          <div className="text-label-2 font-bold mb-2.5">위험 반경 (km) 변화</div>
           <svg viewBox="0 0 260 100" className="w-full" style={{ height: '85px' }}>
             <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
             <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
@@ -946,7 +936,7 @@ function ScenarioComparison() {
 
         {/* Chart 3: 영향 인구 변화 (Bar) */}
         <div className="rounded-md border border-stroke bg-bg-card p-[14px]">
-          <div className="text-[11px] font-bold mb-2.5">영향 인구 (명) 변화</div>
+          <div className="text-label-2 font-bold mb-2.5">영향 인구 (명) 변화</div>
           <svg viewBox="0 0 240 100" className="w-full" style={{ height: '85px' }}>
             <line x1="30" y1="10" x2="30" y2="85" stroke="#21262d" strokeWidth={0.5} />
             <line x1="30" y1="85" x2="230" y2="85" stroke="#21262d" strokeWidth={0.5} />
@@ -987,14 +977,14 @@ function ScenarioComparison() {
 
       {/* ── Chart 4: 시나리오 비교표 ── */}
       <div className="rounded-md border border-stroke overflow-x-auto bg-bg-card p-[14px]">
-        <div className="text-[11px] font-bold mb-2.5">📋 시나리오 비교표</div>
-        <table className="w-full text-[10px] border-collapse">
+        <div className="text-label-2 font-bold mb-2.5">📋 시나리오 비교표</div>
+        <table className="w-full text-label-2 border-collapse">
           <thead>
             <tr className="bg-bg-base">
               {['지표', ...D.map((d) => `${d.id} (${d.label})`)].map((h, i) => (
                 <th
                   key={i}
-                  className="text-fg-disabled border-b border-stroke text-[9px] px-[10px] py-2"
+                  className="text-fg-disabled border-b border-stroke text-caption px-[10px] py-2"
                   style={{ textAlign: i === 0 ? 'left' : 'center' }}
                 >
                   {h}
@@ -1023,7 +1013,7 @@ function ScenarioComparison() {
                 <td
                   key={d.id}
                   className="text-center font-mono font-semibold p-1.5"
-                  style={{ color: d.idlh > 0 ? '#f87171' : '#22c55e' }}
+                  style={{ color: d.idlh > 0 ? 'var(--color-danger)' : 'var(--color-success)' }}
                 >
                   {d.idlh || 0}
                 </td>
@@ -1036,7 +1026,7 @@ function ScenarioComparison() {
                 <td
                   key={d.id}
                   className="text-center font-mono font-semibold p-1.5"
-                  style={{ color: d.erpg2 > 0 ? '#f97316' : '#22c55e' }}
+                  style={{ color: d.erpg2 > 0 ? 'var(--color-warning)' : 'var(--color-success)' }}
                 >
                   {d.erpg2 || 0}
                 </td>
@@ -1089,7 +1079,7 @@ function ScenarioMapOverlay() {
   return (
     <div className="flex-1 flex items-center justify-center flex-col gap-4">
       <div
-        className="flex items-center justify-center rounded-md border border-stroke text-fg-disabled text-[13px] bg-bg-elevated"
+        className="flex items-center justify-center rounded-md border border-stroke text-fg-disabled text-title-4 bg-bg-elevated"
         style={{
           width: '80%',
           maxWidth: '600px',
@@ -1100,14 +1090,14 @@ function ScenarioMapOverlay() {
       </div>
       <div className="flex gap-4">
         {[
-          { label: 'T+0h SW방향', color: '#ef4444' },
-          { label: 'T+1h SE 전환', color: '#f97316' },
-          { label: 'T+3h S방향', color: '#fbbf24' },
-          { label: 'T+6h 차단 후', color: '#22c55e' },
+          { label: 'T+0h SW방향', color: 'var(--color-danger)' },
+          { label: 'T+1h SE 전환', color: 'var(--color-warning)' },
+          { label: 'T+3h S방향', color: 'var(--color-caution)' },
+          { label: 'T+6h 차단 후', color: 'var(--color-success)' },
         ].map((item, i) => (
           <div key={i} className="flex items-center gap-1.5">
             <div className="w-3 h-3 rounded-full opacity-50" style={{ background: item.color }} />
-            <span className="text-[10px] text-fg-sub">{item.label}</span>
+            <span className="text-label-2 text-fg-sub">{item.label}</span>
           </div>
         ))}
       </div>
@@ -1172,24 +1162,18 @@ function NewScenarioModal({
       >
         {/* Header */}
         <div className="flex items-center gap-3 border-b border-stroke px-5 py-4">
-          <div
-            className="flex items-center justify-center text-base w-9 h-9 rounded-[10px]"
-            style={{
-              background: 'linear-gradient(135deg, rgba(249,115,22,0.2), rgba(239,68,68,0.15))',
-              border: '1px solid rgba(249,115,22,0.3)',
-            }}
-          >
+          <div className="flex items-center justify-center text-base w-9 h-9 rounded-[10px] bg-bg-elevated border border-stroke">
             🧪
           </div>
           <div className="flex-1">
-            <h2 className="text-[15px] font-bold m-0">신규 HNS 대기확산 시나리오</h2>
-            <div className="text-[10px] text-fg-disabled mt-0.5">
+            <h2 className="text-title-2 font-bold m-0">신규 HNS 대기확산 시나리오</h2>
+            <div className="text-label-2 text-fg-disabled mt-0.5">
               물질·기상·유출조건을 설정하여 새 시나리오를 생성합니다
             </div>
           </div>
           <button
             onClick={onClose}
-            className="flex items-center justify-center w-7 h-7 cursor-pointer text-fg-disabled text-[12px] rounded-sm border border-stroke bg-bg-card"
+            className="flex items-center justify-center w-7 h-7 cursor-pointer text-fg-disabled text-label-1 rounded-sm border border-stroke bg-bg-card"
           >
             ✕
           </button>
@@ -1244,12 +1228,10 @@ function NewScenarioModal({
             </ModalField>
             {/* Material properties card */}
             <div
-              className="grid p-2 rounded-sm"
+              className="grid p-2 rounded-sm bg-bg-elevated border border-stroke"
               style={{
                 gridTemplateColumns: 'repeat(5, 1fr)',
                 gap: '4px',
-                background: 'rgba(249,115,22,0.04)',
-                border: '1px solid rgba(249,115,22,0.15)',
               }}
             >
               {[
@@ -1260,8 +1242,8 @@ function NewScenarioModal({
                 { label: 'ERPG-2', value: mat.erpg2 },
               ].map((p, i) => (
                 <div key={i} className="text-center">
-                  <div className="text-fg-disabled text-[8px]">{p.label}</div>
-                  <div className="text-[10px] font-bold text-color-warning font-mono">
+                  <div className="text-fg-disabled text-caption">{p.label}</div>
+                  <div className="text-label-2 font-bold text-color-accent font-mono">
                     {p.value}
                   </div>
                 </div>
@@ -1406,17 +1388,15 @@ function NewScenarioModal({
         <div className="flex gap-2 border-t border-stroke px-5 py-[14px]">
           <button
             onClick={onClose}
-            className="flex-1 text-[12px] font-semibold cursor-pointer rounded-md text-fg-sub p-[10px] bg-bg-card border border-stroke"
+            className="flex-1 text-label-1 font-semibold cursor-pointer rounded-md text-fg-sub p-[10px] bg-bg-card border border-stroke"
           >
             취소
           </button>
           <button
             onClick={handleSubmit}
-            className="cursor-pointer rounded-md text-[12px] font-bold text-white p-[10px]"
+            className="cursor-pointer rounded-md text-label-1 font-bold text-static-white p-[10px] bg-color-navy hover:bg-color-navy-hover"
             style={{
               flex: 2,
-              background: 'linear-gradient(135deg, var(--color-warning), #ef4444)',
-              border: 'none',
               opacity: name.trim() ? 1 : 0.5,
             }}
           >
@@ -1432,10 +1412,7 @@ function NewScenarioModal({
 function ModalSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div>
-      <div
-        className="text-[11px] font-bold text-color-warning mb-2 pb-1"
-        style={{ borderBottom: '1px solid rgba(249,115,22,0.15)' }}
-      >
+      <div className="text-label-2 font-bold text-color-accent mb-2 pb-1 border-b border-stroke">
         {title}
       </div>
       <div className="flex flex-col gap-2">{children}</div>
@@ -1446,7 +1423,7 @@ function ModalSection({ title, children }: { title: string; children: React.Reac
 function ModalField({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div>
-      <div className="text-[9px] font-semibold text-fg-disabled mb-1">{label}</div>
+      <div className="text-caption font-semibold text-fg-disabled mb-1">{label}</div>
       {children}
     </div>
   );
diff --git a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
index f441a97..b57a5bb 100755
--- a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
+++ b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
@@ -67,7 +67,7 @@ const substances: HNSSubstance[] = [
     aegl2: '800 ppm',
     aegl3: '4,000 ppm',
     category: 'flammable_liquid',
-    color: '#ef4444',
+    color: '#06b6d4',
   },
   {
     name: '암모니아',
@@ -88,7 +88,7 @@ const substances: HNSSubstance[] = [
     aegl2: '160 ppm',
     aegl3: '1,100 ppm',
     category: 'toxic_gas',
-    color: '#a855f7',
+    color: '#06b6d4',
   },
   {
     name: '메탄올',
@@ -109,7 +109,7 @@ const substances: HNSSubstance[] = [
     aegl2: '2,100 ppm',
     aegl3: '14,000 ppm',
     category: 'flammable_liquid',
-    color: '#3b82f6',
+    color: '#06b6d4',
   },
   {
     name: '자일렌',
@@ -130,7 +130,7 @@ const substances: HNSSubstance[] = [
     aegl2: '920 ppm',
     aegl3: '2,500 ppm',
     category: 'flammable_liquid',
-    color: '#f97316',
+    color: '#06b6d4',
   },
   {
     name: '스타이렌',
@@ -151,7 +151,7 @@ const substances: HNSSubstance[] = [
     aegl2: '130 ppm',
     aegl3: '1,100 ppm',
     category: 'flammable_liquid',
-    color: '#eab308',
+    color: '#06b6d4',
   },
   {
     name: '아세톤',
@@ -172,7 +172,7 @@ const substances: HNSSubstance[] = [
     aegl2: '3,200 ppm',
     aegl3: '13,000 ppm',
     category: 'flammable_liquid',
-    color: '#22c55e',
+    color: '#06b6d4',
   },
   {
     name: '염소',
@@ -193,7 +193,7 @@ const substances: HNSSubstance[] = [
     aegl2: '2 ppm',
     aegl3: '20 ppm',
     category: 'toxic_gas',
-    color: '#ef4444',
+    color: '#06b6d4',
   },
   {
     name: '수소',
@@ -235,7 +235,7 @@ const substances: HNSSubstance[] = [
     aegl2: '17,000 ppm',
     aegl3: '33,000 ppm',
     category: 'flammable_gas',
-    color: '#f97316',
+    color: '#06b6d4',
   },
   {
     name: '에틸렌',
@@ -256,7 +256,7 @@ const substances: HNSSubstance[] = [
     aegl2: '-',
     aegl3: '-',
     category: 'flammable_gas',
-    color: '#a855f7',
+    color: '#06b6d4',
   },
   {
     name: '1,2-디클로로에탄',
@@ -277,7 +277,7 @@ const substances: HNSSubstance[] = [
     aegl2: '20 ppm',
     aegl3: '200 ppm',
     category: 'toxic_liquid',
-    color: '#ef4444',
+    color: '#06b6d4',
   },
   {
     name: '페놀',
@@ -298,7 +298,7 @@ const substances: HNSSubstance[] = [
     aegl2: '29 ppm',
     aegl3: '57 ppm',
     category: 'toxic_liquid',
-    color: '#22c55e',
+    color: '#06b6d4',
   },
 ];
 
@@ -479,15 +479,15 @@ ${styles}
                 width: 42,
                 height: 42,
                 borderRadius: 10,
-                background: 'linear-gradient(135deg,rgba(249,115,22,.2),rgba(239,68,68,.15))',
-                border: '1px solid rgba(249,115,22,.3)',
+                background: 'rgba(6,182,212,.08)',
+                border: '1px solid rgba(6,182,212,.3)',
               }}
             >
               🧬
             </div>
             <div>
               <div className="text-base font-bold">HNS 물질정보 데이터베이스</div>
-              <div className="text-[10px] text-fg-disabled mt-0.5">
+              <div className="text-label-2 text-fg-disabled mt-0.5">
                 SEBC 거동분류 · CHRIS/CAMEO DB · AEGL/ERPG/IDLH 기준 · 6,500+ 물질
               </div>
             </div>
@@ -498,14 +498,14 @@ ${styles}
               placeholder="물질명 또는 CAS 번호 검색..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="rounded-sm border border-stroke text-[10px] outline-none bg-bg-card px-3 py-1.5 w-[200px]"
+              className="rounded-sm border border-stroke text-label-2 outline-none bg-bg-card px-3 py-1.5 w-[200px]"
             />
             <button
               onClick={handleExportPDF}
-              className="rounded-sm text-[10px] font-semibold cursor-pointer text-color-warning px-3.5 py-1.5"
+              className="rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent px-3.5 py-1.5"
               style={{
-                border: '1px solid rgba(249,115,22,.3)',
-                background: 'rgba(249,115,22,.08)',
+                border: '1px solid rgba(6,182,212,.3)',
+                background: 'rgba(6,182,212,.08)',
               }}
             >
               📥 DB 다운로드
@@ -515,15 +515,18 @@ ${styles}
 
         {/* 서브탭 */}
         <div
-          className="flex rounded-md border border-stroke mb-5 bg-bg-card p-1 gap-[3px]"
+          className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-card border border-stroke"
           data-html2pdf-ignore
         >
           {tabLabels.map((tab, idx) => (
             <button
               key={idx}
               onClick={() => setActiveTab(idx)}
-              className={activeTab === idx ? 'wx-tbtn on' : 'wx-tbtn'}
-              style={{ flex: 1, padding: 8, fontSize: 11 }}
+              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
+                activeTab === idx
+                  ? 'border-stroke-light bg-bg-elevated text-fg'
+                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
+              }`}
             >
               {tab.icon} {tab.label}
             </button>
@@ -534,34 +537,26 @@ ${styles}
         {activeTab === 0 && (
           <div>
             <div
-              className="rounded-[12px] p-4 mb-4 relative overflow-hidden"
+              className="rounded-[12px] p-4 mb-4"
               style={{
-                background: 'linear-gradient(135deg,rgba(249,115,22,.05),rgba(6,182,212,.03))',
-                border: '1px solid rgba(249,115,22,.2)',
+                background: 'rgba(6,182,212,.04)',
+                border: '1px solid rgba(6,182,212,.2)',
               }}
             >
-              <div
-                className="absolute top-0 left-0 right-0"
-                style={{
-                  height: 3,
-                  background:
-                    'linear-gradient(90deg,var(--color-warning),var(--color-accent),var(--color-success),var(--color-tertiary))',
-                }}
-              />
               <div className="flex items-center gap-2 mb-3">
-                <span className="text-[13px] font-bold text-color-warning">
+                <span className="text-title-4 font-bold text-color-accent">
                   SEBC 해양 거동 분류 체계
                 </span>
                 <span
-                  className="text-[8px] font-semibold text-color-warning py-[2px] px-2 rounded-md"
-                  style={{ background: 'rgba(249,115,22,.1)' }}
+                  className="text-[8px] font-semibold text-color-accent py-[2px] px-2 rounded-md"
+                  style={{ background: 'rgba(6,182,212,.1)' }}
                 >
                   Standard European Behaviour Classification
                 </span>
               </div>
-              <div className="text-[10px] text-fg-sub leading-[1.7] mb-[14px]">
+              <div className="text-label-2 text-fg-sub leading-[1.7] mb-[14px]">
                 HNS 물질이 해양에 유출되었을 때의{' '}
-                <b className="text-color-warning">물리·화학적 거동</b>에 따라 분류하는 국제 표준
+                <b className="text-color-accent">물리·화학적 거동</b>에 따라 분류하는 국제 표준
                 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로
                 구분되며, 각 유형별로 대응 전략이 달라집니다.
               </div>
@@ -573,29 +568,29 @@ ${styles}
                 <div
                   className="p-3 rounded-md text-center"
                   style={{
-                    background: 'rgba(168,85,247,.06)',
-                    border: '1px solid rgba(168,85,247,.2)',
+                    background: 'rgba(6,182,212,.06)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   <div
-                    className="flex items-center justify-center text-[18px] mx-auto mb-2"
+                    className="flex items-center justify-center text-title-1 mx-auto mb-2"
                     style={{
                       width: 36,
                       height: 36,
                       borderRadius: '50%',
-                      background: 'rgba(168,85,247,.15)',
+                      background: 'rgba(6,182,212,.15)',
                     }}
                   >
                     💨
                   </div>
-                  <div className="text-[13px] font-mono font-extrabold text-color-tertiary">G</div>
-                  <div className="text-[11px] font-bold my-1">Gas</div>
+                  <div className="text-title-4 font-mono font-extrabold text-color-accent">G</div>
+                  <div className="text-label-2 font-bold my-1">Gas</div>
                   <div className="text-[8px] text-fg-sub leading-normal">
                     기체 상태로 대기 중 확산. 증기압이 높아 빠르게 증발
                   </div>
                   <div
-                    className="mt-1.5 text-[7px] font-semibold text-color-tertiary p-[3px]"
-                    style={{ background: 'rgba(168,85,247,.08)', borderRadius: 3 }}
+                    className="mt-1.5 text-[7px] font-semibold text-color-accent p-[3px]"
+                    style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}
                   >
                     대기확산 모델 적용
                   </div>
@@ -604,29 +599,29 @@ ${styles}
                 <div
                   className="p-3 rounded-md text-center"
                   style={{
-                    background: 'rgba(239,68,68,.06)',
-                    border: '1px solid rgba(239,68,68,.2)',
+                    background: 'rgba(6,182,212,.06)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   <div
-                    className="flex items-center justify-center text-[18px] mx-auto mb-2"
+                    className="flex items-center justify-center text-title-1 mx-auto mb-2"
                     style={{
                       width: 36,
                       height: 36,
                       borderRadius: '50%',
-                      background: 'rgba(239,68,68,.15)',
+                      background: 'rgba(6,182,212,.15)',
                     }}
                   >
                     🔥
                   </div>
-                  <div className="text-[13px] font-mono font-extrabold text-color-danger">E</div>
-                  <div className="text-[11px] font-bold my-1">Evaporator</div>
+                  <div className="text-title-4 font-mono font-extrabold text-color-accent">E</div>
+                  <div className="text-label-2 font-bold my-1">Evaporator</div>
                   <div className="text-[8px] text-fg-sub leading-normal">
                     해수면에서 증발. 부유 후 기화하여 독성 가스 생성
                   </div>
                   <div
-                    className="mt-1.5 text-[7px] font-semibold text-color-danger p-[3px]"
-                    style={{ background: 'rgba(239,68,68,.08)', borderRadius: 3 }}
+                    className="mt-1.5 text-[7px] font-semibold text-color-accent p-[3px]"
+                    style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}
                   >
                     대기+해양 복합 대응
                   </div>
@@ -635,29 +630,29 @@ ${styles}
                 <div
                   className="p-3 rounded-md text-center"
                   style={{
-                    background: 'rgba(234,179,8,.06)',
-                    border: '1px solid rgba(234,179,8,.2)',
+                    background: 'rgba(6,182,212,.06)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   <div
-                    className="flex items-center justify-center text-[18px] mx-auto mb-2"
+                    className="flex items-center justify-center text-title-1 mx-auto mb-2"
                     style={{
                       width: 36,
                       height: 36,
                       borderRadius: '50%',
-                      background: 'rgba(234,179,8,.15)',
+                      background: 'rgba(6,182,212,.15)',
                     }}
                   >
                     🟡
                   </div>
-                  <div className="text-[13px] font-mono font-extrabold text-color-caution">F</div>
-                  <div className="text-[11px] font-bold my-1">Floater</div>
+                  <div className="text-title-4 font-mono font-extrabold text-color-accent">F</div>
+                  <div className="text-label-2 font-bold my-1">Floater</div>
                   <div className="text-[8px] text-fg-sub leading-normal">
                     {'해수면 위에 부유. 비중 < 1.0, 불용성 물질'}
                   </div>
                   <div
-                    className="mt-1.5 text-[7px] font-semibold text-color-caution p-[3px]"
-                    style={{ background: 'rgba(234,179,8,.08)', borderRadius: 3 }}
+                    className="mt-1.5 text-[7px] font-semibold text-color-accent p-[3px]"
+                    style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}
                   >
                     오일펜스 유사 봉쇄
                   </div>
@@ -671,7 +666,7 @@ ${styles}
                   }}
                 >
                   <div
-                    className="flex items-center justify-center text-[18px] mx-auto mb-2"
+                    className="flex items-center justify-center text-title-1 mx-auto mb-2"
                     style={{
                       width: 36,
                       height: 36,
@@ -681,8 +676,8 @@ ${styles}
                   >
                     💧
                   </div>
-                  <div className="text-[13px] font-mono font-extrabold text-color-accent">D</div>
-                  <div className="text-[11px] font-bold my-1">Dissolver</div>
+                  <div className="text-title-4 font-mono font-extrabold text-color-accent">D</div>
+                  <div className="text-label-2 font-bold my-1">Dissolver</div>
                   <div className="text-[8px] text-fg-sub leading-normal">
                     해수에 용해. 수중 확산하여 넓은 범위 오염
                   </div>
@@ -697,29 +692,29 @@ ${styles}
                 <div
                   className="p-3 rounded-md text-center"
                   style={{
-                    background: 'rgba(34,197,94,.06)',
-                    border: '1px solid rgba(34,197,94,.2)',
+                    background: 'rgba(6,182,212,.06)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   <div
-                    className="flex items-center justify-center text-[18px] mx-auto mb-2"
+                    className="flex items-center justify-center text-title-1 mx-auto mb-2"
                     style={{
                       width: 36,
                       height: 36,
                       borderRadius: '50%',
-                      background: 'rgba(34,197,94,.15)',
+                      background: 'rgba(6,182,212,.15)',
                     }}
                   >
                     ⬇
                   </div>
-                  <div className="text-[13px] font-mono font-extrabold text-color-success">S</div>
-                  <div className="text-[11px] font-bold my-1">Sinker</div>
+                  <div className="text-title-4 font-mono font-extrabold text-color-accent">S</div>
+                  <div className="text-label-2 font-bold my-1">Sinker</div>
                   <div className="text-[8px] text-fg-sub leading-normal">
                     {'해저로 침강. 비중 > 1.0, 저층 오염 축적'}
                   </div>
                   <div
-                    className="mt-1.5 text-[7px] font-semibold text-color-success p-[3px]"
-                    style={{ background: 'rgba(34,197,94,.08)', borderRadius: 3 }}
+                    className="mt-1.5 text-[7px] font-semibold text-color-accent p-[3px]"
+                    style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}
                   >
                     저층 3D 모니터링 필수
                   </div>
@@ -727,23 +722,23 @@ ${styles}
               </div>
               {/* 복합 거동 */}
               <div className="rounded-md p-3 border border-stroke bg-bg-card">
-                <div className="text-[10px] font-bold mb-2">🔀 복합 거동 유형</div>
+                <div className="text-label-2 font-bold mb-2">🔀 복합 거동 유형</div>
                 <div
                   className="grid text-center text-[8px]"
                   style={{ gridTemplateColumns: 'repeat(5,1fr)', gap: 6 }}
                 >
                   <div className="rounded p-1.5 bg-bg-base">
-                    <span className="font-bold text-color-tertiary">GD</span>
+                    <span className="font-bold text-color-accent">GD</span>
                     <br />
                     <span className="text-fg-disabled">기체+용해</span>
                   </div>
                   <div className="rounded p-1.5 bg-bg-base">
-                    <span className="font-bold text-color-danger">ED</span>
+                    <span className="font-bold text-color-accent">ED</span>
                     <br />
                     <span className="text-fg-disabled">증발+용해</span>
                   </div>
                   <div className="rounded p-1.5 bg-bg-base">
-                    <span className="font-bold text-color-caution">FE</span>
+                    <span className="font-bold text-color-accent">FE</span>
                     <br />
                     <span className="text-fg-disabled">부유+증발</span>
                   </div>
@@ -753,7 +748,7 @@ ${styles}
                     <span className="text-fg-disabled">부유+증발+용해</span>
                   </div>
                   <div className="rounded p-1.5 bg-bg-base">
-                    <span className="font-bold text-color-success">SD</span>
+                    <span className="font-bold text-color-accent">SD</span>
                     <br />
                     <span className="text-fg-disabled">침강+용해</span>
                   </div>
@@ -772,17 +767,17 @@ ${styles}
                 <button
                   key={cat.id}
                   onClick={() => setSelectedCategory(cat.id)}
-                  className="rounded-sm text-[10px] font-semibold cursor-pointer"
+                  className="rounded-sm text-label-2 font-semibold cursor-pointer"
                   style={{
                     padding: '6px 12px',
                     border:
                       selectedCategory === cat.id
-                        ? '1px solid var(--color-warning)'
+                        ? '1px solid var(--color-accent)'
                         : '1px solid var(--stroke-default)',
                     color:
-                      selectedCategory === cat.id ? 'var(--color-warning)' : 'var(--fg-disabled)',
+                      selectedCategory === cat.id ? 'var(--color-accent)' : 'var(--fg-disabled)',
                     background:
-                      selectedCategory === cat.id ? 'rgba(249,115,22,.08)' : 'var(--bg-card)',
+                      selectedCategory === cat.id ? 'rgba(6,182,212,.08)' : 'var(--bg-card)',
                   }}
                 >
                   {cat.icon} {cat.label}
@@ -794,27 +789,24 @@ ${styles}
             <div className="grid grid-cols-2 gap-[14px] mb-4">
               {/* 암모니아 */}
               {filtered.find((s) => s.casNumber === '7664-41-7') && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-tertiary)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-tertiary">
+                      <span className="text-sm font-mono font-extrabold text-color-accent">
                         NH₃
                       </span>{' '}
-                      <span className="text-xs font-bold">암모니아</span>
+                      <span className="text-label-1 font-bold">암모니아</span>
                     </div>
                     <div className="flex gap-1">
                       <span
-                        className="text-[8px] font-semibold text-color-tertiary px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         G/GD
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-danger px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         독성
                       </span>
@@ -853,36 +845,36 @@ ${styles}
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(34,197,94,.06)',
-                        border: '1px solid rgba(34,197,94,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-success">AEGL-2</span>
+                      <span className="text-color-accent">AEGL-2</span>
                       <br />
                       <b>160 ppm</b>
                     </div>
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(249,115,22,.06)',
-                        border: '1px solid rgba(249,115,22,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-warning">ERPG-2</span>
+                      <span className="text-color-accent">ERPG-2</span>
                       <br />
                       <b>150 ppm</b>
                     </div>
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(239,68,68,.06)',
-                        border: '1px solid rgba(239,68,68,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-danger">IDLH</span>
+                      <span className="text-color-accent">IDLH</span>
                       <br />
                       <b>300 ppm</b>
                     </div>
@@ -896,16 +888,13 @@ ${styles}
 
               {/* 메탄올 */}
               {filtered.find((s) => s.casNumber === '67-56-1') && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-accent)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
                       <span className="text-sm font-mono font-extrabold text-color-accent">
                         CH₃OH
                       </span>{' '}
-                      <span className="text-xs font-bold">메탄올</span>
+                      <span className="text-label-1 font-bold">메탄올</span>
                     </div>
                     <div className="flex gap-1">
                       <span
@@ -915,8 +904,8 @@ ${styles}
                         ED
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-warning px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         인화성
                       </span>
@@ -941,7 +930,7 @@ ${styles}
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">인화점:</span>{' '}
-                      <span className="font-mono text-color-warning">11°C</span>
+                      <span className="font-mono text-color-accent">11°C</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">용해도:</span>{' '}
@@ -955,36 +944,36 @@ ${styles}
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(34,197,94,.06)',
-                        border: '1px solid rgba(34,197,94,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-success">AEGL-2</span>
+                      <span className="text-color-accent">AEGL-2</span>
                       <br />
                       <b>2,100 ppm</b>
                     </div>
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(249,115,22,.06)',
-                        border: '1px solid rgba(249,115,22,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-warning">ERPG-2</span>
+                      <span className="text-color-accent">ERPG-2</span>
                       <br />
                       <b>1,000 ppm</b>
                     </div>
                     <div
                       style={{
                         padding: 4,
-                        background: 'rgba(239,68,68,.06)',
-                        border: '1px solid rgba(239,68,68,.12)',
+                        background: 'rgba(6,182,212,.06)',
+                        border: '1px solid rgba(6,182,212,.12)',
                         borderRadius: 3,
                       }}
                     >
-                      <span className="text-color-danger">IDLH</span>
+                      <span className="text-color-accent">IDLH</span>
                       <br />
                       <b>6,000 ppm</b>
                     </div>
@@ -998,25 +987,22 @@ ${styles}
 
               {/* 수소 */}
               {filtered.find((s) => s.casNumber === '1333-74-0') && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-danger)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-danger">H₂</span>{' '}
-                      <span className="text-xs font-bold">수소</span>
+                      <span className="text-sm font-mono font-extrabold text-color-accent">H₂</span>{' '}
+                      <span className="text-label-1 font-bold">수소</span>
                     </div>
                     <div className="flex gap-1">
                       <span
-                        className="text-[8px] font-semibold text-color-tertiary px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         G
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-danger px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         폭발
                       </span>
@@ -1041,11 +1027,11 @@ ${styles}
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">LFL:</span>{' '}
-                      <span className="font-mono text-color-danger">4.0%</span>
+                      <span className="font-mono text-color-accent">4.0%</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">UFL:</span>{' '}
-                      <span className="font-mono text-color-danger">75.0%</span>
+                      <span className="font-mono text-color-accent">75.0%</span>
                     </div>
                   </div>
                   <div className="mt-1.5 text-[8px] text-fg-disabled leading-normal">
@@ -1059,27 +1045,24 @@ ${styles}
               {filtered.find(
                 (s) => s.nameEn === 'LPG (Propane/Butane)' || s.casNumber === '74-82-8',
               ) && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-warning)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-warning">
+                      <span className="text-sm font-mono font-extrabold text-color-accent">
                         CH₄
                       </span>{' '}
-                      <span className="text-xs font-bold">LNG (메탄)</span>
+                      <span className="text-label-1 font-bold">LNG (메탄)</span>
                     </div>
                     <div className="flex gap-1">
                       <span
-                        className="text-[8px] font-semibold text-color-tertiary px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         G
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-warning px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         인화/폭발
                       </span>
@@ -1104,11 +1087,11 @@ ${styles}
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">LFL:</span>{' '}
-                      <span className="font-mono text-color-warning">5.0%</span>
+                      <span className="font-mono text-color-accent">5.0%</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">UFL:</span>{' '}
-                      <span className="font-mono text-color-warning">15.0%</span>
+                      <span className="font-mono text-color-accent">15.0%</span>
                     </div>
                   </div>
                   <div className="mt-1.5 text-[8px] text-fg-disabled leading-normal">
@@ -1120,27 +1103,24 @@ ${styles}
 
               {/* 페놀 */}
               {filtered.find((s) => s.casNumber === '108-95-2' || s.name === '페놀') && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-success)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-success">
+                      <span className="text-sm font-mono font-extrabold text-color-accent">
                         C₆H₅OH
                       </span>{' '}
-                      <span className="text-xs font-bold">페놀</span>
+                      <span className="text-label-1 font-bold">페놀</span>
                     </div>
                     <div className="flex gap-1">
                       <span
-                        className="text-[8px] font-semibold text-color-success px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(34,197,94,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         S/SD
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-danger px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         독성
                       </span>
@@ -1161,11 +1141,11 @@ ${styles}
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">비중:</span>{' '}
-                      <span className="font-mono text-color-success">1.07 (침강)</span>
+                      <span className="font-mono text-color-accent">1.07 (침강)</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">인화점:</span>{' '}
-                      <span className="font-mono text-color-warning">79°C</span>
+                      <span className="font-mono text-color-accent">79°C</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">용해도:</span>{' '}
@@ -1173,35 +1153,32 @@ ${styles}
                     </div>
                   </div>
                   <div className="mt-1.5 text-[8px] text-fg-disabled leading-normal">
-                    비중 1.07 → <b className="text-color-success">Sinker 특성</b>으로 저층 축적.
-                    ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).
+                    비중 1.07 → <b className="text-color-accent">Sinker 특성</b>으로 저층 축적. ROMS
+                    검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).
                   </div>
                 </div>
               )}
 
               {/* 톨루엔 */}
               {filtered.find((s) => s.casNumber === '108-88-3') && (
-                <div
-                  className="rounded-[10px] p-[14px] border border-stroke bg-bg-card"
-                  style={{ borderLeft: '4px solid var(--color-caution)' }}
-                >
+                <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-caution">
+                      <span className="text-sm font-mono font-extrabold text-color-accent">
                         C₇H₈
                       </span>{' '}
-                      <span className="text-xs font-bold">톨루엔</span>
+                      <span className="text-label-1 font-bold">톨루엔</span>
                     </div>
                     <div className="flex gap-1">
                       <span
-                        className="text-[8px] font-semibold text-color-caution px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(234,179,8,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         FE
                       </span>
                       <span
-                        className="text-[8px] font-semibold text-color-warning px-1.5 py-0.5"
-                        style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}
+                        className="text-[8px] font-semibold text-color-accent px-1.5 py-0.5"
+                        style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}
                       >
                         인화성
                       </span>
@@ -1222,11 +1199,11 @@ ${styles}
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">비중:</span>{' '}
-                      <span className="font-mono text-color-caution">0.87 (부유)</span>
+                      <span className="font-mono text-color-accent">0.87 (부유)</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">인화점:</span>{' '}
-                      <span className="font-mono text-color-warning">4°C</span>
+                      <span className="font-mono text-color-accent">4°C</span>
                     </div>
                     <div className="rounded bg-bg-base px-1.5 py-1">
                       <span className="text-fg-disabled">용해도:</span>{' '}
@@ -1248,129 +1225,117 @@ ${styles}
           <div>
             <div className="grid grid-cols-2 gap-4 mb-4">
               {/* AEGL 기준 */}
-              <div
-                className="rounded-[10px] p-4 border border-stroke bg-bg-card"
-                style={{ borderTop: '3px solid var(--color-success)' }}
-              >
-                <div className="text-[13px] font-bold text-color-success mb-[10px]">
+              <div className="rounded-[10px] p-4 border border-stroke bg-bg-card">
+                <div className="text-title-4 font-bold text-color-accent mb-[10px]">
                   🟢 AEGL (Acute Exposure Guideline Level)
                 </div>
-                <div className="text-[9px] text-fg-disabled mb-[10px]">
+                <div className="text-caption text-fg-disabled mb-[10px]">
                   미국 EPA — 일반인 급성 노출 기준 (10분, 30분, 60분, 4시간, 8시간)
                 </div>
                 <div className="flex flex-col gap-1.5">
                   <div
                     className="rounded-sm px-2.5 py-2"
                     style={{
-                      background: 'rgba(34,197,94,.04)',
-                      border: '1px solid rgba(34,197,94,.12)',
-                      borderLeft: '4px solid var(--color-success)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.12)',
                     }}
                   >
-                    <div className="text-[11px] font-bold text-color-success">AEGL-1 (불쾌감)</div>
-                    <div className="text-[9px] text-fg-sub leading-normal">
+                    <div className="text-label-2 font-bold text-color-accent">AEGL-1 (불쾌감)</div>
+                    <div className="text-caption text-fg-sub leading-normal">
                       눈에 띄는 불쾌감, 자극 또는 비감각적 증상. 노출 중단 시 증상 소멸.
                     </div>
                   </div>
                   <div
                     className="rounded-sm px-2.5 py-2"
                     style={{
-                      background: 'rgba(249,115,22,.04)',
-                      border: '1px solid rgba(249,115,22,.12)',
-                      borderLeft: '4px solid var(--color-warning)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.12)',
                     }}
                   >
-                    <div className="text-[11px] font-bold text-color-warning">
+                    <div className="text-label-2 font-bold text-color-accent">
                       AEGL-2 (비가역적 영향)
                     </div>
-                    <div className="text-[9px] text-fg-sub leading-normal">
+                    <div className="text-caption text-fg-sub leading-normal">
                       비가역적·장기적 건강 영향 또는 대피 능력 저하.{' '}
-                      <b className="text-color-warning">대피 기준으로 사용</b>.
+                      <b className="text-color-accent">대피 기준으로 사용</b>.
                     </div>
                   </div>
                   <div
                     className="rounded-sm px-2.5 py-2"
                     style={{
-                      background: 'rgba(239,68,68,.04)',
-                      border: '1px solid rgba(239,68,68,.12)',
-                      borderLeft: '4px solid var(--color-danger)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.12)',
                     }}
                   >
-                    <div className="text-[11px] font-bold text-color-danger">
+                    <div className="text-label-2 font-bold text-color-accent">
                       AEGL-3 (생명 위협)
                     </div>
-                    <div className="text-[9px] text-fg-sub leading-normal">
+                    <div className="text-caption text-fg-sub leading-normal">
                       생명을 위협하는 건강 영향 또는 사망.{' '}
-                      <b className="text-color-danger">즉시 대피·격리 구역 설정</b>.
+                      <b className="text-color-accent">즉시 대피·격리 구역 설정</b>.
                     </div>
                   </div>
                 </div>
               </div>
 
               {/* ERPG / IDLH */}
-              <div
-                className="rounded-[10px] p-4 border border-stroke bg-bg-card"
-                style={{ borderTop: '3px solid var(--color-danger)' }}
-              >
-                <div className="text-[13px] font-bold text-color-danger mb-[10px]">
+              <div className="rounded-[10px] p-4 border border-stroke bg-bg-card">
+                <div className="text-title-4 font-bold text-color-accent mb-[10px]">
                   🔴 ERPG &amp; IDLH
                 </div>
                 <div className="flex flex-col gap-2">
                   <div>
-                    <div className="text-[10px] font-bold text-color-warning mb-1">
+                    <div className="text-label-2 font-bold text-color-accent mb-1">
                       ERPG (Emergency Response Planning Guideline)
                     </div>
-                    <div className="text-[9px] text-fg-disabled mb-1.5">
+                    <div className="text-caption text-fg-disabled mb-1.5">
                       AIHA 발행 — 1시간 노출 기준
                     </div>
                     <div className="flex flex-col gap-1">
                       <div
                         className="text-[8px] rounded px-2 py-1.5"
                         style={{
-                          background: 'rgba(34,197,94,.03)',
-                          border: '1px solid rgba(34,197,94,.1)',
-                          borderLeft: '3px solid var(--color-success)',
+                          background: 'rgba(6,182,212,.03)',
+                          border: '1px solid rgba(6,182,212,.1)',
                         }}
                       >
-                        <b className="text-color-success">ERPG-1</b> — 일시적 건강 영향, 냄새 감지
+                        <b className="text-color-accent">ERPG-1</b> — 일시적 건강 영향, 냄새 감지
                       </div>
                       <div
                         className="text-[8px] rounded px-2 py-1.5"
                         style={{
-                          background: 'rgba(249,115,22,.03)',
-                          border: '1px solid rgba(249,115,22,.1)',
-                          borderLeft: '3px solid var(--color-warning)',
+                          background: 'rgba(6,182,212,.03)',
+                          border: '1px solid rgba(6,182,212,.1)',
                         }}
                       >
-                        <b className="text-color-warning">ERPG-2</b> — 비가역적 영향, 대피 판단 기준
+                        <b className="text-color-accent">ERPG-2</b> — 비가역적 영향, 대피 판단 기준
                       </div>
                       <div
                         className="text-[8px] rounded px-2 py-1.5"
                         style={{
-                          background: 'rgba(239,68,68,.03)',
-                          border: '1px solid rgba(239,68,68,.1)',
-                          borderLeft: '3px solid var(--color-danger)',
+                          background: 'rgba(6,182,212,.03)',
+                          border: '1px solid rgba(6,182,212,.1)',
                         }}
                       >
-                        <b className="text-color-danger">ERPG-3</b> — 생명 위협 농도
+                        <b className="text-color-accent">ERPG-3</b> — 생명 위협 농도
                       </div>
                     </div>
                   </div>
                   <div
                     className="mt-1 rounded-sm p-2.5"
                     style={{
-                      background: 'rgba(239,68,68,.04)',
-                      border: '1px solid rgba(239,68,68,.15)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.15)',
                     }}
                   >
-                    <div className="text-[10px] font-bold text-color-danger mb-1">
+                    <div className="text-label-2 font-bold text-color-accent mb-1">
                       IDLH (Immediately Dangerous to Life or Health)
                     </div>
-                    <div className="text-[9px] text-fg-disabled mb-1">
+                    <div className="text-caption text-fg-disabled mb-1">
                       NIOSH — 30분 노출 시 생명·건강에 즉각적 위험
                     </div>
-                    <div className="text-[9px] text-fg-sub leading-normal">
-                      <b className="text-color-danger">최대 허용 노출 한계</b>로서 이 농도를
+                    <div className="text-caption text-fg-sub leading-normal">
+                      <b className="text-color-accent">최대 허용 노출 한계</b>로서 이 농도를
                       초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동
                       설정의 기준값으로 사용.
                     </div>
@@ -1381,50 +1346,50 @@ ${styles}
 
             {/* 물질별 위험도 비교표 */}
             <div className="rounded-[10px] p-4 border border-stroke bg-bg-card">
-              <div className="text-xs font-bold mb-3">
+              <div className="text-label-1 font-bold mb-3">
                 📊 주요 HNS 물질별 위험도 기준 비교 (ppm)
               </div>
-              <table className="w-full border-collapse text-[9px]">
+              <table className="w-full border-collapse text-caption">
                 <thead>
-                  <tr style={{ background: 'rgba(168,85,247,.06)' }}>
+                  <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                     <th
-                      className="text-color-tertiary text-left"
+                      className="text-color-accent text-left"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       물질
                     </th>
                     <th
-                      className="text-color-success text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       AEGL-1
                     </th>
                     <th
-                      className="text-color-warning text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       AEGL-2
                     </th>
                     <th
-                      className="text-color-danger text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       AEGL-3
                     </th>
                     <th
-                      className="text-color-warning text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       ERPG-2
                     </th>
                     <th
-                      className="text-color-danger text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       IDLH
                     </th>
                     <th
-                      className="text-color-warning text-center"
+                      className="text-color-accent text-center"
                       style={{ padding: '7px 8px', borderBottom: '2px solid var(--stroke-light)' }}
                     >
                       LFL(%)
@@ -1439,64 +1404,64 @@ ${styles}
                 </thead>
                 <tbody>
                   <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
-                    <td className="font-semibold text-color-tertiary py-1.5 px-2">NH₃ 암모니아</td>
-                    <td className="text-center font-mono text-color-success">30</td>
-                    <td className="text-center font-mono text-color-warning">160</td>
-                    <td className="text-center font-mono text-color-danger">1,100</td>
+                    <td className="font-semibold text-color-accent py-1.5 px-2">NH₃ 암모니아</td>
+                    <td className="text-center font-mono text-color-accent">30</td>
+                    <td className="text-center font-mono text-color-accent">160</td>
+                    <td className="text-center font-mono text-color-accent">1,100</td>
                     <td className="text-center font-mono">150</td>
-                    <td className="text-center font-mono text-color-danger">300</td>
+                    <td className="text-center font-mono text-color-accent">300</td>
                     <td className="text-center font-mono">15.0</td>
-                    <td className="text-center font-semibold text-color-tertiary">G/GD</td>
+                    <td className="text-center font-semibold text-color-accent">G/GD</td>
                   </tr>
                   <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                     <td className="font-semibold text-color-accent py-1.5 px-2">CH₃OH 메탄올</td>
-                    <td className="text-center font-mono text-color-success">530</td>
-                    <td className="text-center font-mono text-color-warning">2,100</td>
-                    <td className="text-center font-mono text-color-danger">14,000</td>
+                    <td className="text-center font-mono text-color-accent">530</td>
+                    <td className="text-center font-mono text-color-accent">2,100</td>
+                    <td className="text-center font-mono text-color-accent">14,000</td>
                     <td className="text-center font-mono">1,000</td>
-                    <td className="text-center font-mono text-color-danger">6,000</td>
+                    <td className="text-center font-mono text-color-accent">6,000</td>
                     <td className="text-center font-mono">6.0</td>
                     <td className="text-center font-semibold text-color-accent">ED</td>
                   </tr>
                   <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
-                    <td className="font-semibold text-color-danger py-1.5 px-2">H₂ 수소</td>
+                    <td className="font-semibold text-color-accent py-1.5 px-2">H₂ 수소</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
-                    <td className="text-center font-mono font-bold text-color-danger">4.0</td>
-                    <td className="text-center font-semibold text-color-tertiary">G</td>
+                    <td className="text-center font-mono font-bold text-color-accent">4.0</td>
+                    <td className="text-center font-semibold text-color-accent">G</td>
                   </tr>
                   <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
-                    <td className="font-semibold text-color-warning py-1.5 px-2">CH₄ LNG</td>
+                    <td className="font-semibold text-color-accent py-1.5 px-2">CH₄ LNG</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
                     <td className="text-center text-fg-disabled">-</td>
-                    <td className="text-center font-mono text-color-warning">5.0</td>
-                    <td className="text-center font-semibold text-color-tertiary">G</td>
+                    <td className="text-center font-mono text-color-accent">5.0</td>
+                    <td className="text-center font-semibold text-color-accent">G</td>
                   </tr>
                   <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
-                    <td className="font-semibold text-color-success py-1.5 px-2">C₆H₅OH 페놀</td>
-                    <td className="text-center font-mono text-color-success">19</td>
-                    <td className="text-center font-mono text-color-warning">29</td>
-                    <td className="text-center font-mono text-color-danger">57</td>
+                    <td className="font-semibold text-color-accent py-1.5 px-2">C₆H₅OH 페놀</td>
+                    <td className="text-center font-mono text-color-accent">19</td>
+                    <td className="text-center font-mono text-color-accent">29</td>
+                    <td className="text-center font-mono text-color-accent">57</td>
                     <td className="text-center font-mono">50</td>
-                    <td className="text-center font-mono text-color-danger">250</td>
+                    <td className="text-center font-mono text-color-accent">250</td>
                     <td className="text-center font-mono">1.8</td>
-                    <td className="text-center font-semibold text-color-success">S/SD</td>
+                    <td className="text-center font-semibold text-color-accent">S/SD</td>
                   </tr>
                   <tr>
-                    <td className="font-semibold text-color-caution py-1.5 px-2">C₇H₈ 톨루엔</td>
-                    <td className="text-center font-mono text-color-success">67</td>
-                    <td className="text-center font-mono text-color-warning">560</td>
-                    <td className="text-center font-mono text-color-danger">3,700</td>
+                    <td className="font-semibold text-color-accent py-1.5 px-2">C₇H₈ 톨루엔</td>
+                    <td className="text-center font-mono text-color-accent">67</td>
+                    <td className="text-center font-mono text-color-accent">560</td>
+                    <td className="text-center font-mono text-color-accent">3,700</td>
                     <td className="text-center font-mono">300</td>
-                    <td className="text-center font-mono text-color-danger">500</td>
+                    <td className="text-center font-mono text-color-accent">500</td>
                     <td className="text-center font-mono">1.1</td>
-                    <td className="text-center font-semibold text-color-caution">FE</td>
+                    <td className="text-center font-semibold text-color-accent">FE</td>
                   </tr>
                 </tbody>
               </table>
@@ -1513,24 +1478,24 @@ ${styles}
             {/* ── 검색창 ── */}
             <div className="rounded-[10px] p-4 mb-4 border border-stroke bg-bg-card">
               <div className="flex items-center justify-between mb-[14px]">
-                <div className="text-[13px] font-bold">
+                <div className="text-title-4 font-bold">
                   🔍 HNS 물질 통합 검색{' '}
-                  <span className="text-[9px] font-normal text-fg-disabled">
+                  <span className="text-caption font-normal text-fg-disabled">
                     (화물약어·제품명·동의어·CAS·UN번호 통합)
                   </span>
                 </div>
                 <div className="flex gap-1">
                   <button
-                    className="text-[9px] font-semibold cursor-pointer text-color-warning rounded px-2.5 py-[5px]"
+                    className="text-caption font-semibold cursor-pointer text-color-accent rounded px-2.5 py-[5px]"
                     style={{
-                      border: '1px solid rgba(249,115,22,.25)',
-                      background: 'rgba(249,115,22,.08)',
+                      border: '1px solid rgba(6,182,212,.25)',
+                      background: 'rgba(6,182,212,.08)',
                     }}
                   >
                     📥 DB 다운로드
                   </button>
                   <button
-                    className="text-[9px] font-semibold cursor-pointer text-color-accent rounded px-2.5 py-[5px]"
+                    className="text-caption font-semibold cursor-pointer text-color-accent rounded px-2.5 py-[5px]"
                     style={{
                       border: '1px solid rgba(6,182,212,.25)',
                       background: 'rgba(6,182,212,.08)',
@@ -1542,14 +1507,14 @@ ${styles}
               </div>
               <div className="flex gap-2 mb-[10px] items-center">
                 <div className="shrink-0 flex items-center gap-1">
-                  <span className="text-[9px] font-semibold text-fg-disabled">구분:</span>
+                  <span className="text-caption font-semibold text-fg-disabled">구분:</span>
                   <select
                     value={hmsSearchType}
                     onChange={(e) => {
                       setHmsSearchType(e.target.value as typeof hmsSearchType);
                       setHmsPage(1);
                     }}
-                    className="rounded-sm border border-stroke text-[12px] outline-none bg-bg-base px-3 py-2"
+                    className="rounded-sm border border-stroke text-label-1 outline-none bg-bg-base px-3 py-2"
                     style={{ minWidth: 140 }}
                   >
                     <option value="all">전체 통합검색</option>
@@ -1578,23 +1543,23 @@ ${styles}
                             ? 'UN번호 입력 (예: 1114)'
                             : '검색어 입력'
                   }
-                  className="flex-1 rounded-sm border border-stroke text-[13px] outline-none bg-bg-base px-3 py-2"
+                  className="flex-1 rounded-sm border border-stroke text-title-4 outline-none bg-bg-base px-3 py-2"
                 />
                 <button
                   onClick={() => setHmsPage(1)}
-                  className="text-[13px] font-bold cursor-pointer shrink-0 rounded-sm text-white px-5 py-2"
+                  className="text-title-4 font-bold cursor-pointer shrink-0 rounded-sm text-color-accent px-5 py-2"
                   style={{
-                    border: 'none',
-                    background: 'linear-gradient(135deg,var(--color-warning),var(--color-danger))',
+                    border: '1px solid rgba(6,182,212,.3)',
+                    background: 'rgba(6,182,212,.08)',
                   }}
                 >
                   🔎 검색
                 </button>
               </div>
               <div className="text-[8px] text-fg-disabled leading-[1.6]">
-                ※ 국문명·영문명 검색 시 <b className="text-color-warning">동의어까지 검색</b>{' '}
+                ※ 국문명·영문명 검색 시 <b className="text-color-accent">동의어까지 검색</b>{' '}
                 &nbsp;|&nbsp; 약자/제품명 검색 시{' '}
-                <b className="text-color-warning">부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총{' '}
+                <b className="text-color-accent">부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총{' '}
                 <b className="text-color-accent">1,222종</b> 등록
               </div>
             </div>
@@ -1602,9 +1567,9 @@ ${styles}
             {/* ── 검색 결과 테이블 ── */}
             <div className="rounded-[10px] p-4 mb-4 border border-stroke bg-bg-card">
               <div className="flex items-center justify-between mb-[10px]">
-                <div className="text-[13px] font-bold">
+                <div className="text-title-4 font-bold">
                   📋 검색 결과{' '}
-                  <span className="text-[11px] font-normal text-fg-disabled">
+                  <span className="text-label-2 font-normal text-fg-disabled">
                     — {hmsTotal}건 조회
                   </span>
                 </div>
@@ -1614,7 +1579,7 @@ ${styles}
                     setHmsFilterSebc(e.target.value);
                     setHmsPage(1);
                   }}
-                  className="rounded border border-stroke text-[11px] text-fg-sub outline-none bg-bg-base px-2.5 py-1"
+                  className="rounded border border-stroke text-label-2 text-fg-sub outline-none bg-bg-base px-2.5 py-1"
                 >
                   <option>전체 거동분류</option>
                   <option>G (Gas)</option>
@@ -1625,11 +1590,11 @@ ${styles}
                 </select>
               </div>
               <div className="overflow-x-auto">
-                <table className="w-full border-collapse text-[11px]">
+                <table className="w-full border-collapse text-label-2">
                   <thead>
-                    <tr style={{ background: 'rgba(249,115,22,.06)' }}>
+                    <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                       <th
-                        className="text-color-warning text-left"
+                        className="text-color-accent text-left"
                         style={{
                           padding: '8px 8px',
                           borderBottom: '2px solid var(--stroke-light)',
@@ -1639,7 +1604,7 @@ ${styles}
                         No.
                       </th>
                       <th
-                        className="text-color-warning text-left"
+                        className="text-color-accent text-left"
                         style={{
                           padding: '8px 8px',
                           borderBottom: '2px solid var(--stroke-light)',
@@ -1675,7 +1640,7 @@ ${styles}
                         국문명
                       </th>
                       <th
-                        className="text-fg-sub text-left text-[10px]"
+                        className="text-fg-sub text-left text-label-2"
                         style={{
                           padding: '8px 8px',
                           borderBottom: '2px solid var(--stroke-light)',
@@ -1728,7 +1693,7 @@ ${styles}
                               background: isSel ? 'rgba(6,182,212,.04)' : undefined,
                             }}
                             onMouseOver={(e) => {
-                              if (!isSel) e.currentTarget.style.background = 'rgba(249,115,22,.03)';
+                              if (!isSel) e.currentTarget.style.background = 'rgba(6,182,212,.03)';
                             }}
                             onMouseOut={(e) => {
                               if (!isSel) e.currentTarget.style.background = '';
@@ -1737,11 +1702,11 @@ ${styles}
                             <td className="font-mono text-fg-disabled px-2 py-2">
                               {(hmsPage - 1) * HMS_PER_PAGE + idx + 1}
                             </td>
-                            <td className="font-semibold font-mono text-color-warning px-2 py-2">
+                            <td className="font-semibold font-mono text-color-accent px-2 py-2">
                               {s.abbreviation}
                             </td>
                             <td className="px-2 py-2">{s.nameEn}</td>
-                            <td className="text-fg-disabled text-[10px] px-2 py-2">
+                            <td className="text-fg-disabled text-label-2 px-2 py-2">
                               {s.synonymsEn}
                             </td>
                             <td className="font-semibold px-2 py-2">
@@ -1756,7 +1721,7 @@ ${styles}
                                 {s.nameKr}
                               </span>
                             </td>
-                            <td className="text-fg-disabled text-[10px] px-2 py-2">
+                            <td className="text-fg-disabled text-label-2 px-2 py-2">
                               {s.synonymsKr}
                             </td>
                             <td className="text-center font-mono">{s.unNumber}</td>
@@ -1774,12 +1739,12 @@ ${styles}
                   </tbody>
                 </table>
               </div>
-              <div className="mt-[10px] text-center text-[11px] text-fg-disabled">
+              <div className="mt-[10px] text-center text-label-2 text-fg-disabled">
                 <div className="flex items-center justify-center gap-1 mb-1.5">
                   <button
                     onClick={() => setHmsPage(1)}
                     disabled={hmsPage <= 1}
-                    className="rounded cursor-pointer border border-stroke text-[11px] text-fg-sub bg-bg-base px-2.5 py-1"
+                    className="rounded cursor-pointer border border-stroke text-label-2 text-fg-sub bg-bg-base px-2.5 py-1"
                     style={{ opacity: hmsPage <= 1 ? 0.4 : 1 }}
                   >
                     ◀◀
@@ -1787,7 +1752,7 @@ ${styles}
                   <button
                     onClick={() => setHmsPage((p) => Math.max(1, p - 1))}
                     disabled={hmsPage <= 1}
-                    className="rounded cursor-pointer border border-stroke text-[11px] text-fg-sub bg-bg-base px-3 py-1"
+                    className="rounded cursor-pointer border border-stroke text-label-2 text-fg-sub bg-bg-base px-3 py-1"
                     style={{ opacity: hmsPage <= 1 ? 0.4 : 1 }}
                   >
                     ◀
@@ -1806,10 +1771,10 @@ ${styles}
                       <button
                         key={p}
                         onClick={() => setHmsPage(p)}
-                        className="rounded cursor-pointer border border-stroke text-[11px] px-3 py-1"
+                        className="rounded cursor-pointer border border-stroke text-label-2 px-3 py-1"
                         style={{
-                          background: p === hmsPage ? 'rgba(249,115,22,.15)' : 'var(--bg-base)',
-                          color: p === hmsPage ? 'var(--color-warning)' : 'var(--fg-sub)',
+                          background: p === hmsPage ? 'rgba(6,182,212,.15)' : 'var(--bg-base)',
+                          color: p === hmsPage ? 'var(--color-accent)' : 'var(--fg-sub)',
                           fontWeight: p === hmsPage ? 700 : 400,
                         }}
                       >
@@ -1820,7 +1785,7 @@ ${styles}
                   <button
                     onClick={() => setHmsPage((p) => Math.min(hmsTotalPages, p + 1))}
                     disabled={hmsPage >= hmsTotalPages}
-                    className="rounded cursor-pointer border border-stroke text-[11px] text-fg-sub bg-bg-base px-3 py-1"
+                    className="rounded cursor-pointer border border-stroke text-label-2 text-fg-sub bg-bg-base px-3 py-1"
                     style={{ opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}
                   >
                     ▶
@@ -1828,7 +1793,7 @@ ${styles}
                   <button
                     onClick={() => setHmsPage(hmsTotalPages)}
                     disabled={hmsPage >= hmsTotalPages}
-                    className="rounded cursor-pointer border border-stroke text-[11px] text-fg-sub bg-bg-base px-2.5 py-1"
+                    className="rounded cursor-pointer border border-stroke text-label-2 text-fg-sub bg-bg-base px-2.5 py-1"
                     style={{ opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}
                   >
                     ▶▶
@@ -1838,7 +1803,7 @@ ${styles}
                   </span>
                 </div>
                 <span>
-                  총 <b className="text-color-warning">{hmsTotal.toLocaleString()}</b>종 등록
+                  총 <b className="text-color-accent">{hmsTotal.toLocaleString()}</b>종 등록
                 </span>
               </div>
             </div>
@@ -1877,15 +1842,15 @@ function HmsDetailPanel({
   const nfpa = s.nfpa;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const sebcColor = s.sebc.startsWith('G')
-    ? 'var(--color-tertiary)'
+    ? 'var(--color-accent)'
     : s.sebc.startsWith('E')
-      ? 'var(--color-danger)'
+      ? 'var(--color-accent)'
       : s.sebc.startsWith('F')
         ? 'var(--color-caution)'
         : s.sebc.startsWith('D')
           ? 'var(--color-accent)'
           : s.sebc.startsWith('S')
-            ? 'var(--color-success)'
+            ? 'var(--color-accent)'
             : 'var(--fg-sub)';
 
   return (
@@ -1897,20 +1862,14 @@ function HmsDetailPanel({
       }}
     >
       {/* Tab Navigation */}
-      <div
-        className="flex border-b border-stroke"
-        style={{ background: 'linear-gradient(90deg,rgba(6,182,212,.06),rgba(249,115,22,.04))' }}
-      >
+      <div className="flex border-b border-stroke" style={{ background: 'rgba(6,182,212,.05)' }}>
         {tabLabels.map((label, i) => (
           <button
             key={i}
             onClick={() => onTabChange(i)}
+            className="flex-1 py-2.5 px-1 text-caption cursor-pointer"
             style={{
-              flex: 1,
-              padding: 10,
-              fontSize: 10,
               fontWeight: activeTab === i ? 700 : 600,
-              cursor: 'pointer',
               border: 'none',
               borderBottom: `2px solid ${activeTab === i ? 'var(--color-accent)' : 'transparent'}`,
               background: activeTab === i ? 'rgba(6,182,212,.06)' : 'transparent',
@@ -1933,20 +1892,20 @@ function HmsDetailPanel({
                 width: 52,
                 height: 52,
                 borderRadius: 10,
-                background: 'linear-gradient(135deg,rgba(6,182,212,.15),rgba(249,115,22,.1))',
+                background: 'rgba(6,182,212,.12)',
                 border: '1px solid rgba(6,182,212,.25)',
               }}
             >
               🧪
             </div>
             <div className="flex-1">
-              <div style={{ fontSize: 18, fontWeight: 800 }}>
+              <div className="text-title-2 font-extrabold">
                 {s.nameKr}{' '}
-                <span className="text-xs font-normal text-fg-disabled">({s.nameEn})</span>
+                <span className="text-label-1 font-normal text-fg-disabled">({s.nameEn})</span>
               </div>
               <div className="flex flex-wrap gap-1.5 mt-1.5">
                 <span
-                  className="text-[9px] font-semibold font-mono text-color-accent rounded py-[2px] px-2"
+                  className="text-caption font-semibold font-mono text-color-accent rounded py-[2px] px-2"
                   style={{
                     background: 'rgba(6,182,212,.1)',
                     border: '1px solid rgba(6,182,212,.2)',
@@ -1955,34 +1914,34 @@ function HmsDetailPanel({
                   CAS: {s.casNumber}
                 </span>
                 <span
-                  className="text-[9px] font-semibold font-mono text-color-warning rounded py-[2px] px-2"
+                  className="text-caption font-semibold font-mono text-color-accent rounded py-[2px] px-2"
                   style={{
-                    background: 'rgba(249,115,22,.1)',
-                    border: '1px solid rgba(249,115,22,.2)',
+                    background: 'rgba(6,182,212,.1)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   UN: {s.unNumber}
                 </span>
                 <span
-                  className="text-[9px] font-semibold text-color-tertiary rounded py-[2px] px-2"
+                  className="text-caption font-semibold text-color-accent rounded py-[2px] px-2"
                   style={{
-                    background: 'rgba(168,85,247,.1)',
-                    border: '1px solid rgba(168,85,247,.2)',
+                    background: 'rgba(6,182,212,.1)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   운송방법: {s.transportMethod}
                 </span>
                 <span
-                  className="text-[9px] font-semibold text-color-success rounded py-[2px] px-2"
+                  className="text-caption font-semibold text-color-accent rounded py-[2px] px-2"
                   style={{
-                    background: 'rgba(34,197,94,.1)',
-                    border: '1px solid rgba(34,197,94,.2)',
+                    background: 'rgba(6,182,212,.1)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
                   SEBC: {s.sebc}
                 </span>
               </div>
-              <div className="text-[9px] text-fg-disabled mt-1">
+              <div className="text-caption text-fg-disabled mt-1">
                 <b>유사명:</b> {s.synonymsKr} &nbsp;|&nbsp; <b>특성:</b> {s.hazardClass}
               </div>
             </div>
@@ -1991,33 +1950,32 @@ function HmsDetailPanel({
           <div className="grid grid-cols-2 gap-[14px]">
             {/* Left: 물리·화학적 특성 */}
             <div>
-              <div className="text-[11px] font-bold text-color-warning mb-2">
+              <div className="text-label-2 font-bold text-color-accent mb-2">
                 ⚗️ 물리·화학적 특성
               </div>
-              <div className="grid grid-cols-2 gap-1 text-[9px]">
+              <div className="grid grid-cols-2 gap-1 text-caption">
                 {(
                   [
                     ['용도', s.usage, 'var(--color-accent)'],
                     ['상태', s.state, 'var(--color-accent)'],
-                    ['색상', s.color, 'var(--color-warning)'],
-                    ['냄새', s.odor, 'var(--color-warning)'],
-                    ['인화점', s.flashPoint, 'var(--color-danger)'],
-                    ['발화점', s.autoIgnition, 'var(--color-danger)'],
-                    ['끓는점', s.boilingPoint, 'var(--color-tertiary)'],
-                    ['비중 (물=1)', s.density, 'var(--color-tertiary)'],
-                    ['용해도', s.solubility, 'var(--color-success)'],
-                    ['증기압', s.vaporPressure, 'var(--color-success)'],
+                    ['색상', s.color, 'var(--color-accent)'],
+                    ['냄새', s.odor, 'var(--color-accent)'],
+                    ['인화점', s.flashPoint, 'var(--color-accent)'],
+                    ['발화점', s.autoIgnition, 'var(--color-accent)'],
+                    ['끓는점', s.boilingPoint, 'var(--color-accent)'],
+                    ['비중 (물=1)', s.density, 'var(--color-accent)'],
+                    ['용해도', s.solubility, 'var(--color-accent)'],
+                    ['증기압', s.vaporPressure, 'var(--color-accent)'],
                     ['증기밀도 (공기=1)', s.vaporDensity, 'var(--color-caution)'],
                     ['폭발범위', s.explosionRange, 'var(--color-caution)'],
                   ] as [string, string, string][]
-                ).map(([label, value, borderColor]) => (
+                ).map(([label, value]) => (
                   <div
                     key={label}
                     style={{
                       padding: '6px 8px',
                       background: 'var(--bg-base)',
                       borderRadius: 4,
-                      borderLeft: `3px solid ${borderColor}`,
                     }}
                   >
                     <span className="text-fg-disabled">{label}</span>
@@ -2026,7 +1984,7 @@ function HmsDetailPanel({
                       style={{
                         color:
                           label.includes('인화') || label.includes('폭발')
-                            ? 'var(--color-danger)'
+                            ? 'var(--color-accent)'
                             : label.includes('용해')
                               ? 'var(--color-accent)'
                               : 'var(--fg-default)',
@@ -2041,7 +1999,7 @@ function HmsDetailPanel({
 
             {/* Right: NFPA + 위험등급 */}
             <div>
-              <div className="text-[11px] font-bold text-color-danger mb-2">
+              <div className="text-label-2 font-bold text-color-accent mb-2">
                 ⚠️ 위험등급·농도기준
               </div>
               <div className="flex gap-[14px] items-start mb-3">
@@ -2055,35 +2013,35 @@ function HmsDetailPanel({
                     />
                     <polygon
                       points="50,5 72,28 50,50 28,28"
-                      fill="rgba(239,68,68,.2)"
-                      stroke="rgba(239,68,68,.5)"
+                      fill="rgba(6,182,212,.2)"
+                      stroke="rgba(6,182,212,.5)"
                       strokeWidth={1}
                     />
                     <text
                       x={50}
                       y={32}
                       textAnchor="middle"
-                      fill="#f87171"
+                      fill="var(--color-accent)"
                       fontSize={16}
                       fontWeight={800}
-                      fontFamily="monospace"
+                      fontFamily="var(--font-mono)"
                     >
                       {nfpa.health}
                     </text>
                     <polygon
                       points="72,28 95,50 72,72 50,50"
-                      fill="rgba(234,179,8,.2)"
-                      stroke="rgba(234,179,8,.5)"
+                      fill="rgba(6,182,212,.2)"
+                      stroke="rgba(6,182,212,.5)"
                       strokeWidth={1}
                     />
                     <text
                       x={77}
                       y={55}
                       textAnchor="middle"
-                      fill="#fbbf24"
+                      fill="var(--color-accent)"
                       fontSize={16}
                       fontWeight={800}
-                      fontFamily="monospace"
+                      fontFamily="var(--font-mono)"
                     >
                       {nfpa.fire}
                     </text>
@@ -2097,27 +2055,27 @@ function HmsDetailPanel({
                       x={50}
                       y={78}
                       textAnchor="middle"
-                      fill="#e2e8f0"
+                      fill="var(--fg-sub)"
                       fontSize={12}
                       fontWeight={700}
-                      fontFamily="sans-serif"
+                      fontFamily="var(--font-korean)"
                     >
                       {nfpa.special}
                     </text>
                     <polygon
                       points="5,50 28,28 50,50 28,72"
-                      fill="rgba(59,130,246,.2)"
-                      stroke="rgba(59,130,246,.5)"
+                      fill="rgba(6,182,212,.2)"
+                      stroke="rgba(6,182,212,.5)"
                       strokeWidth={1}
                     />
                     <text
                       x={23}
                       y={55}
                       textAnchor="middle"
-                      fill="#60a5fa"
+                      fill="var(--color-accent)"
                       fontSize={16}
                       fontWeight={800}
-                      fontFamily="monospace"
+                      fontFamily="var(--font-mono)"
                     >
                       {nfpa.reactivity}
                     </text>
@@ -2130,12 +2088,12 @@ function HmsDetailPanel({
                   <div
                     style={{
                       padding: '4px 8px',
-                      background: 'rgba(239,68,68,.06)',
-                      border: '1px solid rgba(239,68,68,.12)',
+                      background: 'rgba(6,182,212,.06)',
+                      border: '1px solid rgba(6,182,212,.12)',
                       borderRadius: 4,
                     }}
                   >
-                    <span style={{ color: 'var(--color-danger)', fontWeight: 700 }}>
+                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                       건강(적) {nfpa.health}
                     </span>{' '}
                     —{' '}
@@ -2152,12 +2110,12 @@ function HmsDetailPanel({
                   <div
                     style={{
                       padding: '4px 8px',
-                      background: 'rgba(234,179,8,.06)',
-                      border: '1px solid rgba(234,179,8,.12)',
+                      background: 'rgba(6,182,212,.06)',
+                      border: '1px solid rgba(6,182,212,.12)',
                       borderRadius: 4,
                     }}
                   >
-                    <span style={{ color: '#fbbf24', fontWeight: 700 }}>
+                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                       인화성(황) {nfpa.fire}
                     </span>{' '}
                     —{' '}
@@ -2174,12 +2132,12 @@ function HmsDetailPanel({
                   <div
                     style={{
                       padding: '4px 8px',
-                      background: 'rgba(59,130,246,.06)',
-                      border: '1px solid rgba(59,130,246,.12)',
+                      background: 'rgba(6,182,212,.06)',
+                      border: '1px solid rgba(6,182,212,.12)',
                       borderRadius: 4,
                     }}
                   >
-                    <span style={{ color: '#60a5fa', fontWeight: 700 }}>
+                    <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                       반응성(청) {nfpa.reactivity}
                     </span>{' '}
                     —{' '}
@@ -2193,38 +2151,38 @@ function HmsDetailPanel({
                   </div>
                 </div>
               </div>
-              <div className="flex flex-col gap-1 text-[9px]">
+              <div className="flex flex-col gap-1 text-caption">
                 <InfoBoxRow
                   label="위험 분류"
                   value={s.hazardClass}
-                  bg="rgba(239,68,68,.06)"
-                  border="rgba(239,68,68,.12)"
-                  labelColor="var(--color-danger)"
-                  valueColor="var(--color-danger)"
+                  bg="rgba(6,182,212,.06)"
+                  border="rgba(6,182,212,.12)"
+                  labelColor="var(--color-accent)"
+                  valueColor="var(--color-accent)"
                 />
                 <InfoBoxRow
                   label="ERG 번호"
                   value={s.ergNumber}
-                  bg="rgba(249,115,22,.06)"
-                  border="rgba(249,115,22,.12)"
-                  labelColor="var(--color-warning)"
-                  valueColor="var(--color-warning)"
+                  bg="rgba(6,182,212,.06)"
+                  border="rgba(6,182,212,.12)"
+                  labelColor="var(--color-accent)"
+                  valueColor="var(--color-accent)"
                 />
                 <InfoBoxRow
                   label="IDLH"
                   value={s.idlh}
-                  bg="rgba(168,85,247,.06)"
-                  border="rgba(168,85,247,.12)"
-                  labelColor="var(--color-tertiary)"
-                  valueColor="var(--color-danger)"
+                  bg="rgba(6,182,212,.06)"
+                  border="rgba(6,182,212,.12)"
+                  labelColor="var(--color-accent)"
+                  valueColor="var(--color-accent)"
                 />
                 <InfoBoxRow
                   label="AEGL-2 (60분)"
                   value={s.aegl2}
-                  bg="rgba(34,197,94,.06)"
-                  border="rgba(34,197,94,.12)"
-                  labelColor="var(--color-success)"
-                  valueColor="var(--color-warning)"
+                  bg="rgba(6,182,212,.06)"
+                  border="rgba(6,182,212,.12)"
+                  labelColor="var(--color-accent)"
+                  valueColor="var(--color-accent)"
                 />
                 <InfoBoxRow
                   label="ERPG-2"
@@ -2232,7 +2190,7 @@ function HmsDetailPanel({
                   bg="rgba(6,182,212,.06)"
                   border="rgba(6,182,212,.12)"
                   labelColor="var(--color-accent)"
-                  valueColor="var(--color-warning)"
+                  valueColor="var(--color-accent)"
                 />
               </div>
             </div>
@@ -2247,16 +2205,16 @@ function HmsDetailPanel({
             {/* 방제거리 */}
             <div
               className="rounded-md overflow-hidden"
-              style={{ border: '1px solid rgba(239,68,68,.2)' }}
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               <div
                 style={{
                   padding: '10px 12px',
-                  background: 'linear-gradient(135deg,rgba(239,68,68,.08),transparent)',
-                  borderBottom: '1px solid rgba(239,68,68,.12)',
+                  background: 'rgba(6,182,212,.06)',
+                  borderBottom: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="text-xs font-bold text-color-danger">
+                <div className="text-label-1 font-bold text-color-accent">
                   🚧 방제거리 (ERG {s.ergNumber})
                 </div>
               </div>
@@ -2265,32 +2223,13 @@ function HmsDetailPanel({
                   className="rounded-sm"
                   style={{
                     padding: 10,
-                    background: 'rgba(249,115,22,.04)',
-                    border: '1px solid rgba(249,115,22,.12)',
+                    background: 'rgba(6,182,212,.04)',
+                    border: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <div className="text-[10px] font-bold text-color-warning mb-1">🔥 화재 시</div>
-                  <div className="text-[9px] text-fg-sub leading-[1.6]">
-                    격리거리: <b className="text-color-danger">{s.responseDistanceFire}</b> 이상
-                  </div>
-                </div>
-                <div
-                  className="rounded-sm"
-                  style={{
-                    padding: 10,
-                    background: 'rgba(168,85,247,.04)',
-                    border: '1px solid rgba(168,85,247,.12)',
-                  }}
-                >
-                  <div className="text-[10px] font-bold text-color-tertiary mb-1">
-                    💨 유출 시 (비화재)
-                  </div>
-                  <div className="text-[9px] text-fg-sub leading-[1.6]">
-                    주간 방호활동거리:{' '}
-                    <b className="text-color-tertiary">{s.responseDistanceSpillDay}</b>
-                    <br />
-                    야간 방호활동거리:{' '}
-                    <b className="text-color-danger">{s.responseDistanceSpillNight}</b>
+                  <div className="text-label-2 font-bold text-color-accent mb-1">🔥 화재 시</div>
+                  <div className="text-caption text-fg-sub leading-[1.6]">
+                    격리거리: <b className="text-color-accent">{s.responseDistanceFire}</b> 이상
                   </div>
                 </div>
                 <div
@@ -2301,10 +2240,29 @@ function HmsDetailPanel({
                     border: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <div className="text-[10px] font-bold text-color-accent mb-1">
+                  <div className="text-label-2 font-bold text-color-accent mb-1">
+                    💨 유출 시 (비화재)
+                  </div>
+                  <div className="text-caption text-fg-sub leading-[1.6]">
+                    주간 방호활동거리:{' '}
+                    <b className="text-color-accent">{s.responseDistanceSpillDay}</b>
+                    <br />
+                    야간 방호활동거리:{' '}
+                    <b className="text-color-accent">{s.responseDistanceSpillNight}</b>
+                  </div>
+                </div>
+                <div
+                  className="rounded-sm"
+                  style={{
+                    padding: 10,
+                    background: 'rgba(6,182,212,.04)',
+                    border: '1px solid rgba(6,182,212,.12)',
+                  }}
+                >
+                  <div className="text-label-2 font-bold text-color-accent mb-1">
                     🌊 해상 유출 시
                   </div>
-                  <div className="text-[9px] text-fg-sub leading-[1.6]">{s.marineResponse}</div>
+                  <div className="text-caption text-fg-sub leading-[1.6]">{s.marineResponse}</div>
                 </div>
               </div>
             </div>
@@ -2313,42 +2271,42 @@ function HmsDetailPanel({
               {/* PPE */}
               <div
                 className="rounded-md overflow-hidden mb-3"
-                style={{ border: '1px solid rgba(34,197,94,.2)' }}
+                style={{ border: '1px solid rgba(6,182,212,.2)' }}
               >
                 <div
                   style={{
                     padding: '10px 12px',
-                    background: 'linear-gradient(135deg,rgba(34,197,94,.08),transparent)',
-                    borderBottom: '1px solid rgba(34,197,94,.12)',
+                    background: 'rgba(6,182,212,.06)',
+                    borderBottom: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <div className="text-xs font-bold text-color-success">
+                  <div className="text-label-1 font-bold text-color-accent">
                     🛡 개인보호장구 (PPE) 추천
                   </div>
                 </div>
-                <div className="grid grid-cols-2 gap-1.5 text-[9px] p-3">
+                <div className="grid grid-cols-2 gap-1.5 text-caption p-3">
                   <div
                     className="text-center rounded"
                     style={{
                       padding: 8,
-                      background: 'rgba(239,68,68,.04)',
-                      border: '1px solid rgba(239,68,68,.1)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.1)',
                     }}
                   >
                     <div className="text-base mb-[3px]">🧑‍🚒</div>
-                    <div className="font-bold text-color-danger">근거리</div>
+                    <div className="font-bold text-color-accent">근거리</div>
                     <div className="text-[8px] text-fg-disabled mt-0.5">{s.ppeClose}</div>
                   </div>
                   <div
                     className="text-center rounded"
                     style={{
                       padding: 8,
-                      background: 'rgba(249,115,22,.04)',
-                      border: '1px solid rgba(249,115,22,.1)',
+                      background: 'rgba(6,182,212,.04)',
+                      border: '1px solid rgba(6,182,212,.1)',
                     }}
                   >
                     <div className="text-base mb-[3px]">🦺</div>
-                    <div className="font-bold text-color-warning">원거리</div>
+                    <div className="font-bold text-color-accent">원거리</div>
                     <div className="text-[8px] text-fg-disabled mt-0.5">{s.ppeFar}</div>
                   </div>
                 </div>
@@ -2356,26 +2314,26 @@ function HmsDetailPanel({
               {/* MSDS */}
               <div
                 className="rounded-md overflow-hidden"
-                style={{ border: '1px solid rgba(59,130,246,.2)' }}
+                style={{ border: '1px solid rgba(6,182,212,.2)' }}
               >
                 <div
                   className="flex items-center justify-between"
                   style={{
                     padding: '10px 12px',
-                    background: 'linear-gradient(135deg,rgba(59,130,246,.08),transparent)',
-                    borderBottom: '1px solid rgba(59,130,246,.12)',
+                    background: 'rgba(6,182,212,.06)',
+                    borderBottom: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <div className="text-xs font-bold" style={{ color: '#60a5fa' }}>
+                  <div className="text-label-1 font-bold" style={{ color: 'var(--color-accent)' }}>
                     📄 MSDS 주요 정보
                   </div>
                   <button
                     className="text-[8px] font-semibold cursor-pointer rounded"
                     style={{
                       padding: '3px 10px',
-                      background: 'rgba(59,130,246,.1)',
-                      border: '1px solid rgba(59,130,246,.2)',
-                      color: '#60a5fa',
+                      background: 'rgba(6,182,212,.1)',
+                      border: '1px solid rgba(6,182,212,.2)',
+                      color: 'var(--color-accent)',
                     }}
                   >
                     📥 전문 다운로드
@@ -2407,20 +2365,20 @@ function HmsDetailPanel({
             {/* IBC CODE */}
             <div
               className="rounded-md overflow-hidden"
-              style={{ border: '1px solid rgba(249,115,22,.2)' }}
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               <div
                 style={{
                   padding: '10px 12px',
-                  background: 'linear-gradient(135deg,rgba(249,115,22,.08),transparent)',
-                  borderBottom: '1px solid rgba(249,115,22,.12)',
+                  background: 'rgba(6,182,212,.06)',
+                  borderBottom: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="text-xs font-bold text-color-warning">
+                <div className="text-label-1 font-bold text-color-accent">
                   ⚓ IBC CODE 기반 주요 내용
                 </div>
               </div>
-              <div className="p-3 flex flex-col gap-2 text-[9px]">
+              <div className="p-3 flex flex-col gap-2 text-caption">
                 <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 4 }}>
                   {(
                     [
@@ -2466,7 +2424,7 @@ function HmsDetailPanel({
                       height={50}
                       rx={4}
                       fill="none"
-                      stroke="rgba(249,115,22,.4)"
+                      stroke="rgba(6,182,212,.4)"
                       strokeWidth={1.5}
                     />
                     <line
@@ -2474,7 +2432,7 @@ function HmsDetailPanel({
                       y1={10}
                       x2={70}
                       y2={60}
-                      stroke="rgba(249,115,22,.2)"
+                      stroke="rgba(6,182,212,.2)"
                       strokeWidth={1}
                       strokeDasharray="3"
                     />
@@ -2483,7 +2441,7 @@ function HmsDetailPanel({
                       y1={10}
                       x2={130}
                       y2={60}
-                      stroke="rgba(249,115,22,.2)"
+                      stroke="rgba(6,182,212,.2)"
                       strokeWidth={1}
                       strokeDasharray="3"
                     />
@@ -2491,7 +2449,7 @@ function HmsDetailPanel({
                       x={40}
                       y={38}
                       textAnchor="middle"
-                      fill="var(--color-warning)"
+                      fill="var(--color-accent)"
                       fontSize={7}
                       fontFamily="var(--font-korean)"
                     >
@@ -2511,7 +2469,7 @@ function HmsDetailPanel({
                       x={100}
                       y={38}
                       textAnchor="middle"
-                      fill="var(--color-warning)"
+                      fill="var(--color-accent)"
                       fontSize={7}
                       fontFamily="var(--font-korean)"
                     >
@@ -2531,7 +2489,7 @@ function HmsDetailPanel({
                       x={160}
                       y={38}
                       textAnchor="middle"
-                      fill="var(--color-warning)"
+                      fill="var(--color-accent)"
                       fontSize={7}
                       fontFamily="var(--font-korean)"
                     >
@@ -2565,40 +2523,40 @@ function HmsDetailPanel({
             {/* EmS */}
             <div
               className="rounded-md overflow-hidden"
-              style={{ border: '1px solid rgba(239,68,68,.2)' }}
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               <div
                 style={{
                   padding: '10px 12px',
-                  background: 'linear-gradient(135deg,rgba(239,68,68,.08),transparent)',
-                  borderBottom: '1px solid rgba(239,68,68,.12)',
+                  background: 'rgba(6,182,212,.06)',
+                  borderBottom: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="text-xs font-bold text-color-danger">
+                <div className="text-label-1 font-bold text-color-accent">
                   🆘 비상대응핸드북 (EmS) — ERG {s.ergNumber}
                 </div>
               </div>
-              <div className="p-3 flex flex-col gap-2 text-[9px]">
+              <div className="p-3 flex flex-col gap-2 text-caption">
                 <div
                   className="rounded-sm"
                   style={{
                     padding: 8,
-                    background: 'rgba(239,68,68,.04)',
-                    border: '1px solid rgba(239,68,68,.1)',
+                    background: 'rgba(6,182,212,.04)',
+                    border: '1px solid rgba(6,182,212,.1)',
                   }}
                 >
-                  <div className="font-bold text-color-danger mb-[3px]">🔥 화재 대응</div>
+                  <div className="font-bold text-color-accent mb-[3px]">🔥 화재 대응</div>
                   <div className="text-fg-sub leading-[1.6]">{s.emsFire}</div>
                 </div>
                 <div
                   className="rounded-sm"
                   style={{
                     padding: 8,
-                    background: 'rgba(168,85,247,.04)',
-                    border: '1px solid rgba(168,85,247,.1)',
+                    background: 'rgba(6,182,212,.04)',
+                    border: '1px solid rgba(6,182,212,.1)',
                   }}
                 >
-                  <div className="font-bold text-color-tertiary mb-[3px]">💧 유출 대응</div>
+                  <div className="font-bold text-color-accent mb-[3px]">💧 유출 대응</div>
                   <div className="text-fg-sub leading-[1.6]">{s.emsSpill}</div>
                 </div>
                 <div
@@ -2614,11 +2572,11 @@ function HmsDetailPanel({
                 </div>
                 <div className="text-center">
                   <button
-                    className="text-[10px] font-semibold cursor-pointer rounded-sm text-color-danger"
+                    className="text-label-2 font-semibold cursor-pointer rounded-sm text-color-accent"
                     style={{
                       padding: '6px 16px',
-                      background: 'rgba(239,68,68,.1)',
-                      border: '1px solid rgba(239,68,68,.2)',
+                      background: 'rgba(6,182,212,.1)',
+                      border: '1px solid rgba(6,182,212,.2)',
                     }}
                   >
                     📋 EmS 전문 보기
@@ -2637,26 +2595,26 @@ function HmsDetailPanel({
             {/* 화물적부도 */}
             <div
               className="rounded-lg overflow-hidden"
-              style={{ border: '1px solid rgba(168,85,247,.2)' }}
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               <div
                 style={{
                   padding: '10px 12px',
-                  background: 'linear-gradient(135deg,rgba(168,85,247,.08),transparent)',
-                  borderBottom: '1px solid rgba(168,85,247,.12)',
+                  background: 'rgba(6,182,212,.06)',
+                  borderBottom: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="text-[12px] font-bold text-color-tertiary">
+                <div className="text-label-1 font-bold text-color-accent">
                   📋 화물적부도 화물코드
                 </div>
                 <div className="text-[8px] text-fg-disabled">클릭 시 물질검색창으로 이동</div>
               </div>
               <div className="p-3">
-                <table className="w-full border-collapse text-[9px]">
+                <table className="w-full border-collapse text-caption">
                   <thead>
-                    <tr style={{ background: 'rgba(168,85,247,.05)' }}>
+                    <tr style={{ background: 'rgba(6,182,212,.05)' }}>
                       <th
-                        className="text-color-tertiary text-left"
+                        className="text-color-accent text-left"
                         style={{
                           padding: '6px 8px',
                           borderBottom: '1px solid var(--stroke-light)',
@@ -2697,16 +2655,16 @@ function HmsDetailPanel({
                     {s.cargoCodes.map((c, i) => {
                       const srcColor =
                         c.source === '적부도'
-                          ? 'var(--color-warning)'
+                          ? 'var(--color-accent)'
                           : c.source === '용선자'
                             ? 'var(--color-accent)'
-                            : 'var(--color-success)';
+                            : 'var(--color-accent)';
                       const srcBg =
                         c.source === '적부도'
-                          ? 'rgba(249,115,22,.1)'
+                          ? 'rgba(6,182,212,.1)'
                           : c.source === '용선자'
                             ? 'rgba(6,182,212,.1)'
-                            : 'rgba(34,197,94,.1)';
+                            : 'rgba(6,182,212,.1)';
                       return (
                         <tr
                           key={i}
@@ -2717,7 +2675,7 @@ function HmsDetailPanel({
                                 : undefined,
                           }}
                         >
-                          <td className="font-mono text-color-tertiary font-semibold cursor-pointer py-[5px] px-2">
+                          <td className="font-mono text-color-accent font-semibold cursor-pointer py-[5px] px-2">
                             {c.code}
                           </td>
                           <td className="py-[5px] px-2">{c.name}</td>
@@ -2751,15 +2709,15 @@ function HmsDetailPanel({
               <div
                 style={{
                   padding: '10px 12px',
-                  background: 'linear-gradient(135deg,rgba(6,182,212,.08),transparent)',
+                  background: 'rgba(6,182,212,.06)',
                   borderBottom: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="text-[12px] font-bold text-color-accent">🏗 항구별 코드</div>
+                <div className="text-label-1 font-bold text-color-accent">🏗 항구별 코드</div>
                 <div className="text-[8px] text-fg-disabled">Port-MIS 위험물반입신고현황 연동</div>
               </div>
               <div className="p-3">
-                <table className="w-full border-collapse text-[9px]">
+                <table className="w-full border-collapse text-caption">
                   <thead>
                     <tr style={{ background: 'rgba(6,182,212,.05)' }}>
                       <th
@@ -2804,16 +2762,16 @@ function HmsDetailPanel({
                     {s.portFrequency.map((p, i) => {
                       const freqColor =
                         p.frequency === '높음'
-                          ? 'var(--color-danger)'
+                          ? 'var(--color-accent)'
                           : p.frequency === '중간'
-                            ? 'var(--color-warning)'
-                            : 'var(--color-success)';
+                            ? 'var(--color-accent)'
+                            : 'var(--color-accent)';
                       const freqBg =
                         p.frequency === '높음'
-                          ? 'rgba(239,68,68,.1)'
+                          ? 'rgba(6,182,212,.1)'
                           : p.frequency === '중간'
-                            ? 'rgba(249,115,22,.1)'
-                            : 'rgba(34,197,94,.1)';
+                            ? 'rgba(6,182,212,.1)'
+                            : 'rgba(6,182,212,.1)';
                       return (
                         <tr
                           key={i}
@@ -2850,7 +2808,7 @@ function HmsDetailPanel({
                 </table>
                 <div className="mt-2.5 text-center">
                   <button
-                    className="text-color-accent text-[10px] font-semibold cursor-pointer rounded-sm"
+                    className="text-color-accent text-label-2 font-semibold cursor-pointer rounded-sm"
                     style={{
                       padding: '6px 16px',
                       background: 'rgba(6,182,212,.1)',
diff --git a/frontend/src/tabs/hns/components/HNSTheoryView.tsx b/frontend/src/tabs/hns/components/HNSTheoryView.tsx
index 1b9ca6f..21d4966 100755
--- a/frontend/src/tabs/hns/components/HNSTheoryView.tsx
+++ b/frontend/src/tabs/hns/components/HNSTheoryView.tsx
@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react';
-import { sanitizeHtml } from '@common/utils/sanitize';
 
 const theoryTabs = [
   { icon: '🔬', name: '시스템 개요' },
@@ -11,1429 +10,6251 @@ const theoryTabs = [
   { icon: '🚀', name: 'WRF-Chem·발전' },
 ];
 
-const panelHtml: string[] = [
-  // Panel 0
-  `<!-- 정의 및 목적 배너 -->
-          <div style="background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(6,182,212,.04));border:1px solid rgba(168,85,247,.2);border-radius:12px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden">
-            <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-tertiary),var(--color-accent),var(--color-warning))"></div>
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
-              <!-- 정의 -->
-              <div>
-                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
-                  <div style="width:30px;height:30px;border-radius:8px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:16px">📋</div>
-                  <span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 대기확산 모델이란?</span>
-                </div>
-                <div style="font-size:11px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.8">
-                  해상에서 유출된 <b style="color:var(--color-warning)">위험유해물질(Hazardous & Noxious Substances, HNS)</b>이 대기로 증발하여 퍼지는 농도를 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다. 기상 예측 모델(<b style="color:var(--color-accent)">WRF</b>)과 대기화학 모델(<b style="color:var(--color-accent)">Chem</b>)을 결합하여 실시간 대기 확산을 시뮬레이션합니다.
-                </div>
+/* ═══ 공통 스타일 유틸 ═══ */
+const card = 'rounded-[10px] p-[14px] mb-4';
+const cardBg = 'bg-bg-card border border-stroke';
+const labelStyle = (color: string) =>
+  ({ fontSize: 'var(--font-size-title-3)', fontWeight: 700, color, marginBottom: '10px' }) as const;
+const tag = (color: string) =>
+  ({
+    padding: '3px 8px',
+    borderRadius: '4px',
+    fontSize: 'var(--font-size-label-2)',
+    color,
+    background: `${color}14`,
+    border: `1px solid ${color}30`,
+  }) as const;
+const bodyText = 'text-label-1 text-fg-sub leading-[1.8]';
+
+/* ═══ 패널 0: 시스템 개요 ═══ */
+
+function SystemOverviewPanel() {
+  return (
+    <>
+      {/* 시스템 개요 */}
+      <div className={`${card} ${cardBg}`}>
+        {/* 1행: 정의 + 목적 */}
+        <div className="grid grid-cols-2 gap-4 mb-4">
+          <div>
+            <div style={labelStyle('var(--fg-default)')}>📋 HNS 대기확산 모델이란?</div>
+            <div className={bodyText}>
+              해상에서 유출된 <b>위험유해물질(Hazardous &amp; Noxious Substances, HNS)</b>이 대기로
+              증발하여 퍼지는 농도를 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.
+              기상 예측 모델(<b>WRF</b>)과 대기화학 모델(<b>Chem</b>)을 결합하여 실시간 대기 확산을
+              시뮬레이션합니다.
+            </div>
+          </div>
+          <div>
+            <div style={labelStyle('var(--fg-default)')}>🎯 목적</div>
+            <div className="flex flex-col gap-[6px] text-label-1 text-fg-sub">
+              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
+                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>①</span> 유출 사고 시{' '}
+                <b>신속한 위험 범위 예측</b>
               </div>
-              <!-- 목적 -->
-              <div>
-                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
-                  <div style="width:30px;height:30px;border-radius:8px;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:16px">🎯</div>
-                  <span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">목적</span>
-                </div>
-                <div style="display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--fg-sub);font-family:var(--font-korean)">
-                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.12);border-radius:6px"><span style="color:var(--color-danger);font-weight:700">①</span> 유출 사고 시 <b>신속한 위험 범위 예측</b></div>
-                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px"><span style="color:var(--color-warning);font-weight:700">②</span> 독성물질 농도 기반 <b>대피 명령</b> 의사결정</div>
-                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12);border-radius:6px"><span style="color:var(--color-success);font-weight:700">③</span> 사고 대응 체계 구축 및 <b>피해 최소화</b></div>
-                </div>
+              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
+                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>②</span> 독성물질 농도
+                기반 <b>대피 명령</b> 의사결정
+              </div>
+              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
+                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>③</span> 사고 대응
+                체계 구축 및 <b>피해 최소화</b>
               </div>
             </div>
           </div>
-
-          <!-- 작동 원리 3-Step -->
-          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px">
-            <!-- Step 1: 물질 특성 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning);position:relative">
-              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-warning)">1</div>
-              <div style="font-size:12px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:10px">🧪 물질 특성 반영</div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
-                HNS는 <b style="color:var(--fg-default)">약 6,000종 이상</b>으로, 종류가 매우 다양합니다. 각 물질의 고유 거동 특성을 모델에 반영합니다.
-              </div>
-              <div style="display:flex;flex-wrap:wrap;gap:4px">
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.15);font-size:9px;color:var(--color-warning);font-family:var(--font-korean)">증발률</span>
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);font-size:9px;color:var(--color-danger);font-family:var(--font-korean)">독성</span>
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.15);font-size:9px;color:var(--color-tertiary);font-family:var(--font-korean)">기화 특성</span>
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);font-size:9px;color:var(--color-info);font-family:var(--font-korean)">비중</span>
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.15);font-size:9px;color:var(--color-caution);font-family:var(--font-korean)">인화점</span>
-                <span style="padding:3px 8px;border-radius:4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);font-size:9px;color:var(--color-success);font-family:var(--font-korean)">용해도</span>
-              </div>
+        </div>
+        {/* 2행: 물질 특성 + 기상 데이터 + 확산 알고리즘 */}
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <div style={labelStyle('var(--fg-default)')}>🧪 물질 특성 반영</div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+                marginBottom: '10px',
+              }}
+            >
+              HNS는 <b>약 6,000종 이상</b>으로, 종류가 매우 다양합니다. 각 물질의 고유 거동 특성을
+              모델에 반영합니다.
             </div>
-            <!-- Step 2: 기상 데이터 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-accent);position:relative">
-              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-accent)">2</div>
-              <div style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:10px">🌬 기상 데이터 연동</div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
-                실시간 기상 정보를 입력 데이터로 사용하여 확산 방향과 속도를 결정합니다.
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
-                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">💨</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">풍향·풍속</div></div>
-                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">🌡</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">기온</div></div>
-                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">📊</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">대기 안정도</div></div>
-                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">💧</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">습도·강수</div></div>
-              </div>
-            </div>
-            <!-- Step 3: 확산 알고리즘 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-tertiary);position:relative">
-              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-tertiary)">3</div>
-              <div style="font-size:12px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:10px">🔬 확산 알고리즘</div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
-                가우시안 플룸/퍼프 모델 또는 WRF-Chem 수치 모델을 사용하여 대기 중 농도를 계산합니다.
-              </div>
-              <div style="display:flex;flex-direction:column;gap:5px">
-                <div style="padding:6px 10px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-tertiary);font-weight:700">▸</span> Gaussian Plume/Puff</div>
-                <div style="padding:6px 10px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-accent);font-weight:700">▸</span> WRF-Chem (기상+화학)</div>
-                <div style="padding:6px 10px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-warning);font-weight:700">▸</span> ALOHA / CAMEO</div>
-              </div>
+            <div className="flex flex-wrap gap-1">
+              {['증발률', '독성', '기화 특성', '비중', '인화점', '용해도'].map((item) => (
+                <span
+                  key={item}
+                  style={{
+                    padding: '2px 8px',
+                    borderRadius: '4px',
+                    fontSize: 'var(--font-size-label-2)',
+                    color: 'var(--fg-sub)',
+                    background: 'var(--bg-base)',
+                  }}
+                >
+                  {item}
+                </span>
+              ))}
             </div>
           </div>
-
-          <!-- 주요 기능 및 특징 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">⚙ 주요 기능 및 특징</div>
-            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
-              <div style="padding:14px;background:linear-gradient(135deg,rgba(239,68,68,.04),rgba(249,115,22,.03));border:1px solid rgba(239,68,68,.15);border-radius:8px">
-                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
-                  <span style="font-size:18px">📡</span>
-                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">실시간 모니터링</span>
+          <div>
+            <div style={labelStyle('var(--fg-default)')}>🌬 기상 데이터 연동</div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+                marginBottom: '10px',
+              }}
+            >
+              <b>실시간 기상 정보</b>를 입력 데이터로 사용하여 확산 방향과 속도를 결정합니다.
+            </div>
+            <div
+              className="flex flex-col gap-1"
+              style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
+            >
+              {[
+                '💨 풍향·풍속 (KMA·ECMWF)',
+                '🌡 기온·습도·강수',
+                '📊 대기 안정도 (Pasquill-Gifford)',
+              ].map((item) => (
+                <div
+                  key={item}
+                  style={{ padding: '4px 8px', borderRadius: '4px', background: 'var(--bg-base)' }}
+                >
+                  {item}
                 </div>
-                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  '<b style="color:var(--color-danger)">HNS 유출 블랙박스 시스템</b>'과 같이 사고 즉시 확산 방향과 농도를 예측하여 시각화합니다. 사고 발생 → 자동 감지 → 실시간 확산 맵 생성의 자동화 파이프라인을 제공합니다.
-                </div>
-              </div>
-              <div style="padding:14px;background:linear-gradient(135deg,rgba(249,115,22,.04),rgba(234,179,8,.03));border:1px solid rgba(249,115,22,.15);border-radius:8px">
-                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
-                  <span style="font-size:18px">🎯</span>
-                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">위험 범위 예측</span>
-                </div>
-                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  대기 중 독성물질 농도에 따른 <b style="color:var(--color-warning)">안전/경고/위험 구역</b>을 AEGL·ERPG 기준으로 자동 설정합니다. 시간대별 확산 경계를 지도 위에 오버레이합니다.
-                </div>
-              </div>
-              <div style="padding:14px;background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(6,182,212,.03));border:1px solid rgba(34,197,94,.15);border-radius:8px">
-                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
-                  <span style="font-size:18px">⚡</span>
-                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">긴급 대응</span>
-                </div>
-                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  해상 사고 시 <b style="color:var(--color-success)">조화상수 DB</b>를 이용한 빠른 예측 기술을 포함합니다. 사전 계산된 시나리오 DB를 활용하여 초기 대응 시간을 <b style="color:var(--color-accent)">수 분 이내</b>로 단축합니다.
-                </div>
-              </div>
+              ))}
             </div>
           </div>
-
-          <!-- 주요 기술 아키텍처 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">🏗 주요 기술 아키텍처</div>
-            <!-- Flow diagram -->
-            <div style="display:flex;align-items:center;gap:0;justify-content:center;margin-bottom:16px;flex-wrap:wrap">
-              <div style="padding:10px 16px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.25);border-radius:8px;text-align:center;min-width:120px">
-                <div style="font-size:16px;margin-bottom:4px">🧪</div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean)">HNS 물질 DB</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">6,000+ 물질</div>
-              </div>
-              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
-              <div style="padding:10px 16px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.25);border-radius:8px;text-align:center;min-width:120px">
-                <div style="font-size:16px;margin-bottom:4px">🌬</div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">기상 데이터</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">KMA / AWS</div>
-              </div>
-              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
-              <div style="padding:10px 16px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.25);border-radius:8px;text-align:center;min-width:140px">
-                <div style="font-size:16px;margin-bottom:4px">🔬</div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">확산 모델 엔진</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">WRF-Chem / Gaussian</div>
-              </div>
-              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
-              <div style="padding:10px 16px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:8px;text-align:center;min-width:120px">
-                <div style="font-size:16px;margin-bottom:4px">🗺</div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">GIS 시각화</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">위험 구역 맵</div>
-              </div>
-              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
-              <div style="padding:10px 16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:8px;text-align:center;min-width:120px">
-                <div style="font-size:16px;margin-bottom:4px">🚨</div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean)">대응 의사결정</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">대피·방제 명령</div>
-              </div>
+          <div>
+            <div style={labelStyle('var(--fg-default)')}>🔬 확산 알고리즘</div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+                marginBottom: '10px',
+              }}
+            >
+              가우시안 플룸/퍼프 모델 또는 WRF-Chem 수치 모델을 사용하여 <b>대기 중 농도</b>를
+              계산합니다.
             </div>
-
-            <!-- 기술 상세 비교 -->
-            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px">
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(168,85,247,.15);border-radius:8px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:8px">WRF-Chem</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  기상 예측 모델(<b style="color:var(--color-accent)">WRF</b>)과 대기화학 모델(<b style="color:var(--color-accent)">Chem</b>)을 결합. 3차원 바람장·난류를 실시간 계산하여 화학물질 이류·확산·반응을 동시에 모의합니다.<br>
-                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-tertiary)">해상도: 1~3 km / 시간분해능: 1 hr</span>
-                </div>
-              </div>
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(249,115,22,.15);border-radius:8px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">Gaussian Plume/Puff</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  ALOHA/CAMEO 표준 알고리즘 기반. 연속 배출(<b style="color:var(--color-tertiary)">Plume</b>) 또는 순간 배출(<b style="color:var(--color-warning)">Puff</b>) 시나리오 선택. 빠른 계산 속도로 <b>초기 대응</b>에 최적화.<br>
-                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-warning)">계산시간: < 10초 / 정확도: ±10~40%</span>
-                </div>
-              </div>
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:8px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">ROMS 해양 연동</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  Regional Ocean Modeling System과 연동하여 해수면 유출물의 <b style="color:var(--color-accent)">해양 확산 + 대기 증발</b>을 동시에 모의합니다. 입자 추적 방식의 한계를 극복한 수치 모델.<br>
-                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-accent)">장기 모의 가능 / 정밀 농도 계산</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- WING 시스템 적용 개요 -->
-          <div style="background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(168,85,247,.04));border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:16px">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-              <div style="font-size:13px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">🖥 WING 시스템 적용 전략</div>
-              <span style="padding:2px 8px;border-radius:10px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">현재 구현</span>
-            </div>
-            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px">
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:20px;margin-bottom:4px">🧪</div>
-                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS DB 연동</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">CHRIS/CAMEO DB<br>6,000+종 물질 검색</div>
-                <div style="margin-top:6px;height:3px;background:var(--color-success);border-radius:2px"></div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:20px;margin-bottom:4px">⚡</div>
-                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">가우시안 모델</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">ALOHA + 이문진박사모델<br>초기 대응 10초 이내</div>
-                <div style="margin-top:6px;height:3px;background:var(--color-success);border-radius:2px"></div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:20px;margin-bottom:4px">🌐</div>
-                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">WRF-Chem</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">정밀 수치 모의<br>3D 확산 시뮬레이션</div>
-                <div style="margin-top:6px;height:3px;background:var(--color-caution);border-radius:2px"></div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:20px;margin-bottom:4px">🌊</div>
-                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">ROMS 연동</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">해양-대기 결합<br>장기 모의 지원</div>
-                <div style="margin-top:6px;height:3px;background:var(--color-warning);border-radius:2px"></div>
-              </div>
-            </div>
-            <div style="display:flex;gap:12px;margin-top:10px;font-size:8px;font-family:var(--font-korean);color:var(--fg-disabled)">
-              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-success);border-radius:2px"></span> 구현 완료</span>
-              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-caution);border-radius:2px"></span> 개발 진행중</span>
-              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-warning);border-radius:2px"></span> 계획</span>
-            </div>
-          </div>
-
-          <!-- ═══ 논문 기반: HNS 사고 실태 및 항만별 위험도 (유영현, 2013) ═══ -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-top:16px;margin-bottom:16px">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
-              <div style="display:flex;align-items:center;gap:8px">
-                <div style="width:28px;height:28px;border-radius:6px;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🚨</div>
-                <div>
-                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 사고 실태 및 항만별 위험도</div>
-                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">유영현 (2013), 한국위기관리논집 · 해양경찰청 (2010, 2011)</div>
-                </div>
-              </div>
-              <span style="padding:3px 10px;border-radius:6px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);font-size:9px;color:var(--color-danger);font-weight:600;font-family:var(--font-korean)">전 세계 HNS 6,500+종</span>
-            </div>
-
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
-              <!-- 주요 항만별 위험도 -->
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">🏭 주요 항만별 화재·폭발·누출 위험도</div>
-                <div style="overflow-x:auto">
-                  <table style="width:100%;border-collapse:collapse;font-size:9px;font-family:var(--font-korean)">
-                    <thead>
-                      <tr style="background:rgba(249,115,22,.06)">
-                        <th style="padding:6px 8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">항만</th>
-                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">화재</th>
-                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">폭발</th>
-                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">누출</th>
-                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">HNS(천톤)</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.03)"><td style="padding:5px 8px;font-weight:700;color:var(--color-danger)">울산</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-danger)">27,574</td></tr>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.03)"><td style="padding:5px 8px;font-weight:700;color:var(--color-danger)">여수·광양</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-danger)">38,700</td></tr>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">대산</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">19,401</td></tr>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">인천</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">41,618</td></tr>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">부산</td><td style="text-align:center">○</td><td style="text-align:center">△</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--fg-sub)">25,417</td></tr>
-                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">평택·당진</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--fg-sub)">29,248</td></tr>
-                    </tbody>
-                  </table>
-                </div>
-                <div style="margin-top:6px;display:flex;gap:8px;font-size:7px;color:var(--fg-disabled);font-family:var(--font-korean)">
-                  <span>◎ 아주높음</span><span>○ 높음</span><span>△ 보통이상</span><span>□ 보통</span>
-                  <span style="color:var(--fg-disabled);margin-left:auto">단위: 천톤, 2010년 기준</span>
-                </div>
-              </div>
-
-              <!-- HNS 구분 및 사고 유형 -->
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:8px">⚠ HNS 위험물질 vs 유해물질</div>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px">
-                  <div style="padding:8px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.12);border-radius:6px">
-                    <div style="font-size:10px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:4px">위험물질</div>
-                    <div style="font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">폭발·인화·독성·부식·질식·중합 등으로 생명체에 위험을 초래하는 물질</div>
-                    <div style="margin-top:4px;display:flex;flex-wrap:wrap;gap:2px">
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">포장위험물</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">산적고체</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">산적액체</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">액화가스</span>
-                    </div>
-                  </div>
-                  <div style="padding:8px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px">
-                    <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:4px">유해물질</div>
-                    <div style="font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">해양에서 해로운 영향을 초래하는 물질·에너지 (해양환경관리법)</div>
-                    <div style="margin-top:4px;display:flex;flex-wrap:wrap;gap:2px">
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">유해액체</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">포장유해</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">대기오염</span>
-                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">폐기물</span>
-                    </div>
+            <div
+              className="flex flex-col gap-1"
+              style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
+            >
+              {['📍 Gaussian Plume/Puff', '⚡ WRF-Chem (기상+화학)', '🔧 ALOHA / CAMEO'].map(
+                (item) => (
+                  <div
+                    key={item}
+                    style={{
+                      padding: '4px 8px',
+                      borderRadius: '4px',
+                      background: 'var(--bg-base)',
+                    }}
+                  >
+                    {item}
                   </div>
+                ),
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 주요 기능 및 특징 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-title-4)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '14px',
+          }}
+        >
+          ⚙ 주요 기능 및 특징
+        </div>
+        <div className="grid grid-cols-3 gap-3">
+          <div
+            style={{
+              padding: '14px',
+              background: 'var(--bg-base)',
+              border: '1px solid var(--stroke-default)',
+              borderRadius: '8px',
+            }}
+          >
+            <div className="flex items-center gap-[6px] mb-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>📡</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-label-1)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                실시간 모니터링
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              '<b style={{ color: 'var(--color-accent)' }}>HNS 유출 블랙박스 시스템</b>'과 같이 사고
+              즉시 확산 방향과 농도를 예측하여 시각화합니다. 사고 발생 → 자동 감지 → 실시간 확산 맵
+              생성의 자동화 파이프라인을 제공합니다.
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '14px',
+              background: 'var(--bg-base)',
+              border: '1px solid var(--stroke-default)',
+              borderRadius: '8px',
+            }}
+          >
+            <div className="flex items-center gap-[6px] mb-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🎯</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-label-1)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                위험 범위 예측
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              대기 중 독성물질 농도에 따른{' '}
+              <b style={{ color: 'var(--color-accent)' }}>안전/경고/위험 구역</b>을 AEGL·ERPG
+              기준으로 자동 설정합니다. 시간대별 확산 경계를 지도 위에 오버레이합니다.
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '14px',
+              background: 'var(--bg-base)',
+              border: '1px solid var(--stroke-default)',
+              borderRadius: '8px',
+            }}
+          >
+            <div className="flex items-center gap-[6px] mb-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-label-1)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                긴급 대응
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              해상 사고 시 <b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b>를 이용한 빠른
+              예측 기술을 포함합니다. 사전 계산된 시나리오 DB를 활용하여 초기 대응 시간을{' '}
+              <b style={{ color: 'var(--color-accent)' }}>수 분 이내</b>로 단축합니다.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 주요 기술 아키텍처 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-title-4)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '14px',
+          }}
+        >
+          🏗 주요 기술 아키텍처
+        </div>
+        {/* Flow diagram */}
+        <div className="flex items-center justify-center flex-wrap gap-0 mb-4">
+          {[
+            {
+              icon: '🧪',
+              label: 'HNS 물질 DB',
+              sub: '6,000+ 물질',
+            },
+            {
+              icon: '🌬',
+              label: '기상 데이터',
+              sub: 'KMA / AWS',
+            },
+            {
+              icon: '🔬',
+              label: '확산 모델 엔진',
+              sub: 'WRF-Chem / Gaussian',
+            },
+            {
+              icon: '🗺',
+              label: 'GIS 시각화',
+              sub: '위험 구역 맵',
+            },
+            {
+              icon: '🚨',
+              label: '대응 의사결정',
+              sub: '대피·방제 명령',
+            },
+          ].map((item, idx) => (
+            <>
+              <div
+                key={item.label}
+                style={{
+                  padding: '10px 16px',
+                  background: 'var(--bg-base)',
+                  border: '1px solid var(--stroke-default)',
+                  borderRadius: '8px',
+                  textAlign: 'center',
+                  minWidth: idx === 2 ? '140px' : '120px',
+                }}
+              >
+                <div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
+                  {item.icon}
                 </div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:6px">📊 유류 vs HNS 사고 대응 차이</div>
-                <div style="display:grid;grid-template-columns:auto 1fr 1fr;gap:0;font-size:8px;font-family:var(--font-korean)">
-                  <div style="padding:4px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);font-weight:600;color:var(--color-tertiary)">구분</div>
-                  <div style="padding:4px 6px;background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.08);text-align:center;font-weight:600;color:var(--color-info)">유류</div>
-                  <div style="padding:4px 6px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.08);text-align:center;font-weight:600;color:var(--color-danger)">HNS</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">물질</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">눈으로 확인 가능</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">보이지 않는 경우 多</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">위험</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">낮은 위험성</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">독성·폭발·화재 복합</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">예측</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">단기 예측 가능</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">다매체 피해예측 필요</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">대응</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">초기대응자 방제가능</div>
-                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">전문가 방제 필수</div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 700,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  {item.label}
                 </div>
+                <div
+                  className="font-mono"
+                  style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
+                >
+                  {item.sub}
+                </div>
+              </div>
+              {idx < 4 && (
+                <div
+                  key={`arrow-${idx}`}
+                  style={{
+                    fontSize: 'var(--font-size-title-2)',
+                    color: 'var(--fg-disabled)',
+                    padding: '0 6px',
+                  }}
+                >
+                  →
+                </div>
+              )}
+            </>
+          ))}
+        </div>
+
+        {/* 기술 상세 비교 */}
+        <div className="grid grid-cols-3 gap-[10px]">
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.15)',
+              borderRadius: '8px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              WRF-Chem
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              기상 예측 모델(<b style={{ color: 'var(--color-accent)' }}>WRF</b>)과 대기화학 모델(
+              <b style={{ color: 'var(--color-accent)' }}>Chem</b>)을 결합. 3차원 바람장·난류를
+              실시간 계산하여 화학물질 이류·확산·반응을 동시에 모의합니다.
+              <br />
+              <span
+                className="font-mono"
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                해상도: 1~3 km / 시간분해능: 1 hr
+              </span>
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.15)',
+              borderRadius: '8px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              Gaussian Plume/Puff
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              ALOHA/CAMEO 표준 알고리즘 기반. 연속 배출(
+              <b style={{ color: 'var(--color-accent)' }}>Plume</b>) 또는 순간 배출(
+              <b style={{ color: 'var(--color-accent)' }}>Puff</b>) 시나리오 선택. 빠른 계산 속도로{' '}
+              <b>초기 대응</b>에 최적화.
+              <br />
+              <span
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                계산시간: &lt; 10초 / 정확도: ±10~40%
+              </span>
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.15)',
+              borderRadius: '8px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              ROMS 해양 연동
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.7,
+              }}
+            >
+              Regional Ocean Modeling System과 연동하여 해수면 유출물의{' '}
+              <b style={{ color: 'var(--color-accent)' }}>해양 확산 + 대기 증발</b>을 동시에
+              모의합니다. 입자 추적 방식의 한계를 극복한 수치 모델.
+              <br />
+              <span
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                장기 모의 가능 / 정밀 농도 계산
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* WING 시스템 적용 전략 */}
+      <div className={`${card} ${cardBg}`}>
+        <div className="flex items-center gap-2 mb-3">
+          <div
+            style={{
+              fontSize: 'var(--font-size-title-4)',
+              fontWeight: 700,
+              color: 'var(--color-accent)',
+            }}
+          >
+            🖥 WING 시스템 적용 전략
+          </div>
+          <span
+            style={{
+              padding: '2px 8px',
+              borderRadius: '10px',
+              background: 'rgba(6,182,212,.12)',
+              color: 'var(--color-accent)',
+              fontSize: 'var(--font-size-caption)',
+              fontWeight: 600,
+            }}
+          >
+            현재 구현
+          </span>
+        </div>
+        <div className="grid grid-cols-4 gap-2">
+          {[
+            {
+              icon: '🧪',
+              label: 'HNS DB 연동',
+              sub: 'CHRIS/CAMEO DB\n6,000+종 물질 검색',
+              bar: 'var(--color-accent)',
+            },
+            {
+              icon: '⚡',
+              label: '가우시안 모델',
+              sub: 'ALOHA + 이문진박사모델\n초기 대응 10초 이내',
+              bar: 'var(--color-accent)',
+            },
+            {
+              icon: '🌐',
+              label: 'WRF-Chem',
+              sub: '정밀 수치 모의\n3D 확산 시뮬레이션',
+              bar: 'var(--color-accent)',
+            },
+            {
+              icon: '🌊',
+              label: 'ROMS 연동',
+              sub: '해양-대기 결합\n장기 모의 지원',
+              bar: 'var(--color-accent)',
+            },
+          ].map((item) => (
+            <div
+              key={item.label}
+              style={{
+                padding: '10px',
+                background: 'var(--bg-card)',
+                border: '1px solid var(--stroke-default)',
+                borderRadius: '6px',
+                textAlign: 'center',
+              }}
+            >
+              <div style={{ fontSize: 'var(--font-size-heading-3)', marginBottom: '4px' }}>
+                {item.icon}
+              </div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                {item.label}
+              </div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--fg-disabled)',
+                  marginTop: '2px',
+                }}
+              >
+                {item.sub.split('\n').map((line, i) => (
+                  <span key={i}>
+                    {line}
+                    {i === 0 && <br />}
+                  </span>
+                ))}
+              </div>
+              <div
+                style={{
+                  marginTop: '6px',
+                  height: '3px',
+                  background: item.bar,
+                  borderRadius: '2px',
+                }}
+              />
+            </div>
+          ))}
+        </div>
+        <div
+          className="flex gap-3 mt-[10px]"
+          style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
+        >
+          <span className="flex items-center gap-1">
+            <span
+              style={{
+                display: 'inline-block',
+                width: '10px',
+                height: '3px',
+                background: 'var(--color-accent)',
+                borderRadius: '2px',
+              }}
+            />{' '}
+            구현 완료
+          </span>
+          <span className="flex items-center gap-1">
+            <span
+              style={{
+                display: 'inline-block',
+                width: '10px',
+                height: '3px',
+                background: 'var(--color-accent)',
+                borderRadius: '2px',
+              }}
+            />{' '}
+            개발 진행중
+          </span>
+          <span className="flex items-center gap-1">
+            <span
+              style={{
+                display: 'inline-block',
+                width: '10px',
+                height: '3px',
+                background: 'var(--color-accent)',
+                borderRadius: '2px',
+              }}
+            />{' '}
+            계획
+          </span>
+        </div>
+      </div>
+
+      {/* HNS 사고 실태 및 항만별 위험도 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mt-4 mb-4`}>
+        <div className="flex items-center justify-between mb-[14px]">
+          <div className="flex items-center gap-2">
+            <div
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 'var(--font-size-title-3)',
+              }}
+            >
+              🚨
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-title-4)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                HNS 사고 실태 및 항만별 위험도
+              </div>
+              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                유영현 (2013), 한국위기관리논집 · 해양경찰청 (2010, 2011)
               </div>
             </div>
           </div>
+          <span
+            style={{
+              padding: '3px 10px',
+              borderRadius: '6px',
+              background: 'rgba(6,182,212,.08)',
+              border: '1px solid rgba(6,182,212,.2)',
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--color-accent)',
+              fontWeight: 600,
+            }}
+          >
+            전 세계 HNS 6,500+종
+          </span>
+        </div>
 
-          <!-- ═══ 국내외 대응 체계 비교 ═══ -->
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px">
-            <!-- 한국 대응 체계 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:14px;border-top:3px solid var(--color-accent)">
-              <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">
-                <span style="font-size:14px">🇰🇷</span>
-                <span style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">한국 HNS 대응 체계</span>
-              </div>
-              <div style="display:flex;flex-direction:column;gap:6px;font-size:9px;font-family:var(--font-korean)">
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-accent)">
-                  <div><b style="color:var(--fg-default)">OPRC-HNS 의정서</b><br><span style="color:var(--fg-disabled)">2008.1.11 가입 → 2008.4.11 발효</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-success)">
-                  <div><b style="color:var(--fg-default)">국가/지역 긴급방제계획</b><br><span style="color:var(--fg-disabled)">HNS 국가긴급방제계획 수립 ('09.6)</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-warning)">
-                  <div><b style="color:var(--fg-default)">CARIS 대응정보시스템</b><br><span style="color:var(--fg-disabled)">사고대응 매뉴얼 + 화학물질 정보</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-tertiary)">
-                  <div><b style="color:var(--fg-default)">통합 대응 체계</b><br><span style="color:var(--fg-disabled)">대통령 → 중앙안전관리위 → 중앙방제대책본부(해양경찰청장)</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-danger)">
-                  <div><b style="color:var(--fg-default)">현장 대응팀</b><br><span style="color:var(--fg-disabled)">상황관리팀 → 사고대응팀(통제반·물질탐지반·방제작업반·제독지원반)</span></div>
-                </div>
-              </div>
+        <div className="grid grid-cols-2 gap-[14px]">
+          {/* 주요 항만별 위험도 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              🏭 주요 항만별 화재·폭발·누출 위험도
             </div>
-
-            <!-- 미국 대응 체계 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:14px;border-top:3px solid var(--color-info)">
-              <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">
-                <span style="font-size:14px">🇺🇸</span>
-                <span style="font-size:12px;font-weight:700;color:var(--color-info);font-family:var(--font-korean)">미국 HNS 대응 체계</span>
-              </div>
-              <div style="display:flex;flex-direction:column;gap:6px;font-size:9px;font-family:var(--font-korean)">
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-info)">
-                  <div><b style="color:var(--fg-default)">OPA90 / NCP</b><br><span style="color:var(--fg-disabled)">국가긴급계획 ESF #10 — HNS 포함</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-success)">
-                  <div><b style="color:var(--fg-default)">공동의장 체제</b><br><span style="color:var(--fg-disabled)">환경청(EPA) + 해안경비대(USCG) 공동 지휘</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-warning)">
-                  <div><b style="color:var(--fg-default)">CAMEO / ALOHA / MARPLOT</b><br><span style="color:var(--fg-disabled)">6,000+종 화학물질 통합 DB · 대기확산 모델</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-tertiary)">
-                  <div><b style="color:var(--fg-default)">NRT / RRT / NSF</b><br><span style="color:var(--fg-disabled)">국가방제팀 + 지역방제팀 + 국가기동타격대</span></div>
-                </div>
-                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-accent)">
-                  <div><b style="color:var(--fg-default)">통합지휘시스템(ICS)</b><br><span style="color:var(--fg-disabled)">16개 부처 + 주·지방정부 + 유출책임자 통합 조정</span></div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 국제 협약 및 WING 시스템 연계 -->
-          <div style="background:linear-gradient(135deg,rgba(168,85,247,.04),rgba(6,182,212,.03));border:1px solid rgba(168,85,247,.15);border-radius:10px;padding:14px;margin-bottom:16px">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
-              <span style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">🌐 HNS 관련 국제 협약 체계</span>
-            </div>
-            <div style="display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:0;font-size:8px;font-family:var(--font-korean)">
-              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:700;color:var(--color-tertiary);border:1px solid rgba(168,85,247,.12)">구분</div>
-              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">협약</div>
-              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">담당</div>
-              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">대상</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)" rowspan="2">안전</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">74 SOLAS</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">위험물질</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">보호</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">MARPOL 73/78</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">기름·유해액체·포장유해·하수·폐기물</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);font-weight:600">대비·대응</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);text-align:center;font-weight:600">2000 OPRC-HNS</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--fg-sub);text-align:center">IMO</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);text-align:center;font-weight:600">위험·유해물질(HNS)</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">배상</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">96 HNS협약</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
-              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">유해물질 및 위험물질</div>
-            </div>
-          </div>
-
-          <!-- ═══ HATS 사고이력 통계 (장하용·이문진 외, 2017) ═══ -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-tertiary)">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
-              <div style="display:flex;align-items:center;gap:8px">
-                <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">📊</div>
-                <div>
-                  <div style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">국내 HNS 사고 통계 (23년간 76건)</div>
-                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">장하용·이문진 외 (2017) HATS 분석 · 1994~2016년 해양경비안전본부 데이터</div>
-                </div>
-              </div>
-              <span style="padding:3px 10px;border-radius:6px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);font-size:9px;color:var(--color-tertiary);font-weight:700">연평균 3.3건</span>
-            </div>
-
-            <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px">
-              <!-- 사고시기 -->
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고시기 1위</div>
-                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-warning)">41%</div>
-                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">춘계 (3~5월)</div>
-                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">동절기 30%</div>
-              </div>
-              <!-- 사고장소 -->
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고장소 1위</div>
-                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-accent)">51%</div>
-                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">계류장</div>
-                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">항만 29% · 연안 17%</div>
-              </div>
-              <!-- 오염원 -->
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(239,68,68,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">오염원 1위</div>
-                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-danger)">49%</div>
-                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">케미컬운반선</div>
-                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">육상시설 32%</div>
-              </div>
-              <!-- 사고원인 -->
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(234,179,8,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고원인 1위</div>
-                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-caution)">45%</div>
-                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">승무원 과실</div>
-                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">화물 22% · 외적원인 17%</div>
-              </div>
-              <!-- 사고물질 -->
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고물질 1위</div>
-                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-tertiary)">12%</div>
-                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">자일렌류</div>
-                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">옥탄올·라텍스·팜유 순</div>
-              </div>
-            </div>
-
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
-              <!-- 유출량 분포 -->
-              <div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:6px">📈 유출량 분포 (76건)</div>
-                <div style="display:flex;flex-direction:column;gap:3px;font-size:8px;font-family:var(--font-korean)">
-                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">0~50L</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:36%;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-info));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">27건</span></div>
-                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">1K~10KL</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:20%;height:100%;background:linear-gradient(90deg,var(--color-warning),var(--color-danger));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">15건</span></div>
-                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">101~500L</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:13%;height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-accent));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">10건</span></div>
-                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--color-danger)">100만L+</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:12%;height:100%;background:linear-gradient(90deg,var(--color-danger),rgba(239,68,68,.6));border-radius:3px"></div></div><span style="color:var(--color-danger);font-weight:700;width:32px;text-align:right">9건</span></div>
-                </div>
-                <div style="margin-top:4px;font-size:7px;color:var(--fg-disabled)">※ 소형(50L이하)과 대형(100만L+) 양극화 → 차별화된 대응 필요</div>
-              </div>
-
-              <!-- HATS 표준코드 체계 -->
-              <div>
-                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:6px">🏷 HATS 표준코드 10개 항목</div>
-                <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:3px;font-size:7px;font-family:var(--font-korean);text-align:center">
-                  <div style="padding:5px 2px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--color-tertiary);font-weight:600">1.오염원</div>
-                  <div style="padding:5px 2px;background:rgba(6,182,212,.06);border-radius:3px;color:var(--color-accent);font-weight:600">2.위치·일시</div>
-                  <div style="padding:5px 2px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--color-warning);font-weight:600">3.기상환경</div>
-                  <div style="padding:5px 2px;background:rgba(239,68,68,.06);border-radius:3px;color:var(--color-danger);font-weight:600">4.사고유형</div>
-                  <div style="padding:5px 2px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--color-success);font-weight:600">5.유출물질</div>
-                  <div style="padding:5px 2px;background:rgba(59,130,246,.06);border-radius:3px;color:var(--color-info);font-weight:600">6.대응</div>
-                  <div style="padding:5px 2px;background:rgba(234,179,8,.06);border-radius:3px;color:var(--color-caution);font-weight:600">7.피해복구</div>
-                  <div style="padding:5px 2px;background:rgba(239,68,68,.06);border-radius:3px;color:var(--color-danger);font-weight:600">8.사고원인</div>
-                  <div style="padding:5px 2px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--color-tertiary);font-weight:600">9.피해상황</div>
-                  <div style="padding:5px 2px;background:rgba(6,182,212,.06);border-radius:3px;color:var(--color-accent);font-weight:600">10.영향</div>
-                </div>
-                <div style="margin-top:6px;font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">해상 특수성 반영(GPS 좌표, 선박종류, 해상기상, 파고, 유출물질 CAS번호·SEBC 거동분류). <b style="color:var(--color-tertiary)">WING 사고이력 모듈</b>과 표준코드 연동 설계.</div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 국내외 사고관리시스템 비교 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:10px">🌐 국내외 HNS/화학 사고관리시스템 비교</div>
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
-                <thead><tr style="background:rgba(168,85,247,.06)">
-                  <th style="padding:6px 8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-tertiary)">항목</th>
-                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-info)">eMARS (EU)</th>
-                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-danger)">PSID (미국)</th>
-                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">RISCAD (일본)</th>
-                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">CSC (한국)</th>
-                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent);font-weight:800">WING (개발중)</th>
-                </tr></thead>
-                <tbody>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">운영기관</td><td style="text-align:center;color:var(--fg-sub)">EC</td><td style="text-align:center;color:var(--fg-sub)">CCPS</td><td style="text-align:center;color:var(--fg-sub)">JST·AIST</td><td style="text-align:center;color:var(--fg-sub)">화학물질안전원</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해양경찰청</td></tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">대상</td><td style="text-align:center;color:var(--fg-sub)">중대화학사고</td><td style="text-align:center;color:var(--fg-sub)">공정사고</td><td style="text-align:center;color:var(--fg-sub)">화학사고</td><td style="text-align:center;color:var(--fg-sub)">화학사고</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해상 HNS</td></tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">초점</td><td style="text-align:center;color:var(--fg-sub)">산업시설</td><td style="text-align:center;color:var(--fg-sub)">산업시설</td><td style="text-align:center;color:var(--fg-sub)">사고원인·산업</td><td style="text-align:center;color:var(--fg-sub)">사고물질</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해역·선박·확산</td></tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">형태</td><td style="text-align:center;color:var(--fg-sub)">웹DB</td><td style="text-align:center;color:var(--fg-sub)">앱CD</td><td style="text-align:center;color:var(--fg-sub)">웹</td><td style="text-align:center;color:var(--fg-sub)">앱</td><td style="text-align:center;color:var(--color-accent);font-weight:600">웹+GIS 통합</td></tr>
-                  <tr><td style="padding:5px 8px;color:var(--fg-disabled)">해상 특화</td><td style="text-align:center;color:var(--color-warning)">△</td><td style="text-align:center;color:var(--color-danger)">✕</td><td style="text-align:center;color:var(--color-danger)">✕</td><td style="text-align:center;color:var(--color-warning)">△</td><td style="text-align:center;color:var(--color-success);font-weight:700">◎</td></tr>
-                </tbody>
-              </table>
-            </div>
-            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ WING은 HATS 표준코드 + CAMEO/ALOHA + WRF-Chem + ROMS를 통합한 해상 특화 위기대응 시스템</div>
-          </div>
-
-          <!-- WING 적용 시사점 -->
-          <div style="background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.15);border-radius:10px;padding:14px">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
-              <span style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">💡 논문 시사점 → WING 시스템 반영</span>
-            </div>
-            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;font-size:9px;font-family:var(--font-korean)">
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:16px;margin-bottom:4px">🔗</div>
-                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">통합정보시스템</div>
-                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">CARIS·CAMEO·기상·GIS 통합 → 사고 대응 의사결정 지원</div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:16px;margin-bottom:4px">🏭</div>
-                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">항만별 특화 대응</div>
-                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">울산·여수·대산 등 고위험 항만 맞춤 시나리오 사전 구축</div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:16px;margin-bottom:4px">📡</div>
-                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">실시간 모니터링</div>
-                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">HNS 블랙박스 + 대기확산 예측 + 위험구역 자동 설정</div>
-              </div>
-              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
-                <div style="font-size:16px;margin-bottom:4px">🤝</div>
-                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">통합지휘 지원</div>
-                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">미국 ICS 모델 참조 — 다기관 협업 정보공유 플랫폼</div>
-              </div>
-              <div style="padding:10px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.15);border-radius:6px;text-align:center">
-                <div style="font-size:16px;margin-bottom:4px">📊</div>
-                <div style="font-weight:700;color:var(--color-tertiary);margin-bottom:3px">HATS 사고이력</div>
-                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">표준코드 DB 연동 → 동일해역·물질 과거사고 즉시 조회</div>
-              </div>
-            </div>
-          </div>`,
-  // Panel 1
-  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
-
-            <!-- 가우시안 플룸 모델 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-tertiary)">
-              <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-                <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🌀</div>
-                <div>
-                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">Gaussian Plume Model</div>
-                  <div style="font-size:9px;color:var(--color-tertiary);font-family:var(--font-mono)">연속 방출 (Continuous Release)</div>
-                </div>
-              </div>
-              <div style="background:var(--bg-base);border:1px solid rgba(168,85,247,.2);border-radius:8px;padding:14px;margin-bottom:12px;font-family:var(--font-mono)">
-                <div style="font-size:9px;color:var(--fg-disabled);margin-bottom:6px;font-family:var(--font-korean);font-weight:600">📌 농도 산출식 (Concentration Equation)</div>
-                <div style="font-size:11px;color:var(--color-accent);line-height:2;letter-spacing:.3px">
-                  C(x,y,z) = <span style="color:var(--color-warning)">Q</span> / (2π · <span style="color:var(--color-success)">σ<sub>y</sub></span> · <span style="color:var(--color-success)">σ<sub>z</sub></span> · <span style="color:var(--color-info)">u</span>)<br>
-                  × exp(-y² / 2<span style="color:var(--color-success)">σ<sub>y</sub></span>²)<br>
-                  × [exp(-(z-H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²) + exp(-(z+H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²)]
-                </div>
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:10px;font-family:var(--font-korean)">
-                <div style="padding:6px 8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px"><span style="color:var(--color-warning);font-weight:700;font-family:var(--font-mono)">Q</span> <span style="color:var(--fg-disabled)">= 배출률 (g/s)</span></div>
-                <div style="padding:6px 8px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:4px"><span style="color:var(--color-info);font-weight:700;font-family:var(--font-mono)">u</span> <span style="color:var(--fg-disabled)">= 풍속 (m/s)</span></div>
-                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>y</sub></span> <span style="color:var(--fg-disabled)">= 수평 확산계수</span></div>
-                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>z</sub></span> <span style="color:var(--fg-disabled)">= 연직 확산계수</span></div>
-                <div style="padding:6px 8px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.12);border-radius:4px;grid-column:span 2"><span style="color:var(--color-tertiary);font-weight:700;font-family:var(--font-mono)">H</span> <span style="color:var(--fg-disabled)">= 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정</span></div>
-              </div>
-              <div style="margin-top:10px;padding:8px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                💡 <b style="color:var(--color-accent)">적용 조건:</b> 정상 상태 연속 배출, 균일 풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
-              </div>
-            </div>
-
-            <!-- 가우시안 퍼프 모델 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning)">
-              <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-                <div style="width:28px;height:28px;border-radius:6px;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:14px">💨</div>
-                <div>
-                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">Gaussian Puff Model</div>
-                  <div style="font-size:9px;color:var(--color-warning);font-family:var(--font-mono)">순간 방출 (Instantaneous Release)</div>
-                </div>
-              </div>
-              <div style="background:var(--bg-base);border:1px solid rgba(249,115,22,.2);border-radius:8px;padding:14px;margin-bottom:12px;font-family:var(--font-mono)">
-                <div style="font-size:9px;color:var(--fg-disabled);margin-bottom:6px;font-family:var(--font-korean);font-weight:600">📌 농도 산출식 (Puff Concentration)</div>
-                <div style="font-size:11px;color:var(--color-accent);line-height:2;letter-spacing:.3px">
-                  C(x,y,z,t) = <span style="color:var(--color-warning)">M</span> / [(2π)<sup>3/2</sup> · <span style="color:var(--color-success)">σ<sub>x</sub></span> · <span style="color:var(--color-success)">σ<sub>y</sub></span> · <span style="color:var(--color-success)">σ<sub>z</sub></span>]<br>
-                  × exp(-(x-<span style="color:var(--color-info)">u</span>t)² / 2<span style="color:var(--color-success)">σ<sub>x</sub></span>²)<br>
-                  × exp(-y² / 2<span style="color:var(--color-success)">σ<sub>y</sub></span>²)<br>
-                  × [exp(-(z-H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²) + exp(-(z+H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²)]
-                </div>
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:10px;font-family:var(--font-korean)">
-                <div style="padding:6px 8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px"><span style="color:var(--color-warning);font-weight:700;font-family:var(--font-mono)">M</span> <span style="color:var(--fg-disabled)">= 총 배출량 (g)</span></div>
-                <div style="padding:6px 8px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:4px"><span style="color:var(--color-info);font-weight:700;font-family:var(--font-mono)">t</span> <span style="color:var(--fg-disabled)">= 경과시간 (s)</span></div>
-                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px;grid-column:span 2"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>x</sub></span> <span style="color:var(--fg-disabled)">= 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영</span></div>
-              </div>
-              <div style="margin-top:10px;padding:8px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                💡 <b style="color:var(--color-warning)">적용 조건:</b> 순간적 대량 방출, 폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
-              </div>
-            </div>
-          </div>
-
-          <!-- Pasquill-Gifford 확산 계수 테이블 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
-              <div style="display:flex;align-items:center;gap:8px">
-                <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">📊 Pasquill-Gifford 대기안정도 분류 및 확산계수</div>
-              </div>
-              <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-mono)">σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f</div>
-            </div>
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;font-size:10px;font-family:var(--font-korean)">
+            <div style={{ overflowX: 'auto' }}>
+              <table
+                style={{
+                  width: '100%',
+                  borderCollapse: 'collapse',
+                  fontSize: 'var(--font-size-caption)',
+                }}
+              >
                 <thead>
-                  <tr style="background:rgba(168,85,247,.08)">
-                    <th style="padding:8px 10px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-tertiary);font-weight:700">안정도</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">분류</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">기상 조건</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success);font-family:var(--font-mono)">σ<sub>y</sub> 계수 (a, b)</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success);font-family:var(--font-mono)">σ<sub>z</sub> 계수 (c, d, f)</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">풍속 범위</th>
-                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">해양 적용성</th>
+                  <tr style={{ background: 'rgba(6,182,212,.06)' }}>
+                    <th
+                      style={{
+                        padding: '6px 8px',
+                        textAlign: 'left',
+                        borderBottom: '2px solid var(--stroke-light)',
+                        color: 'var(--color-accent)',
+                      }}
+                    >
+                      항만
+                    </th>
+                    <th
+                      style={{
+                        padding: '6px 8px',
+                        textAlign: 'center',
+                        borderBottom: '2px solid var(--stroke-light)',
+                        color: 'var(--fg-sub)',
+                      }}
+                    >
+                      화재
+                    </th>
+                    <th
+                      style={{
+                        padding: '6px 8px',
+                        textAlign: 'center',
+                        borderBottom: '2px solid var(--stroke-light)',
+                        color: 'var(--fg-sub)',
+                      }}
+                    >
+                      폭발
+                    </th>
+                    <th
+                      style={{
+                        padding: '6px 8px',
+                        textAlign: 'center',
+                        borderBottom: '2px solid var(--stroke-light)',
+                        color: 'var(--fg-sub)',
+                      }}
+                    >
+                      누출
+                    </th>
+                    <th
+                      style={{
+                        padding: '6px 8px',
+                        textAlign: 'center',
+                        borderBottom: '2px solid var(--stroke-light)',
+                        color: 'var(--fg-sub)',
+                      }}
+                    >
+                      HNS(천톤)
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-danger)">A</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">매우 불안정</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">맑은 날 강한 일사</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.3658, 0.9024</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.192, 0.936, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">< 2 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(234,179,8,.12);color:var(--color-caution);font-size:9px;font-weight:600">드물게</span></td>
-                  </tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-warning)">B</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">불안정</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">맑은 날 약한 일사</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.2751, 0.9031</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.156, 0.922, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">2–3 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(234,179,8,.12);color:var(--color-caution);font-size:9px;font-weight:600">드물게</span></td>
-                  </tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-caution)">C</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">약간 불안정</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">흐린 날 주간</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.2090, 0.9031</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.116, 0.905, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3–5 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">적합</span></td>
-                  </tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(168,85,247,.03)">
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-accent)">D ★</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">중립</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">흐린 날 / 해상풍</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.1471, 0.9031</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.079, 0.881, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">5–6 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(6,182,212,.15);color:var(--color-accent);font-size:9px;font-weight:700">★ 해양 대표</span></td>
-                  </tr>
-                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-info)">E</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">약간 안정</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">야간 약한 바람</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.1046, 0.9031</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.064, 0.871, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3–5 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">적합</span></td>
-                  </tr>
-                  <tr>
-                    <td style="padding:7px 10px;font-weight:700;color:var(--color-tertiary)">F</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">안정</td>
-                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">야간 맑은 하늘</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.0722, 0.9031</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.051, 0.814, 0</td>
-                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">< 3 m/s</td>
-                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:600">위험↑</span></td>
-                  </tr>
+                  {[
+                    {
+                      name: '울산',
+                      fire: '◎',
+                      exp: '◎',
+                      leak: '◎',
+                      hns: '27,574',
+                      danger: true,
+                    },
+                    {
+                      name: '여수·광양',
+                      fire: '◎',
+                      exp: '◎',
+                      leak: '◎',
+                      hns: '38,700',
+                      danger: true,
+                    },
+                    { name: '대산', fire: '◎', exp: '○', leak: '◎', hns: '19,401', danger: false },
+                    { name: '인천', fire: '○', exp: '◎', leak: '○', hns: '41,618', danger: false },
+                    { name: '부산', fire: '○', exp: '△', leak: '○', hns: '25,417', danger: false },
+                    {
+                      name: '평택·당진',
+                      fire: '○',
+                      exp: '◎',
+                      leak: '○',
+                      hns: '29,248',
+                      danger: false,
+                    },
+                  ].map((row) => (
+                    <tr
+                      key={row.name}
+                      style={{
+                        borderBottom: '1px solid rgba(255,255,255,.04)',
+                        background: row.danger ? 'rgba(6,182,212,.03)' : undefined,
+                      }}
+                    >
+                      <td
+                        style={{
+                          padding: '5px 8px',
+                          fontWeight: 700,
+                          color: row.danger ? 'var(--color-accent)' : 'var(--fg-default)',
+                        }}
+                      >
+                        {row.name}
+                      </td>
+                      <td style={{ textAlign: 'center' }}>{row.fire}</td>
+                      <td style={{ textAlign: 'center' }}>{row.exp}</td>
+                      <td style={{ textAlign: 'center' }}>{row.leak}</td>
+                      <td
+                        className="font-mono"
+                        style={{
+                          textAlign: 'center',
+                          color: row.danger ? 'var(--color-accent)' : 'var(--color-accent)',
+                        }}
+                      >
+                        {row.hns}
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
-            <div style="margin-top:10px;padding:8px 10px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.1);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-              ★ 해양 환경에서는 <b style="color:var(--color-accent)">D 등급(중립)</b>이 가장 빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가 국지적으로 높게 유지되어 <b style="color:var(--color-danger)">위험도 상승</b>.
+            <div
+              className="flex gap-2 mt-[6px]"
+              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
+            >
+              <span>◎ 아주높음</span>
+              <span>○ 높음</span>
+              <span>△ 보통이상</span>
+              <span>□ 보통</span>
+              <span className="ml-auto">단위: 천톤, 2010년 기준</span>
             </div>
           </div>
 
-          <!-- 플룸 vs 퍼프 비교 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
-            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">⚖ Plume vs Puff — 모델 선택 기준</div>
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
-              <div style="padding:12px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.15);border-radius:8px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);margin-bottom:8px;font-family:var(--font-korean)">🌀 Plume (연속 배출) 선택 기준</div>
-                <div style="display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--fg-sub);font-family:var(--font-korean)">
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 유출 지속시간 > 10분</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 탱크 균열/배관 파손 — 지속적 누출</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 풍속 > 1.5 m/s (정상류 가정 가능)</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 톨루엔, 벤젠, 자일렌 등 증발성 액체</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 암모니아 냉동 저장탱크 누출</div>
+          {/* HNS 구분 및 사고 유형 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              ⚠ HNS 위험물질 vs 유해물질
+            </div>
+            <div className="grid grid-cols-2 gap-[6px] mb-2">
+              <div
+                style={{
+                  padding: '8px',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 700,
+                    color: 'var(--color-accent)',
+                    marginBottom: '4px',
+                  }}
+                >
+                  위험물질
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  폭발·인화·독성·부식·질식·중합 등으로 생명체에 위험을 초래하는 물질
+                </div>
+                <div className="flex flex-wrap gap-[2px] mt-1">
+                  {['포장위험물', '산적고체', '산적액체', '액화가스'].map((t) => (
+                    <span
+                      key={t}
+                      style={{
+                        padding: '1px 5px',
+                        borderRadius: '3px',
+                        background: 'rgba(6,182,212,.06)',
+                        fontSize: 'var(--font-size-caption)',
+                        color: 'var(--color-accent)',
+                      }}
+                    >
+                      {t}
+                    </span>
+                  ))}
                 </div>
               </div>
-              <div style="padding:12px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.15);border-radius:8px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-warning);margin-bottom:8px;font-family:var(--font-korean)">💨 Puff (순간 배출) 선택 기준</div>
-                <div style="display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--fg-sub);font-family:var(--font-korean)">
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 유출 지속시간 < 10분</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 탱크 폭발/BLEVE — 순간 방출</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 풍향 변동이 큰 경우 (여러 퍼프 중첩)</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> LPG, 수소, LNG 탱크 파열</div>
-                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 컨테이너 화학물질 돌발 유출</div>
+              <div
+                style={{
+                  padding: '8px',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 700,
+                    color: 'var(--color-accent)',
+                    marginBottom: '4px',
+                  }}
+                >
+                  유해물질
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  해양에서 해로운 영향을 초래하는 물질·에너지 (해양환경관리법)
+                </div>
+                <div className="flex flex-wrap gap-[2px] mt-1">
+                  {['유해액체', '포장유해', '대기오염', '폐기물'].map((t) => (
+                    <span
+                      key={t}
+                      style={{
+                        padding: '1px 5px',
+                        borderRadius: '3px',
+                        background: 'rgba(6,182,212,.06)',
+                        fontSize: 'var(--font-size-caption)',
+                        color: 'var(--color-accent)',
+                      }}
+                    >
+                      {t}
+                    </span>
+                  ))}
                 </div>
               </div>
             </div>
-          </div>`,
-  // Panel 2
-  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
-
-            <!-- 물질 카드 1: 암모니아 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-warning)">
-              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
-                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🧪</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">암모니아 (NH₃)</span></div>
-                <span style="padding:3px 8px;border-radius:6px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:700">독성 ★★★</span>
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-33°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.682</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">300 ppm</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH</div></div>
-              </div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                <div>• 해수면 유출 시 <b style="color:var(--color-warning)">급속 기화</b> → Flash Evaporation</div>
-                <div>• 2D 기화율: <span style="font-family:var(--font-mono);color:var(--color-accent)">ṁ = 0.0168t − 0.01</span></div>
-                <div>• 3D 기화율: <span style="font-family:var(--font-mono);color:var(--color-accent)">ṁ = 0.0182t − 0.0112</span></div>
-                <div>• 독성 구름 풍하측 <b style="color:var(--color-danger)">최대 10km</b>까지 영향</div>
-              </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '6px',
+              }}
+            >
+              📊 유류 vs HNS 사고 대응 차이
             </div>
-
-            <!-- 물질 카드 2: 메탄올 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-tertiary)">
-              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
-                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🧫</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">메탄올 (CH₃OH)</span></div>
-                <span style="padding:3px 8px;border-radius:6px;background:rgba(249,115,22,.12);color:var(--color-warning);font-size:9px;font-weight:700">인화성+독성</span>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'auto 1fr 1fr',
+                fontSize: 'var(--font-size-caption)',
+              }}
+            >
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  fontWeight: 600,
+                  color: 'var(--color-accent)',
+                }}
+              >
+                구분
               </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">64.7°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.791</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">6,000 ppm</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH</div></div>
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.08)',
+                  textAlign: 'center',
+                  fontWeight: 600,
+                  color: 'var(--color-accent)',
+                }}
+              >
+                유류
               </div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                <div>• 수용성 → 해수 용해 + 증발 <b style="color:var(--color-tertiary)">복합 거동</b></div>
-                <div>• 인화점 <span style="font-family:var(--font-mono);color:var(--color-danger)">11°C</span> → 상온에서 증기 인화 위험</div>
-                <div>• 무색·무취 → <b style="color:var(--color-danger)">감지 어려움</b>, 계측기 필수</div>
-                <div>• LFL~UFL: <span style="font-family:var(--font-mono);color:var(--color-warning)">6.0% ~ 36.5%</span></div>
-              </div>
-            </div>
-
-            <!-- 물질 카드 3: 수소 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-danger)">
-              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
-                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">⚡</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">수소 (H₂)</span></div>
-                <span style="padding:3px 8px;border-radius:6px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:700">폭발성 ★★★</span>
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-253°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.071</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">N/A</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH(질식)</div></div>
-              </div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                <div>• 공기보다 <b style="color:var(--color-accent)">14배 가벼움</b> → 급속 상승 확산</div>
-                <div>• LFL~UFL: <span style="font-family:var(--font-mono);color:var(--color-danger)">4.0% ~ 75.0%</span> (극넓은 가연범위)</div>
-                <div>• 점화에너지 <span style="font-family:var(--font-mono);color:var(--color-danger)">0.017 mJ</span> (정전기로도 폭발)</div>
-                <div>• Puff 모델 필수 → <b style="color:var(--color-danger)">BLEVE/VCE</b> 시나리오</div>
-              </div>
-            </div>
-
-            <!-- 물질 카드 4: LNG -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-info)">
-              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
-                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🔵</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">LNG (CH₄)</span></div>
-                <span style="padding:3px 8px;border-radius:6px;background:rgba(59,130,246,.12);color:var(--color-info);font-size:9px;font-weight:700">인화성 ★★</span>
-              </div>
-              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-162°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.450</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
-                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">N/A</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH(질식)</div></div>
-              </div>
-              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                <div>• 극저온 유출 시 <b style="color:var(--color-accent)">RPT</b>(Rapid Phase Transition) 발생</div>
-                <div>• 해수면 Pool 형성 → 기화율 <span style="font-family:var(--font-mono);color:var(--color-accent)">0.025t</span></div>
-                <div>• 가연범위: <span style="font-family:var(--font-mono);color:var(--color-warning)">5.0% ~ 15.0%</span></div>
-                <div>• 초기 냉각 증기 → <b style="color:var(--color-info)">지표면 체류</b> 후 상승</div>
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.08)',
+                  textAlign: 'center',
+                  fontWeight: 600,
+                  color: 'var(--color-accent)',
+                }}
+              >
+                HNS
               </div>
+              {[
+                {
+                  label: '물질',
+                  oil: '눈으로 확인 가능',
+                  hns: '보이지 않는 경우 多',
+                  hnsC: 'var(--color-accent)',
+                },
+                {
+                  label: '위험',
+                  oil: '낮은 위험성',
+                  hns: '독성·폭발·화재 복합',
+                  hnsC: 'var(--color-accent)',
+                },
+                {
+                  label: '예측',
+                  oil: '단기 예측 가능',
+                  hns: '다매체 피해예측 필요',
+                  hnsC: 'var(--color-accent)',
+                },
+                {
+                  label: '대응',
+                  oil: '초기대응자 방제가능',
+                  hns: '전문가 방제 필수',
+                  hnsC: 'var(--color-accent)',
+                },
+              ].map((row) => (
+                <>
+                  <div
+                    key={`${row.label}-label`}
+                    style={{
+                      padding: '3px 6px',
+                      border: '1px solid var(--stroke-light)',
+                      color: 'var(--fg-disabled)',
+                    }}
+                  >
+                    {row.label}
+                  </div>
+                  <div
+                    key={`${row.label}-oil`}
+                    style={{
+                      padding: '3px 6px',
+                      border: '1px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                      textAlign: 'center',
+                    }}
+                  >
+                    {row.oil}
+                  </div>
+                  <div
+                    key={`${row.label}-hns`}
+                    style={{
+                      padding: '3px 6px',
+                      border: '1px solid var(--stroke-light)',
+                      color: row.hnsC,
+                      textAlign: 'center',
+                    }}
+                  >
+                    {row.hns}
+                  </div>
+                </>
+              ))}
             </div>
           </div>
+        </div>
+      </div>
 
-          <!-- 물질별 AEGL 비교표 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
-            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:12px">📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)</div>
-            <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;font-size:10px;font-family:var(--font-korean)">
-              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--fg-disabled)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">기준</div><div style="font-weight:700;color:var(--fg-default)">등급</div></div>
-              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-warning)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🧪</div><div style="font-weight:700;color:var(--color-warning)">NH₃</div></div>
-              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-tertiary)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🧫</div><div style="font-weight:700;color:var(--color-tertiary)">MeOH</div></div>
-              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-danger)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">⚡</div><div style="font-weight:700;color:var(--color-danger)">H₂</div></div>
-              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-info)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🔵</div><div style="font-weight:700;color:var(--color-info)">LNG</div></div>
-              <!-- AEGL-1 -->
-              <div style="padding:6px;background:rgba(234,179,8,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-caution)">AEGL-1</div>
-              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">30</div>
-              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">670</div>
-              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <!-- AEGL-2 -->
-              <div style="padding:6px;background:rgba(249,115,22,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-warning)">AEGL-2</div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">160</div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">2,100</div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <!-- AEGL-3 -->
-              <div style="padding:6px;background:rgba(239,68,68,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-danger)">AEGL-3</div>
-              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">1,100</div>
-              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">14,000</div>
-              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
-              <!-- LFL -->
-              <div style="padding:6px;background:rgba(59,130,246,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-info)">LFL (%)</div>
-              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">15.0</div>
-              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">6.0</div>
-              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">4.0</div>
-              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">5.0</div>
-            </div>
-            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용</div>
-          </div>`,
-  // Panel 3
-  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
-            <!-- 해양 보정 인자 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-accent)">
-              <div style="font-size:13px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:14px">🌊 해양환경 특수 보정 인자</div>
-              <div style="display:flex;flex-direction:column;gap:10px">
-                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해풍·육풍 순환 보정</span>
-                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(239,68,68,.1);color:var(--color-danger);font-weight:600">핵심 인자</span>
-                  </div>
-                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                    해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을 가정하므로, <b style="color:var(--color-accent)">풍향 전환 시점</b>에서 플룸 방향 급변을 반영해야 함.<br>
-                    <span style="font-family:var(--font-mono);font-size:9px;color:var(--color-tertiary)">θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)</span>
-                  </div>
-                </div>
-                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해수면 거칠기 (z₀) 보정</span>
-                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">중요</span>
-                  </div>
-                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                    해수면은 육상 대비 표면 거칠기가 매우 낮음 (<span style="font-family:var(--font-mono);color:var(--color-accent)">z₀ ≈ 0.0002 m</span> vs 도시 0.5~2.0 m). Charnock 관계식 적용:<br>
-                    <span style="font-family:var(--font-mono);font-size:9px;color:var(--color-tertiary)">z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)</span>
-                  </div>
-                </div>
-                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해수면 온도(SST) 영향</span>
-                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.1);color:var(--color-success);font-weight:600">보조</span>
-                  </div>
-                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                    해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소. 반대로 SST < T<sub>air</sub>이면 안정층 형성으로 <b style="color:var(--color-danger)">농도 체류↑</b>.
-                  </div>
-                </div>
-                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해상 대기경계층(MABL) 구조</span>
-                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">중요</span>
-                  </div>
-                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                    해양 대기경계층은 육상과 구조가 상이. 혼합고 <span style="font-family:var(--font-mono);color:var(--color-accent)">300~800 m</span>(육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시 <b style="color:var(--color-danger)">지표 농도 급상승</b>.
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 보정 계수 시각화 -->
-            <div style="display:flex;flex-direction:column;gap:16px">
-              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
-                <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:12px">📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)</div>
-                <div style="display:flex;flex-direction:column;gap:8px">
-                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">P-G 원본</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:60%;height:100%;background:linear-gradient(90deg,rgba(168,85,247,.4),rgba(168,85,247,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-tertiary);min-width:50px;text-align:right">68 m</span></div>
-                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">해양 보정</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:82%;height:100%;background:linear-gradient(90deg,rgba(6,182,212,.4),rgba(6,182,212,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-accent);min-width:50px;text-align:right">92 m</span></div>
-                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">ALOHA</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:72%;height:100%;background:linear-gradient(90deg,rgba(249,115,22,.4),rgba(249,115,22,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-warning);min-width:50px;text-align:right">78 m</span></div>
-                </div>
-                <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준</div>
-              </div>
-
-              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning)">
-                <div style="font-size:13px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:12px">🔬 ALOHA vs 이문진박사모델 비교</div>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px;font-family:var(--font-korean)">
-                  <div style="padding:8px;background:var(--bg-base);border-radius:6px">
-                    <div style="font-weight:700;color:var(--color-warning);margin-bottom:4px">ALOHA (EPA)</div>
-                    <div style="color:var(--fg-sub);line-height:1.6">• 가우시안 플룸 기본<br>• 평탄 지형 가정<br>• 표면 거칠기 고정값<br>• 해양 특성 미반영<br>• 1차원 풍향 고정</div>
-                  </div>
-                  <div style="padding:8px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.1);border-radius:6px">
-                    <div style="font-weight:700;color:var(--color-accent);margin-bottom:4px">이문진박사모델 (해양 보정)</div>
-                    <div style="color:var(--fg-sub);line-height:1.6">• 가우시안 + 해양 보정<br>• 해안 지형 효과 반영<br>• Charnock z₀ 동적 계산<br>• 해풍/육풍 전환 반영<br>• MABL 혼합고 가변</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>`,
-  // Panel 4
-  `<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px">
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
-              <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:14px">✅ 모델 검증 결과 — 실측 데이터 대비 정확도</div>
-              <div style="overflow-x:auto">
-                <table style="width:100%;border-collapse:collapse;font-size:10px;font-family:var(--font-korean)">
-                  <thead>
-                    <tr style="background:rgba(34,197,94,.06)">
-                      <th style="padding:8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">검증 항목</th>
-                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">ALOHA</th>
-                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">이문진박사모델</th>
-                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">실측값</th>
-                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">오차율</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                      <td style="padding:7px 8px;color:var(--fg-default)">NH₃ 최대 도달거리 (AEGL-2)</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">8.2 km</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">7.1 km</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">6.8 km</td>
-                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+20.6%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+4.4%</span></td>
-                    </tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                      <td style="padding:7px 8px;color:var(--fg-default)">풍하 1km 지점 농도 (ppm)</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">245</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">198</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">187</td>
-                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+31.0%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+5.9%</span></td>
-                    </tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                      <td style="padding:7px 8px;color:var(--fg-default)">MeOH 증기 확산 면적 (km²)</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">4.8</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3.6</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">3.4</td>
-                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+41.2%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+5.9%</span></td>
-                    </tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
-                      <td style="padding:7px 8px;color:var(--fg-default)">H₂ 가연성 구름 반경 (m)</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">280</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">235</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">220</td>
-                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+27.3%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+6.8%</span></td>
-                    </tr>
-                    <tr>
-                      <td style="padding:7px 8px;color:var(--fg-default)">LNG Pool 확산 직경 (m)</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">165</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">142</td>
-                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">138</td>
-                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+19.6%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+2.9%</span></td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <div style="margin-top:12px;padding:10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                <b style="color:var(--color-success)">결론:</b> ALOHA는 해양 환경에서 <b style="color:var(--color-warning)">평균 20~40% 과대 예측</b> 경향. 이문진박사모델은 해양 보정 인자 적용으로 <b style="color:var(--color-success)">평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km 이내 근거리 농도 예측 정확도가 현저히 향상됨.
-              </div>
-            </div>
-
-            <!-- 검증 인용 / 참고문헌 -->
-            <div style="display:flex;flex-direction:column;gap:12px">
-              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
-                <div style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:10px">📚 참고 문헌</div>
-                <div style="display:flex;flex-direction:column;gap:8px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-tertiary)">이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한 연구", 한국해양환경·에너지학회지, 2014</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-accent)">이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링", KIOST, 2023</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-warning)">EPA, "ALOHA User's Manual", 2024</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-success)">Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological Magazine, 1961</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-caution)">Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-danger)">유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92, 2013</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-info)">해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-success)">김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의", 한국해양환경·안전학회지, 30(s4), pp.42-51, 2024</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-tertiary)">장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현", 한국해양환경·안전학회지, 23(2), pp.168-176, 2017</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-accent)">박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS) 탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의 열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS 탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)</div>
-                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-warning)">오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를 활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86, 2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을 예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부 지원(RS-2021-KS211535)</div>
-                </div>
-              </div>
-              <div style="background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(6,182,212,.04));border:1px solid rgba(168,85,247,.2);border-radius:10px;padding:14px">
-                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);margin-bottom:8px;font-family:var(--font-korean)">💡 시스템 적용 방안</div>
-                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-                  WING 시스템은 기본 ALOHA 엔진 위에 <b style="color:var(--color-accent)">이문진박사모델 해양 보정 모듈</b>을 레이어로 적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀 예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
-                </div>
-              </div>
-            </div>
-          </div>`,
-  // Panel 5
-  `<div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
-              <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">⚡ 실시간 모델 비교 시뮬레이션</div>
-              <div style="display:flex;gap:6px">
-                <button onclick="runModelCompare()" id="mcRunBtn" style="padding:6px 16px;border-radius:6px;border:none;background:linear-gradient(135deg,var(--color-tertiary),var(--color-info));color:#fff;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-korean)">▶ 비교 실행</button>
-                <button style="padding:6px 12px;border-radius:6px;border:1px solid var(--stroke-default);background:var(--bg-card);color:var(--fg-sub);font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font-korean)">⚙ 파라미터</button>
-              </div>
-            </div>
-            <!-- 시뮬레이션 입력 -->
-            <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px">
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">물질</label><select style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-korean)"><option>암모니아</option><option>메탄올</option><option>수소</option><option>LNG</option><option selected>톨루엔</option></select></div>
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">유출량 (kL)</label><input type="number" value="12.0" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">풍속 (m/s)</label><input type="number" value="5.2" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">안정도</label><select style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-korean)"><option>A</option><option>B</option><option>C</option><option selected>D</option><option>E</option><option>F</option></select></div>
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">기온 (°C)</label><input type="number" value="8.5" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
-              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">SST (°C)</label><input type="number" value="12.3" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
-            </div>
-            <!-- 결과 비교 카드 -->
-            <div id="mcResult" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
-              <div style="padding:14px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.2);border-radius:8px;text-align:center">
-                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">ALOHA (EPA)</div>
-                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">3.8 <span style="font-size:12px">km</span></div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">AEGL-2 도달거리</div>
-                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적</span><br><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">12.3 km²</span></div>
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">최대농도</span><br><span style="color:var(--color-danger);font-weight:600;font-family:var(--font-mono)">520 ppm</span></div>
-                </div>
-              </div>
-              <div style="padding:14px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.2);border-radius:8px;text-align:center">
-                <div style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">이문진박사모델 (해양보정)</div>
-                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">2.9 <span style="font-size:12px">km</span></div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">AEGL-2 도달거리</div>
-                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적</span><br><span style="color:var(--color-accent);font-weight:600;font-family:var(--font-mono)">8.4 km²</span></div>
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">최대농도</span><br><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">410 ppm</span></div>
-                </div>
-              </div>
-              <div style="padding:14px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.2);border-radius:8px;text-align:center">
-                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:8px">차이 분석</div>
-                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-success)">-23.7<span style="font-size:12px">%</span></div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">도달거리 감소율</div>
-                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적차</span><br><span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">-31.7%</span></div>
-                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">농도차</span><br><span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">-21.2%</span></div>
-                </div>
-              </div>
-            </div>
-            <div style="margin-top:12px;padding:10px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
-              ⚡ <b style="color:var(--color-tertiary)">실시간 비교 결과:</b> 해양 환경에서 ALOHA의 과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를 반영하여 보다 현실적인 확산 범위를 산출합니다. <b>대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용</b>을 권장합니다.
-            </div>
-          </div>`,
-  // Panel 6
-  `<!-- WRF-Chem 상세 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-accent)">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
-              <div style="width:32px;height:32px;border-radius:8px;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:16px">🌐</div>
-              <div>
-                <div style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">WRF-Chem 모델 상세</div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean)">Weather Research and Forecasting model coupled with Chemistry</div>
-              </div>
-            </div>
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">구성 요소</div>
-                <div style="display:flex;flex-direction:column;gap:6px">
-                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
-                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                      <span style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">WRF (기상)</span>
-                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.1);color:var(--color-accent);font-family:var(--font-mono)">v4.x</span>
-                    </div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">비정수압(non-hydrostatic) 중규모 기상 모델. 3차원 바람장, 기온, 습도, 대기경계층 구조를 역학적으로 계산. 중첩 도메인(nesting)으로 해상도 1km까지 구현 가능.</div>
-                  </div>
-                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.15);border-radius:6px">
-                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                      <span style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">Chem (화학)</span>
-                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(168,85,247,.1);color:var(--color-tertiary);font-family:var(--font-mono)">Online</span>
-                    </div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">기상 모델과 동일한 시간 스텝에서 화학종의 이류(advection), 난류확산(diffusion), 건·습침적(deposition), 화학반응을 동시에 계산. Offline 방식 대비 정확도 향상.</div>
-                  </div>
-                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(34,197,94,.15);border-radius:6px">
-                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                      <span style="font-size:10px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">결합 효과</span>
-                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.1);color:var(--color-success);font-family:var(--font-mono)">Feedback</span>
-                    </div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">화학물질의 복사 효과가 기상장에 되먹임(feedback). 예: 대량의 에어로졸 방출 시 일사량 변화 → 대기안정도 변화 → 확산 패턴 변화.</div>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">HNS 사고 적용 시 장점</div>
-                <div style="display:flex;flex-direction:column;gap:6px">
-                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
-                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">1</div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">3D 확산 모의:</b> 연직 방향 확산까지 포함한 정밀 농도장 계산. 고층 대기로의 확산과 fumigation 효과 반영</div>
-                  </div>
-                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
-                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">2</div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">비정상류 대응:</b> 풍향 전환(해풍↔육풍), 돌풍, 전선 통과 등 시변 기상 조건을 실시간 반영</div>
-                  </div>
-                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
-                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">3</div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">복잡 지형 반영:</b> 해안 절벽, 항만 구조물, 인접 도시의 건물 효과를 지형 데이터로 반영</div>
-                  </div>
-                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
-                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">4</div>
-                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">장기 모의:</b> 24~72시간 예측으로 사고 수습 계획 및 장기 피해 평가 지원</div>
-                  </div>
-                </div>
-                <div style="margin-top:10px;padding:8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">
-                  ⚠ <b style="color:var(--color-warning)">계산 비용:</b> WRF-Chem은 가우시안 모델 대비 계산 시간이 <b>100~1,000배</b> 소요. 초기 대응에는 가우시안 모델, 정밀 분석에는 WRF-Chem으로 <b style="color:var(--color-accent)">이중 운용</b> 전략 적용.
-                </div>
-              </div>
-            </div>
+      {/* 국내외 대응 체계 비교 */}
+      <div className="grid grid-cols-2 gap-[14px] mb-4">
+        {/* 한국 */}
+        <div className={`${cardBg} rounded-[10px] p-[14px]`}>
+          <div className="flex items-center gap-[6px] mb-[10px]">
+            <span style={{ fontSize: 'var(--font-size-title-3)' }}>🇰🇷</span>
+            <span
+              style={{
+                fontSize: 'var(--font-size-label-1)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              한국 HNS 대응 체계
+            </span>
           </div>
-
-          <!-- ═══ ROMS 해양확산 수치모의 검증 결과 (김창겸 외, 2024) ═══ -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-success)">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
-              <div style="display:flex;align-items:center;gap:8px">
-                <div style="width:28px;height:28px;border-radius:6px;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🌊</div>
+          <div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
+            {[
+              {
+                title: 'OPRC-HNS 의정서',
+                sub: '2008.1.11 가입 → 2008.4.11 발효',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: '국가/지역 긴급방제계획',
+                sub: "HNS 국가긴급방제계획 수립 ('09.6)",
+                color: 'var(--color-accent)',
+              },
+              {
+                title: 'CARIS 대응정보시스템',
+                sub: '사고대응 매뉴얼 + 화학물질 정보',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: '통합 대응 체계',
+                sub: '대통령 → 중앙안전관리위 → 중앙방제대책본부(해양경찰청장)',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: '현장 대응팀',
+                sub: '상황관리팀 → 사고대응팀(통제반·물질탐지반·방제작업반·제독지원반)',
+                color: 'var(--color-accent)',
+              },
+            ].map((item) => (
+              <div
+                key={item.title}
+                style={{
+                  padding: '6px 8px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                }}
+              >
                 <div>
-                  <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">ROMS 해양확산 수치모의 검증 결과</div>
-                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">김창겸·이문진 외 (2024), 한국해양환경·안전학회지 Vol.30</div>
+                  <b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
+                  <br />
+                  <span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
                 </div>
               </div>
-              <span style="padding:3px 10px;border-radius:6px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);font-size:9px;color:var(--color-success);font-weight:700">정확도 75~96%</span>
-            </div>
+            ))}
+          </div>
+        </div>
 
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
-              <!-- ROMS 격자 구성 -->
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">📐 Nesting 격자 구성</div>
-                <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
-                  <thead><tr style="background:rgba(6,182,212,.06)">
-                    <th style="padding:5px 6px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">영역</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">격자크기</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">시간간격</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">수직층</th>
-                  </tr></thead>
-                  <tbody>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:4px 6px;color:var(--fg-default)">광역 (일본·대만 포함)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-accent)">0.05°</td><td style="text-align:center;font-family:var(--font-mono)">5분</td><td style="text-align:center;font-family:var(--font-mono)" rowspan="3">20층</td></tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:4px 6px;color:var(--fg-default)">중간역 (한반도 해역)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-accent)">0.01°</td><td style="text-align:center;font-family:var(--font-mono)">1분</td></tr>
-                    <tr style="background:rgba(34,197,94,.03)"><td style="padding:4px 6px;color:var(--color-success);font-weight:600">상세역 (5개 우심지역)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">0.002°(≈200m)</td><td style="text-align:center;font-family:var(--font-mono)">12초</td></tr>
-                  </tbody>
-                </table>
-                <div style="margin-top:8px;font-size:9px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:6px">🔗 입력 데이터</div>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:8px;font-family:var(--font-korean)">
-                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">ERA5</span> <span style="color:var(--fg-disabled)">기상(기압·풍속·기온)</span></div>
-                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">HYCOM</span> <span style="color:var(--fg-disabled)">수온·염분·유속</span></div>
-                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">TPXO9</span> <span style="color:var(--fg-disabled)">조위 15개 분조</span></div>
-                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">WAMIS</span> <span style="color:var(--fg-disabled)">5대강 일별유량</span></div>
+        {/* 미국 */}
+        <div className={`${cardBg} rounded-[10px] p-[14px]`}>
+          <div className="flex items-center gap-[6px] mb-[10px]">
+            <span style={{ fontSize: 'var(--font-size-title-3)' }}>🇺🇸</span>
+            <span
+              style={{
+                fontSize: 'var(--font-size-label-1)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              미국 HNS 대응 체계
+            </span>
+          </div>
+          <div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
+            {[
+              {
+                title: 'OPA90 / NCP',
+                sub: '국가긴급계획 ESF #10 — HNS 포함',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: '공동의장 체제',
+                sub: '환경청(EPA) + 해안경비대(USCG) 공동 지휘',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: 'CAMEO / ALOHA / MARPLOT',
+                sub: '6,000+종 화학물질 통합 DB · 대기확산 모델',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: 'NRT / RRT / NSF',
+                sub: '국가방제팀 + 지역방제팀 + 국가기동타격대',
+                color: 'var(--color-accent)',
+              },
+              {
+                title: '통합지휘시스템(ICS)',
+                sub: '16개 부처 + 주·지방정부 + 유출책임자 통합 조정',
+                color: 'var(--color-accent)',
+              },
+            ].map((item) => (
+              <div
+                key={item.title}
+                style={{
+                  padding: '6px 8px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                }}
+              >
+                <div>
+                  <b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
+                  <br />
+                  <span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
                 </div>
               </div>
+            ))}
+          </div>
+        </div>
+      </div>
 
-              <!-- 관측-모델 비교 -->
-              <div>
-                <div style="font-size:11px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:8px">✅ 페놀 관측-모델 비교 (인천·평택·대산)</div>
-                <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
-                  <thead><tr style="background:rgba(34,197,94,.06)">
-                    <th style="padding:5px 6px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">관측점</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">관측(mg/L)</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">모델(mg/L)</th>
-                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">정확도</th>
-                  </tr></thead>
-                  <tbody>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">IC01(인천)</td><td style="text-align:center;font-family:var(--font-mono)">0.0160</td><td style="text-align:center;font-family:var(--font-mono)">0.0167</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">95.32%</td></tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">IC03(인천)</td><td style="text-align:center;font-family:var(--font-mono)">0.0240</td><td style="text-align:center;font-family:var(--font-mono)">0.0256</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">93.45%</td></tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">PT01(평택)</td><td style="text-align:center;font-family:var(--font-mono)">0.0215</td><td style="text-align:center;font-family:var(--font-mono)">0.0235</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success)">90.55%</td></tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.02)"><td style="padding:3px 6px;color:var(--color-warning)">PT02(평택)</td><td style="text-align:center;font-family:var(--font-mono)">0.0200</td><td style="text-align:center;font-family:var(--font-mono)">0.0249</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">75.57%</td></tr>
-                    <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(34,197,94,.03)"><td style="padding:3px 6px;color:var(--color-success);font-weight:600">DS01(대산)</td><td style="text-align:center;font-family:var(--font-mono)">0.0040</td><td style="text-align:center;font-family:var(--font-mono)">0.0042</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:700">95.88%</td></tr>
-                    <tr><td style="padding:3px 6px;color:var(--fg-default)">DS03(대산)</td><td style="text-align:center;font-family:var(--font-mono)">0.0130</td><td style="text-align:center;font-family:var(--font-mono)">0.0145</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success)">88.60%</td></tr>
-                  </tbody>
-                </table>
-                <div style="margin-top:6px;font-size:7px;color:var(--fg-disabled);font-family:var(--font-korean)">※ 현장조사: 2023.06.27~28 / 전체 10개 관측점 모두 모델 범위 내 관측값 위치</div>
+      {/* 국제 협약 체계 */}
+      <div className={`${card} ${cardBg}`}>
+        <div className="flex items-center gap-2 mb-[10px]">
+          <span
+            style={{
+              fontSize: 'var(--font-size-title-4)',
+              fontWeight: 700,
+              color: 'var(--color-accent)',
+            }}
+          >
+            🌐 HNS 관련 국제 협약 체계
+          </span>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr 1fr 1fr',
+            fontSize: 'var(--font-size-caption)',
+          }}
+        >
+          {[{ label: '구분', 협약: '협약', 담당: '담당', 대상: '대상', header: true }].map(() => (
+            <>
+              <div
+                key="h-div"
+                style={{
+                  padding: '5px 8px',
+                  background: 'rgba(6,182,212,.08)',
+                  fontWeight: 700,
+                  color: 'var(--color-accent)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                }}
+              >
+                구분
+              </div>
+              <div
+                key="h-conv"
+                style={{
+                  padding: '5px 8px',
+                  background: 'rgba(6,182,212,.08)',
+                  fontWeight: 600,
+                  color: 'var(--fg-default)',
+                  textAlign: 'center',
+                  border: '1px solid rgba(6,182,212,.12)',
+                }}
+              >
+                협약
+              </div>
+              <div
+                key="h-resp"
+                style={{
+                  padding: '5px 8px',
+                  background: 'rgba(6,182,212,.08)',
+                  fontWeight: 600,
+                  color: 'var(--fg-default)',
+                  textAlign: 'center',
+                  border: '1px solid rgba(6,182,212,.12)',
+                }}
+              >
+                담당
+              </div>
+              <div
+                key="h-target"
+                style={{
+                  padding: '5px 8px',
+                  background: 'rgba(6,182,212,.08)',
+                  fontWeight: 600,
+                  color: 'var(--fg-default)',
+                  textAlign: 'center',
+                  border: '1px solid rgba(6,182,212,.12)',
+                }}
+              >
+                대상
+              </div>
+            </>
+          ))}
+          {/* 안전 */}
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-disabled)',
+            }}
+          >
+            안전
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--color-accent)',
+              textAlign: 'center',
+            }}
+          >
+            74 SOLAS
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            IMO
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            위험물질
+          </div>
+          {/* 보호 */}
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-disabled)',
+            }}
+          >
+            보호
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--color-accent)',
+              textAlign: 'center',
+            }}
+          >
+            MARPOL 73/78
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            IMO
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            기름·유해액체·포장유해·하수·폐기물
+          </div>
+          {/* 대비·대응 */}
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              background: 'rgba(6,182,212,.03)',
+              color: 'var(--color-accent)',
+              fontWeight: 600,
+            }}
+          >
+            대비·대응
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              background: 'rgba(6,182,212,.03)',
+              color: 'var(--color-accent)',
+              textAlign: 'center',
+              fontWeight: 600,
+            }}
+          >
+            2000 OPRC-HNS
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              background: 'rgba(6,182,212,.03)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            IMO
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              background: 'rgba(6,182,212,.03)',
+              color: 'var(--color-accent)',
+              textAlign: 'center',
+              fontWeight: 600,
+            }}
+          >
+            위험·유해물질(HNS)
+          </div>
+          {/* 배상 */}
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-disabled)',
+            }}
+          >
+            배상
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--color-accent)',
+              textAlign: 'center',
+            }}
+          >
+            96 HNS협약
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            IMO
+          </div>
+          <div
+            style={{
+              padding: '4px 8px',
+              border: '1px solid var(--stroke-light)',
+              color: 'var(--fg-sub)',
+              textAlign: 'center',
+            }}
+          >
+            유해물질 및 위험물질
+          </div>
+        </div>
+      </div>
+
+      {/* HATS 사고이력 통계 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
+        <div className="flex items-center justify-between mb-[14px]">
+          <div className="flex items-center gap-2">
+            <div
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 'var(--font-size-title-3)',
+              }}
+            >
+              📊
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-title-4)',
+                  fontWeight: 700,
+                  color: 'var(--color-accent)',
+                }}
+              >
+                국내 HNS 사고 통계 (23년간 76건)
+              </div>
+              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                장하용·이문진 외 (2017) HATS 분석 · 1994~2016년 해양경비안전본부 데이터
               </div>
             </div>
+          </div>
+          <span
+            style={{
+              padding: '3px 10px',
+              borderRadius: '6px',
+              background: 'rgba(6,182,212,.08)',
+              border: '1px solid rgba(6,182,212,.2)',
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--color-accent)',
+              fontWeight: 700,
+            }}
+          >
+            연평균 3.3건
+          </span>
+        </div>
 
-            <!-- 페놀 거동 특성 + 최대 농도 -->
-            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px">
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">인천 표층 최대농도</div>
-                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">0.1089<span style="font-size:9px"> mg/L</span></div>
+        <div className="grid grid-cols-5 gap-2 mb-[14px]">
+          {[
+            {
+              label: '사고시기 1위',
+              val: '41%',
+              title: '춘계 (3~5월)',
+              sub: '동절기 30%',
+              color: 'var(--color-accent)',
+              border: 'rgba(6,182,212,.12)',
+            },
+            {
+              label: '사고장소 1위',
+              val: '51%',
+              title: '계류장',
+              sub: '항만 29% · 연안 17%',
+              color: 'var(--color-accent)',
+              border: 'rgba(6,182,212,.12)',
+            },
+            {
+              label: '오염원 1위',
+              val: '49%',
+              title: '케미컬운반선',
+              sub: '육상시설 32%',
+              color: 'var(--color-accent)',
+              border: 'rgba(6,182,212,.12)',
+            },
+            {
+              label: '사고원인 1위',
+              val: '45%',
+              title: '승무원 과실',
+              sub: '화물 22% · 외적원인 17%',
+              color: 'var(--color-accent)',
+              border: 'rgba(6,182,212,.12)',
+            },
+            {
+              label: '사고물질 1위',
+              val: '12%',
+              title: '자일렌류',
+              sub: '옥탄올·라텍스·팜유 순',
+              color: 'var(--color-accent)',
+              border: 'rgba(6,182,212,.12)',
+            },
+          ].map((item) => (
+            <div
+              key={item.label}
+              style={{
+                padding: '10px',
+                background: 'var(--bg-base)',
+                border: `1px solid ${item.border}`,
+                borderRadius: '6px',
+                textAlign: 'center',
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--fg-disabled)',
+                  marginBottom: '4px',
+                }}
+              >
+                {item.label}
               </div>
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">인천 저층 최대농도</div>
-                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">0.3822<span style="font-size:9px"> mg/L</span></div>
-                <div style="font-size:7px;color:var(--color-warning);font-weight:600;margin-top:2px">표층 대비 3.5배 ↑</div>
+              <div
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-title-1)', fontWeight: 800, color: item.color }}
+              >
+                {item.val}
               </div>
-              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:6px;text-align:center">
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">평택·대산 저층 최대</div>
-                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.1916<span style="font-size:9px"> mg/L</span></div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                {item.title}
+              </div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--fg-disabled)',
+                  marginTop: '2px',
+                }}
+              >
+                {item.sub}
               </div>
             </div>
-            <div style="margin-top:10px;padding:8px 10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.1);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-              <b style="color:var(--color-success)">핵심 발견:</b> 페놀은 Sinker 특성으로 <b style="color:var(--color-danger)">저층에서 농도 축적</b>이 두드러짐 → 표층 모니터링만으로는 불충분, <b style="color:var(--color-accent)">저층까지 포함한 3D 모니터링 필수</b>. 기존 입자추적 방식의 장기 모의·농도 계산 한계를 ROMS 농도확산모델이 해결. Opendrift(노르웨이 기상청)와 Cedre(프랑스) 실험 결과로 HNS 거동특성 검증 완료.
+          ))}
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          {/* 유출량 분포 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '6px',
+              }}
+            >
+              📈 유출량 분포 (76건)
+            </div>
+            <div
+              className="flex flex-col gap-[3px]"
+              style={{ fontSize: 'var(--font-size-caption)' }}
+            >
+              {[
+                {
+                  range: '0~50L',
+                  width: '36%',
+                  gradient: 'var(--color-accent)',
+                  count: '27건',
+                  color: 'var(--fg-default)',
+                },
+                {
+                  range: '1K~10KL',
+                  width: '20%',
+                  gradient: 'var(--color-accent)',
+                  count: '15건',
+                  color: 'var(--fg-default)',
+                },
+                {
+                  range: '101~500L',
+                  width: '13%',
+                  gradient: 'var(--color-accent)',
+                  count: '10건',
+                  color: 'var(--fg-default)',
+                },
+                {
+                  range: '100만L+',
+                  width: '12%',
+                  gradient: 'var(--color-accent)',
+                  count: '9건',
+                  color: 'var(--color-accent)',
+                  rangeColor: 'var(--color-accent)',
+                },
+              ].map((bar) => (
+                <div key={bar.range} className="flex items-center gap-[6px]">
+                  <div
+                    style={{
+                      width: '60px',
+                      color: (bar as { rangeColor?: string }).rangeColor ?? 'var(--fg-disabled)',
+                    }}
+                  >
+                    {bar.range}
+                  </div>
+                  <div
+                    style={{
+                      flex: 1,
+                      height: '14px',
+                      background: 'var(--bg-base)',
+                      borderRadius: '3px',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: bar.width,
+                        height: '100%',
+                        background: bar.gradient,
+                        borderRadius: '3px',
+                      }}
+                    />
+                  </div>
+                  <span
+                    style={{
+                      color: bar.color,
+                      fontWeight: 600,
+                      width: '32px',
+                      textAlign: 'right',
+                    }}
+                  >
+                    {bar.count}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div
+              style={{
+                marginTop: '4px',
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+              }}
+            >
+              ※ 소형(50L이하)과 대형(100만L+) 양극화 → 차별화된 대응 필요
             </div>
           </div>
 
-          <!-- 지역별 해양산업시설 현황 -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
-            <div style="font-size:12px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:10px">🏭 지역별 해양산업시설 폐수 방류 현황 (10년 평균)</div>
-            <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:8px;font-family:var(--font-korean);text-align:center">
-              <div style="padding:6px;background:rgba(249,115,22,.06);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">울산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">414,620</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--color-danger);font-size:7px;margin-top:1px">1,037개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">여수</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">124,890</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">382개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">인천</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">91,658</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">3,073개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">광양</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">86,395</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">253개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">평택</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">85,475</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">781개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">대산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">65,101</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">246개소</div></div>
-              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">부산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">38,292</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">469개소</div></div>
+          {/* HATS 표준코드 체계 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '6px',
+              }}
+            >
+              🏷 HATS 표준코드 10개 항목
+            </div>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(5,1fr)',
+                gap: '3px',
+                fontSize: 'var(--font-size-caption)',
+                textAlign: 'center',
+              }}
+            >
+              {[
+                { label: '1.오염원', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '2.위치·일시', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '3.기상환경', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '4.사고유형', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '5.유출물질', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '6.대응', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '7.피해복구', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '8.사고원인', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '9.피해상황', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+                { label: '10.영향', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  style={{
+                    padding: '5px 2px',
+                    background: item.bg,
+                    borderRadius: '3px',
+                    color: item.color,
+                    fontWeight: 600,
+                  }}
+                >
+                  {item.label}
+                </div>
+              ))}
+            </div>
+            <div
+              style={{
+                marginTop: '6px',
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.5,
+              }}
+            >
+              해상 특수성 반영(GPS 좌표, 선박종류, 해상기상, 파고, 유출물질 CAS번호·SEBC 거동분류).{' '}
+              <b style={{ color: 'var(--color-accent)' }}>WING 사고이력 모듈</b>과 표준코드 연동
+              설계.
             </div>
-            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ 1종 사업장(2,000m³/일 이상) 하루 평균 페놀 배출량: 21.847 kg — 총 882개소 합계 31.851 kg/일 (KOSIS·NICS 2021)</div>
           </div>
+        </div>
+      </div>
 
-          <!-- 한계 및 발전 방향 -->
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
-            <!-- 현재 한계 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-danger)">
-              <div style="font-size:13px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:12px">⚠ 현재 한계점</div>
-              <div style="display:flex;flex-direction:column;gap:8px">
-                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
-                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">입자 추적 방식의 한계</div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">기존 라그랑지안 입자 추적 방식은 <b style="color:var(--color-danger)">장기간 모의가 어렵고</b> 정확한 농도 계산에 한계가 있음. 입자 수가 부족하면 통계적 노이즈 발생, 과다하면 계산량 폭증.</div>
-                </div>
-                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
-                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">대용량 데이터 전송</div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">외부 DB(기상청, 해양예보 등) 연동 시 <b style="color:var(--color-danger)">대용량 데이터의 실시간 전송</b>에 대한 신속성 확보 과제. 특히 WRF-Chem 입력 데이터는 수십 GB 규모.</div>
-                </div>
-                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
-                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">물질 다양성</div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">HNS 6,000+ 종 전체에 대한 <b style="color:var(--color-danger)">물리화학 거동 DB 부족</b>. 많은 물질이 실험 데이터가 없어 유사 물질의 추정치를 사용하고 있음.</div>
-                </div>
-                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
-                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">해양 환경 특수성</div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">해수 온도에 따른 증발률 변화, 파랑에 의한 스프레이 효과, 선박 구조물에 의한 Wake 난류 등 <b style="color:var(--color-danger)">해양 고유 현상 반영 미흡</b>.</div>
-                </div>
+      {/* 국내외 사고관리시스템 비교 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-label-1)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '10px',
+          }}
+        >
+          🌐 국내외 HNS/화학 사고관리시스템 비교
+        </div>
+        <div style={{ overflowX: 'auto' }}>
+          <table
+            style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              fontSize: 'var(--font-size-caption)',
+            }}
+          >
+            <thead>
+              <tr style={{ background: 'rgba(6,182,212,.06)' }}>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'left',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  항목
+                </th>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  eMARS (EU)
+                </th>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  PSID (미국)
+                </th>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  RISCAD (일본)
+                </th>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  CSC (한국)
+                </th>
+                <th
+                  style={{
+                    padding: '6px 8px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                    fontWeight: 800,
+                  }}
+                >
+                  WING (개발중)
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                {
+                  label: '운영기관',
+                  eu: 'EC',
+                  us: 'CCPS',
+                  jp: 'JST·AIST',
+                  kr: '화학물질안전원',
+                  wing: '해양경찰청',
+                },
+                {
+                  label: '대상',
+                  eu: '중대화학사고',
+                  us: '공정사고',
+                  jp: '화학사고',
+                  kr: '화학사고',
+                  wing: '해상 HNS',
+                },
+                {
+                  label: '초점',
+                  eu: '산업시설',
+                  us: '산업시설',
+                  jp: '사고원인·산업',
+                  kr: '사고물질',
+                  wing: '해역·선박·확산',
+                },
+                { label: '형태', eu: '웹DB', us: '앱CD', jp: '웹', kr: '앱', wing: '웹+GIS 통합' },
+                {
+                  label: '해상 특화',
+                  eu: '△',
+                  us: '✕',
+                  jp: '✕',
+                  kr: '△',
+                  wing: '◎',
+                  wingColor: 'var(--color-accent)',
+                },
+              ].map((row, i) => (
+                <tr
+                  key={row.label}
+                  style={{ borderBottom: i < 4 ? '1px solid rgba(255,255,255,.04)' : undefined }}
+                >
+                  <td style={{ padding: '5px 8px', color: 'var(--fg-disabled)' }}>{row.label}</td>
+                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.eu}</td>
+                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.us}</td>
+                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.jp}</td>
+                  <td
+                    style={{
+                      textAlign: 'center',
+                      color: i === 4 ? 'var(--color-accent)' : 'var(--fg-sub)',
+                    }}
+                  >
+                    {row.kr}
+                  </td>
+                  <td
+                    style={{
+                      textAlign: 'center',
+                      color: (row as { wingColor?: string }).wingColor ?? 'var(--color-accent)',
+                      fontWeight: 600,
+                    }}
+                  >
+                    {row.wing}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div
+          style={{
+            marginTop: '8px',
+            fontSize: 'var(--font-size-caption)',
+            color: 'var(--fg-disabled)',
+          }}
+        >
+          ※ WING은 HATS 표준코드 + CAMEO/ALOHA + WRF-Chem + ROMS를 통합한 해상 특화 위기대응 시스템
+        </div>
+      </div>
+
+      {/* WING 적용 시사점 */}
+      <div className={`${card} ${cardBg}`}>
+        <div className="flex items-center gap-2 mb-[10px]">
+          <span
+            style={{
+              fontSize: 'var(--font-size-label-1)',
+              fontWeight: 700,
+              color: 'var(--color-accent)',
+            }}
+          >
+            💡 논문 시사점 → WING 시스템 반영
+          </span>
+        </div>
+        <div className="grid grid-cols-5 gap-2" style={{ fontSize: 'var(--font-size-caption)' }}>
+          {[
+            {
+              icon: '🔗',
+              title: '통합정보시스템',
+              sub: 'CARIS·CAMEO·기상·GIS 통합 → 사고 대응 의사결정 지원',
+              style: {},
+            },
+            {
+              icon: '🏭',
+              title: '항만별 특화 대응',
+              sub: '울산·여수·대산 등 고위험 항만 맞춤 시나리오 사전 구축',
+              style: {},
+            },
+            {
+              icon: '📡',
+              title: '실시간 모니터링',
+              sub: 'HNS 블랙박스 + 대기확산 예측 + 위험구역 자동 설정',
+              style: {},
+            },
+            {
+              icon: '🤝',
+              title: '통합지휘 지원',
+              sub: '미국 ICS 모델 참조 — 다기관 협업 정보공유 플랫폼',
+              style: {},
+            },
+            {
+              icon: '📊',
+              title: 'HATS 사고이력',
+              sub: '표준코드 DB 연동 → 동일해역·물질 과거사고 즉시 조회',
+              style: {
+                background: 'rgba(6,182,212,.04)',
+                border: '1px solid rgba(6,182,212,.15)',
+              },
+              titleColor: 'var(--color-accent)',
+            },
+          ].map((item) => (
+            <div
+              key={item.title}
+              style={{
+                padding: '10px',
+                background: 'var(--bg-card)',
+                border: '1px solid var(--stroke-default)',
+                borderRadius: '6px',
+                textAlign: 'center',
+                ...item.style,
+              }}
+            >
+              <div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
+                {item.icon}
+              </div>
+              <div
+                style={{
+                  fontWeight: 700,
+                  color: (item as { titleColor?: string }).titleColor ?? 'var(--fg-default)',
+                  marginBottom: '3px',
+                }}
+              >
+                {item.title}
+              </div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--fg-disabled)',
+                  lineHeight: 1.5,
+                }}
+              >
+                {item.sub}
               </div>
             </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
 
-            <!-- 발전 방향 -->
-            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
-              <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:12px">🚀 발전 방향</div>
-              <div style="display:flex;flex-direction:column;gap:8px">
-                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">ROMS 해양 수치모델 도입</span>
-                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.15);color:var(--color-success);font-weight:600">✅ 검증완료</span>
-                  </div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                    김창겸·이문진 외(2024) 연구에서 <b style="color:var(--color-success)">ROMS 기반 페놀 해양확산 수치모의 검증 완료</b>. Nesting 기법(광역 0.05°→중간역 0.01°→상세역 0.002°/약200m)으로 5개 집중우심지역(인천·평택·대산·여수·울산) 고해상도 구축.<br>
-                    경계조건: <span style="color:var(--color-accent)">ERA5(기상) + HYCOM(해양) + TPXO9(조위 15개분조)</span>. 한국 5대강 + 중국 황하·양쯔강 하천유입 반영.<br>
-                    <b style="color:var(--color-success)">현장검증 정확도: 75.57%(PT02) ~ 95.88%(DS01)</b> — 10개 관측점 전체에서 모델 최대·최소값 범위 내 관측값 위치 확인.
-                  </div>
+function GaussianModelPanel() {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* 가우시안 플룸 모델 */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center gap-2 mb-3">
+            <div
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 'var(--font-size-title-3)',
+              }}
+            >
+              🌀
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-title-4)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                Gaussian Plume Model
+              </div>
+              <div
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                연속 방출 (Continuous Release)
+              </div>
+            </div>
+          </div>
+          <div
+            style={{
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.2)',
+              borderRadius: '8px',
+              padding: '14px',
+              marginBottom: '12px',
+            }}
+            className="font-mono"
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+                fontWeight: 600,
+              }}
+            >
+              📌 농도 산출식 (Concentration Equation)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                color: 'var(--color-accent)',
+                lineHeight: 2,
+                letterSpacing: '.3px',
+              }}
+            >
+              C(x,y,z) = <span style={{ color: 'var(--color-accent)' }}>Q</span> / (2π ·{' '}
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>y</sub>
+              </span>{' '}
+              ·{' '}
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>{' '}
+              · <span style={{ color: 'var(--color-accent)' }}>u</span>)
+              <br />× exp(-y² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>y</sub>
+              </span>
+              ²)
+              <br />× [exp(-(z-H)² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>
+              ²) + exp(-(z+H)² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>
+              ²)]
+            </div>
+          </div>
+          <div
+            className="grid grid-cols-2 gap-[6px]"
+            style={{ fontSize: 'var(--font-size-caption)' }}
+          >
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                Q
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 배출률 (g/s)</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                u
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 풍속 (m/s)</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                σ<sub>y</sub>
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 수평 확산계수</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                σ<sub>z</sub>
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 연직 확산계수</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.04)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+                gridColumn: 'span 2',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                H
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>
+                = 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정
+              </span>
+            </div>
+          </div>
+          <div
+            style={{
+              marginTop: '10px',
+              padding: '8px',
+              background: 'rgba(6,182,212,.04)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '6px',
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.6,
+            }}
+          >
+            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 정상 상태 연속 배출, 균일
+            풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
+          </div>
+        </div>
+
+        {/* 가우시안 퍼프 모델 */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center gap-2 mb-3">
+            <div
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 'var(--font-size-title-3)',
+              }}
+            >
+              💨
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-title-4)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                Gaussian Puff Model
+              </div>
+              <div
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                순간 방출 (Instantaneous Release)
+              </div>
+            </div>
+          </div>
+          <div
+            style={{
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.2)',
+              borderRadius: '8px',
+              padding: '14px',
+              marginBottom: '12px',
+            }}
+            className="font-mono"
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+                fontWeight: 600,
+              }}
+            >
+              📌 농도 산출식 (Puff Concentration)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                color: 'var(--color-accent)',
+                lineHeight: 2,
+                letterSpacing: '.3px',
+              }}
+            >
+              C(x,y,z,t) = <span style={{ color: 'var(--color-accent)' }}>M</span> / [(2π)
+              <sup>3/2</sup> ·{' '}
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>x</sub>
+              </span>{' '}
+              ·{' '}
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>y</sub>
+              </span>{' '}
+              ·{' '}
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>
+              ]
+              <br />× exp(-(x-<span style={{ color: 'var(--color-accent)' }}>u</span>t)² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>x</sub>
+              </span>
+              ²)
+              <br />× exp(-y² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>y</sub>
+              </span>
+              ²)
+              <br />× [exp(-(z-H)² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>
+              ²) + exp(-(z+H)² / 2
+              <span style={{ color: 'var(--color-accent)' }}>
+                σ<sub>z</sub>
+              </span>
+              ²)]
+            </div>
+          </div>
+          <div
+            className="grid grid-cols-2 gap-[6px]"
+            style={{ fontSize: 'var(--font-size-caption)' }}
+          >
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                M
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 총 배출량 (g)</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                t
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>= 경과시간 (s)</span>
+            </div>
+            <div
+              style={{
+                padding: '6px 8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '4px',
+                gridColumn: 'span 2',
+              }}
+            >
+              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
+                σ<sub>x</sub>
+              </span>{' '}
+              <span style={{ color: 'var(--fg-disabled)' }}>
+                = 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영
+              </span>
+            </div>
+          </div>
+          <div
+            style={{
+              marginTop: '10px',
+              padding: '8px',
+              background: 'rgba(6,182,212,.04)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '6px',
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.6,
+            }}
+          >
+            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 순간적 대량 방출,
+            폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
+          </div>
+        </div>
+      </div>
+
+      {/* Pasquill-Gifford 확산 계수 테이블 */}
+      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
+        <div className="flex items-center justify-between mb-[14px]">
+          <div
+            style={{
+              fontSize: 'var(--font-size-title-4)',
+              fontWeight: 700,
+              color: 'var(--fg-default)',
+            }}
+          >
+            📊 Pasquill-Gifford 대기안정도 분류 및 확산계수
+          </div>
+          <div
+            className="font-mono"
+            style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
+          >
+            σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f
+          </div>
+        </div>
+        <div style={{ overflowX: 'auto' }}>
+          <table
+            style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              fontSize: 'var(--font-size-caption)',
+            }}
+          >
+            <thead>
+              <tr style={{ background: 'rgba(6,182,212,.08)' }}>
+                <th
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'left',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                    fontWeight: 700,
+                  }}
+                >
+                  안정도
+                </th>
+                <th
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--fg-sub)',
+                  }}
+                >
+                  분류
+                </th>
+                <th
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--fg-sub)',
+                  }}
+                >
+                  기상 조건
+                </th>
+                <th
+                  className="font-mono"
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  σ<sub>y</sub> 계수 (a, b)
+                </th>
+                <th
+                  className="font-mono"
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  σ<sub>z</sub> 계수 (c, d, f)
+                </th>
+                <th
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  풍속 범위
+                </th>
+                <th
+                  style={{
+                    padding: '8px 10px',
+                    textAlign: 'center',
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  해양 적용성
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                {
+                  grade: 'A',
+                  class: '매우 불안정',
+                  cond: '맑은 날 강한 일사',
+                  sy: '0.3658, 0.9024',
+                  sz: '0.192, 0.936, 0',
+                  wind: '< 2 m/s',
+                  ocean: {
+                    label: '드물게',
+                    bg: 'rgba(6,182,212,.12)',
+                    color: 'var(--color-accent)',
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: undefined,
+                },
+                {
+                  grade: 'B',
+                  class: '불안정',
+                  cond: '맑은 날 약한 일사',
+                  sy: '0.2751, 0.9031',
+                  sz: '0.156, 0.922, 0',
+                  wind: '2–3 m/s',
+                  ocean: {
+                    label: '드물게',
+                    bg: 'rgba(6,182,212,.12)',
+                    color: 'var(--color-accent)',
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: undefined,
+                },
+                {
+                  grade: 'C',
+                  class: '약간 불안정',
+                  cond: '흐린 날 주간',
+                  sy: '0.2090, 0.9031',
+                  sz: '0.116, 0.905, 0',
+                  wind: '3–5 m/s',
+                  ocean: {
+                    label: '적합',
+                    bg: 'rgba(6,182,212,.12)',
+                    color: 'var(--color-accent)',
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: undefined,
+                },
+                {
+                  grade: 'D ★',
+                  class: '중립',
+                  cond: '흐린 날 / 해상풍',
+                  sy: '0.1471, 0.9031',
+                  sz: '0.079, 0.881, 0',
+                  wind: '5–6 m/s',
+                  ocean: {
+                    label: '★ 해양 대표',
+                    bg: 'rgba(6,182,212,.15)',
+                    color: 'var(--color-accent)',
+                    fontWeight: 700,
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: 'rgba(6,182,212,.03)',
+                },
+                {
+                  grade: 'E',
+                  class: '약간 안정',
+                  cond: '야간 약한 바람',
+                  sy: '0.1046, 0.9031',
+                  sz: '0.064, 0.871, 0',
+                  wind: '3–5 m/s',
+                  ocean: {
+                    label: '적합',
+                    bg: 'rgba(6,182,212,.12)',
+                    color: 'var(--color-accent)',
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: undefined,
+                },
+                {
+                  grade: 'F',
+                  class: '안정',
+                  cond: '야간 맑은 하늘',
+                  sy: '0.0722, 0.9031',
+                  sz: '0.051, 0.814, 0',
+                  wind: '< 3 m/s',
+                  ocean: {
+                    label: '위험↑',
+                    bg: 'rgba(6,182,212,.12)',
+                    color: 'var(--color-accent)',
+                  },
+                  gradeColor: 'var(--color-accent)',
+                  rowBg: undefined,
+                },
+              ].map((row, idx) => (
+                <tr
+                  key={row.grade}
+                  style={{
+                    borderBottom: idx < 5 ? '1px solid rgba(255,255,255,.04)' : undefined,
+                    background: row.rowBg,
+                  }}
+                >
+                  <td style={{ padding: '7px 10px', fontWeight: 700, color: row.gradeColor }}>
+                    {row.grade}
+                  </td>
+                  <td
+                    style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-default)' }}
+                  >
+                    {row.class}
+                  </td>
+                  <td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-sub)' }}>
+                    {row.cond}
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{
+                      padding: '7px 10px',
+                      textAlign: 'center',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    {row.sy}
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{
+                      padding: '7px 10px',
+                      textAlign: 'center',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    {row.sz}
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{
+                      padding: '7px 10px',
+                      textAlign: 'center',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    {row.wind}
+                  </td>
+                  <td style={{ padding: '7px 10px', textAlign: 'center' }}>
+                    <span
+                      style={{
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        background: row.ocean.bg,
+                        color: row.ocean.color,
+                        fontSize: 'var(--font-size-caption)',
+                        fontWeight: (row.ocean as { fontWeight?: number }).fontWeight ?? 600,
+                      }}
+                    >
+                      {row.ocean.label}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div
+          style={{
+            marginTop: '10px',
+            padding: '8px 10px',
+            background: 'rgba(6,182,212,.04)',
+            border: '1px solid rgba(6,182,212,.1)',
+            borderRadius: '6px',
+            fontSize: 'var(--font-size-caption)',
+            color: 'var(--fg-sub)',
+            lineHeight: 1.6,
+          }}
+        >
+          ★ 해양 환경에서는 <b style={{ color: 'var(--color-accent)' }}>D 등급(중립)</b>이 가장
+          빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가
+          국지적으로 높게 유지되어 <b style={{ color: 'var(--color-accent)' }}>위험도 상승</b>.
+        </div>
+      </div>
+
+      {/* 플룸 vs 퍼프 비교 */}
+      <div className={`${cardBg} rounded-[10px] p-4`}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-title-4)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '14px',
+          }}
+        >
+          ⚖ Plume vs Puff — 모델 선택 기준
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <div
+            style={{
+              padding: '12px',
+              background: 'rgba(6,182,212,.04)',
+              border: '1px solid rgba(6,182,212,.15)',
+              borderRadius: '8px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              🌀 Plume (연속 배출) 선택 기준
+            </div>
+            <div
+              className="flex flex-col gap-[5px]"
+              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
+            >
+              {[
+                '유출 지속시간 > 10분',
+                '탱크 균열/배관 파손 — 지속적 누출',
+                '풍속 > 1.5 m/s (정상류 가정 가능)',
+                '톨루엔, 벤젠, 자일렌 등 증발성 액체',
+                '암모니아 냉동 저장탱크 누출',
+              ].map((item) => (
+                <div key={item} className="flex items-center gap-[5px]">
+                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                 </div>
-                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">AI/ML 기반 신속 예측</span>
-                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(168,85,247,.1);color:var(--color-tertiary);font-weight:600">연구중</span>
-                  </div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">WRF-Chem 시뮬레이션 결과를 학습한 <b style="color:var(--color-success)">서로게이트 모델(Surrogate Model)</b>로 수초 내 근사 예측. 초기 대응 시간 단축과 정확도를 동시 확보.</div>
+              ))}
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '12px',
+              background: 'rgba(6,182,212,.04)',
+              border: '1px solid rgba(6,182,212,.15)',
+              borderRadius: '8px',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              💨 Puff (순간 배출) 선택 기준
+            </div>
+            <div
+              className="flex flex-col gap-[5px]"
+              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
+            >
+              {[
+                '유출 지속시간 < 10분',
+                '탱크 폭발/BLEVE — 순간 방출',
+                '풍향 변동이 큰 경우 (여러 퍼프 중첩)',
+                'LPG, 수소, LNG 탱크 파열',
+                '컨테이너 화학물질 돌발 유출',
+              ].map((item) => (
+                <div key={item} className="flex items-center gap-[5px]">
+                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                 </div>
-                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">실시간 데이터 파이프라인</span>
-                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">개발중</span>
-                  </div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6"><b style="color:var(--color-success)">조화상수 DB</b> 기반 빠른 예측 + 스트리밍 기상 데이터 파이프라인 구축. 외부 DB 연동 시 데이터 압축·캐싱으로 전송 병목 해소.</div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function SubstanceScenarioPanel() {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* 암모니아 */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center justify-between mb-[10px]">
+            <div className="flex items-center gap-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧪</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-title-3)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                암모니아 (NH₃)
+              </span>
+            </div>
+            <span
+              style={{
+                padding: '3px 8px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.12)',
+                color: 'var(--color-accent)',
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+              }}
+            >
+              독성 ★★★
+            </span>
+          </div>
+          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
+            {[
+              { val: '-33°C', label: '비등점', color: 'var(--color-accent)' },
+              { val: '0.682', label: '비중', color: 'var(--color-accent)' },
+              { val: '300 ppm', label: 'IDLH', color: 'var(--color-accent)' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: '6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
+                <div
+                  className="font-mono"
+                  style={{
+                    fontSize: 'var(--font-size-title-3)',
+                    fontWeight: 700,
+                    color: item.color,
+                  }}
+                >
+                  {item.val}
                 </div>
-                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
-                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 블랙박스 시스템 고도화</span>
-                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.1);color:var(--color-success);font-weight:600">목표</span>
-                  </div>
-                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">사고 자동 감지 → 물질 자동 식별 → 확산 예측 → 대피 명령까지 <b style="color:var(--color-success)">전 과정 자동화</b>. 센서 네트워크 + AI 물질 식별 + 가우시안/WRF-Chem 이중 엔진으로 구성.</div>
+                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                  {item.label}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.7,
+            }}
+          >
+            <div>
+              • 해수면 유출 시 <b style={{ color: 'var(--color-accent)' }}>급속 기화</b> → Flash
+              Evaporation
+            </div>
+            <div>
+              • 2D 기화율:{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                ṁ = 0.0168t − 0.01
+              </span>
+            </div>
+            <div>
+              • 3D 기화율:{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                ṁ = 0.0182t − 0.0112
+              </span>
+            </div>
+            <div>
+              • 독성 구름 풍하측 <b style={{ color: 'var(--color-accent)' }}>최대 10km</b>까지 영향
+            </div>
+          </div>
+        </div>
+
+        {/* 메탄올 */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center justify-between mb-[10px]">
+            <div className="flex items-center gap-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧫</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-title-3)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                메탄올 (CH₃OH)
+              </span>
+            </div>
+            <span
+              style={{
+                padding: '3px 8px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.12)',
+                color: 'var(--color-accent)',
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+              }}
+            >
+              인화성+독성
+            </span>
+          </div>
+          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
+            {[
+              { val: '64.7°C', label: '비등점', color: 'var(--color-accent)' },
+              { val: '0.791', label: '비중', color: 'var(--color-accent)' },
+              { val: '6,000 ppm', label: 'IDLH', color: 'var(--color-accent)' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: '6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
+                <div
+                  className="font-mono"
+                  style={{
+                    fontSize: 'var(--font-size-title-3)',
+                    fontWeight: 700,
+                    color: item.color,
+                  }}
+                >
+                  {item.val}
+                </div>
+                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                  {item.label}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.7,
+            }}
+          >
+            <div>
+              • 수용성 → 해수 용해 + 증발 <b style={{ color: 'var(--color-accent)' }}>복합 거동</b>
+            </div>
+            <div>
+              • 인화점{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                11°C
+              </span>{' '}
+              → 상온에서 증기 인화 위험
+            </div>
+            <div>
+              • 무색·무취 → <b style={{ color: 'var(--color-accent)' }}>감지 어려움</b>, 계측기 필수
+            </div>
+            <div>
+              • LFL~UFL:{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                6.0% ~ 36.5%
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* 수소 */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center justify-between mb-[10px]">
+            <div className="flex items-center gap-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-title-3)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                수소 (H₂)
+              </span>
+            </div>
+            <span
+              style={{
+                padding: '3px 8px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.12)',
+                color: 'var(--color-accent)',
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+              }}
+            >
+              폭발성 ★★★
+            </span>
+          </div>
+          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
+            {[
+              { val: '-253°C', label: '비등점', color: 'var(--color-accent)' },
+              { val: '0.071', label: '비중', color: 'var(--color-accent)' },
+              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: '6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
+                <div
+                  className="font-mono"
+                  style={{
+                    fontSize: 'var(--font-size-title-3)',
+                    fontWeight: 700,
+                    color: item.color,
+                  }}
+                >
+                  {item.val}
+                </div>
+                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                  {item.label}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.7,
+            }}
+          >
+            <div>
+              • 공기보다 <b style={{ color: 'var(--color-accent)' }}>14배 가벼움</b> → 급속 상승
+              확산
+            </div>
+            <div>
+              • LFL~UFL:{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                4.0% ~ 75.0%
+              </span>{' '}
+              (극넓은 가연범위)
+            </div>
+            <div>
+              • 점화에너지{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                0.017 mJ
+              </span>{' '}
+              (정전기로도 폭발)
+            </div>
+            <div>
+              • Puff 모델 필수 → <b style={{ color: 'var(--color-accent)' }}>BLEVE/VCE</b> 시나리오
+            </div>
+          </div>
+        </div>
+
+        {/* LNG */}
+        <div className={`${cardBg} rounded-[10px] p-4`}>
+          <div className="flex items-center justify-between mb-[10px]">
+            <div className="flex items-center gap-2">
+              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🔵</span>
+              <span
+                style={{
+                  fontSize: 'var(--font-size-title-3)',
+                  fontWeight: 700,
+                  color: 'var(--fg-default)',
+                }}
+              >
+                LNG (CH₄)
+              </span>
+            </div>
+            <span
+              style={{
+                padding: '3px 8px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.12)',
+                color: 'var(--color-accent)',
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+              }}
+            >
+              인화성 ★★
+            </span>
+          </div>
+          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
+            {[
+              { val: '-162°C', label: '비등점', color: 'var(--color-accent)' },
+              { val: '0.450', label: '비중', color: 'var(--color-accent)' },
+              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: '6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
+                <div
+                  className="font-mono"
+                  style={{
+                    fontSize: 'var(--font-size-title-3)',
+                    fontWeight: 700,
+                    color: item.color,
+                  }}
+                >
+                  {item.val}
+                </div>
+                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                  {item.label}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--fg-sub)',
+              lineHeight: 1.7,
+            }}
+          >
+            <div>
+              • 극저온 유출 시 <b style={{ color: 'var(--color-accent)' }}>RPT</b>(Rapid Phase
+              Transition) 발생
+            </div>
+            <div>
+              • 해수면 Pool 형성 → 기화율{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                0.025t
+              </span>
+            </div>
+            <div>
+              • 가연범위:{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                5.0% ~ 15.0%
+              </span>
+            </div>
+            <div>
+              • 초기 냉각 증기 → <b style={{ color: 'var(--color-accent)' }}>지표면 체류</b> 후 상승
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 물질별 AEGL 비교표 */}
+      <div className={`${cardBg} rounded-[10px] p-4`}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-title-4)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '12px',
+          }}
+        >
+          📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(5,1fr)',
+            gap: '8px',
+            fontSize: 'var(--font-size-caption)',
+          }}
+        >
+          {/* 헤더 */}
+          <div
+            style={{
+              padding: '8px',
+              background: 'var(--bg-base)',
+              borderRadius: '6px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '4px',
+              }}
+            >
+              기준
+            </div>
+            <div style={{ fontWeight: 700, color: 'var(--fg-default)' }}>등급</div>
+          </div>
+          {[
+            { icon: '🧪', label: 'NH₃', color: 'var(--color-accent)' },
+            { icon: '🧫', label: 'MeOH', color: 'var(--color-accent)' },
+            { icon: '⚡', label: 'H₂', color: 'var(--color-accent)' },
+            { icon: '🔵', label: 'LNG', color: 'var(--color-accent)' },
+          ].map((item) => (
+            <div
+              key={item.label}
+              style={{
+                padding: '8px',
+                background: 'var(--bg-base)',
+                borderRadius: '6px',
+                textAlign: 'center',
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--fg-disabled)',
+                  marginBottom: '4px',
+                }}
+              >
+                {item.icon}
+              </div>
+              <div style={{ fontWeight: 700, color: item.color }}>{item.label}</div>
+            </div>
+          ))}
+          {/* AEGL-1 */}
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.06)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              fontWeight: 600,
+              color: 'var(--color-accent)',
+            }}
+          >
+            AEGL-1
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            30
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            670
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          {/* AEGL-2 */}
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.06)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              fontWeight: 600,
+              color: 'var(--color-accent)',
+            }}
+          >
+            AEGL-2
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            160
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            2,100
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          {/* AEGL-3 */}
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.06)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              fontWeight: 600,
+              color: 'var(--color-accent)',
+            }}
+          >
+            AEGL-3
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--color-accent)',
+              fontWeight: 600,
+            }}
+            className="font-mono"
+          >
+            1,100
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--color-accent)',
+              fontWeight: 600,
+            }}
+            className="font-mono"
+          >
+            14,000
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--fg-disabled)',
+            }}
+            className="font-mono"
+          >
+            N/A
+          </div>
+          {/* LFL */}
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.06)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              fontWeight: 600,
+              color: 'var(--color-accent)',
+            }}
+          >
+            LFL (%)
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            15.0
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            6.0
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+              color: 'var(--color-accent)',
+              fontWeight: 600,
+            }}
+            className="font-mono"
+          >
+            4.0
+          </div>
+          <div
+            style={{
+              padding: '6px',
+              background: 'rgba(6,182,212,.04)',
+              borderRadius: '4px',
+              textAlign: 'center',
+            }}
+            className="font-mono"
+          >
+            5.0
+          </div>
+        </div>
+        <div
+          style={{
+            marginTop: '8px',
+            fontSize: 'var(--font-size-caption)',
+            color: 'var(--fg-disabled)',
+          }}
+        >
+          ※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* ═══ Panel 3: 해양환경 보정 ═══ */
+function OceanCorrectionPanel() {
+  return (
+    <div className="grid grid-cols-2 gap-4 mb-4">
+      {/* 해양 보정 인자 */}
+      <div className={`${card} ${cardBg} p-4`}>
+        <div style={labelStyle('var(--color-accent)')}>🌊 해양환경 특수 보정 인자</div>
+        <div className="flex flex-col gap-2.5">
+          {/* 해풍·육풍 순환 보정 */}
+          <div
+            className="p-2.5 bg-bg-base rounded-md"
+            style={{ border: '1px solid rgba(6,182,212,.15)' }}
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-label-2 font-bold text-fg">해풍·육풍 순환 보정</span>
+              <span style={tag('var(--color-accent)')}>핵심 인자</span>
+            </div>
+            <div className="text-caption text-fg-sub leading-[1.7]">
+              해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을
+              가정하므로, <b style={{ color: 'var(--color-accent)' }}>풍향 전환 시점</b>에서 플룸
+              방향 급변을 반영해야 함.
+              <br />
+              <span
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)
+              </span>
+            </div>
+          </div>
+          {/* 해수면 거칠기 */}
+          <div
+            className="p-2.5 bg-bg-base rounded-md"
+            style={{ border: '1px solid rgba(6,182,212,.15)' }}
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-label-2 font-bold text-fg">해수면 거칠기 (z₀) 보정</span>
+              <span style={tag('var(--color-accent)')}>중요</span>
+            </div>
+            <div className="text-caption text-fg-sub leading-[1.7]">
+              해수면은 육상 대비 표면 거칠기가 매우 낮음 (
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                z₀ ≈ 0.0002 m
+              </span>{' '}
+              vs 도시 0.5~2.0 m). Charnock 관계식 적용:
+              <br />
+              <span
+                className="font-mono"
+                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
+              >
+                z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)
+              </span>
+            </div>
+          </div>
+          {/* SST 영향 */}
+          <div
+            className="p-2.5 bg-bg-base rounded-md"
+            style={{ border: '1px solid rgba(6,182,212,.15)' }}
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-label-2 font-bold text-fg">해수면 온도(SST) 영향</span>
+              <span style={tag('var(--color-accent)')}>보조</span>
+            </div>
+            <div className="text-caption text-fg-sub leading-[1.7]">
+              해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소.
+              반대로 SST &lt; T<sub>air</sub>이면 안정층 형성으로{' '}
+              <b style={{ color: 'var(--color-accent)' }}>농도 체류↑</b>.
+            </div>
+          </div>
+          {/* MABL */}
+          <div
+            className="p-2.5 bg-bg-base rounded-md"
+            style={{ border: '1px solid rgba(6,182,212,.15)' }}
+          >
+            <div className="flex items-center justify-between mb-1.5">
+              <span className="text-label-2 font-bold text-fg">해상 대기경계층(MABL) 구조</span>
+              <span style={tag('var(--color-accent)')}>중요</span>
+            </div>
+            <div className="text-caption text-fg-sub leading-[1.7]">
+              해양 대기경계층은 육상과 구조가 상이. 혼합고{' '}
+              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
+                300~800 m
+              </span>
+              (육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시{' '}
+              <b style={{ color: 'var(--color-accent)' }}>지표 농도 급상승</b>.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 보정 계수 시각화 */}
+      <div className="flex flex-col gap-4">
+        <div className={`${card} ${cardBg} p-4`}>
+          <div style={labelStyle('var(--color-accent)')}>
+            📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <span className="text-caption text-fg-disabled min-w-[70px]">P-G 원본</span>
+              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
+                <div
+                  className="h-full rounded"
+                  style={{
+                    width: '60%',
+                    background: 'var(--color-accent)',
+                  }}
+                />
+              </div>
+              <span
+                className="font-mono text-caption min-w-[50px] text-right"
+                style={{ color: 'var(--color-accent)' }}
+              >
+                68 m
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-caption text-fg-disabled min-w-[70px]">해양 보정</span>
+              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
+                <div
+                  className="h-full rounded"
+                  style={{
+                    width: '82%',
+                    background: 'var(--color-accent)',
+                  }}
+                />
+              </div>
+              <span
+                className="font-mono text-caption min-w-[50px] text-right"
+                style={{ color: 'var(--color-accent)' }}
+              >
+                92 m
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-caption text-fg-disabled min-w-[70px]">ALOHA</span>
+              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
+                <div
+                  className="h-full rounded"
+                  style={{
+                    width: '72%',
+                    background: 'var(--color-accent)',
+                  }}
+                />
+              </div>
+              <span
+                className="font-mono text-caption min-w-[50px] text-right"
+                style={{ color: 'var(--color-accent)' }}
+              >
+                78 m
+              </span>
+            </div>
+          </div>
+          <div className="mt-2 text-caption text-fg-disabled">
+            ※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준
+          </div>
+        </div>
+
+        <div className={`${card} ${cardBg} p-4`}>
+          <div style={labelStyle('var(--color-accent)')}>🔬 ALOHA vs 이문진박사모델 비교</div>
+          <div className="grid grid-cols-2 gap-2 text-caption">
+            <div className="p-2 bg-bg-base rounded-md">
+              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
+                ALOHA (EPA)
+              </div>
+              <div className="text-fg-sub leading-[1.6]">
+                • 가우시안 플룸 기본
+                <br />
+                • 평탄 지형 가정
+                <br />
+                • 표면 거칠기 고정값
+                <br />
+                • 해양 특성 미반영
+                <br />• 1차원 풍향 고정
+              </div>
+            </div>
+            <div
+              className="p-2 rounded-md"
+              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.1)' }}
+            >
+              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
+                이문진박사모델 (해양 보정)
+              </div>
+              <div className="text-fg-sub leading-[1.6]">
+                • 가우시안 + 해양 보정
+                <br />
+                • 해안 지형 효과 반영
+                <br />
+                • Charnock z₀ 동적 계산
+                <br />
+                • 해풍/육풍 전환 반영
+                <br />• MABL 혼합고 가변
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ═══ Panel 4: 모델 검증 ═══ */
+function VerificationPanel() {
+  return (
+    <div className="grid gap-4 mb-4" style={{ gridTemplateColumns: '2fr 1fr' }}>
+      {/* 검증 결과 테이블 */}
+      <div className={`${card} ${cardBg} p-4`}>
+        <div style={labelStyle('var(--color-accent)')}>
+          ✅ 모델 검증 결과 — 실측 데이터 대비 정확도
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-caption" style={{ borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ background: 'rgba(6,182,212,.06)' }}>
+                <th
+                  className="p-2 text-left"
+                  style={{
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  검증 항목
+                </th>
+                <th
+                  className="p-2 text-center"
+                  style={{
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ALOHA
+                </th>
+                <th
+                  className="p-2 text-center"
+                  style={{
+                    borderBottom: '2px solid var(--stroke-light)',
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  이문진박사모델
+                </th>
+                <th
+                  className="p-2 text-center"
+                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
+                >
+                  실측값
+                </th>
+                <th
+                  className="p-2 text-center"
+                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
+                >
+                  오차율
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                <td className="p-2 text-fg">NH₃ 최대 도달거리 (AEGL-2)</td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  8.2 km
+                </td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  7.1 km
+                </td>
+                <td className="p-2 text-center font-mono text-fg">6.8 km</td>
+                <td className="p-2 text-center">
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +20.6%
+                  </span>
+                  {' / '}
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +4.4%
+                  </span>
+                </td>
+              </tr>
+              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                <td className="p-2 text-fg">풍하 1km 지점 농도 (ppm)</td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  245
+                </td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  198
+                </td>
+                <td className="p-2 text-center font-mono text-fg">187</td>
+                <td className="p-2 text-center">
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +31.0%
+                  </span>
+                  {' / '}
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +5.9%
+                  </span>
+                </td>
+              </tr>
+              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                <td className="p-2 text-fg">MeOH 증기 확산 면적 (km²)</td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  4.8
+                </td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  3.6
+                </td>
+                <td className="p-2 text-center font-mono text-fg">3.4</td>
+                <td className="p-2 text-center">
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +41.2%
+                  </span>
+                  {' / '}
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +5.9%
+                  </span>
+                </td>
+              </tr>
+              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                <td className="p-2 text-fg">H₂ 가연성 구름 반경 (m)</td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  280
+                </td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  235
+                </td>
+                <td className="p-2 text-center font-mono text-fg">220</td>
+                <td className="p-2 text-center">
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +27.3%
+                  </span>
+                  {' / '}
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +6.8%
+                  </span>
+                </td>
+              </tr>
+              <tr>
+                <td className="p-2 text-fg">LNG Pool 확산 직경 (m)</td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  165
+                </td>
+                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
+                  142
+                </td>
+                <td className="p-2 text-center font-mono text-fg">138</td>
+                <td className="p-2 text-center">
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +19.6%
+                  </span>
+                  {' / '}
+                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                    +2.9%
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
+          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
+        >
+          <b style={{ color: 'var(--color-accent)' }}>결론:</b> ALOHA는 해양 환경에서{' '}
+          <b style={{ color: 'var(--color-accent)' }}>평균 20~40% 과대 예측</b> 경향.
+          이문진박사모델은 해양 보정 인자 적용으로{' '}
+          <b style={{ color: 'var(--color-accent)' }}>평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km
+          이내 근거리 농도 예측 정확도가 현저히 향상됨.
+        </div>
+      </div>
+
+      {/* 참고문헌 + 시스템 적용 */}
+      <div className="flex flex-col gap-3">
+        <div className={`${card} ${cardBg} p-4`}>
+          <div className="text-label-1 font-bold text-fg mb-2.5">📚 참고 문헌</div>
+          <div className="flex flex-col gap-2 text-caption text-fg-sub leading-[1.6]">
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한
+              연구", 한국해양환경·에너지학회지, 2014
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링",
+              KIOST, 2023
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              EPA, "ALOHA User's Manual", 2024
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological
+              Magazine, 1961
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92,
+              2013
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의",
+              한국해양환경·안전학회지, 30(s4), pp.42-51, 2024
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현",
+              한국해양환경·안전학회지, 23(2), pp.168-176, 2017
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS)
+              탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의
+              열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS
+              탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)
+            </div>
+            <div
+              className="p-2 bg-bg-base rounded"
+              style={{ borderLeft: '3px solid var(--color-accent)' }}
+            >
+              오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를
+              활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86,
+              2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을
+              예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부
+              지원(RS-2021-KS211535)
+            </div>
+          </div>
+        </div>
+        <div
+          className="rounded-[10px] p-[14px]"
+          style={{
+            background: 'rgba(6,182,212,.04)',
+            border: '1px solid rgba(6,182,212,.2)',
+          }}
+        >
+          <div className="text-label-2 font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
+            💡 시스템 적용 방안
+          </div>
+          <div className="text-caption text-fg-sub leading-[1.7]">
+            WING 시스템은 기본 ALOHA 엔진 위에{' '}
+            <b style={{ color: 'var(--color-accent)' }}>이문진박사모델 해양 보정 모듈</b>을 레이어로
+            적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀
+            예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ═══ Panel 5: 실시간 비교 ═══ */
+function RealtimeComparePanel() {
+  return (
+    <div className={`${card} ${cardBg} p-4 mb-4`}>
+      {/* 헤더 */}
+      <div className="flex items-center justify-between mb-3.5">
+        <div className="text-label-1 font-bold text-fg">⚡ 실시간 모델 비교 시뮬레이션</div>
+        <div className="flex gap-1.5">
+          <button
+            className="px-4 py-1.5 rounded-md text-caption font-bold cursor-pointer text-white"
+            style={{
+              background: 'var(--color-accent)',
+              border: 'none',
+            }}
+          >
+            ▶ 비교 실행
+          </button>
+          <button
+            className="px-3 py-1.5 rounded-md text-caption font-semibold cursor-pointer text-fg-sub bg-bg-card"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          >
+            ⚙ 파라미터
+          </button>
+        </div>
+      </div>
+
+      {/* 입력 필드 */}
+      <div className="grid grid-cols-6 gap-2 mb-3.5">
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">물질</label>
+          <select
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          >
+            <option>암모니아</option>
+            <option>메탄올</option>
+            <option>수소</option>
+            <option>LNG</option>
+            <option>톨루엔</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">유출량 (kL)</label>
+          <input
+            type="number"
+            defaultValue={12.0}
+            readOnly
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          />
+        </div>
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">풍속 (m/s)</label>
+          <input
+            type="number"
+            defaultValue={5.2}
+            readOnly
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          />
+        </div>
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">안정도</label>
+          <select
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          >
+            <option>A</option>
+            <option>B</option>
+            <option>C</option>
+            <option>D</option>
+            <option>E</option>
+            <option>F</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">기온 (°C)</label>
+          <input
+            type="number"
+            defaultValue={8.5}
+            readOnly
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          />
+        </div>
+        <div>
+          <label className="text-caption text-fg-disabled block mb-1">SST (°C)</label>
+          <input
+            type="number"
+            defaultValue={12.3}
+            readOnly
+            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
+            style={{ border: '1px solid var(--stroke-default)' }}
+          />
+        </div>
+      </div>
+
+      {/* 결과 카드 */}
+      <div className="grid grid-cols-3 gap-3">
+        {/* ALOHA */}
+        <div
+          className="p-3.5 rounded-lg text-center"
+          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
+        >
+          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
+            ALOHA (EPA)
+          </div>
+          <div
+            className="font-bold font-mono"
+            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
+          >
+            3.8 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
+          </div>
+          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
+          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">면적</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                12.3 km²
+              </span>
+            </div>
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">최대농도</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                520 ppm
+              </span>
+            </div>
+          </div>
+        </div>
+        {/* 이문진박사모델 */}
+        <div
+          className="p-3.5 rounded-lg text-center"
+          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
+        >
+          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
+            이문진박사모델 (해양보정)
+          </div>
+          <div
+            className="font-bold font-mono"
+            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
+          >
+            2.9 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
+          </div>
+          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
+          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">면적</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                8.4 km²
+              </span>
+            </div>
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">최대농도</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                410 ppm
+              </span>
+            </div>
+          </div>
+        </div>
+        {/* 차이 분석 */}
+        <div
+          className="p-3.5 rounded-lg text-center"
+          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
+        >
+          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
+            차이 분석
+          </div>
+          <div
+            className="font-bold font-mono"
+            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
+          >
+            -23.7<span style={{ fontSize: 'var(--font-size-label-1)' }}>%</span>
+          </div>
+          <div className="text-caption text-fg-disabled mt-0.5">도달거리 감소율</div>
+          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">면적차</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                -31.7%
+              </span>
+            </div>
+            <div className="p-1 bg-bg-base rounded">
+              <span className="text-fg-disabled">농도차</span>
+              <br />
+              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
+                -21.2%
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 결과 설명 */}
+      <div
+        className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
+        style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
+      >
+        ⚡ <b style={{ color: 'var(--color-accent)' }}>실시간 비교 결과:</b> 해양 환경에서 ALOHA의
+        과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를
+        반영하여 보다 현실적인 확산 범위를 산출합니다.{' '}
+        <b>
+          대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용
+        </b>
+        을 권장합니다.
+      </div>
+    </div>
+  );
+}
+
+/* ═══ 패널 6: WRF-Chem·발전 ═══ */
+
+function WrfChemPanel() {
+  return (
+    <>
+      {/* WRF-Chem 모델 상세 */}
+      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
+        <div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
+          <div
+            style={{
+              width: '32px',
+              height: '32px',
+              borderRadius: '8px',
+              background: 'rgba(6,182,212,.15)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 'var(--font-size-title-2)',
+            }}
+          >
+            🌐
+          </div>
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-title-3)',
+                fontWeight: 700,
+                color: 'var(--fg-default)',
+              }}
+            >
+              WRF-Chem 모델 상세
+            </div>
+            <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+              Weather Research and Forecasting model coupled with Chemistry
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3.5">
+          {/* 구성 요소 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              구성 요소
+            </div>
+            <div className="flex flex-col gap-1.5">
+              {/* WRF */}
+              <div
+                style={{
+                  padding: '10px',
+                  background: 'var(--bg-base)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
+                  <span
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      fontWeight: 700,
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    WRF (기상)
+                  </span>
+                  <span
+                    className="font-mono"
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      background: 'rgba(6,182,212,.1)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    v4.x
+                  </span>
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  비정수압(non-hydrostatic) 중규모 기상 모델. 3차원 바람장, 기온, 습도, 대기경계층
+                  구조를 역학적으로 계산. 중첩 도메인(nesting)으로 해상도 1km까지 구현 가능.
+                </div>
+              </div>
+              {/* Chem */}
+              <div
+                style={{
+                  padding: '10px',
+                  background: 'var(--bg-base)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
+                  <span
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      fontWeight: 700,
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    Chem (화학)
+                  </span>
+                  <span
+                    className="font-mono"
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      background: 'rgba(6,182,212,.1)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    Online
+                  </span>
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  기상 모델과 동일한 시간 스텝에서 화학종의 이류(advection), 난류확산(diffusion),
+                  건·습침적(deposition), 화학반응을 동시에 계산. Offline 방식 대비 정확도 향상.
+                </div>
+              </div>
+              {/* 결합 효과 */}
+              <div
+                style={{
+                  padding: '10px',
+                  background: 'var(--bg-base)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
+                  <span
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      fontWeight: 700,
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    결합 효과
+                  </span>
+                  <span
+                    className="font-mono"
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      background: 'rgba(6,182,212,.1)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    Feedback
+                  </span>
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  화학물질의 복사 효과가 기상장에 되먹임(feedback). 예: 대량의 에어로졸 방출 시
+                  일사량 변화 → 대기안정도 변화 → 확산 패턴 변화.
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- ═══ 관련 국내 논문 ═══ -->
-          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-tertiary)">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
-              <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">📚</div>
-              <div>
-                <div style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">HNS 대기확산·위해성 평가 관련 국내 논문</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">위해성 관리 · 초동대응 · 사회경제 민감자원 · 플랫폼 개발 · 재난관리 체제</div>
+          {/* HNS 사고 적용 시 장점 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              HNS 사고 적용 시 장점
+            </div>
+            <div className="flex flex-col gap-1.5">
+              {[
+                {
+                  num: '1',
+                  text: (
+                    <>
+                      <b style={{ color: 'var(--fg-default)' }}>3D 확산 모의:</b> 연직 방향 확산까지
+                      포함한 정밀 농도장 계산. 고층 대기로의 확산과 fumigation 효과 반영
+                    </>
+                  ),
+                },
+                {
+                  num: '2',
+                  text: (
+                    <>
+                      <b style={{ color: 'var(--fg-default)' }}>비정상류 대응:</b> 풍향
+                      전환(해풍↔육풍), 돌풍, 전선 통과 등 시변 기상 조건을 실시간 반영
+                    </>
+                  ),
+                },
+                {
+                  num: '3',
+                  text: (
+                    <>
+                      <b style={{ color: 'var(--fg-default)' }}>복잡 지형 반영:</b> 해안 절벽, 항만
+                      구조물, 인접 도시의 건물 효과를 지형 데이터로 반영
+                    </>
+                  ),
+                },
+                {
+                  num: '4',
+                  text: (
+                    <>
+                      <b style={{ color: 'var(--fg-default)' }}>장기 모의:</b> 24~72시간 예측으로
+                      사고 수습 계획 및 장기 피해 평가 지원
+                    </>
+                  ),
+                },
+              ].map(({ num, text }) => (
+                <div
+                  key={num}
+                  className="flex gap-2"
+                  style={{ padding: '8px', background: 'var(--bg-base)', borderRadius: '6px' }}
+                >
+                  <div
+                    className="font-mono flex items-center justify-center flex-shrink-0"
+                    style={{
+                      width: '24px',
+                      height: '24px',
+                      borderRadius: '50%',
+                      background: 'rgba(6,182,212,.15)',
+                      fontSize: 'var(--font-size-caption)',
+                      fontWeight: 800,
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    {num}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      color: 'var(--fg-sub)',
+                      lineHeight: 1.5,
+                    }}
+                  >
+                    {text}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              style={{
+                marginTop: '10px',
+                padding: '8px',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
+                borderRadius: '6px',
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.5,
+              }}
+            >
+              ⚠ <b style={{ color: 'var(--color-accent)' }}>계산 비용:</b> WRF-Chem은 가우시안 모델
+              대비 계산 시간이 <b>100~1,000배</b> 소요. 초기 대응에는 가우시안 모델, 정밀 분석에는
+              WRF-Chem으로 <b style={{ color: 'var(--color-accent)' }}>이중 운용</b> 전략 적용.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ROMS 해양확산 수치모의 검증 */}
+      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
+        <div className="flex items-center justify-between" style={{ marginBottom: '14px' }}>
+          <div className="flex items-center gap-2">
+            <div
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                background: 'rgba(6,182,212,.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 'var(--font-size-title-3)',
+              }}
+            >
+              🌊
+            </div>
+            <div>
+              <div
+                style={{
+                  fontSize: 'var(--font-size-title-4)',
+                  fontWeight: 700,
+                  color: 'var(--color-accent)',
+                }}
+              >
+                ROMS 해양확산 수치모의 검증 결과
+              </div>
+              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+                김창겸·이문진 외 (2024), 한국해양환경·안전학회지 Vol.30
               </div>
             </div>
-            <div style="display:flex;flex-direction:column;gap:10px">
+          </div>
+          <span
+            style={{
+              padding: '3px 10px',
+              borderRadius: '6px',
+              background: 'rgba(6,182,212,.1)',
+              border: '1px solid rgba(6,182,212,.2)',
+              fontSize: 'var(--font-size-caption)',
+              color: 'var(--color-accent)',
+              fontWeight: 700,
+            }}
+          >
+            정확도 75~96%
+          </span>
+        </div>
 
-              <!-- 논문 ① 김영윤·이문진 (2015) -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:8px;border-left:3px solid var(--color-tertiary)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-tertiary);font-family:var(--font-mono)">①</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해상 위험·유해물질(HNS) 관리 우선순위 선정에 관한 연구</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.15);font-size:8px;color:var(--color-tertiary);font-weight:600;white-space:nowrap">KRISO</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">김영윤·김태원·손민호·오상우·이문진 — 해양환경안전학회지 Vol.21 No.6, pp.672-678, 2015</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  EURAM/CRS-KOREA II 기반 위해성 스크리닝 시스템 개발. <b style="color:var(--color-tertiary)">Risk = Toxicity × Exposure</b> 프레임워크로 585종 유해액체물질 평가. 인체위해성(급성·만성·발암·기타독성)과 수생태위해성을 해상운송량·잔류성(BCF)·인화점·증기압과 결합하여 점수화. <b style="color:var(--color-accent)">상위 20종 우선관리물질</b>(Aniline, Acrylonitrile, Phenol, Coal tar 등) 도출. GESAMP 위해도 평가 기준 적용.
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">위해성 우선순위</span>
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">585종 유해액체물질</span>
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">GESAMP 기준</span>
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">이문진 공저</span>
-                </div>
+        <div className="grid grid-cols-2 gap-3.5">
+          {/* Nesting 격자 구성 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              📐 Nesting 격자 구성
+            </div>
+            <table
+              style={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontSize: 'var(--font-size-caption)',
+              }}
+            >
+              <thead>
+                <tr style={{ background: 'rgba(6,182,212,.06)' }}>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'left',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    영역
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                    }}
+                  >
+                    격자크기
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                    }}
+                  >
+                    시간간격
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                    }}
+                  >
+                    수직층
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                  <td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
+                    광역 (일본·대만 포함)
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
+                  >
+                    0.05°
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    5분
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }} rowSpan={3}>
+                    20층
+                  </td>
+                </tr>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                  <td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
+                    중간역 (한반도 해역)
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
+                  >
+                    0.01°
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    1분
+                  </td>
+                </tr>
+                <tr style={{ background: 'rgba(6,182,212,.03)' }}>
+                  <td
+                    style={{
+                      padding: '4px 6px',
+                      color: 'var(--color-accent)',
+                      fontWeight: 600,
+                    }}
+                  >
+                    상세역 (5개 우심지역)
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{
+                      textAlign: 'center',
+                      color: 'var(--color-accent)',
+                      fontWeight: 600,
+                    }}
+                  >
+                    0.002°(≈200m)
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    12초
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              style={{
+                marginTop: '8px',
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '6px',
+              }}
+            >
+              🔗 입력 데이터
+            </div>
+            <div
+              className="grid grid-cols-2 gap-1"
+              style={{ fontSize: 'var(--font-size-caption)' }}
+            >
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '3px',
+                }}
+              >
+                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>ERA5</span>{' '}
+                <span style={{ color: 'var(--fg-disabled)' }}>기상(기압·풍속·기온)</span>
               </div>
-
-              <!-- 논문 ② 노영희·김충기 (2016) -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(34,197,94,.12);border-radius:8px;border-left:3px solid var(--color-success)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-success);font-family:var(--font-mono)">②</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해양 유류유출 오염으로 인한 사회·경제적 민감자원 선정 및 지수화 방안</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);font-size:8px;color:var(--color-success);font-weight:600;white-space:nowrap">KEI</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">노영희·김충기 — 환경영향평가 Vol.25 No.6, pp.402-413, 2016</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  NOAA ESI 가이드라인 기반 한국형 사회·경제적 민감자원 분류체계 구축. <b style="color:var(--color-success)">수산물 획득·인구·토지이용·관리지역·문화유산/관광지</b> 5개 지표를 각 100점 환산(총 500점) 통합지수 산출. 연안 74개 시군구 단위 공간분석. McLaughlin et al.(2002) 삼각도표, Fattal et al.(2010) SEv 공식 등 해외 지수화 기법 비교. <b style="color:var(--color-accent)">HNS 사고 시 피해 평가 프레임워크</b>로 확장 가능.
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">ESI 민감자원</span>
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">통합지수 500점</span>
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">74개 시군구</span>
-                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">김충기 공저</span>
-                </div>
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '3px',
+                }}
+              >
+                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>HYCOM</span>{' '}
+                <span style={{ color: 'var(--fg-disabled)' }}>수온·염분·유속</span>
               </div>
-
-              <!-- 논문 ③ 류제완·박희경 (2017) -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:8px;border-left:3px solid var(--color-warning)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-warning);font-family:var(--font-mono)">③</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해양 HNS 유출사고 초동대응의 시스템 다이내믹스 모형 개발 연구</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.15);font-size:8px;color:var(--color-warning);font-weight:600;white-space:nowrap">KAIST</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">류제완·김남균·박희경 — 한국방재학회논문집 Vol.17 No.4, pp.307-315, 2017</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  해양경찰청 HNS 대응 매뉴얼 기반 <b style="color:var(--color-warning)">시스템 다이내믹스(SD) 모형</b> 구축. 초동대응 4개 행위(HNS 탐지·의사결정·파공봉쇄·펜스전장) 인과지도 작성. <b style="color:var(--color-accent)">안전장비 수준이 DB 수준보다 대응역량에 더 큰 영향</b> — 접근성(Accessibility) 상한계 결정. Two-step 전략(초동대응 기동선단 ETF) 도입 시 <b style="color:var(--color-success)">15% 대체 → 전체 대응시간 9.5% 단축</b>(116→105분), 90분간 유출량 80.78톤 감소(약 20억원 경제효과).
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">SD 시뮬레이션</span>
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">초동대응 골든타임</span>
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">ETF Two-step</span>
-                  <span style="padding:2px 6px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);border-radius:3px;font-size:7px;color:var(--color-danger)">MARITIME MAISIE 사례</span>
-                </div>
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '3px',
+                }}
+              >
+                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>TPXO9</span>{' '}
+                <span style={{ color: 'var(--fg-disabled)' }}>조위 15개 분조</span>
               </div>
-
-              <!-- 논문 ④ 여보현·맹준호·이문진 (2023) -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:8px;border-left:3px solid var(--color-accent)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-accent);font-family:var(--font-mono)">④</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발 연구</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.15);font-size:8px;color:var(--color-accent);font-weight:600;white-space:nowrap">KEI+KRISO</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17, 2023</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  NOAA CAMEO/CAFE · EU MARINER/Bonn Agreement 플랫폼 비교 분석 후 <b style="color:var(--color-accent)">국내용 HNS 해양환경 영향평가 플랫폼</b> 구축. 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) 3단계 격자. 유속 벡터 전처리 모듈, HNS 유출량·확산범위 동적 시각화, <b style="color:var(--color-success)">연안환경 영향평가 + 사회경제 영향평가 GIS 모듈</b> 구현. SEBC 거동분류(G/E/F/D/S) 기반 물질 관리. 5대 항만(여수·부산·인천·평택/대산·울산) 대상.
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">국내용 플랫폼</span>
-                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">CAMEO/MARINER 비교</span>
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">SEBC 거동분류</span>
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">이문진 공저</span>
-                </div>
+              <div
+                style={{
+                  padding: '4px 6px',
+                  background: 'var(--bg-base)',
+                  borderRadius: '3px',
+                }}
+              >
+                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>WAMIS</span>{' '}
+                <span style={{ color: 'var(--fg-disabled)' }}>5대강 일별유량</span>
               </div>
-
-              <!-- 논문 ⑤ 유영현 (2013) -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(239,68,68,.12);border-radius:8px;border-left:3px solid var(--color-danger)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-danger);font-family:var(--font-mono)">⑤</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 재난사고에 대한 해양경찰의 대응 방안</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);font-size:8px;color:var(--color-danger);font-weight:600;white-space:nowrap">군산대</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">유영현 — 한국위기관리논집 제9권 제11호, pp.77-92, 2013</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  허베이스피리트호 사고를 계기로 외국(미국·유럽) HNS 방제시스템과 한국 체제를 비교 분석. <b style="color:var(--color-danger)">통합지휘 및 협업체제 구축</b>, HNS 방제장비 강화 및 효율적 배치, <b style="color:var(--color-accent)">CAMEO/ALOHA/MARPLOT 기반 대응정보 지원체계</b> 구축, 68종 중점관리대상물질의 체계적 관리를 제안. 미국 NRT/NSF 통합대응체제와 한국의 분산관리방식을 비교하여 <b style="color:var(--color-warning)">ICS(통합지휘시스템) 도입</b> 필요성 강조. 2006~2010년 국내 HNS 유출사고 13건 분석, 항만별(울산·여수·대산) 화재·폭발·누출 <b style="color:var(--color-success)">위험도 매트릭스</b> 제시. OPRC-HNS 의정서(2008.4 발효) 국내 이행 현황 정리.
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);border-radius:3px;font-size:7px;color:var(--color-danger)">재난관리 체제</span>
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">CAMEO/ALOHA</span>
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">ICS 통합지휘</span>
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">OPRC-HNS 의정서</span>
-                </div>
-              </div>
-
-              <!-- 논문 ⑥ 여보현·맹준호·이문진 외 (2023) — 이미 ④로 존재하지만 이것은 별개 논문 -->
-              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:8px;border-left:3px solid var(--color-accent)">
-                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
-                  <div style="display:flex;align-items:center;gap:6px">
-                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-accent);font-family:var(--font-mono)">⑥</span>
-                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발 연구</span>
-                  </div>
-                  <span style="padding:2px 8px;border-radius:4px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.15);font-size:8px;color:var(--color-accent);font-weight:600;white-space:nowrap">KEI+KRISO</span>
-                </div>
-                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17, 2023</div>
-                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
-                  NOAA <b style="color:var(--color-accent)">CAFE(Chemical Aquatic Fate and Effects)</b> DB(32,377종 거동·4,498종 화학물질 데이터)와 <b style="color:var(--color-accent)">CAMEO Suite</b>, EU <b style="color:var(--color-tertiary)">MARINER 플랫폼</b>(119건 HNS 유출사고·187종 물질 DB) 및 Bonn Agreement 체계를 비교 분석. SEBC 거동분류(G/E/F/D/S) 기반 물질 분류 체계 적용. 국내용 HNS 해양환경 영향평가 플랫폼 프로토타입 개발: 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) <b style="color:var(--color-success)">3단계 Nesting 격자</b> 구성, 유속 벡터 전처리 모듈, HNS 유출량·확산범위 동적 시각화, <b style="color:var(--color-warning)">연안환경 영향평가 + 사회경제 영향평가 GIS 모듈</b> 구현. 5대 항만(여수·부산·인천·평택/대산·울산) 확대 적용 계획.
-                </div>
-                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
-                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">CAFE·CAMEO 비교</span>
-                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">MARINER 플랫폼</span>
-                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">SEBC 거동분류</span>
-                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">이문진 공저</span>
-                </div>
-              </div>
-
             </div>
           </div>
 
-          <!-- 로드맵 -->
-          <div style="background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(168,85,247,.04));border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:16px">
-            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">📅 WING 시스템 HNS 모델 로드맵</div>
-            <div style="display:flex;gap:0;align-items:stretch">
-              <div style="flex:1;padding:10px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:8px 0 0 8px;text-align:center">
-                <div style="font-size:9px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:4px">✅ Phase 1 (완료)</div>
-                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">가우시안 모델</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">ALOHA + Lee 해양보정<br>6,000+종 HNS DB<br>AEGL/ERPG 기준 자동 적용</div>
+          {/* 관측-모델 비교 */}
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-label-2)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '8px',
+              }}
+            >
+              ✅ 페놀 관측-모델 비교 (인천·평택·대산)
+            </div>
+            <table
+              style={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontSize: 'var(--font-size-caption)',
+              }}
+            >
+              <thead>
+                <tr style={{ background: 'rgba(6,182,212,.06)' }}>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'left',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    관측점
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                    }}
+                  >
+                    관측(mg/L)
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--fg-sub)',
+                    }}
+                  >
+                    모델(mg/L)
+                  </th>
+                  <th
+                    style={{
+                      padding: '5px 6px',
+                      textAlign: 'center',
+                      borderBottom: '2px solid var(--stroke-light)',
+                      color: 'var(--color-accent)',
+                    }}
+                  >
+                    정확도
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC01(인천)</td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0160
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0167
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
+                  >
+                    95.32%
+                  </td>
+                </tr>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC03(인천)</td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0240
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0256
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
+                  >
+                    93.45%
+                  </td>
+                </tr>
+                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
+                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>PT01(평택)</td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0215
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0235
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
+                  >
+                    90.55%
+                  </td>
+                </tr>
+                <tr
+                  style={{
+                    borderBottom: '1px solid rgba(255,255,255,.04)',
+                    background: 'rgba(6,182,212,.02)',
+                  }}
+                >
+                  <td style={{ padding: '3px 6px', color: 'var(--color-accent)' }}>PT02(평택)</td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0200
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0249
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
+                  >
+                    75.57%
+                  </td>
+                </tr>
+                <tr
+                  style={{
+                    borderBottom: '1px solid rgba(255,255,255,.04)',
+                    background: 'rgba(6,182,212,.03)',
+                  }}
+                >
+                  <td
+                    style={{
+                      padding: '3px 6px',
+                      color: 'var(--color-accent)',
+                      fontWeight: 600,
+                    }}
+                  >
+                    DS01(대산)
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0040
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0042
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 700 }}
+                  >
+                    95.88%
+                  </td>
+                </tr>
+                <tr>
+                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>DS03(대산)</td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0130
+                  </td>
+                  <td className="font-mono" style={{ textAlign: 'center' }}>
+                    0.0145
+                  </td>
+                  <td
+                    className="font-mono"
+                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
+                  >
+                    88.60%
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              style={{
+                marginTop: '6px',
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+              }}
+            >
+              ※ 현장조사: 2023.06.27~28 / 전체 10개 관측점 모두 모델 범위 내 관측값 위치
+            </div>
+          </div>
+        </div>
+
+        {/* 페놀 거동 특성 + 최대 농도 */}
+        <div className="grid grid-cols-3 gap-2.5" style={{ marginTop: '14px' }}>
+          <div
+            style={{
+              padding: '10px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '6px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '4px',
+              }}
+            >
+              인천 표층 최대농도
+            </div>
+            <div
+              className="font-mono"
+              style={{
+                fontSize: 'var(--font-size-title-1)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              0.1089<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '10px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '6px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '4px',
+              }}
+            >
+              인천 저층 최대농도
+            </div>
+            <div
+              className="font-mono"
+              style={{
+                fontSize: 'var(--font-size-title-1)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              0.3822<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--color-accent)',
+                fontWeight: 600,
+                marginTop: '2px',
+              }}
+            >
+              표층 대비 3.5배 ↑
+            </div>
+          </div>
+          <div
+            style={{
+              padding: '10px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '6px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '4px',
+              }}
+            >
+              평택·대산 저층 최대
+            </div>
+            <div
+              className="font-mono"
+              style={{
+                fontSize: 'var(--font-size-title-1)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              0.1916<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
+            </div>
+          </div>
+        </div>
+        <div
+          style={{
+            marginTop: '10px',
+            padding: '8px 10px',
+            background: 'rgba(6,182,212,.04)',
+            border: '1px solid rgba(6,182,212,.1)',
+            borderRadius: '6px',
+            fontSize: 'var(--font-size-caption)',
+            color: 'var(--fg-sub)',
+            lineHeight: 1.6,
+          }}
+        >
+          <b style={{ color: 'var(--color-accent)' }}>핵심 발견:</b> 페놀은 Sinker 특성으로{' '}
+          <b style={{ color: 'var(--color-accent)' }}>저층에서 농도 축적</b>이 두드러짐 → 표층
+          모니터링만으로는 불충분,{' '}
+          <b style={{ color: 'var(--color-accent)' }}>저층까지 포함한 3D 모니터링 필수</b>. 기존
+          입자추적 방식의 장기 모의·농도 계산 한계를 ROMS 농도확산모델이 해결. Opendrift(노르웨이
+          기상청)와 Cedre(프랑스) 실험 결과로 HNS 거동특성 검증 완료.
+        </div>
+      </div>
+
+      {/* 지역별 해양산업시설 현황 */}
+      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
+        <div
+          style={{
+            fontSize: 'var(--font-size-label-1)',
+            fontWeight: 700,
+            color: 'var(--color-accent)',
+            marginBottom: '10px',
+          }}
+        >
+          🏭 지역별 해양산업시설 폐수 방류 현황 (10년 평균)
+        </div>
+        <div
+          className="grid gap-1 text-center"
+          style={{
+            gridTemplateColumns: 'repeat(7, 1fr)',
+            fontSize: 'var(--font-size-caption)',
+          }}
+        >
+          {[
+            {
+              name: '울산',
+              vol: '414,620',
+              sites: '1,037개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.06)',
+              nameColor: 'var(--color-accent)',
+            },
+            {
+              name: '여수',
+              vol: '124,890',
+              sites: '382개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.04)',
+              nameColor: 'var(--color-accent)',
+            },
+            {
+              name: '인천',
+              vol: '91,658',
+              sites: '3,073개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.04)',
+              nameColor: 'var(--color-accent)',
+            },
+            {
+              name: '광양',
+              vol: '86,395',
+              sites: '253개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.03)',
+              nameColor: 'var(--fg-sub)',
+            },
+            {
+              name: '평택',
+              vol: '85,475',
+              sites: '781개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.03)',
+              nameColor: 'var(--fg-sub)',
+            },
+            {
+              name: '대산',
+              vol: '65,101',
+              sites: '246개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.03)',
+              nameColor: 'var(--fg-sub)',
+            },
+            {
+              name: '부산',
+              vol: '38,292',
+              sites: '469개소',
+              volColor: 'var(--fg-default)',
+              sitesColor: 'var(--fg-disabled)',
+              bg: 'rgba(6,182,212,.03)',
+              nameColor: 'var(--fg-sub)',
+            },
+          ].map(({ name, vol, sites, volColor, sitesColor, bg, nameColor }) => (
+            <div key={name} style={{ padding: '6px', background: bg, borderRadius: '4px' }}>
+              <div style={{ fontWeight: 700, color: nameColor }}>{name}</div>
+              <div
+                className="font-mono"
+                style={{ color: volColor, fontSize: 'var(--font-size-caption)', marginTop: '2px' }}
+              >
+                {vol}
               </div>
-              <div style="width:2px;background:linear-gradient(180deg,var(--color-success),var(--color-accent))"></div>
-              <div style="flex:1;padding:10px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.2);text-align:center">
-                <div style="font-size:9px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:4px">🔧 Phase 2 (진행중)</div>
-                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">WRF-Chem 연동</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">3D 확산 모의<br>비정상류 기상 반영<br>해양-대기 결합 모의</div>
-              </div>
-              <div style="width:2px;background:linear-gradient(180deg,var(--color-accent),var(--color-tertiary))"></div>
-              <div style="flex:1;padding:10px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.2);text-align:center">
-                <div style="font-size:9px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:4px">🔬 Phase 3 (계획)</div>
-                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">ROMS + AI 융합</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">해양 수치모델 결합<br>ML 서로게이트 모델<br>실시간 데이터 파이프라인</div>
-              </div>
-              <div style="width:2px;background:linear-gradient(180deg,var(--color-tertiary),var(--color-warning))"></div>
-              <div style="flex:1;padding:10px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.2);border-radius:0 8px 8px 0;text-align:center">
-                <div style="font-size:9px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:4px">🎯 Phase 4 (목표)</div>
-                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">자동 블랙박스</div>
-                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">사고 자동감지→예측→대응<br>센서+AI 물질식별<br>전 과정 무인 자동화</div>
+              <div style={{ color: 'var(--fg-disabled)' }}>m³/일</div>
+              <div
+                className="font-mono"
+                style={{
+                  color: sitesColor,
+                  fontSize: 'var(--font-size-caption)',
+                  marginTop: '1px',
+                }}
+              >
+                {sites}
               </div>
             </div>
-          </div>`,
-];
+          ))}
+        </div>
+        <div
+          style={{
+            marginTop: '8px',
+            fontSize: 'var(--font-size-caption)',
+            color: 'var(--fg-disabled)',
+          }}
+        >
+          ※ 1종 사업장(2,000m³/일 이상) 하루 평균 페놀 배출량: 21.847 kg — 총 882개소 합계 31.851
+          kg/일 (KOSIS·NICS 2021)
+        </div>
+      </div>
+
+      {/* 한계 및 발전 방향 */}
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* 현재 한계점 */}
+        <div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
+          <div
+            style={{
+              fontSize: 'var(--font-size-title-4)',
+              fontWeight: 700,
+              color: 'var(--color-accent)',
+              marginBottom: '12px',
+            }}
+          >
+            ⚠ 현재 한계점
+          </div>
+          <div className="flex flex-col gap-2">
+            {[
+              {
+                title: '입자 추적 방식의 한계',
+                body: (
+                  <>
+                    기존 라그랑지안 입자 추적 방식은{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>장기간 모의가 어렵고</b> 정확한 농도
+                    계산에 한계가 있음. 입자 수가 부족하면 통계적 노이즈 발생, 과다하면 계산량 폭증.
+                  </>
+                ),
+              },
+              {
+                title: '대용량 데이터 전송',
+                body: (
+                  <>
+                    외부 DB(기상청, 해양예보 등) 연동 시{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>대용량 데이터의 실시간 전송</b>에
+                    대한 신속성 확보 과제. 특히 WRF-Chem 입력 데이터는 수십 GB 규모.
+                  </>
+                ),
+              },
+              {
+                title: '물질 다양성',
+                body: (
+                  <>
+                    HNS 6,000+ 종 전체에 대한{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>물리화학 거동 DB 부족</b>. 많은
+                    물질이 실험 데이터가 없어 유사 물질의 추정치를 사용하고 있음.
+                  </>
+                ),
+              },
+              {
+                title: '해양 환경 특수성',
+                body: (
+                  <>
+                    해수 온도에 따른 증발률 변화, 파랑에 의한 스프레이 효과, 선박 구조물에 의한 Wake
+                    난류 등 <b style={{ color: 'var(--color-accent)' }}>해양 고유 현상 반영 미흡</b>
+                    .
+                  </>
+                ),
+              },
+            ].map(({ title, body }) => (
+              <div
+                key={title}
+                style={{
+                  padding: '10px',
+                  background: 'rgba(6,182,212,.03)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                    marginBottom: '4px',
+                  }}
+                >
+                  {title}
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  {body}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 발전 방향 */}
+        <div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
+          <div
+            style={{
+              fontSize: 'var(--font-size-title-4)',
+              fontWeight: 700,
+              color: 'var(--color-accent)',
+              marginBottom: '12px',
+            }}
+          >
+            🚀 발전 방향
+          </div>
+          <div className="flex flex-col gap-2">
+            {[
+              {
+                title: 'ROMS 해양 수치모델 도입',
+                badge: {
+                  text: '✅ 검증완료',
+                  bg: 'rgba(6,182,212,.15)',
+                  color: 'var(--color-accent)',
+                },
+                body: (
+                  <>
+                    김창겸·이문진 외(2024) 연구에서{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>
+                      ROMS 기반 페놀 해양확산 수치모의 검증 완료
+                    </b>
+                    . Nesting 기법(광역 0.05°→중간역 0.01°→상세역 0.002°/약200m)으로 5개
+                    집중우심지역(인천·평택·대산·여수·울산) 고해상도 구축.
+                    <br />
+                    경계조건:{' '}
+                    <span style={{ color: 'var(--color-accent)' }}>
+                      ERA5(기상) + HYCOM(해양) + TPXO9(조위 15개분조)
+                    </span>
+                    . 한국 5대강 + 중국 황하·양쯔강 하천유입 반영.
+                    <br />
+                    <b style={{ color: 'var(--color-accent)' }}>
+                      현장검증 정확도: 75.57%(PT02) ~ 95.88%(DS01)
+                    </b>{' '}
+                    — 10개 관측점 전체에서 모델 최대·최소값 범위 내 관측값 위치 확인.
+                  </>
+                ),
+              },
+              {
+                title: 'AI/ML 기반 신속 예측',
+                badge: {
+                  text: '연구중',
+                  bg: 'rgba(6,182,212,.1)',
+                  color: 'var(--color-accent)',
+                },
+                body: (
+                  <>
+                    WRF-Chem 시뮬레이션 결과를 학습한{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>서로게이트 모델(Surrogate Model)</b>
+                    로 수초 내 근사 예측. 초기 대응 시간 단축과 정확도를 동시 확보.
+                  </>
+                ),
+              },
+              {
+                title: '실시간 데이터 파이프라인',
+                badge: { text: '개발중', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
+                body: (
+                  <>
+                    <b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b> 기반 빠른 예측 +
+                    스트리밍 기상 데이터 파이프라인 구축. 외부 DB 연동 시 데이터 압축·캐싱으로 전송
+                    병목 해소.
+                  </>
+                ),
+              },
+              {
+                title: 'HNS 블랙박스 시스템 고도화',
+                badge: { text: '목표', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
+                body: (
+                  <>
+                    사고 자동 감지 → 물질 자동 식별 → 확산 예측 → 대피 명령까지{' '}
+                    <b style={{ color: 'var(--color-accent)' }}>전 과정 자동화</b>. 센서 네트워크 +
+                    AI 물질 식별 + 가우시안/WRF-Chem 이중 엔진으로 구성.
+                  </>
+                ),
+              },
+            ].map(({ title, badge, body }) => (
+              <div
+                key={title}
+                style={{
+                  padding: '10px',
+                  background: 'rgba(6,182,212,.03)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '6px',
+                }}
+              >
+                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
+                  <span
+                    style={{
+                      fontSize: 'var(--font-size-label-2)',
+                      fontWeight: 700,
+                      color: 'var(--fg-default)',
+                    }}
+                  >
+                    {title}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: 'var(--font-size-caption)',
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      background: badge.bg,
+                      color: badge.color,
+                      fontWeight: 600,
+                    }}
+                  >
+                    {badge.text}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    fontSize: 'var(--font-size-caption)',
+                    color: 'var(--fg-sub)',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  {body}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 관련 국내 논문 */}
+      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
+        <div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
+          <div
+            style={{
+              width: '28px',
+              height: '28px',
+              borderRadius: '6px',
+              background: 'rgba(6,182,212,.15)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 'var(--font-size-title-3)',
+            }}
+          >
+            📚
+          </div>
+          <div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-title-4)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+              }}
+            >
+              HNS 대기확산·위해성 평가 관련 국내 논문
+            </div>
+            <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
+              위해성 관리 · 초동대응 · 사회경제 민감자원 · 플랫폼 개발 · 재난관리 체제
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2.5">
+          {/* 논문 ① */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ①
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  해상 위험·유해물질(HNS) 관리 우선순위 선정에 관한 연구
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                KRISO
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              김영윤·김태원·손민호·오상우·이문진 — 해양환경안전학회지 Vol.21 No.6, pp.672-678, 2015
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              EURAM/CRS-KOREA II 기반 위해성 스크리닝 시스템 개발.{' '}
+              <b style={{ color: 'var(--color-accent)' }}>Risk = Toxicity × Exposure</b>{' '}
+              프레임워크로 585종 유해액체물질 평가. 인체위해성(급성·만성·발암·기타독성)과
+              수생태위해성을 해상운송량·잔류성(BCF)·인화점·증기압과 결합하여 점수화.{' '}
+              <b style={{ color: 'var(--color-accent)' }}>상위 20종 우선관리물질</b>(Aniline,
+              Acrylonitrile, Phenol, Coal tar 등) 도출. GESAMP 위해도 평가 기준 적용.
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                위해성 우선순위
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                585종 유해액체물질
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                GESAMP 기준
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                이문진 공저
+              </span>
+            </div>
+          </div>
+
+          {/* 논문 ② */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ②
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  해양 유류유출 오염으로 인한 사회·경제적 민감자원 선정 및 지수화 방안
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                KEI
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              노영희·김충기 — 환경영향평가 Vol.25 No.6, pp.402-413, 2016
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              NOAA ESI 가이드라인 기반 한국형 사회·경제적 민감자원 분류체계 구축.{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                수산물 획득·인구·토지이용·관리지역·문화유산/관광지
+              </b>{' '}
+              5개 지표를 각 100점 환산(총 500점) 통합지수 산출. 연안 74개 시군구 단위 공간분석.
+              McLaughlin et al.(2002) 삼각도표, Fattal et al.(2010) SEv 공식 등 해외 지수화 기법
+              비교. <b style={{ color: 'var(--color-accent)' }}>HNS 사고 시 피해 평가 프레임워크</b>
+              로 확장 가능.
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                ESI 민감자원
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                통합지수 500점
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                74개 시군구
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                김충기 공저
+              </span>
+            </div>
+          </div>
+
+          {/* 논문 ③ */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ③
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  해양 HNS 유출사고 초동대응의 시스템 다이내믹스 모형 개발 연구
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                KAIST
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              류제완·김남균·박희경 — 한국방재학회논문집 Vol.17 No.4, pp.307-315, 2017
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              해양경찰청 HNS 대응 매뉴얼 기반{' '}
+              <b style={{ color: 'var(--color-accent)' }}>시스템 다이내믹스(SD) 모형</b> 구축.
+              초동대응 4개 행위(HNS 탐지·의사결정·파공봉쇄·펜스전장) 인과지도 작성.{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                안전장비 수준이 DB 수준보다 대응역량에 더 큰 영향
+              </b>{' '}
+              — 접근성(Accessibility) 상한계 결정. Two-step 전략(초동대응 기동선단 ETF) 도입 시{' '}
+              <b style={{ color: 'var(--color-accent)' }}>15% 대체 → 전체 대응시간 9.5% 단축</b>
+              (116→105분), 90분간 유출량 80.78톤 감소(약 20억원 경제효과).
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                SD 시뮬레이션
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                초동대응 골든타임
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                ETF Two-step
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                MARITIME MAISIE 사례
+              </span>
+            </div>
+          </div>
+
+          {/* 논문 ④ */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ④
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발
+                  연구
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                KEI+KRISO
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17,
+              2023
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              NOAA CAMEO/CAFE · EU MARINER/Bonn Agreement 플랫폼 비교 분석 후{' '}
+              <b style={{ color: 'var(--color-accent)' }}>국내용 HNS 해양환경 영향평가 플랫폼</b>{' '}
+              구축. 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) 3단계 격자. 유속 벡터 전처리
+              모듈, HNS 유출량·확산범위 동적 시각화,{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                연안환경 영향평가 + 사회경제 영향평가 GIS 모듈
+              </b>{' '}
+              구현. SEBC 거동분류(G/E/F/D/S) 기반 물질 관리. 5대 항만(여수·부산·인천·평택/대산·울산)
+              대상.
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                국내용 플랫폼
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                CAMEO/MARINER 비교
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                SEBC 거동분류
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                이문진 공저
+              </span>
+            </div>
+          </div>
+
+          {/* 논문 ⑤ */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ⑤
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  HNS 재난사고에 대한 해양경찰의 대응 방안
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                군산대
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              유영현 — 한국위기관리논집 제9권 제11호, pp.77-92, 2013
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              허베이스피리트호 사고를 계기로 외국(미국·유럽) HNS 방제시스템과 한국 체제를 비교 분석.{' '}
+              <b style={{ color: 'var(--color-accent)' }}>통합지휘 및 협업체제 구축</b>, HNS
+              방제장비 강화 및 효율적 배치,{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                CAMEO/ALOHA/MARPLOT 기반 대응정보 지원체계
+              </b>{' '}
+              구축, 68종 중점관리대상물질의 체계적 관리를 제안. 미국 NRT/NSF 통합대응체제와 한국의
+              분산관리방식을 비교하여{' '}
+              <b style={{ color: 'var(--color-accent)' }}>ICS(통합지휘시스템) 도입</b> 필요성 강조.
+              2006~2010년 국내 HNS 유출사고 13건 분석, 항만별(울산·여수·대산) 화재·폭발·누출{' '}
+              <b style={{ color: 'var(--color-accent)' }}>위험도 매트릭스</b> 제시. OPRC-HNS
+              의정서(2008.4 발효) 국내 이행 현황 정리.
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                재난관리 체제
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                CAMEO/ALOHA
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                ICS 통합지휘
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                OPRC-HNS 의정서
+              </span>
+            </div>
+          </div>
+
+          {/* 논문 ⑥ */}
+          <div
+            style={{
+              padding: '12px',
+              background: 'var(--bg-base)',
+              border: '1px solid rgba(6,182,212,.12)',
+              borderRadius: '8px',
+              borderLeft: '3px solid var(--color-accent)',
+            }}
+          >
+            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="font-mono flex items-center justify-center"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    background: 'rgba(6,182,212,.15)',
+                    fontSize: 'var(--font-size-caption)',
+                    fontWeight: 800,
+                    color: 'var(--color-accent)',
+                  }}
+                >
+                  ⑥
+                </span>
+                <span
+                  style={{
+                    fontSize: 'var(--font-size-label-2)',
+                    fontWeight: 700,
+                    color: 'var(--fg-default)',
+                  }}
+                >
+                  상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발
+                  연구
+                </span>
+              </div>
+              <span
+                style={{
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  background: 'rgba(6,182,212,.08)',
+                  border: '1px solid rgba(6,182,212,.15)',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                  fontWeight: 600,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                KEI+KRISO
+              </span>
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                marginBottom: '6px',
+              }}
+            >
+              여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17,
+              2023
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-sub)',
+                lineHeight: 1.6,
+              }}
+            >
+              NOAA{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                CAFE(Chemical Aquatic Fate and Effects)
+              </b>{' '}
+              DB(32,377종 거동·4,498종 화학물질 데이터)와{' '}
+              <b style={{ color: 'var(--color-accent)' }}>CAMEO Suite</b>, EU{' '}
+              <b style={{ color: 'var(--color-accent)' }}>MARINER 플랫폼</b>(119건 HNS
+              유출사고·187종 물질 DB) 및 Bonn Agreement 체계를 비교 분석. SEBC 거동분류(G/E/F/D/S)
+              기반 물질 분류 체계 적용. 국내용 HNS 해양환경 영향평가 플랫폼 프로토타입 개발:
+              광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수){' '}
+              <b style={{ color: 'var(--color-accent)' }}>3단계 Nesting 격자</b> 구성, 유속 벡터
+              전처리 모듈, HNS 유출량·확산범위 동적 시각화,{' '}
+              <b style={{ color: 'var(--color-accent)' }}>
+                연안환경 영향평가 + 사회경제 영향평가 GIS 모듈
+              </b>{' '}
+              구현. 5대 항만(여수·부산·인천·평택/대산·울산) 확대 적용 계획.
+            </div>
+            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                CAFE·CAMEO 비교
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                MARINER 플랫폼
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                SEBC 거동분류
+              </span>
+              <span
+                style={{
+                  padding: '2px 6px',
+                  background: 'rgba(6,182,212,.06)',
+                  border: '1px solid rgba(6,182,212,.12)',
+                  borderRadius: '3px',
+                  fontSize: 'var(--font-size-caption)',
+                  color: 'var(--color-accent)',
+                }}
+              >
+                이문진 공저
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* WING HNS 모델 로드맵 */}
+      <div
+        style={{
+          background: 'rgba(6,182,212,.04)',
+          border: '1px solid rgba(6,182,212,.2)',
+          borderRadius: '10px',
+          padding: '16px',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 'var(--font-size-title-4)',
+            fontWeight: 700,
+            color: 'var(--fg-default)',
+            marginBottom: '14px',
+          }}
+        >
+          📅 WING 시스템 HNS 모델 로드맵
+        </div>
+        <div className="flex items-stretch" style={{ gap: 0 }}>
+          {/* Phase 1 */}
+          <div
+            style={{
+              flex: 1,
+              padding: '10px',
+              background: 'rgba(6,182,212,.06)',
+              border: '1px solid rgba(6,182,212,.2)',
+              borderRadius: '8px 0 0 8px',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '4px',
+              }}
+            >
+              ✅ Phase 1 (완료)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 600,
+                color: 'var(--fg-default)',
+                marginBottom: '4px',
+              }}
+            >
+              가우시안 모델
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                lineHeight: 1.5,
+              }}
+            >
+              ALOHA + Lee 해양보정
+              <br />
+              6,000+종 HNS DB
+              <br />
+              AEGL/ERPG 기준 자동 적용
+            </div>
+          </div>
+
+          <div
+            style={{
+              width: '2px',
+              background: 'var(--color-accent)',
+            }}
+          />
+
+          {/* Phase 2 */}
+          <div
+            style={{
+              flex: 1,
+              padding: '10px',
+              background: 'rgba(6,182,212,.06)',
+              border: '1px solid rgba(6,182,212,.2)',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '4px',
+              }}
+            >
+              🔧 Phase 2 (진행중)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 600,
+                color: 'var(--fg-default)',
+                marginBottom: '4px',
+              }}
+            >
+              WRF-Chem 연동
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                lineHeight: 1.5,
+              }}
+            >
+              3D 확산 모의
+              <br />
+              비정상류 기상 반영
+              <br />
+              해양-대기 결합 모의
+            </div>
+          </div>
+
+          <div
+            style={{
+              width: '2px',
+              background: 'var(--color-accent)',
+            }}
+          />
+
+          {/* Phase 3 */}
+          <div
+            style={{
+              flex: 1,
+              padding: '10px',
+              background: 'rgba(6,182,212,.06)',
+              border: '1px solid rgba(6,182,212,.2)',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '4px',
+              }}
+            >
+              🔬 Phase 3 (계획)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 600,
+                color: 'var(--fg-default)',
+                marginBottom: '4px',
+              }}
+            >
+              ROMS + AI 융합
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                lineHeight: 1.5,
+              }}
+            >
+              해양 수치모델 결합
+              <br />
+              ML 서로게이트 모델
+              <br />
+              실시간 데이터 파이프라인
+            </div>
+          </div>
+
+          <div
+            style={{
+              width: '2px',
+              background: 'var(--color-accent)',
+            }}
+          />
+
+          {/* Phase 4 */}
+          <div
+            style={{
+              flex: 1,
+              padding: '10px',
+              background: 'rgba(6,182,212,.06)',
+              border: '1px solid rgba(6,182,212,.2)',
+              borderRadius: '0 8px 8px 0',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 700,
+                color: 'var(--color-accent)',
+                marginBottom: '4px',
+              }}
+            >
+              🎯 Phase 4 (목표)
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                fontWeight: 600,
+                color: 'var(--fg-default)',
+                marginBottom: '4px',
+              }}
+            >
+              자동 블랙박스
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--font-size-caption)',
+                color: 'var(--fg-disabled)',
+                lineHeight: 1.5,
+              }}
+            >
+              사고 자동감지→예측→대응
+              <br />
+              센서+AI 물질식별
+              <br />전 과정 무인 자동화
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
 
 export function HNSTheoryView() {
   const [activePanel, setActivePanel] = useState(0);
@@ -1443,7 +6264,7 @@ export function HNSTheoryView() {
     if (!contentRef.current) return;
     const clone = contentRef.current.cloneNode(true) as HTMLElement;
     clone.querySelectorAll('[data-html2pdf-ignore]').forEach((el) => el.remove());
-    const content = sanitizeHtml(clone.innerHTML);
+    const content = clone.innerHTML;
     const styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
       .map((el) => el.outerHTML)
       .join('\n');
@@ -1455,7 +6276,7 @@ ${styles}
 <style>
   :root { --t1: #ffffff !important; --t2: #d0d6e6 !important; --t3: #a8b0c8 !important; }
   @media print { @page { size: A4; margin: 10mm; } body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }
-  body { background: var(--bg-base); color: var(--fg-default); font-family: 'Noto Sans KR', sans-serif; padding: 20px 24px; }
+  body { background: var(--bg-base); color: var(--fg-default); font-family: var(--font-korean); padding: 20px 24px; }
 </style>
 </head><body>${content}</body></html>`;
     const blob = new Blob([fullHtml], { type: 'text/html; charset=utf-8' });
@@ -1472,57 +6293,27 @@ ${styles}
   };
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        width: '100%',
-        flex: 1,
-        overflow: 'hidden',
-        background: 'var(--bg-base)',
-      }}
-    >
+    <div className="flex flex-col flex-1 h-full overflow-hidden bg-bg-base">
       <div
+        className="flex-1 overflow-y-auto scrollbar-thin p-5"
+        style={{ scrollbarGutter: 'stable' }}
         ref={contentRef}
-        style={{
-          flex: 1,
-          overflowY: 'auto',
-          scrollbarWidth: 'thin',
-          scrollbarColor: 'var(--stroke-light) transparent',
-          padding: '20px',
-        }}
       >
-        {/* Header */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '20px',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        {/* 헤더 */}
+        <div className="flex items-center justify-between mb-5">
+          <div className="flex items-center gap-3">
             <div
+              className="w-[42px] h-[42px] rounded-[10px] flex items-center justify-center text-heading-3"
               style={{
-                width: '42px',
-                height: '42px',
-                borderRadius: '10px',
-                background: 'linear-gradient(135deg,rgba(168,85,247,.2),rgba(59,130,246,.15))',
-                border: '1px solid rgba(168,85,247,.3)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '20px',
+                background: 'rgba(6,182,212,.04)',
+                border: '1px solid rgba(6,182,212,.3)',
               }}
             >
               📐
             </div>
             <div>
-              <div style={{ fontSize: '16px', fontWeight: 700 }}>
-                HNS 대기확산 모델 이론 및 검증
-              </div>
-              <div style={{ fontSize: '10px', color: 'var(--fg-disabled)', marginTop: '2px' }}>
+              <div className="text-title-2 font-bold text-fg">HNS 대기확산 모델 이론 및 검증</div>
+              <div className="text-label-2 text-fg-disabled mt-0.5">
                 WRF-Chem · Gaussian Plume/Puff · ROMS · 해양환경 보정 — Based on Lee Moon-Jin et al.
               </div>
             </div>
@@ -1530,57 +6321,41 @@ ${styles}
           <button
             onClick={handleExportPDF}
             data-html2pdf-ignore
+            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
             style={{
-              padding: '6px 14px',
-              borderRadius: '6px',
               border: '1px solid rgba(6,182,212,.3)',
               background: 'rgba(6,182,212,.08)',
-              color: 'var(--color-accent)',
-              fontSize: '10px',
-              fontWeight: 600,
-              cursor: 'pointer',
             }}
           >
             📤 PDF 내보내기
           </button>
         </div>
 
-        {/* Sub-tabs */}
-        <div
-          style={{
-            display: 'flex',
-            gap: '3px',
-            background: 'var(--bg-card)',
-            borderRadius: '8px',
-            padding: '4px',
-            marginBottom: '20px',
-            border: '1px solid var(--stroke-default)',
-          }}
-        >
+        {/* 서브탭 */}
+        <div className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-card border border-stroke">
           {theoryTabs.map((tab, i) => (
             <button
               key={i}
               onClick={() => setActivePanel(i)}
-              style={{
-                flex: 1,
-                padding: '8px',
-                fontSize: '11px',
-                fontWeight: 600,
-                cursor: 'pointer',
-                borderRadius: '6px',
-                border:
-                  activePanel === i ? '1px solid var(--color-accent)' : '1px solid transparent',
-                background: activePanel === i ? 'rgba(6,182,212,.08)' : 'transparent',
-                color: activePanel === i ? 'var(--color-accent)' : 'var(--fg-disabled)',
-              }}
+              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
+                activePanel === i
+                  ? 'border-stroke-light bg-bg-elevated text-fg'
+                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
+              }`}
             >
               {tab.icon} {tab.name}
             </button>
           ))}
         </div>
 
-        {/* Panel content */}
-        <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(panelHtml[activePanel]) }} />
+        {/* 패널 콘텐츠 */}
+        {activePanel === 0 && <SystemOverviewPanel />}
+        {activePanel === 1 && <GaussianModelPanel />}
+        {activePanel === 2 && <SubstanceScenarioPanel />}
+        {activePanel === 3 && <OceanCorrectionPanel />}
+        {activePanel === 4 && <VerificationPanel />}
+        {activePanel === 5 && <RealtimeComparePanel />}
+        {activePanel === 6 && <WrfChemPanel />}
       </div>
     </div>
   );
diff --git a/frontend/src/tabs/hns/components/HNSView.tsx b/frontend/src/tabs/hns/components/HNSView.tsx
index 2afaba9..3df8b73 100755
--- a/frontend/src/tabs/hns/components/HNSView.tsx
+++ b/frontend/src/tabs/hns/components/HNSView.tsx
@@ -44,7 +44,7 @@ function HNSManualViewer() {
         <div className="flex items-center justify-between mb-4">
           <div>
             <div className="text-base font-bold">📖 해양 HNS 대응 매뉴얼</div>
-            <div className="text-[10px] text-fg-disabled mt-0.5">
+            <div className="text-label-2 text-fg-disabled mt-0.5">
               Marine HNS Response Manual — Bonn Agreement / HELCOM / REMPEC (WestMOPoCo 2024
               한국어판)
             </div>
@@ -70,19 +70,19 @@ function HNSManualViewer() {
               icon: '🔬',
               title: '3. HNS 거동 및 유해요소',
               desc: 'SEBC 거동분류 · MSDS · GESAMP · 물리화학적 특성',
-              color: 'var(--color-tertiary)',
+              color: 'var(--color-accent)',
             },
             {
               icon: '🛡️',
               title: '4. 대비',
               desc: '위험 평가 · 비상 계획 · 교육훈련 · 장비 비축',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
             },
             {
               icon: '🚨',
               title: '5. 대응',
               desc: '최초 조치 · 안전구역 · PPE · 모니터링 · 대응 기술',
-              color: 'var(--color-danger)',
+              color: 'var(--color-info)',
             },
             {
               icon: '🔄',
@@ -114,18 +114,18 @@ function HNSManualViewer() {
               }}
             >
               <div className="text-[20px] mb-1.5">{ch.icon}</div>
-              <div className="text-[11px] font-bold">{ch.title}</div>
-              <div className="text-[9px] text-fg-disabled mt-1 leading-[1.4]">{ch.desc}</div>
+              <div className="text-label-2 font-bold">{ch.title}</div>
+              <div className="text-caption text-fg-disabled mt-1 leading-[1.4]">{ch.desc}</div>
             </div>
           ))}
         </div>
 
         {/* SEBC 거동 분류 */}
         <div className={`${card} bg-bg-card border border-stroke`}>
-          <div className="text-[13px] font-bold mb-2.5">
+          <div className="text-title-4 font-bold mb-2.5">
             SEBC 거동 분류 (Standard European Behaviour Classification)
           </div>
-          <div className="text-[9px] text-fg-disabled mb-2.5 leading-normal">
+          <div className="text-caption text-fg-disabled mb-2.5 leading-normal">
             물질의 물리적·화학적 특성(용해도, 밀도, 증기압, 점도)에 따라 이론적 거동을 5가지 주요
             범주 + 7가지 하위 범주로 분류
           </div>
@@ -141,7 +141,7 @@ function HNSManualViewer() {
                 icon: '🌫️',
                 label: 'E — 증발',
                 desc: '수면→대기 증발\n증기압 > 3kPa\n예: 벤젠, 톨루엔',
-                color: 'rgba(249,115,22',
+                color: 'rgba(6,182,212',
               },
               {
                 icon: '🟡',
@@ -168,7 +168,7 @@ function HNSManualViewer() {
                 style={{ background: `${s.color},.08)`, border: `1px solid ${s.color},.2)` }}
               >
                 <div className="text-[22px] mb-1">{s.icon}</div>
-                <div className="text-[11px] font-bold" style={{ color: `${s.color},1)` }}>
+                <div className="text-label-2 font-bold" style={{ color: `${s.color},1)` }}>
                   {s.label}
                 </div>
                 <div className="text-fg-disabled whitespace-pre-line text-[8px] mt-[3px] leading-[1.3]">
@@ -225,10 +225,10 @@ function DispersionTimeSlider({
     >
       <button
         onClick={onPlayPause}
-        className="flex items-center justify-center w-7 h-7 rounded-full text-[14px]"
+        className="flex items-center justify-center w-7 h-7 rounded-full text-title-3"
         style={{
-          background: isPlaying ? 'rgba(239,68,68,0.2)' : 'rgba(6,182,212,0.2)',
-          border: `1px solid ${isPlaying ? 'rgba(239,68,68,0.4)' : 'rgba(6,182,212,0.4)'}`,
+          background: isPlaying ? 'rgba(59,130,246,0.2)' : 'rgba(6,182,212,0.2)',
+          border: `1px solid ${isPlaying ? 'rgba(59,130,246,0.4)' : 'rgba(6,182,212,0.4)'}`,
           cursor: 'pointer',
         }}
       >
@@ -236,7 +236,7 @@ function DispersionTimeSlider({
       </button>
 
       <div className="flex-1 flex flex-col gap-1">
-        <div className="flex items-center justify-between text-[9px]">
+        <div className="flex items-center justify-between text-caption">
           <span className="text-color-accent font-mono font-bold">t = {currentTime}s</span>
           <span className="text-fg-disabled font-mono">{endTime}s</span>
         </div>
@@ -251,7 +251,7 @@ function DispersionTimeSlider({
         />
       </div>
 
-      <div className="text-[9px] text-fg-disabled font-mono whitespace-nowrap">
+      <div className="text-caption text-fg-disabled font-mono whitespace-nowrap">
         {currentFrame + 1}/{totalFrames}
       </div>
     </div>
@@ -777,19 +777,19 @@ export function HNSView() {
               zones: [
                 {
                   level: 'AEGL-3',
-                  color: 'rgba(239,68,68,0.4)',
+                  color: 'rgba(59,130,246,0.4)',
                   radius: resultForZones.aeglDistances.aegl3,
                   angle: meteo.windDirDeg,
                 },
                 {
                   level: 'AEGL-2',
-                  color: 'rgba(249,115,22,0.3)',
+                  color: 'rgba(6,182,212,0.3)',
                   radius: resultForZones.aeglDistances.aegl2,
                   angle: meteo.windDirDeg,
                 },
                 {
                   level: 'AEGL-1',
-                  color: 'rgba(234,179,8,0.25)',
+                  color: 'rgba(6,182,212,0.25)',
                   radius: resultForZones.aeglDistances.aegl1,
                   angle: meteo.windDirDeg,
                 },
diff --git a/frontend/src/tabs/prediction/components/AnalysisListTable.tsx b/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
index 35c9c39..d47b972 100755
--- a/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
+++ b/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
@@ -36,25 +36,25 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
     switch (status) {
       case 'completed':
         return (
-          <span className="px-2 py-1 text-[10px] font-semibold rounded-md bg-[rgba(34,197,94,0.15)] text-green-400">
+          <span className="px-2 py-1 text-label-2 font-medium rounded-md bg-[rgba(34,197,94,0.15)] text-color-success">
             완료
           </span>
         );
       case 'running':
         return (
-          <span className="px-2 py-1 text-[10px] font-semibold rounded-md bg-[rgba(249,115,22,0.15)] text-orange-400">
+          <span className="px-2 py-1 text-label-2 font-medium rounded-md bg-[rgba(249,115,22,0.15)] text-color-warning">
             실행중
           </span>
         );
       case 'pending':
         return (
-          <span className="px-2 py-1 text-[10px] font-semibold rounded-md bg-[rgba(138,150,168,0.15)] text-fg-disabled">
+          <span className="px-2 py-1 text-label-2 font-medium rounded-md bg-[rgba(138,150,168,0.15)] text-fg-disabled">
             대기
           </span>
         );
       case 'error':
         return (
-          <span className="px-2 py-1 text-[10px] font-semibold rounded-md bg-[rgba(239,68,68,0.15)] text-color-danger">
+          <span className="px-2 py-1 text-label-2 font-medium rounded-md bg-[rgba(239,68,68,0.15)] text-color-danger">
             오류
           </span>
         );
@@ -106,7 +106,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           key={page}
           onClick={() => setCurrentPage(page as number)}
-          className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
+          className={`px-3 py-1 text-title-3 font-medium rounded transition-colors ${
             currentPage === page ? 'bg-color-accent text-bg-0' : 'text-fg-sub hover:bg-bg-elevated'
           }`}
         >
@@ -121,8 +121,8 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-xl font-bold text-fg">유출유 확산 예측 목록</h1>
-          <p className="text-sm text-fg-disabled mt-1">총 {analyses.length}건</p>
+          <h1 className="text-heading-3 font-bold text-fg">유출유 확산 예측 목록</h1>
+          <p className="text-title-3 text-fg-disabled mt-1">총 {analyses.length}건</p>
         </div>
         <div className="flex items-center gap-3">
           <div className="relative">
@@ -131,12 +131,16 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
               placeholder="검색..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-64 px-4 py-2 text-sm bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
+              className="w-64 px-4 py-2 text-title-3 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
             />
           </div>
           <button
             onClick={() => onTabChange('analysis')}
-            className="px-4 py-2 text-sm font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_16px_rgba(6,182,212,0.3)] transition-all"
+            className="px-4 py-2 text-title-3 font-semibold rounded-sm cursor-pointer text-color-accent"
+            style={{
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
+            }}
           >
             + 새 분석
           </button>
@@ -146,64 +150,66 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
       {/* 테이블 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="text-center py-20 text-fg-disabled text-sm">로딩 중...</div>
+          <div className="text-center py-20 text-fg-disabled text-title-3">로딩 중...</div>
         ) : (
           <table className="w-full">
             <thead className="sticky top-0 bg-bg-surface border-b border-stroke z-10">
               <tr>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   번호
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   사고명
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   사고일시
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   예측 실행
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   예측시간
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   유종
                 </th>
-                <th className="px-4 py-3 text-right text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-right text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   유출량
                 </th>
-                <th className="px-4 py-3 text-center text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-center text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   KOSPS
                 </th>
-                <th className="px-4 py-3 text-center text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-center text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   POSEIDON
                 </th>
-                <th className="px-4 py-3 text-center text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-center text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   OpenDrift
                 </th>
-                <th className="px-4 py-3 text-center text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-center text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   역추적
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   담당자
                 </th>
-                <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+                <th className="px-4 py-3 text-left text-label-1 font-bold text-fg-disabled uppercase tracking-label">
                   소속
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-border">
+            <tbody className="divide-y divide-stroke">
               {currentAnalyses.map((analysis) => (
                 <tr
                   key={analysis.predRunSn ?? analysis.acdntSn}
                   className="hover:bg-bg-elevated transition-colors cursor-pointer group"
                 >
-                  <td className="px-4 py-3 text-sm text-fg-sub font-mono">{analysis.acdntSn}</td>
+                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                    {analysis.acdntSn}
+                  </td>
                   <td className="px-4 py-3">
                     <div className="flex items-center gap-2">
                       <span className="w-2 h-2 rounded-full bg-color-danger animate-pulse" />
                       <span
-                        className="text-sm font-semibold text-color-accent hover:underline transition-all cursor-pointer"
+                        className="text-title-3 font-medium text-color-accent hover:underline transition-all cursor-pointer"
                         onClick={(e) => {
                           e.stopPropagation();
                           if (onSelectAnalysis) {
@@ -215,7 +221,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                       </span>
                     </div>
                   </td>
-                  <td className="px-4 py-3 text-sm text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
                     {analysis.occurredAt
                       ? new Date(analysis.occurredAt).toLocaleString('ko-KR', {
                           month: '2-digit',
@@ -225,7 +231,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                         })
                       : '—'}
                   </td>
-                  <td className="px-4 py-3 text-sm text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
                     {analysis.runDtm
                       ? new Date(analysis.runDtm).toLocaleString('ko-KR', {
                           month: '2-digit',
@@ -235,9 +241,11 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                         })
                       : '—'}
                   </td>
-                  <td className="px-4 py-3 text-sm text-fg-sub font-mono">{analysis.duration}</td>
-                  <td className="px-4 py-3 text-sm text-fg-sub">{analysis.oilType}</td>
-                  <td className="px-4 py-3 text-sm text-fg font-mono text-right font-semibold">
+                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                    {analysis.duration}
+                  </td>
+                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.oilType}</td>
+                  <td className="px-4 py-3 text-title-3 text-fg font-mono text-right font-medium">
                     {analysis.volume != null ? analysis.volume.toFixed(2) : '—'}
                   </td>
                   <td className="px-4 py-3 text-center">{getStatusBadge(analysis.kospsStatus)}</td>
@@ -250,8 +258,8 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                   <td className="px-4 py-3 text-center">
                     {getStatusBadge(analysis.backtrackStatus)}
                   </td>
-                  <td className="px-4 py-3 text-sm text-fg-sub">{analysis.analyst}</td>
-                  <td className="px-4 py-3 text-sm text-fg-sub">{analysis.officeName}</td>
+                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.analyst}</td>
+                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.officeName}</td>
                 </tr>
               ))}
             </tbody>
@@ -259,7 +267,9 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         )}
 
         {!loading && analyses.length === 0 && (
-          <div className="text-center py-20 text-fg-disabled text-sm">분석 데이터가 없습니다.</div>
+          <div className="text-center py-20 text-fg-disabled text-title-3">
+            분석 데이터가 없습니다.
+          </div>
         )}
       </div>
 
@@ -268,14 +278,14 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           onClick={() => setCurrentPage(1)}
           disabled={currentPage === 1}
-          className="px-3 py-1 text-sm font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ≪
         </button>
         <button
           onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
           disabled={currentPage === 1}
-          className="px-3 py-1 text-sm font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ‹
         </button>
@@ -285,14 +295,14 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
           disabled={currentPage === totalPages}
-          className="px-3 py-1 text-sm font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ›
         </button>
         <button
           onClick={() => setCurrentPage(totalPages)}
           disabled={currentPage === totalPages}
-          className="px-3 py-1 text-sm font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ≫
         </button>
diff --git a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
index 1c95919..cae540d 100755
--- a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 
 const boomTabs = [
-  { id: 0, label: '🌐 개요' },
-  { id: 1, label: '📐 배치 이론' },
-  { id: 2, label: '⚙️ 최적화 알고리즘' },
-  { id: 3, label: '🌊 유체역학 모델' },
-  { id: 4, label: '🗺️ 현장 적용' },
-  { id: 5, label: '📚 참고문헌' },
+  { id: 0, label: '개요' },
+  { id: 1, label: '배치 이론' },
+  { id: 2, label: '최적화 알고리즘' },
+  { id: 3, label: '유체역학 모델' },
+  { id: 4, label: '현장 적용' },
+  { id: 5, label: '참고문헌' },
 ];
 
 export function BoomDeploymentTheoryView() {
@@ -22,26 +22,23 @@ export function BoomDeploymentTheoryView() {
         {/* 헤더 */}
         <div className="flex items-center justify-between mb-5">
           <div className="flex items-center gap-3">
-            <div
-              className="w-[38px] h-[38px] rounded-[9px] flex items-center justify-center text-lg"
-              style={{
-                background: 'linear-gradient(135deg,rgba(249,115,22,.2),rgba(234,179,8,.15))',
-                border: '1px solid rgba(249,115,22,.3)',
-              }}
-            >
+            <div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
               🛡️
             </div>
             <div>
-              <div className="text-[15px] font-bold">오일펜스 배치 최적화 알고리즘 이론</div>
-              <div className="text-[10px] mt-0.5 text-fg-disabled">
+              <div className="text-title-2 font-bold">오일펜스 배치 최적화 알고리즘 이론</div>
+              <div className="text-label-2 mt-0.5 text-fg-disabled">
                 Oil Boom Deployment Optimization · 유출유 확산예측 연동 · 방제효율 최대화
               </div>
             </div>
           </div>
           <button
             onClick={handleExportPDF}
-            className="px-3.5 py-1.5 rounded-md text-[10px] font-semibold cursor-pointer text-color-info"
-            style={{ border: '1px solid rgba(59,130,246,.3)', background: 'rgba(59,130,246,.08)' }}
+            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
+            style={{
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
+            }}
           >
             📤 PDF 내보내기
           </button>
@@ -49,20 +46,16 @@ export function BoomDeploymentTheoryView() {
 
         {/* 내부 네비게이션 */}
         <div className="mb-5">
-          <div className="flex gap-[3px] rounded-lg p-1 bg-bg-card border border-stroke">
+          <div className="flex gap-0.5 rounded-lg p-1 bg-bg-card border border-stroke">
             {boomTabs.map((tab) => (
               <button
                 key={tab.id}
                 onClick={() => setActivePanel(tab.id)}
-                className="flex-1 py-2 px-2 text-[12px] font-semibold rounded-md transition-all"
-                style={{
-                  background: activePanel === tab.id ? 'rgba(249,115,22,.15)' : undefined,
-                  color: activePanel === tab.id ? 'var(--color-warning)' : 'var(--fg-disabled)',
-                  border:
-                    activePanel === tab.id
-                      ? '1px solid rgba(249,115,22,.3)'
-                      : '1px solid var(--stroke-default)',
-                }}
+                className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
+                  activePanel === tab.id
+                    ? 'border-stroke-light bg-bg-elevated text-fg'
+                    : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
+                }`}
               >
                 {tab.label}
               </button>
@@ -87,39 +80,26 @@ function OverviewPanel() {
   return (
     <>
       {/* 인트로 카드 */}
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(249,115,22,.06),rgba(234,179,8,.04))',
-          border: '1px solid rgba(249,115,22,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{
-            background:
-              'linear-gradient(90deg,var(--color-warning),var(--color-caution),var(--color-accent))',
-          }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="grid grid-cols-2 gap-5">
           <div>
-            <div className="text-[13px] font-bold mb-2">🛡️ 오일펜스 배치 최적화란?</div>
-            <div className="text-[11px] leading-[1.8] text-fg-sub">
-              해양 유류오염 발생 시 <b className="text-color-warning">유출유 확산 예측 결과</b>와
+            <div className="text-title-4 font-bold mb-2">오일펜스 배치 최적화란?</div>
+            <div className="text-label-2 leading-[1.8] text-fg-sub">
+              해양 유류오염 발생 시 <b className="text-color-accent">유출유 확산 예측 결과</b>와
               실시간 해양환경(조류·풍향·파고)을 연동하여, 제한된 방제자원(오일펜스 길이·방제정
               수)으로 <b className="text-color-accent">오염 확산 차단 효율을 최대화</b>하는 최적
               배치 지점·형태·순서를 자동 산출하는 수치 알고리즘 체계입니다.
             </div>
           </div>
           <div>
-            <div className="text-[13px] font-bold mb-2">🎯 WING 최적화 목표</div>
-            <div className="flex flex-col gap-[5px] text-[11px] text-fg-sub">
+            <div className="text-title-4 font-bold mb-2">WING 최적화 목표</div>
+            <div className="flex flex-col gap-[5px] text-label-2 text-fg-sub">
               {[
                 {
                   num: '①',
-                  color: 'var(--color-warning)',
-                  bg: 'rgba(249,115,22,.05)',
-                  bd: 'rgba(249,115,22,.12)',
+                  color: 'var(--color-accent)',
+                  bg: 'rgba(6,182,212,.05)',
+                  bd: 'rgba(6,182,212,.12)',
                   text: '차단 면적 최대화 — 예측 유출유 확산 경계와 오일펜스 교차 면적 극대화',
                 },
                 {
@@ -131,16 +111,16 @@ function OverviewPanel() {
                 },
                 {
                   num: '③',
-                  color: 'var(--color-success)',
-                  bg: 'rgba(34,197,94,.05)',
-                  bd: 'rgba(34,197,94,.12)',
+                  color: 'var(--color-accent)',
+                  bg: 'rgba(6,182,212,.05)',
+                  bd: 'rgba(6,182,212,.12)',
                   text: '자원 효율 최적화 — 가용 오일펜스 길이·방제정 수·이동시간 제약 충족',
                 },
                 {
                   num: '④',
-                  color: 'var(--color-tertiary)',
-                  bg: 'rgba(168,85,247,.05)',
-                  bd: 'rgba(168,85,247,.12)',
+                  color: 'var(--color-accent)',
+                  bg: 'rgba(6,182,212,.05)',
+                  bd: 'rgba(6,182,212,.12)',
                   text: '실패 안전성 확보 — 조류 초과 시 오일펜스 이탈 방지 방향각 자동 보정',
                 },
               ].map((item, i) => (
@@ -162,16 +142,16 @@ function OverviewPanel() {
 
       {/* 전체 흐름도 */}
       <div className="rounded-md p-4 mb-4 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3.5">⚙️ WING 오일펜스 배치 최적화 전체 흐름</div>
+        <div className="text-label-1 font-bold mb-3.5">WING 오일펜스 배치 최적화 전체 흐름</div>
         <div className="flex items-center justify-center gap-0 flex-nowrap overflow-x-auto py-2">
           {[
             {
               icon: '🌊',
               label: '확산예측',
               sub: 'KOSPS/POSEIDON\nOpenDrift',
-              color: 'var(--color-warning)',
-              bg: 'rgba(249,115,22,.08)',
-              bd: 'rgba(249,115,22,.2)',
+              color: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.08)',
+              bd: 'rgba(6,182,212,.2)',
             },
             {
               icon: '📡',
@@ -186,25 +166,25 @@ function OverviewPanel() {
               label: '차단선 후보',
               sub: '격자탐색\n후보지점 생성',
               color: 'var(--color-caution)',
-              bg: 'rgba(234,179,8,.08)',
-              bd: 'rgba(234,179,8,.2)',
+              bg: 'rgba(6,182,212,.08)',
+              bd: 'rgba(6,182,212,.2)',
             },
             {
               icon: '⚙️',
               label: '최적화 엔진',
               sub: '다목적\n유전알고리즘',
-              color: 'var(--color-tertiary)',
-              bg: 'rgba(168,85,247,.08)',
-              bd: 'rgba(168,85,247,.3)',
+              color: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.08)',
+              bd: 'rgba(6,182,212,.3)',
               bold: true,
             },
             {
               icon: '✅',
               label: '배치안 출력',
               sub: '좌표·형태\n방향·순서',
-              color: 'var(--color-success)',
-              bg: 'rgba(34,197,94,.08)',
-              bd: 'rgba(34,197,94,.2)',
+              color: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.08)',
+              bd: 'rgba(6,182,212,.2)',
             },
             {
               icon: '🗺️',
@@ -217,13 +197,13 @@ function OverviewPanel() {
           ].map((step, i) => (
             <div key={i} className="flex items-center">
               <div
-                className="text-center min-w-[80px] rounded-lg px-3 py-2.5 text-[9px]"
+                className="text-center min-w-[80px] rounded-lg px-3 py-2.5 text-caption"
                 style={{
                   background: step.bg,
                   border: `${step.bold ? '2px' : '1px'} solid ${step.bd}`,
                 }}
               >
-                <div className="text-[15px] mb-1">{step.icon}</div>
+                <div className="text-title-2 mb-1">{step.icon}</div>
                 <div className="font-bold" style={{ color: step.color }}>
                   {step.label}
                 </div>
@@ -231,7 +211,7 @@ function OverviewPanel() {
                   {step.sub}
                 </div>
               </div>
-              {i < 5 && <div className="px-1.5 text-fg-disabled text-[14px]">▶</div>}
+              {i < 5 && <div className="px-1.5 text-fg-disabled text-title-3">▶</div>}
             </div>
           ))}
         </div>
@@ -243,7 +223,7 @@ function OverviewPanel() {
           {
             icon: '⛽',
             title: '고형 오일펜스',
-            color: 'var(--color-warning)',
+            color: 'var(--color-accent)',
             desc: '단단한 부체와 수중커튼으로 구성. 정적 배치. 항구·좁은 수로에 적합.',
             specs: [
               '내조류 한계: 0.5~1.0 knot',
@@ -265,21 +245,17 @@ function OverviewPanel() {
           {
             icon: '🔄',
             title: '자항식 오일펜스',
-            color: 'var(--color-success)',
+            color: 'var(--color-accent)',
             desc: '방제정 예인 또는 자체 추진. U형·V형 동적 배치. 강조류 해역 적합.',
             specs: ['운용수심: 5m 이상', 'U형·V형·J형 동적 형태', '내조류: 조류각도 보정으로 극복'],
           },
         ].map((boom, i) => (
-          <div
-            key={i}
-            className="rounded-md p-3.5 bg-bg-card border border-stroke"
-            style={{ borderTop: `3px solid ${boom.color}` }}
-          >
-            <div className="text-[11px] font-bold mb-2" style={{ color: boom.color }}>
+          <div key={i} className="rounded-md p-3.5 bg-bg-card border border-stroke">
+            <div className="text-label-2 font-bold mb-2" style={{ color: boom.color }}>
               {boom.icon} {boom.title}
             </div>
-            <div className="text-[10px] mb-2 leading-[1.7] text-fg-sub">{boom.desc}</div>
-            <div className="flex flex-col gap-[3px] text-[9px] text-fg-sub">
+            <div className="text-label-2 mb-2 leading-[1.7] text-fg-sub">{boom.desc}</div>
+            <div className="flex flex-col gap-[3px] text-caption text-fg-sub">
               {boom.specs.map((spec, j) => (
                 <div
                   key={j}
@@ -296,17 +272,17 @@ function OverviewPanel() {
 
       {/* 핵심 제약조건 */}
       <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
-        <div className="text-[11px] font-bold mb-2.5 text-color-danger">
+        <div className="text-label-2 font-bold mb-2.5 text-color-caution">
           ⚠️ 최적화 핵심 제약조건
         </div>
-        <div className="grid grid-cols-3 gap-2.5 text-[10px] text-fg-sub">
+        <div className="grid grid-cols-3 gap-2.5 text-label-2 text-fg-sub">
           {[
             {
               icon: '🌊',
               title: '조류 제약',
-              color: 'var(--color-danger)',
-              bg: 'rgba(239,68,68,.05)',
-              bd: 'rgba(239,68,68,.15)',
+              color: 'var(--color-info)',
+              bg: 'rgba(59,130,246,.05)',
+              bd: 'rgba(59,130,246,.15)',
               lines: [
                 '조류속도 > 임계유속 시',
                 '오일펜스 하단 통과 발생',
@@ -318,8 +294,8 @@ function OverviewPanel() {
               icon: '📏',
               title: '자원 제약',
               color: 'var(--color-caution)',
-              bg: 'rgba(234,179,8,.05)',
-              bd: 'rgba(234,179,8,.15)',
+              bg: 'rgba(6,182,212,.05)',
+              bd: 'rgba(6,182,212,.15)',
               lines: [
                 '가용 오일펜스 총 길이',
                 '방제정 척수·이동시간',
@@ -371,56 +347,56 @@ function DeploymentTheoryPanel() {
     <>
       {/* 차단 효율 이론 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">
+        <div className="text-label-1 font-bold mb-3">
           📐 오일펜스 차단 효율 이론 (Boom Containment Efficiency)
         </div>
         <div className="grid grid-cols-2 gap-3.5">
           <div>
-            <div className="text-[11px] font-bold mb-2 text-color-warning">
+            <div className="text-label-2 font-bold mb-2 text-color-accent">
               ① 차단 효율 함수 E(θ, U)
             </div>
-            <div className="text-[10px] leading-[1.8] mb-2 text-fg-sub">
+            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
               오일펜스의 차단 효율은 <b>조류 유속(U)</b>과 <b>오일펜스 방향각(θ)</b>의 함수입니다.
               조류가 오일펜스에 수직으로 입사할수록 차단 효율이 낮아지며, 임계유속 초과 시 기름이
               오일펜스 하부로 통과합니다.
             </div>
             <div
-              className="rounded-md p-2.5 text-[10px] leading-[2.1] bg-bg-base font-mono"
-              style={{ border: '1px solid rgba(249,115,22,.2)' }}
+              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               E(θ,U) = 1 −{' '}
-              <span className="text-color-danger">
+              <span className="text-color-info">
                 F<sub>loss</sub>(U<sub>n</sub>)
               </span>
               <br />U<sub>n</sub> = U · sin(θ){' '}
-              <span className="text-[9px] text-fg-disabled">(법선방향 유속)</span>
+              <span className="text-caption text-fg-disabled">(법선방향 유속)</span>
               <br />E = 1 (U<sub>n</sub> ≤ U<sub>c</sub>)<br />E = max(0, 1 − (U<sub>n</sub>/U
               <sub>c</sub>)²) (U<sub>n</sub> &gt; U<sub>c</sub>)<br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 U<sub>c</sub>: 임계유속(약 0.35m/s = 0.7 knot)
               </span>
             </div>
           </div>
           <div>
-            <div className="text-[11px] font-bold mb-2 text-color-accent">
+            <div className="text-label-2 font-bold mb-2 text-color-accent">
               ② 최적 방향각 θ* 산정
             </div>
-            <div className="text-[10px] leading-[1.8] mb-2 text-fg-sub">
+            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
               오일펜스 방향각은 조류 방향에 따라 최적화됩니다. 차단 면적과 오일 수집 효율의{' '}
               <b>트레이드오프</b>를 고려하여, 일반적으로 조류에 대해{' '}
               <b className="text-color-accent">30°~45° 예각 배치</b>가 최적입니다.
             </div>
             <div
-              className="rounded-md p-2.5 text-[10px] leading-[2.1] bg-bg-base font-mono"
+              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
               style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               θ* = arcsin(U<sub>c</sub> / U){' '}
-              <span className="text-[9px] text-fg-disabled">(임계조건)</span>
+              <span className="text-caption text-fg-disabled">(임계조건)</span>
               <br />θ<sub>opt</sub> = argmax [A<sub>block</sub>(θ) · E(θ,U)]
               <br />
               실용범위: 15° ≤ θ ≤ 60°
               <br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 단, θ &lt; arcsin(U<sub>c</sub>/U) 이면 기름 통과 발생
               </span>
             </div>
@@ -430,17 +406,16 @@ function DeploymentTheoryPanel() {
 
       {/* V형·U형·J형 배치 패턴 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">🔷 오일펜스 배치 형태별 이론</div>
+        <div className="text-label-1 font-bold mb-3">🔷 오일펜스 배치 형태별 이론</div>
         <div className="grid grid-cols-3 gap-3">
           {/* V형 */}
           <div
             className="rounded-lg p-3.5 bg-bg-base"
             style={{
               border: '1px solid rgba(6,182,212,.2)',
-              borderTop: '3px solid var(--color-accent)',
             }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-accent">V형 (Chevron)</div>
+            <div className="text-label-2 font-bold mb-2 text-color-accent">V형 (Chevron)</div>
             <div
               className="flex items-center justify-center p-4 rounded-md mb-2"
               style={{ background: 'rgba(6,182,212,.04)' }}
@@ -463,7 +438,7 @@ function DeploymentTheoryPanel() {
                   y1="15"
                   x2="50"
                   y2="55"
-                  stroke="rgba(249,115,22,.8)"
+                  stroke="rgba(6,182,212,.8)"
                   strokeWidth="2.5"
                 />
                 <line
@@ -471,15 +446,15 @@ function DeploymentTheoryPanel() {
                   y1="15"
                   x2="50"
                   y2="55"
-                  stroke="rgba(249,115,22,.8)"
+                  stroke="rgba(6,182,212,.8)"
                   strokeWidth="2.5"
                 />
-                <circle cx="50" cy="10" r="4" fill="rgba(249,115,22,.5)" />
+                <circle cx="50" cy="10" r="4" fill="rgba(6,182,212,.5)" />
                 <text
                   x="50"
                   y="7"
                   textAnchor="middle"
-                  fill="rgba(249,115,22,.8)"
+                  fill="rgba(6,182,212,.8)"
                   fontSize="7"
                   fontFamily="monospace"
                 >
@@ -499,11 +474,11 @@ function DeploymentTheoryPanel() {
                 </text>
               </svg>
             </div>
-            <div className="text-[10px] leading-[1.7] mb-[7px] text-fg-sub">
+            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
               조류 방향 정면에서 양측으로 펼친 V형. 기름을 중앙 집유점으로 유도. 회수선 배치 용이.
             </div>
             <div
-              className="rounded-[5px] p-[7px] text-[9px] leading-[1.9] font-mono"
+              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
               style={{ background: 'rgba(6,182,212,.05)' }}
             >
               A<sub>V</sub> = L²·sin(2α)/2
@@ -518,14 +493,13 @@ function DeploymentTheoryPanel() {
           <div
             className="rounded-lg p-3.5 bg-bg-base"
             style={{
-              border: '1px solid rgba(34,197,94,.2)',
-              borderTop: '3px solid var(--color-success)',
+              border: '1px solid rgba(6,182,212,.2)',
             }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-success">U형 (Horseshoe)</div>
+            <div className="text-label-2 font-bold mb-2 text-color-accent">U형 (Horseshoe)</div>
             <div
               className="flex items-center justify-center p-4 rounded-md mb-2"
-              style={{ background: 'rgba(34,197,94,.04)' }}
+              style={{ background: 'rgba(6,182,212,.04)' }}
             >
               <svg width="180" height="120" viewBox="0 0 100 65" className="overflow-visible">
                 <defs>
@@ -543,15 +517,15 @@ function DeploymentTheoryPanel() {
                 <path
                   d="M15,10 L15,45 Q50,65 85,45 L85,10"
                   fill="none"
-                  stroke="rgba(34,197,94,.8)"
+                  stroke="rgba(6,182,212,.8)"
                   strokeWidth="2.5"
                 />
-                <circle cx="50" cy="52" r="4" fill="rgba(34,197,94,.5)" />
+                <circle cx="50" cy="52" r="4" fill="rgba(6,182,212,.5)" />
                 <text
                   x="50"
                   y="62"
                   textAnchor="middle"
-                  fill="rgba(34,197,94,.8)"
+                  fill="rgba(6,182,212,.8)"
                   fontSize="7"
                   fontFamily="monospace"
                 >
@@ -571,12 +545,12 @@ function DeploymentTheoryPanel() {
                 </text>
               </svg>
             </div>
-            <div className="text-[10px] leading-[1.7] mb-[7px] text-fg-sub">
+            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
               말굽형으로 기름을 완전 포위. 폐쇄형 구조로 회수 효율 최고. 저조류 해역 적합.
             </div>
             <div
-              className="rounded-[5px] p-[7px] text-[9px] leading-[1.9] font-mono"
-              style={{ background: 'rgba(34,197,94,.05)' }}
+              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
+              style={{ background: 'rgba(6,182,212,.05)' }}
             >
               A<sub>U</sub> = π·r²/2 + 2r·h
               <br />
@@ -590,14 +564,13 @@ function DeploymentTheoryPanel() {
           <div
             className="rounded-lg p-3.5 bg-bg-base"
             style={{
-              border: '1px solid rgba(168,85,247,.2)',
-              borderTop: '3px solid var(--color-tertiary)',
+              border: '1px solid rgba(6,182,212,.2)',
             }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-tertiary">J형 (Skimming)</div>
+            <div className="text-label-2 font-bold mb-2 text-color-accent">J형 (Skimming)</div>
             <div
               className="flex items-center justify-center p-4 rounded-md mb-2"
-              style={{ background: 'rgba(168,85,247,.04)' }}
+              style={{ background: 'rgba(6,182,212,.04)' }}
             >
               <svg width="180" height="120" viewBox="0 0 100 65" className="overflow-visible">
                 <defs>
@@ -617,17 +590,17 @@ function DeploymentTheoryPanel() {
                   y1="8"
                   x2="80"
                   y2="48"
-                  stroke="rgba(168,85,247,.8)"
+                  stroke="rgba(6,182,212,.8)"
                   strokeWidth="2.5"
                 />
                 <path
                   d="M80,48 Q55,60 30,35"
                   fill="none"
-                  stroke="rgba(168,85,247,.8)"
+                  stroke="rgba(6,182,212,.8)"
                   strokeWidth="2.5"
                 />
-                <circle cx="79" cy="48" r="4" fill="rgba(168,85,247,.5)" />
-                <text x="67" y="43" fill="rgba(168,85,247,.8)" fontSize="7" fontFamily="monospace">
+                <circle cx="79" cy="48" r="4" fill="rgba(6,182,212,.5)" />
+                <text x="67" y="43" fill="rgba(6,182,212,.8)" fontSize="7" fontFamily="monospace">
                   회수
                 </text>
                 <line
@@ -644,12 +617,12 @@ function DeploymentTheoryPanel() {
                 </text>
               </svg>
             </div>
-            <div className="text-[10px] leading-[1.7] mb-[7px] text-fg-sub">
+            <div className="text-label-2 leading-[1.7] mb-[7px] text-fg-sub">
               직선+곡선 조합. 기름을 한쪽으로 편향 유도하여 집유. 강조류·연안 배치에 최적.
             </div>
             <div
-              className="rounded-[5px] p-[7px] text-[9px] leading-[1.9] font-mono"
-              style={{ background: 'rgba(168,85,247,.05)' }}
+              className="rounded-[5px] p-[7px] text-caption leading-[1.9] font-mono"
+              style={{ background: 'rgba(6,182,212,.05)' }}
             >
               θ<sub>J</sub> = arcsin(U<sub>c</sub>/U) + δ<br />
               <span className="text-fg-disabled">δ: 안전여유각(5°~10°)</span>
@@ -662,24 +635,24 @@ function DeploymentTheoryPanel() {
 
       {/* 다단 배치 이론 */}
       <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
-        <div className="text-[11px] font-bold mb-2.5">🔢 다단계 차단선(Multi-Boom) 배치 이론</div>
+        <div className="text-label-2 font-bold mb-2.5">🔢 다단계 차단선(Multi-Boom) 배치 이론</div>
         <div className="grid grid-cols-2 gap-3">
-          <div className="text-[10px] leading-[1.8] text-fg-sub">
+          <div className="text-label-2 leading-[1.8] text-fg-sub">
             단일 오일펜스로 차단 불가한 경우 <b>직렬 다단 배치</b>로 누적 차단 효율을 향상합니다.
             n개 직렬 배치 시 누적 차단 효율:
             <div className="mt-2 rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
               E<sub>total</sub> = 1 − ∏(1−E<sub>i</sub>)<br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 E<sub>i</sub>: i번째 오일펜스 단독 차단효율
               </span>
             </div>
           </div>
-          <div className="flex flex-col gap-[5px] text-[9px] text-fg-sub">
+          <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
             {[
               {
-                color: 'var(--color-success)',
-                bg: 'rgba(34,197,94,.05)',
-                bd: 'rgba(34,197,94,.12)',
+                color: 'var(--color-accent)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
                 label: '2단 직렬',
                 text: ': E_total = E₁+E₂−E₁·E₂ (예: 70%+70% → 91%)',
               },
@@ -691,16 +664,16 @@ function DeploymentTheoryPanel() {
                 text: ': 부표 집적 방지를 위해 ≥ 200m 이격 권장',
               },
               {
-                color: 'var(--color-tertiary)',
-                bg: 'rgba(168,85,247,.05)',
-                bd: 'rgba(168,85,247,.12)',
+                color: 'var(--color-accent)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
                 label: '배치 우선순위',
                 text: ': ESI 고등급 구역 보호 → 취수원 → 어항 순',
               },
               {
-                color: 'var(--color-warning)',
-                bg: 'rgba(249,115,22,.05)',
-                bd: 'rgba(249,115,22,.12)',
+                color: 'var(--color-accent)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
                 label: '조석 변화',
                 text: ': 창조·낙조 전환 시 오일펜스 방향 재조정 필요',
               },
@@ -726,22 +699,12 @@ function OptimizationPanel() {
   return (
     <>
       {/* 다목적 최적화 개요 */}
-      <div
-        className="rounded-xl p-4 mb-3.5 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(168,85,247,.06),rgba(59,130,246,.04))',
-          border: '1px solid rgba(168,85,247,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-tertiary),var(--color-info))' }}
-        />
-        <div className="text-[13px] font-bold mb-2">
-          ⚙️ 다목적 최적화 문제 (Multi-Objective Optimization)
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
+        <div className="text-title-4 font-bold mb-2">
+          다목적 최적화 문제 (Multi-Objective Optimization)
         </div>
-        <div className="text-[11px] leading-[1.8] text-fg-sub">
-          오일펜스 배치 최적화는 <b className="text-color-tertiary">상충하는 복수 목적함수</b>를
+        <div className="text-label-2 leading-[1.8] text-fg-sub">
+          오일펜스 배치 최적화는 <b className="text-color-accent">상충하는 복수 목적함수</b>를
           동시에 만족해야 하는 전형적인 다목적 최적화 문제입니다. 차단 효율 최대화와 자원 사용
           최소화는 서로 트레이드오프 관계를 가지며,{' '}
           <b className="text-color-accent">파레토 최적(Pareto Optimal) 해집합</b>에서 의사결정자가
@@ -751,57 +714,57 @@ function OptimizationPanel() {
 
       {/* 목적함수 정의 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">📊 목적함수 및 제약조건 정의</div>
+        <div className="text-label-1 font-bold mb-3">📊 목적함수 및 제약조건 정의</div>
         <div className="grid grid-cols-2 gap-3 mb-3">
           <div
             className="rounded-lg p-3 bg-bg-base"
-            style={{ border: '1px solid rgba(34,197,94,.2)' }}
+            style={{ border: '1px solid rgba(6,182,212,.2)' }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-success">🎯 목적함수 F(x)</div>
+            <div className="text-label-2 font-bold mb-2 text-color-accent">🎯 목적함수 F(x)</div>
             <div
-              className="rounded-[5px] p-[9px] text-[10px] leading-[2.2] font-mono"
-              style={{ background: 'rgba(34,197,94,.04)' }}
+              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
+              style={{ background: 'rgba(6,182,212,.04)' }}
             >
-              <b className="text-color-success">최대화:</b>
+              <b className="text-color-accent">최대화:</b>
               <br />
               f₁(x) = Σ A<sub>blocked,i</sub> · w<sub>ESI,i</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(가중 차단면적)</span>
+              <span className="text-caption text-fg-disabled">(가중 차단면적)</span>
               <br />
               f₂(x) = T<sub>deadline</sub> − T<sub>deploy</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(여유시간)</span>
+              <span className="text-caption text-fg-disabled">(여유시간)</span>
               <br />
-              <b className="text-color-danger">최소화:</b>
+              <b className="text-color-info">최소화:</b>
               <br />
               f₃(x) = Σ L<sub>boom,j</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(총 오일펜스 사용량)</span>
+              <span className="text-caption text-fg-disabled">(총 오일펜스 사용량)</span>
               <br />
               f₄(x) = Σ D<sub>vessel,k</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(방제정 총 이동거리)</span>
+              <span className="text-caption text-fg-disabled">(방제정 총 이동거리)</span>
             </div>
           </div>
           <div
             className="rounded-lg p-3 bg-bg-base"
-            style={{ border: '1px solid rgba(239,68,68,.2)' }}
+            style={{ border: '1px solid rgba(59,130,246,.2)' }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-danger">🚫 제약조건 G(x)</div>
+            <div className="text-label-2 font-bold mb-2 text-color-caution">🚫 제약조건 G(x)</div>
             <div
-              className="rounded-[5px] p-[9px] text-[10px] leading-[2.2] font-mono"
-              style={{ background: 'rgba(239,68,68,.04)' }}
+              className="rounded-[5px] p-[9px] text-label-2 leading-[2.2] font-mono"
+              style={{ background: 'rgba(59,130,246,.04)' }}
             >
               g₁: U·sin(θ<sub>i</sub>) ≤ U<sub>c</sub> ∀i{' '}
-              <span className="text-[9px] text-fg-disabled">(임계유속)</span>
+              <span className="text-caption text-fg-disabled">(임계유속)</span>
               <br />
               g₂: Σ L<sub>j</sub> ≤ L<sub>max</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(자원 한계)</span>
+              <span className="text-caption text-fg-disabled">(자원 한계)</span>
               <br />
               g₃: T<sub>deploy,i</sub> ≤ T<sub>arrive,i</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(시간 제약)</span>
+              <span className="text-caption text-fg-disabled">(시간 제약)</span>
               <br />
               g₄: d(p<sub>i</sub>, shore) ≥ d<sub>min</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(연안 이격)</span>
+              <span className="text-caption text-fg-disabled">(연안 이격)</span>
               <br />
               g₅: h(p<sub>i</sub>) ≥ h<sub>min</sub>{' '}
-              <span className="text-[9px] text-fg-disabled">(수심 조건)</span>
+              <span className="text-caption text-fg-disabled">(수심 조건)</span>
             </div>
           </div>
         </div>
@@ -809,19 +772,19 @@ function OptimizationPanel() {
         {/* ESI 가중치 */}
         <div
           className="rounded-lg p-3 bg-bg-base"
-          style={{ border: '1px solid rgba(234,179,8,.2)' }}
+          style={{ border: '1px solid rgba(6,182,212,.2)' }}
         >
-          <div className="text-[10px] font-bold mb-2 text-color-caution">
+          <div className="text-label-2 font-bold mb-2 text-color-caution">
             🏖️ ESI 가중치 w<sub>ESI</sub> 설계
           </div>
-          <div className="grid grid-cols-5 gap-[5px] text-[9px] text-fg-sub">
+          <div className="grid grid-cols-5 gap-[5px] text-caption text-fg-sub">
             {[
               {
                 grade: 'ESI 1~2',
                 desc: '노출암반',
                 w: 'w = 0.2',
-                color: 'var(--color-success)',
-                bg: 'rgba(34,197,94,.06)',
+                color: 'var(--color-accent)',
+                bg: 'rgba(6,182,212,.06)',
               },
               {
                 grade: 'ESI 3~4',
@@ -835,22 +798,22 @@ function OptimizationPanel() {
                 desc: '자갈·조약',
                 w: 'w = 0.6',
                 color: 'var(--color-caution)',
-                bg: 'rgba(234,179,8,.06)',
+                bg: 'rgba(6,182,212,.06)',
               },
               {
                 grade: 'ESI 7~8',
                 desc: '갯벌·조간대',
                 w: 'w = 0.85',
-                color: 'var(--color-warning)',
-                bg: 'rgba(249,115,22,.06)',
+                color: 'var(--color-accent)',
+                bg: 'rgba(6,182,212,.06)',
               },
               {
                 grade: 'ESI 9~10',
                 desc: '맹그로브·습지',
                 w: 'w = 1.0',
-                color: 'var(--color-danger)',
-                bg: 'rgba(239,68,68,.08)',
-                bd: 'rgba(239,68,68,.2)',
+                color: 'var(--color-info)',
+                bg: 'rgba(59,130,246,.08)',
+                bd: 'rgba(59,130,246,.2)',
               },
             ].map((esi, i) => (
               <div
@@ -871,18 +834,18 @@ function OptimizationPanel() {
 
       {/* NSGA-II 알고리즘 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3 text-color-tertiary">
+        <div className="text-label-1 font-bold mb-3 text-color-accent">
           🧬 NSGA-II (Non-dominated Sorting Genetic Algorithm II)
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <div className="text-[10px] leading-[1.8] mb-2 text-fg-sub">
+            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
               WING의 오일펜스 배치 최적화는 다목적 유전알고리즘{' '}
-              <b className="text-color-tertiary">NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로
+              <b className="text-color-accent">NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로
               사용합니다. 파레토 전면(Pareto Front)을 탐색하여 차단 효율과 자원 효율의 최적 해집합을
               제공합니다.
             </div>
-            <div className="flex flex-col gap-1 text-[9px] text-fg-sub">
+            <div className="flex flex-col gap-1 text-caption text-fg-sub">
               {[
                 '염색체 구조 : [배치지점 좌표, 방향각θ, 길이L, 형태, 배치순서]',
                 '집단 크기 : 100~200개체 · 세대수 50~200',
@@ -894,21 +857,21 @@ function OptimizationPanel() {
                   key={i}
                   className="px-2 py-[5px] rounded text-fg-sub"
                   style={{
-                    background: 'rgba(168,85,247,.05)',
-                    border: '1px solid rgba(168,85,247,.12)',
+                    background: 'rgba(6,182,212,.05)',
+                    border: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <b className="text-color-tertiary">{item.split(' : ')[0]}</b> :{' '}
+                  <b className="text-color-accent">{item.split(' : ')[0]}</b> :{' '}
                   {item.split(' : ')[1]}
                 </div>
               ))}
             </div>
           </div>
           <div>
-            <div className="text-[10px] font-bold mb-[7px] text-fg-sub">
+            <div className="text-label-2 font-bold mb-[7px] text-fg-sub">
               NSGA-II 5단계 진화 루프
             </div>
-            <div className="flex flex-col gap-[5px] text-[9px] text-fg-sub">
+            <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
               {[
                 {
                   step: '①',
@@ -940,13 +903,11 @@ function OptimizationPanel() {
                   key={i}
                   className="flex gap-2 px-[9px] py-1.5 rounded-[5px]"
                   style={{
-                    background: i === 4 ? 'rgba(168,85,247,.05)' : 'rgba(168,85,247,.04)',
-                    border: i === 4 ? '1px solid rgba(168,85,247,.12)' : undefined,
+                    background: i === 4 ? 'rgba(6,182,212,.05)' : 'rgba(6,182,212,.04)',
+                    border: i === 4 ? '1px solid rgba(6,182,212,.12)' : undefined,
                   }}
                 >
-                  <span className="min-w-[20px] font-extrabold text-color-tertiary">
-                    {item.step}
-                  </span>
+                  <span className="min-w-[20px] font-extrabold text-color-accent">{item.step}</span>
                   <div className="leading-[1.6] text-fg-sub">
                     <b>{item.title}</b> : {item.desc}
                   </div>
@@ -959,9 +920,9 @@ function OptimizationPanel() {
 
       {/* 보조 알고리즘 비교 */}
       <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
-        <div className="text-[11px] font-bold mb-2.5">🔬 보조 최적화 알고리즘 비교 적용</div>
+        <div className="text-label-2 font-bold mb-2.5">🔬 보조 최적화 알고리즘 비교 적용</div>
         <div className="overflow-x-auto">
-          <table className="w-full text-[10px] border-collapse">
+          <table className="w-full text-label-2 border-collapse">
             <thead>
               <tr
                 style={{
@@ -984,7 +945,7 @@ function OptimizationPanel() {
               {[
                 {
                   name: 'NSGA-II',
-                  color: 'var(--color-tertiary)',
+                  color: 'var(--color-accent)',
                   type: '다목적 GA',
                   pros: '파레토 전면 탐색\n다양성 유지 우수',
                   cons: '계산비용 높음\n수렴 느림',
@@ -993,7 +954,7 @@ function OptimizationPanel() {
                 },
                 {
                   name: 'PSO',
-                  color: 'var(--color-warning)',
+                  color: 'var(--color-accent)',
                   type: '입자군집',
                   pros: '빠른 수렴\n구현 단순',
                   cons: '조기수렴\n다목적 취약',
@@ -1011,12 +972,12 @@ function OptimizationPanel() {
                 },
                 {
                   name: 'Greedy+휴리스틱',
-                  color: 'var(--color-success)',
+                  color: 'var(--color-accent)',
                   type: '결정론적',
                   pros: '즉시 결과\n해석 용이',
                   cons: '전역최적 미보장',
                   wing: '실시간 초기 제안',
-                  wingColor: 'var(--color-success)',
+                  wingColor: 'var(--color-accent)',
                 },
               ].map((row, i) => (
                 <tr
@@ -1055,49 +1016,49 @@ function FluidDynamicsPanel() {
     <>
       {/* 유동 수치 모델 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">🌊 오일펜스 주변 유동 수치 모델</div>
+        <div className="text-label-1 font-bold mb-3">🌊 오일펜스 주변 유동 수치 모델</div>
         <div className="grid grid-cols-2 gap-3.5">
           <div>
-            <div className="text-[11px] font-bold mb-2 text-color-info">① 오일펜스 항력 모델</div>
-            <div className="text-[10px] leading-[1.8] mb-2 text-fg-sub">
+            <div className="text-label-2 font-bold mb-2 text-color-info">① 오일펜스 항력 모델</div>
+            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
               오일펜스에 작용하는 항력은 조류속도의 제곱에 비례합니다. 오일펜스 구조
               변형(catenary형태)을 고려한 동적 항력 계산.
             </div>
             <div
-              className="rounded-md p-2.5 text-[10px] leading-[2.1] bg-bg-base font-mono"
+              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
               style={{ border: '1px solid rgba(59,130,246,.2)' }}
             >
               F<sub>D</sub> = ½ · ρ · C<sub>D</sub> · A · U<sub>n</sub>²<br />T = F<sub>D</sub> · L
               / (2·sin(α))
               <br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 C<sub>D</sub>: 항력계수(≈1.2), A: 수중 투영면적
               </span>
               <br />
-              <span className="text-[9px] text-fg-disabled">T: 연결부 장력, α: 체인각도</span>
+              <span className="text-caption text-fg-disabled">T: 연결부 장력, α: 체인각도</span>
             </div>
           </div>
           <div>
-            <div className="text-[11px] font-bold mb-2 text-color-warning">
+            <div className="text-label-2 font-bold mb-2 text-color-accent">
               ② 기름 통과(Splash-over) 조건
             </div>
-            <div className="text-[10px] leading-[1.8] mb-2 text-fg-sub">
+            <div className="text-label-2 leading-[1.8] mb-2 text-fg-sub">
               조류 유속이 임계값을 초과하면 기름이 파도를 타고 오일펜스를 넘어가는 Splash-over가
               발생합니다.
             </div>
             <div
-              className="rounded-md p-2.5 text-[10px] leading-[2.1] bg-bg-base font-mono"
-              style={{ border: '1px solid rgba(249,115,22,.2)' }}
+              className="rounded-md p-2.5 text-label-2 leading-[2.1] bg-bg-base font-mono"
+              style={{ border: '1px solid rgba(6,182,212,.2)' }}
             >
               Fr = U<sub>n</sub> / √(g·Δρ/ρ·h)
               <br />
               Splash-over: Fr &gt; 0.5~0.6
               <br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 Fr: 수정 Froude수, h: 오일펜스 수중깊이
               </span>
               <br />
-              <span className="text-[9px] text-fg-disabled">Δρ/ρ: 기름-해수 밀도비 (~0.15)</span>
+              <span className="text-caption text-fg-disabled">Δρ/ρ: 기름-해수 밀도비 (~0.15)</span>
             </div>
           </div>
         </div>
@@ -1105,48 +1066,48 @@ function FluidDynamicsPanel() {
 
       {/* Catenary 변형 모델 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">🔗 오일펜스 현수선(Catenary) 변형 모델</div>
+        <div className="text-label-1 font-bold mb-3">🔗 오일펜스 현수선(Catenary) 변형 모델</div>
         <div className="grid grid-cols-2 gap-3.5">
-          <div className="text-[10px] leading-[1.8] text-fg-sub">
+          <div className="text-label-2 leading-[1.8] text-fg-sub">
             조류와 바람에 의해 오일펜스는 현수선(Catenary) 형태로 변형됩니다. 실제 차단 길이가 설계
             길이보다 짧아지며, 최적화 알고리즘에서 <b>변형 후 유효 차단 길이</b> L<sub>eff</sub>를
             계산합니다.
             <div className="mt-2 rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
               y(x) = a·cosh(x/a) − a<br />L<sub>arc</sub> = 2a·sinh(L<sub>span</sub>/(2a))
               <br />L<sub>eff</sub> = L<sub>span</sub> · cos(φ<sub>max</sub>)<br />
-              <span className="text-[9px] text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 a: catenary 파라미터, φ: 최대 편향각
               </span>
             </div>
           </div>
-          <div className="flex flex-col gap-1.5 text-[9px] text-fg-sub">
-            <div className="text-[10px] font-bold mb-1 text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-caption text-fg-sub">
+            <div className="text-label-2 font-bold mb-1 text-fg-sub">
               변형 단계별 유효 차단 길이 보정
             </div>
             {[
               {
                 cond: 'U < 0.3 knot',
                 result: 'L_eff ≈ L (직선 유지)',
-                bg: 'rgba(34,197,94,.05)',
-                bd: 'rgba(34,197,94,.12)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
               },
               {
                 cond: '0.3~0.7 knot',
                 result: 'L_eff = 0.8~0.95 L (경미 변형)',
-                bg: 'rgba(234,179,8,.05)',
-                bd: 'rgba(234,179,8,.12)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
               },
               {
                 cond: '0.7~1.0 knot',
                 result: 'L_eff = 0.5~0.8 L (Catenary 현저)',
-                bg: 'rgba(249,115,22,.05)',
-                bd: 'rgba(249,115,22,.12)',
+                bg: 'rgba(6,182,212,.05)',
+                bd: 'rgba(6,182,212,.12)',
               },
               {
                 cond: 'U > 1.0 knot',
                 result: '기름 통과 위험 · 배치 재계산',
-                bg: 'rgba(239,68,68,.05)',
-                bd: 'rgba(239,68,68,.12)',
+                bg: 'rgba(59,130,246,.05)',
+                bd: 'rgba(59,130,246,.12)',
                 danger: true,
               },
             ].map((item, i) => (
@@ -1156,7 +1117,7 @@ function FluidDynamicsPanel() {
                 style={{
                   background: item.bg,
                   border: `1px solid ${item.bd}`,
-                  color: item.danger ? 'var(--color-danger)' : 'var(--fg-sub)',
+                  color: item.danger ? 'var(--color-info)' : 'var(--fg-sub)',
                 }}
               >
                 {item.cond} → {item.result}
@@ -1168,8 +1129,8 @@ function FluidDynamicsPanel() {
 
       {/* 유막 포집 모델 */}
       <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
-        <div className="text-[11px] font-bold mb-2.5">🛢️ 오일펜스 내 유막 포집 동역학</div>
-        <div className="grid grid-cols-2 gap-3 text-[10px] text-fg-sub">
+        <div className="text-label-2 font-bold mb-2.5">🛢️ 오일펜스 내 유막 포집 동역학</div>
+        <div className="grid grid-cols-2 gap-3 text-label-2 text-fg-sub">
           <div>
             <div className="font-bold mb-1.5 text-color-accent">포집 기름 체적 변화율</div>
             <div className="rounded-[5px] p-[9px] leading-[2] bg-bg-base font-mono">
@@ -1180,8 +1141,8 @@ function FluidDynamicsPanel() {
             </div>
           </div>
           <div>
-            <div className="font-bold mb-1.5 text-color-warning">최적 회수 타이밍</div>
-            <div className="text-[10px] leading-[1.7] text-fg-sub">
+            <div className="font-bold mb-1.5 text-color-accent">최적 회수 타이밍</div>
+            <div className="text-label-2 leading-[1.7] text-fg-sub">
               포집 기름 체적이 오일펜스 저장 용량의 70~80%에 도달하면 Skimmer 회수 작업을
               개시합니다. 이를 초과하면 오일 overflow 발생. WING이 실시간 체적 모니터링 후 회수 알람
               발령.
@@ -1198,11 +1159,11 @@ function FieldApplicationPanel() {
   const steps = [
     {
       num: 1,
-      color: 'var(--color-warning)',
-      bg: 'rgba(249,115,22,.05)',
-      bd: 'rgba(249,115,22,.15)',
-      numBg: 'rgba(249,115,22,.15)',
-      numBd: 'rgba(249,115,22,.3)',
+      color: 'var(--color-accent)',
+      bg: 'rgba(6,182,212,.05)',
+      bd: 'rgba(6,182,212,.15)',
+      numBg: 'rgba(6,182,212,.15)',
+      numBd: 'rgba(6,182,212,.3)',
       title: '확산예측 결과 분석 — 위협 구역 및 도달시간 산출',
       desc: 'KOSPS·POSEIDON·OpenDrift 앙상블 예측 결과에서 유출유 확산 경계선(Pollution Boundary)과 각 ESI 구역별 도달 예상시간(T_arrive)을 산출합니다. 신뢰도 70% 이상 예측 경계를 기준으로 차단 전략 영역을 설정합니다.',
     },
@@ -1219,30 +1180,30 @@ function FieldApplicationPanel() {
     {
       num: 3,
       color: 'var(--color-caution)',
-      bg: 'rgba(234,179,8,.05)',
-      bd: 'rgba(234,179,8,.15)',
-      numBg: 'rgba(234,179,8,.15)',
-      numBd: 'rgba(234,179,8,.3)',
+      bg: 'rgba(6,182,212,.05)',
+      bd: 'rgba(6,182,212,.15)',
+      numBg: 'rgba(6,182,212,.15)',
+      numBd: 'rgba(6,182,212,.3)',
       title: '후보 차단선 격자 탐색 — 배치 가능지점 생성',
       desc: '확산 예측 경계를 따라 500m 간격 격자로 후보 배치지점을 생성합니다. 각 지점에서 조류 조건·수심·해안선 이격·방제정 접근 가능성을 동시 검토합니다. ESI 고등급 구역 전방 2km 이내 지점에 우선 가중치를 부여합니다.',
     },
     {
       num: 4,
-      color: 'var(--color-tertiary)',
-      bg: 'rgba(168,85,247,.05)',
-      bd: 'rgba(168,85,247,.15)',
-      numBg: 'rgba(168,85,247,.15)',
-      numBd: 'rgba(168,85,247,.3)',
+      color: 'var(--color-accent)',
+      bg: 'rgba(6,182,212,.05)',
+      bd: 'rgba(6,182,212,.15)',
+      numBg: 'rgba(6,182,212,.15)',
+      numBd: 'rgba(6,182,212,.3)',
       title: 'NSGA-II 최적화 실행 — 파레토 최적 배치안 산출',
       desc: '후보 배치지점·방향각·형태 조합을 염색체로 인코딩하여 NSGA-II 다목적 유전알고리즘을 실행합니다. 수렴 후 파레토 전면에서 3~5개 추천 배치안을 제시하며, 의사결정자가 차단 효율과 자원 사용량의 트레이드오프를 보고 선택합니다.',
     },
     {
       num: 5,
-      color: 'var(--color-success)',
-      bg: 'rgba(34,197,94,.05)',
-      bd: 'rgba(34,197,94,.15)',
-      numBg: 'rgba(34,197,94,.15)',
-      numBd: 'rgba(34,197,94,.3)',
+      color: 'var(--color-accent)',
+      bg: 'rgba(6,182,212,.05)',
+      bd: 'rgba(6,182,212,.15)',
+      numBg: 'rgba(6,182,212,.15)',
+      numBd: 'rgba(6,182,212,.3)',
       title: '실시간 재최적화 — 조석 변환·조류 변화 대응',
       desc: '창조→낙조 전환 시(약 6시간 주기) 조류 방향 역전에 따른 오일펜스 재배치 알람을 발령합니다. 확산 예측이 갱신될 때마다 배치 최적화를 자동 재실행하여 방제대응 체계를 동적으로 업데이트합니다.',
     },
@@ -1252,7 +1213,7 @@ function FieldApplicationPanel() {
     <>
       {/* 배치 5단계 절차 */}
       <div className="rounded-md p-4 mb-3.5 bg-bg-card border border-stroke">
-        <div className="text-xs font-bold mb-3">🗺️ WING 오일펜스 배치 의사결정 5단계</div>
+        <div className="text-label-1 font-bold mb-3">🗺️ WING 오일펜스 배치 의사결정 5단계</div>
         <div className="flex flex-col gap-2">
           {steps.map((step) => (
             <div
@@ -1270,7 +1231,7 @@ function FieldApplicationPanel() {
               >
                 {step.num}
               </div>
-              <div className="text-[10px] text-fg-sub">
+              <div className="text-label-2 text-fg-sub">
                 <div className="font-bold mb-1">{step.title}</div>
                 <div className="leading-[1.7] text-fg-sub">{step.desc}</div>
               </div>
@@ -1281,8 +1242,8 @@ function FieldApplicationPanel() {
 
       {/* 해역별 적용 특성 */}
       <div className="rounded-md p-3.5 bg-bg-card border border-stroke">
-        <div className="text-[11px] font-bold mb-2.5">📍 해역별 적용 특성 및 전략</div>
-        <div className="grid grid-cols-3 gap-2.5 text-[9px] text-fg-sub">
+        <div className="text-label-2 font-bold mb-2.5">📍 해역별 적용 특성 및 전략</div>
+        <div className="grid grid-cols-3 gap-2.5 text-caption text-fg-sub">
           {[
             {
               icon: '🌊',
@@ -1295,17 +1256,17 @@ function FieldApplicationPanel() {
             {
               icon: '🌿',
               title: '남해 (다도해)',
-              color: 'var(--color-success)',
-              bg: 'rgba(34,197,94,.05)',
-              bd: 'rgba(34,197,94,.12)',
+              color: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.05)',
+              bd: 'rgba(6,182,212,.12)',
               desc: '복잡한 해안선·섬. 조류 1~2 knot. V형·U형 복합 배치. 좁은 수로 통제 우선. ESI 고등급 갯벌 보호.',
             },
             {
               icon: '🏔️',
               title: '동해 (심해형)',
-              color: 'var(--color-warning)',
-              bg: 'rgba(249,115,22,.05)',
-              bd: 'rgba(249,115,22,.12)',
+              color: 'var(--color-accent)',
+              bg: 'rgba(6,182,212,.05)',
+              bd: 'rgba(6,182,212,.12)',
               desc: '조차 소(0.3m), 너울·파고 높음. 조류 0.5~1 knot. V형 집중. 고파랑 시 배치 제한. 수온약층 고려.',
             },
           ].map((area, i) => (
@@ -1331,9 +1292,9 @@ function ReferencesPanel() {
   const categories = [
     {
       title: '⚙️ 최적화 알고리즘',
-      color: 'var(--color-tertiary)',
-      bg: 'rgba(168,85,247,.1)',
-      bd: 'rgba(168,85,247,.25)',
+      color: 'var(--color-accent)',
+      bg: 'rgba(6,182,212,.1)',
+      bd: 'rgba(6,182,212,.25)',
       refs: [
         {
           title: 'A Fast and Elitist Multiobjective Genetic Algorithm: NSGA-II',
@@ -1403,9 +1364,9 @@ function ReferencesPanel() {
     },
     {
       title: '🗺️ 방제 운용 기준',
-      color: 'var(--color-success)',
-      bg: 'rgba(34,197,94,.1)',
-      bd: 'rgba(34,197,94,.25)',
+      color: 'var(--color-accent)',
+      bg: 'rgba(6,182,212,.1)',
+      bd: 'rgba(6,182,212,.25)',
       refs: [
         {
           title: '기름오염방제시 오일펜스 사용지침 (ITOPF 방제기술정보문서 3)',
@@ -1430,13 +1391,13 @@ function ReferencesPanel() {
 
   return (
     <>
-      <div className="text-xs font-bold mb-1">📚 오일펜스 배치 최적화 이론 근거 문헌</div>
-      <div className="text-[10px] mb-3.5 text-fg-disabled">총 12편 · 4개 카테고리</div>
+      <div className="text-label-1 font-bold mb-1">📚 오일펜스 배치 최적화 이론 근거 문헌</div>
+      <div className="text-label-2 mb-3.5 text-fg-disabled">총 12편 · 4개 카테고리</div>
 
       {categories.map((cat, ci) => (
         <div key={ci} className="mb-4">
           <div
-            className="text-[10px] font-bold mb-[7px] flex items-center gap-1.5"
+            className="text-label-2 font-bold mb-[7px] flex items-center gap-1.5"
             style={{ color: cat.color }}
           >
             <span
@@ -1446,7 +1407,7 @@ function ReferencesPanel() {
               {cat.title}
             </span>
           </div>
-          <div className="flex flex-col gap-[5px] text-[9px] text-fg-sub">
+          <div className="flex flex-col gap-[5px] text-caption text-fg-sub">
             {cat.refs.map((ref, ri) => (
               <div
                 key={ri}
@@ -1455,11 +1416,10 @@ function ReferencesPanel() {
                   gridTemplateColumns: '24px 1fr',
                   background: 'var(--bg-card)',
                   border: ref.highlight ? `1px solid ${cat.bd}` : '1px solid var(--stroke-default)',
-                  borderLeft: ref.highlight ? `3px solid ${cat.color}` : undefined,
                 }}
               >
                 <div
-                  className="w-[22px] h-[22px] rounded flex items-center justify-center text-[10px] flex-shrink-0"
+                  className="w-[22px] h-[22px] rounded flex items-center justify-center text-label-2 flex-shrink-0"
                   style={{
                     background: ref.highlight ? `${cat.bg}` : `${cat.bg.replace('.1', '.12')}`,
                     fontWeight: ref.highlight ? 700 : undefined,
diff --git a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
index 1316037..56b5d32 100755
--- a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
@@ -71,39 +71,28 @@ ${styles}
         {/* 헤더 */}
         <div className="flex items-center justify-between mb-5">
           <div className="flex items-center gap-3">
-            <div
-              className="w-[42px] h-[42px] rounded-[10px] flex items-center justify-center text-xl"
-              style={{
-                background: 'linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.15))',
-                border: '1px solid rgba(6,182,212,.3)',
-              }}
-            >
+            <div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
               📐
             </div>
             <div>
-              <div className="text-base font-bold">유출유 확산 모델 이론 및 검증</div>
+              <div className="text-title-2 font-bold text-fg">유출유 확산 모델 이론 및 검증</div>
               <div className="flex items-center gap-2.5 mt-1 flex-wrap">
-                <span className="text-[11px] font-semibold">
-                  🔷 <span className="text-cyan-500">KOSPS</span>
-                </span>
-                <span className="text-[11px] font-semibold">
-                  🔴 <span className="text-red-500">POSEIDON</span>
-                </span>
-                <span className="text-[11px] font-semibold">
-                  🔵 <span className="text-blue-500">OpenDrift</span>
-                </span>
-                <span className="text-[11px] font-semibold">
-                  ⚡ <span className="text-[#a855f7]">앙상블</span>
-                </span>
-                <span className="text-[10px] text-fg-disabled">라그랑지안 입자추적 이론 기반</span>
+                <span className="text-label-2 font-medium text-fg-sub">🔷 KOSPS</span>
+                <span className="text-label-2 font-medium text-fg-sub">🔴 POSEIDON</span>
+                <span className="text-label-2 font-medium text-fg-sub">🔵 OpenDrift</span>
+                <span className="text-label-2 font-medium text-fg-sub">⚡ 앙상블</span>
+                <span className="text-label-2 text-fg-disabled">라그랑지안 입자추적 이론 기반</span>
               </div>
             </div>
           </div>
           <button
             onClick={handleExportPDF}
             data-html2pdf-ignore
-            className="px-3.5 py-1.5 rounded-md text-[11px] font-semibold cursor-pointer text-color-info"
-            style={{ border: '1px solid rgba(59,130,246,.3)', background: 'rgba(59,130,246,.08)' }}
+            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
+            style={{
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
+            }}
           >
             📤 PDF 내보내기
           </button>
@@ -115,18 +104,13 @@ ${styles}
             <button
               key={tab.id}
               onClick={() => setActivePanel(tab.id)}
-              className="flex-1 py-2 px-1 text-[12px] font-semibold rounded-md transition-all duration-150 cursor-pointer"
-              style={{
-                border:
-                  activePanel === tab.id
-                    ? '1px solid var(--color-accent)'
-                    : '1px solid var(--stroke-default)',
-                color: activePanel === tab.id ? 'var(--color-accent)' : 'var(--fg-disabled)',
-                background: activePanel === tab.id ? 'rgba(6,182,212,.08)' : 'var(--bg-card)',
-              }}
+              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
+                activePanel === tab.id
+                  ? 'border-stroke-light bg-bg-elevated text-fg'
+                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
+              }`}
             >
-              {tab.icon}{' '}
-              {tab.nameColor ? <span style={{ color: tab.nameColor }}>{tab.name}</span> : tab.name}
+              {tab.icon} {tab.name}
             </button>
           ))}
         </div>
@@ -150,14 +134,14 @@ ${styles}
 const card = 'rounded-[10px] p-[14px] mb-4';
 const cardBg = 'bg-bg-card border border-stroke';
 const labelStyle = (color: string) =>
-  ({ fontSize: '14px', fontWeight: 700, color, marginBottom: '10px' }) as const;
-const bodyText = 'text-xs text-fg-sub leading-[1.8]';
-const codeBox = 'bg-bg-base rounded-sm p-[10px] font-mono text-xs leading-loose';
+  ({ fontSize: 'var(--font-size-title-3)', fontWeight: 700, color, marginBottom: '10px' }) as const;
+const bodyText = 'text-label-1 text-fg-sub leading-[1.8]';
+const codeBox = 'bg-bg-base rounded-sm p-[10px] font-mono text-label-1 leading-loose';
 const tag = (color: string) =>
   ({
     padding: '3px 8px',
     borderRadius: '4px',
-    fontSize: '11px',
+    fontSize: 'var(--font-size-label-2)',
     color,
     background: `${color}14`,
     border: `1px solid ${color}30`,
@@ -167,220 +151,74 @@ const tag = (color: string) =>
 function SystemOverviewPanel() {
   return (
     <div>
-      {/* 정의 및 목적 배너 */}
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.06),rgba(59,130,246,.04))',
-          border: '1px solid rgba(6,182,212,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{
-            background:
-              'linear-gradient(90deg,var(--color-accent),var(--color-info),var(--color-warning))',
-          }}
-        />
-        <div className="grid grid-cols-2 gap-5">
+      {/* 시스템 개요 */}
+      <div className={`${card} ${cardBg}`}>
+        {/* 1행: 유출유 확산 모델이란? + 활용 목적 */}
+        <div className="grid grid-cols-2 gap-4 mb-4">
           <div>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div
-                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base"
-                style={{ background: 'rgba(6,182,212,.15)' }}
-              >
-                📋
-              </div>
-              <span className="text-sm font-bold">유출유 확산 모델이란?</span>
-            </div>
-            <div className="text-xs text-fg-sub leading-[1.8] text-[12px]">
-              해상에서 유출된 <b className="text-color-warning">원유 및 유류</b>가 해수면 위에서
-              이동·확산·풍화되는 과정을 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.{' '}
-              <b className="text-color-accent">라그랑지안 입자추적법</b>을 기반으로 해류·바람·조류의
-              복합 영향을 시뮬레이션합니다.
+            <div className="text-title-3 font-bold text-fg mb-2">📋 유출유 확산 모델이란?</div>
+            <div className="text-label-1 text-fg-sub leading-[1.8]">
+              해상에서 유출된 <b>원유 및 유류</b>가 해수면 위에서 이동·확산·풍화되는 과정을
+              물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.{' '}
+              <b>라그랑지안 입자추적법</b>을 기반으로 해류·바람·조류의 복합 영향을 시뮬레이션합니다.
             </div>
           </div>
           <div>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div
-                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base"
-                style={{ background: 'rgba(59,130,246,.15)' }}
-              >
-                🎯
-              </div>
-              <span className="text-sm font-bold">활용 목적</span>
-            </div>
-            <div className="flex flex-col gap-1.5 text-[12px] text-fg-sub">
-              <div
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md"
-                style={{
-                  background: 'rgba(239,68,68,.04)',
-                  border: '1px solid rgba(239,68,68,.12)',
-                }}
-              >
-                <span className="text-color-danger font-bold">①</span> 유출 사고 시{' '}
+            <div className="text-title-3 font-bold text-fg mb-2">🎯 활용 목적</div>
+            <div className="flex flex-col gap-1.5 text-label-1 text-fg-sub">
+              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
+                <span className="text-fg font-bold">①</span> 유출 사고 시{' '}
                 <b>오염 확산 범위 신속 예측</b>
               </div>
-              <div
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md"
-                style={{
-                  background: 'rgba(249,115,22,.04)',
-                  border: '1px solid rgba(249,115,22,.12)',
-                }}
-              >
-                <span className="text-color-warning font-bold">②</span> <b>방제 자원 배치</b> 및
-                오일펜스 전략 수립
+              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
+                <span className="text-fg font-bold">②</span> <b>방제 자원 배치</b> 및 오일펜스 전략
+                수립
               </div>
-              <div
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md"
-                style={{
-                  background: 'rgba(34,197,94,.04)',
-                  border: '1px solid rgba(34,197,94,.12)',
-                }}
-              >
-                <span className="text-color-success font-bold">③</span> 해안선 도달 예측 및{' '}
-                <b>피해 최소화</b> 대응
+              <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-bg-base">
+                <span className="text-fg font-bold">③</span> 해안선 도달 예측 및 <b>피해 최소화</b>{' '}
+                대응
               </div>
             </div>
           </div>
         </div>
-      </div>
-
-      {/* 작동 원리 3-Step */}
-      <div className="grid grid-cols-3 gap-3 mb-4">
-        {/* Step 1 */}
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderTop: '3px solid var(--color-warning)', position: 'relative' }}
-        >
-          <div
-            className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold font-mono"
-            style={{ background: 'rgba(249,115,22,.15)', color: 'var(--color-warning)' }}
-          >
-            1
-          </div>
-          <div style={labelStyle('var(--color-warning)')}>🛢️ 유류 물성 반영</div>
-          <div className="text-[11px] mb-2.5 text-fg-sub leading-[1.7]">
-            유류 종류별 <b>물리·화학적 특성</b>을 모델에 반영하여 실제 거동을 재현합니다.
-          </div>
-          <div className="flex flex-wrap gap-1">
-            {[
-              { label: '비중(API)', color: 'var(--color-warning)' },
-              { label: '점도', color: 'var(--color-danger)' },
-              { label: '증발률', color: 'var(--color-tertiary)' },
-              { label: '용해도', color: 'var(--color-info)' },
-              { label: '인화점', color: 'var(--color-caution)' },
-              { label: '유화특성', color: 'var(--color-success)' },
-            ].map((t) => (
-              <span
-                key={t.label}
-                style={{
-                  padding: '3px 8px',
-                  borderRadius: '4px',
-                  background: `${t.color}14`,
-                  border: `1px solid ${t.color}26`,
-                  fontSize: '10px',
-                  color: t.color,
-                }}
-              >
-                {t.label}
-              </span>
-            ))}
-          </div>
-        </div>
-        {/* Step 2 */}
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderTop: '3px solid var(--color-accent)', position: 'relative' }}
-        >
-          <div
-            className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold font-mono"
-            style={{ background: 'rgba(6,182,212,.15)', color: 'var(--color-accent)' }}
-          >
-            2
-          </div>
-          <div style={labelStyle('var(--color-accent)')}>🌊 해양환경 데이터 수집</div>
-          <div className="text-[11px] mb-2.5 text-fg-sub leading-[1.7]">
-            <b>실시간 해양·기상 관측 데이터</b>를 수집하여 모델 강제력으로 입력합니다.
-          </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(6,182,212,.05)',
-                border: '1px solid rgba(6,182,212,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              🌬️ 표층 바람 (KMA·ECMWF)
+        {/* 2행: 해양환경 데이터 수집 + 유류 물성 반영 + 수치 시뮬레이션 */}
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <div className="text-title-3 font-bold text-fg mb-2">🌊 해양환경 데이터 수집</div>
+            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
+              <b>실시간 해양·기상 관측 데이터</b>를 수집하여 모델 강제력으로 입력합니다.
             </div>
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(59,130,246,.05)',
-                border: '1px solid rgba(59,130,246,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              🌊 해류·조류 (KHOA 조위표)
-            </div>
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(34,197,94,.05)',
-                border: '1px solid rgba(34,197,94,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              🌡️ 수온·파고 (NIFS 수치예보)
+            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
+              <div className="px-2 py-1 rounded bg-bg-base">🌬️ 표층 바람 (KMA·ECMWF)</div>
+              <div className="px-2 py-1 rounded bg-bg-base">🌊 해류·조류 (KHOA 조위표)</div>
+              <div className="px-2 py-1 rounded bg-bg-base">🌡️ 수온·파고 (NIFS 수치예보)</div>
             </div>
           </div>
-        </div>
-        {/* Step 3 */}
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderTop: '3px solid var(--color-success)', position: 'relative' }}
-        >
-          <div
-            className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold font-mono"
-            style={{ background: 'rgba(34,197,94,.15)', color: 'var(--color-success)' }}
-          >
-            3
-          </div>
-          <div style={labelStyle('var(--color-success)')}>🧮 수치 시뮬레이션</div>
-          <div className="text-[11px] mb-2.5 text-fg-sub leading-[1.7]">
-            <b>라그랑지안 입자 시뮬레이션</b>으로 유출유 이동·확산·풍화를 동시 계산합니다.
-          </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(34,197,94,.05)',
-                border: '1px solid rgba(34,197,94,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              📍 수만~수십만 가상 입자 추적
+          <div>
+            <div className="text-title-3 font-bold text-fg mb-2">🧮 수치 시뮬레이션</div>
+            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
+              <b>라그랑지안 입자 시뮬레이션</b>으로 유출유 이동·확산·풍화를 동시 계산합니다.
             </div>
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(34,197,94,.05)',
-                border: '1px solid rgba(34,197,94,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              ⏱️ 1시간 스텝 반복 계산
+            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
+              <div className="px-2 py-1 rounded bg-bg-base">📍 수만~수십만 가상 입자 추적</div>
+              <div className="px-2 py-1 rounded bg-bg-base">⏱️ 1시간 스텝 반복 계산</div>
+              <div className="px-2 py-1 rounded bg-bg-base">🗺️ 농도 분포·해안 도달 예측</div>
             </div>
-            <div
-              style={{
-                padding: '4px 8px',
-                background: 'rgba(34,197,94,.05)',
-                border: '1px solid rgba(34,197,94,.12)',
-                borderRadius: '4px',
-              }}
-            >
-              🗺️ 농도 분포·해안 도달 예측
+          </div>
+          <div>
+            <div className="text-title-3 font-bold text-fg mb-2">🛢️ 유류 물성 반영</div>
+            <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.7]">
+              유류 종류별 <b>물리·화학적 특성</b>을 모델에 반영하여 실제 거동을 재현합니다.
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {['비중(API)', '점도', '증발률', '용해도', '인화점', '유화특성'].map((label) => (
+                <span
+                  key={label}
+                  className="px-2 py-0.5 rounded text-label-2 text-fg-sub bg-bg-base"
+                >
+                  {label}
+                </span>
+              ))}
             </div>
           </div>
         </div>
@@ -390,14 +228,14 @@ function SystemOverviewPanel() {
       <div className={`${card} ${cardBg}`}>
         <div className="flex items-center justify-between mb-3.5">
           <div style={labelStyle('var(--fg-default)')}>🤖 WING 탑재 유출유 확산 모델 비교</div>
-          <span className="text-[10px] text-fg-disabled">3종 앙상블 운용 · 불확실성 정량화</span>
+          <span className="text-label-2 text-fg-disabled">3종 앙상블 운용 · 불확실성 정량화</span>
         </div>
         <div className="grid grid-cols-3 gap-2.5 mb-3.5">
           {[
             {
               name: 'KOSPS',
               sub: 'Korea Oil Spill Prediction System',
-              color: 'var(--color-accent)',
+              color: 'var(--color-info)',
               icon: '🔷',
               desc: '한국 해역 특화 상시 운용 체계. CHARRY 조류모델 + fBm 난류확산 + 풍화 5단계로 구성된 국산 유출유 확산 시스템.',
               org: '한국해양과학기술원(KIOST)',
@@ -434,25 +272,24 @@ function SystemOverviewPanel() {
               style={{
                 background: 'var(--bg-base)',
                 border: `1px solid ${m.color}40`,
-                borderTop: `3px solid ${m.color}`,
               }}
             >
               <div className="flex items-center gap-2 mb-2.5">
                 <div
-                  className="w-7 h-7 rounded-md flex items-center justify-center text-sm"
+                  className="w-7 h-7 rounded-md flex items-center justify-center text-title-3"
                   style={{ background: `${m.color}25` }}
                 >
                   {m.icon}
                 </div>
                 <div>
-                  <div className="text-xs font-bold" style={{ color: m.color }}>
+                  <div className="text-label-1 font-bold" style={{ color: m.color }}>
                     {m.name}
                   </div>
-                  <div className="text-[10px] text-fg-disabled">{m.sub}</div>
+                  <div className="text-label-2 text-fg-disabled">{m.sub}</div>
                 </div>
               </div>
-              <div className="text-[10px] mb-2 text-fg-sub leading-[1.7]">{m.desc}</div>
-              <div className="flex flex-col gap-0.5 text-[10px] text-fg-sub">
+              <div className="text-label-2 mb-2 text-fg-sub leading-[1.7]">{m.desc}</div>
+              <div className="flex flex-col gap-0.5 text-label-2 text-fg-sub">
                 <div
                   className="px-1.5 py-0.5 rounded"
                   style={{ background: `${m.color}0F`, color: 'var(--fg-sub)' }}
@@ -473,7 +310,7 @@ function SystemOverviewPanel() {
                 </div>
                 <div
                   className="px-1.5 py-0.5 rounded"
-                  style={{ background: 'rgba(239,68,68,.06)', color: 'var(--fg-sub)' }}
+                  style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-sub)' }}
                 >
                   ⚠️ 한계: {m.weakness}
                 </div>
@@ -484,7 +321,10 @@ function SystemOverviewPanel() {
 
         {/* 상세 비교 테이블 */}
         <div className="overflow-x-auto">
-          <table className="w-full border-collapse" style={{ fontSize: '11px' }}>
+          <table
+            className="w-full border-collapse"
+            style={{ fontSize: 'var(--font-size-label-2)' }}
+          >
             <thead>
               <tr
                 style={{
@@ -493,13 +333,13 @@ function SystemOverviewPanel() {
                 }}
               >
                 <th
-                  className="py-2 px-3 text-left text-fg-disabled font-semibold"
+                  className="py-2 px-3 text-left text-fg-disabled font-medium"
                   style={{ width: '15%' }}
                 >
                   구분
                 </th>
                 <th
-                  className="py-2 px-3 text-center text-color-accent font-bold"
+                  className="py-2 px-3 text-center text-color-info font-bold"
                   style={{ width: '28%' }}
                 >
                   🔷 KOSPS
@@ -530,7 +370,7 @@ function SystemOverviewPanel() {
                   label: '핵심 근거<br><span style="font-size:9px">(논문·특허)</span>',
                   k: '<div style="margin-bottom:3px;color:var(--color-accent)">① 등록특허 10-1567431 (2015)</div><div style="color:var(--fg-disabled)">이문진·김혜진 외, 유출유 확산 예측 방법</div><div style="margin-top:3px;color:var(--color-accent)">② 해양환경안전학회지 17(4) (2011)</div><div style="color:var(--fg-disabled)">김혜진·이문진 외, KOSPS 상시 운용 체계</div><div style="margin-top:3px;color:var(--color-accent)">③ 해양환경안전학회 춘계 발표 (2008)</div><div style="color:var(--fg-disabled)">이문진 외, CHARRY 조류모델 실시간 적용</div>',
                   p: '<div style="margin-bottom:3px;color:var(--color-info)">① 등록특허 10-1868791 (2018)</div><div style="color:var(--fg-disabled)">김도연·김충기 외, 입자추적 최적화 방법</div><div style="margin-top:3px;color:var(--color-info)">② 한국지구과학회지 39(5) (2018)</div><div style="color:var(--fg-disabled)">이재호·임병준·김도연 외, MOHID 동아시아 검증</div><div style="margin-top:3px;color:var(--color-info)">③ Ocean Science Journal (2019)</div><div style="color:var(--fg-disabled)">김충기 외, 한반도 인근 해역 POSEIDON 성능 평가</div>',
-                  o: '<div style="margin-bottom:3px;color:var(--color-success)">① Geosci. Model Dev. 11 (2018)</div><div style="color:var(--fg-disabled)">Dagestad et al., OpenDrift v1.0</div><div style="margin-top:3px;color:var(--color-success)">② J. Geophys. Res. Oceans (2013)</div><div style="color:var(--fg-disabled)">Röhrs et al., OpenOil 유출유 검증</div><div style="margin-top:3px;color:var(--color-success)">③ Mar. Pollut. Bull. (2019)</div><div style="color:var(--fg-disabled)">Nordam et al., 3D 유출유 수직분포 모의</div>',
+                  o: '<div style="margin-bottom:3px;color:var(--color-accent)">① Geosci. Model Dev. 11 (2018)</div><div style="color:var(--fg-disabled)">Dagestad et al., OpenDrift v1.0</div><div style="margin-top:3px;color:var(--color-accent)">② J. Geophys. Res. Oceans (2013)</div><div style="color:var(--fg-disabled)">Röhrs et al., OpenOil 유출유 검증</div><div style="margin-top:3px;color:var(--color-accent)">③ Mar. Pollut. Bull. (2019)</div><div style="color:var(--fg-disabled)">Nordam et al., 3D 유출유 수직분포 모의</div>',
                 },
                 {
                   label: '추적 방식',
@@ -542,7 +382,7 @@ function SystemOverviewPanel() {
                   label: '조류 예측',
                   k: '<span style="color:var(--color-accent);font-weight:600">CHARRY 모델</span><br><span style="font-size:9px;font-weight:400">조화분석+수치모델 결합</span>',
                   p: '<span style="color:var(--color-info);font-weight:600">MOHID 조석모듈</span><br><span style="font-size:9px;font-weight:400">3D 완전 연산</span>',
-                  o: '<span style="color:var(--color-success);font-weight:600">외부 모델 입력</span><br><span style="font-size:9px;font-weight:400">NEMO·ROMS·HYCOM 등</span>',
+                  o: '<span style="color:var(--color-accent);font-weight:600">외부 모델 입력</span><br><span style="font-size:9px;font-weight:400">NEMO·ROMS·HYCOM 등</span>',
                 },
                 {
                   label: '취송류',
@@ -554,7 +394,7 @@ function SystemOverviewPanel() {
                   label: '해양 강제력',
                   k: '<span style="color:var(--color-accent)">HYCOM 해류·KMA UM 바람</span><br>NGSST 수온·검조소 조위',
                   p: '<span style="color:var(--color-info)">MOHID 내부 계산</span><br>KMA/ECMWF 기상 입력',
-                  o: '<span style="color:var(--color-success)">다중 모델 지원</span><br>NorESM·TOPAZ·GFS 등',
+                  o: '<span style="color:var(--color-accent)">다중 모델 지원</span><br>NorESM·TOPAZ·GFS 등',
                 },
                 {
                   label: '수심 격자',
@@ -572,7 +412,7 @@ function SystemOverviewPanel() {
                   label: '풍화 모델',
                   k: '<span style="color:var(--color-accent);font-weight:600">5단계 통합</span><br>퍼짐(Fay 1969)·증발(Stiver&amp;Mackay)<br>소산·유상화(Mackay 1980)·침강',
                   p: '<span style="color:var(--color-info);font-weight:600">물리기반 전산</span><br>MOHID Lagrangian 모듈<br>유류 물성 DB 연동',
-                  o: '<span style="color:var(--color-success);font-weight:600">OpenOil 표준</span><br>NOAA ADIOS2 유류 DB<br>2000종+ 유류 물성 지원',
+                  o: '<span style="color:var(--color-accent);font-weight:600">OpenOil 표준</span><br>NOAA ADIOS2 유류 DB<br>2000종+ 유류 물성 지원',
                 },
                 {
                   label: '난류 확산',
@@ -582,21 +422,21 @@ function SystemOverviewPanel() {
                 },
                 {
                   label: '3D 지원',
-                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(239,68,68,.1);color:var(--color-danger);font-weight:700">미지원 (2D)</span>',
+                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">미지원 (2D)</span>',
                   p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.12);color:var(--color-info);font-weight:700">지원 (3D)</span>',
-                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.12);color:var(--color-success);font-weight:700">지원 (3D)</span>',
+                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원 (3D)</span>',
                 },
                 {
                   label: '유류 DB',
                   k: '국내 주요 유종<br>맞춤 물성 파라미터',
                   p: '국내외 주요 유종<br>물성 DB 구축',
-                  o: '<span style="color:var(--color-success);font-weight:600">NOAA ADIOS2 연동<br>2,000종+ 광범위 지원</span>',
+                  o: '<span style="color:var(--color-accent);font-weight:600">NOAA ADIOS2 연동<br>2,000종+ 광범위 지원</span>',
                 },
                 {
                   label: '오픈소스',
-                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(239,68,68,.1);color:var(--color-danger);font-weight:700">비공개</span>',
-                  p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(239,68,68,.1);color:var(--color-danger);font-weight:700">비공개</span>',
-                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.12);color:var(--color-success);font-weight:700">완전 오픈소스</span>',
+                  k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">비공개</span>',
+                  p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.1);color:var(--color-info);font-weight:700">비공개</span>',
+                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">완전 오픈소스</span>',
                 },
                 {
                   label: '예측 신뢰\n기간',
@@ -608,13 +448,13 @@ function SystemOverviewPanel() {
                   label: '앙상블',
                   k: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원</span>',
                   p: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(59,130,246,.12);color:var(--color-info);font-weight:700">지원</span>',
-                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.12);color:var(--color-success);font-weight:700">지원</span>',
+                  o: '<span style="font-size:9px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.12);color:var(--color-accent);font-weight:700">지원</span>',
                 },
                 {
                   label: 'WING 활용\n역할',
                   k: '<span style="color:var(--color-accent);font-weight:600">한국 서해·남해<br>조류 정밀 예측</span><br><span style="color:var(--fg-disabled)">ESI 방제지도 연동</span>',
                   p: '<span style="color:var(--color-info);font-weight:600">매개변수 최적화<br>정확도 향상</span><br><span style="color:var(--fg-disabled)">뜰개 관측 동화</span>',
-                  o: '<span style="color:var(--color-success);font-weight:600">광역·3D 확산<br>다중 시나리오</span><br><span style="color:var(--fg-disabled)">오픈소스 모듈 확장</span>',
+                  o: '<span style="color:var(--color-accent);font-weight:600">광역·3D 확산<br>다중 시나리오</span><br><span style="color:var(--fg-disabled)">오픈소스 모듈 확장</span>',
                 },
               ].map((row, i) => (
                 <tr
@@ -631,15 +471,27 @@ function SystemOverviewPanel() {
                     }}
                   />
                   <td
-                    style={{ padding: '7px 12px', textAlign: 'center', fontSize: '10px' }}
+                    style={{
+                      padding: '7px 12px',
+                      textAlign: 'center',
+                      fontSize: 'var(--font-size-label-2)',
+                    }}
                     dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.k) }}
                   />
                   <td
-                    style={{ padding: '7px 12px', textAlign: 'center', fontSize: '10px' }}
+                    style={{
+                      padding: '7px 12px',
+                      textAlign: 'center',
+                      fontSize: 'var(--font-size-label-2)',
+                    }}
                     dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.p) }}
                   />
                   <td
-                    style={{ padding: '7px 12px', textAlign: 'center', fontSize: '10px' }}
+                    style={{
+                      padding: '7px 12px',
+                      textAlign: 'center',
+                      fontSize: 'var(--font-size-label-2)',
+                    }}
                     dangerouslySetInnerHTML={{ __html: sanitizeHtml(row.o) }}
                   />
                 </tr>
@@ -650,15 +502,14 @@ function SystemOverviewPanel() {
 
         {/* 앙상블 운용 설명 */}
         <div
-          className="mt-3.5 px-3.5 py-3 rounded-lg flex items-start gap-2.5"
-          style={{ background: 'rgba(168,85,247,.04)', border: '1px solid rgba(168,85,247,.15)' }}
+          className="mt-3.5 px-3 py-2.5 rounded-lg"
+          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.15)' }}
         >
-          <span className="text-lg flex-shrink-0">⚡</span>
-          <div className="text-[10px] text-fg-sub leading-[1.7]">
-            <b className="text-color-tertiary">3종 앙상블 운용 방식</b> : WING 시스템은
+          <div className="text-label-2 text-fg-sub leading-[1.7]">
+            <b className="text-color-accent">3종 앙상블 운용 방식</b> : WING 시스템은
             KOSPS·POSEIDON·OpenDrift를 동시 구동하여 각 모델의 예측 결과를 중첩·비교합니다. 3종
             결과의 공통 영역을 <b>고신뢰 오염 범위</b>로, 최외곽 범위를{' '}
-            <b className="text-color-warning">불확실성 경계</b>로 표출하여 방제 의사결정의 위험도를
+            <b className="text-color-accent">불확실성 경계</b>로 표출하여 방제 의사결정의 위험도를
             정량화합니다.
           </div>
         </div>
@@ -674,97 +525,73 @@ function KospsPanel() {
   const [kospsPapersOpen, setKospsPapersOpen] = useState(false);
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.06),rgba(34,197,94,.04))',
-          border: '1px solid rgba(6,182,212,.25)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-accent),var(--color-success))' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-3 mb-3">
-          <div
-            className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl"
-            style={{ background: 'rgba(6,182,212,.15)', border: '1px solid rgba(6,182,212,.3)' }}
-          >
+          <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-heading-3 bg-bg-elevated border border-stroke">
             🔷
           </div>
           <div>
-            <div className="text-[15px] font-bold text-color-accent">
+            <div className="text-title-2 font-bold text-fg">
               KOSPS (Korea Oil Spill Prediction System)
             </div>
-            <div className="text-[11px] mt-0.5 text-fg-disabled">
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템
             </div>
           </div>
         </div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           김혜진·이문진·오세웅·강준묵(2011)이 개발한 KOSPS는 유류오염사고 발생 즉시 신속하게 모델을
           구동할 수 있도록 <b className="text-color-accent">상시 운용 체계</b>를 구축한 국내 유출유
           확산 예측 시스템입니다. 정적자료(수심·해안선)와 동적자료(KMA 바람·HYCOM 해류·KORDI 조류)를
-          외부 FTP 연계로 자동 갱신하여 <b className="text-color-success">실시간 예측 상시 활용</b>
-          을 가능하게 합니다.
+          외부 FTP 연계로 자동 갱신하여 <b className="text-color-accent">실시간 예측 상시 활용</b>을
+          가능하게 합니다.
         </div>
         <div
-          className="mt-2.5 px-3 py-2 rounded-md text-[10px]"
+          className="mt-2.5 px-3 py-2 rounded-md text-label-2"
           style={{
             background: 'rgba(6,182,212,.06)',
             border: '1px solid rgba(6,182,212,.15)',
             color: 'var(--fg-disabled)',
           }}
         >
-          📚 참고문헌: 김혜진·이문진·오세웅·강준묵, &quot;유출유 확산 예측 모델의 상시 운용 체계
-          개발에 관한 연구&quot;, 해양환경안전학회지 17권 4호, pp.375-382, 2011.
+          참고문헌: 김혜진·이문진·오세웅·강준묵, &quot;유출유 확산 예측 모델의 상시 운용 체계 개발에
+          관한 연구&quot;, 해양환경안전학회지 17권 4호, pp.375-382, 2011.
         </div>
       </div>
 
       {/* 논문·특허 근거 */}
       <div className={`${card} ${cardBg}`}>
-        <div style={labelStyle('var(--fg-default)')}>📚 관련 논문 · 특허 근거</div>
+        <div style={labelStyle('var(--fg-default)')}>관련 논문 · 특허 근거</div>
 
         {/* 등록특허 라벨 */}
         <div className="flex items-center gap-1.5 mb-2">
-          <span style={{ ...tag('var(--color-caution)'), fontWeight: 700, fontSize: '12px' }}>
-            📜 등록특허
+          <span
+            style={{
+              ...tag('var(--fg-sub)'),
+              fontWeight: 700,
+              fontSize: 'var(--font-size-label-1)',
+            }}
+          >
+            등록특허
           </span>
         </div>
 
         <div className="flex flex-col gap-1.5 mb-3.5">
           {/* 특허 1 */}
-          <div
-            className="rounded-lg p-3"
-            style={{
-              background: 'var(--bg-base)',
-              border: '1px solid rgba(6,182,212,.2)',
-              display: 'grid',
-              gridTemplateColumns: 'auto 1fr',
-              gap: '12px',
-            }}
-          >
-            <div
-              className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap"
-              style={{
-                background: 'rgba(6,182,212,.12)',
-                border: '1px solid rgba(6,182,212,.25)',
-                fontFamily: 'var(--font-mono)',
-              }}
-            >
-              <div className="text-[10px] text-fg-disabled">등록번호</div>
-              <div className="text-[11px] font-bold text-color-accent">10-1567431</div>
-              <div className="text-[10px] mt-0.5 text-fg-disabled">2015.11.03</div>
+          <div className="rounded-lg p-3 bg-bg-base border border-stroke flex gap-3 items-start">
+            <div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap bg-bg-elevated border border-stroke font-mono shrink-0">
+              <div className="text-label-2 text-fg-disabled">등록번호</div>
+              <div className="text-label-2 font-bold text-fg">10-1567431</div>
+              <div className="text-label-2 mt-0.5 text-fg-disabled">2015.11.03</div>
             </div>
-            <div>
-              <div className="text-[11px] font-bold mb-1">
+            <div className="flex flex-col gap-1.5 text-label-2 min-w-0">
+              <div className="font-bold text-fg">
                 해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법
               </div>
-              <div className="text-[10px] text-fg-sub">
-                <span className="text-color-accent">발명자</span> : 이문진 · 김혜진 · 이승현 ·
-                전태병 | <span className="text-color-accent">특허권자</span> : 한국해양과학기술원
+              <div className="text-fg-sub">
+                발명자 : 이문진 · 김혜진 · 이승현 · 전태병 | 특허권자 : 한국해양과학기술원
               </div>
-              <div className="flex flex-wrap gap-1 mt-1.5">
+              <div className="flex flex-wrap gap-1">
                 {[
                   'ESI 방제정보지도',
                   'CHARRY 실시간 조류모델',
@@ -772,12 +599,15 @@ function KospsPanel() {
                   'Monte Carlo 입자추적',
                   '풍화 5단계',
                 ].map((t) => (
-                  <span key={t} style={tag('var(--color-accent)')}>
+                  <span
+                    key={t}
+                    className="px-2 py-0.5 rounded text-label-2 text-fg-sub bg-bg-elevated"
+                  >
                     {t}
                   </span>
                 ))}
               </div>
-              <div className="text-[10px] mt-1.5 text-fg-disabled">
+              <div className="text-fg-disabled">
                 국가R&amp;D: ① 3차원 유출유 확산예측 기반 방제 지원기술 개발 (기여율 65%) ② HNS 유출
                 거동예측 및 대응정보 지원기술 개발 (기여율 35%) | 해양수산부
               </div>
@@ -787,43 +617,40 @@ function KospsPanel() {
       </div>
 
       {/* CHARRY 모델 */}
-      <div
-        className={card}
-        style={{ background: 'var(--bg-base)', border: '1px solid rgba(6,182,212,.2)' }}
-      >
-        <div style={labelStyle('var(--color-accent)')}>
-          🌀 CHARRY 모델 (실시간 조류예측 핵심 알고리즘)
+      <div className={`${card} ${cardBg}`}>
+        <div style={labelStyle('var(--fg-default)')}>
+          CHARRY 모델 (실시간 조류예측 핵심 알고리즘)
         </div>
-        <div className="text-[11px] mb-2.5 text-fg-sub leading-[1.8]">
+        <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.8]">
           <b>CHARRY</b>는 조화분석에 의한 검조소 실시간 조위와 조석 수치모델링에 의한 조류
           공간분포를 변조조석(Modulated Tide)을 매개로 결합하여, 실제 시간대의 전 해역 조류를
           실시간으로 재현하는 핵심 알고리즘입니다.
         </div>
         <div className="grid grid-cols-2 gap-2.5">
           <div className={codeBox}>
-            <span className="text-fg-disabled text-[10px]">/* 변조조석 수식 */</span>
+            <span className="text-fg-disabled text-label-2">/* 변조조석 수식 */</span>
             <br />
             ζ(t) = A(t) cos[σt − θ(t)]
             <br />
             A²(t) = Σ Yᵢ² + 2Σ YᵢYⱼ cos[(σᵢ−σⱼ)t−(φᵢ−φⱼ)]
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             <div
               className="px-2 py-1.5 rounded"
               style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}
             >
-              <span className="text-color-accent font-bold">① 진폭 등비 증가</span>
+              <span className="text-fg font-bold">① 진폭 등비 증가</span>
               <br />
               <span className="text-fg-sub">검조소 조위 진폭 f배 → 전 격자 동일 f배 증가</span>
             </div>
             <div
               className="px-2 py-1.5 rounded"
               style={{
-                background: 'rgba(249,115,22,.05)',
-                border: '1px solid rgba(249,115,22,.12)',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
               }}
             >
-              <span className="text-color-warning font-bold">② 위상차 일정</span>
+              <span className="text-fg font-bold">② 위상차 일정</span>
               <br />
               <span className="text-fg-sub">기준점-격자점 간 위상차는 진폭에 무관하게 일정</span>
             </div>
@@ -833,12 +660,9 @@ function KospsPanel() {
 
       {/* 입력자료 체계 */}
       <div className="grid grid-cols-2 gap-3 mb-4">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-accent)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-accent)')}>📊 동적 입력자료 체계</div>
-          <div className="flex flex-col gap-1.5 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>동적 입력자료 체계</div>
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             {[
               {
                 icon: '🌬️',
@@ -858,22 +682,22 @@ function KospsPanel() {
                 icon: '🌀',
                 label: '조류',
                 detail: 'KORDI 조화분석 · 500m',
-                bg: 'rgba(34,197,94,.04)',
-                bd: 'rgba(34,197,94,.12)',
+                bg: 'rgba(6,182,212,.04)',
+                bd: 'rgba(6,182,212,.12)',
               },
               {
                 icon: '🌡️',
                 label: '표층수온(SST)',
                 detail: 'NOAA AVHRR · ~5.4km',
-                bg: 'rgba(249,115,22,.04)',
-                bd: 'rgba(249,115,22,.12)',
+                bg: 'rgba(6,182,212,.04)',
+                bd: 'rgba(6,182,212,.12)',
               },
               {
                 icon: '💨',
                 label: '취송류(풍성류)',
                 detail: 'KMA 바람 → 경험식 계산',
-                bg: 'rgba(168,85,247,.04)',
-                bd: 'rgba(168,85,247,.12)',
+                bg: 'rgba(6,182,212,.04)',
+                bd: 'rgba(6,182,212,.12)',
               },
             ].map((d) => (
               <div
@@ -881,32 +705,29 @@ function KospsPanel() {
                 className="px-2.5 py-1.5 rounded-md flex justify-between items-center"
                 style={{ background: d.bg, border: `1px solid ${d.bd}` }}
               >
-                <span className="font-semibold">
+                <span className="font-medium">
                   {d.icon} {d.label}
                 </span>
-                <span className="text-[10px] text-fg-disabled">{d.detail}</span>
+                <span className="text-label-2 text-fg-disabled">{d.detail}</span>
               </div>
             ))}
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-success)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-success)')}>🗂️ 정적 입력자료</div>
-          <div className="flex flex-col gap-1.5 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-info)')}>정적 입력자료</div>
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             <div
               className="px-2.5 py-1.5 rounded-md"
-              style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}
+              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
             >
-              <div className="font-semibold mb-0.5">📍 수심·해안선</div>
+              <div className="font-medium mb-0.5">📍 수심·해안선</div>
               <div className="text-fg-disabled">전자해도(ENC) → 500m 격자 보간</div>
             </div>
             <div
               className="px-2.5 py-1.5 rounded-md"
-              style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}
+              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
             >
-              <div className="font-semibold mb-0.5">🗺️ 격자 구성</div>
+              <div className="font-medium mb-0.5">🗺️ 격자 구성</div>
               <div className="text-fg-disabled">좌표변환 → 영역추출 → 격자보간 표준화</div>
             </div>
           </div>
@@ -914,30 +735,30 @@ function KospsPanel() {
       </div>
 
       {/* 취송류 경험식 */}
-      <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--color-warning)' }}>
-        <div style={labelStyle('var(--color-warning)')}>📐 취송류(Wind-Driven Current) 경험식</div>
+      <div className={`${card} ${cardBg}`}>
+        <div style={labelStyle('var(--color-info)')}>취송류(Wind-Driven Current) 경험식</div>
         <div className="grid grid-cols-2 gap-3">
           <div>
             <div className={`${codeBox} mb-2`}>
-              <span className="text-fg-disabled text-[10px]">/* 취송류 유속 (이·강, 2000) */</span>
+              <span className="text-fg-disabled text-label-2">/* 취송류 유속 (이·강, 2000) */</span>
               <br />
-              V_WDC = <span className="text-color-warning">0.029</span> × V_wind
+              V_WDC = <span className="text-color-accent">0.029</span> × V_wind
             </div>
             <div className={codeBox}>
-              <span className="text-fg-disabled text-[10px]">/* 취송류 유향 */</span>
+              <span className="text-fg-disabled text-label-2">/* 취송류 유향 */</span>
               <br />
               θ_WDC = θ_wind + <span className="text-color-accent">18.6°</span>
             </div>
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             <div
               className="px-2 py-1.5 rounded"
               style={{
-                background: 'rgba(249,115,22,.05)',
-                border: '1px solid rgba(249,115,22,.15)',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(59,130,246,.15)',
               }}
             >
-              <span className="text-color-warning font-bold">V_WDC</span> : 표면 취송류 유속 (m/s) —
+              <span className="text-color-accent font-bold">V_WDC</span> : 표면 취송류 유속 (m/s) —
               바람의 약 2.9%
             </div>
             <div
@@ -949,9 +770,9 @@ function KospsPanel() {
             </div>
             <div
               className="px-2 py-1.5 rounded"
-              style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.15)' }}
+              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}
             >
-              <b className="text-color-success">출처</b> : 이문진·강용균(2000), 해양 표면취송류
+              <b className="text-color-accent">출처</b> : 이문진·강용균(2000), 해양 표면취송류
               라그랑지안 측류 및 모델링
             </div>
           </div>
@@ -959,24 +780,24 @@ function KospsPanel() {
       </div>
       {/* 상시 운용 통신 체계 */}
       <div className={`${card} ${cardBg}`}>
-        <div style={labelStyle('var(--fg-default)')}>🔄 상시 운용 통신 체계</div>
+        <div style={labelStyle('var(--fg-default)')}>상시 운용 통신 체계</div>
         <div className="flex items-center justify-center gap-0 py-3">
           {[
-            { label: 'NFRDI', sub: 'SST', color: 'var(--color-success)' },
+            { label: 'NFRDI', sub: 'SST', color: 'var(--color-accent)' },
             { label: 'KMA', sub: 'Wind·기온', color: 'var(--color-accent)' },
-            { label: 'HYCOM', sub: '해류', color: 'var(--color-info)' },
+            { label: 'HYCOM', sub: '해류', color: 'var(--color-accent)' },
             {
               label: 'DB 서버',
               sub: '동적+정적자료',
-              color: 'var(--color-tertiary)',
+              color: 'var(--color-accent)',
               strong: true,
             },
-            { label: 'KOSPS', sub: '확산예측', color: 'var(--color-warning)', strong: true },
-            { label: '운용자', sub: '결과 수령', color: 'var(--color-success)' },
+            { label: 'KOSPS', sub: '확산예측', color: 'var(--color-accent)', strong: true },
+            { label: '운용자', sub: '결과 수령', color: 'var(--color-accent)' },
           ].map((node, i) => (
             <div key={node.label} className="flex items-center">
               <div
-                className="px-3 py-2.5 rounded-lg text-center text-[11px]"
+                className="px-3 py-2.5 rounded-lg text-center text-label-2"
                 style={{
                   background: `${node.color}14`,
                   border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
@@ -985,7 +806,7 @@ function KospsPanel() {
                 <div className="font-bold" style={{ color: node.color }}>
                   {node.label}
                 </div>
-                <div className="text-[10px] text-fg-disabled">{node.sub}</div>
+                <div className="text-label-2 text-fg-disabled">{node.sub}</div>
               </div>
               {i < 5 && (
                 <div className="w-[30px] h-px" style={{ background: 'var(--stroke-light)' }} />
@@ -993,54 +814,37 @@ function KospsPanel() {
             </div>
           ))}
         </div>
-        <div className="text-[10px] text-center mt-1 text-fg-disabled">
+        <div className="text-label-2 text-center mt-1 text-fg-disabled">
           FTP 자동 갱신 → DB 정규화 → 격자 재구성 → 모델 구동 → 결과 표출
         </div>
         <div
           className="mt-2.5 p-2 rounded-md"
           style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}
         >
-          <div className="text-[10px] font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
-          <div className="text-[10px] text-fg-sub leading-[1.6]">
+          <div className="text-label-2 font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
+          <div className="text-label-2 text-fg-sub leading-[1.6]">
             조류: 무한 예보 가능
             <br />
             해류(HYCOM): <b>5일치</b> 제한
             <br />
-            기온·취송류: <b className="text-color-warning">3일치</b> 제한
-            <br />→ <b className="text-color-danger">72h 초과 예측 시 신뢰도 저하</b>
+            기온·취송류: <b className="text-color-caution">3일치</b> 제한
+            <br />→ <b className="text-color-caution">72h 초과 예측 시 신뢰도 저하</b>
           </div>
         </div>
       </div>
 
       {/* 이문진 박사 특허 핵심 기술 */}
-      <div
-        className="rounded-xl p-[18px] relative overflow-hidden mt-4"
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(59,130,246,.03))',
-          border: '1px solid rgba(6,182,212,.3)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{
-            background:
-              'linear-gradient(90deg,var(--color-accent),var(--color-info),var(--color-success))',
-          }}
-        />
-
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         {/* 헤더 */}
         <div className="flex items-center gap-2.5 mb-3.5">
-          <div
-            className="w-[34px] h-[34px] rounded-lg flex items-center justify-center text-[17px]"
-            style={{ background: 'rgba(6,182,212,.15)', border: '1px solid rgba(6,182,212,.3)' }}
-          >
+          <div className="w-[34px] h-[34px] rounded-lg flex items-center justify-center text-title-1 bg-bg-elevated border border-stroke">
             📜
           </div>
           <div>
-            <div className="text-[13px] font-bold text-color-accent">
+            <div className="text-title-4 font-bold text-fg">
               이문진 박사 특허 기반 핵심 기술 (등록특허 10-1567431)
             </div>
-            <div className="text-[10px] mt-0.5 text-fg-disabled">
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법 ·
               한국해양과학기술원 · 2015년 등록
             </div>
@@ -1049,7 +853,7 @@ function KospsPanel() {
 
         {/* 특허 개요 */}
         <div
-          className="rounded-lg p-3 mb-3.5 text-[11px]"
+          className="rounded-lg p-3 mb-3.5 text-label-2"
           style={{
             background: 'rgba(6,182,212,.04)',
             border: '1px solid rgba(6,182,212,.12)',
@@ -1064,32 +868,31 @@ function KospsPanel() {
           를 기반으로 실시간 조류·취송류·해수유동을 산출하고, 이를 유출유 확산 예측에 직결하는 통합
           방법론을 특허화한 것입니다. 기상예측시스템·위성영상수신시스템·검조소를 인터넷으로 연결하여
           실시간 기상·수온·조석 정보를 자동 수신하고,{' '}
-          <b className="text-color-warning">CHARRY 모델</b>로 실시간 조류를 예측하여 유출유 확산에
+          <b className="text-color-accent">CHARRY 모델</b>로 실시간 조류를 예측하여 유출유 확산에
           적용합니다.
         </div>
 
         {/* 3단계 처리 프로세스 */}
-        <div className="text-[11px] font-bold mb-2.5">⚙️ 특허 청구항 3단계 처리 프로세스</div>
+        <div className="text-label-2 font-bold mb-2.5">⚙️ 특허 청구항 3단계 처리 프로세스</div>
         <div className="grid grid-cols-3 gap-2 mb-3.5">
           <div
             className="rounded-lg p-3"
             style={{
               background: 'var(--bg-base)',
-              border: '1px solid rgba(249,115,22,.2)',
-              borderTop: '3px solid var(--color-warning)',
+              border: '1px solid var(--stroke-default)',
             }}
           >
-            <div className="text-[11px] font-bold mb-1.5 text-color-warning">
+            <div className="text-label-2 font-bold mb-1.5 text-color-info">
               ① 실시간 자료 수신 (S10)
             </div>
-            <div className="text-[10px] text-fg-sub leading-[1.7]">
+            <div className="text-label-2 text-fg-sub leading-[1.7]">
               • <b>기상자료</b> : 바람·기온·기압 분포
               <br />• <b>수온자료</b> : NGSST 위성 원격탐사 (일본 토호쿠대학, 5km 해상도)
               <br />• <b>조석정보</b> : 검조소 실시간 조위
             </div>
             <div
-              className="mt-1 p-1 rounded text-[10px]"
-              style={{ background: 'rgba(249,115,22,.06)', color: 'var(--fg-disabled)' }}
+              className="mt-1 p-1 rounded text-label-2"
+              style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-disabled)' }}
             >
               FTP 자동 접속·수신·좌표변환·DB구축까지 자동화
             </div>
@@ -1099,13 +902,12 @@ function KospsPanel() {
             style={{
               background: 'var(--bg-base)',
               border: '1px solid rgba(6,182,212,.2)',
-              borderTop: '3px solid var(--color-accent)',
             }}
           >
-            <div className="text-[11px] font-bold mb-1.5 text-color-accent">
+            <div className="text-label-2 font-bold mb-1.5 text-color-accent">
               ② 조류·취송류 예측 (S20)
             </div>
-            <div className="text-[10px] text-fg-sub leading-[1.7]">
+            <div className="text-label-2 text-fg-sub leading-[1.7]">
               • <b className="text-color-accent">CHARRY 모델</b>로 실시간 조류 예측
               <br />
               • 2D 해수유동 방정식 기반 조화상수 DB 구축
@@ -1114,7 +916,7 @@ function KospsPanel() {
               <br />• M2·S2·K1·O1 주요 4대 분조 조화분해
             </div>
             <div
-              className="mt-1 p-1 rounded text-[10px]"
+              className="mt-1 p-1 rounded text-label-2"
               style={{ background: 'rgba(6,182,212,.06)', color: 'var(--fg-disabled)' }}
             >
               계산격자 : 15초(약 463m) 등간격 · 총 3,225,600격자
@@ -1124,14 +926,13 @@ function KospsPanel() {
             className="rounded-lg p-3"
             style={{
               background: 'var(--bg-base)',
-              border: '1px solid rgba(34,197,94,.2)',
-              borderTop: '3px solid var(--color-success)',
+              border: '1px solid var(--stroke-default)',
             }}
           >
-            <div className="text-[11px] font-bold mb-1.5 text-color-success">
+            <div className="text-label-2 font-bold mb-1.5 text-color-info">
               ③ 유출유 확산 예측 (S30)
             </div>
-            <div className="text-[10px] text-fg-sub leading-[1.7]">
+            <div className="text-label-2 text-fg-sub leading-[1.7]">
               • 클라이언트로부터 <b>유출유량·유출지점</b> 입력 수신
               <br />
               • 몬테카를로(Monte Carlo) 입자추적 기법
@@ -1140,8 +941,8 @@ function KospsPanel() {
               <br />• 풍화모델 : 퍼짐·증발·소산·유상화·침강 통합
             </div>
             <div
-              className="mt-1 p-1 rounded text-[10px]"
-              style={{ background: 'rgba(34,197,94,.06)', color: 'var(--fg-disabled)' }}
+              className="mt-1 p-1 rounded text-label-2"
+              style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-disabled)' }}
             >
               ESI Map 환경민감자원 DB와 결합하여 피해 위험도 평가
             </div>
@@ -1154,13 +955,13 @@ function KospsPanel() {
             className="rounded-lg p-3"
             style={{ background: 'var(--bg-base)', border: '1px solid rgba(59,130,246,.2)' }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-info">
+            <div className="text-label-2 font-bold mb-2 text-color-info">
               📐 2차원 해수유동 방정식
             </div>
-            <div className="text-[10px] mb-2 text-fg-sub leading-[1.7]">
+            <div className="text-label-2 mb-2 text-fg-sub leading-[1.7]">
               극좌표계(Polar Coordinate) 적용 · 지구 구면효과 반영
             </div>
-            <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
               {[
                 { label: '기조력', desc: '제1(Love Number 0.69) + 제2(α=0.9) 포함' },
                 { label: '4대 분조', desc: 'M2(1.405×10⁻⁴/s) · S2 · K1 · O1' },
@@ -1179,41 +980,41 @@ function KospsPanel() {
           </div>
           <div
             className="rounded-lg p-3"
-            style={{ background: 'var(--bg-base)', border: '1px solid rgba(249,115,22,.2)' }}
+            style={{ background: 'var(--bg-base)', border: '1px solid rgba(59,130,246,.2)' }}
           >
-            <div className="text-[11px] font-bold mb-2 text-color-warning">
+            <div className="text-label-2 font-bold mb-2 text-color-info">
               🔁 유출유 풍화(Weathering) 5단계
             </div>
-            <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(249,115,22,.05)',
-                  border: '1px solid rgba(249,115,22,.1)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.1)',
                 }}
               >
-                <span className="font-bold text-color-warning">① 퍼짐</span> : Fay(1969) + Mackay et
+                <span className="font-bold text-color-info">① 퍼짐</span> : Fay(1969) + Mackay et
                 al.(1980) · 두께별 3단계 모델
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(239,68,68,.05)',
-                  border: '1px solid rgba(239,68,68,.1)',
+                  background: 'rgba(59,130,246,.05)',
+                  border: '1px solid rgba(59,130,246,.1)',
                 }}
               >
-                <span className="font-bold text-color-danger">② 증발</span> : Stiver &amp;
+                <span className="font-bold text-color-info">② 증발</span> : Stiver &amp;
                 Mackay(1984) · 증류데이터 기반 해석 (1~10일, 25%)
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(168,85,247,.05)',
-                  border: '1px solid rgba(168,85,247,.1)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.1)',
                 }}
               >
-                <span className="font-bold text-color-tertiary">③ 소산</span> : 쇄파에너지·풍속 함수
-                · 수면하 수직 분산 (15%)
+                <span className="font-bold text-color-info">③ 소산</span> : 쇄파에너지·풍속 함수 ·
+                수면하 수직 분산 (15%)
               </div>
               <div
                 className="px-2 py-1 rounded"
@@ -1228,11 +1029,11 @@ function KospsPanel() {
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(34,197,94,.05)',
-                  border: '1px solid rgba(34,197,94,.1)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.1)',
                 }}
               >
-                <span className="font-bold text-color-success">⑤ 침강</span> : 용해·생물분해 포함 ·
+                <span className="font-bold text-color-info">⑤ 침강</span> : 용해·생물분해 포함 ·
                 초기유출량 선형 감소율 적용
               </div>
             </div>
@@ -1241,37 +1042,31 @@ function KospsPanel() {
 
         {/* Akima 수심 보간 & NGSST 수온 */}
         <div className="grid grid-cols-2 gap-2.5 mb-3">
-          <div
-            className="rounded-lg p-3"
-            style={{ background: 'var(--bg-base)', border: '1px solid rgba(34,197,94,.2)' }}
-          >
-            <div className="text-[11px] font-bold mb-2 text-color-success">
+          <div className="rounded-lg p-3" className="bg-bg-card border border-stroke">
+            <div className="text-label-2 font-bold mb-2 text-color-accent">
               🗺️ Akima 수심 보간 기법
             </div>
-            <div className="text-[10px] text-fg-sub leading-[1.7]">
+            <div className="text-label-2 text-fg-sub leading-[1.7]">
               전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때{' '}
-              <b className="text-color-success">Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic
+              <b className="text-color-accent">Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic
               Polynomial)을 사용합니다. 삼각망(TIN)을 구성하여 각 꼭지점의 편미분 연속성 조건으로
               21개 계수를 결정합니다.
             </div>
-            <div className="mt-1.5 p-1.5 rounded bg-bg-base font-mono text-xs leading-loose">
+            <div className="mt-1.5 p-1.5 rounded bg-bg-base font-mono text-label-1 leading-loose">
               z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ{' '}
-              <span className="text-[10px] text-fg-disabled">(i≤5, i+j≤5)</span>
+              <span className="text-label-2 text-fg-disabled">(i≤5, i+j≤5)</span>
             </div>
           </div>
-          <div
-            className="rounded-lg p-3"
-            style={{ background: 'var(--bg-base)', border: '1px solid rgba(6,182,212,.2)' }}
-          >
-            <div className="text-[11px] font-bold mb-2 text-color-accent">
+          <div className="rounded-lg p-3" className="bg-bg-card border border-stroke">
+            <div className="text-label-2 font-bold mb-2 text-color-accent">
               🌡️ NGSST 실시간 수온자료
             </div>
-            <div className="text-[10px] text-fg-sub leading-[1.7]">
+            <div className="text-label-2 text-fg-sub leading-[1.7]">
               일본 토호쿠대학 Kawamura 교수팀의{' '}
               <b className="text-color-accent">New Generation SST(NGSST)</b>를 FTP 자동수신합니다.
               열적외선(AVHRR·MODIS) + 마이크로파(AMSR-E) 융합으로 구름 무관 일별 수온 제공.
             </div>
-            <div className="flex flex-col gap-1 mt-1.5 text-[10px] text-fg-sub">
+            <div className="flex flex-col gap-1 mt-1.5 text-label-2 text-fg-sub">
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}>
                 <span className="font-bold text-color-accent">영역</span> : 116~166°E, 13~63°N
                 (북서태평양)
@@ -1293,10 +1088,10 @@ function KospsPanel() {
           className="rounded-lg p-3"
           style={{ background: 'rgba(234,179,8,.04)', border: '1px solid rgba(234,179,8,.2)' }}
         >
-          <div className="text-[11px] font-bold mb-2 text-color-caution">
+          <div className="text-label-2 font-bold mb-2 text-color-caution">
             📋 특허 지원 국가연구개발사업 및 기여율
           </div>
-          <div className="grid grid-cols-2 gap-2 text-[10px] text-fg-sub">
+          <div className="grid grid-cols-2 gap-2 text-label-2 text-fg-sub">
             <div
               className="p-2 rounded-md"
               style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}
@@ -1311,11 +1106,11 @@ function KospsPanel() {
             <div
               className="p-2 rounded-md"
               style={{
-                background: 'rgba(249,115,22,.05)',
-                border: '1px solid rgba(249,115,22,.12)',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.12)',
               }}
             >
-              <div className="font-bold mb-1 text-color-warning">🔶 과제② (기여율 35%)</div>
+              <div className="font-bold mb-1 text-color-info">🔶 과제② (기여율 35%)</div>
               <div className="text-fg-sub leading-[1.6]">
                 주요 위험유해물질(HNS) 유출 거동예측 및 대응정보 지원기술 개발
                 <br />
@@ -1324,46 +1119,36 @@ function KospsPanel() {
             </div>
           </div>
           <div
-            className="mt-2 p-1.5 rounded text-[10px]"
+            className="mt-2 p-1.5 rounded text-label-2"
             style={{
               background: 'rgba(255,255,255,.02)',
               border: '1px solid var(--stroke-default)',
               color: 'var(--fg-disabled)',
             }}
           >
-            📚 특허권자: 한국해양과학기술원 | 발명자: 이문진·김혜진·이승현·전태병 | 등록번호:
+            특허권자: 한국해양과학기술원 | 발명자: 이문진·김혜진·이승현·전태병 | 등록번호:
             10-1567431 | 공고일: 2015.11.12
           </div>
         </div>
       </div>
 
       {/* KOSPS관련 유출유 확산예측 논문 */}
-      <div
-        className="rounded-xl p-4 relative overflow-hidden mt-3.5"
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(34,197,94,.03))',
-          border: '1px solid rgba(6,182,212,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,#06b6d4,#22c55e)' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div
           className="flex items-center gap-2.5 cursor-pointer select-none"
           onClick={() => setKospsPapersOpen(!kospsPapersOpen)}
         >
           <div
-            className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0"
-            style={{ background: 'rgba(6,182,212,.12)', border: '1px solid rgba(6,182,212,.25)' }}
+            className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-title-3 shrink-0"
+            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(6,182,212,.25)' }}
           >
             📄
           </div>
           <div className="flex-1">
-            <div className="text-xs font-bold">
+            <div className="text-label-1 font-bold">
               KOSPS관련 유출유 확산예측 논문{' '}
               <span
-                className="text-[11px] ml-1"
+                className="text-label-2 ml-1"
                 style={{
                   color: 'var(--fg-disabled)',
                   transition: 'transform .2s',
@@ -1374,7 +1159,7 @@ function KospsPanel() {
                 ▼
               </span>
             </div>
-            <div className="text-[10px] mt-0.5 text-fg-disabled">
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               KOSPS 개발 · 허베이스피리트 검증 · 3D 확산예측 시스템 · 방제효과 모델링 —
               한국해양환경·에너지학회
             </div>
@@ -1386,8 +1171,8 @@ function KospsPanel() {
               {
                 tags: [
                   { label: '유출유 확산', color: '#06b6d4' },
-                  { label: '허베이스피리트 검증', color: 'var(--color-danger)' },
-                  { label: 'Radarsat·GNOME', color: 'var(--color-tertiary)' },
+                  { label: '허베이스피리트 검증', color: 'var(--color-info)' },
+                  { label: 'Radarsat·GNOME', color: 'var(--color-accent)' },
                 ],
                 year: '2010',
                 title: '허베이스피리트호 유출유 확산예측 검증 분석',
@@ -1398,8 +1183,8 @@ function KospsPanel() {
               {
                 tags: [
                   { label: '3D 확산시스템', color: '#06b6d4' },
-                  { label: '3차원 모델', color: 'var(--color-tertiary)' },
-                  { label: 'Monte Carlo', color: 'var(--color-warning)' },
+                  { label: '3차원 모델', color: 'var(--color-accent)' },
+                  { label: 'Monte Carlo', color: 'var(--color-accent)' },
                 ],
                 year: '2013',
                 title: '3차원 유출유 확산예측 시스템 연구',
@@ -1421,7 +1206,7 @@ function KospsPanel() {
               {
                 tags: [
                   { label: '방제효과', color: '#06b6d4' },
-                  { label: '오일펜스·유회수기·유처리제', color: 'var(--color-success)' },
+                  { label: '오일펜스·유회수기·유처리제', color: 'var(--color-accent)' },
                 ],
                 year: '2014',
                 title: '유출유 확산예측 모델의 방제효과 모델링 기술 연구',
@@ -1436,7 +1221,6 @@ function KospsPanel() {
                 style={{
                   background: 'var(--bg-surface)',
                   border: '1px solid rgba(6,182,212,.18)',
-                  borderLeft: '3px solid #06b6d4',
                 }}
               >
                 <div className="flex items-center justify-between mb-1.5">
@@ -1449,7 +1233,7 @@ function KospsPanel() {
                           background: `${t.color}1A`,
                           border: `1px solid ${t.color}38`,
                           borderRadius: '4px',
-                          fontSize: '10px',
+                          fontSize: 'var(--font-size-label-2)',
                           fontWeight: 700,
                           color: t.color,
                         }}
@@ -1458,11 +1242,11 @@ function KospsPanel() {
                       </span>
                     ))}
                   </div>
-                  <span className="text-[10px] text-fg-disabled">{paper.year}</span>
+                  <span className="text-label-2 text-fg-disabled">{paper.year}</span>
                 </div>
-                <div className="text-[11px] font-bold mb-1">{paper.title}</div>
-                <div className="text-[11px] mb-1.5 text-fg-disabled">{paper.authors}</div>
-                <div className="text-[11px] text-fg-sub leading-[1.7]">{paper.desc}</div>
+                <div className="text-label-2 font-bold mb-1">{paper.title}</div>
+                <div className="text-label-2 mb-1.5 text-fg-disabled">{paper.authors}</div>
+                <div className="text-label-2 text-fg-sub leading-[1.7]">{paper.desc}</div>
               </div>
             ))}
           </div>
@@ -1475,11 +1259,17 @@ function KospsPanel() {
           className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
           onClick={() => setPapersOpen(!papersOpen)}
         >
-          <span style={{ ...tag('var(--color-accent)'), fontWeight: 700, fontSize: '12px' }}>
+          <span
+            style={{
+              ...tag('var(--fg-sub)'),
+              fontWeight: 700,
+              fontSize: 'var(--font-size-label-1)',
+            }}
+          >
             📄 국내 학술논문
           </span>
           <span
-            className="text-[11px] ml-1"
+            className="text-label-2 ml-1"
             style={{
               color: 'var(--fg-disabled)',
               transition: 'transform .2s',
@@ -1491,7 +1281,7 @@ function KospsPanel() {
           </span>
         </div>
         {papersOpen && (
-          <div className="flex flex-col gap-1.5 mb-3.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 mb-3.5 text-label-2 text-fg-sub">
             {[
               {
                 num: '①',
@@ -1518,7 +1308,7 @@ function KospsPanel() {
                 journal: '한국해양학회지',
                 detail: '| 2000',
                 desc: '취송류 경험식 V=0.029·Vw, θ=θw+18.6° 도출 · 국내 연안 현장 관측 기반',
-                color: 'var(--color-warning)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '④',
@@ -1527,7 +1317,7 @@ function KospsPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.3154 | 2010',
                 desc: '허베이 스피리트호 유출사고 당시 확산예측시스템 결과 검증 · Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증',
-                color: 'var(--color-danger)',
+                color: 'var(--color-info)',
                 tags: ['허베이스피리트', 'Radarsat 위성영상', 'GNOME 비교검증'],
               },
               {
@@ -1537,7 +1327,7 @@ function KospsPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.17-18 | 2013',
                 desc: 'Monte Carlo Simulation + 수치 추적자 방법 기반 3차원 유출유 확산예측모델 개발 · 이송·난류확산·침강·혼탁효과·풍화작용 통합 모의 · 허베이 스피리트호 720시간 적용 검증',
-                color: 'var(--color-tertiary)',
+                color: 'var(--color-accent)',
                 tags: ['3D 확산모델', 'Monte Carlo', '수치추적자', '720시간 검증'],
               },
               {
@@ -1547,7 +1337,7 @@ function KospsPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.2353 | 2014',
                 desc: 'GS 칼텍스 송유관 유출사고 · Captain Vangelis 유출사고에 모델 적용 · 현장 보고자료와 비교 분석 · 기존 모델 개선방안 도출 · 신규 모델링 기술 개발 방안',
-                color: 'var(--color-caution)',
+                color: 'var(--fg-default)',
                 tags: ['GS칼텍스', 'Captain Vangelis', '현장검증', '모델개선'],
               },
               {
@@ -1557,7 +1347,7 @@ function KospsPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.2354 | 2014',
                 desc: '오일펜스 차단 포집 효과(누유율) · 유처리제 분산효과(확산면적 변화) · 유회수기 회수효과(해상 분포량 변화) 개별 모델 개발 및 확산예측 모델과 통합',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
                 tags: ['오일펜스', '유처리제', '유회수기', '방제효과 통합'],
               },
               {
@@ -1604,7 +1394,7 @@ function KospsPanel() {
                 }}
               >
                 <div
-                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0"
+                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                   style={{ background: `${paper.color}1F` }}
                 >
                   {paper.num}
@@ -1638,11 +1428,17 @@ function KospsPanel() {
           className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
           onClick={() => setIntlPapersOpen(!intlPapersOpen)}
         >
-          <span style={{ ...tag('var(--color-success)'), fontWeight: 700, fontSize: '12px' }}>
+          <span
+            style={{
+              ...tag('var(--fg-sub)'),
+              fontWeight: 700,
+              fontSize: 'var(--font-size-label-1)',
+            }}
+          >
             🌐 국외 핵심 논문
           </span>
           <span
-            className="text-[11px] ml-1"
+            className="text-label-2 ml-1"
             style={{
               color: 'var(--fg-disabled)',
               transition: 'transform .2s',
@@ -1654,7 +1450,7 @@ function KospsPanel() {
           </span>
         </div>
         {intlPapersOpen && (
-          <div className="flex flex-col gap-1.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             {[
               {
                 num: '①',
@@ -1663,7 +1459,7 @@ function KospsPanel() {
                 journal: 'Geoscientific Model Development',
                 detail: 'Vol.11, pp.1405-1420 | 2018',
                 desc: 'OpenDrift 프레임워크 전체 설계·구현·검증 · Python 모듈화 구조 · OpenOil 유출유 모듈 포함',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '②',
@@ -1673,7 +1469,7 @@ function KospsPanel() {
                 journal: 'J. Geophys. Res. Oceans',
                 detail: '| 2013',
                 desc: 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 검증',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '③',
@@ -1682,7 +1478,7 @@ function KospsPanel() {
                 journal: 'Marine Pollution Bulletin',
                 detail: '| 2019',
                 desc: '3D 유출유 수직 분포 모의 · 해저면 도달 경로 분석 · 풍화 통합 수치 검증',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '④',
@@ -1691,7 +1487,7 @@ function KospsPanel() {
                 journal: 'Oil on the Sea, Plenum Press',
                 detail: '| 1969',
                 desc: '유출유 퍼짐 3단계 이론(중력-관성력, 관성력-점성력, 표면장력-점성력) 원전. KOSPS 풍화모델 기반',
-                color: 'var(--color-warning)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '⑤',
@@ -1700,7 +1496,7 @@ function KospsPanel() {
                 journal: 'Environmental Science & Technology',
                 detail: '18(11) | 1984',
                 desc: '증발 해석 모델 · 증류 데이터 기반 증발비 산정 · KOSPS 증발 서브모듈 직접 적용',
-                color: 'var(--color-warning)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '⑥',
@@ -1709,7 +1505,7 @@ function KospsPanel() {
                 journal: 'Environmental Science & Technology',
                 detail: '| 1980',
                 desc: '유상화(water-in-oil) 모델 · 소산·유상화 통합 수리 공식. KOSPS·OpenOil 양쪽 공통 적용',
-                color: 'var(--color-warning)',
+                color: 'var(--color-accent)',
               },
               {
                 num: '⑦',
@@ -1719,7 +1515,7 @@ function KospsPanel() {
                 journal: 'Commun. ACM 17(1) | 1974 / ACM TOMS | 1978',
                 detail: '',
                 desc: '2차원 5차다항식 보간법(Bivariate Quintic). KOSPS 수심·수온 격자 보간 알고리즘 직접 적용',
-                color: 'var(--color-tertiary)',
+                color: 'var(--color-accent)',
               },
             ].map((paper) => (
               <div
@@ -1735,7 +1531,7 @@ function KospsPanel() {
                 }}
               >
                 <div
-                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0"
+                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                   style={{ background: `${paper.color}1F` }}
                 >
                   {paper.num}
@@ -1761,54 +1557,41 @@ function KospsPanel() {
 function PoseidonPanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(59,130,246,.06),rgba(168,85,247,.04))',
-          border: '1px solid rgba(59,130,246,.25)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-info),var(--color-tertiary))' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-3 mb-3">
-          <div
-            className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl"
-            style={{ background: 'rgba(59,130,246,.15)', border: '1px solid rgba(59,130,246,.3)' }}
-          >
+          <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-heading-3 bg-bg-elevated border border-stroke">
             🔵
           </div>
           <div>
-            <div className="text-[15px] font-bold text-color-info">
+            <div className="text-title-2 font-bold text-fg">
               POSEIDON (입자추적 최적화 예측 시스템)
             </div>
-            <div className="text-[11px] mt-0.5 text-fg-disabled">
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델
               기반 · 뜰개 관측 매개변수 자동 최적화
             </div>
           </div>
         </div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           김충기·김도연 외(등록특허 10-1868791, 2018)가 개발한 POSEIDON은 실제 해양에 투하한{' '}
-          <b className="text-color-info">뜰개(Drifter) 관측 경로</b>와 수치모델 예측값을 비교하여,
+          <b className="text-color-accent">뜰개(Drifter) 관측 경로</b>와 수치모델 예측값을 비교하여,
           입자추적 모델의 매개변수를{' '}
-          <b className="text-color-tertiary">GA·DE·HS·PSO 알고리즘으로 자동 최적화</b>하는 핵심
-          기술을 보유합니다. 해양순환 기반 모델은 포르투갈 IST/MARETEC이 개발한{' '}
+          <b className="text-color-accent">GA·DE·HS·PSO 알고리즘으로 자동 최적화</b>하는 핵심 기술을
+          보유합니다. 해양순환 기반 모델은 포르투갈 IST/MARETEC이 개발한{' '}
           <b className="text-color-accent">MOHID 3D 순환모델</b>을 사용합니다.
         </div>
         <div
-          className="mt-2.5 px-3 py-2 rounded-md text-[10px]"
+          className="mt-2.5 px-3 py-2 rounded-md text-label-2"
           style={{
             background: 'rgba(59,130,246,.06)',
             border: '1px solid rgba(59,130,246,.15)',
             color: 'var(--fg-disabled)',
           }}
         >
-          📚 참고문헌 ①: 김도연·김용혁, &quot;유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및
+          참고문헌 ①: 김도연·김용혁, &quot;유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및
           이를 이용한 예측 시스템&quot;, 등록특허 10-1868791, 2018.
           <br />
-          📚 참고문헌 ②: 이재호·임병준·김도연 외, &quot;2016년 동아시아 해역의 MOHID 지역 해양 순환
+          참고문헌 ②: 이재호·임병준·김도연 외, &quot;2016년 동아시아 해역의 MOHID 지역 해양 순환
           모델 검증&quot;, 한국지구과학회지 39(5), pp.436-457, 2018.
         </div>
       </div>
@@ -1816,15 +1599,21 @@ function PoseidonPanel() {
       {/* 등록특허 */}
       <div className={`${card} ${cardBg}`}>
         <div className="flex items-center gap-1.5 mb-2">
-          <span style={{ ...tag('var(--color-caution)'), fontWeight: 700, fontSize: '12px' }}>
-            📜 등록특허
+          <span
+            style={{
+              ...tag('var(--fg-sub)'),
+              fontWeight: 700,
+              fontSize: 'var(--font-size-label-1)',
+            }}
+          >
+            등록특허
           </span>
         </div>
         <div
           className="rounded-lg p-3"
           style={{
             background: 'var(--bg-base)',
-            border: '1px solid rgba(59,130,246,.2)',
+            border: '1px solid var(--stroke-default)',
             display: 'grid',
             gridTemplateColumns: 'auto 1fr',
             gap: '12px',
@@ -1833,23 +1622,23 @@ function PoseidonPanel() {
           <div
             className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap"
             style={{
-              background: 'rgba(59,130,246,.12)',
-              border: '1px solid rgba(59,130,246,.25)',
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
               fontFamily: 'var(--font-mono)',
             }}
           >
-            <div className="text-[10px] text-fg-disabled">등록번호</div>
-            <div className="text-[11px] font-bold text-color-info">10-1868791</div>
-            <div className="text-[10px] mt-0.5 text-fg-disabled">2018 등록</div>
+            <div className="text-label-2 text-fg-disabled">등록번호</div>
+            <div className="text-label-2 font-bold text-fg">10-1868791</div>
+            <div className="text-label-2 mt-0.5 text-fg-disabled">2018 등록</div>
           </div>
           <div>
-            <div className="text-[11px] font-bold mb-1">
+            <div className="text-label-2 font-bold mb-1">
               유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측 시스템
               (POSEIDON)
             </div>
-            <div className="text-[10px] text-fg-sub">
-              <span className="text-color-info">발명자</span> : 김도연 · 김용혁 · 김충기 외 |{' '}
-              <span className="text-color-info">출원인</span> : (주)아라종합기술
+            <div className="text-label-2 text-fg-sub">
+              <span className="text-fg font-medium">발명자</span> : 김도연 · 김용혁 · 김충기 외 |{' '}
+              <span className="text-fg font-medium">출원인</span> : (주)아라종합기술
             </div>
             <div className="flex flex-wrap gap-1 mt-1.5">
               {[
@@ -1859,7 +1648,7 @@ function PoseidonPanel() {
                 'PSO(입자군집최적화)',
                 '뜰개 자동 동화',
               ].map((t) => (
-                <span key={t} style={tag('var(--color-info)')}>
+                <span key={t} style={tag('var(--fg-sub)')}>
                   {t}
                 </span>
               ))}
@@ -1869,16 +1658,13 @@ function PoseidonPanel() {
       </div>
 
       <div className="grid grid-cols-2 gap-3 mb-4">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-accent)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-accent)')}>🌊 MOHID 해양순환모델 (기반 모델)</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>MOHID 해양순환모델 (기반 모델)</div>
           <div className={`${bodyText} mb-2.5`}>
             포르투갈 IST/MARETEC에서 1985년부터 개발한 3D 수치 해양순환모델. 60여 개 모듈을 보유하며
             조류·폭풍해일·수온·염분·난류·유출유 확산 등을 통합 모의합니다.
           </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
             {[
               { label: '격자 구성', desc: '동아시아 9km + 한반도 3km (Nesting)' },
               { label: '수직 좌표', desc: 'σ + Z-level 혼합 (GVC)' },
@@ -1899,16 +1685,13 @@ function PoseidonPanel() {
             ))}
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-tertiary)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-tertiary)')}>⚙️ 입자추적 매개변수 자동 최적화</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>입자추적 매개변수 자동 최적화</div>
           <div className={`${bodyText} mb-2.5`}>
             뜰개 관측 경로와 제1 모델 예측값의 단위시간별 변화량을 비교하여 제2 모델의 매개변수를
             반복 최적화합니다.
           </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
             {[
               { label: '최적화 알고리즘', desc: 'GA · DE · HS · PSO 중 선택' },
               { label: '입력 데이터', desc: '유속·풍속 벡터 + 제1모델 변화량' },
@@ -1919,12 +1702,12 @@ function PoseidonPanel() {
                 key={t.label}
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(168,85,247,.04)',
-                  border: '1px solid rgba(168,85,247,.12)',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <span style={{ color: 'var(--color-tertiary)', fontWeight: 700 }}>{t.label}</span> :{' '}
+                <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>{t.label}</span> :{' '}
                 {t.desc}
               </div>
             ))}
@@ -1934,10 +1717,10 @@ function PoseidonPanel() {
 
       {/* 핵심 수식 */}
       <div className={`${card} ${cardBg}`}>
-        <div style={labelStyle('var(--color-info)')}>📐 POSEIDON 입자추적 핵심 수식</div>
+        <div style={labelStyle('var(--color-info)')}>POSEIDON 입자추적 핵심 수식</div>
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <div className="text-[11px] font-semibold mb-1.5 text-fg-disabled">
+            <div className="text-label-2 font-medium mb-1.5 text-fg-disabled">
               제1 입자추적 모델 (기본)
             </div>
             <div className={codeBox}>
@@ -1945,12 +1728,12 @@ function PoseidonPanel() {
               <br />
               Model_y = Δt × current_v + Δt × c × wind_v
             </div>
-            <div className="text-[10px] mt-1.5 text-fg-disabled">
+            <div className="text-label-2 mt-1.5 text-fg-disabled">
               c : 풍속 가중치 (예: c=0.3 → 바람의 30% 반영)
             </div>
           </div>
           <div>
-            <div className="text-[11px] font-semibold mb-1.5 text-fg-disabled">
+            <div className="text-label-2 font-medium mb-1.5 text-fg-disabled">
               제2 입자추적 모델 (최적화 후)
             </div>
             <div className={codeBox}>
@@ -1962,7 +1745,7 @@ function PoseidonPanel() {
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ a5·Model_x +
               a6·Model_y + a7
             </div>
-            <div className="text-[10px] mt-1.5 text-fg-disabled">
+            <div className="text-label-2 mt-1.5 text-fg-disabled">
               a1~a7 : GA·DE·PSO로 최적화된 매개변수
             </div>
           </div>
@@ -1973,7 +1756,7 @@ function PoseidonPanel() {
         <div style={labelStyle('var(--fg-default)')}>🔄 POSEIDON_V2 상시 운용 체계</div>
 
         {/* 외부 입력 자료 */}
-        <div className="text-[10px] font-bold mb-1.5 mt-1 text-fg-disabled">외부 입력 자료</div>
+        <div className="text-label-2 font-bold mb-1.5 mt-1 text-fg-disabled">외부 입력 자료</div>
         <div className="flex items-center justify-center gap-0 mb-3">
           {[
             {
@@ -1986,34 +1769,37 @@ function PoseidonPanel() {
               label: 'GDAPS(UM)',
               sub: '바람·기온·기압',
               detail: 'g512_v070_erea_*.grib2',
-              color: 'var(--color-success)',
+              color: 'var(--color-accent)',
             },
             {
               label: 'DAIN(.enc)',
               sub: '격자·수심·해안선·조석',
               detail: '정적 바이너리 데이터',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
             },
             {
               label: '뜰개(Drifter)',
               sub: '관측 표류 경로',
               detail: 'GA/DE/PSO 동화용',
-              color: 'var(--color-tertiary)',
+              color: 'var(--color-accent)',
             },
           ].map((node, i) => (
             <div key={node.label} className="flex items-center">
               <div
-                className="px-2.5 py-2 rounded-lg text-center text-[10px]"
+                className="px-2.5 py-2 rounded-lg text-center text-label-2"
                 style={{
                   background: `${node.color}14`,
                   border: `1px solid ${node.color}33`,
                 }}
               >
-                <div className="font-bold text-[11px]" style={{ color: node.color }}>
+                <div className="font-bold text-label-2" style={{ color: node.color }}>
                   {node.label}
                 </div>
                 <div className="text-fg-sub">{node.sub}</div>
-                <div className="mt-0.5" style={{ color: 'var(--fg-disabled)', fontSize: '9px' }}>
+                <div
+                  className="mt-0.5"
+                  style={{ color: 'var(--fg-disabled)', fontSize: 'var(--font-size-caption)' }}
+                >
                   {node.detail}
                 </div>
               </div>
@@ -2024,13 +1810,16 @@ function PoseidonPanel() {
           ))}
         </div>
 
+        {/* 구분선 */}
+        <div className="border-t border-stroke my-3" />
+
         {/* 중앙 화살표 */}
-        <div className="text-center text-[10px] mb-2 text-fg-disabled">
+        <div className="text-center text-label-2 mb-2 text-fg-disabled">
           ▼ DATA → PREP → 격자 보간/좌표 변환 ▼
         </div>
 
         {/* 4대 도메인 실행 모듈 */}
-        <div className="text-[10px] font-bold mb-1.5 text-fg-disabled">
+        <div className="text-label-2 font-bold mb-1.5 text-fg-disabled">
           POSEIDON 4대 실행 모듈 (EA012 대격자 → KO108 연안 상세격자)
         </div>
         <div className="grid grid-cols-4 gap-2 mb-3">
@@ -2056,7 +1845,7 @@ function PoseidonPanel() {
               script: 'RUN-TIDE.sh',
               engine: 'MOHID-TIDE',
               desc: '조석 (M2·S2·K1·O1)',
-              color: 'var(--color-success)',
+              color: 'var(--color-accent)',
               icon: '🌀',
             },
             {
@@ -2064,7 +1853,7 @@ function PoseidonPanel() {
               script: 'RUN-OILS.sh',
               engine: 'OILS-RUN',
               desc: '유출유 입자추적·확산',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
               icon: '🛢️',
               strong: true,
             },
@@ -2075,27 +1864,26 @@ function PoseidonPanel() {
               style={{
                 background: `${m.color}0A`,
                 border: m.strong ? `2px solid ${m.color}4D` : `1px solid ${m.color}25`,
-                borderTop: `3px solid ${m.color}`,
               }}
             >
-              <div className="text-base mb-1">{m.icon}</div>
-              <div className="text-[12px] font-bold" style={{ color: m.color }}>
+              <div className="text-title-2 mb-1">{m.icon}</div>
+              <div className="text-label-1 font-bold" style={{ color: m.color }}>
                 {m.label}
               </div>
-              <div className="text-[9px] mt-0.5 text-fg-sub">{m.engine}</div>
+              <div className="text-caption mt-0.5 text-fg-sub">{m.engine}</div>
               <div
-                className="text-[9px] mt-0.5 px-1 py-0.5 rounded"
+                className="text-caption mt-0.5 px-1 py-0.5 rounded"
                 style={{ background: `${m.color}14`, color: 'var(--fg-disabled)' }}
               >
                 {m.script}
               </div>
-              <div className="text-[9px] mt-1 text-fg-sub">{m.desc}</div>
+              <div className="text-caption mt-1 text-fg-sub">{m.desc}</div>
             </div>
           ))}
         </div>
 
         {/* 화살표 + 최적화 */}
-        <div className="text-center text-[10px] mb-2 text-fg-disabled">
+        <div className="text-center text-label-2 mb-2 text-fg-disabled">
           ▼ HYDR + WAVE + TIDE → OILS 강제력 입력 ▼ 뜰개 관측 → GA/DE/PSO 매개변수 자동 최적화 ▼
         </div>
 
@@ -2107,13 +1895,13 @@ function PoseidonPanel() {
             {
               label: '방제 의사결정',
               sub: '자원배치·전략',
-              color: 'var(--color-success)',
+              color: 'var(--color-accent)',
               strong: true,
             },
           ].map((node, i) => (
             <div key={node.label} className="flex items-center">
               <div
-                className="px-3 py-2 rounded-lg text-center text-[11px]"
+                className="px-3 py-2 rounded-lg text-center text-label-2"
                 style={{
                   background: `${node.color}14`,
                   border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
@@ -2122,7 +1910,7 @@ function PoseidonPanel() {
                 <div className="font-bold" style={{ color: node.color }}>
                   {node.label}
                 </div>
-                <div className="text-[10px] text-fg-disabled">{node.sub}</div>
+                <div className="text-label-2 text-fg-disabled">{node.sub}</div>
               </div>
               {i < 2 && (
                 <div className="w-[30px] h-px" style={{ background: 'var(--stroke-light)' }} />
@@ -2132,7 +1920,7 @@ function PoseidonPanel() {
         </div>
 
         <div
-          className="text-[10px] text-center mt-2.5 px-3 py-1.5 rounded-md"
+          className="text-label-2 text-center mt-2.5 px-3 py-1.5 rounded-md"
           style={{
             background: 'rgba(59,130,246,.04)',
             border: '1px solid rgba(59,130,246,.12)',
@@ -2146,40 +1934,30 @@ function PoseidonPanel() {
           className="mt-2.5 p-2 rounded-md"
           style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}
         >
-          <div className="text-[10px] font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
-          <div className="text-[10px] text-fg-sub leading-[1.6]">
+          <div className="text-label-2 font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
+          <div className="text-label-2 text-fg-sub leading-[1.6]">
             조류: 무한 예보 가능
             <br />
             해류(HYCOM): <b>5일치</b> 제한
             <br />
-            기온·취송류: <b className="text-color-warning">3일치</b> 제한
-            <br />→ <b className="text-color-danger">72h 초과 예측 시 신뢰도 저하</b>
+            기온·취송류: <b className="text-color-caution">3일치</b> 제한
+            <br />→ <b className="text-color-caution">72h 초과 예측 시 신뢰도 저하</b>
           </div>
         </div>
       </div>
 
       {/* POSEIDON관련 유출유 확산예측 논문 */}
-      <div
-        className="rounded-xl p-4 relative overflow-hidden mt-3.5"
-        style={{
-          background: 'linear-gradient(135deg,rgba(59,130,246,.05),rgba(168,85,247,.03))',
-          border: '1px solid rgba(59,130,246,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,#3b82f6,#a855f7)' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-2.5 mb-3.5">
           <div
-            className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0"
-            style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)' }}
+            className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-title-3 shrink-0"
+            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(59,130,246,.25)' }}
           >
             📄
           </div>
           <div>
-            <div className="text-xs font-bold">POSEIDON관련 유출유 확산예측 논문</div>
-            <div className="text-[10px] mt-0.5 text-fg-disabled">
+            <div className="text-label-1 font-bold">POSEIDON관련 유출유 확산예측 논문</div>
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               포세이돈 시스템 소개·활용 · 최적 방제전략 · 원격탐사 연동 · MOHID 검증 —
               한국해양환경·에너지학회 외
             </div>
@@ -2190,7 +1968,7 @@ function PoseidonPanel() {
             {
               tags: [
                 { label: '시스템 소개', color: '#3b82f6' },
-                { label: '활용사례', color: 'var(--color-success)' },
+                { label: '활용사례', color: 'var(--color-accent)' },
               ],
               year: '2019',
               title: '해양오염방제 의사결정지원 시스템(포세이돈) 소개 및 활용사례',
@@ -2201,7 +1979,7 @@ function PoseidonPanel() {
             {
               tags: [
                 { label: '방제전략', color: '#3b82f6' },
-                { label: '정책수립', color: 'var(--color-warning)' },
+                { label: '정책수립', color: 'var(--color-accent)' },
               ],
               year: '2020',
               title: '포세이돈 시스템을 활용한 최적 해양오염 방제전략 및 정책수립',
@@ -2237,7 +2015,6 @@ function PoseidonPanel() {
               style={{
                 background: 'var(--bg-surface)',
                 border: '1px solid rgba(59,130,246,.18)',
-                borderLeft: '3px solid #3b82f6',
               }}
             >
               <div className="flex items-center justify-between mb-1.5">
@@ -2250,7 +2027,7 @@ function PoseidonPanel() {
                         background: `${t.color}1A`,
                         border: `1px solid ${t.color}38`,
                         borderRadius: '4px',
-                        fontSize: '10px',
+                        fontSize: 'var(--font-size-label-2)',
                         fontWeight: 700,
                         color: t.color,
                       }}
@@ -2259,11 +2036,11 @@ function PoseidonPanel() {
                     </span>
                   ))}
                 </div>
-                <span className="text-[10px] text-fg-disabled">{paper.year}</span>
+                <span className="text-label-2 text-fg-disabled">{paper.year}</span>
               </div>
-              <div className="text-[11px] font-bold mb-1">{paper.title}</div>
-              <div className="text-[11px] mb-1.5 text-fg-disabled">{paper.authors}</div>
-              <div className="text-[11px] text-fg-sub leading-[1.7]">{paper.desc}</div>
+              <div className="text-label-2 font-bold mb-1">{paper.title}</div>
+              <div className="text-label-2 mb-1.5 text-fg-disabled">{paper.authors}</div>
+              <div className="text-label-2 text-fg-sub leading-[1.7]">{paper.desc}</div>
             </div>
           ))}
         </div>
@@ -2276,34 +2053,21 @@ function PoseidonPanel() {
 function OpenDriftPanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(34,197,94,.06),rgba(6,182,212,.04))',
-          border: '1px solid rgba(34,197,94,.25)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-success),var(--color-accent))' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-3 mb-3">
-          <div
-            className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl"
-            style={{ background: 'rgba(34,197,94,.15)', border: '1px solid rgba(34,197,94,.3)' }}
-          >
+          <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-heading-3 bg-bg-elevated border border-stroke">
             🟢
           </div>
           <div>
-            <div className="text-[15px] font-bold text-color-info">
+            <div className="text-title-2 font-bold text-fg">
               OpenDrift (오픈소스 라그랑지안 확산 프레임워크)
             </div>
-            <div className="text-[11px] mt-0.5 text-fg-disabled">
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증
             </div>
           </div>
         </div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           Dagestad et al.(2018)이 개발한 OpenDrift는 유출유·SAR·표류물·부유입자 등 다양한 해양 확산
           현상을 모의하는{' '}
           <b className="text-color-info">Python 기반 오픈소스 라그랑지안 프레임워크</b>입니다.
@@ -2312,24 +2076,24 @@ function OpenDriftPanel() {
         </div>
         <div className="flex gap-2 flex-wrap mt-2.5">
           <span
-            className="px-3.5 py-1.5 rounded-md text-[11px] font-semibold"
+            className="px-3.5 py-1.5 rounded-md text-label-2 font-medium"
             style={{
-              border: '1px solid rgba(34,197,94,.3)',
-              background: 'rgba(34,197,94,.08)',
-              color: 'var(--color-success)',
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
+              color: 'var(--color-accent)',
             }}
           >
             🔗 공식 문서 (opendrift.github.io)
           </span>
           <span
-            className="px-3.5 py-1.5 rounded-md text-[11px]"
+            className="px-3.5 py-1.5 rounded-md text-label-2"
             style={{
               border: '1px solid rgba(6,182,212,.2)',
               background: 'rgba(6,182,212,.06)',
               color: 'var(--color-accent)',
             }}
           >
-            📚 Dagestad et al., Geosci. Model Dev. 11, 2018
+            Dagestad et al., Geosci. Model Dev. 11, 2018
           </span>
         </div>
       </div>
@@ -2338,12 +2102,12 @@ function OpenDriftPanel() {
         {[
           {
             title: '🧩 모듈 구성',
-            color: 'var(--color-success)',
+            color: 'var(--color-accent)',
             items: [
-              { html: '<b style="color:var(--color-success)">OpenOil</b> : 유출유 확산·풍화' },
-              { html: '<b style="color:var(--color-success)">OceanDrift</b> : 표류물 추적' },
-              { html: '<b style="color:var(--color-success)">ShipDrift</b> : 선박 표류' },
-              { html: '<b style="color:var(--color-success)">SedimentDrift</b> : 부유퇴적물' },
+              { html: '<b style="color:var(--color-accent)">OpenOil</b> : 유출유 확산·풍화' },
+              { html: '<b style="color:var(--color-accent)">OceanDrift</b> : 표류물 추적' },
+              { html: '<b style="color:var(--color-accent)">ShipDrift</b> : 선박 표류' },
+              { html: '<b style="color:var(--color-accent)">SedimentDrift</b> : 부유퇴적물' },
             ],
           },
           {
@@ -2367,13 +2131,9 @@ function OpenDriftPanel() {
             ],
           },
         ].map((s) => (
-          <div
-            key={s.title}
-            className={`${card} ${cardBg}`}
-            style={{ borderTop: `3px solid ${s.color}`, margin: 0 }}
-          >
+          <div key={s.title} className={`${card} ${cardBg}`} style={{ margin: 0 }}>
             <div style={labelStyle(s.color)}>{s.title}</div>
-            <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
               {s.items.map((item, idx) =>
                 'html' in item ? (
                   <div
@@ -2415,13 +2175,13 @@ function OpenDriftPanel() {
             {
               icon: '☁️',
               title: '증발',
-              color: 'var(--color-caution)',
+              color: 'var(--fg-default)',
               desc: '성분별 증기압·분자량 기반 다성분 증발',
             },
             {
               icon: '🌊',
               title: '유화',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
               desc: 'Mackay 유화 방정식·함수율 추적',
             },
             {
@@ -2433,7 +2193,7 @@ function OpenDriftPanel() {
             {
               icon: '🦠',
               title: '생분해',
-              color: 'var(--color-success)',
+              color: 'var(--color-accent)',
               desc: '수온 의존 미생물 분해율 모의',
             },
           ].map((w) => (
@@ -2442,36 +2202,36 @@ function OpenDriftPanel() {
               className="p-2.5 rounded-lg text-center"
               style={{ background: `${w.color}0A`, border: `1px solid ${w.color}25` }}
             >
-              <div className="text-base mb-1">{w.icon}</div>
-              <div className="text-[11px] font-semibold" style={{ color: w.color }}>
+              <div className="text-title-2 mb-1">{w.icon}</div>
+              <div className="text-label-2 font-medium" style={{ color: w.color }}>
                 {w.title}
               </div>
-              <div className="text-[10px] mt-1 text-fg-disabled leading-normal">{w.desc}</div>
+              <div className="text-label-2 mt-1 text-fg-disabled leading-normal">{w.desc}</div>
             </div>
           ))}
         </div>
       </div>
       {/* 상시 운용 통신 체계 */}
       <div className={`${card} ${cardBg}`}>
-        <div style={labelStyle('var(--fg-default)')}>🔄 상시 운용 통신 체계</div>
+        <div style={labelStyle('var(--fg-default)')}>상시 운용 통신 체계</div>
         <div className="flex items-center justify-center gap-0 py-3">
           {[
             { label: 'NEMO/ROMS', sub: '해류 강제력', color: 'var(--color-accent)' },
             { label: 'HYCOM', sub: '전지구 해류', color: 'var(--color-info)' },
-            { label: 'ECMWF/GFS', sub: 'Wind·파랑', color: 'var(--color-success)' },
-            { label: 'NOAA Oil Lib', sub: '유종 물성 DB', color: 'var(--color-warning)' },
+            { label: 'ECMWF/GFS', sub: 'Wind·파랑', color: 'var(--color-info)' },
+            { label: 'NOAA Oil Lib', sub: '유종 물성 DB', color: 'var(--color-info)' },
             {
               label: 'OpenDrift',
               sub: 'Python 모듈 구동',
-              color: 'var(--color-success)',
+              color: 'var(--color-info)',
               strong: true,
             },
             { label: 'OpenOil', sub: '유출유 풍화·확산', color: 'var(--color-info)', strong: true },
-            { label: '결과 표출', sub: 'NetCDF·시각화', color: 'var(--color-tertiary)' },
+            { label: '결과 표출', sub: 'NetCDF·시각화', color: 'var(--color-accent)' },
           ].map((node, i) => (
             <div key={node.label} className="flex items-center">
               <div
-                className="px-3 py-2.5 rounded-lg text-center text-[11px]"
+                className="px-3 py-2.5 rounded-lg text-center text-label-2"
                 style={{
                   background: `${node.color}14`,
                   border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
@@ -2480,7 +2240,7 @@ function OpenDriftPanel() {
                 <div className="font-bold" style={{ color: node.color }}>
                   {node.label}
                 </div>
-                <div className="text-[10px] text-fg-disabled">{node.sub}</div>
+                <div className="text-label-2 text-fg-disabled">{node.sub}</div>
               </div>
               {i < 6 && (
                 <div className="w-[24px] h-px" style={{ background: 'var(--stroke-light)' }} />
@@ -2488,34 +2248,26 @@ function OpenDriftPanel() {
             </div>
           ))}
         </div>
-        <div className="text-[10px] text-center mt-1 text-fg-disabled">
+        <div className="text-label-2 text-center mt-1 text-fg-disabled">
           해양모델(NEMO·ROMS·HYCOM) + 기상자료(ECMWF·GFS) → NOAA Oil Library 유종 매칭 →
           OpenDrift/OpenOil 모듈 구동 → NetCDF 결과 출력·시각화
         </div>
       </div>
 
       {/* 관련 논문 카드 섹션 */}
-      <div
-        className="rounded-xl p-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(59,130,246,.05),rgba(34,197,94,.03))',
-          border: '1px solid rgba(59,130,246,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,#3b82f6,#a855f7,#06b6d4)' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div className="flex items-center gap-2.5 mb-3.5">
           <div
-            className="w-8 h-8 rounded-lg flex items-center justify-center text-base shrink-0"
-            style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)' }}
+            className="w-8 h-8 rounded-lg flex items-center justify-center text-title-2 shrink-0"
+            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(59,130,246,.25)' }}
           >
             📄
           </div>
           <div>
-            <div className="text-xs font-bold">OpenDrift / OpenOil 국내 해역 적용 연구 논문</div>
-            <div className="text-[10px] mt-0.5 text-fg-disabled">
+            <div className="text-label-1 font-bold">
+              OpenDrift / OpenOil 국내 해역 적용 연구 논문
+            </div>
+            <div className="text-label-2 mt-0.5 text-fg-disabled">
               한국 연안 유출유 확산 수치모의 관련 핵심 논문 3편 — WING 모델 이론 근거
             </div>
           </div>
@@ -2526,16 +2278,15 @@ function OpenDriftPanel() {
             className="rounded-[10px] p-3.5"
             style={{
               background: 'var(--bg-surface)',
-              border: '1px solid rgba(59,130,246,.2)',
-              borderLeft: '4px solid #3b82f6',
+              border: '1px solid var(--stroke-default)',
             }}
           >
             <div className="flex items-start justify-between gap-2.5 mb-2">
               <div className="flex items-center gap-1.5 flex-wrap">
                 {[
                   { label: '국제저널', color: '#3b82f6' },
-                  { label: 'OpenOil 적용', color: 'var(--color-success)' },
-                  { label: '허베이 스피리트', color: 'var(--color-warning)' },
+                  { label: 'OpenOil 적용', color: 'var(--color-info)' },
+                  { label: '허베이 스피리트', color: 'var(--color-info)' },
                 ].map((t) => (
                   <span
                     key={t.label}
@@ -2545,7 +2296,7 @@ function OpenDriftPanel() {
                       background: `${t.color}1F`,
                       border: `1px solid ${t.color}40`,
                       borderRadius: '4px',
-                      fontSize: '10px',
+                      fontSize: 'var(--font-size-label-2)',
                       fontWeight: 700,
                       color: t.color,
                     }}
@@ -2554,24 +2305,24 @@ function OpenDriftPanel() {
                   </span>
                 ))}
               </div>
-              <span className="text-[10px] whitespace-nowrap text-fg-disabled">2024</span>
+              <span className="text-label-2 whitespace-nowrap text-fg-disabled">2024</span>
             </div>
-            <div className="text-[11px] font-bold mb-1 leading-normal">
+            <div className="text-label-2 font-bold mb-1 leading-normal">
               Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various
               Input Parametric Models
             </div>
-            <div className="text-[11px] mb-2 text-fg-disabled">
+            <div className="text-label-2 mb-2 text-fg-disabled">
               Hai Van Dang, Suchan Joo, Junhyeok Lim, Jinhwan Hur, Sungwon Shin | Hanyang University
               ERICA | Journal of Ocean Engineering and Technology, 2024
             </div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>연구 목적</b>
                 <br />
                 OpenOil 모델에 다양한 해양-기상 강제력(Met-Ocean) 조합을 적용하여 한국 연안 유출유
                 이동 예측 정확도를 비교 평가. 허베이 스피리트(2007) 사고를 대상으로 6개 조합 검증.
               </div>
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>주요 결과</b>
                 <br />
                 CMEMS 해류모델 + ECMWF 기상 조합이 최고 성능. 동황해 조석 특성(수심 &lt;60m 천해)
@@ -2579,10 +2330,10 @@ function OpenDriftPanel() {
               </div>
             </div>
             <div className="mb-2">
-              <div className="text-[11px] mb-1 text-fg-sub">
+              <div className="text-label-2 mb-1 text-fg-sub">
                 <b>적용 강제력 모델 6종 조합</b>
               </div>
-              <div className="grid grid-cols-3 gap-1 text-[10px] text-fg-sub">
+              <div className="grid grid-cols-3 gap-1 text-label-2 text-fg-sub">
                 <div
                   className="px-2 py-1 rounded"
                   style={{
@@ -2591,32 +2342,32 @@ function OpenDriftPanel() {
                     color: 'var(--fg-sub)',
                   }}
                 >
-                  <b className="text-blue-500">해류</b> HYCOM / CMEMS
+                  <b className="text-color-info">해류</b> HYCOM / CMEMS
                 </div>
                 <div
                   className="px-2 py-1 rounded"
                   style={{
-                    background: 'rgba(34,197,94,.05)',
-                    border: '1px solid rgba(34,197,94,.12)',
+                    background: 'rgba(6,182,212,.05)',
+                    border: '1px solid rgba(6,182,212,.12)',
                     color: 'var(--fg-sub)',
                   }}
                 >
-                  <b className="text-color-success">파랑</b> CMEMS / ECMWF-ERA5
+                  <b className="text-color-info">파랑</b> CMEMS / ECMWF-ERA5
                 </div>
                 <div
                   className="px-2 py-1 rounded"
                   style={{
-                    background: 'rgba(249,115,22,.05)',
-                    border: '1px solid rgba(249,115,22,.12)',
+                    background: 'rgba(6,182,212,.05)',
+                    border: '1px solid rgba(6,182,212,.12)',
                     color: 'var(--fg-sub)',
                   }}
                 >
-                  <b className="text-color-warning">기상</b> NCEP-GFS / ECMWF
+                  <b className="text-color-info">기상</b> NCEP-GFS / ECMWF
                 </div>
               </div>
             </div>
             <div
-              className="p-2 rounded-md text-[10px]"
+              className="p-2 rounded-md text-label-2"
               style={{
                 background: 'rgba(59,130,246,.04)',
                 border: '1px solid rgba(59,130,246,.1)',
@@ -2624,7 +2375,7 @@ function OpenDriftPanel() {
                 lineHeight: '1.7',
               }}
             >
-              <b className="text-blue-500">WING 적용 의의</b> : OpenOil이 한국 해역에서 실효적으로
+              <b className="text-color-info">WING 적용 의의</b> : OpenOil이 한국 해역에서 실효적으로
               작동함을 검증한 국내 최신 연구. 6종 Met-Ocean 조합 비교는 WING의 OpenDrift 강제력 선택
               기준(CMEMS+ECMWF)의 직접적 근거.
             </div>
@@ -2636,14 +2387,13 @@ function OpenDriftPanel() {
             style={{
               background: 'var(--bg-surface)',
               border: '1px solid rgba(6,182,212,.2)',
-              borderLeft: '4px solid #06b6d4',
             }}
           >
             <div className="flex items-start justify-between gap-2.5 mb-2">
               <div className="flex items-center gap-1.5 flex-wrap">
                 {[
                   { label: '국내저널', color: '#06b6d4' },
-                  { label: '라그랑지안 실증', color: 'var(--color-tertiary)' },
+                  { label: '라그랑지안 실증', color: 'var(--color-accent)' },
                   { label: '동남해역 검증', color: 'var(--color-caution)' },
                 ].map((t) => (
                   <span
@@ -2654,7 +2404,7 @@ function OpenDriftPanel() {
                       background: `${t.color}1F`,
                       border: `1px solid ${t.color}40`,
                       borderRadius: '4px',
-                      fontSize: '10px',
+                      fontSize: 'var(--font-size-label-2)',
                       fontWeight: 700,
                       color: t.color,
                     }}
@@ -2663,31 +2413,31 @@ function OpenDriftPanel() {
                   </span>
                 ))}
               </div>
-              <span className="text-[10px] whitespace-nowrap text-fg-disabled">1998</span>
+              <span className="text-label-2 whitespace-nowrap text-fg-disabled">1998</span>
             </div>
-            <div className="text-[11px] font-bold mb-1 leading-normal">
+            <div className="text-label-2 font-bold mb-1 leading-normal">
               한국 동남해역에서의 유출유 확산예측모델 (Oil Spill Behavior Forecasting Model in
               South-eastern Coastal Area of Korea)
             </div>
-            <div className="text-[11px] mb-2 text-fg-disabled">
+            <div className="text-label-2 mb-2 text-fg-disabled">
               류청로, 김종규, 설동관, 강동욱 | 부경대학교 해양공학과 | 한국해양환경공학회지 Vol.1
               No.2, pp.52–59, 1998
             </div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>연구 목적</b>
                 <br />
                 한국 동남해역(부산-울산) 긴급방제용 실시간 유출유 확산예측모델 OILSPILLFM 개발.
                 알렉산드리아호(1995) 실제 사고 힌드캐스팅으로 모델 검증.
               </div>
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>핵심 수식</b>
                 <br />
                 라그랑지안 입자추적 + 2D 해수유동 모델(ADI법). 취송류 Vw = 0.03×V10. 난류확산 Random
                 Walk. 증발 1차 반응식.
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2 text-fg-sub">
+            <div className="grid grid-cols-3 gap-1 text-label-2 mb-2 text-fg-sub">
               <div
                 className="px-2 py-1 rounded"
                 style={{
@@ -2696,31 +2446,31 @@ function OpenDriftPanel() {
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-cyan-500">해수유동</b> Navier-Stokes 2D 연속·운동방정식
+                <b className="text-color-accent">해수유동</b> Navier-Stokes 2D 연속·운동방정식
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(168,85,247,.05)',
-                  border: '1px solid rgba(168,85,247,.12)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-color-tertiary">조류</b> 조화분석 실시간 조류 DB 구축
+                <b className="text-color-accent">조류</b> 조화분석 실시간 조류 DB 구축
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(249,115,22,.05)',
-                  border: '1px solid rgba(249,115,22,.12)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-color-warning">풍화</b> 퍼짐·증발·유상화·생분해 5단계
+                <b className="text-color-info">풍화</b> 퍼짐·증발·유상화·생분해 5단계
               </div>
             </div>
             <div
-              className="p-2 rounded-md text-[10px]"
+              className="p-2 rounded-md text-label-2"
               style={{
                 background: 'rgba(6,182,212,.04)',
                 border: '1px solid rgba(6,182,212,.1)',
@@ -2728,7 +2478,7 @@ function OpenDriftPanel() {
                 lineHeight: '1.7',
               }}
             >
-              <b className="text-cyan-500">WING 적용 의의</b> : OpenDrift·KOSPS의 라그랑지안
+              <b className="text-color-accent">WING 적용 의의</b> : OpenDrift·KOSPS의 라그랑지안
               입자추적 이론적 원전. 조류 영향 미약 해역에서 취송류·해류 성분이 확산에 결정적 역할 —
               OpenDrift 한국 해역 적용 정당성 근거.
             </div>
@@ -2739,16 +2489,15 @@ function OpenDriftPanel() {
             className="rounded-[10px] p-3.5"
             style={{
               background: 'var(--bg-surface)',
-              border: '1px solid rgba(249,115,22,.2)',
-              borderLeft: '4px solid var(--color-warning)',
+              border: '1px solid var(--stroke-default)',
             }}
           >
             <div className="flex items-start justify-between gap-2.5 mb-2">
               <div className="flex items-center gap-1.5 flex-wrap">
                 {[
-                  { label: '국내학술대회', color: 'var(--color-warning)' },
-                  { label: '태안 허베이스피리트', color: 'var(--color-danger)' },
-                  { label: '서해 수치모의', color: 'var(--color-success)' },
+                  { label: '국내학술대회', color: 'var(--color-accent)' },
+                  { label: '태안 허베이스피리트', color: 'var(--color-info)' },
+                  { label: '서해 수치모의', color: 'var(--color-accent)' },
                 ].map((t) => (
                   <span
                     key={t.label}
@@ -2758,7 +2507,7 @@ function OpenDriftPanel() {
                       background: `${t.color}1F`,
                       border: `1px solid ${t.color}40`,
                       borderRadius: '4px',
-                      fontSize: '10px',
+                      fontSize: 'var(--font-size-label-2)',
                       fontWeight: 700,
                       color: t.color,
                     }}
@@ -2767,60 +2516,60 @@ function OpenDriftPanel() {
                   </span>
                 ))}
               </div>
-              <span className="text-[10px] whitespace-nowrap text-fg-disabled">2008</span>
+              <span className="text-label-2 whitespace-nowrap text-fg-disabled">2008</span>
             </div>
-            <div className="text-[11px] font-bold mb-1 leading-normal">
+            <div className="text-label-2 font-bold mb-1 leading-normal">
               태안 기름유출사고의 유출유 확산특성 분석 (Analysis of Oil Spill Dispersion in Taean
               Coastal Zone)
             </div>
-            <div className="text-[11px] mb-2 text-fg-disabled">
+            <div className="text-label-2 mb-2 text-fg-disabled">
               정태성, 조형진 | 한남대학교 토목환경공학과 | 한국해안·해양공학회 학술발표논문집 제17권
               pp.60–63, 2008
             </div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>연구 목적</b>
                 <br />
                 2007년 12월 태안 허베이 스피리트 기름유출 사고 후 15일간 조류·취송류에 의한 유출유
                 확산패턴을 2D 수치모형으로 재현. 조류·취송류 기여도 분리 분석.
               </div>
-              <div className="text-[11px] text-fg-sub leading-[1.7]">
+              <div className="text-label-2 text-fg-sub leading-[1.7]">
                 <b>핵심 발견</b>
                 <br />
                 취송류 풍속 비율 α = 2%가 실제 관측 확산과 가장 유사(3% 과대, 2.5% 다소 빠름).
                 취송류 편향각 θ = 20° 최적. 조류는 남북 확산거리, 취송류는 해안 부착에 기여.
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2 text-fg-sub">
+            <div className="grid grid-cols-3 gap-1 text-label-2 mb-2 text-fg-sub">
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(249,115,22,.05)',
-                  border: '1px solid rgba(249,115,22,.12)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-color-warning">해역</b> 군산~영흥도(서해 중부)
+                <b className="text-color-info">해역</b> 군산~영흥도(서해 중부)
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(239,68,68,.05)',
-                  border: '1px solid rgba(239,68,68,.12)',
+                  background: 'rgba(59,130,246,.05)',
+                  border: '1px solid rgba(59,130,246,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-color-danger">격자</b> 유한요소 삼각형, 최소 150m
+                <b className="text-color-info">격자</b> 유한요소 삼각형, 최소 150m
               </div>
               <div
                 className="px-2 py-1 rounded"
                 style={{
-                  background: 'rgba(34,197,94,.05)',
-                  border: '1px solid rgba(34,197,94,.12)',
+                  background: 'rgba(6,182,212,.05)',
+                  border: '1px solid rgba(6,182,212,.12)',
                   color: 'var(--fg-sub)',
                 }}
               >
-                <b className="text-color-success">방출</b> 50입자/9시간 · 총 5일 모의
+                <b className="text-color-info">방출</b> 50입자/9시간 · 총 5일 모의
               </div>
             </div>
             {/* 취송류 파라미터 비교 */}
@@ -2828,18 +2577,18 @@ function OpenDriftPanel() {
               className="p-2.5 rounded-[7px] mb-2"
               style={{ background: 'var(--bg-base)', border: '1px solid var(--stroke-default)' }}
             >
-              <div className="text-[10px] font-bold mb-1.5 text-fg-sub">
+              <div className="text-label-2 font-bold mb-1.5 text-fg-sub">
                 취송류 매개변수 비교 (태안 사고 수치실험)
               </div>
-              <div className="grid grid-cols-4 gap-1 text-[10px] text-fg-sub">
+              <div className="grid grid-cols-4 gap-1 text-label-2 text-fg-sub">
                 <div
                   className="px-2 py-1 rounded text-center"
                   style={{
-                    background: 'rgba(239,68,68,.06)',
-                    border: '1px solid rgba(239,68,68,.12)',
+                    background: 'rgba(59,130,246,.06)',
+                    border: '1px solid rgba(59,130,246,.12)',
                   }}
                 >
-                  <div className="font-bold text-color-danger">α = 3%</div>
+                  <div className="font-bold text-color-info">α = 3%</div>
                   <div className="text-fg-disabled">과대 확산</div>
                 </div>
                 <div
@@ -2855,11 +2604,11 @@ function OpenDriftPanel() {
                 <div
                   className="px-2 py-1 rounded text-center"
                   style={{
-                    background: 'rgba(34,197,94,.08)',
-                    border: '1px solid rgba(34,197,94,.2)',
+                    background: 'rgba(6,182,212,.08)',
+                    border: '1px solid rgba(6,182,212,.2)',
                   }}
                 >
-                  <div className="font-bold text-color-success">α = 2% ✓</div>
+                  <div className="font-bold text-color-info">α = 2% ✓</div>
                   <div className="text-fg-disabled">최적 일치</div>
                 </div>
                 <div
@@ -2869,21 +2618,21 @@ function OpenDriftPanel() {
                     border: '1px solid rgba(6,182,212,.12)',
                   }}
                 >
-                  <div className="font-bold text-cyan-500">θ = 20° ✓</div>
+                  <div className="font-bold text-color-accent">θ = 20° ✓</div>
                   <div className="text-fg-disabled">최적 편향각</div>
                 </div>
               </div>
             </div>
             <div
-              className="p-2 rounded-md text-[10px]"
+              className="p-2 rounded-md text-label-2"
               style={{
-                background: 'rgba(249,115,22,.04)',
-                border: '1px solid rgba(249,115,22,.1)',
+                background: 'rgba(6,182,212,.04)',
+                border: '1px solid rgba(6,182,212,.1)',
                 color: 'var(--fg-sub)',
                 lineHeight: '1.7',
               }}
             >
-              <b className="text-color-warning">WING 적용 의의</b> : 서해(조류 강한 해역) 취송류
+              <b className="text-color-accent">WING 적용 의의</b> : 서해(조류 강한 해역) 취송류
               매개변수 α = 2%·θ = 20° 최적값은 OpenDrift 서해 운용 시 wind drift factor 설정의 직접
               근거. 허베이 스피리트 사고는 POSEIDON(특허 10-1868791)의 검증 데이터로도 활용.
             </div>
@@ -2898,21 +2647,11 @@ function OpenDriftPanel() {
 function LagrangianPanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(59,130,246,.04))',
-          border: '1px solid rgba(6,182,212,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-accent),var(--color-info))' }}
-        />
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
         <div style={labelStyle('var(--fg-default)')}>
           🧭 라그랑지안 입자추적법(Lagrangian Particle Tracking)
         </div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           유출유를 수많은 <b className="text-color-accent">가상 입자(Virtual Particle)</b>로
           표현하여, 각 입자의 이동 경로를 시간 단계마다 추적하는 방법입니다.
           KOSPS·POSEIDON·OpenDrift 3종 모두 이 방식을 채택합니다.
@@ -2920,19 +2659,16 @@ function LagrangianPanel() {
       </div>
 
       <div className="grid grid-cols-2 gap-3 mb-4">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-accent)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-accent)')}>📐 입자 이동 지배방정식</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>입자 이동 지배방정식</div>
           <div className={`${codeBox} mb-2.5`}>
             dx/dt = U_c + α·U_w + U_stokes + U&apos;
             <br />
             dy/dt = V_c + α·V_w + V_stokes + V&apos;
           </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
             <div className="flex gap-2">
-              <span style={{ color: 'var(--color-warning)', fontWeight: 700, width: '60px' }}>
+              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                 U_c, V_c
               </span>
               <span className="text-fg-sub">표층 해류·조류 속도 (m/s)</span>
@@ -2944,32 +2680,29 @@ function LagrangianPanel() {
               <span className="text-fg-sub">풍류 기여 (α ≈ 0.03)</span>
             </div>
             <div className="flex gap-2">
-              <span style={{ color: 'var(--color-success)', fontWeight: 700, width: '60px' }}>
+              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                 U_stokes
               </span>
               <span className="text-fg-sub">스토크스 표류 (파랑 영향)</span>
             </div>
             <div className="flex gap-2">
-              <span style={{ color: 'var(--color-tertiary)', fontWeight: 700, width: '60px' }}>
+              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                 U&apos;
               </span>
               <span className="text-fg-sub">난류 확산 (랜덤워크)</span>
             </div>
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-info)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-info)')}>🌀 난류 확산 (랜덤워크)</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-info)')}>난류 확산 (랜덤워크)</div>
           <div className={`${codeBox} mb-2.5`}>
             U&apos; = R · √(2K_h / Δt)
             <br />
             V&apos; = R · √(2K_h / Δt)
           </div>
-          <div className="flex flex-col gap-1 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
             <div className="flex gap-2">
-              <span style={{ color: 'var(--color-tertiary)', fontWeight: 700, width: '60px' }}>
+              <span style={{ color: 'var(--color-accent)', fontWeight: 700, width: '60px' }}>
                 R
               </span>
               <span className="text-fg-sub">[-1, 1] 균등분포 난수</span>
@@ -2989,36 +2722,36 @@ function LagrangianPanel() {
       </div>
 
       {/* Fay(1971) 중력-점성 체제 */}
-      <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--color-warning)' }}>
-        <div style={labelStyle('var(--color-warning)')}>
+      <div className={`${card} ${cardBg}`}>
+        <div style={labelStyle('var(--color-info)')}>
           🛢️ 표면 유막 확산 — Fay(1971) 중력-점성 체제
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div>
             <div className={`${codeBox} mb-2`}>
-              <span className="text-fg-disabled text-[10px]">/* 중력-관성 체제 (초기) */</span>
+              <span className="text-fg-disabled text-label-2">/* 중력-관성 체제 (초기) */</span>
               <br />
-              R(t) = <span className="text-color-warning">K₁</span> · (
+              R(t) = <span className="text-color-accent">K₁</span> · (
               <span className="text-color-accent">ΔρgV²</span> /{' '}
               <span className="text-color-info">ρw</span>)<sup>¼</sup> · t<sup>½</sup>
             </div>
             <div className={codeBox}>
-              <span className="text-fg-disabled text-[10px]">/* 중력-점성 체제 (후기) */</span>
+              <span className="text-fg-disabled text-label-2">/* 중력-점성 체제 (후기) */</span>
               <br />
-              R(t) = <span className="text-color-warning">K₂</span> · (
+              R(t) = <span className="text-color-accent">K₂</span> · (
               <span className="text-color-accent">ΔρgV²</span> /{' '}
-              <span className="text-color-tertiary">νw</span>)<sup>⅙</sup> · t<sup>¾</sup>
+              <span className="text-color-accent">νw</span>)<sup>⅙</sup> · t<sup>¾</sup>
             </div>
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             <div
               className="px-2.5 py-1.5 rounded-md"
               style={{
-                background: 'rgba(249,115,22,.05)',
-                border: '1px solid rgba(249,115,22,.15)',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(59,130,246,.15)',
               }}
             >
-              <span className="text-color-warning font-bold">Δρ</span> : 유류-해수 밀도차 (kg/m³)
+              <span className="text-color-accent font-bold">Δρ</span> : 유류-해수 밀도차 (kg/m³)
             </div>
             <div
               className="px-2.5 py-1.5 rounded-md"
@@ -3039,11 +2772,11 @@ function LagrangianPanel() {
             <div
               className="px-2.5 py-1.5 rounded-md"
               style={{
-                background: 'rgba(168,85,247,.05)',
-                border: '1px solid rgba(168,85,247,.15)',
+                background: 'rgba(6,182,212,.05)',
+                border: '1px solid rgba(6,182,212,.15)',
               }}
             >
-              <span style={{ color: 'var(--color-tertiary)', fontWeight: 700 }}>νw</span> : 해수
+              <span style={{ color: 'var(--color-accent)', fontWeight: 700 }}>νw</span> : 해수
               동점성계수 (m²/s)
             </div>
           </div>
@@ -3057,89 +2790,72 @@ function LagrangianPanel() {
 function WeatheringPanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(249,115,22,.05),rgba(239,68,68,.04))',
-          border: '1px solid rgba(249,115,22,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{
-            background:
-              'linear-gradient(90deg,var(--color-warning),var(--color-danger),var(--color-caution))',
-          }}
-        />
-        <div style={labelStyle('var(--fg-default)')}>🔁 유출유 풍화(Weathering) 프로세스</div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
+        <div style={labelStyle('var(--fg-default)')}>유출유 풍화(Weathering) 프로세스</div>
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           유출유는 해면에 유출된 직후부터{' '}
-          <b className="text-color-warning">물리·화학·생물학적 풍화 과정</b>을 거쳐 지속적으로
-          특성이 변화합니다. WING 시스템은 주요 풍화 프로세스를 통합 모의하여 시간 경과에 따른 유류
-          상태 변화를 추적합니다.
+          <b className="text-color-accent">물리·화학·생물학적 풍화 과정</b>을 거쳐 지속적으로 특성이
+          변화합니다. WING 시스템은 주요 풍화 프로세스를 통합 모의하여 시간 경과에 따른 유류 상태
+          변화를 추적합니다.
         </div>
       </div>
 
       <div className="grid grid-cols-3 gap-3 mb-4">
         {[
           {
-            title: '☁️ 증발(Evaporation)',
-            color: 'var(--color-caution)',
+            title: '증발(Evaporation)',
+            color: 'var(--fg-default)',
             desc: '유류의 경질 성분이 대기로 증발하는 과정. 유출 초기 수시간 내에 가장 활발하게 발생합니다.',
             formula: 'F_e(t) = ∑ x_i·(1 - e^(-k_ei·t))',
             note: 'x_i: 성분별 몰분율 / k_ei: 증발 속도상수',
           },
           {
-            title: '🌊 유화(Emulsification)',
-            color: 'var(--color-warning)',
+            title: '유화(Emulsification)',
+            color: 'var(--fg-default)',
             desc: '파랑에 의해 해수가 유류에 혼입되어 점도가 크게 증가하는 현상. 방제 작업을 어렵게 만듭니다.',
             formula: 'dW_c/dt = K_em·U_w²·(1-W_c/W_max)',
             note: 'W_c: 함수율 / K_em: 유화 속도상수',
           },
           {
-            title: '💧 자연분산(Dispersion)',
-            color: 'var(--color-danger)',
+            title: '자연분산(Dispersion)',
+            color: 'var(--fg-default)',
             desc: '파랑 에너지에 의해 유류가 수중으로 분산되어 유막 두께가 감소하는 과정입니다.',
             formula: 'D_r = 0.11·(U_w+U_c)²·(1+U_w)⁻¹',
             note: 'Mackay 경험식 기반 분산율 계산',
           },
         ].map((w) => (
-          <div
-            key={w.title}
-            className={`${card} ${cardBg}`}
-            style={{ borderTop: `3px solid ${w.color}`, margin: 0 }}
-          >
+          <div key={w.title} className={`${card} ${cardBg}`} style={{ margin: 0 }}>
             <div style={labelStyle(w.color)}>{w.title}</div>
             <div className={`${bodyText} mb-2`}>{w.desc}</div>
             <div className={codeBox}>{w.formula}</div>
-            <div className="mt-2 text-[10px] text-fg-disabled">{w.note}</div>
+            <div className="mt-2 text-label-2 text-fg-disabled">{w.note}</div>
           </div>
         ))}
       </div>
 
       {/* 타임라인 */}
       <div className={`${card} ${cardBg}`}>
-        <div style={labelStyle('var(--fg-default)')}>⏱️ 풍화 진행 타임라인 (원유 기준)</div>
+        <div style={labelStyle('var(--fg-default)')}>풍화 진행 타임라인 (원유 기준)</div>
         <div className="flex gap-0 items-stretch">
           {[
             {
               time: '0 ~ 6시간',
               title: '초기 확산',
-              color: 'var(--color-caution)',
+              color: 'var(--fg-default)',
               desc: '증발 20~30%\n유막 급속 확대\n중질유분 잔류',
-              nextColor: 'var(--color-warning)',
+              nextColor: 'var(--color-accent)',
             },
             {
               time: '6 ~ 24시간',
               title: '유화 진행',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
               desc: '유화율 50~70%\n점도 급증\n체적 1.5~4배',
-              nextColor: 'var(--color-danger)',
+              nextColor: 'var(--color-info)',
             },
             {
               time: '24 ~ 72시간',
               title: '안정화',
-              color: 'var(--color-danger)',
+              color: 'var(--color-info)',
               desc: '수중 분산 증가\n자연분해 시작\n해안 표착 위험',
               nextColor: 'var(--fg-disabled)',
             },
@@ -3159,11 +2875,11 @@ function WeatheringPanel() {
                   borderRadius: i === 0 ? '8px 0 0 8px' : i === 3 ? '0 8px 8px 0' : '0',
                 }}
               >
-                <div className="text-[10px] font-bold mb-1" style={{ color: s.color }}>
+                <div className="text-label-2 font-bold mb-1" style={{ color: s.color }}>
                   {s.time}
                 </div>
-                <div className="text-[11px] font-semibold mb-1">{s.title}</div>
-                <div className="text-[10px] whitespace-pre-line text-fg-disabled leading-normal">
+                <div className="text-label-2 font-medium mb-1">{s.title}</div>
+                <div className="text-label-2 whitespace-pre-line text-fg-disabled leading-normal">
                   {s.desc}
                 </div>
               </div>
@@ -3171,7 +2887,7 @@ function WeatheringPanel() {
                 <div
                   style={{
                     width: '2px',
-                    background: `linear-gradient(180deg,${s.color},${s.nextColor})`,
+                    background: 'var(--stroke-default)',
                   }}
                 />
               )}
@@ -3187,31 +2903,18 @@ function WeatheringPanel() {
 function OceanInputPanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(34,197,94,.05),rgba(6,182,212,.04))',
-          border: '1px solid rgba(34,197,94,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-success),var(--color-accent))' }}
-        />
-        <div style={labelStyle('var(--fg-default)')}>🌊 해양환경 입력 데이터 체계</div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
+        <div style={labelStyle('var(--fg-default)')}>해양환경 입력 데이터 체계</div>
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           유출유 확산 예측의 정확도는{' '}
           <b className="text-color-accent">입력 해양·기상 데이터의 품질</b>에 크게 좌우됩니다. WING
           시스템은 국내외 수치예보 모델과 실시간 관측 데이터를 연동하여 모델 정확도를 향상시킵니다.
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-success)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-success)')}>🌬️ 기상 입력</div>
-          <div className="flex flex-col gap-1.5 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-info)')}>기상 입력</div>
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             {[
               { label: 'KMA RDAPS', desc: '동아시아 12km 해상도 · 24h 예보' },
               { label: 'ECMWF ERA5', desc: '전지구 0.25° 재분석 데이터' },
@@ -3222,22 +2925,19 @@ function OceanInputPanel() {
                 className="rounded-md"
                 style={{
                   padding: '7px 10px',
-                  background: 'rgba(34,197,94,.04)',
-                  border: '1px solid rgba(34,197,94,.12)',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="font-semibold mb-0.5">{t.label}</div>
+                <div className="font-medium mb-0.5">{t.label}</div>
                 <div className="text-fg-disabled">{t.desc}</div>
               </div>
             ))}
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-accent)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-accent)')}>🌊 해양 입력</div>
-          <div className="flex flex-col gap-1.5 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>해양 입력</div>
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             {[
               { label: 'NIFS ROMS', desc: '한국 근해 1km 해류·수온 예보' },
               { label: 'HYCOM', desc: '전지구 1/12° 해양 순환 모델' },
@@ -3252,7 +2952,7 @@ function OceanInputPanel() {
                   border: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="font-semibold mb-0.5">{t.label}</div>
+                <div className="font-medium mb-0.5">{t.label}</div>
                 <div className="text-fg-disabled">{t.desc}</div>
               </div>
             ))}
@@ -3268,19 +2968,9 @@ function VerificationPanel() {
   const [papersOpen, setPapersOpen] = useState(false);
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(59,130,246,.05),rgba(34,197,94,.04))',
-          border: '1px solid rgba(59,130,246,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-info),var(--color-success))' }}
-        />
-        <div style={labelStyle('var(--fg-default)')}>✅ 모델 검증 사례</div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
+        <div style={labelStyle('var(--fg-default)')}>모델 검증 사례</div>
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           WING 시스템의 유출유 확산 모델은{' '}
           <b className="text-color-info">과거 실제 사고 재현 시뮬레이션</b>을 통해 정확도가
           검증되었습니다.
@@ -3291,11 +2981,11 @@ function VerificationPanel() {
         <div className="flex items-center justify-between mb-2">
           <div style={labelStyle('var(--fg-default)')}>2007년 허베이 스피리트 사고 재현</div>
           <span
-            className="text-[10px] px-2 py-0.5 rounded"
+            className="text-label-2 px-2 py-0.5 rounded"
             style={{
-              background: 'rgba(34,197,94,.12)',
-              color: 'var(--color-success)',
-              fontWeight: 600,
+              background: 'var(--bg-elevated)',
+              color: 'var(--color-accent)',
+              fontWeight: 500,
             }}
           >
             검증완료
@@ -3304,18 +2994,22 @@ function VerificationPanel() {
         <div className="grid grid-cols-4 gap-2">
           {[
             { value: '78.4%', label: '해안 표착 예측 일치율', color: 'var(--color-accent)' },
-            { value: '±12%', label: '유막 면적 오차', color: 'var(--color-success)' },
-            { value: '±8h', label: '해안 도달 시간 오차', color: 'var(--color-warning)' },
-            { value: '3종', label: '비교 검증 모델 수', color: 'var(--color-tertiary)' },
+            { value: '±12%', label: '유막 면적 오차', color: 'var(--color-accent)' },
+            { value: '±8h', label: '해안 도달 시간 오차', color: 'var(--color-accent)' },
+            { value: '3종', label: '비교 검증 모델 수', color: 'var(--color-accent)' },
           ].map((s) => (
             <div key={s.label} className="text-center p-2 rounded-md bg-bg-base">
               <div
                 className="font-bold"
-                style={{ fontSize: '14px', color: s.color, fontFamily: 'var(--font-mono)' }}
+                style={{
+                  fontSize: 'var(--font-size-title-3)',
+                  color: s.color,
+                  fontFamily: 'var(--font-mono)',
+                }}
               >
                 {s.value}
               </div>
-              <div className="text-[10px] text-fg-disabled">{s.label}</div>
+              <div className="text-label-2 text-fg-disabled">{s.label}</div>
             </div>
           ))}
         </div>
@@ -3325,17 +3019,17 @@ function VerificationPanel() {
         <div className="flex items-center justify-between mb-2">
           <div style={labelStyle('var(--fg-default)')}>2014년 우이산 충돌 사고 재현</div>
           <span
-            className="text-[10px] px-2 py-0.5 rounded"
+            className="text-label-2 px-2 py-0.5 rounded"
             style={{
-              background: 'rgba(6,182,212,.12)',
+              background: 'var(--bg-elevated)',
               color: 'var(--color-accent)',
-              fontWeight: 600,
+              fontWeight: 500,
             }}
           >
             검증완료
           </span>
         </div>
-        <div className="text-[11px] text-fg-sub leading-[1.6]">
+        <div className="text-label-2 text-fg-sub leading-[1.6]">
           여수 오동도 인근 원유 유출 사고를 KOSPS 모델로 재현한 결과, 실제 위성 SAR 영상과 비교 시{' '}
           <b className="text-color-accent">유막 중심 이동 경로 일치율 82.1%</b> 확인. 남해 특유의
           복잡한 조류 패턴 반영이 관건.
@@ -3348,11 +3042,17 @@ function VerificationPanel() {
           className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
           onClick={() => setPapersOpen(!papersOpen)}
         >
-          <span style={{ ...tag('var(--color-info)'), fontWeight: 700, fontSize: '12px' }}>
+          <span
+            style={{
+              ...tag('var(--fg-sub)'),
+              fontWeight: 700,
+              fontSize: 'var(--font-size-label-1)',
+            }}
+          >
             📄 모델 검증 관련 논문
           </span>
           <span
-            className="text-[11px] ml-1"
+            className="text-label-2 ml-1"
             style={{
               color: 'var(--fg-disabled)',
               transition: 'transform .2s',
@@ -3364,7 +3064,7 @@ function VerificationPanel() {
           </span>
         </div>
         {papersOpen && (
-          <div className="flex flex-col gap-1.5 text-[10px] text-fg-sub">
+          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
             {[
               {
                 num: '①',
@@ -3373,7 +3073,7 @@ function VerificationPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.3154 | 2010',
                 desc: 'Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증',
-                color: 'var(--color-danger)',
+                color: 'var(--color-info)',
                 system: 'KOSPS',
               },
               {
@@ -3383,7 +3083,7 @@ function VerificationPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.17-18 | 2013',
                 desc: 'Monte Carlo Simulation 기반 3D 확산모델 · 허베이 스피리트호 720시간 적용 검증',
-                color: 'var(--color-tertiary)',
+                color: 'var(--color-accent)',
                 system: 'KOSPS',
               },
               {
@@ -3393,7 +3093,7 @@ function VerificationPanel() {
                 journal: '한국해양과학기술협의회 공동학술대회',
                 detail: 'pp.2353 | 2014',
                 desc: 'GS칼텍스 송유관 · Captain Vangelis 유출사고 적용 검증 · 현장 보고자료 비교 분석',
-                color: 'var(--color-caution)',
+                color: 'var(--fg-default)',
                 system: 'KOSPS',
               },
               {
@@ -3433,7 +3133,7 @@ function VerificationPanel() {
                 journal: 'Geoscientific Model Development',
                 detail: 'Vol.11, pp.1405-1420 | 2018',
                 desc: 'OpenDrift 프레임워크 설계·구현·검증 · OpenOil 유출유 모듈 다중 사례 검증',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
                 system: 'OpenDrift',
               },
               {
@@ -3443,7 +3143,7 @@ function VerificationPanel() {
                 journal: 'J. Geophys. Res. Oceans',
                 detail: '| 2013',
                 desc: 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 관측 검증',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
                 system: 'OpenDrift',
               },
               {
@@ -3453,7 +3153,7 @@ function VerificationPanel() {
                 journal: 'Marine Pollution Bulletin',
                 detail: '| 2019',
                 desc: '3D 유출유 수직 분포 모의 · 해저면 도달 경로 분석 · 풍화 통합 수치 검증',
-                color: 'var(--color-success)',
+                color: 'var(--color-accent)',
                 system: 'OpenDrift',
               },
               {
@@ -3480,7 +3180,7 @@ function VerificationPanel() {
                 }}
               >
                 <div
-                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0"
+                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                   style={{ background: `${paper.color}1F` }}
                 >
                   {paper.num}
@@ -3488,7 +3188,13 @@ function VerificationPanel() {
                 <div>
                   <div className="flex items-center gap-1.5 mb-0.5">
                     <div className="font-bold">{paper.title}</div>
-                    <span style={{ ...tag(paper.color), fontSize: '9px', padding: '1px 5px' }}>
+                    <span
+                      style={{
+                        ...tag(paper.color),
+                        fontSize: 'var(--font-size-caption)',
+                        padding: '1px 5px',
+                      }}
+                    >
                       {paper.system}
                     </span>
                   </div>
@@ -3511,30 +3217,17 @@ function VerificationPanel() {
 function EnsemblePanel() {
   return (
     <div>
-      <div
-        className="rounded-xl p-5 mb-4 relative overflow-hidden"
-        style={{
-          background: 'linear-gradient(135deg,rgba(168,85,247,.05),rgba(6,182,212,.04))',
-          border: '1px solid rgba(168,85,247,.2)',
-        }}
-      >
-        <div
-          className="absolute top-0 left-0 right-0 h-[3px]"
-          style={{ background: 'linear-gradient(90deg,var(--color-tertiary),var(--color-accent))' }}
-        />
-        <div style={labelStyle('var(--fg-default)')}>⚡ 앙상블 예측(Ensemble Prediction)</div>
-        <div className="text-[11px] text-fg-sub leading-[1.8]">
+      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
+        <div style={labelStyle('var(--fg-default)')}>앙상블 예측(Ensemble Prediction)</div>
+        <div className="text-label-2 text-fg-sub leading-[1.8]">
           WING 시스템은 3종의 유출유 확산 모델(KOSPS·POSEIDON·OpenDrift)을 동시 운용하여{' '}
-          <b className="text-color-tertiary">앙상블 결과</b>를 생산합니다. 단일 모델 대비 불확실성을
+          <b className="text-color-accent">앙상블 결과</b>를 생산합니다. 단일 모델 대비 불확실성을
           정량화하고 신뢰 구간을 제공합니다.
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-tertiary)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-tertiary)')}>📊 앙상블 가중 평균</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>앙상블 가중 평균</div>
           <div className={`${codeBox} mb-2`}>
             P_ens(x,t) = w₁·P_KOSPS + w₂·P_POSEIDON + w₃·P_OpenDrift
           </div>
@@ -3543,15 +3236,12 @@ function EnsemblePanel() {
             균등 가중.
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderLeft: '3px solid var(--color-warning)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-warning)')}>🎯 최악 시나리오(Worst Case)</div>
+        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
+          <div style={labelStyle('var(--color-accent)')}>최악 시나리오(Worst Case)</div>
           <div className={bodyText}>
             방제 전략 수립을 위해 3종 모델 중{' '}
-            <b className="text-color-warning">가장 넓은 오염 범위</b>를 예측한 결과를 최악
-            시나리오로 별도 표시합니다. 의사결정자에게 보수적 방제 계획 수립 근거를 제공합니다.
+            <b className="text-color-accent">가장 넓은 오염 범위</b>를 예측한 결과를 최악 시나리오로
+            별도 표시합니다. 의사결정자에게 보수적 방제 계획 수립 근거를 제공합니다.
           </div>
         </div>
       </div>
@@ -3564,18 +3254,15 @@ function RoadmapPanel() {
   return (
     <div>
       <div className="grid grid-cols-2 gap-3 mb-4">
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderTop: '3px solid var(--color-danger)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-danger)')}>⚠️ 현재 모델 한계</div>
-          <div className="flex flex-col gap-2 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} className="m-0">
+          <div style={labelStyle('var(--color-info)')}>현재 모델 한계</div>
+          <div className="flex flex-col gap-2 text-label-2 text-fg-sub">
             <div
               className="rounded-md"
               style={{
                 padding: '8px 10px',
-                background: 'rgba(239,68,68,.04)',
-                border: '1px solid rgba(239,68,68,.12)',
+                background: 'rgba(59,130,246,.04)',
+                border: '1px solid rgba(59,130,246,.12)',
                 color: 'var(--fg-sub)',
               }}
             >
@@ -3585,8 +3272,8 @@ function RoadmapPanel() {
               className="rounded-md"
               style={{
                 padding: '8px 10px',
-                background: 'rgba(239,68,68,.04)',
-                border: '1px solid rgba(239,68,68,.12)',
+                background: 'rgba(59,130,246,.04)',
+                border: '1px solid rgba(59,130,246,.12)',
                 color: 'var(--fg-sub)',
               }}
             >
@@ -3596,8 +3283,8 @@ function RoadmapPanel() {
               className="rounded-md"
               style={{
                 padding: '8px 10px',
-                background: 'rgba(239,68,68,.04)',
-                border: '1px solid rgba(239,68,68,.12)',
+                background: 'rgba(59,130,246,.04)',
+                border: '1px solid rgba(59,130,246,.12)',
                 color: 'var(--fg-sub)',
               }}
             >
@@ -3605,12 +3292,9 @@ function RoadmapPanel() {
             </div>
           </div>
         </div>
-        <div
-          className={`${card} ${cardBg}`}
-          style={{ borderTop: '3px solid var(--color-success)', margin: 0 }}
-        >
-          <div style={labelStyle('var(--color-success)')}>🚀 발전 방향</div>
-          <div className="flex flex-col gap-2 text-[11px] text-fg-sub">
+        <div className={`${card} ${cardBg}`} className="m-0">
+          <div style={labelStyle('var(--color-info)')}>발전 방향</div>
+          <div className="flex flex-col gap-2 text-label-2 text-fg-sub">
             {[
               { title: 'ROMS 3D 해양모델 결합', desc: '광역→상세역 Nesting 200m급 고해상도 구현' },
               { title: 'AI/ML 서로게이트 모델', desc: '수치모델 학습 기반 수초 내 근사 예측' },
@@ -3621,12 +3305,12 @@ function RoadmapPanel() {
                 className="rounded-md"
                 style={{
                   padding: '8px 10px',
-                  background: 'rgba(34,197,94,.04)',
-                  border: '1px solid rgba(34,197,94,.12)',
+                  background: 'rgba(6,182,212,.04)',
+                  border: '1px solid rgba(6,182,212,.12)',
                 }}
               >
-                <div className="font-semibold mb-0.5">{r.title}</div>
-                <div className="text-[10px] text-fg-disabled">{r.desc}</div>
+                <div className="font-medium mb-0.5">{r.title}</div>
+                <div className="text-label-2 text-fg-disabled">{r.desc}</div>
               </div>
             ))}
           </div>
@@ -3634,20 +3318,14 @@ function RoadmapPanel() {
       </div>
 
       {/* 로드맵 */}
-      <div
-        className={card}
-        style={{
-          background: 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(34,197,94,.04))',
-          border: '1px solid rgba(6,182,212,.2)',
-        }}
-      >
-        <div style={labelStyle('var(--fg-default)')}>📅 WING 유출유 모델 고도화 로드맵</div>
+      <div className={`${card} ${cardBg}`}>
+        <div style={labelStyle('var(--fg-default)')}>WING 유출유 모델 고도화 로드맵</div>
         <div className="flex gap-0 items-stretch">
           {[
             {
               phase: '✅ Phase 1 (완료)',
               title: '2D 앙상블',
-              color: 'var(--color-success)',
+              color: 'var(--color-accent)',
               desc: 'KOSPS + POSEIDON\n+ OpenDrift 3종\n표층 확산 앙상블',
               nextColor: 'var(--color-accent)',
             },
@@ -3656,19 +3334,19 @@ function RoadmapPanel() {
               title: 'ROMS 결합',
               color: 'var(--color-accent)',
               desc: '3D 수직 구조\n고해상도 연안\n조류 정밀 반영',
-              nextColor: 'var(--color-tertiary)',
+              nextColor: 'var(--color-accent)',
             },
             {
               phase: '🔬 Phase 3 (계획)',
               title: 'AI 융합',
-              color: 'var(--color-tertiary)',
+              color: 'var(--color-accent)',
               desc: 'ML 서로게이트\n위성 SAR 동화\n실시간 보정',
-              nextColor: 'var(--color-warning)',
+              nextColor: 'var(--color-info)',
             },
             {
               phase: '🎯 Phase 4 (목표)',
               title: '자동 대응',
-              color: 'var(--color-warning)',
+              color: 'var(--color-accent)',
               desc: '사고감지→예측\n→방제자원 배치\n전 과정 자동화',
             },
           ].map((s, i) => (
@@ -3681,11 +3359,11 @@ function RoadmapPanel() {
                   borderRadius: i === 0 ? '8px 0 0 8px' : i === 3 ? '0 8px 8px 0' : '0',
                 }}
               >
-                <div className="text-[10px] font-bold mb-1" style={{ color: s.color }}>
+                <div className="text-label-2 font-bold mb-1" style={{ color: s.color }}>
                   {s.phase}
                 </div>
-                <div className="text-[11px] font-semibold mb-1">{s.title}</div>
-                <div className="text-[10px] whitespace-pre-line text-fg-disabled leading-normal">
+                <div className="text-label-2 font-medium mb-1">{s.title}</div>
+                <div className="text-label-2 whitespace-pre-line text-fg-disabled leading-normal">
                   {s.desc}
                 </div>
               </div>
@@ -3693,7 +3371,7 @@ function RoadmapPanel() {
                 <div
                   style={{
                     width: '2px',
-                    background: `linear-gradient(180deg,${s.color},${s.nextColor})`,
+                    background: 'var(--stroke-default)',
                   }}
                 />
               )}
diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index e985e21..29210fc 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -1291,7 +1291,7 @@ export function OilSpillView() {
                   <div
                     className="absolute bottom-0 left-0 right-0 h-[72px] flex items-center px-5 gap-4"
                     style={{
-                      background: 'rgba(15,21,36,0.95)',
+                      background: 'var(--bg-surface)',
                       backdropFilter: 'blur(16px)',
                       borderTop: '1px solid var(--stroke-default)',
                       zIndex: 1100,
diff --git a/frontend/src/tabs/rescue/components/RescueView.tsx b/frontend/src/tabs/rescue/components/RescueView.tsx
index a67c4ca..5210437 100755
--- a/frontend/src/tabs/rescue/components/RescueView.tsx
+++ b/frontend/src/tabs/rescue/components/RescueView.tsx
@@ -185,15 +185,21 @@ function TopInfoBar({ activeType }: { activeType: AccidentType }) {
   }, []);
 
   return (
-    <div className="h-9 bg-gradient-to-r from-bg-0 to-bg-2 border-b border-stroke flex items-center px-4 gap-3.5 flex-shrink-0">
+    <div className="h-9 bg-bg-base border-b border-stroke flex items-center px-4 gap-3.5 flex-shrink-0">
       <div className="flex items-center gap-1.5">
-        <span className="text-sm">⚓</span>
-        <span className="text-[12px] font-bold text-fg font-korean">긴급구난지원</span>
+        <span className="text-title-3">⚓</span>
+        <span className="text-label-1 font-bold text-fg font-korean">긴급구난지원</span>
       </div>
-      <div className="px-3.5 py-0.5 bg-[rgba(239,68,68,0.15)] border border-[rgba(239,68,68,0.35)] rounded-xl text-[10px] font-bold text-color-danger font-korean">
+      <div
+        className="px-3.5 py-0.5 rounded-xl text-label-2 font-bold text-color-danger font-korean"
+        style={{
+          background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-danger) 35%, transparent)',
+        }}
+      >
         사고: {d.incident}
       </div>
-      <div className="flex gap-3 text-[9px] font-mono text-fg-disabled ml-auto">
+      <div className="flex gap-3 text-caption font-mono text-fg-disabled ml-auto">
         <span>
           생존자: <b className="text-fg">{d.survivors}</b>/{d.total}
         </span>
@@ -210,8 +216,8 @@ function TopInfoBar({ activeType }: { activeType: AccidentType }) {
           유출량: <b className="text-color-warning">{d.oilRate}</b>
         </span>
       </div>
-      <div className="text-[13px] font-bold text-fg font-mono">{clock}</div>
-      <div className="text-[9px] text-fg-disabled font-korean">👤 Cmdr. KIM</div>
+      <div className="text-title-4 font-bold text-fg font-mono">{clock}</div>
+      <div className="text-caption text-fg-disabled font-korean">👤 Cmdr. KIM</div>
     </div>
   );
 }
@@ -227,7 +233,7 @@ function LeftPanel({
   return (
     <div className="w-[208px] min-w-[208px] bg-bg-base border-r border-stroke flex flex-col overflow-y-auto scrollbar-thin p-2 gap-0.5">
       {/* 사고유형 제목 */}
-      <div className="text-[9px] font-bold text-[var(--color-info)] font-korean mb-0.5 tracking-wider">
+      <div className="text-caption font-bold text-color-info font-korean mb-0.5 tracking-wider">
         사고 유형 (INCIDENT TYPE)
       </div>
 
@@ -242,32 +248,32 @@ function LeftPanel({
               : 'bg-bg-card border-stroke hover:border-[var(--stroke-light)] hover:bg-bg-surface-hover'
           }`}
         >
-          <span className="text-[12px]">{t.icon}</span>
+          <span className="text-label-1">{t.icon}</span>
           <div>
             <div
-              className={`text-[10px] font-bold font-korean ${activeType === t.id ? 'text-[var(--color-accent)]' : 'text-fg'}`}
+              className={`text-label-2 font-bold font-korean ${activeType === t.id ? 'text-color-accent' : 'text-fg'}`}
             >
               {t.label} ({t.eng})
             </div>
-            <div className="text-[7px] text-fg-disabled font-korean mt-px">{t.desc}</div>
+            <div className="text-caption text-fg-disabled font-korean mt-px">{t.desc}</div>
           </div>
         </button>
       ))}
 
       {/* 긴급 경고 */}
-      <div className="text-[9px] font-bold text-fg-disabled font-korean mt-2.5 mb-1">
+      <div className="text-caption font-bold text-fg-disabled font-korean mt-2.5 mb-1">
         긴급 경고 (CRITICAL ALERTS)
       </div>
-      <div className="py-1.5 px-2.5 bg-[rgba(239,68,68,0.15)] border-l-[3px] border-l-[var(--color-danger)] rounded-r text-[9px] font-bold text-color-danger font-korean">
+      <div className="py-1.5 px-2.5 bg-[color-mix(in_srgb,var(--color-danger)_15%,transparent)] border-l-[3px] border-l-[var(--color-danger)] rounded-r text-caption font-bold text-color-danger font-korean">
         GM 위험 수준 — 전복 위험
       </div>
-      <div className="py-1.5 px-2.5 bg-[rgba(239,68,68,0.15)] border-l-[3px] border-l-[var(--color-danger)] rounded-r text-[9px] font-bold text-color-danger font-korean">
+      <div className="py-1.5 px-2.5 bg-[color-mix(in_srgb,var(--color-danger)_15%,transparent)] border-l-[3px] border-l-[var(--color-danger)] rounded-r text-caption font-bold text-color-danger font-korean">
         승선자 5명 미확인
       </div>
-      <div className="py-1.5 px-2.5 bg-[rgba(249,115,22,0.12)] border-l-[3px] border-l-[var(--color-warning)] rounded-r text-[9px] font-bold text-color-warning font-korean">
+      <div className="py-1.5 px-2.5 bg-[color-mix(in_srgb,var(--color-warning)_12%,transparent)] border-l-[3px] border-l-[var(--color-warning)] rounded-r text-caption font-bold text-color-warning font-korean">
         유류 유출 감지 - 방제 필요
       </div>
-      <div className="py-1.5 px-2.5 bg-[rgba(251,191,36,0.1)] border-l-[3px] border-l-[var(--color-caution)] rounded-r text-[9px] font-bold text-color-caution font-korean">
+      <div className="py-1.5 px-2.5 bg-[color-mix(in_srgb,var(--color-caution)_10%,transparent)] border-l-[3px] border-l-[var(--color-caution)] rounded-r text-caption font-bold text-color-caution font-korean">
         종강도 한계치 88% 접근
       </div>
 
@@ -279,8 +285,8 @@ function LeftPanel({
             background: 'repeating-linear-gradient(0deg, rgba(255,0,0,.03), transparent 2px)',
           }}
         />
-        <div className="text-[9px] text-[rgba(255,60,60,0.35)] font-mono">CCTV FEED #1</div>
-        <div className="absolute top-1 left-1.5 text-[7px] text-[rgba(255,60,60,0.5)] font-mono">
+        <div className="text-caption text-[rgba(255,60,60,0.35)] font-mono">CCTV FEED #1</div>
+        <div className="absolute top-1 left-1.5 text-caption text-[rgba(255,60,60,0.5)] font-mono">
           ● REC
         </div>
       </div>
@@ -324,8 +330,8 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
       />
 
       {/* 사고 해역 정보 */}
-      <div className="absolute top-2.5 left-2.5 z-20 bg-[var(--dropdown-bg)] border border-stroke rounded-md px-3 py-2 backdrop-blur-sm font-mono text-[9px] text-fg-disabled">
-        <div className="text-[10px] font-bold text-fg font-korean mb-1">사고 해역 정보</div>
+      <div className="absolute top-2.5 left-2.5 z-20 bg-[var(--dropdown-bg)] border border-stroke rounded-md px-3 py-2 backdrop-blur-sm font-mono text-caption text-fg-disabled">
+        <div className="text-label-2 font-bold text-fg font-korean mb-1">사고 해역 정보</div>
         <div className="grid gap-x-1.5 gap-y-px" style={{ gridTemplateColumns: '32px 1fr' }}>
           <span>위치</span>
           <b className="text-fg">37°28'N, 126°15'E</b>
@@ -348,11 +354,11 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
           }}
         >
           <div
-            className="absolute w-0.5 h-[7px] bg-[#888] rounded-[1px]"
+            className="absolute w-0.5 h-[7px] bg-fg-disabled rounded-[1px]"
             style={{ top: '-3px', left: '60%' }}
           />
         </div>
-        <div className="text-[7px] text-center mt-0.5 font-mono text-[rgba(255,200,150,0.5)]">
+        <div className="text-caption text-center mt-0.5 font-mono text-[rgba(255,200,150,0.5)]">
           M/V SEA GUARDIAN
         </div>
       </div>
@@ -371,28 +377,28 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
         }}
       />
       {/* 구역 라벨 */}
-      <div className="absolute z-[6] text-[8px] font-korean font-semibold tracking-wider uppercase whitespace-pre-line text-[rgba(6,182,212,0.45)] top-1/2 left-[36%]">
+      <div className="absolute z-[6] text-caption font-korean font-semibold tracking-wider uppercase whitespace-pre-line text-[rgba(6,182,212,0.45)] top-1/2 left-[36%]">
         {d.zone.replace('\\n', '\n')}
       </div>
 
       {/* SAR 자산 */}
-      <div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)] top-[10%] left-[42%]">
+      <div className="absolute z-10 text-caption font-mono text-[rgba(200,220,255,0.35)] top-[10%] left-[42%]">
         ETA 5 MIN ─
       </div>
-      <div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)] top-[14%] left-[56%]">
+      <div className="absolute z-10 text-caption font-mono text-[rgba(200,220,255,0.35)] top-[14%] left-[56%]">
         ETA 15 MIN ─
       </div>
-      <div className="absolute z-[12] text-sm opacity-60 top-[7%] left-[52%] -rotate-[30deg]">
+      <div className="absolute z-[12] text-title-3 opacity-60 top-[7%] left-[52%] -rotate-[30deg]">
         🚁
       </div>
-      <div className="absolute z-[12] text-[8px] font-mono text-[rgba(200,220,255,0.45)] top-[20%] left-[60%]">
+      <div className="absolute z-[12] text-caption font-mono text-[rgba(200,220,255,0.45)] top-[20%] left-[60%]">
         6M
       </div>
-      <div className="absolute z-[12] text-[11px] opacity-45 top-[28%] left-[54%]">🚢</div>
+      <div className="absolute z-[12] text-label-2 opacity-45 top-[28%] left-[54%]">🚢</div>
 
       {/* 환경 민감 구역 */}
       <div className="absolute z-10 px-3.5 py-2 rounded bg-[rgba(34,197,94,0.06)] border border-[rgba(34,197,94,0.2)] bottom-[6%] right-[6%]">
-        <div className="text-[9px] font-bold font-serif uppercase tracking-wider leading-snug text-[rgba(34,197,94,0.55)]">
+        <div className="text-caption font-bold font-serif uppercase tracking-wider leading-snug text-[rgba(34,197,94,0.55)]">
           ENVIRONMENTALLY SENSITIVE
           <br />
           AREA: AQUACULTURE FARM
@@ -404,7 +410,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
         {['🗺', '🔍', '📐'].map((ico, i) => (
           <button
             key={i}
-            className="w-7 h-7 bg-[rgba(13,17,23,0.85)] border border-stroke rounded text-fg-disabled text-[12px] flex items-center justify-center cursor-pointer hover:text-fg"
+            className="w-7 h-7 bg-[rgba(13,17,23,0.85)] border border-stroke rounded text-fg-disabled text-label-1 flex items-center justify-center cursor-pointer hover:text-fg"
           >
             {ico}
           </button>
@@ -412,7 +418,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
       </div>
 
       {/* 스케일 바 */}
-      <div className="absolute bottom-2.5 left-2.5 z-20 bg-[rgba(13,17,23,0.8)] border border-stroke rounded px-2.5 py-1 text-[8px] text-fg-disabled font-mono">
+      <div className="absolute bottom-2.5 left-2.5 z-20 bg-[rgba(13,17,23,0.8)] border border-stroke rounded px-2.5 py-1 text-caption text-fg-disabled font-mono">
         <div
           className="w-[70px] h-0.5 mb-0.5"
           style={{ background: 'linear-gradient(90deg, #e4e8f1 50%, var(--stroke-default) 50%)' }}
@@ -422,11 +428,55 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
 
       {/* 사고 유형 표시 */}
       <div className="absolute bottom-2.5 right-2.5 z-20 bg-[rgba(13,17,23,0.85)] border border-stroke rounded px-3 py-1.5">
-        <div className="text-[8px] text-fg-disabled font-korean">현재 사고 유형</div>
-        <div className="text-[11px] font-bold font-korean text-color-accent">
+        <div className="text-caption text-fg-disabled font-korean">현재 사고 유형</div>
+        <div className="text-label-2 font-bold font-korean text-color-accent">
           {at.icon} {at.label} ({at.eng})
         </div>
       </div>
+
+      {/* 타임라인 시뮬레이션 컨트롤 */}
+      <div className="absolute bottom-2.5 left-1/2 -translate-x-1/2 z-20 bg-[rgba(13,17,23,0.9)] border border-stroke rounded-md px-4 py-2 flex items-center gap-4 backdrop-blur-sm">
+        <div className="text-caption font-bold text-fg font-korean whitespace-nowrap">TIMELINE</div>
+        <div className="flex items-center gap-1.5 text-caption text-fg-disabled font-mono">
+          <span>[-6h]</span>
+          <span className="font-bold text-fg">[NOW]</span>
+          <span>[+6H]</span>
+          <span>[+12H]</span>
+          <span>[+24H]</span>
+        </div>
+        <div className="relative w-24 h-1.5 bg-bg-surface-hover rounded-sm">
+          <div
+            className="absolute rounded-full border-2 border-bg-0 bg-color-accent"
+            style={{
+              left: '35%',
+              top: '-3px',
+              width: '12px',
+              height: '12px',
+              boxShadow: '0 0 8px rgba(6,182,212,.4)',
+            }}
+          />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <button className="w-6 h-6 bg-bg-card border border-stroke rounded-full text-fg-disabled text-label-2 flex items-center justify-center cursor-pointer hover:text-fg">
+            ⏮
+          </button>
+          <button
+            className="w-8 h-8 rounded-full text-color-accent text-title-4 flex items-center justify-center cursor-pointer hover:brightness-125"
+            style={{
+              background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
+              border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
+            }}
+          >
+            ▶
+          </button>
+          <button className="w-6 h-6 bg-bg-card border border-stroke rounded-full text-fg-disabled text-label-2 flex items-center justify-center cursor-pointer hover:text-fg">
+            ⏭
+          </button>
+        </div>
+        <div className="text-caption text-fg-disabled font-mono whitespace-nowrap">
+          <b className="text-color-accent">10:45</b> KST
+        </div>
+      </div>
     </div>
   );
 }
@@ -449,9 +499,9 @@ function RightPanel({
           <button
             key={tab.id}
             onClick={() => onAnalysisChange(tab.id)}
-            className={`flex-1 py-2 text-[9px] font-semibold font-korean cursor-pointer text-center transition-all border-b-2 ${
+            className={`flex-1 py-2 text-caption font-semibold font-korean cursor-pointer text-center transition-all border-b-2 ${
               activeAnalysis === tab.id
-                ? 'text-[var(--color-accent)] border-b-[var(--color-accent)] bg-[rgba(6,182,212,0.04)]'
+                ? 'text-color-accent border-b-[var(--color-accent)] bg-[rgba(6,182,212,0.04)]'
                 : 'text-fg-disabled border-b-transparent hover:text-fg'
             }`}
           >
@@ -469,13 +519,19 @@ function RightPanel({
 
       {/* Bottom Action Buttons */}
       <div className="flex gap-1.5 p-3 border-t border-stroke flex-shrink-0">
-        <button className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-boom to-[#d97706] text-black font-korean">
+        <button
+          className="flex-1 py-2 px-1 rounded text-label-2 font-semibold text-color-accent font-korean cursor-pointer"
+          style={{ border: '1px solid rgba(6,182,212,.3)', background: 'rgba(6,182,212,.08)' }}
+        >
           💾 저장
         </button>
-        <button className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-[rgba(249,115,22,0.1)] border border-[rgba(249,115,22,0.3)] text-color-warning font-korean">
+        <button className="flex-1 py-2 px-1 rounded text-label-2 font-semibold bg-bg-elevated border border-stroke text-fg font-korean cursor-pointer">
           🔄 재계산
         </button>
-        <button className="flex-1 py-2 px-1 rounded text-[11px] font-semibold bg-gradient-to-r from-primary-cyan to-primary-blue text-white font-korean">
+        <button
+          className="flex-1 py-2 px-1 rounded text-label-2 font-semibold text-color-accent font-korean cursor-pointer"
+          style={{ border: '1px solid rgba(6,182,212,.3)', background: 'rgba(6,182,212,.08)' }}
+        >
           📄 보고서
         </button>
       </div>
@@ -490,14 +546,20 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 
   return (
     <div className="flex flex-col p-2.5 gap-2">
-      <div className="text-[12px] font-bold text-fg font-korean">구난 분석 (RESCUE ANALYSIS)</div>
-      <div className="text-[9px] text-[var(--color-info)] font-korean px-2 py-1 bg-[rgba(88,166,255,0.08)] border border-[rgba(88,166,255,0.2)] rounded">
+      <div className="text-label-1 font-bold text-fg font-korean">구난 분석 (RESCUE ANALYSIS)</div>
+      <div
+        className="text-caption text-color-info font-korean px-2 py-1 rounded"
+        style={{
+          background: 'color-mix(in srgb, var(--color-info) 8%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)',
+        }}
+      >
         📌 현재 사고유형: {at.label} ({at.eng})
       </div>
 
       {/* 선박 단면도 SVG */}
       <div className="bg-bg-card border border-stroke rounded-md p-2 relative">
-        <div className="absolute top-1.5 right-2 text-[7px] text-fg-disabled font-mono">
+        <div className="absolute top-1.5 right-2 text-caption text-fg-disabled font-mono">
           VESSEL STATUS
         </div>
         <svg viewBox="0 0 260 80" className="w-full" style={{ height: '65px' }}>
@@ -537,7 +599,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             fill="rgba(239,68,68,.5)"
             fontSize="4.5"
             textAnchor="middle"
-            fontFamily="monospace"
+            fontFamily="var(--font-mono)"
           >
             FLOODED
           </text>
@@ -556,7 +618,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             fill="var(--color-danger)"
             fontSize="4"
             textAnchor="middle"
-            fontFamily="monospace"
+            fontFamily="var(--font-mono)"
           >
             IMPACT
           </text>
@@ -569,7 +631,13 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             strokeWidth=".4"
             strokeDasharray="3,2"
           />
-          <text x="205" y="55" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="205"
+            y="55"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             WL
           </text>
           <line
@@ -619,12 +687,12 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
           subColor={trimColor(d.trim)}
         />
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">
+          <div className="text-caption text-fg-disabled font-korean">
             잔존 부력 (Reserve Buoyancy)
           </div>
-          <div className="text-xl font-bold font-mono" style={{ color: buoyColor(d.buoy) }}>
+          <div className="text-title-2 font-bold font-mono" style={{ color: buoyColor(d.buoy) }}>
             {d.buoy}
-            <span className="text-[10px]">%</span>
+            <span className="text-label-2">%</span>
           </div>
           <div className="h-[5px] bg-bg-surface-hover rounded-sm mt-0.5">
             <div
@@ -636,7 +704,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
       </div>
 
       {/* 긴급 조치 버튼 */}
-      <div className="text-[10px] font-bold text-fg-disabled font-korean">
+      <div className="text-label-2 font-bold text-fg-disabled font-korean">
         긴급 조치 (EMERGENCY ACTIONS)
       </div>
       <div className="grid grid-cols-2 gap-1.5">
@@ -654,8 +722,8 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
               border: `1px solid color-mix(in srgb, ${btn.color} 25%, transparent)`,
             }}
           >
-            <div className="text-[10px] font-bold text-fg font-mono">{btn.en}</div>
-            <div className="text-[8px] font-korean" style={{ color: btn.color }}>
+            <div className="text-label-2 font-bold text-fg font-mono">{btn.en}</div>
+            <div className="text-caption font-korean" style={{ color: btn.color }}>
               {btn.ko}
             </div>
           </button>
@@ -664,10 +732,10 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 
       {/* 구난 의사결정 프로세스 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           구난 의사결정 프로세스 (KRISO Decision Support)
         </div>
-        <div className="flex flex-col gap-0.5 text-[7px] font-korean">
+        <div className="flex flex-col gap-0.5 text-caption font-korean">
           <div className="flex items-center gap-1">
             {[
               { label: '① 상태평가', color: 'var(--color-accent)' },
@@ -719,10 +787,10 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 
       {/* 유체 정역학 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           유체 정역학 (Hydrostatics)
         </div>
-        <div className="grid grid-cols-2 gap-1 text-[8px] font-mono">
+        <div className="grid grid-cols-2 gap-1 text-caption font-mono">
           {[
             { label: '배수량(Δ)', value: '12,450 ton' },
             { label: '흘수(Draft)', value: '7.2 m' },
@@ -732,7 +800,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             { label: 'MTC', value: '185 t·m' },
           ].map((r, i) => (
             <div key={i} className="px-1.5 py-1 bg-bg-base rounded-sm">
-              <span className="text-fg-disabled font-korean text-[7px]">{r.label}</span>
+              <span className="text-fg-disabled font-korean text-caption">{r.label}</span>
               <br />
               <b className="text-fg">{r.value}</b>
             </div>
@@ -742,10 +810,10 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 
       {/* 예인력/이초력 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           예인력 / 이초력 (Towing & Refloating)
         </div>
-        <div className="grid grid-cols-2 gap-1 text-[8px] font-mono">
+        <div className="grid grid-cols-2 gap-1 text-caption font-mono">
           {[
             { label: '필요 예인력', value: '285 kN', color: 'var(--color-caution)' },
             { label: '비상 예인력', value: '420 kN', color: 'var(--color-danger)' },
@@ -753,30 +821,30 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             { label: '인양 안전성', value: 'FAIL', color: 'var(--color-danger)' },
           ].map((r, i) => (
             <div key={i} className="px-1.5 py-1 bg-bg-base rounded-sm">
-              <span className="text-fg-disabled font-korean text-[7px]">{r.label}</span>
+              <span className="text-fg-disabled font-korean text-caption">{r.label}</span>
               <br />
               <b style={{ color: r.color }}>{r.value}</b>
             </div>
           ))}
         </div>
-        <div className="text-[7px] text-fg-disabled font-korean mt-1">
+        <div className="text-caption text-fg-disabled font-korean mt-1">
           ※ IMO Salvage Manual / Resistance Increase Ratio 기반 산출
         </div>
       </div>
 
       {/* 유출량 추정 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           유출량 추정 (Oil Outflow Estimation)
         </div>
-        <div className="grid grid-cols-3 gap-1 text-[8px] font-mono">
+        <div className="grid grid-cols-3 gap-1 text-caption font-mono">
           {[
             { label: '현재 유출률', value: d.oilRate, color: 'var(--color-warning)' },
             { label: '누적 유출량', value: '6.8 kL', color: 'var(--color-danger)' },
             { label: '24h 예측', value: '145 kL', color: 'var(--color-danger)' },
           ].map((r, i) => (
             <div key={i} className="px-1.5 py-1 bg-bg-base rounded-sm text-center">
-              <span className="text-fg-disabled font-korean text-[7px]">{r.label}</span>
+              <span className="text-fg-disabled font-korean text-caption">{r.label}</span>
               <br />
               <b style={{ color: r.color }}>{r.value}</b>
             </div>
@@ -791,14 +859,14 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             }}
           />
         </div>
-        <div className="text-[7px] text-fg-disabled font-korean mt-0.5">
+        <div className="text-caption text-fg-disabled font-korean mt-0.5">
           잔여 연료유: 210 kL | 탱크 잔량: 68% 유출
         </div>
       </div>
 
       {/* CBR 사례기반 추론 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           CBR 유사 사고 사례 (Case-Based Reasoning)
         </div>
         <div className="flex flex-col gap-0.5">
@@ -831,7 +899,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
               }}
             >
               <div
-                className="w-7 h-4 rounded-sm flex items-center justify-center text-[7px] font-bold font-mono"
+                className="w-7 h-4 rounded-sm flex items-center justify-center text-caption font-bold font-mono"
                 style={{
                   background: `color-mix(in srgb, ${c.color} 20%, transparent)`,
                   color: c.color,
@@ -839,7 +907,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
               >
                 {c.pct}
               </div>
-              <div className="flex-1 text-[7px] font-korean">
+              <div className="flex-1 text-caption font-korean">
                 <b className="text-fg">{c.name}</b>
                 <br />
                 <span className="text-fg-disabled">{c.desc}</span>
@@ -850,11 +918,17 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
       </div>
 
       {/* 위험도 평가 */}
-      <div className="bg-[rgba(239,68,68,0.04)] border border-[rgba(239,68,68,0.15)] rounded-md p-2">
-        <div className="text-[9px] font-bold text-color-danger font-korean mb-1.5">
+      <div
+        className="rounded-md p-2"
+        style={{
+          background: 'color-mix(in srgb, var(--color-danger) 4%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-danger) 15%, transparent)',
+        }}
+      >
+        <div className="text-caption font-bold text-color-danger font-korean mb-1.5">
           위험도 평가 — 2차사고 시나리오
         </div>
-        <div className="flex flex-col gap-0.5 text-[7px] font-korean">
+        <div className="flex flex-col gap-0.5 text-caption font-korean">
           {[
             { label: '침수 확대 → 전복', level: 'HIGH', color: 'var(--color-danger)' },
             { label: '유류 대량 유출 → 해양오염', level: 'HIGH', color: 'var(--color-warning)' },
@@ -870,7 +944,7 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             >
               <span className="text-fg">{r.label}</span>
               <span
-                className="px-1.5 py-px rounded-lg text-[7px] font-bold"
+                className="px-1.5 py-px rounded-lg text-caption font-bold"
                 style={{
                   background: `color-mix(in srgb, ${r.color} 20%, transparent)`,
                   color: r.color,
@@ -885,10 +959,10 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 
       {/* 해상 e-Call */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           해상 e-Call (GMDSS / VHF-DSC)
         </div>
-        <div className="flex flex-col gap-0.5 text-[7px] font-mono text-fg-disabled">
+        <div className="flex flex-col gap-0.5 text-caption font-mono text-fg-disabled">
           {[
             { label: 'MMSI', value: '440123456' },
             { label: 'Nature of Distress', value: 'COLLISION', color: 'var(--color-danger)' },
@@ -902,7 +976,13 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
             </div>
           ))}
         </div>
-        <button className="w-full mt-1 py-1 bg-[rgba(239,68,68,0.12)] border border-[rgba(239,68,68,0.3)] rounded text-[8px] font-bold text-color-danger cursor-pointer font-korean hover:bg-[rgba(239,68,68,0.2)]">
+        <button
+          className="w-full mt-1 py-1 rounded text-caption font-bold text-color-danger cursor-pointer font-korean"
+          style={{
+            background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
+            border: '1px solid color-mix(in srgb, var(--color-danger) 30%, transparent)',
+          }}
+        >
           📡 DISTRESS RELAY 전송
         </button>
       </div>
@@ -915,10 +995,10 @@ function RescuePanel({ activeType }: { activeType: AccidentType }) {
 function DamageStabilityPanel(_props: { activeType: AccidentType }) {
   return (
     <div className="flex flex-col p-2.5 gap-2">
-      <div className="text-[12px] font-bold text-fg font-korean">
+      <div className="text-label-1 font-bold text-fg font-korean">
         손상 복원성 (DAMAGE STABILITY)
       </div>
-      <div className="text-[9px] text-fg-disabled font-korean leading-snug">
+      <div className="text-caption text-fg-disabled font-korean leading-snug">
         사고유형에 따른 손상 후 선체 복원력 분석
         <br />
         IMO A.749(18) / SOLAS Ch.II-1 기준 평가
@@ -926,7 +1006,7 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
 
       {/* GZ Curve SVG */}
       <div className="bg-bg-card border border-stroke rounded-md p-2.5">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           GZ 복원력 곡선 (Righting Lever Curve)
         </div>
         <svg viewBox="0 0 260 120" className="w-full" style={{ height: '100px' }}>
@@ -984,37 +1064,79 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
             strokeWidth=".6"
             strokeDasharray="4,2"
           />
-          <text x="240" y="76" fill="var(--color-caution)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="240"
+            y="76"
+            fill="var(--color-caution)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             IMO MIN
           </text>
-          <text x="5" y="14" fill="var(--fg-disabled)" fontSize="5" fontFamily="monospace">
+          <text x="5" y="14" fill="var(--fg-disabled)" fontSize="5" fontFamily="var(--font-mono)">
             GZ(m)
           </text>
-          <text x="5" y="35" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text x="5" y="35" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
             0.6
           </text>
-          <text x="5" y="58" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text x="5" y="58" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
             0.4
           </text>
-          <text x="5" y="82" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text x="5" y="82" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="var(--font-mono)">
             0.2
           </text>
-          <text x="5" y="104" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="5"
+            y="104"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             0
           </text>
-          <text x="30" y="112" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="30"
+            y="112"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             0°
           </text>
-          <text x="80" y="112" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="80"
+            y="112"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             15°
           </text>
-          <text x="130" y="112" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="130"
+            y="112"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             30°
           </text>
-          <text x="180" y="112" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="180"
+            y="112"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             45°
           </text>
-          <text x="230" y="112" fill="var(--fg-disabled)" fontSize="4.5" fontFamily="monospace">
+          <text
+            x="230"
+            y="112"
+            fill="var(--fg-disabled)"
+            fontSize="4.5"
+            fontFamily="var(--font-mono)"
+          >
             60°
           </text>
         </svg>
@@ -1041,27 +1163,33 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
       </div>
       <div className="grid grid-cols-2 gap-1.5">
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">침수 구획수</div>
-          <div className="text-lg font-bold text-color-danger font-mono">
-            2 <span className="text-[9px]">구획</span>
+          <div className="text-caption text-fg-disabled font-korean">침수 구획수</div>
+          <div className="text-title-3 font-bold text-color-danger font-mono">
+            2 <span className="text-caption">구획</span>
           </div>
-          <div className="text-[7px] text-fg-disabled font-korean">#1 선수탱크 / #3 좌현탱크</div>
+          <div className="text-caption text-fg-disabled font-korean">#1 선수탱크 / #3 좌현탱크</div>
         </div>
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">Margin Line 여유</div>
-          <div className="text-lg font-bold text-color-danger font-mono">
-            0.12 <span className="text-[9px]">m</span>
+          <div className="text-caption text-fg-disabled font-korean">Margin Line 여유</div>
+          <div className="text-title-3 font-bold text-color-danger font-mono">
+            0.12 <span className="text-caption">m</span>
           </div>
-          <div className="text-[7px] text-color-danger font-korean">침수 임계점 임박</div>
+          <div className="text-caption text-color-danger font-korean">침수 임계점 임박</div>
         </div>
       </div>
 
       {/* SOLAS 판정 */}
-      <div className="bg-[rgba(239,68,68,0.06)] border border-[rgba(239,68,68,0.2)] rounded-md p-2.5">
-        <div className="text-[10px] font-bold text-color-danger font-korean mb-1">
+      <div
+        className="rounded-md p-2.5"
+        style={{
+          background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-danger) 20%, transparent)',
+        }}
+      >
+        <div className="text-label-2 font-bold text-color-danger font-korean mb-1">
           ⚠ SOLAS 손상복원성 판정: 부적합 (FAIL)
         </div>
-        <div className="text-[8px] text-fg-disabled font-korean leading-snug">
+        <div className="text-caption text-fg-disabled font-korean leading-snug">
           · Area(0~θ_f): 0.028 m·rad (기준 0.015 ✓)
           <br />
           · GZ_max ≥ 0.1m: 0.25m ✓ | θ_max ≥ 15°: 28° ✓<br />·{' '}
@@ -1073,10 +1201,10 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
 
       {/* 좌초시 복원성 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1">
+        <div className="text-caption font-bold text-fg font-korean mb-1">
           좌초시 복원성 (Grounded Stability)
         </div>
-        <div className="grid grid-cols-2 gap-1 text-[8px] font-mono">
+        <div className="grid grid-cols-2 gap-1 text-caption font-mono">
           {[
             { label: '지반반력', value: '1,240 kN', color: 'var(--color-caution)' },
             { label: '접촉 면적', value: '12.5 m²' },
@@ -1084,7 +1212,7 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
             { label: '좌초 GM', value: '0.65 m', color: 'var(--color-caution)' },
           ].map((r, i) => (
             <div key={i} className="px-1.5 py-1 bg-bg-base rounded-sm">
-              <span className="text-fg-disabled font-korean text-[7px]">{r.label}</span>
+              <span className="text-fg-disabled font-korean text-caption">{r.label}</span>
               <br />
               <b style={{ color: r.color }}>{r.value}</b>
             </div>
@@ -1094,10 +1222,10 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
 
       {/* 탱크 상태 */}
       <div className="bg-bg-card border border-stroke rounded-md p-2">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1">
+        <div className="text-caption font-bold text-fg font-korean mb-1">
           탱크 상태 (Tank Volume Status)
         </div>
-        <div className="flex flex-col gap-0.5 text-[7px] font-korean">
+        <div className="flex flex-col gap-0.5 text-caption font-korean">
           {[
             { name: '#1 FP Tank', pct: 100, status: '침수', color: 'var(--color-danger)' },
             { name: '#3 Port Tank', pct: 85, status: '85%', color: 'var(--color-danger)' },
@@ -1130,10 +1258,10 @@ function DamageStabilityPanel(_props: { activeType: AccidentType }) {
 function LongStrengthPanel(_props: { activeType: AccidentType }) {
   return (
     <div className="flex flex-col p-2.5 gap-2">
-      <div className="text-[12px] font-bold text-fg font-korean">
+      <div className="text-label-1 font-bold text-fg font-korean">
         종강도 분석 (LONGITUDINAL STRENGTH)
       </div>
-      <div className="text-[9px] text-fg-disabled font-korean leading-snug">
+      <div className="text-caption text-fg-disabled font-korean leading-snug">
         선체 종방향 구조 응력 분석
         <br />
         IACS CSR / Classification Society 기준
@@ -1141,7 +1269,7 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
 
       {/* 전단력 분포 SVG */}
       <div className="bg-bg-card border border-stroke rounded-md p-2.5">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           전단력 분포 (Shear Force Distribution)
         </div>
         <svg viewBox="0 0 260 90" className="w-full" style={{ height: '75px' }}>
@@ -1184,22 +1312,22 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
           <text x="80" y="12" fill="var(--color-danger)" fontSize="4.5">
             손상 후 SF ▲
           </text>
-          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             +SF
           </text>
-          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             0
           </text>
-          <text x="2" y="78" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="2" y="78" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             -SF
           </text>
-          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             AP
           </text>
-          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             MID
           </text>
-          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             FP
           </text>
         </svg>
@@ -1207,7 +1335,7 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
 
       {/* 굽힘모멘트 분포 SVG */}
       <div className="bg-bg-card border border-stroke rounded-md p-2.5">
-        <div className="text-[9px] font-bold text-fg font-korean mb-1.5">
+        <div className="text-caption font-bold text-fg font-korean mb-1.5">
           굽힘모멘트 분포 (Bending Moment Distribution)
         </div>
         <svg viewBox="0 0 260 90" className="w-full" style={{ height: '75px' }}>
@@ -1241,19 +1369,19 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
           <text x="115" y="8" fill="var(--color-warning)" fontSize="4.5">
             손상 후 BM ▲
           </text>
-          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="2" y="14" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             +BM
           </text>
-          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="2" y="48" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             0
           </text>
-          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="25" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             AP
           </text>
-          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="130" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             MID
           </text>
-          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="monospace">
+          <text x="245" y="88" fill="var(--fg-disabled)" fontSize="4" fontFamily="var(--font-mono)">
             FP
           </text>
         </svg>
@@ -1262,18 +1390,18 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
       {/* 종강도 지표 */}
       <div className="grid grid-cols-2 gap-1.5">
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">SF 최대/허용 비율</div>
-          <div className="text-lg font-bold text-color-caution font-mono">
-            88<span className="text-[9px]">%</span>
+          <div className="text-caption text-fg-disabled font-korean">SF 최대/허용 비율</div>
+          <div className="text-title-3 font-bold text-color-caution font-mono">
+            88<span className="text-caption">%</span>
           </div>
           <div className="h-[5px] bg-bg-surface-hover rounded-sm mt-0.5">
             <div className="h-full rounded-sm w-[88%] bg-color-caution" />
           </div>
         </div>
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">BM 최대/허용 비율</div>
-          <div className="text-lg font-bold text-color-warning font-mono">
-            92<span className="text-[9px]">%</span>
+          <div className="text-caption text-fg-disabled font-korean">BM 최대/허용 비율</div>
+          <div className="text-title-3 font-bold text-color-warning font-mono">
+            92<span className="text-caption">%</span>
           </div>
           <div className="h-[5px] bg-bg-surface-hover rounded-sm mt-0.5">
             <div className="h-full rounded-sm w-[92%] bg-color-warning" />
@@ -1282,23 +1410,29 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
       </div>
       <div className="grid grid-cols-2 gap-1.5">
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">Section Modulus 여유</div>
-          <div className="text-lg font-bold text-color-success font-mono">1.08</div>
-          <div className="text-[7px] text-color-success font-korean">Req'd: 1.00 이상 ✓</div>
+          <div className="text-caption text-fg-disabled font-korean">Section Modulus 여유</div>
+          <div className="text-title-3 font-bold text-color-success font-mono">1.08</div>
+          <div className="text-caption text-color-success font-korean">Req'd: 1.00 이상 ✓</div>
         </div>
         <div className="bg-bg-card border border-stroke rounded-md p-2">
-          <div className="text-[8px] text-fg-disabled font-korean">Hull Girder ULS</div>
-          <div className="text-lg font-bold text-color-caution font-mono">1.12</div>
-          <div className="text-[7px] text-color-caution font-korean">Req'd: 1.10 이상 ⚠</div>
+          <div className="text-caption text-fg-disabled font-korean">Hull Girder ULS</div>
+          <div className="text-title-3 font-bold text-color-caution font-mono">1.12</div>
+          <div className="text-caption text-color-caution font-korean">Req'd: 1.10 이상 ⚠</div>
         </div>
       </div>
 
       {/* 판정 */}
-      <div className="bg-[rgba(251,191,36,0.06)] border border-[rgba(251,191,36,0.2)] rounded-md p-2.5">
-        <div className="text-[10px] font-bold text-color-caution font-korean mb-1">
+      <div
+        className="rounded-md p-2.5"
+        style={{
+          background: 'color-mix(in srgb, var(--color-caution) 6%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-caution) 20%, transparent)',
+        }}
+      >
+        <div className="text-label-2 font-bold text-color-caution font-korean mb-1">
           ⚠ 종강도 판정: 주의 (CAUTION)
         </div>
-        <div className="text-[8px] text-fg-disabled font-korean leading-snug">
+        <div className="text-caption text-fg-disabled font-korean leading-snug">
           · SF 최대: 허용치의 88% — <span className="text-color-caution">주의 구간</span>
           <br />· BM 최대: 허용치의 92% — <span className="text-color-warning">경고 구간</span>
           <br />
@@ -1315,9 +1449,9 @@ function BottomBar() {
   return (
     <div className="h-[145px] min-h-[145px] border-t border-stroke flex bg-bg-base flex-shrink-0">
       {/* 이벤트 로그 */}
-      <div className="flex-1 flex flex-col overflow-hidden border-r border-stroke">
+      <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-3 py-1 border-b border-stroke flex-shrink-0">
-          <span className="text-[9px] font-bold text-fg-disabled font-korean">
+          <span className="text-caption font-bold text-fg-disabled font-korean">
             이벤트 로그 / 통신 기록 (EVENT LOG / COMMUNICATION TRANSCRIPT)
           </span>
           <div className="flex gap-0.5">
@@ -1328,7 +1462,7 @@ function BottomBar() {
             ].map((f, i) => (
               <button
                 key={i}
-                className="px-2 py-px rounded-sm text-[8px] font-bold cursor-pointer font-korean"
+                className="px-2 py-px rounded-sm text-caption font-bold cursor-pointer font-korean"
                 style={{
                   background: `color-mix(in srgb, ${f.color} 15%, transparent)`,
                   border: `1px solid color-mix(in srgb, ${f.color} 30%, transparent)`,
@@ -1340,7 +1474,7 @@ function BottomBar() {
             ))}
           </div>
         </div>
-        <div className="flex-1 overflow-y-auto px-3 py-1 font-mono text-[9px] leading-[1.7] scrollbar-thin">
+        <div className="flex-1 overflow-y-auto px-3 py-1 font-mono text-caption leading-[1.7] scrollbar-thin">
           {[
             {
               time: '10:35',
@@ -1395,46 +1529,6 @@ function BottomBar() {
           ))}
         </div>
       </div>
-
-      {/* 타임라인 시뮬레이션 */}
-      <div className="w-[330px] min-w-[330px] flex flex-col px-3.5 py-2 gap-1.5">
-        <div className="text-[9px] font-bold text-fg font-korean">
-          시간대별 시뮬레이션 컨트롤 (TIMELINE SIMULATION CONTROL)
-        </div>
-        <div className="flex items-center gap-1.5 text-[8px] text-fg-disabled font-mono">
-          <span>[-6h]</span>
-          <span className="flex-1 text-center font-bold text-fg">[CURRENT]</span>
-          <span>[+6H]</span>
-          <span>[+12H]</span>
-          <span>[+24H]</span>
-        </div>
-        <div className="relative h-1.5 bg-bg-surface-hover rounded-sm mx-1">
-          <div
-            className="absolute rounded-full border-2 border-bg-0 bg-color-accent"
-            style={{
-              left: '35%',
-              top: '-3px',
-              width: '12px',
-              height: '12px',
-              boxShadow: '0 0 8px rgba(6,182,212,.4)',
-            }}
-          />
-        </div>
-        <div className="flex items-center justify-center gap-2 mt-0.5">
-          <button className="w-7 h-7 bg-bg-card border border-stroke rounded-full text-fg-disabled text-[11px] flex items-center justify-center cursor-pointer hover:text-fg">
-            ⏮
-          </button>
-          <button className="w-[34px] h-[34px] bg-[rgba(6,182,212,0.15)] border border-[rgba(6,182,212,0.3)] rounded-full text-[var(--color-accent)] text-[13px] flex items-center justify-center cursor-pointer hover:brightness-125">
-            ▶
-          </button>
-          <button className="w-7 h-7 bg-bg-card border border-stroke rounded-full text-fg-disabled text-[11px] flex items-center justify-center cursor-pointer hover:text-fg">
-            ⏭
-          </button>
-        </div>
-        <div className="text-center text-[8px] text-fg-disabled font-mono">
-          현재 시간: <b className="text-color-accent">10:45 KST</b>
-        </div>
-      </div>
     </div>
   );
 }
@@ -1457,12 +1551,12 @@ function MetricCard({
 }) {
   return (
     <div className="bg-bg-card border border-stroke rounded-md p-2">
-      <div className="text-[8px] text-fg-disabled font-korean">{label}</div>
-      <div className="text-xl font-bold font-mono" style={{ color }}>
+      <div className="text-caption text-fg-disabled font-korean">{label}</div>
+      <div className="text-title-2 font-bold font-mono" style={{ color }}>
         {value}
-        <span className="text-[10px]"> {unit}</span>
+        <span className="text-label-2"> {unit}</span>
       </div>
-      <div className="text-[8px] font-korean" style={{ color: subColor }}>
+      <div className="text-caption font-korean" style={{ color: subColor }}>
         {sub}
       </div>
     </div>
@@ -1520,35 +1614,41 @@ function RescueListView() {
   return (
     <div className="flex flex-col flex-1 overflow-hidden">
       <div className="px-5 py-4 flex items-center justify-between border-b border-stroke">
-        <span className="text-sm font-bold font-korean">긴급구난 사고 목록</span>
+        <span className="text-title-3 font-bold font-korean">긴급구난 사고 목록</span>
         <div className="flex gap-2 items-center">
           <input
             type="text"
             placeholder="선박명 / 사고번호 검색..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="px-3 py-1.5 bg-bg-base border border-stroke rounded-md text-fg-sub font-korean text-[11px] w-[200px] outline-none focus:border-[var(--color-accent)]"
+            className="px-3 py-1.5 bg-bg-base border border-stroke rounded-md text-fg-sub font-korean text-label-2 w-[200px] outline-none focus:border-[var(--color-accent)]"
           />
-          <button className="px-3.5 py-1.5 bg-[rgba(6,182,212,0.12)] border border-[rgba(6,182,212,0.3)] rounded-md text-[var(--color-accent)] text-[11px] font-semibold cursor-pointer font-korean hover:bg-[rgba(6,182,212,0.2)]">
+          <button
+            className="rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent px-3.5 py-1.5 font-korean"
+            style={{
+              border: '1px solid rgba(6,182,212,.3)',
+              background: 'rgba(6,182,212,.08)',
+            }}
+          >
             + 신규 사고 등록
           </button>
         </div>
       </div>
       <div className="flex-1 overflow-y-auto px-5 pb-4">
         {loading ? (
-          <div className="text-center py-20 text-fg-disabled text-sm">로딩 중...</div>
+          <div className="text-center py-20 text-fg-disabled text-title-3">로딩 중...</div>
         ) : opsList.length === 0 ? (
-          <div className="text-center py-20 text-fg-disabled text-sm">
+          <div className="text-center py-20 text-fg-disabled text-title-3">
             구난 작전 데이터가 없습니다.
           </div>
         ) : (
-          <table className="w-full border-collapse text-[11px] mt-3">
+          <table className="w-full border-collapse text-label-2 mt-3">
             <thead>
               <tr className="bg-bg-card border-b border-stroke">
                 {['상태', '사고번호', '선박명', '사고유형', '발생일시', '위치', '인명'].map((h) => (
                   <th
                     key={h}
-                    className="py-2 px-2.5 text-left font-korean font-semibold text-fg-disabled text-[10px]"
+                    className="py-2 px-2.5 text-left font-korean font-semibold text-fg-disabled text-label-2"
                   >
                     {h}
                   </th>
@@ -1565,7 +1665,7 @@ function RescueListView() {
                   >
                     <td className="py-2 px-2.5">
                       <span
-                        className="px-2 py-0.5 rounded-xl text-[9px] font-bold"
+                        className="px-2 py-0.5 rounded-xl text-caption font-bold"
                         style={{
                           background: `color-mix(in srgb, ${status.color} 15%, transparent)`,
                           color: status.color,
@@ -1574,7 +1674,7 @@ function RescueListView() {
                         {status.label}
                       </span>
                     </td>
-                    <td className="py-2 px-2.5 font-mono text-[var(--color-accent)] font-semibold">
+                    <td className="py-2 px-2.5 font-mono text-color-accent font-semibold">
                       {r.opsCd}
                     </td>
                     <td className="py-2 px-2.5 font-korean text-fg font-semibold">{r.vesselNm}</td>
@@ -1582,7 +1682,7 @@ function RescueListView() {
                     <td className="py-2 px-2.5 font-mono text-fg-disabled">
                       {r.regDtm ? new Date(r.regDtm).toLocaleString('ko-KR') : '—'}
                     </td>
-                    <td className="py-2 px-2.5 font-mono text-fg-disabled text-[10px]">
+                    <td className="py-2 px-2.5 font-mono text-fg-disabled text-label-2">
                       {r.locDc ?? '—'}
                     </td>
                     <td className="py-2 px-2.5 font-mono">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 78f2f73..2575bf3 100755
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -22,6 +22,7 @@ export default {
         },
         color: {
           accent: 'var(--color-accent)',
+          'accent-muted': 'var(--color-accent-muted)',
           info: 'var(--color-info)',
           tertiary: 'var(--color-tertiary)',
           danger: 'var(--color-danger)',
@@ -32,6 +33,10 @@ export default {
             DEFAULT: 'var(--color-boom)',
             hover: 'var(--color-boom-hover)',
           },
+          navy: {
+            DEFAULT: 'var(--color-navy)',
+            hover: 'var(--color-navy-hover)',
+          },
         },
       },
       fontSize: {