import { card, cardBg } from '../HNSTheoryView';

export 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>
    </>
  );
}
