import { useState, useRef } from 'react';
import { sanitizeHtml } from '@common/utils/sanitize';

const theoryTabs = [
  { icon: '🔬', name: '시스템 개요' },
  { icon: '🌀', name: '가우시안 모델' },
  { icon: '🧪', name: '물질별 시나리오' },
  { icon: '🌊', name: '해양환경 보정' },
  { icon: '✅', name: '모델 검증' },
  { icon: '⚡', name: '실시간 비교' },
  { icon: '🚀', name: 'WRF-Chem·발전' },
];

const panelHtml: string[] = [
  // Panel 0
  `<!-- 정의 및 목적 배너 -->
          <div style="background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(6,182,212,.04));border:1px solid rgba(168,85,247,.2);border-radius:12px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden">
            <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-tertiary),var(--color-accent),var(--color-warning))"></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
              <!-- 정의 -->
              <div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
                  <div style="width:30px;height:30px;border-radius:8px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:16px">📋</div>
                  <span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 대기확산 모델이란?</span>
                </div>
                <div style="font-size:11px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.8">
                  해상에서 유출된 <b style="color:var(--color-warning)">위험유해물질(Hazardous & Noxious Substances, HNS)</b>이 대기로 증발하여 퍼지는 농도를 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다. 기상 예측 모델(<b style="color:var(--color-accent)">WRF</b>)과 대기화학 모델(<b style="color:var(--color-accent)">Chem</b>)을 결합하여 실시간 대기 확산을 시뮬레이션합니다.
                </div>
              </div>
              <!-- 목적 -->
              <div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
                  <div style="width:30px;height:30px;border-radius:8px;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:16px">🎯</div>
                  <span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">목적</span>
                </div>
                <div style="display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--fg-sub);font-family:var(--font-korean)">
                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.12);border-radius:6px"><span style="color:var(--color-danger);font-weight:700">①</span> 유출 사고 시 <b>신속한 위험 범위 예측</b></div>
                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px"><span style="color:var(--color-warning);font-weight:700">②</span> 독성물질 농도 기반 <b>대피 명령</b> 의사결정</div>
                  <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12);border-radius:6px"><span style="color:var(--color-success);font-weight:700">③</span> 사고 대응 체계 구축 및 <b>피해 최소화</b></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 작동 원리 3-Step -->
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px">
            <!-- Step 1: 물질 특성 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning);position:relative">
              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-warning)">1</div>
              <div style="font-size:12px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:10px">🧪 물질 특성 반영</div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
                HNS는 <b style="color:var(--fg-default)">약 6,000종 이상</b>으로, 종류가 매우 다양합니다. 각 물질의 고유 거동 특성을 모델에 반영합니다.
              </div>
              <div style="display:flex;flex-wrap:wrap;gap:4px">
                <span style="padding:3px 8px;border-radius:4px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.15);font-size:9px;color:var(--color-warning);font-family:var(--font-korean)">증발률</span>
                <span style="padding:3px 8px;border-radius:4px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);font-size:9px;color:var(--color-danger);font-family:var(--font-korean)">독성</span>
                <span style="padding:3px 8px;border-radius:4px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.15);font-size:9px;color:var(--color-tertiary);font-family:var(--font-korean)">기화 특성</span>
                <span style="padding:3px 8px;border-radius:4px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);font-size:9px;color:var(--color-info);font-family:var(--font-korean)">비중</span>
                <span style="padding:3px 8px;border-radius:4px;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.15);font-size:9px;color:var(--color-caution);font-family:var(--font-korean)">인화점</span>
                <span style="padding:3px 8px;border-radius:4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);font-size:9px;color:var(--color-success);font-family:var(--font-korean)">용해도</span>
              </div>
            </div>
            <!-- Step 2: 기상 데이터 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-accent);position:relative">
              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-accent)">2</div>
              <div style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:10px">🌬 기상 데이터 연동</div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
                실시간 기상 정보를 입력 데이터로 사용하여 확산 방향과 속도를 결정합니다.
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">💨</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">풍향·풍속</div></div>
                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">🌡</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">기온</div></div>
                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">📊</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">대기 안정도</div></div>
                <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center"><div style="font-size:14px">💧</div><div style="font-size:9px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean)">습도·강수</div></div>
              </div>
            </div>
            <!-- Step 3: 확산 알고리즘 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-tertiary);position:relative">
              <div style="position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--color-tertiary)">3</div>
              <div style="font-size:12px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:10px">🔬 확산 알고리즘</div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7;margin-bottom:10px">
                가우시안 플룸/퍼프 모델 또는 WRF-Chem 수치 모델을 사용하여 대기 중 농도를 계산합니다.
              </div>
              <div style="display:flex;flex-direction:column;gap:5px">
                <div style="padding:6px 10px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-tertiary);font-weight:700">▸</span> Gaussian Plume/Puff</div>
                <div style="padding:6px 10px;background:rgba(6,182,212,.05);border:1px solid rgba(6,182,212,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-accent);font-weight:700">▸</span> WRF-Chem (기상+화학)</div>
                <div style="padding:6px 10px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);display:flex;align-items:center;gap:6px"><span style="color:var(--color-warning);font-weight:700">▸</span> ALOHA / CAMEO</div>
              </div>
            </div>
          </div>

          <!-- 주요 기능 및 특징 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">⚙ 주요 기능 및 특징</div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
              <div style="padding:14px;background:linear-gradient(135deg,rgba(239,68,68,.04),rgba(249,115,22,.03));border:1px solid rgba(239,68,68,.15);border-radius:8px">
                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
                  <span style="font-size:18px">📡</span>
                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">실시간 모니터링</span>
                </div>
                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  '<b style="color:var(--color-danger)">HNS 유출 블랙박스 시스템</b>'과 같이 사고 즉시 확산 방향과 농도를 예측하여 시각화합니다. 사고 발생 → 자동 감지 → 실시간 확산 맵 생성의 자동화 파이프라인을 제공합니다.
                </div>
              </div>
              <div style="padding:14px;background:linear-gradient(135deg,rgba(249,115,22,.04),rgba(234,179,8,.03));border:1px solid rgba(249,115,22,.15);border-radius:8px">
                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
                  <span style="font-size:18px">🎯</span>
                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">위험 범위 예측</span>
                </div>
                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  대기 중 독성물질 농도에 따른 <b style="color:var(--color-warning)">안전/경고/위험 구역</b>을 AEGL·ERPG 기준으로 자동 설정합니다. 시간대별 확산 경계를 지도 위에 오버레이합니다.
                </div>
              </div>
              <div style="padding:14px;background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(6,182,212,.03));border:1px solid rgba(34,197,94,.15);border-radius:8px">
                <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
                  <span style="font-size:18px">⚡</span>
                  <span style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">긴급 대응</span>
                </div>
                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  해상 사고 시 <b style="color:var(--color-success)">조화상수 DB</b>를 이용한 빠른 예측 기술을 포함합니다. 사전 계산된 시나리오 DB를 활용하여 초기 대응 시간을 <b style="color:var(--color-accent)">수 분 이내</b>로 단축합니다.
                </div>
              </div>
            </div>
          </div>

          <!-- 주요 기술 아키텍처 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">🏗 주요 기술 아키텍처</div>
            <!-- Flow diagram -->
            <div style="display:flex;align-items:center;gap:0;justify-content:center;margin-bottom:16px;flex-wrap:wrap">
              <div style="padding:10px 16px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.25);border-radius:8px;text-align:center;min-width:120px">
                <div style="font-size:16px;margin-bottom:4px">🧪</div>
                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean)">HNS 물질 DB</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">6,000+ 물질</div>
              </div>
              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
              <div style="padding:10px 16px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.25);border-radius:8px;text-align:center;min-width:120px">
                <div style="font-size:16px;margin-bottom:4px">🌬</div>
                <div style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">기상 데이터</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">KMA / AWS</div>
              </div>
              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
              <div style="padding:10px 16px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.25);border-radius:8px;text-align:center;min-width:140px">
                <div style="font-size:16px;margin-bottom:4px">🔬</div>
                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">확산 모델 엔진</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">WRF-Chem / Gaussian</div>
              </div>
              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
              <div style="padding:10px 16px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:8px;text-align:center;min-width:120px">
                <div style="font-size:16px;margin-bottom:4px">🗺</div>
                <div style="font-size:10px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">GIS 시각화</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">위험 구역 맵</div>
              </div>
              <div style="font-size:16px;color:var(--fg-disabled);padding:0 6px">→</div>
              <div style="padding:10px 16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:8px;text-align:center;min-width:120px">
                <div style="font-size:16px;margin-bottom:4px">🚨</div>
                <div style="font-size:10px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean)">대응 의사결정</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-mono)">대피·방제 명령</div>
              </div>
            </div>

            <!-- 기술 상세 비교 -->
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px">
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(168,85,247,.15);border-radius:8px">
                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:8px">WRF-Chem</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  기상 예측 모델(<b style="color:var(--color-accent)">WRF</b>)과 대기화학 모델(<b style="color:var(--color-accent)">Chem</b>)을 결합. 3차원 바람장·난류를 실시간 계산하여 화학물질 이류·확산·반응을 동시에 모의합니다.<br>
                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-tertiary)">해상도: 1~3 km / 시간분해능: 1 hr</span>
                </div>
              </div>
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(249,115,22,.15);border-radius:8px">
                <div style="font-size:11px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">Gaussian Plume/Puff</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  ALOHA/CAMEO 표준 알고리즘 기반. 연속 배출(<b style="color:var(--color-tertiary)">Plume</b>) 또는 순간 배출(<b style="color:var(--color-warning)">Puff</b>) 시나리오 선택. 빠른 계산 속도로 <b>초기 대응</b>에 최적화.<br>
                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-warning)">계산시간: < 10초 / 정확도: ±10~40%</span>
                </div>
              </div>
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:8px">
                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">ROMS 해양 연동</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  Regional Ocean Modeling System과 연동하여 해수면 유출물의 <b style="color:var(--color-accent)">해양 확산 + 대기 증발</b>을 동시에 모의합니다. 입자 추적 방식의 한계를 극복한 수치 모델.<br>
                  <span style="font-family:var(--font-mono);font-size:8px;color:var(--color-accent)">장기 모의 가능 / 정밀 농도 계산</span>
                </div>
              </div>
            </div>
          </div>

          <!-- WING 시스템 적용 개요 -->
          <div style="background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(168,85,247,.04));border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:16px">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
              <div style="font-size:13px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">🖥 WING 시스템 적용 전략</div>
              <span style="padding:2px 8px;border-radius:10px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">현재 구현</span>
            </div>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px">
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">🧪</div>
                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS DB 연동</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">CHRIS/CAMEO DB<br>6,000+종 물질 검색</div>
                <div style="margin-top:6px;height:3px;background:var(--color-success);border-radius:2px"></div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">⚡</div>
                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">가우시안 모델</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">ALOHA + 이문진박사모델<br>초기 대응 10초 이내</div>
                <div style="margin-top:6px;height:3px;background:var(--color-success);border-radius:2px"></div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">🌐</div>
                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">WRF-Chem</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">정밀 수치 모의<br>3D 확산 시뮬레이션</div>
                <div style="margin-top:6px;height:3px;background:var(--color-caution);border-radius:2px"></div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:20px;margin-bottom:4px">🌊</div>
                <div style="font-size:10px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">ROMS 연동</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">해양-대기 결합<br>장기 모의 지원</div>
                <div style="margin-top:6px;height:3px;background:var(--color-warning);border-radius:2px"></div>
              </div>
            </div>
            <div style="display:flex;gap:12px;margin-top:10px;font-size:8px;font-family:var(--font-korean);color:var(--fg-disabled)">
              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-success);border-radius:2px"></span> 구현 완료</span>
              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-caution);border-radius:2px"></span> 개발 진행중</span>
              <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--color-warning);border-radius:2px"></span> 계획</span>
            </div>
          </div>

          <!-- ═══ 논문 기반: HNS 사고 실태 및 항만별 위험도 (유영현, 2013) ═══ -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-top:16px;margin-bottom:16px">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
              <div style="display:flex;align-items:center;gap:8px">
                <div style="width:28px;height:28px;border-radius:6px;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🚨</div>
                <div>
                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 사고 실태 및 항만별 위험도</div>
                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">유영현 (2013), 한국위기관리논집 · 해양경찰청 (2010, 2011)</div>
                </div>
              </div>
              <span style="padding:3px 10px;border-radius:6px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);font-size:9px;color:var(--color-danger);font-weight:600;font-family:var(--font-korean)">전 세계 HNS 6,500+종</span>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
              <!-- 주요 항만별 위험도 -->
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">🏭 주요 항만별 화재·폭발·누출 위험도</div>
                <div style="overflow-x:auto">
                  <table style="width:100%;border-collapse:collapse;font-size:9px;font-family:var(--font-korean)">
                    <thead>
                      <tr style="background:rgba(249,115,22,.06)">
                        <th style="padding:6px 8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">항만</th>
                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">화재</th>
                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">폭발</th>
                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">누출</th>
                        <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">HNS(천톤)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.03)"><td style="padding:5px 8px;font-weight:700;color:var(--color-danger)">울산</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-danger)">27,574</td></tr>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.03)"><td style="padding:5px 8px;font-weight:700;color:var(--color-danger)">여수·광양</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-danger)">38,700</td></tr>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">대산</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">19,401</td></tr>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">인천</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">41,618</td></tr>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">부산</td><td style="text-align:center">○</td><td style="text-align:center">△</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--fg-sub)">25,417</td></tr>
                      <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;font-weight:600;color:var(--fg-default)">평택·당진</td><td style="text-align:center">○</td><td style="text-align:center">◎</td><td style="text-align:center">○</td><td style="text-align:center;font-family:var(--font-mono);color:var(--fg-sub)">29,248</td></tr>
                    </tbody>
                  </table>
                </div>
                <div style="margin-top:6px;display:flex;gap:8px;font-size:7px;color:var(--fg-disabled);font-family:var(--font-korean)">
                  <span>◎ 아주높음</span><span>○ 높음</span><span>△ 보통이상</span><span>□ 보통</span>
                  <span style="color:var(--fg-disabled);margin-left:auto">단위: 천톤, 2010년 기준</span>
                </div>
              </div>

              <!-- HNS 구분 및 사고 유형 -->
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:8px">⚠ HNS 위험물질 vs 유해물질</div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px">
                  <div style="padding:8px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.12);border-radius:6px">
                    <div style="font-size:10px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:4px">위험물질</div>
                    <div style="font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">폭발·인화·독성·부식·질식·중합 등으로 생명체에 위험을 초래하는 물질</div>
                    <div style="margin-top:4px;display:flex;flex-wrap:wrap;gap:2px">
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">포장위험물</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">산적고체</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">산적액체</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(239,68,68,.06);font-size:7px;color:var(--color-danger)">액화가스</span>
                    </div>
                  </div>
                  <div style="padding:8px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px">
                    <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:4px">유해물질</div>
                    <div style="font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">해양에서 해로운 영향을 초래하는 물질·에너지 (해양환경관리법)</div>
                    <div style="margin-top:4px;display:flex;flex-wrap:wrap;gap:2px">
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">유해액체</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">포장유해</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">대기오염</span>
                      <span style="padding:1px 5px;border-radius:3px;background:rgba(249,115,22,.06);font-size:7px;color:var(--color-warning)">폐기물</span>
                    </div>
                  </div>
                </div>
                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:6px">📊 유류 vs HNS 사고 대응 차이</div>
                <div style="display:grid;grid-template-columns:auto 1fr 1fr;gap:0;font-size:8px;font-family:var(--font-korean)">
                  <div style="padding:4px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);font-weight:600;color:var(--color-tertiary)">구분</div>
                  <div style="padding:4px 6px;background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.08);text-align:center;font-weight:600;color:var(--color-info)">유류</div>
                  <div style="padding:4px 6px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.08);text-align:center;font-weight:600;color:var(--color-danger)">HNS</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">물질</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">눈으로 확인 가능</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">보이지 않는 경우 多</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">위험</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">낮은 위험성</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">독성·폭발·화재 복합</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">예측</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">단기 예측 가능</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">다매체 피해예측 필요</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">대응</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">초기대응자 방제가능</div>
                  <div style="padding:3px 6px;border:1px solid var(--stroke-light);color:var(--color-danger);text-align:center">전문가 방제 필수</div>
                </div>
              </div>
            </div>
          </div>

          <!-- ═══ 국내외 대응 체계 비교 ═══ -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px">
            <!-- 한국 대응 체계 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:14px;border-top:3px solid var(--color-accent)">
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">
                <span style="font-size:14px">🇰🇷</span>
                <span style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">한국 HNS 대응 체계</span>
              </div>
              <div style="display:flex;flex-direction:column;gap:6px;font-size:9px;font-family:var(--font-korean)">
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-accent)">
                  <div><b style="color:var(--fg-default)">OPRC-HNS 의정서</b><br><span style="color:var(--fg-disabled)">2008.1.11 가입 → 2008.4.11 발효</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-success)">
                  <div><b style="color:var(--fg-default)">국가/지역 긴급방제계획</b><br><span style="color:var(--fg-disabled)">HNS 국가긴급방제계획 수립 ('09.6)</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-warning)">
                  <div><b style="color:var(--fg-default)">CARIS 대응정보시스템</b><br><span style="color:var(--fg-disabled)">사고대응 매뉴얼 + 화학물질 정보</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-tertiary)">
                  <div><b style="color:var(--fg-default)">통합 대응 체계</b><br><span style="color:var(--fg-disabled)">대통령 → 중앙안전관리위 → 중앙방제대책본부(해양경찰청장)</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-danger)">
                  <div><b style="color:var(--fg-default)">현장 대응팀</b><br><span style="color:var(--fg-disabled)">상황관리팀 → 사고대응팀(통제반·물질탐지반·방제작업반·제독지원반)</span></div>
                </div>
              </div>
            </div>

            <!-- 미국 대응 체계 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:14px;border-top:3px solid var(--color-info)">
              <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">
                <span style="font-size:14px">🇺🇸</span>
                <span style="font-size:12px;font-weight:700;color:var(--color-info);font-family:var(--font-korean)">미국 HNS 대응 체계</span>
              </div>
              <div style="display:flex;flex-direction:column;gap:6px;font-size:9px;font-family:var(--font-korean)">
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-info)">
                  <div><b style="color:var(--fg-default)">OPA90 / NCP</b><br><span style="color:var(--fg-disabled)">국가긴급계획 ESF #10 — HNS 포함</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-success)">
                  <div><b style="color:var(--fg-default)">공동의장 체제</b><br><span style="color:var(--fg-disabled)">환경청(EPA) + 해안경비대(USCG) 공동 지휘</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-warning)">
                  <div><b style="color:var(--fg-default)">CAMEO / ALOHA / MARPLOT</b><br><span style="color:var(--fg-disabled)">6,000+종 화학물질 통합 DB · 대기확산 모델</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-tertiary)">
                  <div><b style="color:var(--fg-default)">NRT / RRT / NSF</b><br><span style="color:var(--fg-disabled)">국가방제팀 + 지역방제팀 + 국가기동타격대</span></div>
                </div>
                <div style="padding:6px 8px;background:var(--bg-base);border-radius:4px;display:flex;align-items:center;gap:6px;border-left:3px solid var(--color-accent)">
                  <div><b style="color:var(--fg-default)">통합지휘시스템(ICS)</b><br><span style="color:var(--fg-disabled)">16개 부처 + 주·지방정부 + 유출책임자 통합 조정</span></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 국제 협약 및 WING 시스템 연계 -->
          <div style="background:linear-gradient(135deg,rgba(168,85,247,.04),rgba(6,182,212,.03));border:1px solid rgba(168,85,247,.15);border-radius:10px;padding:14px;margin-bottom:16px">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
              <span style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">🌐 HNS 관련 국제 협약 체계</span>
            </div>
            <div style="display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:0;font-size:8px;font-family:var(--font-korean)">
              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:700;color:var(--color-tertiary);border:1px solid rgba(168,85,247,.12)">구분</div>
              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">협약</div>
              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">담당</div>
              <div style="padding:5px 8px;background:rgba(168,85,247,.08);font-weight:600;color:var(--fg-default);text-align:center;border:1px solid rgba(168,85,247,.12)">대상</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)" rowspan="2">안전</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">74 SOLAS</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">위험물질</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">보호</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">MARPOL 73/78</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">기름·유해액체·포장유해·하수·폐기물</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);font-weight:600">대비·대응</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);text-align:center;font-weight:600">2000 OPRC-HNS</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--fg-sub);text-align:center">IMO</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);background:rgba(6,182,212,.03);color:var(--color-accent);text-align:center;font-weight:600">위험·유해물질(HNS)</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-disabled)">배상</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--color-accent);text-align:center">96 HNS협약</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">IMO</div>
              <div style="padding:4px 8px;border:1px solid var(--stroke-light);color:var(--fg-sub);text-align:center">유해물질 및 위험물질</div>
            </div>
          </div>

          <!-- ═══ HATS 사고이력 통계 (장하용·이문진 외, 2017) ═══ -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-tertiary)">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
              <div style="display:flex;align-items:center;gap:8px">
                <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">📊</div>
                <div>
                  <div style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">국내 HNS 사고 통계 (23년간 76건)</div>
                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">장하용·이문진 외 (2017) HATS 분석 · 1994~2016년 해양경비안전본부 데이터</div>
                </div>
              </div>
              <span style="padding:3px 10px;border-radius:6px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);font-size:9px;color:var(--color-tertiary);font-weight:700">연평균 3.3건</span>
            </div>

            <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px">
              <!-- 사고시기 -->
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고시기 1위</div>
                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-warning)">41%</div>
                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">춘계 (3~5월)</div>
                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">동절기 30%</div>
              </div>
              <!-- 사고장소 -->
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고장소 1위</div>
                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-accent)">51%</div>
                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">계류장</div>
                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">항만 29% · 연안 17%</div>
              </div>
              <!-- 오염원 -->
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(239,68,68,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">오염원 1위</div>
                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-danger)">49%</div>
                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">케미컬운반선</div>
                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">육상시설 32%</div>
              </div>
              <!-- 사고원인 -->
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(234,179,8,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고원인 1위</div>
                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-caution)">45%</div>
                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">승무원 과실</div>
                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">화물 22% · 외적원인 17%</div>
              </div>
              <!-- 사고물질 -->
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">사고물질 1위</div>
                <div style="font-size:18px;font-weight:800;font-family:var(--font-mono);color:var(--color-tertiary)">12%</div>
                <div style="font-size:9px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">자일렌류</div>
                <div style="font-size:7px;color:var(--fg-disabled);margin-top:2px">옥탄올·라텍스·팜유 순</div>
              </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
              <!-- 유출량 분포 -->
              <div>
                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:6px">📈 유출량 분포 (76건)</div>
                <div style="display:flex;flex-direction:column;gap:3px;font-size:8px;font-family:var(--font-korean)">
                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">0~50L</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:36%;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-info));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">27건</span></div>
                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">1K~10KL</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:20%;height:100%;background:linear-gradient(90deg,var(--color-warning),var(--color-danger));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">15건</span></div>
                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--fg-disabled)">101~500L</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:13%;height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-accent));border-radius:3px"></div></div><span style="color:var(--fg-default);font-weight:600;width:32px;text-align:right">10건</span></div>
                  <div style="display:flex;align-items:center;gap:6px"><div style="width:60px;color:var(--color-danger)">100만L+</div><div style="flex:1;height:14px;background:var(--bg-base);border-radius:3px;overflow:hidden"><div style="width:12%;height:100%;background:linear-gradient(90deg,var(--color-danger),rgba(239,68,68,.6));border-radius:3px"></div></div><span style="color:var(--color-danger);font-weight:700;width:32px;text-align:right">9건</span></div>
                </div>
                <div style="margin-top:4px;font-size:7px;color:var(--fg-disabled)">※ 소형(50L이하)과 대형(100만L+) 양극화 → 차별화된 대응 필요</div>
              </div>

              <!-- HATS 표준코드 체계 -->
              <div>
                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:6px">🏷 HATS 표준코드 10개 항목</div>
                <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:3px;font-size:7px;font-family:var(--font-korean);text-align:center">
                  <div style="padding:5px 2px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--color-tertiary);font-weight:600">1.오염원</div>
                  <div style="padding:5px 2px;background:rgba(6,182,212,.06);border-radius:3px;color:var(--color-accent);font-weight:600">2.위치·일시</div>
                  <div style="padding:5px 2px;background:rgba(249,115,22,.06);border-radius:3px;color:var(--color-warning);font-weight:600">3.기상환경</div>
                  <div style="padding:5px 2px;background:rgba(239,68,68,.06);border-radius:3px;color:var(--color-danger);font-weight:600">4.사고유형</div>
                  <div style="padding:5px 2px;background:rgba(34,197,94,.06);border-radius:3px;color:var(--color-success);font-weight:600">5.유출물질</div>
                  <div style="padding:5px 2px;background:rgba(59,130,246,.06);border-radius:3px;color:var(--color-info);font-weight:600">6.대응</div>
                  <div style="padding:5px 2px;background:rgba(234,179,8,.06);border-radius:3px;color:var(--color-caution);font-weight:600">7.피해복구</div>
                  <div style="padding:5px 2px;background:rgba(239,68,68,.06);border-radius:3px;color:var(--color-danger);font-weight:600">8.사고원인</div>
                  <div style="padding:5px 2px;background:rgba(168,85,247,.06);border-radius:3px;color:var(--color-tertiary);font-weight:600">9.피해상황</div>
                  <div style="padding:5px 2px;background:rgba(6,182,212,.06);border-radius:3px;color:var(--color-accent);font-weight:600">10.영향</div>
                </div>
                <div style="margin-top:6px;font-size:8px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">해상 특수성 반영(GPS 좌표, 선박종류, 해상기상, 파고, 유출물질 CAS번호·SEBC 거동분류). <b style="color:var(--color-tertiary)">WING 사고이력 모듈</b>과 표준코드 연동 설계.</div>
              </div>
            </div>
          </div>

          <!-- 국내외 사고관리시스템 비교 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:10px">🌐 국내외 HNS/화학 사고관리시스템 비교</div>
            <div style="overflow-x:auto">
              <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
                <thead><tr style="background:rgba(168,85,247,.06)">
                  <th style="padding:6px 8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-tertiary)">항목</th>
                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-info)">eMARS (EU)</th>
                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-danger)">PSID (미국)</th>
                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">RISCAD (일본)</th>
                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">CSC (한국)</th>
                  <th style="padding:6px 8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent);font-weight:800">WING (개발중)</th>
                </tr></thead>
                <tbody>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">운영기관</td><td style="text-align:center;color:var(--fg-sub)">EC</td><td style="text-align:center;color:var(--fg-sub)">CCPS</td><td style="text-align:center;color:var(--fg-sub)">JST·AIST</td><td style="text-align:center;color:var(--fg-sub)">화학물질안전원</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해양경찰청</td></tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">대상</td><td style="text-align:center;color:var(--fg-sub)">중대화학사고</td><td style="text-align:center;color:var(--fg-sub)">공정사고</td><td style="text-align:center;color:var(--fg-sub)">화학사고</td><td style="text-align:center;color:var(--fg-sub)">화학사고</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해상 HNS</td></tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">초점</td><td style="text-align:center;color:var(--fg-sub)">산업시설</td><td style="text-align:center;color:var(--fg-sub)">산업시설</td><td style="text-align:center;color:var(--fg-sub)">사고원인·산업</td><td style="text-align:center;color:var(--fg-sub)">사고물질</td><td style="text-align:center;color:var(--color-accent);font-weight:600">해역·선박·확산</td></tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:5px 8px;color:var(--fg-disabled)">형태</td><td style="text-align:center;color:var(--fg-sub)">웹DB</td><td style="text-align:center;color:var(--fg-sub)">앱CD</td><td style="text-align:center;color:var(--fg-sub)">웹</td><td style="text-align:center;color:var(--fg-sub)">앱</td><td style="text-align:center;color:var(--color-accent);font-weight:600">웹+GIS 통합</td></tr>
                  <tr><td style="padding:5px 8px;color:var(--fg-disabled)">해상 특화</td><td style="text-align:center;color:var(--color-warning)">△</td><td style="text-align:center;color:var(--color-danger)">✕</td><td style="text-align:center;color:var(--color-danger)">✕</td><td style="text-align:center;color:var(--color-warning)">△</td><td style="text-align:center;color:var(--color-success);font-weight:700">◎</td></tr>
                </tbody>
              </table>
            </div>
            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ WING은 HATS 표준코드 + CAMEO/ALOHA + WRF-Chem + ROMS를 통합한 해상 특화 위기대응 시스템</div>
          </div>

          <!-- WING 적용 시사점 -->
          <div style="background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.15);border-radius:10px;padding:14px">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
              <span style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">💡 논문 시사점 → WING 시스템 반영</span>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;font-size:9px;font-family:var(--font-korean)">
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:16px;margin-bottom:4px">🔗</div>
                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">통합정보시스템</div>
                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">CARIS·CAMEO·기상·GIS 통합 → 사고 대응 의사결정 지원</div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:16px;margin-bottom:4px">🏭</div>
                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">항만별 특화 대응</div>
                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">울산·여수·대산 등 고위험 항만 맞춤 시나리오 사전 구축</div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:16px;margin-bottom:4px">📡</div>
                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">실시간 모니터링</div>
                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">HNS 블랙박스 + 대기확산 예측 + 위험구역 자동 설정</div>
              </div>
              <div style="padding:10px;background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:6px;text-align:center">
                <div style="font-size:16px;margin-bottom:4px">🤝</div>
                <div style="font-weight:700;color:var(--fg-default);margin-bottom:3px">통합지휘 지원</div>
                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">미국 ICS 모델 참조 — 다기관 협업 정보공유 플랫폼</div>
              </div>
              <div style="padding:10px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.15);border-radius:6px;text-align:center">
                <div style="font-size:16px;margin-bottom:4px">📊</div>
                <div style="font-weight:700;color:var(--color-tertiary);margin-bottom:3px">HATS 사고이력</div>
                <div style="font-size:8px;color:var(--fg-disabled);line-height:1.5">표준코드 DB 연동 → 동일해역·물질 과거사고 즉시 조회</div>
              </div>
            </div>
          </div>`,
  // Panel 1
  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">

            <!-- 가우시안 플룸 모델 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-tertiary)">
              <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
                <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🌀</div>
                <div>
                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">Gaussian Plume Model</div>
                  <div style="font-size:9px;color:var(--color-tertiary);font-family:var(--font-mono)">연속 방출 (Continuous Release)</div>
                </div>
              </div>
              <div style="background:var(--bg-base);border:1px solid rgba(168,85,247,.2);border-radius:8px;padding:14px;margin-bottom:12px;font-family:var(--font-mono)">
                <div style="font-size:9px;color:var(--fg-disabled);margin-bottom:6px;font-family:var(--font-korean);font-weight:600">📌 농도 산출식 (Concentration Equation)</div>
                <div style="font-size:11px;color:var(--color-accent);line-height:2;letter-spacing:.3px">
                  C(x,y,z) = <span style="color:var(--color-warning)">Q</span> / (2π · <span style="color:var(--color-success)">σ<sub>y</sub></span> · <span style="color:var(--color-success)">σ<sub>z</sub></span> · <span style="color:var(--color-info)">u</span>)<br>
                  × exp(-y² / 2<span style="color:var(--color-success)">σ<sub>y</sub></span>²)<br>
                  × [exp(-(z-H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²) + exp(-(z+H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²)]
                </div>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:10px;font-family:var(--font-korean)">
                <div style="padding:6px 8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px"><span style="color:var(--color-warning);font-weight:700;font-family:var(--font-mono)">Q</span> <span style="color:var(--fg-disabled)">= 배출률 (g/s)</span></div>
                <div style="padding:6px 8px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:4px"><span style="color:var(--color-info);font-weight:700;font-family:var(--font-mono)">u</span> <span style="color:var(--fg-disabled)">= 풍속 (m/s)</span></div>
                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>y</sub></span> <span style="color:var(--fg-disabled)">= 수평 확산계수</span></div>
                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>z</sub></span> <span style="color:var(--fg-disabled)">= 연직 확산계수</span></div>
                <div style="padding:6px 8px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.12);border-radius:4px;grid-column:span 2"><span style="color:var(--color-tertiary);font-weight:700;font-family:var(--font-mono)">H</span> <span style="color:var(--fg-disabled)">= 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정</span></div>
              </div>
              <div style="margin-top:10px;padding:8px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                💡 <b style="color:var(--color-accent)">적용 조건:</b> 정상 상태 연속 배출, 균일 풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
              </div>
            </div>

            <!-- 가우시안 퍼프 모델 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning)">
              <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
                <div style="width:28px;height:28px;border-radius:6px;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:14px">💨</div>
                <div>
                  <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">Gaussian Puff Model</div>
                  <div style="font-size:9px;color:var(--color-warning);font-family:var(--font-mono)">순간 방출 (Instantaneous Release)</div>
                </div>
              </div>
              <div style="background:var(--bg-base);border:1px solid rgba(249,115,22,.2);border-radius:8px;padding:14px;margin-bottom:12px;font-family:var(--font-mono)">
                <div style="font-size:9px;color:var(--fg-disabled);margin-bottom:6px;font-family:var(--font-korean);font-weight:600">📌 농도 산출식 (Puff Concentration)</div>
                <div style="font-size:11px;color:var(--color-accent);line-height:2;letter-spacing:.3px">
                  C(x,y,z,t) = <span style="color:var(--color-warning)">M</span> / [(2π)<sup>3/2</sup> · <span style="color:var(--color-success)">σ<sub>x</sub></span> · <span style="color:var(--color-success)">σ<sub>y</sub></span> · <span style="color:var(--color-success)">σ<sub>z</sub></span>]<br>
                  × exp(-(x-<span style="color:var(--color-info)">u</span>t)² / 2<span style="color:var(--color-success)">σ<sub>x</sub></span>²)<br>
                  × exp(-y² / 2<span style="color:var(--color-success)">σ<sub>y</sub></span>²)<br>
                  × [exp(-(z-H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²) + exp(-(z+H)² / 2<span style="color:var(--color-success)">σ<sub>z</sub></span>²)]
                </div>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:10px;font-family:var(--font-korean)">
                <div style="padding:6px 8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:4px"><span style="color:var(--color-warning);font-weight:700;font-family:var(--font-mono)">M</span> <span style="color:var(--fg-disabled)">= 총 배출량 (g)</span></div>
                <div style="padding:6px 8px;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.12);border-radius:4px"><span style="color:var(--color-info);font-weight:700;font-family:var(--font-mono)">t</span> <span style="color:var(--fg-disabled)">= 경과시간 (s)</span></div>
                <div style="padding:6px 8px;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.12);border-radius:4px;grid-column:span 2"><span style="color:var(--color-success);font-weight:700;font-family:var(--font-mono)">σ<sub>x</sub></span> <span style="color:var(--fg-disabled)">= 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영</span></div>
              </div>
              <div style="margin-top:10px;padding:8px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                💡 <b style="color:var(--color-warning)">적용 조건:</b> 순간적 대량 방출, 폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
              </div>
            </div>
          </div>

          <!-- Pasquill-Gifford 확산 계수 테이블 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
              <div style="display:flex;align-items:center;gap:8px">
                <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">📊 Pasquill-Gifford 대기안정도 분류 및 확산계수</div>
              </div>
              <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-mono)">σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f</div>
            </div>
            <div style="overflow-x:auto">
              <table style="width:100%;border-collapse:collapse;font-size:10px;font-family:var(--font-korean)">
                <thead>
                  <tr style="background:rgba(168,85,247,.08)">
                    <th style="padding:8px 10px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-tertiary);font-weight:700">안정도</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">분류</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">기상 조건</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success);font-family:var(--font-mono)">σ<sub>y</sub> 계수 (a, b)</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success);font-family:var(--font-mono)">σ<sub>z</sub> 계수 (c, d, f)</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">풍속 범위</th>
                    <th style="padding:8px 10px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">해양 적용성</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-danger)">A</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">매우 불안정</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">맑은 날 강한 일사</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.3658, 0.9024</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.192, 0.936, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">< 2 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(234,179,8,.12);color:var(--color-caution);font-size:9px;font-weight:600">드물게</span></td>
                  </tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-warning)">B</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">불안정</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">맑은 날 약한 일사</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.2751, 0.9031</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.156, 0.922, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">2–3 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(234,179,8,.12);color:var(--color-caution);font-size:9px;font-weight:600">드물게</span></td>
                  </tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-caution)">C</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">약간 불안정</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">흐린 날 주간</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.2090, 0.9031</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.116, 0.905, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3–5 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">적합</span></td>
                  </tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(168,85,247,.03)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-accent)">D ★</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">중립</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">흐린 날 / 해상풍</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.1471, 0.9031</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.079, 0.881, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">5–6 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(6,182,212,.15);color:var(--color-accent);font-size:9px;font-weight:700">★ 해양 대표</span></td>
                  </tr>
                  <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-info)">E</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">약간 안정</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">야간 약한 바람</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.1046, 0.9031</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.064, 0.871, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3–5 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.12);color:var(--color-success);font-size:9px;font-weight:600">적합</span></td>
                  </tr>
                  <tr>
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-tertiary)">F</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-default)">안정</td>
                    <td style="padding:7px 10px;text-align:center;color:var(--fg-sub)">야간 맑은 하늘</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.0722, 0.9031</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-success)">0.051, 0.814, 0</td>
                    <td style="padding:7px 10px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">< 3 m/s</td>
                    <td style="padding:7px 10px;text-align:center"><span style="padding:2px 6px;border-radius:4px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:600">위험↑</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div style="margin-top:10px;padding:8px 10px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.1);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
              ★ 해양 환경에서는 <b style="color:var(--color-accent)">D 등급(중립)</b>이 가장 빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가 국지적으로 높게 유지되어 <b style="color:var(--color-danger)">위험도 상승</b>.
            </div>
          </div>

          <!-- 플룸 vs 퍼프 비교 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">⚖ Plume vs Puff — 모델 선택 기준</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
              <div style="padding:12px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.15);border-radius:8px">
                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);margin-bottom:8px;font-family:var(--font-korean)">🌀 Plume (연속 배출) 선택 기준</div>
                <div style="display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--fg-sub);font-family:var(--font-korean)">
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 유출 지속시간 > 10분</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 탱크 균열/배관 파손 — 지속적 누출</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 풍속 > 1.5 m/s (정상류 가정 가능)</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 톨루엔, 벤젠, 자일렌 등 증발성 액체</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-tertiary)">✓</span> 암모니아 냉동 저장탱크 누출</div>
                </div>
              </div>
              <div style="padding:12px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.15);border-radius:8px">
                <div style="font-size:11px;font-weight:700;color:var(--color-warning);margin-bottom:8px;font-family:var(--font-korean)">💨 Puff (순간 배출) 선택 기준</div>
                <div style="display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--fg-sub);font-family:var(--font-korean)">
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 유출 지속시간 < 10분</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 탱크 폭발/BLEVE — 순간 방출</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 풍향 변동이 큰 경우 (여러 퍼프 중첩)</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> LPG, 수소, LNG 탱크 파열</div>
                  <div style="display:flex;align-items:center;gap:5px"><span style="color:var(--color-warning)">✓</span> 컨테이너 화학물질 돌발 유출</div>
                </div>
              </div>
            </div>
          </div>`,
  // Panel 2
  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">

            <!-- 물질 카드 1: 암모니아 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-warning)">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🧪</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">암모니아 (NH₃)</span></div>
                <span style="padding:3px 8px;border-radius:6px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:700">독성 ★★★</span>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-33°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.682</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">300 ppm</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH</div></div>
              </div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                <div>• 해수면 유출 시 <b style="color:var(--color-warning)">급속 기화</b> → Flash Evaporation</div>
                <div>• 2D 기화율: <span style="font-family:var(--font-mono);color:var(--color-accent)">ṁ = 0.0168t − 0.01</span></div>
                <div>• 3D 기화율: <span style="font-family:var(--font-mono);color:var(--color-accent)">ṁ = 0.0182t − 0.0112</span></div>
                <div>• 독성 구름 풍하측 <b style="color:var(--color-danger)">최대 10km</b>까지 영향</div>
              </div>
            </div>

            <!-- 물질 카드 2: 메탄올 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-tertiary)">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🧫</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">메탄올 (CH₃OH)</span></div>
                <span style="padding:3px 8px;border-radius:6px;background:rgba(249,115,22,.12);color:var(--color-warning);font-size:9px;font-weight:700">인화성+독성</span>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">64.7°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.791</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">6,000 ppm</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH</div></div>
              </div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                <div>• 수용성 → 해수 용해 + 증발 <b style="color:var(--color-tertiary)">복합 거동</b></div>
                <div>• 인화점 <span style="font-family:var(--font-mono);color:var(--color-danger)">11°C</span> → 상온에서 증기 인화 위험</div>
                <div>• 무색·무취 → <b style="color:var(--color-danger)">감지 어려움</b>, 계측기 필수</div>
                <div>• LFL~UFL: <span style="font-family:var(--font-mono);color:var(--color-warning)">6.0% ~ 36.5%</span></div>
              </div>
            </div>

            <!-- 물질 카드 3: 수소 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-danger)">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">⚡</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">수소 (H₂)</span></div>
                <span style="padding:3px 8px;border-radius:6px;background:rgba(239,68,68,.12);color:var(--color-danger);font-size:9px;font-weight:700">폭발성 ★★★</span>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-253°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.071</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">N/A</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH(질식)</div></div>
              </div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                <div>• 공기보다 <b style="color:var(--color-accent)">14배 가벼움</b> → 급속 상승 확산</div>
                <div>• LFL~UFL: <span style="font-family:var(--font-mono);color:var(--color-danger)">4.0% ~ 75.0%</span> (극넓은 가연범위)</div>
                <div>• 점화에너지 <span style="font-family:var(--font-mono);color:var(--color-danger)">0.017 mJ</span> (정전기로도 폭발)</div>
                <div>• Puff 모델 필수 → <b style="color:var(--color-danger)">BLEVE/VCE</b> 시나리오</div>
              </div>
            </div>

            <!-- 물질 카드 4: LNG -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-left:4px solid var(--color-info)">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
                <div style="display:flex;align-items:center;gap:8px"><span style="font-size:18px">🔵</span><span style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">LNG (CH₄)</span></div>
                <span style="padding:3px 8px;border-radius:6px;background:rgba(59,130,246,.12);color:var(--color-info);font-size:9px;font-weight:700">인화성 ★★</span>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px">
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">-162°C</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비등점</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.450</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">비중</div></div>
                <div style="padding:6px;background:var(--bg-base);border-radius:4px;text-align:center"><div style="font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">N/A</div><div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">IDLH(질식)</div></div>
              </div>
              <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                <div>• 극저온 유출 시 <b style="color:var(--color-accent)">RPT</b>(Rapid Phase Transition) 발생</div>
                <div>• 해수면 Pool 형성 → 기화율 <span style="font-family:var(--font-mono);color:var(--color-accent)">0.025t</span></div>
                <div>• 가연범위: <span style="font-family:var(--font-mono);color:var(--color-warning)">5.0% ~ 15.0%</span></div>
                <div>• 초기 냉각 증기 → <b style="color:var(--color-info)">지표면 체류</b> 후 상승</div>
              </div>
            </div>
          </div>

          <!-- 물질별 AEGL 비교표 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:12px">📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)</div>
            <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:8px;font-size:10px;font-family:var(--font-korean)">
              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--fg-disabled)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">기준</div><div style="font-weight:700;color:var(--fg-default)">등급</div></div>
              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-warning)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🧪</div><div style="font-weight:700;color:var(--color-warning)">NH₃</div></div>
              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-tertiary)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🧫</div><div style="font-weight:700;color:var(--color-tertiary)">MeOH</div></div>
              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-danger)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">⚡</div><div style="font-weight:700;color:var(--color-danger)">H₂</div></div>
              <div style="padding:8px;background:var(--bg-base);border-radius:6px;text-align:center;border-top:3px solid var(--color-info)"><div style="font-size:9px;color:var(--fg-disabled);margin-bottom:4px">🔵</div><div style="font-weight:700;color:var(--color-info)">LNG</div></div>
              <!-- AEGL-1 -->
              <div style="padding:6px;background:rgba(234,179,8,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-caution)">AEGL-1</div>
              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">30</div>
              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">670</div>
              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <div style="padding:6px;background:rgba(234,179,8,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <!-- AEGL-2 -->
              <div style="padding:6px;background:rgba(249,115,22,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-warning)">AEGL-2</div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">160</div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">2,100</div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <!-- AEGL-3 -->
              <div style="padding:6px;background:rgba(239,68,68,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-danger)">AEGL-3</div>
              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">1,100</div>
              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">14,000</div>
              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <div style="padding:6px;background:rgba(239,68,68,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-disabled)">N/A</div>
              <!-- LFL -->
              <div style="padding:6px;background:rgba(59,130,246,.06);border-radius:4px;text-align:center;font-weight:600;color:var(--color-info)">LFL (%)</div>
              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">15.0</div>
              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">6.0</div>
              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--color-danger);font-weight:600">4.0</div>
              <div style="padding:6px;background:rgba(59,130,246,.04);border-radius:4px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">5.0</div>
            </div>
            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용</div>
          </div>`,
  // Panel 3
  `<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <!-- 해양 보정 인자 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-accent)">
              <div style="font-size:13px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:14px">🌊 해양환경 특수 보정 인자</div>
              <div style="display:flex;flex-direction:column;gap:10px">
                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해풍·육풍 순환 보정</span>
                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(239,68,68,.1);color:var(--color-danger);font-weight:600">핵심 인자</span>
                  </div>
                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                    해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을 가정하므로, <b style="color:var(--color-accent)">풍향 전환 시점</b>에서 플룸 방향 급변을 반영해야 함.<br>
                    <span style="font-family:var(--font-mono);font-size:9px;color:var(--color-tertiary)">θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)</span>
                  </div>
                </div>
                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해수면 거칠기 (z₀) 보정</span>
                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">중요</span>
                  </div>
                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                    해수면은 육상 대비 표면 거칠기가 매우 낮음 (<span style="font-family:var(--font-mono);color:var(--color-accent)">z₀ ≈ 0.0002 m</span> vs 도시 0.5~2.0 m). Charnock 관계식 적용:<br>
                    <span style="font-family:var(--font-mono);font-size:9px;color:var(--color-tertiary)">z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)</span>
                  </div>
                </div>
                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해수면 온도(SST) 영향</span>
                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(34,197,94,.1);color:var(--color-success);font-weight:600">보조</span>
                  </div>
                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                    해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소. 반대로 SST < T<sub>air</sub>이면 안정층 형성으로 <b style="color:var(--color-danger)">농도 체류↑</b>.
                  </div>
                </div>
                <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해상 대기경계층(MABL) 구조</span>
                    <span style="font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">중요</span>
                  </div>
                  <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                    해양 대기경계층은 육상과 구조가 상이. 혼합고 <span style="font-family:var(--font-mono);color:var(--color-accent)">300~800 m</span>(육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시 <b style="color:var(--color-danger)">지표 농도 급상승</b>.
                  </div>
                </div>
              </div>
            </div>

            <!-- 보정 계수 시각화 -->
            <div style="display:flex;flex-direction:column;gap:16px">
              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
                <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:12px">📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)</div>
                <div style="display:flex;flex-direction:column;gap:8px">
                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">P-G 원본</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:60%;height:100%;background:linear-gradient(90deg,rgba(168,85,247,.4),rgba(168,85,247,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-tertiary);min-width:50px;text-align:right">68 m</span></div>
                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">해양 보정</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:82%;height:100%;background:linear-gradient(90deg,rgba(6,182,212,.4),rgba(6,182,212,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-accent);min-width:50px;text-align:right">92 m</span></div>
                  <div style="display:flex;align-items:center;gap:8px"><span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean);min-width:70px">ALOHA</span><div style="flex:1;height:20px;background:var(--bg-base);border-radius:4px;overflow:hidden;position:relative"><div style="width:72%;height:100%;background:linear-gradient(90deg,rgba(249,115,22,.4),rgba(249,115,22,.7));border-radius:4px"></div></div><span style="font-size:10px;font-family:var(--font-mono);color:var(--color-warning);min-width:50px;text-align:right">78 m</span></div>
                </div>
                <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준</div>
              </div>

              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-warning)">
                <div style="font-size:13px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:12px">🔬 ALOHA vs 이문진박사모델 비교</div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10px;font-family:var(--font-korean)">
                  <div style="padding:8px;background:var(--bg-base);border-radius:6px">
                    <div style="font-weight:700;color:var(--color-warning);margin-bottom:4px">ALOHA (EPA)</div>
                    <div style="color:var(--fg-sub);line-height:1.6">• 가우시안 플룸 기본<br>• 평탄 지형 가정<br>• 표면 거칠기 고정값<br>• 해양 특성 미반영<br>• 1차원 풍향 고정</div>
                  </div>
                  <div style="padding:8px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.1);border-radius:6px">
                    <div style="font-weight:700;color:var(--color-accent);margin-bottom:4px">이문진박사모델 (해양 보정)</div>
                    <div style="color:var(--fg-sub);line-height:1.6">• 가우시안 + 해양 보정<br>• 해안 지형 효과 반영<br>• Charnock z₀ 동적 계산<br>• 해풍/육풍 전환 반영<br>• MABL 혼합고 가변</div>
                  </div>
                </div>
              </div>
            </div>
          </div>`,
  // Panel 4
  `<div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px">
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
              <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:14px">✅ 모델 검증 결과 — 실측 데이터 대비 정확도</div>
              <div style="overflow-x:auto">
                <table style="width:100%;border-collapse:collapse;font-size:10px;font-family:var(--font-korean)">
                  <thead>
                    <tr style="background:rgba(34,197,94,.06)">
                      <th style="padding:8px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">검증 항목</th>
                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-warning)">ALOHA</th>
                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">이문진박사모델</th>
                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">실측값</th>
                      <th style="padding:8px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">오차율</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                      <td style="padding:7px 8px;color:var(--fg-default)">NH₃ 최대 도달거리 (AEGL-2)</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">8.2 km</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">7.1 km</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">6.8 km</td>
                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+20.6%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+4.4%</span></td>
                    </tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                      <td style="padding:7px 8px;color:var(--fg-default)">풍하 1km 지점 농도 (ppm)</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">245</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">198</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">187</td>
                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+31.0%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+5.9%</span></td>
                    </tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                      <td style="padding:7px 8px;color:var(--fg-default)">MeOH 증기 확산 면적 (km²)</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">4.8</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">3.6</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">3.4</td>
                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+41.2%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+5.9%</span></td>
                    </tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)">
                      <td style="padding:7px 8px;color:var(--fg-default)">H₂ 가연성 구름 반경 (m)</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">280</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">235</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">220</td>
                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+27.3%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+6.8%</span></td>
                    </tr>
                    <tr>
                      <td style="padding:7px 8px;color:var(--fg-default)">LNG Pool 확산 직경 (m)</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-warning)">165</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--color-accent)">142</td>
                      <td style="padding:7px 8px;text-align:center;font-family:var(--font-mono);color:var(--fg-default)">138</td>
                      <td style="padding:7px 8px;text-align:center"><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">+19.6%</span> / <span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">+2.9%</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div style="margin-top:12px;padding:10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                <b style="color:var(--color-success)">결론:</b> ALOHA는 해양 환경에서 <b style="color:var(--color-warning)">평균 20~40% 과대 예측</b> 경향. 이문진박사모델은 해양 보정 인자 적용으로 <b style="color:var(--color-success)">평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km 이내 근거리 농도 예측 정확도가 현저히 향상됨.
              </div>
            </div>

            <!-- 검증 인용 / 참고문헌 -->
            <div style="display:flex;flex-direction:column;gap:12px">
              <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px">
                <div style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:10px">📚 참고 문헌</div>
                <div style="display:flex;flex-direction:column;gap:8px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-tertiary)">이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한 연구", 한국해양환경·에너지학회지, 2014</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-accent)">이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링", KIOST, 2023</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-warning)">EPA, "ALOHA User's Manual", 2024</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-success)">Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological Magazine, 1961</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-caution)">Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-danger)">유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92, 2013</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-info)">해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-success)">김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의", 한국해양환경·안전학회지, 30(s4), pp.42-51, 2024</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-tertiary)">장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현", 한국해양환경·안전학회지, 23(2), pp.168-176, 2017</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-accent)">박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS) 탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의 열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS 탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)</div>
                  <div style="padding:8px;background:var(--bg-base);border-radius:4px;border-left:3px solid var(--color-warning)">오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를 활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86, 2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을 예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부 지원(RS-2021-KS211535)</div>
                </div>
              </div>
              <div style="background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(6,182,212,.04));border:1px solid rgba(168,85,247,.2);border-radius:10px;padding:14px">
                <div style="font-size:11px;font-weight:700;color:var(--color-tertiary);margin-bottom:8px;font-family:var(--font-korean)">💡 시스템 적용 방안</div>
                <div style="font-size:10px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
                  WING 시스템은 기본 ALOHA 엔진 위에 <b style="color:var(--color-accent)">이문진박사모델 해양 보정 모듈</b>을 레이어로 적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀 예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
                </div>
              </div>
            </div>
          </div>`,
  // Panel 5
  `<div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
              <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">⚡ 실시간 모델 비교 시뮬레이션</div>
              <div style="display:flex;gap:6px">
                <button onclick="runModelCompare()" id="mcRunBtn" style="padding:6px 16px;border-radius:6px;border:none;background:linear-gradient(135deg,var(--color-tertiary),var(--color-info));color:#fff;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-korean)">▶ 비교 실행</button>
                <button style="padding:6px 12px;border-radius:6px;border:1px solid var(--stroke-default);background:var(--bg-card);color:var(--fg-sub);font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font-korean)">⚙ 파라미터</button>
              </div>
            </div>
            <!-- 시뮬레이션 입력 -->
            <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px">
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">물질</label><select style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-korean)"><option>암모니아</option><option>메탄올</option><option>수소</option><option>LNG</option><option selected>톨루엔</option></select></div>
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">유출량 (kL)</label><input type="number" value="12.0" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">풍속 (m/s)</label><input type="number" value="5.2" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">안정도</label><select style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-korean)"><option>A</option><option>B</option><option>C</option><option selected>D</option><option>E</option><option>F</option></select></div>
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">기온 (°C)</label><input type="number" value="8.5" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
              <div><label style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);display:block;margin-bottom:3px">SST (°C)</label><input type="number" value="12.3" style="padding:6px 8px;font-size:10px;width:100%;background:var(--bg-base);color:var(--fg-default);border:1px solid var(--stroke-default);border-radius:6px;outline:none;font-family:var(--font-mono);box-sizing:border-box"></div>
            </div>
            <!-- 결과 비교 카드 -->
            <div id="mcResult" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
              <div style="padding:14px;background:rgba(249,115,22,.04);border:1px solid rgba(249,115,22,.2);border-radius:8px;text-align:center">
                <div style="font-size:10px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:8px">ALOHA (EPA)</div>
                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">3.8 <span style="font-size:12px">km</span></div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">AEGL-2 도달거리</div>
                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적</span><br><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">12.3 km²</span></div>
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">최대농도</span><br><span style="color:var(--color-danger);font-weight:600;font-family:var(--font-mono)">520 ppm</span></div>
                </div>
              </div>
              <div style="padding:14px;background:rgba(6,182,212,.04);border:1px solid rgba(6,182,212,.2);border-radius:8px;text-align:center">
                <div style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">이문진박사모델 (해양보정)</div>
                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">2.9 <span style="font-size:12px">km</span></div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">AEGL-2 도달거리</div>
                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적</span><br><span style="color:var(--color-accent);font-weight:600;font-family:var(--font-mono)">8.4 km²</span></div>
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">최대농도</span><br><span style="color:var(--color-warning);font-weight:600;font-family:var(--font-mono)">410 ppm</span></div>
                </div>
              </div>
              <div style="padding:14px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.2);border-radius:8px;text-align:center">
                <div style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:8px">차이 분석</div>
                <div style="font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--color-success)">-23.7<span style="font-size:12px">%</span></div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-top:2px">도달거리 감소율</div>
                <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:9px">
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">면적차</span><br><span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">-31.7%</span></div>
                  <div style="padding:4px;background:var(--bg-base);border-radius:3px"><span style="color:var(--fg-disabled)">농도차</span><br><span style="color:var(--color-success);font-weight:600;font-family:var(--font-mono)">-21.2%</span></div>
                </div>
              </div>
            </div>
            <div style="margin-top:12px;padding:10px;background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">
              ⚡ <b style="color:var(--color-tertiary)">실시간 비교 결과:</b> 해양 환경에서 ALOHA의 과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를 반영하여 보다 현실적인 확산 범위를 산출합니다. <b>대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용</b>을 권장합니다.
            </div>
          </div>`,
  // Panel 6
  `<!-- WRF-Chem 상세 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-accent)">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
              <div style="width:32px;height:32px;border-radius:8px;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:16px">🌐</div>
              <div>
                <div style="font-size:14px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">WRF-Chem 모델 상세</div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean)">Weather Research and Forecasting model coupled with Chemistry</div>
              </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">구성 요소</div>
                <div style="display:flex;flex-direction:column;gap:6px">
                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.15);border-radius:6px">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                      <span style="font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">WRF (기상)</span>
                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(6,182,212,.1);color:var(--color-accent);font-family:var(--font-mono)">v4.x</span>
                    </div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">비정수압(non-hydrostatic) 중규모 기상 모델. 3차원 바람장, 기온, 습도, 대기경계층 구조를 역학적으로 계산. 중첩 도메인(nesting)으로 해상도 1km까지 구현 가능.</div>
                  </div>
                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.15);border-radius:6px">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                      <span style="font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">Chem (화학)</span>
                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(168,85,247,.1);color:var(--color-tertiary);font-family:var(--font-mono)">Online</span>
                    </div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">기상 모델과 동일한 시간 스텝에서 화학종의 이류(advection), 난류확산(diffusion), 건·습침적(deposition), 화학반응을 동시에 계산. Offline 방식 대비 정확도 향상.</div>
                  </div>
                  <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(34,197,94,.15);border-radius:6px">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                      <span style="font-size:10px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">결합 효과</span>
                      <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.1);color:var(--color-success);font-family:var(--font-mono)">Feedback</span>
                    </div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">화학물질의 복사 효과가 기상장에 되먹임(feedback). 예: 대량의 에어로졸 방출 시 일사량 변화 → 대기안정도 변화 → 확산 패턴 변화.</div>
                  </div>
                </div>
              </div>
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">HNS 사고 적용 시 장점</div>
                <div style="display:flex;flex-direction:column;gap:6px">
                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">1</div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">3D 확산 모의:</b> 연직 방향 확산까지 포함한 정밀 농도장 계산. 고층 대기로의 확산과 fumigation 효과 반영</div>
                  </div>
                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">2</div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">비정상류 대응:</b> 풍향 전환(해풍↔육풍), 돌풍, 전선 통과 등 시변 기상 조건을 실시간 반영</div>
                  </div>
                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">3</div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">복잡 지형 반영:</b> 해안 절벽, 항만 구조물, 인접 도시의 건물 효과를 지형 데이터로 반영</div>
                  </div>
                  <div style="display:flex;gap:8px;padding:8px;background:var(--bg-base);border-radius:6px">
                    <div style="width:24px;height:24px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-accent);flex-shrink:0;font-family:var(--font-mono)">4</div>
                    <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5"><b style="color:var(--fg-default)">장기 모의:</b> 24~72시간 예측으로 사고 수습 계획 및 장기 피해 평가 지원</div>
                  </div>
                </div>
                <div style="margin-top:10px;padding:8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.12);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.5">
                  ⚠ <b style="color:var(--color-warning)">계산 비용:</b> WRF-Chem은 가우시안 모델 대비 계산 시간이 <b>100~1,000배</b> 소요. 초기 대응에는 가우시안 모델, 정밀 분석에는 WRF-Chem으로 <b style="color:var(--color-accent)">이중 운용</b> 전략 적용.
                </div>
              </div>
            </div>
          </div>

          <!-- ═══ ROMS 해양확산 수치모의 검증 결과 (김창겸 외, 2024) ═══ -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-success)">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
              <div style="display:flex;align-items:center;gap:8px">
                <div style="width:28px;height:28px;border-radius:6px;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;font-size:14px">🌊</div>
                <div>
                  <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">ROMS 해양확산 수치모의 검증 결과</div>
                  <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">김창겸·이문진 외 (2024), 한국해양환경·안전학회지 Vol.30</div>
                </div>
              </div>
              <span style="padding:3px 10px;border-radius:6px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);font-size:9px;color:var(--color-success);font-weight:700">정확도 75~96%</span>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
              <!-- ROMS 격자 구성 -->
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:8px">📐 Nesting 격자 구성</div>
                <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
                  <thead><tr style="background:rgba(6,182,212,.06)">
                    <th style="padding:5px 6px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-accent)">영역</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">격자크기</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">시간간격</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">수직층</th>
                  </tr></thead>
                  <tbody>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:4px 6px;color:var(--fg-default)">광역 (일본·대만 포함)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-accent)">0.05°</td><td style="text-align:center;font-family:var(--font-mono)">5분</td><td style="text-align:center;font-family:var(--font-mono)" rowspan="3">20층</td></tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:4px 6px;color:var(--fg-default)">중간역 (한반도 해역)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-accent)">0.01°</td><td style="text-align:center;font-family:var(--font-mono)">1분</td></tr>
                    <tr style="background:rgba(34,197,94,.03)"><td style="padding:4px 6px;color:var(--color-success);font-weight:600">상세역 (5개 우심지역)</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">0.002°(≈200m)</td><td style="text-align:center;font-family:var(--font-mono)">12초</td></tr>
                  </tbody>
                </table>
                <div style="margin-top:8px;font-size:9px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:6px">🔗 입력 데이터</div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:8px;font-family:var(--font-korean)">
                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">ERA5</span> <span style="color:var(--fg-disabled)">기상(기압·풍속·기온)</span></div>
                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">HYCOM</span> <span style="color:var(--fg-disabled)">수온·염분·유속</span></div>
                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">TPXO9</span> <span style="color:var(--fg-disabled)">조위 15개 분조</span></div>
                  <div style="padding:4px 6px;background:var(--bg-base);border-radius:3px"><span style="color:var(--color-accent);font-weight:600">WAMIS</span> <span style="color:var(--fg-disabled)">5대강 일별유량</span></div>
                </div>
              </div>

              <!-- 관측-모델 비교 -->
              <div>
                <div style="font-size:11px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:8px">✅ 페놀 관측-모델 비교 (인천·평택·대산)</div>
                <table style="width:100%;border-collapse:collapse;font-size:8px;font-family:var(--font-korean)">
                  <thead><tr style="background:rgba(34,197,94,.06)">
                    <th style="padding:5px 6px;text-align:left;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">관측점</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">관측(mg/L)</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--fg-sub)">모델(mg/L)</th>
                    <th style="padding:5px 6px;text-align:center;border-bottom:2px solid var(--stroke-light);color:var(--color-success)">정확도</th>
                  </tr></thead>
                  <tbody>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">IC01(인천)</td><td style="text-align:center;font-family:var(--font-mono)">0.0160</td><td style="text-align:center;font-family:var(--font-mono)">0.0167</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">95.32%</td></tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">IC03(인천)</td><td style="text-align:center;font-family:var(--font-mono)">0.0240</td><td style="text-align:center;font-family:var(--font-mono)">0.0256</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:600">93.45%</td></tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04)"><td style="padding:3px 6px;color:var(--fg-default)">PT01(평택)</td><td style="text-align:center;font-family:var(--font-mono)">0.0215</td><td style="text-align:center;font-family:var(--font-mono)">0.0235</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success)">90.55%</td></tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(239,68,68,.02)"><td style="padding:3px 6px;color:var(--color-warning)">PT02(평택)</td><td style="text-align:center;font-family:var(--font-mono)">0.0200</td><td style="text-align:center;font-family:var(--font-mono)">0.0249</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-warning)">75.57%</td></tr>
                    <tr style="border-bottom:1px solid rgba(255,255,255,.04);background:rgba(34,197,94,.03)"><td style="padding:3px 6px;color:var(--color-success);font-weight:600">DS01(대산)</td><td style="text-align:center;font-family:var(--font-mono)">0.0040</td><td style="text-align:center;font-family:var(--font-mono)">0.0042</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success);font-weight:700">95.88%</td></tr>
                    <tr><td style="padding:3px 6px;color:var(--fg-default)">DS03(대산)</td><td style="text-align:center;font-family:var(--font-mono)">0.0130</td><td style="text-align:center;font-family:var(--font-mono)">0.0145</td><td style="text-align:center;font-family:var(--font-mono);color:var(--color-success)">88.60%</td></tr>
                  </tbody>
                </table>
                <div style="margin-top:6px;font-size:7px;color:var(--fg-disabled);font-family:var(--font-korean)">※ 현장조사: 2023.06.27~28 / 전체 10개 관측점 모두 모델 범위 내 관측값 위치</div>
              </div>
            </div>

            <!-- 페놀 거동 특성 + 최대 농도 -->
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px">
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">인천 표층 최대농도</div>
                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-accent)">0.1089<span style="font-size:9px"> mg/L</span></div>
              </div>
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">인천 저층 최대농도</div>
                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-danger)">0.3822<span style="font-size:9px"> mg/L</span></div>
                <div style="font-size:7px;color:var(--color-warning);font-weight:600;margin-top:2px">표층 대비 3.5배 ↑</div>
              </div>
              <div style="padding:10px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:6px;text-align:center">
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:4px">평택·대산 저층 최대</div>
                <div style="font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--color-warning)">0.1916<span style="font-size:9px"> mg/L</span></div>
              </div>
            </div>
            <div style="margin-top:10px;padding:8px 10px;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.1);border-radius:6px;font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
              <b style="color:var(--color-success)">핵심 발견:</b> 페놀은 Sinker 특성으로 <b style="color:var(--color-danger)">저층에서 농도 축적</b>이 두드러짐 → 표층 모니터링만으로는 불충분, <b style="color:var(--color-accent)">저층까지 포함한 3D 모니터링 필수</b>. 기존 입자추적 방식의 장기 모의·농도 계산 한계를 ROMS 농도확산모델이 해결. Opendrift(노르웨이 기상청)와 Cedre(프랑스) 실험 결과로 HNS 거동특성 검증 완료.
            </div>
          </div>

          <!-- 지역별 해양산업시설 현황 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px">
            <div style="font-size:12px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:10px">🏭 지역별 해양산업시설 폐수 방류 현황 (10년 평균)</div>
            <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:8px;font-family:var(--font-korean);text-align:center">
              <div style="padding:6px;background:rgba(249,115,22,.06);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">울산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">414,620</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--color-danger);font-size:7px;margin-top:1px">1,037개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">여수</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">124,890</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">382개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.04);border-radius:4px"><div style="font-weight:700;color:var(--color-warning)">인천</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">91,658</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">3,073개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">광양</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">86,395</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">253개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">평택</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">85,475</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">781개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">대산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">65,101</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">246개소</div></div>
              <div style="padding:6px;background:rgba(249,115,22,.03);border-radius:4px"><div style="font-weight:700;color:var(--fg-sub)">부산</div><div style="font-family:var(--font-mono);color:var(--fg-default);font-size:10px;margin-top:2px">38,292</div><div style="color:var(--fg-disabled)">m³/일</div><div style="font-family:var(--font-mono);color:var(--fg-disabled);font-size:7px;margin-top:1px">469개소</div></div>
            </div>
            <div style="margin-top:8px;font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">※ 1종 사업장(2,000m³/일 이상) 하루 평균 페놀 배출량: 21.847 kg — 총 882개소 합계 31.851 kg/일 (KOSIS·NICS 2021)</div>
          </div>

          <!-- 한계 및 발전 방향 -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <!-- 현재 한계 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-danger)">
              <div style="font-size:13px;font-weight:700;color:var(--color-danger);font-family:var(--font-korean);margin-bottom:12px">⚠ 현재 한계점</div>
              <div style="display:flex;flex-direction:column;gap:8px">
                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">입자 추적 방식의 한계</div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">기존 라그랑지안 입자 추적 방식은 <b style="color:var(--color-danger)">장기간 모의가 어렵고</b> 정확한 농도 계산에 한계가 있음. 입자 수가 부족하면 통계적 노이즈 발생, 과다하면 계산량 폭증.</div>
                </div>
                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">대용량 데이터 전송</div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">외부 DB(기상청, 해양예보 등) 연동 시 <b style="color:var(--color-danger)">대용량 데이터의 실시간 전송</b>에 대한 신속성 확보 과제. 특히 WRF-Chem 입력 데이터는 수십 GB 규모.</div>
                </div>
                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">물질 다양성</div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">HNS 6,000+ 종 전체에 대한 <b style="color:var(--color-danger)">물리화학 거동 DB 부족</b>. 많은 물질이 실험 데이터가 없어 유사 물질의 추정치를 사용하고 있음.</div>
                </div>
                <div style="padding:10px;background:rgba(239,68,68,.03);border:1px solid rgba(239,68,68,.12);border-radius:6px">
                  <div style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">해양 환경 특수성</div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">해수 온도에 따른 증발률 변화, 파랑에 의한 스프레이 효과, 선박 구조물에 의한 Wake 난류 등 <b style="color:var(--color-danger)">해양 고유 현상 반영 미흡</b>.</div>
                </div>
              </div>
            </div>

            <!-- 발전 방향 -->
            <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;border-top:3px solid var(--color-success)">
              <div style="font-size:13px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:12px">🚀 발전 방향</div>
              <div style="display:flex;flex-direction:column;gap:8px">
                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">ROMS 해양 수치모델 도입</span>
                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.15);color:var(--color-success);font-weight:600">✅ 검증완료</span>
                  </div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                    김창겸·이문진 외(2024) 연구에서 <b style="color:var(--color-success)">ROMS 기반 페놀 해양확산 수치모의 검증 완료</b>. Nesting 기법(광역 0.05°→중간역 0.01°→상세역 0.002°/약200m)으로 5개 집중우심지역(인천·평택·대산·여수·울산) 고해상도 구축.<br>
                    경계조건: <span style="color:var(--color-accent)">ERA5(기상) + HYCOM(해양) + TPXO9(조위 15개분조)</span>. 한국 5대강 + 중국 황하·양쯔강 하천유입 반영.<br>
                    <b style="color:var(--color-success)">현장검증 정확도: 75.57%(PT02) ~ 95.88%(DS01)</b> — 10개 관측점 전체에서 모델 최대·최소값 범위 내 관측값 위치 확인.
                  </div>
                </div>
                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">AI/ML 기반 신속 예측</span>
                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(168,85,247,.1);color:var(--color-tertiary);font-weight:600">연구중</span>
                  </div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">WRF-Chem 시뮬레이션 결과를 학습한 <b style="color:var(--color-success)">서로게이트 모델(Surrogate Model)</b>로 수초 내 근사 예측. 초기 대응 시간 단축과 정확도를 동시 확보.</div>
                </div>
                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">실시간 데이터 파이프라인</span>
                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(249,115,22,.1);color:var(--color-warning);font-weight:600">개발중</span>
                  </div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6"><b style="color:var(--color-success)">조화상수 DB</b> 기반 빠른 예측 + 스트리밍 기상 데이터 파이프라인 구축. 외부 DB 연동 시 데이터 압축·캐싱으로 전송 병목 해소.</div>
                </div>
                <div style="padding:10px;background:rgba(34,197,94,.03);border:1px solid rgba(34,197,94,.12);border-radius:6px">
                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 블랙박스 시스템 고도화</span>
                    <span style="font-size:8px;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.1);color:var(--color-success);font-weight:600">목표</span>
                  </div>
                  <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">사고 자동 감지 → 물질 자동 식별 → 확산 예측 → 대피 명령까지 <b style="color:var(--color-success)">전 과정 자동화</b>. 센서 네트워크 + AI 물질 식별 + 가우시안/WRF-Chem 이중 엔진으로 구성.</div>
                </div>
              </div>
            </div>
          </div>

          <!-- ═══ 관련 국내 논문 ═══ -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:10px;padding:16px;margin-bottom:16px;border-top:3px solid var(--color-tertiary)">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
              <div style="width:28px;height:28px;border-radius:6px;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:14px">📚</div>
              <div>
                <div style="font-size:13px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">HNS 대기확산·위해성 평가 관련 국내 논문</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean)">위해성 관리 · 초동대응 · 사회경제 민감자원 · 플랫폼 개발 · 재난관리 체제</div>
              </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:10px">

              <!-- 논문 ① 김영윤·이문진 (2015) -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(168,85,247,.12);border-radius:8px;border-left:3px solid var(--color-tertiary)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(168,85,247,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-tertiary);font-family:var(--font-mono)">①</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해상 위험·유해물질(HNS) 관리 우선순위 선정에 관한 연구</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.15);font-size:8px;color:var(--color-tertiary);font-weight:600;white-space:nowrap">KRISO</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">김영윤·김태원·손민호·오상우·이문진 — 해양환경안전학회지 Vol.21 No.6, pp.672-678, 2015</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  EURAM/CRS-KOREA II 기반 위해성 스크리닝 시스템 개발. <b style="color:var(--color-tertiary)">Risk = Toxicity × Exposure</b> 프레임워크로 585종 유해액체물질 평가. 인체위해성(급성·만성·발암·기타독성)과 수생태위해성을 해상운송량·잔류성(BCF)·인화점·증기압과 결합하여 점수화. <b style="color:var(--color-accent)">상위 20종 우선관리물질</b>(Aniline, Acrylonitrile, Phenol, Coal tar 등) 도출. GESAMP 위해도 평가 기준 적용.
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">위해성 우선순위</span>
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">585종 유해액체물질</span>
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">GESAMP 기준</span>
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">이문진 공저</span>
                </div>
              </div>

              <!-- 논문 ② 노영희·김충기 (2016) -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(34,197,94,.12);border-radius:8px;border-left:3px solid var(--color-success)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-success);font-family:var(--font-mono)">②</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해양 유류유출 오염으로 인한 사회·경제적 민감자원 선정 및 지수화 방안</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);font-size:8px;color:var(--color-success);font-weight:600;white-space:nowrap">KEI</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">노영희·김충기 — 환경영향평가 Vol.25 No.6, pp.402-413, 2016</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  NOAA ESI 가이드라인 기반 한국형 사회·경제적 민감자원 분류체계 구축. <b style="color:var(--color-success)">수산물 획득·인구·토지이용·관리지역·문화유산/관광지</b> 5개 지표를 각 100점 환산(총 500점) 통합지수 산출. 연안 74개 시군구 단위 공간분석. McLaughlin et al.(2002) 삼각도표, Fattal et al.(2010) SEv 공식 등 해외 지수화 기법 비교. <b style="color:var(--color-accent)">HNS 사고 시 피해 평가 프레임워크</b>로 확장 가능.
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">ESI 민감자원</span>
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">통합지수 500점</span>
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">74개 시군구</span>
                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">김충기 공저</span>
                </div>
              </div>

              <!-- 논문 ③ 류제완·박희경 (2017) -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(249,115,22,.12);border-radius:8px;border-left:3px solid var(--color-warning)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-warning);font-family:var(--font-mono)">③</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">해양 HNS 유출사고 초동대응의 시스템 다이내믹스 모형 개발 연구</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.15);font-size:8px;color:var(--color-warning);font-weight:600;white-space:nowrap">KAIST</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">류제완·김남균·박희경 — 한국방재학회논문집 Vol.17 No.4, pp.307-315, 2017</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  해양경찰청 HNS 대응 매뉴얼 기반 <b style="color:var(--color-warning)">시스템 다이내믹스(SD) 모형</b> 구축. 초동대응 4개 행위(HNS 탐지·의사결정·파공봉쇄·펜스전장) 인과지도 작성. <b style="color:var(--color-accent)">안전장비 수준이 DB 수준보다 대응역량에 더 큰 영향</b> — 접근성(Accessibility) 상한계 결정. Two-step 전략(초동대응 기동선단 ETF) 도입 시 <b style="color:var(--color-success)">15% 대체 → 전체 대응시간 9.5% 단축</b>(116→105분), 90분간 유출량 80.78톤 감소(약 20억원 경제효과).
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">SD 시뮬레이션</span>
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">초동대응 골든타임</span>
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">ETF Two-step</span>
                  <span style="padding:2px 6px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);border-radius:3px;font-size:7px;color:var(--color-danger)">MARITIME MAISIE 사례</span>
                </div>
              </div>

              <!-- 논문 ④ 여보현·맹준호·이문진 (2023) -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:8px;border-left:3px solid var(--color-accent)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-accent);font-family:var(--font-mono)">④</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발 연구</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.15);font-size:8px;color:var(--color-accent);font-weight:600;white-space:nowrap">KEI+KRISO</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17, 2023</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  NOAA CAMEO/CAFE · EU MARINER/Bonn Agreement 플랫폼 비교 분석 후 <b style="color:var(--color-accent)">국내용 HNS 해양환경 영향평가 플랫폼</b> 구축. 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) 3단계 격자. 유속 벡터 전처리 모듈, HNS 유출량·확산범위 동적 시각화, <b style="color:var(--color-success)">연안환경 영향평가 + 사회경제 영향평가 GIS 모듈</b> 구현. SEBC 거동분류(G/E/F/D/S) 기반 물질 관리. 5대 항만(여수·부산·인천·평택/대산·울산) 대상.
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">국내용 플랫폼</span>
                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">CAMEO/MARINER 비교</span>
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">SEBC 거동분류</span>
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">이문진 공저</span>
                </div>
              </div>

              <!-- 논문 ⑤ 유영현 (2013) -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(239,68,68,.12);border-radius:8px;border-left:3px solid var(--color-danger)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-danger);font-family:var(--font-mono)">⑤</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">HNS 재난사고에 대한 해양경찰의 대응 방안</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);font-size:8px;color:var(--color-danger);font-weight:600;white-space:nowrap">군산대</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">유영현 — 한국위기관리논집 제9권 제11호, pp.77-92, 2013</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  허베이스피리트호 사고를 계기로 외국(미국·유럽) HNS 방제시스템과 한국 체제를 비교 분석. <b style="color:var(--color-danger)">통합지휘 및 협업체제 구축</b>, HNS 방제장비 강화 및 효율적 배치, <b style="color:var(--color-accent)">CAMEO/ALOHA/MARPLOT 기반 대응정보 지원체계</b> 구축, 68종 중점관리대상물질의 체계적 관리를 제안. 미국 NRT/NSF 통합대응체제와 한국의 분산관리방식을 비교하여 <b style="color:var(--color-warning)">ICS(통합지휘시스템) 도입</b> 필요성 강조. 2006~2010년 국내 HNS 유출사고 13건 분석, 항만별(울산·여수·대산) 화재·폭발·누출 <b style="color:var(--color-success)">위험도 매트릭스</b> 제시. OPRC-HNS 의정서(2008.4 발효) 국내 이행 현황 정리.
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);border-radius:3px;font-size:7px;color:var(--color-danger)">재난관리 체제</span>
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">CAMEO/ALOHA</span>
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">ICS 통합지휘</span>
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">OPRC-HNS 의정서</span>
                </div>
              </div>

              <!-- 논문 ⑥ 여보현·맹준호·이문진 외 (2023) — 이미 ④로 존재하지만 이것은 별개 논문 -->
              <div style="padding:12px;background:var(--bg-base);border:1px solid rgba(6,182,212,.12);border-radius:8px;border-left:3px solid var(--color-accent)">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px">
                  <div style="display:flex;align-items:center;gap:6px">
                    <span style="width:20px;height:20px;border-radius:50%;background:rgba(6,182,212,.15);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-accent);font-family:var(--font-mono)">⑥</span>
                    <span style="font-size:11px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">상시배출되는 HNS의 해양환경 영향평가를 위한 해외 사례 분석과 국내용 플랫폼 개발 연구</span>
                  </div>
                  <span style="padding:2px 8px;border-radius:4px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.15);font-size:8px;color:var(--color-accent);font-weight:600;white-space:nowrap">KEI+KRISO</span>
                </div>
                <div style="font-size:9px;color:var(--fg-disabled);font-family:var(--font-korean);margin-bottom:6px">여보현·김진호·김태윤·맹준호·이문진·김태성 — 해양환경안전학회지 Vol.29 특별호, pp.8-17, 2023</div>
                <div style="font-size:9px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.6">
                  NOAA <b style="color:var(--color-accent)">CAFE(Chemical Aquatic Fate and Effects)</b> DB(32,377종 거동·4,498종 화학물질 데이터)와 <b style="color:var(--color-accent)">CAMEO Suite</b>, EU <b style="color:var(--color-tertiary)">MARINER 플랫폼</b>(119건 HNS 유출사고·187종 물질 DB) 및 Bonn Agreement 체계를 비교 분석. SEBC 거동분류(G/E/F/D/S) 기반 물질 분류 체계 적용. 국내용 HNS 해양환경 영향평가 플랫폼 프로토타입 개발: 광역(5.4km)→중간역(1.8km)→상세역(80~110m, 여수) <b style="color:var(--color-success)">3단계 Nesting 격자</b> 구성, 유속 벡터 전처리 모듈, HNS 유출량·확산범위 동적 시각화, <b style="color:var(--color-warning)">연안환경 영향평가 + 사회경제 영향평가 GIS 모듈</b> 구현. 5대 항만(여수·부산·인천·평택/대산·울산) 확대 적용 계획.
                </div>
                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
                  <span style="padding:2px 6px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.12);border-radius:3px;font-size:7px;color:var(--color-accent)">CAFE·CAMEO 비교</span>
                  <span style="padding:2px 6px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.12);border-radius:3px;font-size:7px;color:var(--color-tertiary)">MARINER 플랫폼</span>
                  <span style="padding:2px 6px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.12);border-radius:3px;font-size:7px;color:var(--color-success)">SEBC 거동분류</span>
                  <span style="padding:2px 6px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);border-radius:3px;font-size:7px;color:var(--color-warning)">이문진 공저</span>
                </div>
              </div>

            </div>
          </div>

          <!-- 로드맵 -->
          <div style="background:linear-gradient(135deg,rgba(6,182,212,.05),rgba(168,85,247,.04));border:1px solid rgba(6,182,212,.2);border-radius:10px;padding:16px">
            <div style="font-size:13px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:14px">📅 WING 시스템 HNS 모델 로드맵</div>
            <div style="display:flex;gap:0;align-items:stretch">
              <div style="flex:1;padding:10px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:8px 0 0 8px;text-align:center">
                <div style="font-size:9px;font-weight:700;color:var(--color-success);font-family:var(--font-korean);margin-bottom:4px">✅ Phase 1 (완료)</div>
                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">가우시안 모델</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">ALOHA + Lee 해양보정<br>6,000+종 HNS DB<br>AEGL/ERPG 기준 자동 적용</div>
              </div>
              <div style="width:2px;background:linear-gradient(180deg,var(--color-success),var(--color-accent))"></div>
              <div style="flex:1;padding:10px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.2);text-align:center">
                <div style="font-size:9px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean);margin-bottom:4px">🔧 Phase 2 (진행중)</div>
                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">WRF-Chem 연동</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">3D 확산 모의<br>비정상류 기상 반영<br>해양-대기 결합 모의</div>
              </div>
              <div style="width:2px;background:linear-gradient(180deg,var(--color-accent),var(--color-tertiary))"></div>
              <div style="flex:1;padding:10px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.2);text-align:center">
                <div style="font-size:9px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean);margin-bottom:4px">🔬 Phase 3 (계획)</div>
                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">ROMS + AI 융합</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">해양 수치모델 결합<br>ML 서로게이트 모델<br>실시간 데이터 파이프라인</div>
              </div>
              <div style="width:2px;background:linear-gradient(180deg,var(--color-tertiary),var(--color-warning))"></div>
              <div style="flex:1;padding:10px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.2);border-radius:0 8px 8px 0;text-align:center">
                <div style="font-size:9px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean);margin-bottom:4px">🎯 Phase 4 (목표)</div>
                <div style="font-size:10px;font-weight:600;color:var(--fg-default);font-family:var(--font-korean);margin-bottom:4px">자동 블랙박스</div>
                <div style="font-size:8px;color:var(--fg-disabled);font-family:var(--font-korean);line-height:1.5">사고 자동감지→예측→대응<br>센서+AI 물질식별<br>전 과정 무인 자동화</div>
              </div>
            </div>
          </div>`,
];

