import { useState, useRef } from 'react';

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

/* ═══ 공통 스타일 유틸 ═══ */
const card = 'rounded-[10px] p-[14px] mb-4';
const cardBg = 'bg-bg-card border border-stroke';
const labelStyle = (color: string) =>
  ({ fontSize: 'var(--font-size-title-3)', fontWeight: 700, color, marginBottom: '10px' }) as const;
const tag = (color: string) =>
  ({
    padding: '3px 8px',
    borderRadius: '4px',
    fontSize: 'var(--font-size-label-2)',
    color,
    background: `${color}14`,
    border: `1px solid ${color}30`,
  }) as const;
const bodyText = 'text-label-1 text-fg-sub leading-[1.8]';

/* ═══ 패널 0: 시스템 개요 ═══ */

function SystemOverviewPanel() {
  return (
    <>
      {/* 시스템 개요 */}
      <div className={`${card} ${cardBg}`}>
        {/* 1행: 정의 + 목적 */}
        <div className="grid grid-cols-2 gap-4 mb-4">
          <div>
            <div style={labelStyle('var(--fg-default)')}>📋 HNS 대기확산 모델이란?</div>
            <div className={bodyText}>
              해상에서 유출된 <b>위험유해물질(Hazardous &amp; Noxious Substances, HNS)</b>이 대기로
              증발하여 퍼지는 농도를 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다.
              기상 예측 모델(<b>WRF</b>)과 대기화학 모델(<b>Chem</b>)을 결합하여 실시간 대기 확산을
              시뮬레이션합니다.
            </div>
          </div>
          <div>
            <div style={labelStyle('var(--fg-default)')}>🎯 목적</div>
            <div className="flex flex-col gap-[6px] text-label-1 text-fg-sub">
              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>①</span> 유출 사고 시{' '}
                <b>신속한 위험 범위 예측</b>
              </div>
              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>②</span> 독성물질 농도
                기반 <b>대피 명령</b> 의사결정
              </div>
              <div className="flex items-center gap-[6px] px-[10px] py-[6px] rounded-[10px] bg-bg-base">
                <span style={{ color: 'var(--fg-default)', fontWeight: 700 }}>③</span> 사고 대응
                체계 구축 및 <b>피해 최소화</b>
              </div>
            </div>
          </div>
        </div>
        {/* 2행: 물질 특성 + 기상 데이터 + 확산 알고리즘 */}
        <div className="grid grid-cols-3 gap-4">
          <div>
            <div style={labelStyle('var(--fg-default)')}>🧪 물질 특성 반영</div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
                marginBottom: '10px',
              }}
            >
              HNS는 <b>약 6,000종 이상</b>으로, 종류가 매우 다양합니다. 각 물질의 고유 거동 특성을
              모델에 반영합니다.
            </div>
            <div className="flex flex-wrap gap-1">
              {['증발률', '독성', '기화 특성', '비중', '인화점', '용해도'].map((item) => (
                <span
                  key={item}
                  style={{
                    padding: '2px 8px',
                    borderRadius: '4px',
                    fontSize: 'var(--font-size-label-2)',
                    color: 'var(--fg-sub)',
                    background: 'var(--bg-base)',
                  }}
                >
                  {item}
                </span>
              ))}
            </div>
          </div>
          <div>
            <div style={labelStyle('var(--fg-default)')}>🌬 기상 데이터 연동</div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
                marginBottom: '10px',
              }}
            >
              <b>실시간 기상 정보</b>를 입력 데이터로 사용하여 확산 방향과 속도를 결정합니다.
            </div>
            <div
              className="flex flex-col gap-1"
              style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
            >
              {[
                '💨 풍향·풍속 (KMA·ECMWF)',
                '🌡 기온·습도·강수',
                '📊 대기 안정도 (Pasquill-Gifford)',
              ].map((item) => (
                <div
                  key={item}
                  style={{ padding: '4px 8px', borderRadius: '4px', background: 'var(--bg-base)' }}
                >
                  {item}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={labelStyle('var(--fg-default)')}>🔬 확산 알고리즘</div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
                marginBottom: '10px',
              }}
            >
              가우시안 플룸/퍼프 모델 또는 WRF-Chem 수치 모델을 사용하여 <b>대기 중 농도</b>를
              계산합니다.
            </div>
            <div
              className="flex flex-col gap-1"
              style={{ fontSize: 'var(--font-size-label-2)', color: 'var(--fg-sub)' }}
            >
              {['📍 Gaussian Plume/Puff', '⚡ WRF-Chem (기상+화학)', '🔧 ALOHA / CAMEO'].map(
                (item) => (
                  <div
                    key={item}
                    style={{
                      padding: '4px 8px',
                      borderRadius: '4px',
                      background: 'var(--bg-base)',
                    }}
                  >
                    {item}
                  </div>
                ),
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 주요 기능 및 특징 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '14px',
          }}
        >
          ⚙ 주요 기능 및 특징
        </div>
        <div className="grid grid-cols-3 gap-3">
          <div
            style={{
              padding: '14px',
              background: 'var(--bg-base)',
              border: '1px solid var(--stroke-default)',
              borderRadius: '8px',
            }}
          >
            <div className="flex items-center gap-[6px] mb-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>📡</span>
              <span
                style={{
                  fontSize: 'var(--font-size-label-1)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                실시간 모니터링
              </span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              '<b style={{ color: 'var(--color-accent)' }}>HNS 유출 블랙박스 시스템</b>'과 같이 사고
              즉시 확산 방향과 농도를 예측하여 시각화합니다. 사고 발생 → 자동 감지 → 실시간 확산 맵
              생성의 자동화 파이프라인을 제공합니다.
            </div>
          </div>
          <div
            style={{
              padding: '14px',
              background: 'var(--bg-base)',
              border: '1px solid var(--stroke-default)',
              borderRadius: '8px',
            }}
          >
            <div className="flex items-center gap-[6px] mb-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🎯</span>
              <span
                style={{
                  fontSize: 'var(--font-size-label-1)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                위험 범위 예측
              </span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              대기 중 독성물질 농도에 따른{' '}
              <b style={{ color: 'var(--color-accent)' }}>안전/경고/위험 구역</b>을 AEGL·ERPG
              기준으로 자동 설정합니다. 시간대별 확산 경계를 지도 위에 오버레이합니다.
            </div>
          </div>
          <div
            style={{
              padding: '14px',
              background: 'var(--bg-base)',
              border: '1px solid var(--stroke-default)',
              borderRadius: '8px',
            }}
          >
            <div className="flex items-center gap-[6px] mb-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
              <span
                style={{
                  fontSize: 'var(--font-size-label-1)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                긴급 대응
              </span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              해상 사고 시 <b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b>를 이용한 빠른
              예측 기술을 포함합니다. 사전 계산된 시나리오 DB를 활용하여 초기 대응 시간을{' '}
              <b style={{ color: 'var(--color-accent)' }}>수 분 이내</b>로 단축합니다.
            </div>
          </div>
        </div>
      </div>

      {/* 주요 기술 아키텍처 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '14px',
          }}
        >
          🏗 주요 기술 아키텍처
        </div>
        {/* Flow diagram */}
        <div className="flex items-center justify-center flex-wrap gap-0 mb-4">
          {[
            {
              icon: '🧪',
              label: 'HNS 물질 DB',
              sub: '6,000+ 물질',
            },
            {
              icon: '🌬',
              label: '기상 데이터',
              sub: 'KMA / AWS',
            },
            {
              icon: '🔬',
              label: '확산 모델 엔진',
              sub: 'WRF-Chem / Gaussian',
            },
            {
              icon: '🗺',
              label: 'GIS 시각화',
              sub: '위험 구역 맵',
            },
            {
              icon: '🚨',
              label: '대응 의사결정',
              sub: '대피·방제 명령',
            },
          ].map((item, idx) => (
            <>
              <div
                key={item.label}
                style={{
                  padding: '10px 16px',
                  background: 'var(--bg-base)',
                  border: '1px solid var(--stroke-default)',
                  borderRadius: '8px',
                  textAlign: 'center',
                  minWidth: idx === 2 ? '140px' : '120px',
                }}
              >
                <div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
                  {item.icon}
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    fontWeight: 700,
                    color: 'var(--color-accent)',
                  }}
                >
                  {item.label}
                </div>
                <div
                  className="font-mono"
                  style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
                >
                  {item.sub}
                </div>
              </div>
              {idx < 4 && (
                <div
                  key={`arrow-${idx}`}
                  style={{
                    fontSize: 'var(--font-size-title-2)',
                    color: 'var(--fg-disabled)',
                    padding: '0 6px',
                  }}
                >
                  →
                </div>
              )}
            </>
          ))}
        </div>

        {/* 기술 상세 비교 */}
        <div className="grid grid-cols-3 gap-[10px]">
          <div
            style={{
              padding: '12px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              WRF-Chem
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              기상 예측 모델(<b style={{ color: 'var(--color-accent)' }}>WRF</b>)과 대기화학 모델(
              <b style={{ color: 'var(--color-accent)' }}>Chem</b>)을 결합. 3차원 바람장·난류를
              실시간 계산하여 화학물질 이류·확산·반응을 동시에 모의합니다.
              <br />
              <span
                className="font-mono"
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                해상도: 1~3 km / 시간분해능: 1 hr
              </span>
            </div>
          </div>
          <div
            style={{
              padding: '12px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              Gaussian Plume/Puff
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              ALOHA/CAMEO 표준 알고리즘 기반. 연속 배출(
              <b style={{ color: 'var(--color-accent)' }}>Plume</b>) 또는 순간 배출(
              <b style={{ color: 'var(--color-accent)' }}>Puff</b>) 시나리오 선택. 빠른 계산 속도로{' '}
              <b>초기 대응</b>에 최적화.
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                계산시간: &lt; 10초 / 정확도: ±10~40%
              </span>
            </div>
          </div>
          <div
            style={{
              padding: '12px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              ROMS 해양 연동
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.7,
              }}
            >
              Regional Ocean Modeling System과 연동하여 해수면 유출물의{' '}
              <b style={{ color: 'var(--color-accent)' }}>해양 확산 + 대기 증발</b>을 동시에
              모의합니다. 입자 추적 방식의 한계를 극복한 수치 모델.
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                장기 모의 가능 / 정밀 농도 계산
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* WING 시스템 적용 전략 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center gap-2 mb-3">
          <div
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--color-accent)',
            }}
          >
            🖥 WING 시스템 적용 전략
          </div>
          <span
            style={{
              padding: '2px 8px',
              borderRadius: '10px',
              background: 'rgba(6,182,212,.12)',
              color: 'var(--color-accent)',
              fontSize: 'var(--font-size-caption)',
              fontWeight: 600,
            }}
          >
            현재 구현
          </span>
        </div>
        <div className="grid grid-cols-4 gap-2">
          {[
            {
              icon: '🧪',
              label: 'HNS DB 연동',
              sub: 'CHRIS/CAMEO DB\n6,000+종 물질 검색',
              bar: 'var(--color-accent)',
            },
            {
              icon: '⚡',
              label: '가우시안 모델',
              sub: 'ALOHA + 이문진박사모델\n초기 대응 10초 이내',
              bar: 'var(--color-accent)',
            },
            {
              icon: '🌐',
              label: 'WRF-Chem',
              sub: '정밀 수치 모의\n3D 확산 시뮬레이션',
              bar: 'var(--color-accent)',
            },
            {
              icon: '🌊',
              label: 'ROMS 연동',
              sub: '해양-대기 결합\n장기 모의 지원',
              bar: 'var(--color-accent)',
            },
          ].map((item) => (
            <div
              key={item.label}
              style={{
                padding: '10px',
                background: 'var(--bg-card)',
                border: '1px solid var(--stroke-default)',
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div style={{ fontSize: 'var(--font-size-heading-3)', marginBottom: '4px' }}>
                {item.icon}
              </div>
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                {item.label}
              </div>
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  marginTop: '2px',
                }}
              >
                {item.sub.split('\n').map((line, i) => (
                  <span key={i}>
                    {line}
                    {i === 0 && <br />}
                  </span>
                ))}
              </div>
              <div
                style={{
                  marginTop: '6px',
                  height: '3px',
                  background: item.bar,
                  borderRadius: '2px',
                }}
              />
            </div>
          ))}
        </div>
        <div
          className="flex gap-3 mt-[10px]"
          style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
        >
          <span className="flex items-center gap-1">
            <span
              style={{
                display: 'inline-block',
                width: '10px',
                height: '3px',
                background: 'var(--color-accent)',
                borderRadius: '2px',
              }}
            />{' '}
            구현 완료
          </span>
          <span className="flex items-center gap-1">
            <span
              style={{
                display: 'inline-block',
                width: '10px',
                height: '3px',
                background: 'var(--color-accent)',
                borderRadius: '2px',
              }}
            />{' '}
            개발 진행중
          </span>
          <span className="flex items-center gap-1">
            <span
              style={{
                display: 'inline-block',
                width: '10px',
                height: '3px',
                background: 'var(--color-accent)',
                borderRadius: '2px',
              }}
            />{' '}
            계획
          </span>
        </div>
      </div>

      {/* HNS 사고 실태 및 항만별 위험도 */}
      <div className={`${cardBg} rounded-[10px] p-4 mt-4 mb-4`}>
        <div className="flex items-center justify-between mb-[14px]">
          <div className="flex items-center gap-2">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              🚨
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                HNS 사고 실태 및 항만별 위험도
              </div>
              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                유영현 (2013), 한국위기관리논집 · 해양경찰청 (2010, 2011)
              </div>
            </div>
          </div>
          <span
            style={{
              padding: '3px 10px',
              borderRadius: '6px',
              background: 'rgba(6,182,212,.08)',
              border: '1px solid rgba(6,182,212,.2)',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
          >
            전 세계 HNS 6,500+종
          </span>
        </div>

        <div className="grid grid-cols-2 gap-[14px]">
          {/* 주요 항만별 위험도 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              🏭 주요 항만별 화재·폭발·누출 위험도
            </div>
            <div style={{ overflowX: 'auto' }}>
              <table
                style={{
                  width: '100%',
                  borderCollapse: 'collapse',
                  fontSize: 'var(--font-size-caption)',
                }}
              >
                <thead>
                  <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                    <th
                      style={{
                        padding: '6px 8px',
                        textAlign: 'left',
                        borderBottom: '2px solid var(--stroke-light)',
                        color: 'var(--color-accent)',
                      }}
                    >
                      항만
                    </th>
                    <th
                      style={{
                        padding: '6px 8px',
                        textAlign: 'center',
                        borderBottom: '2px solid var(--stroke-light)',
                        color: 'var(--fg-sub)',
                      }}
                    >
                      화재
                    </th>
                    <th
                      style={{
                        padding: '6px 8px',
                        textAlign: 'center',
                        borderBottom: '2px solid var(--stroke-light)',
                        color: 'var(--fg-sub)',
                      }}
                    >
                      폭발
                    </th>
                    <th
                      style={{
                        padding: '6px 8px',
                        textAlign: 'center',
                        borderBottom: '2px solid var(--stroke-light)',
                        color: 'var(--fg-sub)',
                      }}
                    >
                      누출
                    </th>
                    <th
                      style={{
                        padding: '6px 8px',
                        textAlign: 'center',
                        borderBottom: '2px solid var(--stroke-light)',
                        color: 'var(--fg-sub)',
                      }}
                    >
                      HNS(천톤)
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    {
                      name: '울산',
                      fire: '◎',
                      exp: '◎',
                      leak: '◎',
                      hns: '27,574',
                      danger: true,
                    },
                    {
                      name: '여수·광양',
                      fire: '◎',
                      exp: '◎',
                      leak: '◎',
                      hns: '38,700',
                      danger: true,
                    },
                    { name: '대산', fire: '◎', exp: '○', leak: '◎', hns: '19,401', danger: false },
                    { name: '인천', fire: '○', exp: '◎', leak: '○', hns: '41,618', danger: false },
                    { name: '부산', fire: '○', exp: '△', leak: '○', hns: '25,417', danger: false },
                    {
                      name: '평택·당진',
                      fire: '○',
                      exp: '◎',
                      leak: '○',
                      hns: '29,248',
                      danger: false,
                    },
                  ].map((row) => (
                    <tr
                      key={row.name}
                      style={{
                        borderBottom: '1px solid rgba(255,255,255,.04)',
                        background: row.danger ? 'rgba(6,182,212,.03)' : undefined,
                      }}
                    >
                      <td
                        style={{
                          padding: '5px 8px',
                          fontWeight: 700,
                          color: row.danger ? 'var(--color-accent)' : 'var(--fg-default)',
                        }}
                      >
                        {row.name}
                      </td>
                      <td style={{ textAlign: 'center' }}>{row.fire}</td>
                      <td style={{ textAlign: 'center' }}>{row.exp}</td>
                      <td style={{ textAlign: 'center' }}>{row.leak}</td>
                      <td
                        className="font-mono"
                        style={{
                          textAlign: 'center',
                          color: row.danger ? 'var(--color-accent)' : 'var(--color-accent)',
                        }}
                      >
                        {row.hns}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div
              className="flex gap-2 mt-[6px]"
              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
            >
              <span>◎ 아주높음</span>
              <span>○ 높음</span>
              <span>△ 보통이상</span>
              <span>□ 보통</span>
              <span className="ml-auto">단위: 천톤, 2010년 기준</span>
            </div>
          </div>

          {/* HNS 구분 및 사고 유형 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              ⚠ HNS 위험물질 vs 유해물질
            </div>
            <div className="grid grid-cols-2 gap-[6px] mb-2">
              <div
                style={{
                  padding: '8px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '6px',
                }}
              >
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    fontWeight: 700,
                    color: 'var(--color-accent)',
                    marginBottom: '4px',
                  }}
                >
                  위험물질
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.5,
                  }}
                >
                  폭발·인화·독성·부식·질식·중합 등으로 생명체에 위험을 초래하는 물질
                </div>
                <div className="flex flex-wrap gap-[2px] mt-1">
                  {['포장위험물', '산적고체', '산적액체', '액화가스'].map((t) => (
                    <span
                      key={t}
                      style={{
                        padding: '1px 5px',
                        borderRadius: '3px',
                        background: 'rgba(6,182,212,.06)',
                        fontSize: 'var(--font-size-caption)',
                        color: 'var(--color-accent)',
                      }}
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
              <div
                style={{
                  padding: '8px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '6px',
                }}
              >
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    fontWeight: 700,
                    color: 'var(--color-accent)',
                    marginBottom: '4px',
                  }}
                >
                  유해물질
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.5,
                  }}
                >
                  해양에서 해로운 영향을 초래하는 물질·에너지 (해양환경관리법)
                </div>
                <div className="flex flex-wrap gap-[2px] mt-1">
                  {['유해액체', '포장유해', '대기오염', '폐기물'].map((t) => (
                    <span
                      key={t}
                      style={{
                        padding: '1px 5px',
                        borderRadius: '3px',
                        background: 'rgba(6,182,212,.06)',
                        fontSize: 'var(--font-size-caption)',
                        color: 'var(--color-accent)',
                      }}
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '6px',
              }}
            >
              📊 유류 vs HNS 사고 대응 차이
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'auto 1fr 1fr',
                fontSize: 'var(--font-size-caption)',
              }}
            >
              <div
                style={{
                  padding: '4px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  fontWeight: 600,
                  color: 'var(--color-accent)',
                }}
              >
                구분
              </div>
              <div
                style={{
                  padding: '4px 6px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.08)',
                  textAlign: 'center',
                  fontWeight: 600,
                  color: 'var(--color-accent)',
                }}
              >
                유류
              </div>
              <div
                style={{
                  padding: '4px 6px',
                  background: 'rgba(6,182,212,.04)',
                  border: '1px solid rgba(6,182,212,.08)',
                  textAlign: 'center',
                  fontWeight: 600,
                  color: 'var(--color-accent)',
                }}
              >
                HNS
              </div>
              {[
                {
                  label: '물질',
                  oil: '눈으로 확인 가능',
                  hns: '보이지 않는 경우 多',
                  hnsC: 'var(--color-accent)',
                },
                {
                  label: '위험',
                  oil: '낮은 위험성',
                  hns: '독성·폭발·화재 복합',
                  hnsC: 'var(--color-accent)',
                },
                {
                  label: '예측',
                  oil: '단기 예측 가능',
                  hns: '다매체 피해예측 필요',
                  hnsC: 'var(--color-accent)',
                },
                {
                  label: '대응',
                  oil: '초기대응자 방제가능',
                  hns: '전문가 방제 필수',
                  hnsC: 'var(--color-accent)',
                },
              ].map((row) => (
                <>
                  <div
                    key={`${row.label}-label`}
                    style={{
                      padding: '3px 6px',
                      border: '1px solid var(--stroke-light)',
                      color: 'var(--fg-disabled)',
                    }}
                  >
                    {row.label}
                  </div>
                  <div
                    key={`${row.label}-oil`}
                    style={{
                      padding: '3px 6px',
                      border: '1px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                      textAlign: 'center',
                    }}
                  >
                    {row.oil}
                  </div>
                  <div
                    key={`${row.label}-hns`}
                    style={{
                      padding: '3px 6px',
                      border: '1px solid var(--stroke-light)',
                      color: row.hnsC,
                      textAlign: 'center',
                    }}
                  >
                    {row.hns}
                  </div>
                </>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 국내외 대응 체계 비교 */}
      <div className="grid grid-cols-2 gap-[14px] mb-4">
        {/* 한국 */}
        <div className={`${cardBg} rounded-[10px] p-[14px]`}>
          <div className="flex items-center gap-[6px] mb-[10px]">
            <span style={{ fontSize: 'var(--font-size-title-3)' }}>🇰🇷</span>
            <span
              style={{
                fontSize: 'var(--font-size-label-1)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              한국 HNS 대응 체계
            </span>
          </div>
          <div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
            {[
              {
                title: 'OPRC-HNS 의정서',
                sub: '2008.1.11 가입 → 2008.4.11 발효',
                color: 'var(--color-accent)',
              },
              {
                title: '국가/지역 긴급방제계획',
                sub: "HNS 국가긴급방제계획 수립 ('09.6)",
                color: 'var(--color-accent)',
              },
              {
                title: 'CARIS 대응정보시스템',
                sub: '사고대응 매뉴얼 + 화학물질 정보',
                color: 'var(--color-accent)',
              },
              {
                title: '통합 대응 체계',
                sub: '대통령 → 중앙안전관리위 → 중앙방제대책본부(해양경찰청장)',
                color: 'var(--color-accent)',
              },
              {
                title: '현장 대응팀',
                sub: '상황관리팀 → 사고대응팀(통제반·물질탐지반·방제작업반·제독지원반)',
                color: 'var(--color-accent)',
              },
            ].map((item) => (
              <div
                key={item.title}
                style={{
                  padding: '6px 8px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px',
                }}
              >
                <div>
                  <b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
                  <br />
                  <span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 미국 */}
        <div className={`${cardBg} rounded-[10px] p-[14px]`}>
          <div className="flex items-center gap-[6px] mb-[10px]">
            <span style={{ fontSize: 'var(--font-size-title-3)' }}>🇺🇸</span>
            <span
              style={{
                fontSize: 'var(--font-size-label-1)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              미국 HNS 대응 체계
            </span>
          </div>
          <div className="flex flex-col gap-[6px]" style={{ fontSize: 'var(--font-size-caption)' }}>
            {[
              {
                title: 'OPA90 / NCP',
                sub: '국가긴급계획 ESF #10 — HNS 포함',
                color: 'var(--color-accent)',
              },
              {
                title: '공동의장 체제',
                sub: '환경청(EPA) + 해안경비대(USCG) 공동 지휘',
                color: 'var(--color-accent)',
              },
              {
                title: 'CAMEO / ALOHA / MARPLOT',
                sub: '6,000+종 화학물질 통합 DB · 대기확산 모델',
                color: 'var(--color-accent)',
              },
              {
                title: 'NRT / RRT / NSF',
                sub: '국가방제팀 + 지역방제팀 + 국가기동타격대',
                color: 'var(--color-accent)',
              },
              {
                title: '통합지휘시스템(ICS)',
                sub: '16개 부처 + 주·지방정부 + 유출책임자 통합 조정',
                color: 'var(--color-accent)',
              },
            ].map((item) => (
              <div
                key={item.title}
                style={{
                  padding: '6px 8px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px',
                }}
              >
                <div>
                  <b style={{ color: 'var(--fg-default)' }}>{item.title}</b>
                  <br />
                  <span style={{ color: 'var(--fg-disabled)' }}>{item.sub}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 국제 협약 체계 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center gap-2 mb-[10px]">
          <span
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--color-accent)',
            }}
          >
            🌐 HNS 관련 국제 협약 체계
          </span>
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'auto 1fr 1fr 1fr',
            fontSize: 'var(--font-size-caption)',
          }}
        >
          {[{ label: '구분', 협약: '협약', 담당: '담당', 대상: '대상', header: true }].map(() => (
            <>
              <div
                key="h-div"
                style={{
                  padding: '5px 8px',
                  background: 'rgba(6,182,212,.08)',
                  fontWeight: 700,
                  color: 'var(--color-accent)',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                구분
              </div>
              <div
                key="h-conv"
                style={{
                  padding: '5px 8px',
                  background: 'rgba(6,182,212,.08)',
                  fontWeight: 600,
                  color: 'var(--fg-default)',
                  textAlign: 'center',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                협약
              </div>
              <div
                key="h-resp"
                style={{
                  padding: '5px 8px',
                  background: 'rgba(6,182,212,.08)',
                  fontWeight: 600,
                  color: 'var(--fg-default)',
                  textAlign: 'center',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                담당
              </div>
              <div
                key="h-target"
                style={{
                  padding: '5px 8px',
                  background: 'rgba(6,182,212,.08)',
                  fontWeight: 600,
                  color: 'var(--fg-default)',
                  textAlign: 'center',
                  border: '1px solid rgba(6,182,212,.12)',
                }}
              >
                대상
              </div>
            </>
          ))}
          {/* 안전 */}
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-disabled)',
            }}
          >
            안전
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--color-accent)',
              textAlign: 'center',
            }}
          >
            74 SOLAS
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            IMO
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            위험물질
          </div>
          {/* 보호 */}
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-disabled)',
            }}
          >
            보호
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--color-accent)',
              textAlign: 'center',
            }}
          >
            MARPOL 73/78
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            IMO
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            기름·유해액체·포장유해·하수·폐기물
          </div>
          {/* 대비·대응 */}
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              background: 'rgba(6,182,212,.03)',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
          >
            대비·대응
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              background: 'rgba(6,182,212,.03)',
              color: 'var(--color-accent)',
              textAlign: 'center',
              fontWeight: 600,
            }}
          >
            2000 OPRC-HNS
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              background: 'rgba(6,182,212,.03)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            IMO
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              background: 'rgba(6,182,212,.03)',
              color: 'var(--color-accent)',
              textAlign: 'center',
              fontWeight: 600,
            }}
          >
            위험·유해물질(HNS)
          </div>
          {/* 배상 */}
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-disabled)',
            }}
          >
            배상
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--color-accent)',
              textAlign: 'center',
            }}
          >
            96 HNS협약
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            IMO
          </div>
          <div
            style={{
              padding: '4px 8px',
              border: '1px solid var(--stroke-light)',
              color: 'var(--fg-sub)',
              textAlign: 'center',
            }}
          >
            유해물질 및 위험물질
          </div>
        </div>
      </div>

      {/* HATS 사고이력 통계 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div className="flex items-center justify-between mb-[14px]">
          <div className="flex items-center gap-2">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              📊
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--color-accent)',
                }}
              >
                국내 HNS 사고 통계 (23년간 76건)
              </div>
              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                장하용·이문진 외 (2017) HATS 분석 · 1994~2016년 해양경비안전본부 데이터
              </div>
            </div>
          </div>
          <span
            style={{
              padding: '3px 10px',
              borderRadius: '6px',
              background: 'rgba(6,182,212,.08)',
              border: '1px solid rgba(6,182,212,.2)',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--color-accent)',
              fontWeight: 700,
            }}
          >
            연평균 3.3건
          </span>
        </div>

        <div className="grid grid-cols-5 gap-2 mb-[14px]">
          {[
            {
              label: '사고시기 1위',
              val: '41%',
              title: '춘계 (3~5월)',
              sub: '동절기 30%',
              color: 'var(--color-accent)',
              border: 'rgba(6,182,212,.12)',
            },
            {
              label: '사고장소 1위',
              val: '51%',
              title: '계류장',
              sub: '항만 29% · 연안 17%',
              color: 'var(--color-accent)',
              border: 'rgba(6,182,212,.12)',
            },
            {
              label: '오염원 1위',
              val: '49%',
              title: '케미컬운반선',
              sub: '육상시설 32%',
              color: 'var(--color-accent)',
              border: 'rgba(6,182,212,.12)',
            },
            {
              label: '사고원인 1위',
              val: '45%',
              title: '승무원 과실',
              sub: '화물 22% · 외적원인 17%',
              color: 'var(--color-accent)',
              border: 'rgba(6,182,212,.12)',
            },
            {
              label: '사고물질 1위',
              val: '12%',
              title: '자일렌류',
              sub: '옥탄올·라텍스·팜유 순',
              color: 'var(--color-accent)',
              border: 'rgba(6,182,212,.12)',
            },
          ].map((item) => (
            <div
              key={item.label}
              style={{
                padding: '10px',
                background: 'var(--bg-base)',
                border: `1px solid ${item.border}`,
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  marginBottom: '4px',
                }}
              >
                {item.label}
              </div>
              <div
                className="font-mono"
                style={{ fontSize: 'var(--font-size-title-1)', fontWeight: 800, color: item.color }}
              >
                {item.val}
              </div>
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                {item.title}
              </div>
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  marginTop: '2px',
                }}
              >
                {item.sub}
              </div>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-2 gap-3">
          {/* 유출량 분포 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '6px',
              }}
            >
              📈 유출량 분포 (76건)
            </div>
            <div
              className="flex flex-col gap-[3px]"
              style={{ fontSize: 'var(--font-size-caption)' }}
            >
              {[
                {
                  range: '0~50L',
                  width: '36%',
                  gradient: 'var(--color-accent)',
                  count: '27건',
                  color: 'var(--fg-default)',
                },
                {
                  range: '1K~10KL',
                  width: '20%',
                  gradient: 'var(--color-accent)',
                  count: '15건',
                  color: 'var(--fg-default)',
                },
                {
                  range: '101~500L',
                  width: '13%',
                  gradient: 'var(--color-accent)',
                  count: '10건',
                  color: 'var(--fg-default)',
                },
                {
                  range: '100만L+',
                  width: '12%',
                  gradient: 'var(--color-accent)',
                  count: '9건',
                  color: 'var(--color-accent)',
                  rangeColor: 'var(--color-accent)',
                },
              ].map((bar) => (
                <div key={bar.range} className="flex items-center gap-[6px]">
                  <div
                    style={{
                      width: '60px',
                      color: (bar as { rangeColor?: string }).rangeColor ?? 'var(--fg-disabled)',
                    }}
                  >
                    {bar.range}
                  </div>
                  <div
                    style={{
                      flex: 1,
                      height: '14px',
                      background: 'var(--bg-base)',
                      borderRadius: '3px',
                      overflow: 'hidden',
                    }}
                  >
                    <div
                      style={{
                        width: bar.width,
                        height: '100%',
                        background: bar.gradient,
                        borderRadius: '3px',
                      }}
                    />
                  </div>
                  <span
                    style={{
                      color: bar.color,
                      fontWeight: 600,
                      width: '32px',
                      textAlign: 'right',
                    }}
                  >
                    {bar.count}
                  </span>
                </div>
              ))}
            </div>
            <div
              style={{
                marginTop: '4px',
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
              }}
            >
              ※ 소형(50L이하)과 대형(100만L+) 양극화 → 차별화된 대응 필요
            </div>
          </div>

          {/* HATS 표준코드 체계 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '6px',
              }}
            >
              🏷 HATS 표준코드 10개 항목
            </div>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(5,1fr)',
                gap: '3px',
                fontSize: 'var(--font-size-caption)',
                textAlign: 'center',
              }}
            >
              {[
                { label: '1.오염원', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '2.위치·일시', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '3.기상환경', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '4.사고유형', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '5.유출물질', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '6.대응', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '7.피해복구', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '8.사고원인', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '9.피해상황', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
                { label: '10.영향', color: 'var(--color-accent)', bg: 'rgba(6,182,212,.06)' },
              ].map((item) => (
                <div
                  key={item.label}
                  style={{
                    padding: '5px 2px',
                    background: item.bg,
                    borderRadius: '3px',
                    color: item.color,
                    fontWeight: 600,
                  }}
                >
                  {item.label}
                </div>
              ))}
            </div>
            <div
              style={{
                marginTop: '6px',
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.5,
              }}
            >
              해상 특수성 반영(GPS 좌표, 선박종류, 해상기상, 파고, 유출물질 CAS번호·SEBC 거동분류).{' '}
              <b style={{ color: 'var(--color-accent)' }}>WING 사고이력 모듈</b>과 표준코드 연동
              설계.
            </div>
          </div>
        </div>
      </div>

      {/* 국내외 사고관리시스템 비교 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-label-1)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '10px',
          }}
        >
          🌐 국내외 HNS/화학 사고관리시스템 비교
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              fontSize: 'var(--font-size-caption)',
            }}
          >
            <thead>
              <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'left',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  항목
                </th>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  eMARS (EU)
                </th>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  PSID (미국)
                </th>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  RISCAD (일본)
                </th>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  CSC (한국)
                </th>
                <th
                  style={{
                    padding: '6px 8px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                    fontWeight: 800,
                  }}
                >
                  WING (개발중)
                </th>
              </tr>
            </thead>
            <tbody>
              {[
                {
                  label: '운영기관',
                  eu: 'EC',
                  us: 'CCPS',
                  jp: 'JST·AIST',
                  kr: '화학물질안전원',
                  wing: '해양경찰청',
                },
                {
                  label: '대상',
                  eu: '중대화학사고',
                  us: '공정사고',
                  jp: '화학사고',
                  kr: '화학사고',
                  wing: '해상 HNS',
                },
                {
                  label: '초점',
                  eu: '산업시설',
                  us: '산업시설',
                  jp: '사고원인·산업',
                  kr: '사고물질',
                  wing: '해역·선박·확산',
                },
                { label: '형태', eu: '웹DB', us: '앱CD', jp: '웹', kr: '앱', wing: '웹+GIS 통합' },
                {
                  label: '해상 특화',
                  eu: '△',
                  us: '✕',
                  jp: '✕',
                  kr: '△',
                  wing: '◎',
                  wingColor: 'var(--color-accent)',
                },
              ].map((row, i) => (
                <tr
                  key={row.label}
                  style={{ borderBottom: i < 4 ? '1px solid rgba(255,255,255,.04)' : undefined }}
                >
                  <td style={{ padding: '5px 8px', color: 'var(--fg-disabled)' }}>{row.label}</td>
                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.eu}</td>
                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.us}</td>
                  <td style={{ textAlign: 'center', color: 'var(--fg-sub)' }}>{row.jp}</td>
                  <td
                    style={{
                      textAlign: 'center',
                      color: i === 4 ? 'var(--color-accent)' : 'var(--fg-sub)',
                    }}
                  >
                    {row.kr}
                  </td>
                  <td
                    style={{
                      textAlign: 'center',
                      color: (row as { wingColor?: string }).wingColor ?? 'var(--color-accent)',
                      fontWeight: 600,
                    }}
                  >
                    {row.wing}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div
          style={{
            marginTop: '8px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-disabled)',
          }}
        >
          ※ WING은 HATS 표준코드 + CAMEO/ALOHA + WRF-Chem + ROMS를 통합한 해상 특화 위기대응 시스템
        </div>
      </div>

      {/* WING 적용 시사점 */}
      <div className={`${card} ${cardBg}`}>
        <div className="flex items-center gap-2 mb-[10px]">
          <span
            style={{
              fontSize: 'var(--font-size-label-1)',
              fontWeight: 700,
              color: 'var(--color-accent)',
            }}
          >
            💡 논문 시사점 → WING 시스템 반영
          </span>
        </div>
        <div className="grid grid-cols-5 gap-2" style={{ fontSize: 'var(--font-size-caption)' }}>
          {[
            {
              icon: '🔗',
              title: '통합정보시스템',
              sub: 'CARIS·CAMEO·기상·GIS 통합 → 사고 대응 의사결정 지원',
              style: {},
            },
            {
              icon: '🏭',
              title: '항만별 특화 대응',
              sub: '울산·여수·대산 등 고위험 항만 맞춤 시나리오 사전 구축',
              style: {},
            },
            {
              icon: '📡',
              title: '실시간 모니터링',
              sub: 'HNS 블랙박스 + 대기확산 예측 + 위험구역 자동 설정',
              style: {},
            },
            {
              icon: '🤝',
              title: '통합지휘 지원',
              sub: '미국 ICS 모델 참조 — 다기관 협업 정보공유 플랫폼',
              style: {},
            },
            {
              icon: '📊',
              title: 'HATS 사고이력',
              sub: '표준코드 DB 연동 → 동일해역·물질 과거사고 즉시 조회',
              style: {
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.15)',
              },
              titleColor: 'var(--color-accent)',
            },
          ].map((item) => (
            <div
              key={item.title}
              style={{
                padding: '10px',
                background: 'var(--bg-card)',
                border: '1px solid var(--stroke-default)',
                borderRadius: '6px',
                textAlign: 'center',
                ...item.style,
              }}
            >
              <div style={{ fontSize: 'var(--font-size-title-2)', marginBottom: '4px' }}>
                {item.icon}
              </div>
              <div
                style={{
                  fontWeight: 700,
                  color: (item as { titleColor?: string }).titleColor ?? 'var(--fg-default)',
                  marginBottom: '3px',
                }}
              >
                {item.title}
              </div>
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  lineHeight: 1.5,
                }}
              >
                {item.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function GaussianModelPanel() {
  return (
    <>
      <div className="grid grid-cols-2 gap-4 mb-4">
        {/* 가우시안 플룸 모델 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center gap-2 mb-3">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              🌀
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                Gaussian Plume Model
              </div>
              <div
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                연속 방출 (Continuous Release)
              </div>
            </div>
          </div>
          <div
            style={{
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '8px',
              padding: '14px',
              marginBottom: '12px',
            }}
            className="font-mono"
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
                fontWeight: 600,
              }}
            >
              📌 농도 산출식 (Concentration Equation)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--color-accent)',
                lineHeight: 2,
                letterSpacing: '.3px',
              }}
            >
              C(x,y,z) = <span style={{ color: 'var(--color-accent)' }}>Q</span> / (2π ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>{' '}
              · <span style={{ color: 'var(--color-accent)' }}>u</span>)
              <br />× exp(-y² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>
              ²)
              <br />× [exp(-(z-H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²) + exp(-(z+H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²)]
            </div>
          </div>
          <div
            className="grid grid-cols-2 gap-[6px]"
            style={{ fontSize: 'var(--font-size-caption)' }}
          >
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                Q
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 배출률 (g/s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                u
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 풍속 (m/s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>y</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 수평 확산계수</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>z</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 연직 확산계수</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
                gridColumn: 'span 2',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                H
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>
                = 유효 방출고도 (m) — 물리적 높이 + 부력 상승 보정
              </span>
            </div>
          </div>
          <div
            style={{
              marginTop: '10px',
              padding: '8px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.6,
            }}
          >
            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 정상 상태 연속 배출, 균일
            풍속, 평탄 지형. 해양 HNS 사고에서 탱크 파손으로 인한 지속적 누출 시나리오에 적합.
          </div>
        </div>

        {/* 가우시안 퍼프 모델 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center gap-2 mb-3">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              💨
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                Gaussian Puff Model
              </div>
              <div
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                순간 방출 (Instantaneous Release)
              </div>
            </div>
          </div>
          <div
            style={{
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '8px',
              padding: '14px',
              marginBottom: '12px',
            }}
            className="font-mono"
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
                fontWeight: 600,
              }}
            >
              📌 농도 산출식 (Puff Concentration)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                color: 'var(--color-accent)',
                lineHeight: 2,
                letterSpacing: '.3px',
              }}
            >
              C(x,y,z,t) = <span style={{ color: 'var(--color-accent)' }}>M</span> / [(2π)
              <sup>3/2</sup> ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>x</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>{' '}
              ·{' '}
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ]
              <br />× exp(-(x-<span style={{ color: 'var(--color-accent)' }}>u</span>t)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>x</sub>
              </span>
              ²)
              <br />× exp(-y² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>y</sub>
              </span>
              ²)
              <br />× [exp(-(z-H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²) + exp(-(z+H)² / 2
              <span style={{ color: 'var(--color-accent)' }}>
                σ<sub>z</sub>
              </span>
              ²)]
            </div>
          </div>
          <div
            className="grid grid-cols-2 gap-[6px]"
            style={{ fontSize: 'var(--font-size-caption)' }}
          >
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                M
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 총 배출량 (g)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                t
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>= 경과시간 (s)</span>
            </div>
            <div
              style={{
                padding: '6px 8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '4px',
                gridColumn: 'span 2',
              }}
            >
              <span className="font-mono" style={{ color: 'var(--color-accent)', fontWeight: 700 }}>
                σ<sub>x</sub>
              </span>{' '}
              <span style={{ color: 'var(--fg-disabled)' }}>
                = 풍하방향 확산계수 — Plume에서는 u에 의해 이미 반영
              </span>
            </div>
          </div>
          <div
            style={{
              marginTop: '10px',
              padding: '8px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.6,
            }}
          >
            💡 <b style={{ color: 'var(--color-accent)' }}>적용 조건:</b> 순간적 대량 방출,
            폭발·탱크 파열. 해양 사고 중 LPG/LNG 탱크 파열, 수소 연료선 폭발 시나리오에 적합.
          </div>
        </div>
      </div>

      {/* Pasquill-Gifford 확산 계수 테이블 */}
      <div className={`${cardBg} rounded-[10px] p-4 mb-4`}>
        <div className="flex items-center justify-between mb-[14px]">
          <div
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--fg-default)',
            }}
          >
            📊 Pasquill-Gifford 대기안정도 분류 및 확산계수
          </div>
          <div
            className="font-mono"
            style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}
          >
            σ<sub>y</sub> = a·x<sup>b</sup> , σ<sub>z</sub> = c·x<sup>d</sup> + f
          </div>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              fontSize: 'var(--font-size-caption)',
            }}
          >
            <thead>
              <tr style={{ background: 'rgba(6,182,212,.08)' }}>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'left',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                    fontWeight: 700,
                  }}
                >
                  안정도
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  분류
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--fg-sub)',
                  }}
                >
                  기상 조건
                </th>
                <th
                  className="font-mono"
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  σ<sub>y</sub> 계수 (a, b)
                </th>
                <th
                  className="font-mono"
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  σ<sub>z</sub> 계수 (c, d, f)
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  풍속 범위
                </th>
                <th
                  style={{
                    padding: '8px 10px',
                    textAlign: 'center',
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  해양 적용성
                </th>
              </tr>
            </thead>
            <tbody>
              {[
                {
                  grade: 'A',
                  class: '매우 불안정',
                  cond: '맑은 날 강한 일사',
                  sy: '0.3658, 0.9024',
                  sz: '0.192, 0.936, 0',
                  wind: '< 2 m/s',
                  ocean: {
                    label: '드물게',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'B',
                  class: '불안정',
                  cond: '맑은 날 약한 일사',
                  sy: '0.2751, 0.9031',
                  sz: '0.156, 0.922, 0',
                  wind: '2–3 m/s',
                  ocean: {
                    label: '드물게',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'C',
                  class: '약간 불안정',
                  cond: '흐린 날 주간',
                  sy: '0.2090, 0.9031',
                  sz: '0.116, 0.905, 0',
                  wind: '3–5 m/s',
                  ocean: {
                    label: '적합',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'D ★',
                  class: '중립',
                  cond: '흐린 날 / 해상풍',
                  sy: '0.1471, 0.9031',
                  sz: '0.079, 0.881, 0',
                  wind: '5–6 m/s',
                  ocean: {
                    label: '★ 해양 대표',
                    bg: 'rgba(6,182,212,.15)',
                    color: 'var(--color-accent)',
                    fontWeight: 700,
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: 'rgba(6,182,212,.03)',
                },
                {
                  grade: 'E',
                  class: '약간 안정',
                  cond: '야간 약한 바람',
                  sy: '0.1046, 0.9031',
                  sz: '0.064, 0.871, 0',
                  wind: '3–5 m/s',
                  ocean: {
                    label: '적합',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
                {
                  grade: 'F',
                  class: '안정',
                  cond: '야간 맑은 하늘',
                  sy: '0.0722, 0.9031',
                  sz: '0.051, 0.814, 0',
                  wind: '< 3 m/s',
                  ocean: {
                    label: '위험↑',
                    bg: 'rgba(6,182,212,.12)',
                    color: 'var(--color-accent)',
                  },
                  gradeColor: 'var(--color-accent)',
                  rowBg: undefined,
                },
              ].map((row, idx) => (
                <tr
                  key={row.grade}
                  style={{
                    borderBottom: idx < 5 ? '1px solid rgba(255,255,255,.04)' : undefined,
                    background: row.rowBg,
                  }}
                >
                  <td style={{ padding: '7px 10px', fontWeight: 700, color: row.gradeColor }}>
                    {row.grade}
                  </td>
                  <td
                    style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-default)' }}
                  >
                    {row.class}
                  </td>
                  <td style={{ padding: '7px 10px', textAlign: 'center', color: 'var(--fg-sub)' }}>
                    {row.cond}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.sy}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.sz}
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      padding: '7px 10px',
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                    }}
                  >
                    {row.wind}
                  </td>
                  <td style={{ padding: '7px 10px', textAlign: 'center' }}>
                    <span
                      style={{
                        padding: '2px 6px',
                        borderRadius: '4px',
                        background: row.ocean.bg,
                        color: row.ocean.color,
                        fontSize: 'var(--font-size-caption)',
                        fontWeight: (row.ocean as { fontWeight?: number }).fontWeight ?? 600,
                      }}
                    >
                      {row.ocean.label}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div
          style={{
            marginTop: '10px',
            padding: '8px 10px',
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.1)',
            borderRadius: '6px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-sub)',
            lineHeight: 1.6,
          }}
        >
          ★ 해양 환경에서는 <b style={{ color: 'var(--color-accent)' }}>D 등급(중립)</b>이 가장
          빈번하게 나타남. 해풍·육풍 전환 시 일시적으로 A~C 등급 출현 가능. F 등급(안정)은 농도가
          국지적으로 높게 유지되어 <b style={{ color: 'var(--color-accent)' }}>위험도 상승</b>.
        </div>
      </div>

      {/* 플룸 vs 퍼프 비교 */}
      <div className={`${cardBg} rounded-[10px] p-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '14px',
          }}
        >
          ⚖ Plume vs Puff — 모델 선택 기준
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div
            style={{
              padding: '12px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              🌀 Plume (연속 배출) 선택 기준
            </div>
            <div
              className="flex flex-col gap-[5px]"
              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
            >
              {[
                '유출 지속시간 > 10분',
                '탱크 균열/배관 파손 — 지속적 누출',
                '풍속 > 1.5 m/s (정상류 가정 가능)',
                '톨루엔, 벤젠, 자일렌 등 증발성 액체',
                '암모니아 냉동 저장탱크 누출',
              ].map((item) => (
                <div key={item} className="flex items-center gap-[5px]">
                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                </div>
              ))}
            </div>
          </div>
          <div
            style={{
              padding: '12px',
              background: 'rgba(6,182,212,.04)',
              border: '1px solid rgba(6,182,212,.15)',
              borderRadius: '8px',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              💨 Puff (순간 배출) 선택 기준
            </div>
            <div
              className="flex flex-col gap-[5px]"
              style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-sub)' }}
            >
              {[
                '유출 지속시간 < 10분',
                '탱크 폭발/BLEVE — 순간 방출',
                '풍향 변동이 큰 경우 (여러 퍼프 중첩)',
                'LPG, 수소, LNG 탱크 파열',
                '컨테이너 화학물질 돌발 유출',
              ].map((item) => (
                <div key={item} className="flex items-center gap-[5px]">
                  <span style={{ color: 'var(--color-accent)' }}>✓</span> {item}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function SubstanceScenarioPanel() {
  return (
    <>
      <div className="grid grid-cols-2 gap-4 mb-4">
        {/* 암모니아 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧪</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                암모니아 (NH₃)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              독성 ★★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-33°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.682', label: '비중', color: 'var(--color-accent)' },
              { val: '300 ppm', label: 'IDLH', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 해수면 유출 시 <b style={{ color: 'var(--color-accent)' }}>급속 기화</b> → Flash
              Evaporation
            </div>
            <div>
              • 2D 기화율:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                ṁ = 0.0168t − 0.01
              </span>
            </div>
            <div>
              • 3D 기화율:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                ṁ = 0.0182t − 0.0112
              </span>
            </div>
            <div>
              • 독성 구름 풍하측 <b style={{ color: 'var(--color-accent)' }}>최대 10km</b>까지 영향
            </div>
          </div>
        </div>

        {/* 메탄올 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🧫</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                메탄올 (CH₃OH)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              인화성+독성
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '64.7°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.791', label: '비중', color: 'var(--color-accent)' },
              { val: '6,000 ppm', label: 'IDLH', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 수용성 → 해수 용해 + 증발 <b style={{ color: 'var(--color-accent)' }}>복합 거동</b>
            </div>
            <div>
              • 인화점{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                11°C
              </span>{' '}
              → 상온에서 증기 인화 위험
            </div>
            <div>
              • 무색·무취 → <b style={{ color: 'var(--color-accent)' }}>감지 어려움</b>, 계측기 필수
            </div>
            <div>
              • LFL~UFL:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                6.0% ~ 36.5%
              </span>
            </div>
          </div>
        </div>

        {/* 수소 */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>⚡</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                수소 (H₂)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              폭발성 ★★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-253°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.071', label: '비중', color: 'var(--color-accent)' },
              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 공기보다 <b style={{ color: 'var(--color-accent)' }}>14배 가벼움</b> → 급속 상승
              확산
            </div>
            <div>
              • LFL~UFL:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                4.0% ~ 75.0%
              </span>{' '}
              (극넓은 가연범위)
            </div>
            <div>
              • 점화에너지{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                0.017 mJ
              </span>{' '}
              (정전기로도 폭발)
            </div>
            <div>
              • Puff 모델 필수 → <b style={{ color: 'var(--color-accent)' }}>BLEVE/VCE</b> 시나리오
            </div>
          </div>
        </div>

        {/* LNG */}
        <div className={`${cardBg} rounded-[10px] p-4`}>
          <div className="flex items-center justify-between mb-[10px]">
            <div className="flex items-center gap-2">
              <span style={{ fontSize: 'var(--font-size-title-1)' }}>🔵</span>
              <span
                style={{
                  fontSize: 'var(--font-size-title-3)',
                  fontWeight: 700,
                  color: 'var(--fg-default)',
                }}
              >
                LNG (CH₄)
              </span>
            </div>
            <span
              style={{
                padding: '3px 8px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.12)',
                color: 'var(--color-accent)',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
              }}
            >
              인화성 ★★
            </span>
          </div>
          <div className="grid grid-cols-3 gap-[6px] mb-[10px]">
            {[
              { val: '-162°C', label: '비등점', color: 'var(--color-accent)' },
              { val: '0.450', label: '비중', color: 'var(--color-accent)' },
              { val: 'N/A', label: 'IDLH(질식)', color: 'var(--color-accent)' },
            ].map((item) => (
              <div
                key={item.label}
                style={{
                  padding: '6px',
                  background: 'var(--bg-base)',
                  borderRadius: '4px',
                  textAlign: 'center',
                }}
              >
                <div
                  className="font-mono"
                  style={{
                    fontSize: 'var(--font-size-title-3)',
                    fontWeight: 700,
                    color: item.color,
                  }}
                >
                  {item.val}
                </div>
                <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
          <div
            style={{
              fontSize: 'var(--font-size-caption)',
              color: 'var(--fg-sub)',
              lineHeight: 1.7,
            }}
          >
            <div>
              • 극저온 유출 시 <b style={{ color: 'var(--color-accent)' }}>RPT</b>(Rapid Phase
              Transition) 발생
            </div>
            <div>
              • 해수면 Pool 형성 → 기화율{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                0.025t
              </span>
            </div>
            <div>
              • 가연범위:{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                5.0% ~ 15.0%
              </span>
            </div>
            <div>
              • 초기 냉각 증기 → <b style={{ color: 'var(--color-accent)' }}>지표면 체류</b> 후 상승
            </div>
          </div>
        </div>
      </div>

      {/* 물질별 AEGL 비교표 */}
      <div className={`${cardBg} rounded-[10px] p-4`}>
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '12px',
          }}
        >
          📊 물질별 AEGL/ERPG 기준 비교 (ppm, 1시간 노출)
        </div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5,1fr)',
            gap: '8px',
            fontSize: 'var(--font-size-caption)',
          }}
        >
          {/* 헤더 */}
          <div
            style={{
              padding: '8px',
              background: 'var(--bg-base)',
              borderRadius: '6px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '4px',
              }}
            >
              기준
            </div>
            <div style={{ fontWeight: 700, color: 'var(--fg-default)' }}>등급</div>
          </div>
          {[
            { icon: '🧪', label: 'NH₃', color: 'var(--color-accent)' },
            { icon: '🧫', label: 'MeOH', color: 'var(--color-accent)' },
            { icon: '⚡', label: 'H₂', color: 'var(--color-accent)' },
            { icon: '🔵', label: 'LNG', color: 'var(--color-accent)' },
          ].map((item) => (
            <div
              key={item.label}
              style={{
                padding: '8px',
                background: 'var(--bg-base)',
                borderRadius: '6px',
                textAlign: 'center',
              }}
            >
              <div
                style={{
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--fg-disabled)',
                  marginBottom: '4px',
                }}
              >
                {item.icon}
              </div>
              <div style={{ fontWeight: 700, color: item.color }}>{item.label}</div>
            </div>
          ))}
          {/* AEGL-1 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-1
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            30
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            670
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* AEGL-2 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-2
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            160
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            2,100
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* AEGL-3 */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            AEGL-3
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            1,100
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            14,000
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--fg-disabled)',
            }}
            className="font-mono"
          >
            N/A
          </div>
          {/* LFL */}
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.06)',
              borderRadius: '4px',
              textAlign: 'center',
              fontWeight: 600,
              color: 'var(--color-accent)',
            }}
          >
            LFL (%)
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            15.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            6.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
              color: 'var(--color-accent)',
              fontWeight: 600,
            }}
            className="font-mono"
          >
            4.0
          </div>
          <div
            style={{
              padding: '6px',
              background: 'rgba(6,182,212,.04)',
              borderRadius: '4px',
              textAlign: 'center',
            }}
            className="font-mono"
          >
            5.0
          </div>
        </div>
        <div
          style={{
            marginTop: '8px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-disabled)',
          }}
        >
          ※ H₂, LNG는 독성이 아닌 질식/인화성 위험으로 AEGL 대신 LFL/UFL, 과압(kPa) 기준 적용
        </div>
      </div>
    </>
  );
}

/* ═══ Panel 3: 해양환경 보정 ═══ */
function OceanCorrectionPanel() {
  return (
    <div className="grid grid-cols-2 gap-4 mb-4">
      {/* 해양 보정 인자 */}
      <div className={`${card} ${cardBg} p-4`}>
        <div style={labelStyle('var(--color-accent)')}>🌊 해양환경 특수 보정 인자</div>
        <div className="flex flex-col gap-2.5">
          {/* 해풍·육풍 순환 보정 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해풍·육풍 순환 보정</span>
              <span style={tag('var(--color-accent)')}>핵심 인자</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해안에서는 주간(해풍)·야간(육풍) 풍향 전환 발생. 기존 가우시안 모델은 정상 풍향을
              가정하므로, <b style={{ color: 'var(--color-accent)' }}>풍향 전환 시점</b>에서 플룸
              방향 급변을 반영해야 함.
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                θ(t) = θ₀ + Δθ · sigmoid((t - t<sub>shift</sub>)/τ)
              </span>
            </div>
          </div>
          {/* 해수면 거칠기 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해수면 거칠기 (z₀) 보정</span>
              <span style={tag('var(--color-accent)')}>중요</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해수면은 육상 대비 표면 거칠기가 매우 낮음 (
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                z₀ ≈ 0.0002 m
              </span>{' '}
              vs 도시 0.5~2.0 m). Charnock 관계식 적용:
              <br />
              <span
                className="font-mono"
                style={{ fontSize: 'var(--font-size-caption)', color: 'var(--color-accent)' }}
              >
                z₀ = α<sub>c</sub> · u*² / g (α<sub>c</sub> ≈ 0.011~0.018)
              </span>
            </div>
          </div>
          {/* SST 영향 */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해수면 온도(SST) 영향</span>
              <span style={tag('var(--color-accent)')}>보조</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해수면 온도가 기온보다 높으면 열적 불안정 촉진 → 수직 혼합 증가 → 지표 농도 감소.
              반대로 SST &lt; T<sub>air</sub>이면 안정층 형성으로{' '}
              <b style={{ color: 'var(--color-accent)' }}>농도 체류↑</b>.
            </div>
          </div>
          {/* MABL */}
          <div
            className="p-2.5 bg-bg-base rounded-md"
            style={{ border: '1px solid rgba(6,182,212,.15)' }}
          >
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-label-2 font-bold text-fg">해상 대기경계층(MABL) 구조</span>
              <span style={tag('var(--color-accent)')}>중요</span>
            </div>
            <div className="text-caption text-fg-sub leading-[1.7]">
              해양 대기경계층은 육상과 구조가 상이. 혼합고{' '}
              <span className="font-mono" style={{ color: 'var(--color-accent)' }}>
                300~800 m
              </span>
              (육상 1~2 km)으로 낮아 확산이 억제될 수 있음. Fumigation 발생 시{' '}
              <b style={{ color: 'var(--color-accent)' }}>지표 농도 급상승</b>.
            </div>
          </div>
        </div>
      </div>

      {/* 보정 계수 시각화 */}
      <div className="flex flex-col gap-4">
        <div className={`${card} ${cardBg} p-4`}>
          <div style={labelStyle('var(--color-accent)')}>
            📈 확산계수 보정 비교 (σ<sub>y</sub> at 1km)
          </div>
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">P-G 원본</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '60%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                68 m
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">해양 보정</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '82%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                92 m
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-caption text-fg-disabled min-w-[70px]">ALOHA</span>
              <div className="flex-1 h-5 bg-bg-base rounded overflow-hidden relative">
                <div
                  className="h-full rounded"
                  style={{
                    width: '72%',
                    background: 'var(--color-accent)',
                  }}
                />
              </div>
              <span
                className="font-mono text-caption min-w-[50px] text-right"
                style={{ color: 'var(--color-accent)' }}
              >
                78 m
              </span>
            </div>
          </div>
          <div className="mt-2 text-caption text-fg-disabled">
            ※ D등급(중립), 풍속 5 m/s, 풍하거리 1 km 기준
          </div>
        </div>

        <div className={`${card} ${cardBg} p-4`}>
          <div style={labelStyle('var(--color-accent)')}>🔬 ALOHA vs 이문진박사모델 비교</div>
          <div className="grid grid-cols-2 gap-2 text-caption">
            <div className="p-2 bg-bg-base rounded-md">
              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
                ALOHA (EPA)
              </div>
              <div className="text-fg-sub leading-[1.6]">
                • 가우시안 플룸 기본
                <br />
                • 평탄 지형 가정
                <br />
                • 표면 거칠기 고정값
                <br />
                • 해양 특성 미반영
                <br />• 1차원 풍향 고정
              </div>
            </div>
            <div
              className="p-2 rounded-md"
              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.1)' }}
            >
              <div className="font-bold mb-1" style={{ color: 'var(--color-accent)' }}>
                이문진박사모델 (해양 보정)
              </div>
              <div className="text-fg-sub leading-[1.6]">
                • 가우시안 + 해양 보정
                <br />
                • 해안 지형 효과 반영
                <br />
                • Charnock z₀ 동적 계산
                <br />
                • 해풍/육풍 전환 반영
                <br />• MABL 혼합고 가변
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ═══ Panel 4: 모델 검증 ═══ */
function VerificationPanel() {
  return (
    <div className="grid gap-4 mb-4" style={{ gridTemplateColumns: '2fr 1fr' }}>
      {/* 검증 결과 테이블 */}
      <div className={`${card} ${cardBg} p-4`}>
        <div style={labelStyle('var(--color-accent)')}>
          ✅ 모델 검증 결과 — 실측 데이터 대비 정확도
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-caption" style={{ borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                <th
                  className="p-2 text-left"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  검증 항목
                </th>
                <th
                  className="p-2 text-center"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  ALOHA
                </th>
                <th
                  className="p-2 text-center"
                  style={{
                    borderBottom: '2px solid var(--stroke-light)',
                    color: 'var(--color-accent)',
                  }}
                >
                  이문진박사모델
                </th>
                <th
                  className="p-2 text-center"
                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
                >
                  실측값
                </th>
                <th
                  className="p-2 text-center"
                  style={{ borderBottom: '2px solid var(--stroke-light)', color: 'var(--fg-sub)' }}
                >
                  오차율
                </th>
              </tr>
            </thead>
            <tbody>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">NH₃ 최대 도달거리 (AEGL-2)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  8.2 km
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  7.1 km
                </td>
                <td className="p-2 text-center font-mono text-fg">6.8 km</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +20.6%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +4.4%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">풍하 1km 지점 농도 (ppm)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  245
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  198
                </td>
                <td className="p-2 text-center font-mono text-fg">187</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +31.0%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +5.9%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">MeOH 증기 확산 면적 (km²)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  4.8
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  3.6
                </td>
                <td className="p-2 text-center font-mono text-fg">3.4</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +41.2%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +5.9%
                  </span>
                </td>
              </tr>
              <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                <td className="p-2 text-fg">H₂ 가연성 구름 반경 (m)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  280
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  235
                </td>
                <td className="p-2 text-center font-mono text-fg">220</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +27.3%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +6.8%
                  </span>
                </td>
              </tr>
              <tr>
                <td className="p-2 text-fg">LNG Pool 확산 직경 (m)</td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  165
                </td>
                <td className="p-2 text-center font-mono" style={{ color: 'var(--color-accent)' }}>
                  142
                </td>
                <td className="p-2 text-center font-mono text-fg">138</td>
                <td className="p-2 text-center">
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +19.6%
                  </span>
                  {' / '}
                  <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                    +2.9%
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
        >
          <b style={{ color: 'var(--color-accent)' }}>결론:</b> ALOHA는 해양 환경에서{' '}
          <b style={{ color: 'var(--color-accent)' }}>평균 20~40% 과대 예측</b> 경향.
          이문진박사모델은 해양 보정 인자 적용으로{' '}
          <b style={{ color: 'var(--color-accent)' }}>평균 오차 ±5~7%</b>로 대폭 개선. 특히 풍하 1km
          이내 근거리 농도 예측 정확도가 현저히 향상됨.
        </div>
      </div>

      {/* 참고문헌 + 시스템 적용 */}
      <div className="flex flex-col gap-3">
        <div className={`${card} ${cardBg} p-4`}>
          <div className="text-label-1 font-bold text-fg mb-2.5">📚 참고 문헌</div>
          <div className="flex flex-col gap-2 text-caption text-fg-sub leading-[1.6]">
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              이문진 외, "해양 HNS 사고 시 대기확산 예측을 위한 가우시안 모델의 해양환경 보정에 관한
              연구", 한국해양환경·에너지학회지, 2014
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              이문진 외, "친환경 선박연료 해양 유출 시 대기확산 특성 연구 — 암모니아 기화율 모델링",
              KIOST, 2023
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              EPA, "ALOHA User's Manual", 2024
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              Pasquill, F., "The Estimation of the Dispersion of Windborne Material", Meteorological
              Magazine, 1961
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              Charnock, H., "Wind stress on a water surface", Q.J.R. Meteorol. Soc., 1955
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              유영현, "HNS 재난사고에 대한 해양경찰의 대응 방안", 한국위기관리논집, 9(11), pp.77-92,
              2013
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              해양경찰청, "HNS 사고 국가 대비 대응 체제 선진화 방안 연구용역 최종보고서", 2011
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              김창겸·이문진 외, "해양산업시설 배출 위험유해물질(HNS)의 해양확산 수치모의",
              한국해양환경·안전학회지, 30(s4), pp.42-51, 2024
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              장하용·이문진 외, "신속한 의사결정을 위한 HNS 사고이력관리시스템 설계 및 구현",
              한국해양환경·안전학회지, 23(2), pp.168-176, 2017
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              박경애·이진호·박재진·김태성·이문진, "인공위성 원격탐사 기반 AI 활용 위험·유해물질(HNS)
              탐지 기술 개발", 한국해양환경·에너지학회 추계학술대회, pp.125-126, 2025 — HNS의
              열적외선 스펙트럼 수집·분석, Sentinel-2 광학위성 영상에 AI 기법을 적용하여 HNS
              탐지·분류, 스펙트럼 기반 분석 방법과 비교 검증. 해양수산부 지원(RS-2023-00254781)
            </div>
            <div
              className="p-2 bg-bg-base rounded"
              style={{ borderLeft: '3px solid var(--color-accent)' }}
            >
              오진덕·김주영·이득재·김용명·최훈·이문진, "다항목 HNS 데이터의 실시간 취득 및 AI를
              활용한 결측값 실시간 처리 기술 개발", 한국해양과학기술협의회 공동학술대회, pp.85-86,
              2024 — LSTM(Long Short-Term Memory) 순환 신경망으로 HNS 시계열 데이터의 결측값을
              예측·보정하는 방법 연구, 다양한 모의 자료로 성능 비교·검증. 해양수산부
              지원(RS-2021-KS211535)
            </div>
          </div>
        </div>
        <div
          className="rounded-[10px] p-[14px]"
          style={{
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.2)',
          }}
        >
          <div className="text-label-2 font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            💡 시스템 적용 방안
          </div>
          <div className="text-caption text-fg-sub leading-[1.7]">
            WING 시스템은 기본 ALOHA 엔진 위에{' '}
            <b style={{ color: 'var(--color-accent)' }}>이문진박사모델 해양 보정 모듈</b>을 레이어로
            적용하여 두 모델의 결과를 동시에 제공합니다. 사용자는 보수적 예측(ALOHA)과 정밀
            예측(이문진박사모델)을 비교하여 의사결정할 수 있습니다.
          </div>
        </div>
      </div>
    </div>
  );
}

/* ═══ Panel 5: 실시간 비교 ═══ */
function RealtimeComparePanel() {
  return (
    <div className={`${card} ${cardBg} p-4 mb-4`}>
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-3.5">
        <div className="text-label-1 font-bold text-fg">⚡ 실시간 모델 비교 시뮬레이션</div>
        <div className="flex gap-1.5">
          <button
            className="px-4 py-1.5 rounded-md text-caption font-bold cursor-pointer text-white"
            style={{
              background: 'var(--color-accent)',
              border: 'none',
            }}
          >
            ▶ 비교 실행
          </button>
          <button
            className="px-3 py-1.5 rounded-md text-caption font-semibold cursor-pointer text-fg-sub bg-bg-card"
            style={{ border: '1px solid var(--stroke-default)' }}
          >
            ⚙ 파라미터
          </button>
        </div>
      </div>

      {/* 입력 필드 */}
      <div className="grid grid-cols-6 gap-2 mb-3.5">
        <div>
          <label className="text-caption text-fg-disabled block mb-1">물질</label>
          <select
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
            style={{ border: '1px solid var(--stroke-default)' }}
          >
            <option>암모니아</option>
            <option>메탄올</option>
            <option>수소</option>
            <option>LNG</option>
            <option>톨루엔</option>
          </select>
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">유출량 (kL)</label>
          <input
            type="number"
            defaultValue={12.0}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">풍속 (m/s)</label>
          <input
            type="number"
            defaultValue={5.2}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">안정도</label>
          <select
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none"
            style={{ border: '1px solid var(--stroke-default)' }}
          >
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
          </select>
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">기온 (°C)</label>
          <input
            type="number"
            defaultValue={8.5}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
        <div>
          <label className="text-caption text-fg-disabled block mb-1">SST (°C)</label>
          <input
            type="number"
            defaultValue={12.3}
            readOnly
            className="px-2 py-1.5 text-caption w-full bg-bg-base text-fg rounded-md outline-none font-mono box-border"
            style={{ border: '1px solid var(--stroke-default)' }}
          />
        </div>
      </div>

      {/* 결과 카드 */}
      <div className="grid grid-cols-3 gap-3">
        {/* ALOHA */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            ALOHA (EPA)
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            3.8 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                12.3 km²
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">최대농도</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                520 ppm
              </span>
            </div>
          </div>
        </div>
        {/* 이문진박사모델 */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            이문진박사모델 (해양보정)
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            2.9 <span style={{ fontSize: 'var(--font-size-label-1)' }}>km</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">AEGL-2 도달거리</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                8.4 km²
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">최대농도</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                410 ppm
              </span>
            </div>
          </div>
        </div>
        {/* 차이 분석 */}
        <div
          className="p-3.5 rounded-lg text-center"
          style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.2)' }}
        >
          <div className="text-caption font-bold mb-2" style={{ color: 'var(--color-accent)' }}>
            차이 분석
          </div>
          <div
            className="font-bold font-mono"
            style={{ fontSize: 'var(--font-size-heading-2)', color: 'var(--color-accent)' }}
          >
            -23.7<span style={{ fontSize: 'var(--font-size-label-1)' }}>%</span>
          </div>
          <div className="text-caption text-fg-disabled mt-0.5">도달거리 감소율</div>
          <div className="mt-2 grid grid-cols-2 gap-1 text-caption">
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">면적차</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                -31.7%
              </span>
            </div>
            <div className="p-1 bg-bg-base rounded">
              <span className="text-fg-disabled">농도차</span>
              <br />
              <span className="font-bold font-mono" style={{ color: 'var(--color-accent)' }}>
                -21.2%
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* 결과 설명 */}
      <div
        className="mt-3 p-2.5 text-caption text-fg-sub leading-[1.7] rounded-md"
        style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
      >
        ⚡ <b style={{ color: 'var(--color-accent)' }}>실시간 비교 결과:</b> 해양 환경에서 ALOHA의
        과대 예측 경향이 확인됩니다. 이문진박사모델은 해수면 거칠기(z₀), MABL 높이, SST-기온 차이를
        반영하여 보다 현실적인 확산 범위를 산출합니다.{' '}
        <b>
          대피 구역 설정 시 ALOHA 결과를 보수적 기준으로, 이문진박사모델을 현실적 기준으로 병행 활용
        </b>
        을 권장합니다.
      </div>
    </div>
  );
}

/* ═══ 패널 6: WRF-Chem·발전 ═══ */

function WrfChemPanel() {
  return (
    <>
      {/* WRF-Chem 모델 상세 */}
      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
        <div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
          <div
            style={{
              width: '32px',
              height: '32px',
              borderRadius: '8px',
              background: 'rgba(6,182,212,.15)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 'var(--font-size-title-2)',
            }}
          >
            🌐
          </div>
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-title-3)',
                fontWeight: 700,
                color: 'var(--fg-default)',
              }}
            >
              WRF-Chem 모델 상세
            </div>
            <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
              Weather Research and Forecasting model coupled with Chemistry
            </div>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3.5">
          {/* 구성 요소 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              구성 요소
            </div>
            <div className="flex flex-col gap-1.5">
              {/* WRF */}
              <div
                style={{
                  padding: '10px',
                  background: 'var(--bg-base)',
                  border: '1px solid rgba(6,182,212,.15)',
                  borderRadius: '6px',
                }}
              >
                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
                  <span
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      fontWeight: 700,
                      color: 'var(--color-accent)',
                    }}
                  >
                    WRF (기상)
                  </span>
                  <span
                    className="font-mono"
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      padding: '2px 6px',
                      borderRadius: '3px',
                      background: 'rgba(6,182,212,.1)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    v4.x
                  </span>
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.6,
                  }}
                >
                  비정수압(non-hydrostatic) 중규모 기상 모델. 3차원 바람장, 기온, 습도, 대기경계층
                  구조를 역학적으로 계산. 중첩 도메인(nesting)으로 해상도 1km까지 구현 가능.
                </div>
              </div>
              {/* Chem */}
              <div
                style={{
                  padding: '10px',
                  background: 'var(--bg-base)',
                  border: '1px solid rgba(6,182,212,.15)',
                  borderRadius: '6px',
                }}
              >
                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
                  <span
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      fontWeight: 700,
                      color: 'var(--color-accent)',
                    }}
                  >
                    Chem (화학)
                  </span>
                  <span
                    className="font-mono"
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      padding: '2px 6px',
                      borderRadius: '3px',
                      background: 'rgba(6,182,212,.1)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    Online
                  </span>
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.6,
                  }}
                >
                  기상 모델과 동일한 시간 스텝에서 화학종의 이류(advection), 난류확산(diffusion),
                  건·습침적(deposition), 화학반응을 동시에 계산. Offline 방식 대비 정확도 향상.
                </div>
              </div>
              {/* 결합 효과 */}
              <div
                style={{
                  padding: '10px',
                  background: 'var(--bg-base)',
                  border: '1px solid rgba(6,182,212,.15)',
                  borderRadius: '6px',
                }}
              >
                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
                  <span
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      fontWeight: 700,
                      color: 'var(--color-accent)',
                    }}
                  >
                    결합 효과
                  </span>
                  <span
                    className="font-mono"
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      padding: '2px 6px',
                      borderRadius: '3px',
                      background: 'rgba(6,182,212,.1)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    Feedback
                  </span>
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.6,
                  }}
                >
                  화학물질의 복사 효과가 기상장에 되먹임(feedback). 예: 대량의 에어로졸 방출 시
                  일사량 변화 → 대기안정도 변화 → 확산 패턴 변화.
                </div>
              </div>
            </div>
          </div>

          {/* HNS 사고 적용 시 장점 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              HNS 사고 적용 시 장점
            </div>
            <div className="flex flex-col gap-1.5">
              {[
                {
                  num: '1',
                  text: (
                    <>
                      <b style={{ color: 'var(--fg-default)' }}>3D 확산 모의:</b> 연직 방향 확산까지
                      포함한 정밀 농도장 계산. 고층 대기로의 확산과 fumigation 효과 반영
                    </>
                  ),
                },
                {
                  num: '2',
                  text: (
                    <>
                      <b style={{ color: 'var(--fg-default)' }}>비정상류 대응:</b> 풍향
                      전환(해풍↔육풍), 돌풍, 전선 통과 등 시변 기상 조건을 실시간 반영
                    </>
                  ),
                },
                {
                  num: '3',
                  text: (
                    <>
                      <b style={{ color: 'var(--fg-default)' }}>복잡 지형 반영:</b> 해안 절벽, 항만
                      구조물, 인접 도시의 건물 효과를 지형 데이터로 반영
                    </>
                  ),
                },
                {
                  num: '4',
                  text: (
                    <>
                      <b style={{ color: 'var(--fg-default)' }}>장기 모의:</b> 24~72시간 예측으로
                      사고 수습 계획 및 장기 피해 평가 지원
                    </>
                  ),
                },
              ].map(({ num, text }) => (
                <div
                  key={num}
                  className="flex gap-2"
                  style={{ padding: '8px', background: 'var(--bg-base)', borderRadius: '6px' }}
                >
                  <div
                    className="font-mono flex items-center justify-center flex-shrink-0"
                    style={{
                      width: '24px',
                      height: '24px',
                      borderRadius: '50%',
                      background: 'rgba(6,182,212,.15)',
                      fontSize: 'var(--font-size-caption)',
                      fontWeight: 800,
                      color: 'var(--color-accent)',
                    }}
                  >
                    {num}
                  </div>
                  <div
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      color: 'var(--fg-sub)',
                      lineHeight: 1.5,
                    }}
                  >
                    {text}
                  </div>
                </div>
              ))}
            </div>
            <div
              style={{
                marginTop: '10px',
                padding: '8px',
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
                borderRadius: '6px',
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.5,
              }}
            >
              ⚠ <b style={{ color: 'var(--color-accent)' }}>계산 비용:</b> WRF-Chem은 가우시안 모델
              대비 계산 시간이 <b>100~1,000배</b> 소요. 초기 대응에는 가우시안 모델, 정밀 분석에는
              WRF-Chem으로 <b style={{ color: 'var(--color-accent)' }}>이중 운용</b> 전략 적용.
            </div>
          </div>
        </div>
      </div>

      {/* ROMS 해양확산 수치모의 검증 */}
      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
        <div className="flex items-center justify-between" style={{ marginBottom: '14px' }}>
          <div className="flex items-center gap-2">
            <div
              style={{
                width: '28px',
                height: '28px',
                borderRadius: '6px',
                background: 'rgba(6,182,212,.15)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 'var(--font-size-title-3)',
              }}
            >
              🌊
            </div>
            <div>
              <div
                style={{
                  fontSize: 'var(--font-size-title-4)',
                  fontWeight: 700,
                  color: 'var(--color-accent)',
                }}
              >
                ROMS 해양확산 수치모의 검증 결과
              </div>
              <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
                김창겸·이문진 외 (2024), 한국해양환경·안전학회지 Vol.30
              </div>
            </div>
          </div>
          <span
            style={{
              padding: '3px 10px',
              borderRadius: '6px',
              background: 'rgba(6,182,212,.1)',
              border: '1px solid rgba(6,182,212,.2)',
              fontSize: 'var(--font-size-caption)',
              color: 'var(--color-accent)',
              fontWeight: 700,
            }}
          >
            정확도 75~96%
          </span>
        </div>

        <div className="grid grid-cols-2 gap-3.5">
          {/* Nesting 격자 구성 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              📐 Nesting 격자 구성
            </div>
            <table
              style={{
                width: '100%',
                borderCollapse: 'collapse',
                fontSize: 'var(--font-size-caption)',
              }}
            >
              <thead>
                <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'left',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    영역
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    격자크기
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    시간간격
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    수직층
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
                    광역 (일본·대만 포함)
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
                  >
                    0.05°
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    5분
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }} rowSpan={3}>
                    20층
                  </td>
                </tr>
                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '4px 6px', color: 'var(--fg-default)' }}>
                    중간역 (한반도 해역)
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
                  >
                    0.01°
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    1분
                  </td>
                </tr>
                <tr style={{ background: 'rgba(6,182,212,.03)' }}>
                  <td
                    style={{
                      padding: '4px 6px',
                      color: 'var(--color-accent)',
                      fontWeight: 600,
                    }}
                  >
                    상세역 (5개 우심지역)
                  </td>
                  <td
                    className="font-mono"
                    style={{
                      textAlign: 'center',
                      color: 'var(--color-accent)',
                      fontWeight: 600,
                    }}
                  >
                    0.002°(≈200m)
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    12초
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              style={{
                marginTop: '8px',
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '6px',
              }}
            >
              🔗 입력 데이터
            </div>
            <div
              className="grid grid-cols-2 gap-1"
              style={{ fontSize: 'var(--font-size-caption)' }}
            >
              <div
                style={{
                  padding: '4px 6px',
                  background: 'var(--bg-base)',
                  borderRadius: '3px',
                }}
              >
                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>ERA5</span>{' '}
                <span style={{ color: 'var(--fg-disabled)' }}>기상(기압·풍속·기온)</span>
              </div>
              <div
                style={{
                  padding: '4px 6px',
                  background: 'var(--bg-base)',
                  borderRadius: '3px',
                }}
              >
                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>HYCOM</span>{' '}
                <span style={{ color: 'var(--fg-disabled)' }}>수온·염분·유속</span>
              </div>
              <div
                style={{
                  padding: '4px 6px',
                  background: 'var(--bg-base)',
                  borderRadius: '3px',
                }}
              >
                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>TPXO9</span>{' '}
                <span style={{ color: 'var(--fg-disabled)' }}>조위 15개 분조</span>
              </div>
              <div
                style={{
                  padding: '4px 6px',
                  background: 'var(--bg-base)',
                  borderRadius: '3px',
                }}
              >
                <span style={{ color: 'var(--color-accent)', fontWeight: 600 }}>WAMIS</span>{' '}
                <span style={{ color: 'var(--fg-disabled)' }}>5대강 일별유량</span>
              </div>
            </div>
          </div>

          {/* 관측-모델 비교 */}
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-label-2)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '8px',
              }}
            >
              ✅ 페놀 관측-모델 비교 (인천·평택·대산)
            </div>
            <table
              style={{
                width: '100%',
                borderCollapse: 'collapse',
                fontSize: 'var(--font-size-caption)',
              }}
            >
              <thead>
                <tr style={{ background: 'rgba(6,182,212,.06)' }}>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'left',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    관측점
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    관측(mg/L)
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--fg-sub)',
                    }}
                  >
                    모델(mg/L)
                  </th>
                  <th
                    style={{
                      padding: '5px 6px',
                      textAlign: 'center',
                      borderBottom: '2px solid var(--stroke-light)',
                      color: 'var(--color-accent)',
                    }}
                  >
                    정확도
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC01(인천)</td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0160
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0167
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
                  >
                    95.32%
                  </td>
                </tr>
                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>IC03(인천)</td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0240
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0256
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 600 }}
                  >
                    93.45%
                  </td>
                </tr>
                <tr style={{ borderBottom: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>PT01(평택)</td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0215
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0235
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
                  >
                    90.55%
                  </td>
                </tr>
                <tr
                  style={{
                    borderBottom: '1px solid rgba(255,255,255,.04)',
                    background: 'rgba(6,182,212,.02)',
                  }}
                >
                  <td style={{ padding: '3px 6px', color: 'var(--color-accent)' }}>PT02(평택)</td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0200
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0249
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
                  >
                    75.57%
                  </td>
                </tr>
                <tr
                  style={{
                    borderBottom: '1px solid rgba(255,255,255,.04)',
                    background: 'rgba(6,182,212,.03)',
                  }}
                >
                  <td
                    style={{
                      padding: '3px 6px',
                      color: 'var(--color-accent)',
                      fontWeight: 600,
                    }}
                  >
                    DS01(대산)
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0040
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0042
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)', fontWeight: 700 }}
                  >
                    95.88%
                  </td>
                </tr>
                <tr>
                  <td style={{ padding: '3px 6px', color: 'var(--fg-default)' }}>DS03(대산)</td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0130
                  </td>
                  <td className="font-mono" style={{ textAlign: 'center' }}>
                    0.0145
                  </td>
                  <td
                    className="font-mono"
                    style={{ textAlign: 'center', color: 'var(--color-accent)' }}
                  >
                    88.60%
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              style={{
                marginTop: '6px',
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
              }}
            >
              ※ 현장조사: 2023.06.27~28 / 전체 10개 관측점 모두 모델 범위 내 관측값 위치
            </div>
          </div>
        </div>

        {/* 페놀 거동 특성 + 최대 농도 */}
        <div className="grid grid-cols-3 gap-2.5" style={{ marginTop: '14px' }}>
          <div
            style={{
              padding: '10px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '4px',
              }}
            >
              인천 표층 최대농도
            </div>
            <div
              className="font-mono"
              style={{
                fontSize: 'var(--font-size-title-1)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              0.1089<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
            </div>
          </div>
          <div
            style={{
              padding: '10px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '4px',
              }}
            >
              인천 저층 최대농도
            </div>
            <div
              className="font-mono"
              style={{
                fontSize: 'var(--font-size-title-1)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              0.3822<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--color-accent)',
                fontWeight: 600,
                marginTop: '2px',
              }}
            >
              표층 대비 3.5배 ↑
            </div>
          </div>
          <div
            style={{
              padding: '10px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '6px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '4px',
              }}
            >
              평택·대산 저층 최대
            </div>
            <div
              className="font-mono"
              style={{
                fontSize: 'var(--font-size-title-1)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              0.1916<span style={{ fontSize: 'var(--font-size-caption)' }}> mg/L</span>
            </div>
          </div>
        </div>
        <div
          style={{
            marginTop: '10px',
            padding: '8px 10px',
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.1)',
            borderRadius: '6px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-sub)',
            lineHeight: 1.6,
          }}
        >
          <b style={{ color: 'var(--color-accent)' }}>핵심 발견:</b> 페놀은 Sinker 특성으로{' '}
          <b style={{ color: 'var(--color-accent)' }}>저층에서 농도 축적</b>이 두드러짐 → 표층
          모니터링만으로는 불충분,{' '}
          <b style={{ color: 'var(--color-accent)' }}>저층까지 포함한 3D 모니터링 필수</b>. 기존
          입자추적 방식의 장기 모의·농도 계산 한계를 ROMS 농도확산모델이 해결. Opendrift(노르웨이
          기상청)와 Cedre(프랑스) 실험 결과로 HNS 거동특성 검증 완료.
        </div>
      </div>

      {/* 지역별 해양산업시설 현황 */}
      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
        <div
          style={{
            fontSize: 'var(--font-size-label-1)',
            fontWeight: 700,
            color: 'var(--color-accent)',
            marginBottom: '10px',
          }}
        >
          🏭 지역별 해양산업시설 폐수 방류 현황 (10년 평균)
        </div>
        <div
          className="grid gap-1 text-center"
          style={{
            gridTemplateColumns: 'repeat(7, 1fr)',
            fontSize: 'var(--font-size-caption)',
          }}
        >
          {[
            {
              name: '울산',
              vol: '414,620',
              sites: '1,037개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--color-accent)',
              bg: 'rgba(6,182,212,.06)',
              nameColor: 'var(--color-accent)',
            },
            {
              name: '여수',
              vol: '124,890',
              sites: '382개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.04)',
              nameColor: 'var(--color-accent)',
            },
            {
              name: '인천',
              vol: '91,658',
              sites: '3,073개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.04)',
              nameColor: 'var(--color-accent)',
            },
            {
              name: '광양',
              vol: '86,395',
              sites: '253개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.03)',
              nameColor: 'var(--fg-sub)',
            },
            {
              name: '평택',
              vol: '85,475',
              sites: '781개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.03)',
              nameColor: 'var(--fg-sub)',
            },
            {
              name: '대산',
              vol: '65,101',
              sites: '246개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.03)',
              nameColor: 'var(--fg-sub)',
            },
            {
              name: '부산',
              vol: '38,292',
              sites: '469개소',
              volColor: 'var(--fg-default)',
              sitesColor: 'var(--fg-disabled)',
              bg: 'rgba(6,182,212,.03)',
              nameColor: 'var(--fg-sub)',
            },
          ].map(({ name, vol, sites, volColor, sitesColor, bg, nameColor }) => (
            <div key={name} style={{ padding: '6px', background: bg, borderRadius: '4px' }}>
              <div style={{ fontWeight: 700, color: nameColor }}>{name}</div>
              <div
                className="font-mono"
                style={{ color: volColor, fontSize: 'var(--font-size-caption)', marginTop: '2px' }}
              >
                {vol}
              </div>
              <div style={{ color: 'var(--fg-disabled)' }}>m³/일</div>
              <div
                className="font-mono"
                style={{
                  color: sitesColor,
                  fontSize: 'var(--font-size-caption)',
                  marginTop: '1px',
                }}
              >
                {sites}
              </div>
            </div>
          ))}
        </div>
        <div
          style={{
            marginTop: '8px',
            fontSize: 'var(--font-size-caption)',
            color: 'var(--fg-disabled)',
          }}
        >
          ※ 1종 사업장(2,000m³/일 이상) 하루 평균 페놀 배출량: 21.847 kg — 총 882개소 합계 31.851
          kg/일 (KOSIS·NICS 2021)
        </div>
      </div>

      {/* 한계 및 발전 방향 */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        {/* 현재 한계점 */}
        <div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
          <div
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--color-accent)',
              marginBottom: '12px',
            }}
          >
            ⚠ 현재 한계점
          </div>
          <div className="flex flex-col gap-2">
            {[
              {
                title: '입자 추적 방식의 한계',
                body: (
                  <>
                    기존 라그랑지안 입자 추적 방식은{' '}
                    <b style={{ color: 'var(--color-accent)' }}>장기간 모의가 어렵고</b> 정확한 농도
                    계산에 한계가 있음. 입자 수가 부족하면 통계적 노이즈 발생, 과다하면 계산량 폭증.
                  </>
                ),
              },
              {
                title: '대용량 데이터 전송',
                body: (
                  <>
                    외부 DB(기상청, 해양예보 등) 연동 시{' '}
                    <b style={{ color: 'var(--color-accent)' }}>대용량 데이터의 실시간 전송</b>에
                    대한 신속성 확보 과제. 특히 WRF-Chem 입력 데이터는 수십 GB 규모.
                  </>
                ),
              },
              {
                title: '물질 다양성',
                body: (
                  <>
                    HNS 6,000+ 종 전체에 대한{' '}
                    <b style={{ color: 'var(--color-accent)' }}>물리화학 거동 DB 부족</b>. 많은
                    물질이 실험 데이터가 없어 유사 물질의 추정치를 사용하고 있음.
                  </>
                ),
              },
              {
                title: '해양 환경 특수성',
                body: (
                  <>
                    해수 온도에 따른 증발률 변화, 파랑에 의한 스프레이 효과, 선박 구조물에 의한 Wake
                    난류 등 <b style={{ color: 'var(--color-accent)' }}>해양 고유 현상 반영 미흡</b>
                    .
                  </>
                ),
              },
            ].map(({ title, body }) => (
              <div
                key={title}
                style={{
                  padding: '10px',
                  background: 'rgba(6,182,212,.03)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '6px',
                }}
              >
                <div
                  style={{
                    fontSize: 'var(--font-size-label-2)',
                    fontWeight: 700,
                    color: 'var(--fg-default)',
                    marginBottom: '4px',
                  }}
                >
                  {title}
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.6,
                  }}
                >
                  {body}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 발전 방향 */}
        <div className={`${cardBg} rounded-[10px]`} style={{ padding: '16px' }}>
          <div
            style={{
              fontSize: 'var(--font-size-title-4)',
              fontWeight: 700,
              color: 'var(--color-accent)',
              marginBottom: '12px',
            }}
          >
            🚀 발전 방향
          </div>
          <div className="flex flex-col gap-2">
            {[
              {
                title: 'ROMS 해양 수치모델 도입',
                badge: {
                  text: '✅ 검증완료',
                  bg: 'rgba(6,182,212,.15)',
                  color: 'var(--color-accent)',
                },
                body: (
                  <>
                    김창겸·이문진 외(2024) 연구에서{' '}
                    <b style={{ color: 'var(--color-accent)' }}>
                      ROMS 기반 페놀 해양확산 수치모의 검증 완료
                    </b>
                    . Nesting 기법(광역 0.05°→중간역 0.01°→상세역 0.002°/약200m)으로 5개
                    집중우심지역(인천·평택·대산·여수·울산) 고해상도 구축.
                    <br />
                    경계조건:{' '}
                    <span style={{ color: 'var(--color-accent)' }}>
                      ERA5(기상) + HYCOM(해양) + TPXO9(조위 15개분조)
                    </span>
                    . 한국 5대강 + 중국 황하·양쯔강 하천유입 반영.
                    <br />
                    <b style={{ color: 'var(--color-accent)' }}>
                      현장검증 정확도: 75.57%(PT02) ~ 95.88%(DS01)
                    </b>{' '}
                    — 10개 관측점 전체에서 모델 최대·최소값 범위 내 관측값 위치 확인.
                  </>
                ),
              },
              {
                title: 'AI/ML 기반 신속 예측',
                badge: {
                  text: '연구중',
                  bg: 'rgba(6,182,212,.1)',
                  color: 'var(--color-accent)',
                },
                body: (
                  <>
                    WRF-Chem 시뮬레이션 결과를 학습한{' '}
                    <b style={{ color: 'var(--color-accent)' }}>서로게이트 모델(Surrogate Model)</b>
                    로 수초 내 근사 예측. 초기 대응 시간 단축과 정확도를 동시 확보.
                  </>
                ),
              },
              {
                title: '실시간 데이터 파이프라인',
                badge: { text: '개발중', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
                body: (
                  <>
                    <b style={{ color: 'var(--color-accent)' }}>조화상수 DB</b> 기반 빠른 예측 +
                    스트리밍 기상 데이터 파이프라인 구축. 외부 DB 연동 시 데이터 압축·캐싱으로 전송
                    병목 해소.
                  </>
                ),
              },
              {
                title: 'HNS 블랙박스 시스템 고도화',
                badge: { text: '목표', bg: 'rgba(6,182,212,.1)', color: 'var(--color-accent)' },
                body: (
                  <>
                    사고 자동 감지 → 물질 자동 식별 → 확산 예측 → 대피 명령까지{' '}
                    <b style={{ color: 'var(--color-accent)' }}>전 과정 자동화</b>. 센서 네트워크 +
                    AI 물질 식별 + 가우시안/WRF-Chem 이중 엔진으로 구성.
                  </>
                ),
              },
            ].map(({ title, badge, body }) => (
              <div
                key={title}
                style={{
                  padding: '10px',
                  background: 'rgba(6,182,212,.03)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '6px',
                }}
              >
                <div className="flex items-center justify-between" style={{ marginBottom: '4px' }}>
                  <span
                    style={{
                      fontSize: 'var(--font-size-label-2)',
                      fontWeight: 700,
                      color: 'var(--fg-default)',
                    }}
                  >
                    {title}
                  </span>
                  <span
                    style={{
                      fontSize: 'var(--font-size-caption)',
                      padding: '2px 6px',
                      borderRadius: '3px',
                      background: badge.bg,
                      color: badge.color,
                      fontWeight: 600,
                    }}
                  >
                    {badge.text}
                  </span>
                </div>
                <div
                  style={{
                    fontSize: 'var(--font-size-caption)',
                    color: 'var(--fg-sub)',
                    lineHeight: 1.6,
                  }}
                >
                  {body}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 관련 국내 논문 */}
      <div className={`${card} ${cardBg} p-4`} style={{ padding: '16px' }}>
        <div className="flex items-center gap-2" style={{ marginBottom: '14px' }}>
          <div
            style={{
              width: '28px',
              height: '28px',
              borderRadius: '6px',
              background: 'rgba(6,182,212,.15)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 'var(--font-size-title-3)',
            }}
          >
            📚
          </div>
          <div>
            <div
              style={{
                fontSize: 'var(--font-size-title-4)',
                fontWeight: 700,
                color: 'var(--color-accent)',
              }}
            >
              HNS 대기확산·위해성 평가 관련 국내 논문
            </div>
            <div style={{ fontSize: 'var(--font-size-caption)', color: 'var(--fg-disabled)' }}>
              위해성 관리 · 초동대응 · 사회경제 민감자원 · 플랫폼 개발 · 재난관리 체제
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-2.5">
          {/* 논문 ① */}
          <div
            style={{
              padding: '12px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '8px',
              borderLeft: '3px solid var(--color-accent)',
            }}
          >
            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
              <div className="flex items-center gap-1.5">
                <span
                  className="font-mono flex items-center justify-center"
                  style={{
                    width: '20px',
                    height: '20px',
                    borderRadius: '50%',
                    background: 'rgba(6,182,212,.15)',
                    fontSize: 'var(--font-size-caption)',
                    fontWeight: 800,
                    color: 'var(--color-accent)',
                  }}
                >
                  ①
                </span>
                <span
                  style={{
                    fontSize: 'var(--font-size-label-2)',
                    fontWeight: 700,
                    color: 'var(--fg-default)',
                  }}
                >
                  해상 위험·유해물질(HNS) 관리 우선순위 선정에 관한 연구
                </span>
              </div>
              <span
                style={{
                  padding: '2px 8px',
                  borderRadius: '4px',
                  background: 'rgba(6,182,212,.08)',
                  border: '1px solid rgba(6,182,212,.15)',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                  fontWeight: 600,
                  whiteSpace: 'nowrap',
                }}
              >
                KRISO
              </span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
              }}
            >
              김영윤·김태원·손민호·오상우·이문진 — 해양환경안전학회지 Vol.21 No.6, pp.672-678, 2015
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.6,
              }}
            >
              EURAM/CRS-KOREA II 기반 위해성 스크리닝 시스템 개발.{' '}
              <b style={{ color: 'var(--color-accent)' }}>Risk = Toxicity × Exposure</b>{' '}
              프레임워크로 585종 유해액체물질 평가. 인체위해성(급성·만성·발암·기타독성)과
              수생태위해성을 해상운송량·잔류성(BCF)·인화점·증기압과 결합하여 점수화.{' '}
              <b style={{ color: 'var(--color-accent)' }}>상위 20종 우선관리물질</b>(Aniline,
              Acrylonitrile, Phenol, Coal tar 등) 도출. GESAMP 위해도 평가 기준 적용.
            </div>
            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                위해성 우선순위
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                585종 유해액체물질
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                GESAMP 기준
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                이문진 공저
              </span>
            </div>
          </div>

          {/* 논문 ② */}
          <div
            style={{
              padding: '12px',
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.12)',
              borderRadius: '8px',
              borderLeft: '3px solid var(--color-accent)',
            }}
          >
            <div className="flex items-start justify-between" style={{ marginBottom: '6px' }}>
              <div className="flex items-center gap-1.5">
                <span
                  className="font-mono flex items-center justify-center"
                  style={{
                    width: '20px',
                    height: '20px',
                    borderRadius: '50%',
                    background: 'rgba(6,182,212,.15)',
                    fontSize: 'var(--font-size-caption)',
                    fontWeight: 800,
                    color: 'var(--color-accent)',
                  }}
                >
                  ②
                </span>
                <span
                  style={{
                    fontSize: 'var(--font-size-label-2)',
                    fontWeight: 700,
                    color: 'var(--fg-default)',
                  }}
                >
                  해양 유류유출 오염으로 인한 사회·경제적 민감자원 선정 및 지수화 방안
                </span>
              </div>
              <span
                style={{
                  padding: '2px 8px',
                  borderRadius: '4px',
                  background: 'rgba(6,182,212,.08)',
                  border: '1px solid rgba(6,182,212,.15)',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                  fontWeight: 600,
                  whiteSpace: 'nowrap',
                }}
              >
                KEI
              </span>
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                marginBottom: '6px',
              }}
            >
              노영희·김충기 — 환경영향평가 Vol.25 No.6, pp.402-413, 2016
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-sub)',
                lineHeight: 1.6,
              }}
            >
              NOAA ESI 가이드라인 기반 한국형 사회·경제적 민감자원 분류체계 구축.{' '}
              <b style={{ color: 'var(--color-accent)' }}>
                수산물 획득·인구·토지이용·관리지역·문화유산/관광지
              </b>{' '}
              5개 지표를 각 100점 환산(총 500점) 통합지수 산출. 연안 74개 시군구 단위 공간분석.
              McLaughlin et al.(2002) 삼각도표, Fattal et al.(2010) SEv 공식 등 해외 지수화 기법
              비교. <b style={{ color: 'var(--color-accent)' }}>HNS 사고 시 피해 평가 프레임워크</b>
              로 확장 가능.
            </div>
            <div className="flex gap-1 flex-wrap" style={{ marginTop: '6px' }}>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                ESI 민감자원
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                통합지수 500점
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                74개 시군구
              </span>
              <span
                style={{
                  padding: '2px 6px',
                  background: 'rgba(6,182,212,.06)',
                  border: '1px solid rgba(6,182,212,.12)',
                  borderRadius: '3px',
                  fontSize: 'var(--font-size-caption)',
                  color: 'var(--color-accent)',
                }}
              >
                김충기 공저
              </span>
            </div>
          </div>

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

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

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

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

      {/* WING HNS 모델 로드맵 */}
      <div
        style={{
          background: 'rgba(6,182,212,.04)',
          border: '1px solid rgba(6,182,212,.2)',
          borderRadius: '10px',
          padding: '16px',
        }}
      >
        <div
          style={{
            fontSize: 'var(--font-size-title-4)',
            fontWeight: 700,
            color: 'var(--fg-default)',
            marginBottom: '14px',
          }}
        >
          📅 WING 시스템 HNS 모델 로드맵
        </div>
        <div className="flex items-stretch" style={{ gap: 0 }}>
          {/* Phase 1 */}
          <div
            style={{
              flex: 1,
              padding: '10px',
              background: 'rgba(6,182,212,.06)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '8px 0 0 8px',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '4px',
              }}
            >
              ✅ Phase 1 (완료)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 600,
                color: 'var(--fg-default)',
                marginBottom: '4px',
              }}
            >
              가우시안 모델
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                lineHeight: 1.5,
              }}
            >
              ALOHA + Lee 해양보정
              <br />
              6,000+종 HNS DB
              <br />
              AEGL/ERPG 기준 자동 적용
            </div>
          </div>

          <div
            style={{
              width: '2px',
              background: 'var(--color-accent)',
            }}
          />

          {/* Phase 2 */}
          <div
            style={{
              flex: 1,
              padding: '10px',
              background: 'rgba(6,182,212,.06)',
              border: '1px solid rgba(6,182,212,.2)',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '4px',
              }}
            >
              🔧 Phase 2 (진행중)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 600,
                color: 'var(--fg-default)',
                marginBottom: '4px',
              }}
            >
              WRF-Chem 연동
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                lineHeight: 1.5,
              }}
            >
              3D 확산 모의
              <br />
              비정상류 기상 반영
              <br />
              해양-대기 결합 모의
            </div>
          </div>

          <div
            style={{
              width: '2px',
              background: 'var(--color-accent)',
            }}
          />

          {/* Phase 3 */}
          <div
            style={{
              flex: 1,
              padding: '10px',
              background: 'rgba(6,182,212,.06)',
              border: '1px solid rgba(6,182,212,.2)',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '4px',
              }}
            >
              🔬 Phase 3 (계획)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 600,
                color: 'var(--fg-default)',
                marginBottom: '4px',
              }}
            >
              ROMS + AI 융합
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                lineHeight: 1.5,
              }}
            >
              해양 수치모델 결합
              <br />
              ML 서로게이트 모델
              <br />
              실시간 데이터 파이프라인
            </div>
          </div>

          <div
            style={{
              width: '2px',
              background: 'var(--color-accent)',
            }}
          />

          {/* Phase 4 */}
          <div
            style={{
              flex: 1,
              padding: '10px',
              background: 'rgba(6,182,212,.06)',
              border: '1px solid rgba(6,182,212,.2)',
              borderRadius: '0 8px 8px 0',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 700,
                color: 'var(--color-accent)',
                marginBottom: '4px',
              }}
            >
              🎯 Phase 4 (목표)
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                fontWeight: 600,
                color: 'var(--fg-default)',
                marginBottom: '4px',
              }}
            >
              자동 블랙박스
            </div>
            <div
              style={{
                fontSize: 'var(--font-size-caption)',
                color: 'var(--fg-disabled)',
                lineHeight: 1.5,
              }}
            >
              사고 자동감지→예측→대응
              <br />
              센서+AI 물질식별
              <br />전 과정 무인 자동화
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export function HNSTheoryView() {
  const [activePanel, setActivePanel] = useState(0);
  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 = 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: var(--font-korean); 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 className="flex flex-col flex-1 h-full overflow-hidden bg-bg-base">
      <div
        className="flex-1 overflow-y-auto scrollbar-thin p-5"
        style={{ scrollbarGutter: 'stable' }}
        ref={contentRef}
      >
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <div
              className="w-[42px] h-[42px] rounded-[10px] flex items-center justify-center text-heading-3"
              style={{
                background: 'rgba(6,182,212,.04)',
                border: '1px solid rgba(6,182,212,.3)',
              }}
            >
              📐
            </div>
            <div>
              <div className="text-title-2 font-bold text-fg">HNS 대기확산 모델 이론 및 검증</div>
              <div className="text-label-2 text-fg-disabled mt-0.5">
                WRF-Chem · Gaussian Plume/Puff · ROMS · 해양환경 보정 — Based on Lee Moon-Jin et al.
              </div>
            </div>
          </div>
          <button
            onClick={handleExportPDF}
            data-html2pdf-ignore
            className="px-3.5 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer text-color-accent"
            style={{
              border: '1px solid rgba(6,182,212,.3)',
              background: 'rgba(6,182,212,.08)',
            }}
          >
            📤 PDF 내보내기
          </button>
        </div>

        {/* 서브탭 */}
        <div className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-card border border-stroke">
          {theoryTabs.map((tab, i) => (
            <button
              key={i}
              onClick={() => setActivePanel(i)}
              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
                activePanel === i
                  ? 'border-stroke-light bg-bg-elevated text-fg'
                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
              }`}
            >
              {tab.icon} {tab.name}
            </button>
          ))}
        </div>

        {/* 패널 콘텐츠 */}
        {activePanel === 0 && <SystemOverviewPanel />}
        {activePanel === 1 && <GaussianModelPanel />}
        {activePanel === 2 && <SubstanceScenarioPanel />}
        {activePanel === 3 && <OceanCorrectionPanel />}
        {activePanel === 4 && <VerificationPanel />}
        {activePanel === 5 && <RealtimeComparePanel />}
        {activePanel === 6 && <WrfChemPanel />}
      </div>
    </div>
  );
}
