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 style={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%', flex: 1, overflow: 'hidden', background: 'var(--bg0)' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px' }}>
        {/* 헤더 */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ width: '42px', height: '42px', borderRadius: '10px', background: 'linear-gradient(135deg,rgba(249,115,22,.2),rgba(234,179,8,.15))', border: '1px solid rgba(249,115,22,.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px' }}>📐</div>
            <div>
              <div style={{ fontSize: '16px', fontWeight: 700 }}>해양 항공탐색 · 원격탐사 이론</div>
              <div style={{ fontSize: '10px', color: 'var(--t3)', marginTop: '2px' }}>유출유 원격탐지 · 항공감시 기법 · ESI 방제정보지도 · 등록특허 10-1567431 기반</div>
            </div>
          </div>
        </div>

        {/* 내부 네비게이션 */}
        <div style={{ display: 'flex', gap: '3px', background: 'var(--bg3)', borderRadius: '8px', padding: '4px', marginBottom: '20px', border: '1px solid var(--bd)' }}>
          {panels.map(p => (
            <button
              key={p.id}
              onClick={() => setActivePanel(p.id)}
              style={{
                flex: 1, padding: '8px', fontSize: '10px',
                borderRadius: '6px', border: 'none', cursor: 'pointer',
                background: activePanel === p.id ? 'rgba(6,182,212,.15)' : 'transparent',
                color: activePanel === p.id ? 'var(--cyan)' : 'var(--t3)',
                fontWeight: activePanel === p.id ? 700 : 400,
              }}
            >
              {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>
`