export function HNSTheoryView() {
  const [activePanel, setActivePanel] = useState(0);
  const contentRef = useRef<HTMLDivElement>(null);

  const handleExportPDF = () => {
    if (!contentRef.current) return;
    const clone = contentRef.current.cloneNode(true) as HTMLElement;
    clone.querySelectorAll('[data-html2pdf-ignore]').forEach((el) => el.remove());
    const content = sanitizeHtml(clone.innerHTML);
    const styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
      .map((el) => el.outerHTML)
      .join('\n');
    const fullHtml = `<!DOCTYPE html>
<html><head><meta charset="utf-8"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:;">
<title>HNS 대기확산 모델 이론</title>
${styles}
<style>
  :root { --t1: #ffffff !important; --t2: #d0d6e6 !important; --t3: #a8b0c8 !important; }
  @media print { @page { size: A4; margin: 10mm; } body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }
  body { background: var(--bg-base); color: var(--fg-default); font-family: 'Noto Sans KR', sans-serif; padding: 20px 24px; }
</style>
</head><body>${content}</body></html>`;
    const blob = new Blob([fullHtml], { type: 'text/html; charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const win = window.open(url, '_blank');
    if (win) {
      win.addEventListener('afterprint', () => URL.revokeObjectURL(url));
      setTimeout(() => {
        win.document.title = 'HNS_대기확산_모델_이론';
        win.print();
      }, 500);
    }
    setTimeout(() => URL.revokeObjectURL(url), 30000);
  };

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        width: '100%',
        flex: 1,
        overflow: 'hidden',
        background: 'var(--bg-base)',
      }}
    >
      <div
        ref={contentRef}
        style={{
          flex: 1,
          overflowY: 'auto',
          scrollbarWidth: 'thin',
          scrollbarColor: 'var(--stroke-light) transparent',
          padding: '20px',
        }}
      >
        {/* Header */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginBottom: '20px',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div
              style={{
                width: '42px',
                height: '42px',
                borderRadius: '10px',
                background: 'linear-gradient(135deg,rgba(168,85,247,.2),rgba(59,130,246,.15))',
                border: '1px solid rgba(168,85,247,.3)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '20px',
              }}
            >
              📐
            </div>
            <div>
              <div style={{ fontSize: '16px', fontWeight: 700 }}>
                HNS 대기확산 모델 이론 및 검증
              </div>
              <div style={{ fontSize: '10px', color: 'var(--fg-disabled)', marginTop: '2px' }}>
                WRF-Chem · Gaussian Plume/Puff · ROMS · 해양환경 보정 — Based on Lee Moon-Jin et al.
              </div>
            </div>
          </div>
          <button
            onClick={handleExportPDF}
            data-html2pdf-ignore
            style={{
              padding: '6px 14px',
              borderRadius: '6px',
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
              color: 'var(--color-accent)',
              fontSize: '10px',
              fontWeight: 600,
              cursor: 'pointer',
            }}
          >
            📤 PDF 내보내기
          </button>
        </div>

        {/* Sub-tabs */}
        <div
          style={{
            display: 'flex',
            gap: '3px',
            background: 'var(--bg-card)',
            borderRadius: '8px',
            padding: '4px',
            marginBottom: '20px',
            border: '1px solid var(--stroke-default)',
          }}
        >
          {theoryTabs.map((tab, i) => (
            <button
              key={i}
              onClick={() => setActivePanel(i)}
              style={{
                flex: 1,
                padding: '8px',
                fontSize: '11px',
                fontWeight: 600,
                cursor: 'pointer',
                borderRadius: '6px',
                border:
                  activePanel === i ? '1px solid var(--color-accent)' : '1px solid transparent',
                background: activePanel === i ? 'rgba(6,182,212,.08)' : 'transparent',
                color: activePanel === i ? 'var(--color-accent)' : 'var(--fg-disabled)',
              }}
            >
              {tab.icon} {tab.name}
            </button>
          ))}
        </div>

        {/* Panel content */}
        <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(panelHtml[activePanel]) }} />
      </div>
    </div>
  );
}
