import { useState } from 'react';

const panels = [
  { id: 0, icon: '🌐', label: '개요' },
  { id: 1, icon: '🛸', label: '탐지 장비' },
  { id: 2, icon: '🛰', label: '원격탐사' },
  { id: 3, icon: '🗺️', label: 'ESI 방제지도' },
  { id: 4, icon: '📏', label: '면적 산정' },
  { id: 5, icon: '🔗', label: '확산예측 연계' },
  { id: 6, icon: '📚', label: '논문·특허' },
];

// ═══ PANEL 0: 개요 ═══
function PanelOverview() {
  return (
    <div>
      {/* 개요 카드 */}
      <div className="rounded-xl p-5 mb-4 bg-bg-card border border-stroke">
        <div className="grid grid-cols-2 gap-5">
          <div>
            <div className="flex items-center gap-2 mb-2.5">
              <div
                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base bg-bg-elevated border border-stroke"
                // style={{ backgroundColor: 'var(--bg-base)' }}
              >
                📋
              </div>
              <span className="text-label-1 font-bold text-fg font-korean">항공탐색이란?</span>
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              해양 유류오염 발생 시{' '}
              <b style={{ color: 'var(--color-accent)' }}>드론·유인항공기·위성</b>을 활용하여
              유출유의 위치·면적·오염형태를 실시간으로 탐지하고, 방제정보지도(ESI)와 연계하여{' '}
              <b style={{ color: 'var(--color-accent)' }}>확산예측 모델의 검증·보정 입력자료</b>로
              활용하는 통합 탐색 체계입니다.
            </div>
          </div>
          <div>
            <div className="flex items-center gap-2 mb-2.5">
              <div
                className="w-[30px] h-[30px] rounded-lg flex items-center justify-center text-base  bg-bg-elevated border border-stroke"
                // style={{ background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)' }}
              >
                🎯
              </div>
              <span className="text-label-1 font-bold text-fg font-korean">WING 항공탐색 목적</span>
            </div>
            <div className="flex flex-col gap-[5px] text-caption text-fg-sub font-korean">
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>①</span>  */}
                유출유 <b>실시간 위치·면적</b> 파악 → 확산예측 초기조건 보정
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>②</span>{' '} */}
                <b>수온(SST) 위성자료</b> 실시간 수신 → 유출유 풍화모델 입력
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>③</span>{' '} */}
                <b>ESI 환경민감자원</b> 현장 확인 → 방제 우선순위 결정
              </div>
              <div className="px-[10px] py-[6px] rounded-[6px] bg-bg-base border border-stroke">
                {/* <span style={{ color: 'var(--color-fg)', fontWeight: 700 }}>④</span>  */}
                드론 <b>3D 재구성</b> → 선박 식별·오염원 정밀 분석
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 통합 흐름 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-4">
        <div className="text-label-2 font-bold text-fg font-korean mb-[14px]">
          ⚙️ 항공탐색 → 방제대응 통합 흐름
        </div>
        <div className="flex items-center justify-center gap-0 flex-wrap py-2">
          {[
            { title: '탐지 플랫폼', desc: '드론·항공기·위성' },
            { title: '센서 데이터', desc: '광학·IR·SAR·SST' },
            { title: '영상 처리', desc: '좌표변환·면적산정' },
            { title: '확산모델 입력', desc: '유출위치·유출량·SST' },
            { title: '방제 의사결정', desc: 'ESI 연계·자원 배치' },
          ].map((step, i) => (
            <div key={i} className="contents">
              {i > 0 && (
                <div className="flex items-center gap-0.5 text-fg-disabled">
                  <div className="w-4 h-[1px] bg-stroke-light" />
                  <span className="text-caption leading-none">▶</span>
                </div>
              )}
              <div className="px-4 py-3 rounded-lg text-center text-caption font-korean bg-bg-base border border-stroke">
                <div className="font-bold text-fg">{step.title}</div>
                <div className="text-fg-disabled">{step.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 플랫폼 3종 카드 */}
      <div className="grid grid-cols-3 gap-3">
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">드론 (UAV)</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            현장 즉시 투입·저고도 정밀 촬영. 광학·적외선 카메라 탑재, 실시간 영상 전송, 3D 재구성.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              고도: 30~500m · 속도: 15~25m/s
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              GSD: 1~5cm/px (100m 고도 기준)
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              운용반경: 5~30km · 체공: 30~90분
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">유인 항공기</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            광역 탐색·장시간 체공. 광학·IR·SAR·SLAR·UV 형광 센서 복합 탑재. 해경 해양오염 감시
            항공기.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              고도: 300~3,000m · 속도: 60~150m/s
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              탐색폭: 5~50km · 체공: 4~8시간
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              야간·악기상 SAR 탐지 가능
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">위성</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            광역·반복 관측. SST(NOAA AVHRR·NGSST)·SAR(Sentinel-1)·광학(KOMPSAT) 활용. 구름 문제
            존재.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              NGSST: 5km 해상도 · 일 1회 갱신
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              SAR: 5~25m 해상도 · 구름 무관
            </div>
            <div className="px-[7px] py-[3px] rounded-[3px] text-fg-sub bg-bg-base">
              KOMPSAT-5: X-band SAR 1m급
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 1: 탐지 장비 ═══
function PanelDetection() {
  return (
    <div>
      {/* 센서 비교표 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-3">
          🔬 유출유 탐지 센서 종류 및 특성 비교
        </div>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse font-korean text-caption">
            <thead>
              <tr className="bg-white/[0.03] border-b border-stroke-light">
                <th className="px-[10px] py-[7px] text-left text-fg-disabled font-semibold">
                  센서
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  파장대
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  탐지 원리
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  강점
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  한계
                </th>
                <th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
                  탑재 플랫폼
                </th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">광학(EO)</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">0.4~0.7μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  반사 휘도 차이
                  <br />
                  유막 광택·색조
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  고해상도
                  <br />
                  직관적 식별
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">야간·구름 불가</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">드론·항공기·위성</td>
              </tr>
              <tr className="border-b border-white/[0.04] bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">열적외선(IR)</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">8~14μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 열방사 차이
                  <br />
                  해수면 온도 대비
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간 탐지
                  <br />
                  두께 추정 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름 투과 불가
                  <br />
                  얇은 유막 한계
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  드론·항공기
                  <br />
                  NOAA AVHRR
                </td>
              </tr>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">SAR</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  1~10cm
                  <br />
                  (마이크로파)
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 표면장력 증가
                  <br />→ 브래그 후방산란 감소
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름·야간 무관
                  <br />
                  광역 탐지
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유사 픽처 오탐
                  <br />
                  고해상도 한계
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  위성(Sentinel-1
                  <br />
                  KOMPSAT-5)
                </td>
              </tr>
              <tr className="border-b border-white/[0.04] bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">SLAR/RAR</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">마이크로파</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  측방향 레이더
                  <br />
                  유막 감쇠대 탐지
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간·구름 무관
                  <br />
                  광역 감시선
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  항공기 탑재 전용
                  <br />
                  저해상도
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">해경 감시 항공기</td>
              </tr>
              <tr className="border-b border-white/[0.04]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">UV 형광</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">0.3~0.4μm</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  자외선 조사 → 기름
                  <br />
                  형광 방출
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  박막 유막(μm급)
                  <br />
                  탐지 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  야간 전용
                  <br />
                  주간 오탐 많음
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">항공기</td>
              </tr>
              <tr className="bg-white/[0.01]">
                <td className="px-[10px] py-[7px] font-bold text-fg-sub">마이크로파 복사계</td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  수cm
                  <br />
                  (수동형)
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  유막 방사율 변화
                  <br />
                  밝기온도 차이
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  구름 완전 투과
                  <br />
                  야간 가능
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  저해상도(50km)
                  <br />
                  NGSST 혼합 사용
                </td>
                <td className="px-[10px] py-[7px] text-center text-fg-sub">
                  AMSR-E 위성
                  <br />
                  (NGSST 융합)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* NGSST 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold font-korean mb-[10px]">
          🌡️ NGSST (New Generation SST) 위성 수온자료 — 특허 10-1567431 적용
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="text-caption text-fg-sub font-korean leading-[1.8]">
            일본 토호쿠대학 Kawamura 교수팀이 제공하는 북서태평양 광역 수온자료입니다.{' '}
            <b>열적외선(AVHRR·MODIS)</b>과 <b>마이크로파(AMSR-E)</b>를 융합하여 구름 유무와 관계없이
            일별 수온을 제공합니다.
            <div className="mt-2 bg-bg-base rounded-[6px] p-[10px] font-mono text-caption text-fg leading-[2]">
              SST(℃) = <span>0.15</span> × DN − <span>3.0</span>
              <br />
              <span className="text-fg-disabled">DN: 바이너리 파일 1byte 디지털 수치</span>
            </div>
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                영역
              </span>{' '}
              : 116~166°E, 13~63°N (북서태평양 50×50°)
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                해상도
              </span>{' '}
              : 3분(약 5km) · 격자 1000×1000
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                갱신
              </span>{' '}
              : 매일 12시 FTP 자동수신 · 최근 5일 합성
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                보간
              </span>{' '}
              : Akima(1978) 2차원 5차다항식 → 500m 격자 변환
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                WING 활용
              </span>{' '}
              : 유출유 증발·유상화·점도변화 모델 수온 입력
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 2: 원격탐사 ═══
function PanelRemoteSensing() {
  return (
    <div>
      {/* 헤더 카드 */}
      <div className="rounded-xl p-4 mb-[14px] bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold text-fg font-korean mb-[10px]">
          🛰️ 위성 원격탐사 — 유출유 탐지 원리
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          해양 유출유는 해수면에 유막을 형성하여 전자기파 반사·방출·산란 특성을 변화시킵니다. 이
          물리적 특성 변화를 위성·항공 센서로 감지하여 유막의 위치·범위·두께를 추정합니다.
        </div>
      </div>

      {/* 원리 4종 그리드 */}
      <div className="grid grid-cols-2 gap-3 mb-[14px]">
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">열적외선 방출 원리</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해수면 위 유막은 해수보다 <b style={{ color: 'var(--color-accent)' }}>방사율이 낮아</b>{' '}
            동일 온도에서도 적외선 방출량이 다릅니다. 파장 10~12μm 열적외선 밴드에서 유막과 주변
            해수의{' '}
            <b style={{ color: 'var(--color-accent)' }}>밝기온도(Brightness Temperature) 차이</b>로
            유막을 탐지합니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            ⚠️ 구름은 열적외선을 완전 차단 → 마이크로파 보조 필요 (NGSST 융합 이유)
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            SAR 브래그 산란 원리
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해수면 위 유막은 <b style={{ color: 'var(--color-accent)' }}>표면장력을 증가</b>시켜
            소파를 억제합니다. SAR에서 해수면 산란의 주원인인{' '}
            <b style={{ color: 'var(--color-accent)' }}>브래그(Bragg) 후방산란이 감소</b>하여 유막
            영역이 어둡게 나타납니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            활용: Sentinel-1(C-band) · KOMPSAT-5(X-band) · ALOS PALSAR(L-band)
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">UV 형광 탐지 원리</div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            석유계 탄화수소에 자외선(310~400nm)을 조사하면{' '}
            <b style={{ color: 'var(--color-accent)' }}>형광 발광</b>합니다. 주야간 모두 활용
            가능하나 야간 효과가 우수합니다. 수μm 수준의 매우 얇은 유막도 탐지 가능한 고감도
            센서입니다.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            적용: 해경 감시 항공기 야간 탐색 · 비정상 유출 신고 확인
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            마이크로파 복사계 원리
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            수동 마이크로파 복사계는 지구 방출 마이크로파를 수신합니다. 유막이 있으면{' '}
            <b style={{ color: 'var(--color-accent)' }}>방사율 변화</b>로 밝기온도가 달라집니다.
            파장이 길어 구름 완전 투과·야간 관측 가능.
          </div>
          <div className="bg-bg-base rounded-[5px] px-2 py-2 text-caption text-fg-disabled font-korean">
            해상도 한계(50km)로 단독 사용 불가 → 열적외선과 융합 (NGSST 방식)
          </div>
        </div>
      </div>

      {/* 전자해도 카드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div
          className="text-label-2 font-bold font-korean mb-[10px]"
          // style={{ color: 'var(--color-accent)' }}
        >
          🗺️ 전자해도(ENC) 수심자료 처리 — 특허 10-1567431 기반
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="text-caption text-fg-sub font-korean leading-[1.8]">
            항공탐색 좌표 데이터는 <b>전자해도(ENC) 수심격자</b>와 중첩되어 유출유의 수심환경,
            조간대 분포, 해안선 형태를 분석합니다. 수심자료는 국립해양조사원 전자해도 약 300종에서
            추출 후 <b>Akima 보간</b>으로 15초 등간격 격자에 정규화합니다.
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                원본
              </span>{' '}
              : ENC 전자해도 무작위 측심점
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                삼각망
              </span>{' '}
              : TIN(Triangulated Irregular Network) 구성
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                보간
              </span>{' '}
              : Akima 2차원 5차다항식 (21개 계수)
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
              }}
            >
              <span className="font-bold" style={{ color: 'var(--color-accent)' }}>
                결과
              </span>{' '}
              : 15초(463m) 등간격 · 3,225,600 격자
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 3: ESI 방제지도 ═══
function PanelESIMap() {
  return (
    <div>
      {/* 헤더 카드 */}
      <div className="rounded-xl p-4 mb-[14px] bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold text-fg font-korean mb-2">
          🗺️ ESI 방제정보지도 (Environmental Sensitivity Index Map)
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          ESI 지도는 이문진 박사 특허(등록특허 10-1567431)의 핵심 기반 데이터입니다. 해안선
          유형·생태민감도·사회경제적 자원 분포를 통합 등급화하여{' '}
          <b style={{ color: 'var(--color-accent)' }}>방제 우선순위 결정</b>의 근거가 됩니다.
          1999~2002년 구축, 해경 인천·태안·군산·목포·완도·제주·여수 관할해역 대상.
        </div>
        <div
          className="mt-2 px-[10px] py-[7px] rounded-[5px] text-caption text-fg-disabled font-korean"
          style={{
            // background: 'color-mix(in srgb, var(--color-base) 6%, transparent)',
            border: '1px solid color-mix(in srgb, var(--color-accent) 15%, transparent)',
          }}
        >
          원전: NOAA ESI Mapping Program · 국내 적용: 해양수산부·한국해양과학기술원
        </div>
      </div>

      {/* ESI 3종 카드 */}
      <div className="grid grid-cols-3 gap-3 mb-[14px]">
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            해안선 분류 (Shoreline)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            해안선 유형을 1~10 등급으로 분류. 등급이 높을수록 오염 취약·방제 난이도 높음.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 1~2: 노출 암반·절벽 (낮은 민감도)
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 5~7: 자갈·모래 해변 (중간)
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              ESI 8~10: 조간대·갯벌·맹그로브 (최고)
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            생물자원 (Biological Resources)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            오염 취약 생물 서식지·번식지·이동경로를 위치 기반으로 등록.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              해조류·어류 산란장·양식장
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              철새 도래지·해조류 번식지
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              보호 해양생물 서식구역
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            인문·사회자원 (Human-Use)
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
            경제·사회적 피해 가능 지역을 방제 우선순위 결정에 활용.
          </div>
          <div className="flex flex-col gap-[3px] text-caption font-korean">
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              취수원·정수장·발전소 냉각수
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              항구·어항·수산물 위판장
            </div>
            <div
              className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
              style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
            >
              해수욕장·관광지·문화재
            </div>
          </div>
        </div>
      </div>

      {/* ESI 구축 현황 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-2">
          📏 ESI 해안선 자료 구축 현황 (등록특허 10-1567431)
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          본 특허의 ESI 기반 데이터는 1999~2002년(약 3년) 구축된 방제정보지도{' '}
          <b className="text-fg">25,000:1 해안선자료</b>를 기반으로 합니다. 매립·준설공사로 변형된
          부분은 국립해양조사원 전자해도(ENC) 해안선으로 보완하였습니다. 항공탐색에서 획득한 최신
          영상 데이터는 이 ESI DB와 실시간 중첩되어 방제 우선구역을 즉시 산출합니다.
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 4: 면적 산정 ═══
function PanelAreaCalc() {
  return (
    <div>
      {/* 면적 산정 방법론 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-3">
          📏 항공 영상 기반 유출유 면적 산정 방법론
        </div>
        <div className="grid grid-cols-2 gap-3 mb-3">
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">
              픽셀 분류법 (Pixel Classification)
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
              광학 영상의 각 픽셀을 <b style={{ color: 'var(--color-accent)' }}>반사도·색상·질감</b>
              에 따라 기름/해수로 분류. 분류된 픽셀 수 × GSD² = 면적.
            </div>
            <div className="bg-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
              A = N<sub>oil</sub> × (GSD)<sup>2</sup>
              <br />
              <span className="text-fg-disabled">N: 기름 픽셀수, GSD: 지상 표본거리</span>
            </div>
          </div>
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">
              다중분광 지수법 (Spectral Index)
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
              다중분광 센서로 촬영한 밴드 조합으로{' '}
              <b style={{ color: 'var(--color-accent)' }}>유막 특유의 분광 반응</b>을 지수화하여
              자동 분류.
            </div>
            <div className="bg-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
              OSDI = (B<sub>NIR</sub>−B<sub>Red</sub>) / (B<sub>NIR</sub>+B<sub>Red</sub>)
              <br />
              <span className="text-fg-disabled">Oil Spill Detection Index</span>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">SAR 임계값 분리법</div>
            <div className="text-caption text-fg-sub font-korean leading-[1.7]">
              SAR 영상에서 후방산란계수(σ°)의 임계값 이하를 유막으로 판정합니다. 단, 풍속 3m/s
              이하나 생물막, 강우 영역이 <b style={{ color: 'var(--color-accent)' }}>False Alarm</b>{' '}
              오탐 발생 원인이 됩니다.
            </div>
            <div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg">
              {'Oil = {(x,y) | σ°(x,y) < T'}
              <sub>th</sub>
              {'}'}
              <br />
              <span className="text-fg-disabled">
                T<sub>th</sub>: 최적 임계값 (국소 적응형)
              </span>
            </div>
          </div>
          <div className="bg-bg-base rounded-lg p-3 border border-stroke">
            <div className="text-label-2 font-bold text-fg font-korean mb-2">유량 역산 추정</div>
            <div className="text-caption text-fg-sub font-korean leading-[1.7]">
              면적(A)과 평균 유막 두께(d) 및 풍화 경과 시간(t)으로부터 원래 유출유량(V₀)을
              역산합니다.
            </div>
            <div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg leading-[1.8]">
              V₀ = A × d / (1 − f<sub>e</sub>(t))
              <br />
              <span className="text-fg-disabled">
                f<sub>e</sub>: 누적 증발비 (Stiver & Mackay 1984)
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Bonn Agreement 색상 코드 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold font-korean mb-[10px]">
          🎨 유막 두께 시각적 추정 기준 (Bonn Agreement Color Code)
        </div>
        <div className="grid grid-cols-5 gap-[6px] text-caption font-korean">
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(200,200,255,.3)' }}
            />
            <div className="font-bold text-fg">은회색</div>
            <div className="text-fg-disabled">&lt; 0.1μm</div>
            <div className="text-fg-disabled">광택층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(180,220,180,.4)' }}
            />
            <div className="font-bold text-fg">무지개색</div>
            <div className="text-fg-disabled">0.1~0.3μm</div>
            <div className="text-fg-disabled">박막층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(200,160,80,.5)' }}
            />
            <div className="font-bold text-fg">메탈릭</div>
            <div className="text-fg-disabled">0.3~5μm</div>
            <div className="text-fg-disabled">광택층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(120,90,40,.7)' }}
            />
            <div className="font-bold text-fg">갈색</div>
            <div className="text-fg-disabled">5~200μm</div>
            <div className="text-fg-disabled">두꺼운층</div>
          </div>
          <div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
            <div
              className="w-5 h-5 rounded-[3px] mx-auto mb-1"
              style={{ background: 'rgba(40,40,40,.9)' }}
            />
            <div className="font-bold text-fg">흑색</div>
            <div className="text-fg-disabled">&gt;200μm</div>
            <div className="text-fg-disabled">농축층</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 5: 확산예측 연계 ═══
function PanelSpreadModel() {
  return (
    <div>
      {/* 헤더 카드 */}
      <div className="rounded-xl p-4 mb-[14px] bg-bg-card border border-stroke">
        <div className="text-label-1 font-bold text-fg font-korean mb-2">
          🔗 항공탐색 데이터 → 유출유 확산예측 연계 체계
        </div>
        <div className="text-caption text-fg-sub font-korean leading-[1.8]">
          이문진 박사 특허(등록특허 10-1567431)는{' '}
          <b style={{ color: 'var(--color-accent)' }}>위성영상수신시스템(SST)</b>을
          기상예측시스템·검조소와 함께 인터넷으로 연결하여, 항공탐색 데이터가 실시간 확산 예측의
          핵심 입력자료가 되는 통합 네트워크를 구성합니다.
        </div>
      </div>

      {/* 입력/피드백 2열 카드 */}
      <div className="grid grid-cols-2 gap-3 mb-[14px]">
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            📡 항공탐색 → 모델 입력
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">📍 유출 위치 보정</div>
              <div className="text-fg-disabled">드론·위성 영상 → GPS 좌표 → 모델 유출지점 갱신</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🛢️ 유출량 역산</div>
              <div className="text-fg-disabled">면적×두께 → 유량 추정 → 확산모델 유출량 보정</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🌡️ SST 수온 입력</div>
              <div className="text-fg-disabled">NGSST FTP 수신 → Akima 보간 → 풍화모델 수온값</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🎨 풍화 상태 확인</div>
              <div className="text-fg-disabled">색상 분류 → 증발비 추정 → 풍화모델 초기값 보정</div>
            </div>
          </div>
        </div>
        <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
          <div className="text-label-2 font-bold text-fg font-korean mb-2">
            🔄 모델 → 항공탐색 피드백
          </div>
          <div className="flex flex-col gap-[5px] text-caption font-korean">
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🗺️ 탐색 우선구역 제공</div>
              <div className="text-fg-disabled">확산 예측 결과 → 다음 탐색 집중구역 자동 생성</div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">📊 모델 검증 자료</div>
              <div className="text-fg-disabled">
                실측 유출유 위치 ↔ 예측값 오차 분석 → 정확도 평가
              </div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🏖️ ESI 피해 위험구역</div>
              <div className="text-fg-disabled">
                확산경로×ESI 중첩 → 항공탐색 ESI 현장확인 우선순위
              </div>
            </div>
            <div
              className="px-[9px] py-[6px] rounded-[5px]"
              style={{
                background: 'color-mix(in srgb, var(--color-info) 5%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-info) 12%, transparent)',
              }}
            >
              <div className="font-bold text-fg mb-[1px]">🚢 방제자원 배치안</div>
              <div className="text-fg-disabled">
                예측 도달시간 → 오일펜스·방제정 최적 배치 좌표 제공
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 네트워크 다이어그램 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-3">
          📡 특허 10-1567431 실시간 자료 연계 네트워크 (도면 9)
        </div>
        <div className="flex items-center justify-center gap-0 py-2">
          <div className="flex flex-col gap-[6px] items-start">
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">기상예측시스템</div>
              <div className="text-fg-disabled">바람·기온·기압 · 국립환경과학원</div>
            </div>
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">위성영상수신시스템</div>
              <div className="text-fg-disabled">SST(NGSST) · 토호쿠대학 FTP</div>
            </div>
            <div
              className="px-3 py-2 rounded-[7px] text-left text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">검조소</div>
              <div className="text-fg-disabled">실시간 조위 · 조석정보</div>
            </div>
          </div>
          <div className="flex flex-col items-center justify-center self-stretch px-3 gap-[2px]">
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
            <div className="w-[30px] h-[1px] bg-stroke-light" />
            <div className="flex-1" />
          </div>
          <div
            className="px-5 py-4 rounded-[10px] text-center text-caption font-korean self-center"
            style={{
              background: 'color-mix(in srgb, var(--color-tertiary) 8%, transparent)',
              border: '2px solid color-mix(in srgb, var(--color-tertiary) 30%, transparent)',
            }}
          >
            <div className="text-base mb-1">🖥️</div>
            <div className="font-bold text-fg">서버(WING)</div>
            <div className="text-fg-disabled">
              데이터 수신·처리
              <br />
              모델 구동
            </div>
          </div>
          <div className="w-[30px] h-[1px] bg-stroke-light self-center" />
          <div className="flex flex-col gap-[6px] items-center self-center">
            <div
              className="px-3 py-2 rounded-[7px] text-center text-caption font-korean"
              style={{
                background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                border: '1px solid color-mix(in srgb, var(--color-accent) 20%, transparent)',
              }}
            >
              <div className="font-bold text-fg">클라이언트</div>
              <div className="text-fg-disabled">
                유출지점·유출량
                <br />
                입력 및 결과 수령
              </div>
            </div>
          </div>
        </div>
        <div className="text-caption text-fg-disabled font-korean text-center mt-2">
          기상자료·수온자료·조석정보 실시간 수신 → CHARRY 조류 + 취송류 예측 → 유출유 확산 예측
          (S10→S20→S30)
        </div>
      </div>
    </div>
  );
}

// ═══ PANEL 6: 논문·특허 ═══
function PanelReferences() {
  return (
    <div>
      {/* 섹션 헤더 */}
      <div className="flex items-center gap-[10px] mb-4">
        <div
          className="w-9 h-9 rounded-[9px] flex items-center justify-center text-[18px]"
          style={{
            background: 'color-mix(in srgb, var(--color-caution) 20%, transparent)',
            border: '1px solid color-mix(in srgb, var(--color-caution) 30%, transparent)',
          }}
        >
          📜
        </div>
        <div>
          <div className="text-label-1 font-bold text-fg font-korean">
            등록특허 원문 기반 이론 근거
          </div>
          <div className="text-caption text-fg-disabled font-korean mt-[1px]">
            WING 탑재 유출유 확산예측 시스템의 특허 원전 2건 전체 분석
          </div>
        </div>
      </div>

      {/* 특허 1: 10-1567431 */}
      <div className="rounded-xl p-[18px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-start gap-[14px] mb-[14px]">
          <div
            className="px-3 py-2 rounded-lg text-center whitespace-nowrap flex-shrink-0"
            style={{
              background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
              border: '1px solid color-mix(in srgb, var(--color-info) 30%, transparent)',
            }}
          >
            <div className="text-caption text-fg-disabled font-korean">대한민국 등록특허</div>
            <div className="text-label-1 font-extrabold font-mono text-color-info">10-1567431</div>
            <div className="text-caption text-fg-disabled font-korean mt-[2px]">
              등록: 2015.11.03
            </div>
          </div>
          <div className="flex-1">
            <div className="text-label-1 font-bold text-fg font-korean mb-[5px] leading-[1.5]">
              해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              <span>특허권자</span> : 한국해양과학기술원 | <span>발명자</span> : 이문진 · 김혜진 ·
              이승현 · 전태병
            </div>
          </div>
        </div>

        {/* 청구항 1 */}
        <div
          className="bg-bg-base rounded-lg p-3 mb-3"
          style={{ border: '1px solid color-mix(in srgb, var(--color-accent) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[9px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            청구항 1 — ESI 기반 실시간 확산 3단계
          </div>
          <div className="flex flex-col gap-[6px] text-caption font-korean">
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S10
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">실시간 자료 수신</span> —
                기상예측시스템·위성영상수신시스템·검조소 인터넷 연결. FTP로
                기상자료+수온자료(NGSST)+조석정보 자동 수신
              </div>
            </div>
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S20
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">조류·취송류 예측</span> — CHARRY모델 조화분석 + 취송류
                경험식(0.029×Vw, θw+18.6°)
              </div>
            </div>
            <div className="flex gap-[10px] items-start">
              <div
                className="min-w-[32px] h-[22px] rounded-[5px] flex items-center justify-center text-caption flex-shrink-0"
                style={{
                  // background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
                  border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
                  // color: 'var(--color-accent)',
                }}
              >
                S30
              </div>
              <div className="text-fg-sub leading-[1.7]">
                <span className="text-fg">유출유 확산 실시간 예측</span> — Monte Carlo 입자추적 +
                fBm 난류확산 + 풍화 5단계 → ESI 방제정보지도 기반 방제방안 수립
              </div>
            </div>
          </div>
        </div>

        {/* fBm 난류확산 */}
        <div
          className="bg-bg-base rounded-lg p-[11px] mb-[10px]"
          style={{ border: '1px solid color-mix(in srgb, var(--color-success) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[7px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            fBm 난류확산 |{' '}
            <span className="text-fg-sub font-normal">σ²(t) = A·t^m, m=0.45~2.46</span>
          </div>
          <div className="text-caption text-fg-sub font-korean leading-[1.7]">
            분수 브라운운동(fBm) 기반 무작위 확산거리 생성. 등방성(isotropic) 확산 가정.
          </div>
        </div>

        {/* 풍화 5단계 */}
        <div
          className="bg-bg-base rounded-lg p-3"
          // style={{ border: '1px solid color-mix(in srgb, var(--color-warning) 15%, transparent)' }}
        >
          <div
            className="text-caption font-korean mb-[9px]"
            // style={{ color: 'var(--color-accent)' }}
          >
            유출유 풍화(Weathering) 5단계
          </div>
          <div className="flex flex-col gap-1 text-caption font-korean">
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">① 퍼짐</div>
              <div className="text-fg-sub leading-[1.6]">
                Fay(1969): 중력-관성력. Mackay et al.(1980) 표면장력-점성력
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">② 증발</div>
              <div className="text-fg-sub leading-[1.6]">
                Stiver & Mackay(1984) 해석적 방법. 수일~10일간 약 25%
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">③ 소산</div>
              <div className="text-fg-sub leading-[1.6]">
                쇄파 기인. 파도에너지·풍속 함수. 전체 약 15%
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">④ 유상화</div>
              <div className="text-fg-sub leading-[1.6]">
                Water-in-oil. Mackay et al.(1980) 풍속·수분 함수
              </div>
            </div>
            <div className="grid gap-2 px-2 py-[5px]" style={{ gridTemplateColumns: '60px 1fr' }}>
              <div className="text-fg-sub">⑤ 침강</div>
              <div className="text-fg-sub leading-[1.6]">
                용해·미생물 분해. 질량 손실률 = 초기 누유량에 선형 비례
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 특허 2: 10-1868791 */}
      <div className="rounded-xl p-[18px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-start gap-[14px] mb-[14px]">
          <div
            className="px-3 py-2 rounded-lg text-center whitespace-nowrap flex-shrink-0"
            style={{
              background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
              border: '1px solid color-mix(in srgb, var(--color-info) 30%, transparent)',
            }}
          >
            <div className="text-caption text-fg-disabled font-korean">대한민국 등록특허</div>
            <div className="text-label-1 font-extrabold font-mono text-color-info">10-1868791</div>
            <div className="text-caption text-fg-disabled font-korean mt-[2px]">
              등록: 2018.06.12
            </div>
          </div>
          <div className="flex-1">
            <div className="text-label-1 font-bold text-fg font-korean mb-[5px] leading-[1.5]">
              유출유(Oil spill) 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측
              시스템
            </div>
            <div className="text-caption text-fg-sub font-korean leading-[1.8]">
              <span>특허권자</span> : 주식회사 아라종합기술 | <span>발명자</span> :
              김도연·김용혁·김충기·김성은·박상훈·오정환
            </div>
          </div>
        </div>

        {/* 최적화 5단계 */}
        <div
          className="bg-bg-base rounded-lg p-[11px] mb-[10px]"
          style={{ border: '1px solid color-mix(in srgb, var(--color-info) 15%, transparent)' }}
        >
          <div
            className="text-caption font-bold font-korean mb-[9px]"
            style={{ color: 'var(--color-info)' }}
          >
            ⚙️ 입자 추적 모듈 최적화 5단계
          </div>
          <div className="flex flex-col gap-1 text-caption font-korean">
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(a)</span>
              <div className="text-fg-sub leading-[1.6]">
                뜰개 관측 + 예측자료 취득 : GPS 뜰개 투하 → 실제 이동경로 + 예측 기상·해양자료 취득
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(b)</span>
              <div className="text-fg-sub leading-[1.6]">
                제1 입자 추적 모델 실행 : 예측자료 + 확산계수 → 제1 예측변화량(ΔModel) 산출
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(c)</span>
              <div className="text-fg-sub leading-[1.6]">
                전처리 차분 : 관측경로 Δobs ↔ 제1모델 ΔModel 차분 처리
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(d)</span>
              <div className="text-fg-sub leading-[1.6]">
                제2 입자 추적 모델 수립 : ΔModel 기반 제2모델 → ΔRevised 산출
              </div>
            </div>
            <div className="flex gap-[7px] px-2 py-[5px]">
              <span className="min-w-[20px] text-fg-sub">(e)</span>
              <div className="text-fg-sub leading-[1.6]">
                최적화 알고리즘 적용 : ΔRevised ↔ Δobs 비교 → GA·DE·HS·PSO 매개변수 최적화 반복 수렴
              </div>
            </div>
          </div>
        </div>

        {/* 수학 모델 + 알고리즘 */}
        <div className="grid grid-cols-2 gap-[10px]">
          <div className="bg-bg-base border border-stroke rounded-lg p-[11px]">
            <div className="text-caption font-bold text-fg font-korean mb-[7px]">
              입자 추적 수학 모델
            </div>
            <div className="rounded-[5px] p-2 font-mono text-caption text-fg-sub leading-[2] bg-bg-base border border-stroke">
              <span className="text-fg-disabled">제1모델:</span> Model<sub>x</sub> = cur<sub>u</sub>
              ·Δt + c·w<sub>u</sub>·Δt
              <br />
              <span className="text-fg-disabled">제2모델:</span> Rev<sub>x</sub> = a1·cur
              <sub>u</sub>
              +a2·cur<sub>v</sub>+...+a9
            </div>
          </div>
          <div className="bg-bg-base border border-stroke rounded-lg p-[11px]">
            <div className="text-caption font-bold text-fg font-korean mb-[7px]">
              4대 최적화 알고리즘
            </div>
            <div className="flex flex-col gap-[3px] text-caption font-korean">
              <div className="px-[7px] py-[3px] text-fg-sub">
                GA : 유전 알고리즘 — 변이·교배 진화
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                DE : 미분 진화 — 벡터 차이 기반 전역최적화
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                HS : 하모니 서치 — 음악구성 수리모델
              </div>
              <div className="px-[7px] py-[3px] text-fg-sub">
                PSO : 입자군집 최적화 — 새떼 군집행동 모방
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 선행기술 참고문헌 */}
      <div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
        <div className="text-label-2 font-bold text-fg font-korean mb-[10px]">
          📚 특허 원문 인용 선행기술문헌 (심사관 인용 포함)
        </div>
        <div className="flex flex-col gap-[3px] text-caption font-korean">
          {[
            {
              tag: '특허① 인용',
              text: '해양환경안전학회지 제17권 4호 (김혜진·이문진 외) — KOSPS 상시 운용 체계 | 심사관 직접 인용',
            },
            {
              tag: '특허① 인용',
              text: '해양환경안전학회 2008 춘계학술발표회 — CHARRY 조류모델 | 심사관 직접 인용',
            },
            {
              tag: '특허① 인용',
              text: 'KR1020120121163 A — 심사관 인용 선행특허',
            },
            {
              tag: '특허② 인용',
              text: 'KR101538668 B1 / KR101378463 B1 — 심사관 인용 선행특허 2건',
            },
            {
              tag: '특허② 인용',
              text: '한국 등록특허 제10-1567431 — 발명배경 §[0007]에서 선행기술로 직접 인용',
            },
            {
              tag: '이론 원전',
              text: 'Fay(1969) · Mackay et al.(1980) · Stiver & Mackay(1984) · Mooney(1951) — 풍화 5단계 원전',
            },
            {
              tag: '이론 원전',
              text: 'Akima(1978a, 1978b) — 2차원 5차다항식 보간법 (수심·기상자료 보간)',
            },
            {
              tag: '이론 원전',
              text: '이문진·강용균(2000) 한국해양학회지 — 취송류 경험식 0.029×Vw, θw+18.6° 원전',
            },
            {
              tag: '이론 원전',
              text: 'Bowden(1983) — fBm 난류확산 σ²=At^m (m=0.45~2.46)',
            },
            {
              tag: '이론 원전',
              text: 'Wahr(1981) — 조석 Love number (k=0.3, h=0.61) · 기조력 계수',
            },
            {
              tag: '이론 원전',
              text: 'Flather & Heaps(1975) — 조석 간출지(tidal flat) 처리 기법',
            },
          ].map((ref, i) => (
            <div
              key={i}
              className="grid gap-[7px] px-2 py-[5px]"
              style={{ gridTemplateColumns: '80px 1fr' }}
            >
              <div
                className="px-[5px] py-[2px] rounded-[3px] text-caption text-center h-fit text-color-accent whitespace-nowrap"
                style={{
                  background: 'color-mix(in srgb, var(--color-accent) 8%, transparent)',
                }}
              >
                {ref.tag}
              </div>
              <div className="text-fg-sub leading-[1.6]">{ref.text}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function AerialTheoryView() {
  const [activePanel, setActivePanel] = useState(0);

  return (
    <div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-base">
      <div
        className="flex-1 overflow-y-auto scrollbar-thin px-6 py-5"
        style={{ scrollbarGutter: 'stable' }}
      >
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-5">
          <div className="flex items-center gap-3">
            <div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
              📐
            </div>
            <div>
              <div className="text-title-2 font-bold text-fg">해양 항공탐색 · 원격탐사 이론</div>
              <div className="text-label-2 text-fg-disabled mt-0.5">
                유출유 원격탐지 · 항공감시 기법 · ESI 방제정보지도 · 등록특허 10-1567431 기반
              </div>
            </div>
          </div>
        </div>

        {/* 내부 네비게이션 */}
        <div className="flex gap-[3px] bg-bg-card rounded-lg p-1 mb-5 border border-stroke">
          {panels.map((p) => (
            <button
              key={p.id}
              onClick={() => setActivePanel(p.id)}
              className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
                activePanel === p.id
                  ? 'border-stroke-light bg-bg-elevated text-fg'
                  : 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
              }`}
            >
              {p.icon} {p.label}
            </button>
          ))}
        </div>

        {/* 패널 */}
        {activePanel === 0 && <PanelOverview />}
        {activePanel === 1 && <PanelDetection />}
        {activePanel === 2 && <PanelRemoteSensing />}
        {activePanel === 3 && <PanelESIMap />}
        {activePanel === 4 && <PanelAreaCalc />}
        {activePanel === 5 && <PanelSpreadModel />}
        {activePanel === 6 && <PanelReferences />}
      </div>
    </div>
  );
}
