gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동
b00bb56af3
wing-ops/frontend/src/tabs/aerial/components/AerialTheoryView.tsx
htlee 3fc8f03238 refactor(css): 인라인 스타일 → Tailwind 유틸리티 클래스 변환 (Phase 2, ~990건) 
Phase 2: 정적 인라인 스타일을 Tailwind className으로 변환
- common/: MapView, BacktrackReplayBar, LoginPage, LayerTree, ComboBox, SubMenuBar
- hns/: HNSSubstanceView, HNSScenarioView, HNSView, HNSLeftPanel 등 8파일
- prediction/: BoomDeploymentTheoryView, OilBoomSection, RecalcModal, RightPanel 등 8파일
- incidents/: IncidentsView, IncidentsLeftPanel, IncidentsRightPanel
- rescue/: RescueScenarioView
- aerial/: SatelliteRequest, AerialTheoryView
- assets/: ShipInsurance, AssetTheory, AssetManagement 등 5파일
- board/: BoardView
- reports/: ReportsView, OilSpillReportTemplate, ReportGenerator
- weather/: WeatherMapOverlay, WeatherView, WeatherRightPanel

변환 패턴: color/background/border/borderRadius/display/flex/gap/fontSize/fontWeight → Tailwind
동적 스타일(rgba, gradient, 삼항 조건부, 런타임 변수)은 style prop에 유지
JS 번들: 2,921KB → 2,897KB (-24KB)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 11:24:13 +09:00

584 lines
63 KiB
TypeScript
Executable File
Raw Blame 히스토리

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { useState } from 'react'
import { sanitizeHtml } from '@common/utils/sanitize'
const panels = [
{ id: 0, icon: '🌐', label: '개요' },
{ id: 1, icon: '🛸', label: '탐지 장비' },
{ id: 2, icon: '🛰', label: '원격탐사' },
{ id: 3, icon: '🗺️', label: 'ESI 방제지도' },
{ id: 4, icon: '📏', label: '면적 산정' },
{ id: 5, icon: '🔗', label: '확산예측 연계' },
{ id: 6, icon: '📚', label: '논문·특허' },
]
function getHtml(panelId: number): string {
switch (panelId) {
case 0: return panel0Html
case 1: return panel1Html
case 2: return panel2Html
case 3: return panel3Html
case 4: return panel4Html
case 5: return panel5Html
case 6: return panel6Html
default: return ''
}
}
export function AerialTheoryView() {
const [activePanel, setActivePanel] = useState(0)
return (
<div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-0">
<div className="flex-1 overflow-y-auto px-6 py-5">
{/* 헤더 */}
<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 border" style={{ background: 'linear-gradient(135deg,rgba(249,115,22,.2),rgba(234,179,8,.15))', borderColor: 'rgba(249,115,22,.3)' }}>📐</div>
<div>
<div className="text-base font-bold">해양 항공탐색 · 원격탐사 이론</div>
<div className="text-[10px] text-text-3 mt-0.5">유출유 원격탐지 · 항공감시 기법 · ESI 방제정보지도 · 등록특허 10-1567431 기반</div>
</div>
</div>
</div>
{/* 내부 네비게이션 */}
<div className="flex gap-[3px] bg-bg-3 rounded-lg p-1 mb-5 border border-border">
{panels.map(p => (
<button
key={p.id}
onClick={() => setActivePanel(p.id)}
className={`flex-1 py-2 text-[10px] rounded-md border-none cursor-pointer transition-colors ${
activePanel === p.id
? 'bg-[rgba(6,182,212,.15)] text-primary-cyan font-bold'
: 'bg-transparent text-text-3 font-normal'
}`}
>
{p.icon} {p.label}
</button>
))}
</div>
{/* 패널 콘텐츠 */}
<div dangerouslySetInnerHTML={{ __html: sanitizeHtml(getHtml(activePanel)) }} />
</div>
</div>
)
}
// ═══ PANEL 0: 개요 ═══
const panel0Html = `
<div style="background:linear-gradient(135deg,rgba(249,115,22,.06),rgba(234,179,8,.04));border:1px solid rgba(249,115,22,.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(--orange),var(--yellow),var(--cyan))"></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(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:16px">📋</div>
<span style="font-size:14px;font-weight:700;color:var(--t1);font-family:var(--fK)">항공탐색이란?</span>
</div>
<div style="font-size:11px;color:var(--t2);font-family:var(--fK);line-height:1.8">
해양 유류오염 발생 시 <b style="color:var(--orange)">드론·유인항공기·위성</b>을 활용하여 유출유의 위치·면적·오염형태를 실시간으로 탐지하고, 방제정보지도(ESI)와 연계하여 <b style="color:var(--cyan)">확산예측 모델의 검증·보정 입력자료</b>로 활용하는 통합 탐색 체계입니다.
</div>
</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(--t1);font-family:var(--fK)">WING 항공탐색 목적</span>
</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--t2);font-family:var(--fK)">
<div style="padding:6px 10px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px"><span style="color:var(--orange);font-weight:700">①</span> 유출유 <b>실시간 위치·면적</b> 파악 → 확산예측 초기조건 보정</div>
<div style="padding:6px 10px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.12);border-radius:6px"><span style="color:var(--cyan);font-weight:700">②</span> <b>수온(SST) 위성자료</b> 실시간 수신 → 유출유 풍화모델 입력</div>
<div style="padding:6px 10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12);border-radius:6px"><span style="color:var(--green);font-weight:700">③</span> <b>ESI 환경민감자원</b> 현장 확인 → 방제 우선순위 결정</div>
<div style="padding:6px 10px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.12);border-radius:6px"><span style="color:var(--purple);font-weight:700">④</span> 드론 <b>3D 재구성</b> → 선박 식별·오염원 정밀 분석</div>
</div>
</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:16px">
<div style="font-size:12px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:14px">⚙️ 항공탐색 → 방제대응 통합 흐름</div>
<div style="display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;padding:8px 0">
<div style="padding:10px 14px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:8px;text-align:center;font-size:9px;font-family:var(--fK)">
<div style="font-size:16px;margin-bottom:4px">🛸✈🛰</div>
<div style="font-weight:700;color:var(--orange)">탐지 플랫폼</div>
<div style="color:var(--t3)">드론·항공기·위성</div>
</div>
<div style="width:24px;height:1px;background:var(--bdL);position:relative"><div style="position:absolute;right:-4px;top:-4px;color:var(--t3);font-size:10px">▶</div></div>
<div style="padding:10px 14px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:8px;text-align:center;font-size:9px;font-family:var(--fK)">
<div style="font-size:16px;margin-bottom:4px">📷🌡️📡</div>
<div style="font-weight:700;color:var(--cyan)">센서 데이터</div>
<div style="color:var(--t3)">광학·IR·SAR·SST</div>
</div>
<div style="width:24px;height:1px;background:var(--bdL);position:relative"><div style="position:absolute;right:-4px;top:-4px;color:var(--t3);font-size:10px">▶</div></div>
<div style="padding:10px 14px;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.2);border-radius:8px;text-align:center;font-size:9px;font-family:var(--fK)">
<div style="font-size:16px;margin-bottom:4px">🗺️📐</div>
<div style="font-weight:700;color:var(--yellow)">영상 처리</div>
<div style="color:var(--t3)">좌표변환·면적산정</div>
</div>
<div style="width:24px;height:1px;background:var(--bdL);position:relative"><div style="position:absolute;right:-4px;top:-4px;color:var(--t3);font-size:10px">▶</div></div>
<div style="padding:10px 14px;background:rgba(59,130,246,.08);border:2px solid rgba(59,130,246,.3);border-radius:8px;text-align:center;font-size:9px;font-family:var(--fK)">
<div style="font-size:16px;margin-bottom:4px">🌊⚙️</div>
<div style="font-weight:700;color:var(--blue)">확산모델 입력</div>
<div style="color:var(--t3)">유출위치·유출량·SST</div>
</div>
<div style="width:24px;height:1px;background:var(--bdL);position:relative"><div style="position:absolute;right:-4px;top:-4px;color:var(--t3);font-size:10px">▶</div></div>
<div style="padding:10px 14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:8px;text-align:center;font-size:9px;font-family:var(--fK)">
<div style="font-size:16px;margin-bottom:4px">🗂️🚢</div>
<div style="font-weight:700;color:var(--green)">방제 의사결정</div>
<div style="color:var(--t3)">ESI 연계·자원 배치</div>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--orange)">
<div style="font-size:12px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:8px">🛸 드론 (UAV)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">현장 즉시 투입·저고도 정밀 촬영. 광학·적외선 카메라 탑재, 실시간 영상 전송, 3D 재구성.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">고도: 30~500m · 속도: 15~25m/s</div>
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">GSD: 1~5cm/px (100m 고도 기준)</div>
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">운용반경: 5~30km · 체공: 30~90분</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--blue)">
<div style="font-size:12px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:8px">✈️ 유인 항공기</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">광역 탐색·장시간 체공. 광학·IR·SAR·SLAR·UV 형광 센서 복합 탑재. 해경 해양오염 감시 항공기.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(59,130,246,.06);border-radius:3px;color:var(--t2)">고도: 300~3,000m · 속도: 60~150m/s</div>
<div style="padding:3px 7px;background:rgba(59,130,246,.06);border-radius:3px;color:var(--t2)">탐색폭: 5~50km · 체공: 4~8시간</div>
<div style="padding:3px 7px;background:rgba(59,130,246,.06);border-radius:3px;color:var(--t2)">야간·악기상 SAR 탐지 가능</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--purple)">
<div style="font-size:12px;font-weight:700;color:var(--purple);font-family:var(--fK);margin-bottom:8px">🛰️ 위성</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">광역·반복 관측. SST(NOAA AVHRR·NGSST)·SAR(Sentinel-1)·광학(KOMPSAT) 활용. 구름 문제 존재.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--t2)">NGSST: 5km 해상도 · 일 1회 갱신</div>
<div style="padding:3px 7px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--t2)">SAR: 5~25m 해상도 · 구름 무관</div>
<div style="padding:3px 7px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--t2)">KOMPSAT-5: X-band SAR 1m급</div>
</div>
</div>
</div>
`
// ═══ PANEL 1: 탐지 장비 ═══
const panel1Html = `
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:14px">
<div style="font-size:12px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:12px">🔬 유출유 탐지 센서 종류 및 특성 비교</div>
<div style="overflow-x:auto">
<table style="width:100%;border-collapse:collapse;font-family:var(--fK);font-size:10px">
<thead>
<tr style="background:rgba(255,255,255,.03);border-bottom:1px solid var(--bdL)">
<th style="padding:7px 10px;text-align:left;color:var(--t3);font-weight:600">센서</th>
<th style="padding:7px 10px;text-align:center;color:var(--t3);font-weight:600">파장대</th>
<th style="padding:7px 10px;text-align:center;color:var(--t3);font-weight:600">탐지 원리</th>
<th style="padding:7px 10px;text-align:center;color:var(--t3);font-weight:600">강점</th>
<th style="padding:7px 10px;text-align:center;color:var(--t3);font-weight:600">한계</th>
<th style="padding:7px 10px;text-align:center;color:var(--t3);font-weight:600">탑재 플랫폼</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(--orange)">광학(EO)</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">0.4~0.7μm</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">반사 휘도 차이<br>유막 광택·색조</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">고해상도<br>직관적 식별</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">야간·구름 불가</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">드론·항공기·위성</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.01)">
<td style="padding:7px 10px;font-weight:700;color:var(--red)">열적외선(IR)</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">8~14μm</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">유막 열방사 차이<br>해수면 온도 대비</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">야간 탐지<br>두께 추정 가능</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">구름 투과 불가<br>얇은 유막 한계</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">드론·항공기<br>NOAA AVHRR</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,.04)">
<td style="padding:7px 10px;font-weight:700;color:var(--blue)">SAR</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">1~10cm<br>(마이크로파)</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">유막 표면장력 증가<br>→ 브래그 후방산란 감소</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">구름·야간 무관<br>광역 탐지</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">유사 픽처 오탐<br>고해상도 한계</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">위성(Sentinel-1<br>KOMPSAT-5)</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.01)">
<td style="padding:7px 10px;font-weight:700;color:var(--purple)">SLAR/RAR</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">마이크로파</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">측방향 레이더<br>유막 감쇠대 탐지</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">야간·구름 무관<br>광역 감시선</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">항공기 탑재 전용<br>저해상도</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">해경 감시 항공기</td>
</tr>
<tr style="border-bottom:1px solid rgba(255,255,255,.04)">
<td style="padding:7px 10px;font-weight:700;color:var(--yellow)">UV 형광</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">0.3~0.4μm</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">자외선 조사 → 기름<br>형광 방출</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">박막 유막(μm급)<br>탐지 가능</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">야간 전용<br>주간 오탐 많음</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">항공기</td>
</tr>
<tr style="background:rgba(255,255,255,.01)">
<td style="padding:7px 10px;font-weight:700;color:var(--cyan)">마이크로파 복사계</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">수cm<br>(수동형)</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">유막 방사율 변화<br>밝기온도 차이</td>
<td style="padding:7px 10px;text-align:center;color:var(--cyan)"><b>구름 완전 투과</b><br>야간 가능</td>
<td style="padding:7px 10px;text-align:center;color:var(--red);font-size:9px">저해상도(50km)<br>NGSST 혼합 사용</td>
<td style="padding:7px 10px;text-align:center;color:var(--t2)">AMSR-E 위성<br>(NGSST 융합)</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:12px;font-weight:700;color:var(--cyan);font-family:var(--fK);margin-bottom:10px">🌡️ NGSST (New Generation SST) 위성 수온자료 — 특허 10-1567431 적용</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.8">
일본 토호쿠대학 Kawamura 교수팀이 제공하는 북서태평양 광역 수온자료입니다. <b style="color:var(--cyan)">열적외선(AVHRR·MODIS)</b>과 <b style="color:var(--orange)">마이크로파(AMSR-E)</b>를 융합하여 구름 유무와 관계없이 일별 수온을 제공합니다.
<div style="margin-top:8px;background:var(--bg0);border-radius:6px;padding:10px;font-family:var(--fM);font-size:10px;line-height:2;color:var(--t1)">
SST(℃) = <span style="color:var(--orange)">0.15</span> × DN − <span style="color:var(--red)">3.0</span><br>
<span style="color:var(--t3);font-size:9px">DN: 바이너리 파일 1byte 디지털 수치</span>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:9px;font-family:var(--fK)">
<div style="padding:6px 9px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:5px"><span style="color:var(--cyan);font-weight:700">영역</span> : 116~166°E, 13~63°N (북서태평양 50×50°)</div>
<div style="padding:6px 9px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:5px"><span style="color:var(--cyan);font-weight:700">해상도</span> : 3분(약 5km) · 격자 1000×1000</div>
<div style="padding:6px 9px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:5px"><span style="color:var(--cyan);font-weight:700">갱신</span> : 매일 12시 FTP 자동수신 · 최근 5일 합성</div>
<div style="padding:6px 9px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:5px"><span style="color:var(--cyan);font-weight:700">보간</span> : Akima(1978) 2차원 5차다항식 → 500m 격자 변환</div>
<div style="padding:6px 9px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:5px"><span style="color:var(--orange);font-weight:700">WING 활용</span> : 유출유 증발·유상화·점도변화 모델 수온 입력</div>
</div>
</div>
</div>
`
// ═══ PANEL 2: 원격탐사 ═══
const panel2Html = `
<div style="background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(59,130,246,.04));border:1px solid rgba(168,85,247,.2);border-radius:12px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--blue))"></div>
<div style="font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:10px">🛰️ 위성 원격탐사 — 유출유 탐지 원리</div>
<div style="font-size:11px;color:var(--t2);font-family:var(--fK);line-height:1.8">
해양 유출유는 해수면에 유막을 형성하여 전자기파 반사·방출·산란 특성을 변화시킵니다. 이 물리적 특성 변화를 위성·항공 센서로 감지하여 유막의 위치·범위·두께를 추정합니다.
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--orange)">
<div style="font-size:11px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:8px">① 열적외선 방출 원리</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">
해수면 위 유막은 해수보다 <b style="color:var(--t1)">방사율이 낮아</b> 동일 온도에서도 적외선 방출량이 다릅니다. 파장 10~12μm 열적외선 밴드에서 유막과 주변 해수의 <b style="color:var(--orange)">밝기온도(Brightness Temperature) 차이</b>로 유막을 탐지합니다.
</div>
<div style="background:var(--bg0);border-radius:5px;padding:8px;font-size:9px;color:var(--t3);font-family:var(--fK)">⚠️ 구름은 열적외선을 완전 차단 → 마이크로파 보조 필요 (NGSST 융합 이유)</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--blue)">
<div style="font-size:11px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:8px">② SAR 브래그 산란 원리</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">
해수면 위 유막은 <b style="color:var(--t1)">표면장력을 증가</b>시켜 소파를 억제합니다. SAR에서 해수면 산란의 주원인인 <b style="color:var(--blue)">브래그(Bragg) 후방산란이 감소</b>하여 유막 영역이 어둡게 나타납니다.
</div>
<div style="background:var(--bg0);border-radius:5px;padding:8px;font-size:9px;color:var(--t3);font-family:var(--fK)">활용: Sentinel-1(C-band) · KOMPSAT-5(X-band) · ALOS PALSAR(L-band)</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--yellow)">
<div style="font-size:11px;font-weight:700;color:var(--yellow);font-family:var(--fK);margin-bottom:8px">③ UV 형광 탐지 원리</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">
석유계 탄화수소에 자외선(310~400nm)을 조사하면 <b style="color:var(--yellow)">형광 발광</b>합니다. 주야간 모두 활용 가능하나 야간 효과가 우수합니다. 수μm 수준의 매우 얇은 유막도 탐지 가능한 고감도 센서입니다.
</div>
<div style="background:var(--bg0);border-radius:5px;padding:8px;font-size:9px;color:var(--t3);font-family:var(--fK)">적용: 해경 감시 항공기 야간 탐색 · 비정상 유출 신고 확인</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--cyan)">
<div style="font-size:11px;font-weight:700;color:var(--cyan);font-family:var(--fK);margin-bottom:8px">④ 마이크로파 복사계 원리</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">
수동 마이크로파 복사계는 지구 방출 마이크로파를 수신합니다. 유막이 있으면 <b style="color:var(--cyan)">방사율 변화</b>로 밝기온도가 달라집니다. 파장이 길어 구름 완전 투과·야간 관측 가능.
</div>
<div style="background:var(--bg0);border-radius:5px;padding:8px;font-size:9px;color:var(--t3);font-family:var(--fK)">해상도 한계(50km)로 단독 사용 불가 → 열적외선과 융합 (NGSST 방식)</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:12px;font-weight:700;color:var(--green);font-family:var(--fK);margin-bottom:10px">🗺️ 전자해도(ENC) 수심자료 처리 — 특허 10-1567431 기반</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.8">
항공탐색 좌표 데이터는 <b style="color:var(--green)">전자해도(ENC) 수심격자</b>와 중첩되어 유출유의 수심환경, 조간대 분포, 해안선 형태를 분석합니다. 수심자료는 국립해양조사원 전자해도 약 300종에서 추출 후 <b style="color:var(--green)">Akima 보간</b>으로 15초 등간격 격자에 정규화합니다.
</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:9px;font-family:var(--fK)">
<div style="padding:6px 9px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:5px"><span style="color:var(--green);font-weight:700">원본</span> : ENC 전자해도 무작위 측심점</div>
<div style="padding:6px 9px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:5px"><span style="color:var(--green);font-weight:700">삼각망</span> : TIN(Triangulated Irregular Network) 구성</div>
<div style="padding:6px 9px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:5px"><span style="color:var(--green);font-weight:700">보간</span> : Akima 2차원 5차다항식 (21개 계수)</div>
<div style="padding:6px 9px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:5px"><span style="color:var(--green);font-weight:700">결과</span> : 15초(463m) 등간격 · 3,225,600 격자</div>
</div>
</div>
</div>
`
// ═══ PANEL 3: ESI 방제지도 ═══
const panel3Html = `
<div style="background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(234,179,8,.04));border:1px solid rgba(34,197,94,.2);border-radius:12px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--yellow))"></div>
<div style="font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:8px">🗺️ ESI 방제정보지도 (Environmental Sensitivity Index Map)</div>
<div style="font-size:11px;color:var(--t2);font-family:var(--fK);line-height:1.8">
ESI 지도는 이문진 박사 특허(등록특허 10-1567431)의 핵심 기반 데이터입니다. 해안선 유형·생태민감도·사회경제적 자원 분포를 통합 등급화하여 <b style="color:var(--green)">방제 우선순위 결정</b>의 근거가 됩니다. 1999~2002년 구축, 해경 인천·태안·군산·목포·완도·제주·여수 관할해역 대상.
</div>
<div style="margin-top:8px;padding:7px 10px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.15);border-radius:5px;font-size:9px;color:var(--t3);font-family:var(--fK)">📚 원전: NOAA ESI Mapping Program · 국내 적용: 해양수산부·한국해양과학기술원</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px">
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--blue)">
<div style="font-size:11px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:8px">① 해안선 분류 (Shoreline)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">해안선 유형을 1~10 등급으로 분류. 등급이 높을수록 오염 취약·방제 난이도 높음.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--t2)">ESI 1~2: 노출 암반·절벽 (낮은 민감도)</div>
<div style="padding:3px 7px;background:rgba(234,179,8,.06);border-radius:3px;color:var(--t2)">ESI 5~7: 자갈·모래 해변 (중간)</div>
<div style="padding:3px 7px;background:rgba(239,68,68,.06);border-radius:3px;color:var(--t2)">ESI 8~10: 조간대·갯벌·맹그로브 (최고)</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--green)">
<div style="font-size:11px;font-weight:700;color:var(--green);font-family:var(--fK);margin-bottom:8px">② 생물자원 (Biological Resources)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">오염 취약 생물 서식지·번식지·이동경로를 위치 기반으로 등록.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--t2)">해조류·어류 산란장·양식장</div>
<div style="padding:3px 7px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--t2)">철새 도래지·해조류 번식지</div>
<div style="padding:3px 7px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--t2)">보호 해양생물 서식구역</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-top:3px solid var(--orange)">
<div style="font-size:11px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:8px">③ 인문·사회자원 (Human-Use)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">경제·사회적 피해 가능 지역을 방제 우선순위 결정에 활용.</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">취수원·정수장·발전소 냉각수</div>
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">항구·어항·수산물 위판장</div>
<div style="padding:3px 7px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--t2)">해수욕장·관광지·문화재</div>
</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:11px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:8px">📏 ESI 해안선 자료 구축 현황 (등록특허 10-1567431)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.8">
본 특허의 ESI 기반 데이터는 1999~2002년(약 3년) 구축된 방제정보지도 <b style="color:var(--t1)">25,000:1 해안선자료</b>를 기반으로 합니다. 매립·준설공사로 변형된 부분은 국립해양조사원 전자해도(ENC) 해안선으로 보완하였습니다. 항공탐색에서 획득한 최신 영상 데이터는 이 ESI DB와 실시간 중첩되어 방제 우선구역을 즉시 산출합니다.
</div>
</div>
`
// ═══ PANEL 4: 면적 산정 ═══
const panel4Html = `
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:14px">
<div style="font-size:12px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:12px">📏 항공 영상 기반 유출유 면적 산정 방법론</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
<div style="background:var(--bg0);border:1px solid rgba(249,115,22,.2);border-radius:8px;padding:12px;border-left:3px solid var(--orange)">
<div style="font-size:11px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:8px">① 픽셀 분류법 (Pixel Classification)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">광학 영상의 각 픽셀을 <b style="color:var(--t1)">반사도·색상·질감</b>에 따라 기름/해수로 분류. 분류된 픽셀 수 × GSD² = 면적.</div>
<div style="background:rgba(255,255,255,.03);border-radius:5px;padding:8px;font-family:var(--fM);font-size:10px;color:var(--t1);line-height:1.8">A = N<sub>oil</sub> × (GSD)<sup>2</sup><br><span style="color:var(--t3);font-size:9px">N: 기름 픽셀수, GSD: 지상 표본거리</span></div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(6,182,212,.2);border-radius:8px;padding:12px;border-left:3px solid var(--cyan)">
<div style="font-size:11px;font-weight:700;color:var(--cyan);font-family:var(--fK);margin-bottom:8px">② 다중분광 지수법 (Spectral Index)</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7;margin-bottom:8px">다중분광 센서로 촬영한 밴드 조합으로 <b style="color:var(--t1)">유막 특유의 분광 반응</b>을 지수화하여 자동 분류.</div>
<div style="background:rgba(255,255,255,.03);border-radius:5px;padding:8px;font-family:var(--fM);font-size:10px;color:var(--t1);line-height:1.8">OSDI = (B<sub>NIR</sub>−B<sub>Red</sub>) / (B<sub>NIR</sub>+B<sub>Red</sub>)<br><span style="color:var(--t3);font-size:9px">Oil Spill Detection Index</span></div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div style="background:var(--bg0);border:1px solid rgba(59,130,246,.2);border-radius:8px;padding:12px;border-left:3px solid var(--blue)">
<div style="font-size:11px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:8px">③ SAR 임계값 분리법</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7">SAR 영상에서 후방산란계수(σ°)의 임계값 이하를 유막으로 판정합니다. 단, 풍속 3m/s 이하나 생물막, 강우 영역이 <b style="color:var(--red)">False Alarm</b> 오탐 발생 원인이 됩니다.</div>
<div style="margin-top:6px;background:rgba(255,255,255,.03);border-radius:5px;padding:7px;font-family:var(--fM);font-size:10px;color:var(--t1)">Oil = {(x,y) | σ°(x,y) &lt; T<sub>th</sub>}<br><span style="color:var(--t3);font-size:9px">T<sub>th</sub>: 최적 임계값 (국소 적응형)</span></div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(34,197,94,.2);border-radius:8px;padding:12px;border-left:3px solid var(--green)">
<div style="font-size:11px;font-weight:700;color:var(--green);font-family:var(--fK);margin-bottom:8px">④ 유량 역산 추정</div>
<div style="font-size:10px;color:var(--t2);font-family:var(--fK);line-height:1.7">면적(A)과 평균 유막 두께(d) 및 풍화 경과 시간(t)으로부터 원래 유출유량(V₀)을 역산합니다.</div>
<div style="margin-top:6px;background:rgba(255,255,255,.03);border-radius:5px;padding:7px;font-family:var(--fM);font-size:10px;color:var(--t1);line-height:1.8">V₀ = A × d / (1 − f<sub>e</sub>(t))<br><span style="color:var(--t3);font-size:9px">f<sub>e</sub>: 누적 증발비 (Stiver &amp; Mackay 1984)</span></div>
</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:11px;font-weight:700;color:var(--yellow);font-family:var(--fK);margin-bottom:10px">🎨 유막 두께 시각적 추정 기준 (Bonn Agreement Color Code)</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-size:9px;font-family:var(--fK)">
<div style="padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-align:center">
<div style="width:20px;height:20px;background:rgba(200,200,255,.3);border-radius:3px;margin:0 auto 4px"></div>
<div style="font-weight:700;color:var(--t1)">은회색</div><div style="color:var(--t3)">&lt; 0.1μm</div><div style="color:var(--t3)">광택층</div>
</div>
<div style="padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-align:center">
<div style="width:20px;height:20px;background:rgba(180,220,180,.4);border-radius:3px;margin:0 auto 4px"></div>
<div style="font-weight:700;color:var(--t1)">무지개색</div><div style="color:var(--t3)">0.1~0.3μm</div><div style="color:var(--t3)">박막층</div>
</div>
<div style="padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-align:center">
<div style="width:20px;height:20px;background:rgba(200,160,80,.5);border-radius:3px;margin:0 auto 4px"></div>
<div style="font-weight:700;color:var(--t1)">메탈릭</div><div style="color:var(--t3)">0.3~5μm</div><div style="color:var(--t3)">광택층</div>
</div>
<div style="padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-align:center">
<div style="width:20px;height:20px;background:rgba(120,90,40,.7);border-radius:3px;margin:0 auto 4px"></div>
<div style="font-weight:700;color:var(--orange)">갈색</div><div style="color:var(--t3)">5~200μm</div><div style="color:var(--t3)">두꺼운층</div>
</div>
<div style="padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;text-align:center">
<div style="width:20px;height:20px;background:rgba(40,40,40,.9);border-radius:3px;margin:0 auto 4px"></div>
<div style="font-weight:700;color:var(--t1)">흑색</div><div style="color:var(--t3)">&gt;200μm</div><div style="color:var(--t3)">농축층</div>
</div>
</div>
</div>
`
// ═══ PANEL 5: 확산예측 연계 ═══
const panel5Html = `
<div style="background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(6,182,212,.04));border:1px solid rgba(59,130,246,.2);border-radius:12px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))"></div>
<div style="font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:8px">🔗 항공탐색 데이터 → 유출유 확산예측 연계 체계</div>
<div style="font-size:11px;color:var(--t2);font-family:var(--fK);line-height:1.8">
이문진 박사 특허(등록특허 10-1567431)는 <b style="color:var(--cyan)">위성영상수신시스템(SST)</b>을 기상예측시스템·검조소와 함께 인터넷으로 연결하여, 항공탐색 데이터가 실시간 확산 예측의 핵심 입력자료가 되는 통합 네트워크를 구성합니다.
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--orange)">
<div style="font-size:11px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:8px">📡 항공탐색 → 모델 입력</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:10px;font-family:var(--fK)">
<div style="padding:6px 9px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">📍 유출 위치 보정</div><div style="color:var(--t3)">드론·위성 영상 → GPS 좌표 → 모델 유출지점 갱신</div></div>
<div style="padding:6px 9px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🛢️ 유출량 역산</div><div style="color:var(--t3)">면적×두께 → 유량 추정 → 확산모델 유출량 보정</div></div>
<div style="padding:6px 9px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🌡️ SST 수온 입력</div><div style="color:var(--t3)">NGSST FTP 수신 → Akima 보간 → 풍화모델 수온값</div></div>
<div style="padding:6px 9px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🎨 풍화 상태 확인</div><div style="color:var(--t3)">색상 분류 → 증발비 추정 → 풍화모델 초기값 보정</div></div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px;border-left:3px solid var(--blue)">
<div style="font-size:11px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:8px">🔄 모델 → 항공탐색 피드백</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:10px;font-family:var(--fK)">
<div style="padding:6px 9px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🗺️ 탐색 우선구역 제공</div><div style="color:var(--t3)">확산 예측 결과 → 다음 탐색 집중구역 자동 생성</div></div>
<div style="padding:6px 9px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">📊 모델 검증 자료</div><div style="color:var(--t3)">실측 유출유 위치 ↔ 예측값 오차 분석 → 정확도 평가</div></div>
<div style="padding:6px 9px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🏖️ ESI 피해 위험구역</div><div style="color:var(--t3)">확산경로×ESI 중첩 → 항공탐색 ESI 현장확인 우선순위</div></div>
<div style="padding:6px 9px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:5px"><div style="font-weight:700;color:var(--t1);margin-bottom:1px">🚢 방제자원 배치안</div><div style="color:var(--t3)">예측 도달시간 → 오일펜스·방제정 최적 배치 좌표 제공</div></div>
</div>
</div>
</div>
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:11px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:12px">📡 특허 10-1567431 실시간 자료 연계 네트워크 (도면 9)</div>
<div style="display:flex;align-items:flex-start;justify-content:center;gap:0;padding:8px 0">
<div style="display:flex;flex-direction:column;gap:6px;align-items:center">
<div style="padding:8px 12px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:7px;text-align:center;font-size:9px;font-family:var(--fK)"><div style="font-weight:700;color:var(--cyan)">기상예측시스템 ①</div><div style="color:var(--t3)">바람·기온·기압<br>국립환경과학원</div></div>
<div style="padding:8px 12px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:7px;text-align:center;font-size:9px;font-family:var(--fK)"><div style="font-weight:700;color:var(--orange)">위성영상수신시스템 ②</div><div style="color:var(--t3)">SST(NGSST)<br>토호쿠대학 FTP</div></div>
<div style="padding:8px 12px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:7px;text-align:center;font-size:9px;font-family:var(--fK)"><div style="font-weight:700;color:var(--green)">검조소</div><div style="color:var(--t3)">실시간 조위<br>조석정보</div></div>
</div>
<div style="display:flex;flex-direction:column;justify-content:center;height:160px;padding:0 12px;gap:2px">
<div style="width:30px;height:1px;background:var(--bdL)"></div>
<div style="width:30px;height:1px;background:var(--bdL)"></div>
<div style="width:30px;height:1px;background:var(--bdL)"></div>
</div>
<div style="padding:16px 20px;background:rgba(168,85,247,.08);border:2px solid rgba(168,85,247,.3);border-radius:10px;text-align:center;font-size:10px;font-family:var(--fK);align-self:center">
<div style="font-size:16px;margin-bottom:4px">🖥️</div>
<div style="font-weight:700;color:var(--purple)">서버(WING)</div><div style="color:var(--t3);font-size:9px">데이터 수신·처리<br>모델 구동</div>
</div>
<div style="width:30px;height:1px;background:var(--bdL);align-self:center"></div>
<div style="display:flex;flex-direction:column;gap:6px;align-items:center;align-self:center">
<div style="padding:8px 12px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:7px;text-align:center;font-size:9px;font-family:var(--fK)"><div style="font-weight:700;color:var(--orange)">클라이언트</div><div style="color:var(--t3)">유출지점·유출량<br>입력 및 결과 수령</div></div>
</div>
</div>
<div style="font-size:9px;color:var(--t3);font-family:var(--fK);text-align:center;margin-top:8px">기상자료·수온자료·조석정보 실시간 수신 → CHARRY 조류 + 취송류 예측 → 유출유 확산 예측 (S10→S20→S30)</div>
</div>
`
// ═══ PANEL 6: 논문·특허 ═══
const panel6Html = `
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,rgba(234,179,8,.2),rgba(249,115,22,.15));border:1px solid rgba(234,179,8,.3);display:flex;align-items:center;justify-content:center;font-size:18px">📜</div>
<div>
<div style="font-size:14px;font-weight:700;color:var(--t1);font-family:var(--fK)">등록특허 원문 기반 이론 근거</div>
<div style="font-size:9px;color:var(--t3);font-family:var(--fK);margin-top:1px">WING 탑재 유출유 확산예측 시스템의 특허 원전 2건 전체 분석</div>
</div>
</div>
<!-- 특허 1: 10-1567431 -->
<div style="background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(34,197,94,.03));border:1px solid rgba(6,182,212,.25);border-radius:12px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--green))"></div>
<div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:14px">
<div style="padding:8px 12px;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);border-radius:8px;text-align:center;white-space:nowrap;flex-shrink:0">
<div style="font-size:8px;color:var(--t3);font-family:var(--fK)">대한민국 등록특허</div>
<div style="font-size:13px;font-weight:800;color:var(--cyan);font-family:var(--fM)">10-1567431</div>
<div style="font-size:8px;color:var(--t3);font-family:var(--fK);margin-top:2px">등록: 2015.11.03</div>
</div>
<div style="flex:1">
<div style="font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:5px;line-height:1.5">해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법</div>
<div style="font-size:9px;color:var(--t2);font-family:var(--fK);line-height:1.8"><span style="color:var(--cyan)">특허권자</span> : 한국해양과학기술원 | <span style="color:var(--cyan)">발명자</span> : 이문진 · 김혜진 · 이승현 · 전태병</div>
</div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(6,182,212,.15);border-radius:8px;padding:12px;margin-bottom:12px">
<div style="font-size:10px;font-weight:700;color:var(--cyan);font-family:var(--fK);margin-bottom:9px">📋 청구항 1 — ESI 기반 실시간 확산 3단계</div>
<div style="display:flex;flex-direction:column;gap:6px;font-size:10px;font-family:var(--fK)">
<div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:32px;height:22px;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--orange);font-size:10px;flex-shrink:0">S10</div><div style="color:var(--t2);line-height:1.7"><b style="color:var(--t1)">실시간 자료 수신</b> — 기상예측시스템·위성영상수신시스템·검조소 인터넷 연결. FTP로 기상자료+수온자료(NGSST)+조석정보 자동 수신</div></div>
<div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:32px;height:22px;background:rgba(6,182,212,.15);border:1px solid rgba(6,182,212,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--cyan);font-size:10px;flex-shrink:0">S20</div><div style="color:var(--t2);line-height:1.7"><b style="color:var(--t1)">조류·취송류 예측</b> — CHARRY모델 조화분석 + 취송류 경험식(0.029×Vw, θw+18.6°)</div></div>
<div style="display:flex;gap:10px;align-items:flex-start"><div style="min-width:32px;height:22px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--green);font-size:10px;flex-shrink:0">S30</div><div style="color:var(--t2);line-height:1.7"><b style="color:var(--t1)">유출유 확산 실시간 예측</b> — Monte Carlo 입자추적 + fBm 난류확산 + 풍화 5단계 → ESI 방제정보지도 기반 방제방안 수립</div></div>
</div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(34,197,94,.15);border-radius:8px;padding:11px;margin-bottom:10px">
<div style="font-size:10px;font-weight:700;color:var(--green);font-family:var(--fK);margin-bottom:7px">🌀 fBm 난류확산 | <span style="color:var(--t2);font-weight:400">σ²(t) = A·t^m, m=0.45~2.46</span></div>
<div style="font-size:9px;color:var(--t2);font-family:var(--fK);line-height:1.7">분수 브라운운동(fBm) 기반 무작위 확산거리 생성. 등방성(isotropic) 확산 가정.</div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(249,115,22,.15);border-radius:8px;padding:12px">
<div style="font-size:10px;font-weight:700;color:var(--orange);font-family:var(--fK);margin-bottom:9px">🧪 유출유 풍화(Weathering) 5단계</div>
<div style="display:flex;flex-direction:column;gap:4px;font-size:9px;font-family:var(--fK)">
<div style="display:grid;grid-template-columns:60px 1fr;gap:8px;padding:5px 8px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--orange)">① 퍼짐</div><div style="color:var(--t2);line-height:1.6">Fay(1969): 중력-관성력. Mackay et al.(1980) 표면장력-점성력</div></div>
<div style="display:grid;grid-template-columns:60px 1fr;gap:8px;padding:5px 8px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--yellow)">② 증발</div><div style="color:var(--t2);line-height:1.6">Stiver &amp; Mackay(1984) 해석적 방법. 수일~10일간 약 25%</div></div>
<div style="display:grid;grid-template-columns:60px 1fr;gap:8px;padding:5px 8px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--cyan)">③ 소산</div><div style="color:var(--t2);line-height:1.6">쇄파 기인. 파도에너지·풍속 함수. 전체 약 15%</div></div>
<div style="display:grid;grid-template-columns:60px 1fr;gap:8px;padding:5px 8px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--blue)">④ 유상화</div><div style="color:var(--t2);line-height:1.6">Water-in-oil. Mackay et al.(1980) 풍속·수분 함수</div></div>
<div style="display:grid;grid-template-columns:60px 1fr;gap:8px;padding:5px 8px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--t2)">⑤ 침강</div><div style="color:var(--t2);line-height:1.6">용해·미생물 분해. 질량 손실률 = 초기 누유량에 선형 비례</div></div>
</div>
</div>
</div>
<!-- 특허 2: 10-1868791 -->
<div style="background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(168,85,247,.03));border:1px solid rgba(59,130,246,.25);border-radius:12px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden">
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple))"></div>
<div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:14px">
<div style="padding:8px 12px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);border-radius:8px;text-align:center;white-space:nowrap;flex-shrink:0">
<div style="font-size:8px;color:var(--t3);font-family:var(--fK)">대한민국 등록특허</div>
<div style="font-size:13px;font-weight:800;color:var(--blue);font-family:var(--fM)">10-1868791</div>
<div style="font-size:8px;color:var(--t3);font-family:var(--fK);margin-top:2px">등록: 2018.06.12</div>
</div>
<div style="flex:1">
<div style="font-size:13px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:5px;line-height:1.5">유출유(Oil spill) 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측 시스템</div>
<div style="font-size:9px;color:var(--t2);font-family:var(--fK);line-height:1.8"><span style="color:var(--blue)">특허권자</span> : 주식회사 아라종합기술 | <span style="color:var(--blue)">발명자</span> : 김도연·김용혁·김충기·김성은·박상훈·오정환</div>
</div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(59,130,246,.15);border-radius:8px;padding:11px;margin-bottom:10px">
<div style="font-size:10px;font-weight:700;color:var(--blue);font-family:var(--fK);margin-bottom:9px">⚙️ 입자 추적 모듈 최적화 5단계</div>
<div style="display:flex;flex-direction:column;gap:4px;font-size:9px;font-family:var(--fK)">
<div style="display:flex;gap:7px;padding:5px 8px;background:rgba(59,130,246,.04);border-radius:4px"><span style="min-width:20px;font-weight:800;color:var(--blue)">(a)</span><div style="color:var(--t2);line-height:1.6"><b>뜰개 관측 + 예측자료 취득</b> : GPS 뜰개 투하 → 실제 이동경로 + 예측 기상·해양자료 취득</div></div>
<div style="display:flex;gap:7px;padding:5px 8px;background:rgba(59,130,246,.04);border-radius:4px"><span style="min-width:20px;font-weight:800;color:var(--blue)">(b)</span><div style="color:var(--t2);line-height:1.6"><b>제1 입자 추적 모델 실행</b> : 예측자료 + 확산계수 → 제1 예측변화량(ΔModel) 산출</div></div>
<div style="display:flex;gap:7px;padding:5px 8px;background:rgba(59,130,246,.04);border-radius:4px"><span style="min-width:20px;font-weight:800;color:var(--blue)">(c)</span><div style="color:var(--t2);line-height:1.6"><b>전처리 차분</b> : 관측경로 Δobs ↔ 제1모델 ΔModel 차분 처리</div></div>
<div style="display:flex;gap:7px;padding:5px 8px;background:rgba(59,130,246,.04);border-radius:4px"><span style="min-width:20px;font-weight:800;color:var(--blue)">(d)</span><div style="color:var(--t2);line-height:1.6"><b>제2 입자 추적 모델 수립</b> : ΔModel 기반 제2모델 → ΔRevised 산출</div></div>
<div style="display:flex;gap:7px;padding:5px 8px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.12);border-radius:4px"><span style="min-width:20px;font-weight:800;color:var(--purple)">(e)</span><div style="color:var(--t2);line-height:1.6"><b>최적화 알고리즘 적용</b> : ΔRevised ↔ Δobs 비교 → <b style="color:var(--purple)">GA·DE·HS·PSO</b> 매개변수 최적화 반복 수렴</div></div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div style="background:var(--bg0);border:1px solid var(--bd);border-radius:8px;padding:11px">
<div style="font-size:10px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:7px">입자 추적 수학 모델</div>
<div style="background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.12);border-radius:5px;padding:8px;font-family:var(--fM);font-size:9px;color:var(--t1);line-height:2">
<span style="color:var(--t3)">제1모델:</span> Model<sub>x</sub> = cur<sub>u</sub>·Δt + c·w<sub>u</sub>·Δt<br>
<span style="color:var(--t3)">제2모델:</span> Rev<sub>x</sub> = a1·cur<sub>u</sub>+a2·cur<sub>v</sub>+...+a9
</div>
</div>
<div style="background:var(--bg0);border:1px solid rgba(168,85,247,.15);border-radius:8px;padding:11px">
<div style="font-size:10px;font-weight:700;color:var(--purple);font-family:var(--fK);margin-bottom:7px">4대 최적화 알고리즘</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="padding:3px 7px;background:rgba(168,85,247,.04);border-radius:4px;color:var(--t2)"><b style="color:var(--purple)">GA</b> : 유전 알고리즘 — 변이·교배 진화</div>
<div style="padding:3px 7px;background:rgba(59,130,246,.04);border-radius:4px;color:var(--t2)"><b style="color:var(--blue)">DE</b> : 미분 진화 — 벡터 차이 기반 전역최적화</div>
<div style="padding:3px 7px;background:rgba(34,197,94,.04);border-radius:4px;color:var(--t2)"><b style="color:var(--green)">HS</b> : 하모니 서치 — 음악구성 수리모델</div>
<div style="padding:3px 7px;background:rgba(249,115,22,.04);border-radius:4px;color:var(--t2)"><b style="color:var(--orange)">PSO</b> : 입자군집 최적화 — 새떼 군집행동 모방</div>
</div>
</div>
</div>
</div>
<!-- 선행기술 참고문헌 -->
<div style="background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:14px">
<div style="font-size:11px;font-weight:700;color:var(--t1);font-family:var(--fK);margin-bottom:10px">📚 특허 원문 인용 선행기술문헌 (심사관 인용 포함)</div>
<div style="display:flex;flex-direction:column;gap:3px;font-size:9px;font-family:var(--fK)">
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(6,182,212,.1);border-radius:3px;color:var(--cyan);font-weight:700;font-size:8px;text-align:center;height:fit-content">특허① 인용</div><div style="color:var(--t2);line-height:1.6">해양환경안전학회지 제17권 4호 (김혜진·이문진 외) — KOSPS 상시 운용 체계 | 심사관 직접 인용</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(6,182,212,.1);border-radius:3px;color:var(--cyan);font-weight:700;font-size:8px;text-align:center;height:fit-content">특허① 인용</div><div style="color:var(--t2);line-height:1.6">해양환경안전학회 2008 춘계학술발표회 — CHARRY 조류모델 | 심사관 직접 인용</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(6,182,212,.1);border-radius:3px;color:var(--cyan);font-weight:700;font-size:8px;text-align:center;height:fit-content">특허① 인용</div><div style="color:var(--t2);line-height:1.6">KR1020120121163 A — 심사관 인용 선행특허</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(59,130,246,.1);border-radius:3px;color:var(--blue);font-weight:700;font-size:8px;text-align:center;height:fit-content">특허② 인용</div><div style="color:var(--t2);line-height:1.6">KR101538668 B1 / KR101378463 B1 — 심사관 인용 선행특허 2건</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(59,130,246,.1);border-radius:3px;color:var(--blue);font-weight:700;font-size:8px;text-align:center;height:fit-content">특허② 인용</div><div style="color:var(--t2);line-height:1.6">한국 등록특허 제10-1567431 — 발명배경 §[0007]에서 선행기술로 직접 인용</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">Fay(1969) · Mackay et al.(1980) · Stiver &amp; Mackay(1984) · Mooney(1951) — 풍화 5단계 원전</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">Akima(1978a, 1978b) — 2차원 5차다항식 보간법 (수심·기상자료 보간)</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">이문진·강용균(2000) 한국해양학회지 — 취송류 경험식 0.029×Vw, θw+18.6° 원전</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">Bowden(1983) — fBm 난류확산 σ²=At^m (m=0.45~2.46)</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">Wahr(1981) — 조석 Love number (k=0.3, h=0.61) · 기조력 계수</div></div>
<div style="display:grid;grid-template-columns:56px 1fr;gap:7px;padding:5px 8px;background:var(--bg0);border-radius:4px"><div style="padding:2px 5px;background:rgba(249,115,22,.1);border-radius:3px;color:var(--orange);font-weight:700;font-size:8px;text-align:center;height:fit-content">이론 원전</div><div style="color:var(--t2);line-height:1.6">Flather &amp; Heaps(1975) — 조석 간출지(tidal flat) 처리 기법</div></div>
</div>
</div>
`
Reference in New Issue View Git Blame Copy Permalink