import { useState } from 'react';
import { card, cardBg, codeBox, labelStyle, tag } from '../OilSpillTheoryView';

export function KospsPanel() {
  const [papersOpen, setPapersOpen] = useState(false);
  const [intlPapersOpen, setIntlPapersOpen] = useState(false);
  const [kospsPapersOpen, setKospsPapersOpen] = useState(false);
  return (
    <div>
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-heading-3 bg-bg-elevated border border-stroke">
            🔷
          </div>
          <div>
            <div className="text-title-2 font-bold text-fg">
              KOSPS (Korea Oil Spill Prediction System)
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템
            </div>
          </div>
        </div>
        <div className="text-label-2 text-fg-sub leading-[1.8]">
          김혜진·이문진·오세웅·강준묵(2011)이 개발한 KOSPS는 유류오염사고 발생 즉시 신속하게 모델을
          구동할 수 있도록 <b className="text-color-accent">상시 운용 체계</b>를 구축한 국내 유출유
          확산 예측 시스템입니다. 정적자료(수심·해안선)와 동적자료(KMA 바람·HYCOM 해류·KORDI 조류)를
          외부 FTP 연계로 자동 갱신하여 <b className="text-color-accent">실시간 예측 상시 활용</b>을
          가능하게 합니다.
        </div>
        <div
          className="mt-2.5 px-3 py-2 rounded-md text-label-2"
          style={{
            background: 'rgba(6,182,212,.06)',
            border: '1px solid rgba(6,182,212,.15)',
            color: 'var(--fg-disabled)',
          }}
        >
          참고문헌: 김혜진·이문진·오세웅·강준묵, &quot;유출유 확산 예측 모델의 상시 운용 체계 개발에
          관한 연구&quot;, 해양환경안전학회지 17권 4호, pp.375-382, 2011.
        </div>
      </div>

      {/* 논문·특허 근거 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>관련 논문 · 특허 근거</div>

        {/* 등록특허 라벨 */}
        <div className="flex items-center gap-1.5 mb-2">
          <span
            style={{
              ...tag('var(--fg-sub)'),
              fontWeight: 700,
              fontSize: 'var(--font-size-label-1)',
            }}
          >
            등록특허
          </span>
        </div>

        <div className="flex flex-col gap-1.5 mb-3.5">
          {/* 특허 1 */}
          <div className="rounded-lg p-3 bg-bg-base border border-stroke flex gap-3 items-start">
            <div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap bg-bg-elevated border border-stroke font-mono shrink-0">
              <div className="text-label-2 text-fg-default">등록번호</div>
              <div className="text-label-2 font-bold text-fg">10-1567431</div>
              <div className="text-label-2 mt-0.5 text-fg-default">2015.11.03</div>
            </div>
            <div className="flex flex-col gap-1.5 text-label-2 min-w-0">
              <div className="font-bold text-fg">
                해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법
              </div>
              <div className="text-fg-sub">
                발명자 : 이문진 · 김혜진 · 이승현 · 전태병 | 특허권자 : 한국해양과학기술원
              </div>
              <div className="flex flex-wrap gap-1">
                {[
                  'ESI 방제정보지도',
                  'CHARRY 실시간 조류모델',
                  '취송류 경험식',
                  'Monte Carlo 입자추적',
                  '풍화 5단계',
                ].map((t) => (
                  <span
                    key={t}
                    className="px-2 py-0.5 rounded text-label-2 text-fg-sub bg-bg-elevated"
                  >
                    {t}
                  </span>
                ))}
              </div>
              <div className="text-fg-default">
                국가R&amp;D: ① 3차원 유출유 확산예측 기반 방제 지원기술 개발 (기여율 65%) ② HNS 유출
                거동예측 및 대응정보 지원기술 개발 (기여율 35%) | 해양수산부
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* CHARRY 모델 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>
          CHARRY 모델 (실시간 조류예측 핵심 알고리즘)
        </div>
        <div className="text-label-2 mb-2.5 text-fg-sub leading-[1.8]">
          <b>CHARRY</b>는 조화분석에 의한 검조소 실시간 조위와 조석 수치모델링에 의한 조류
          공간분포를 변조조석(Modulated Tide)을 매개로 결합하여, 실제 시간대의 전 해역 조류를
          실시간으로 재현하는 핵심 알고리즘입니다.
        </div>
        <div className="grid grid-cols-2 gap-2.5">
          <div className={codeBox}>
            <span className="text-fg-default text-label-2">/* 변조조석 수식 */</span>
            <br />
            ζ(t) = A(t) cos[σt − θ(t)]
            <br />
            A²(t) = Σ Yᵢ² + 2Σ YᵢYⱼ cos[(σᵢ−σⱼ)t−(φᵢ−φⱼ)]
          </div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            <div
              className="px-2 py-1.5 rounded"
              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}
            >
              <span className="text-fg font-bold">① 진폭 등비 증가</span>
              <br />
              <span className="text-fg-sub">검조소 조위 진폭 f배 → 전 격자 동일 f배 증가</span>
            </div>
            <div
              className="px-2 py-1.5 rounded"
              style={{
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
              }}
            >
              <span className="text-fg font-bold">② 위상차 일정</span>
              <br />
              <span className="text-fg-sub">기준점-격자점 간 위상차는 진폭에 무관하게 일정</span>
            </div>
          </div>
        </div>
      </div>

      {/* 입력자료 체계 */}
      <div className="grid grid-cols-2 gap-3 mb-4">
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-accent)')}>동적 입력자료 체계</div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            {[
              {
                icon: '🌬️',
                label: '바람·기온',
                detail: 'KMA UM · ~12km · 2회/일',
                bg: 'rgba(6,182,212,.04)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                icon: '🌊',
                label: '해류(표층)',
                detail: 'HYCOM · ~9km · 1회/일',
                bg: 'rgba(59,130,246,.04)',
                bd: 'rgba(59,130,246,.12)',
              },
              {
                icon: '🌀',
                label: '조류',
                detail: 'KORDI 조화분석 · 500m',
                bg: 'rgba(6,182,212,.04)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                icon: '🌡️',
                label: '표층수온(SST)',
                detail: 'NOAA AVHRR · ~5.4km',
                bg: 'rgba(6,182,212,.04)',
                bd: 'rgba(6,182,212,.12)',
              },
              {
                icon: '💨',
                label: '취송류(풍성류)',
                detail: 'KMA 바람 → 경험식 계산',
                bg: 'rgba(6,182,212,.04)',
                bd: 'rgba(6,182,212,.12)',
              },
            ].map((d) => (
              <div
                key={d.label}
                className="px-2.5 py-1.5 rounded-md flex justify-between items-center"
                style={{ background: d.bg, border: `1px solid ${d.bd}` }}
              >
                <span className="font-medium">
                  {d.icon} {d.label}
                </span>
                <span className="text-label-2 text-fg-default">{d.detail}</span>
              </div>
            ))}
          </div>
        </div>
        <div className={`${card} ${cardBg}`} style={{ margin: 0 }}>
          <div style={labelStyle('var(--color-info)')}>정적 입력자료</div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
            >
              <div className="font-medium mb-0.5">📍 수심·해안선</div>
              <div className="text-fg-default">전자해도(ENC) → 500m 격자 보간</div>
            </div>
            <div
              className="px-2.5 py-1.5 rounded-md"
              style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}
            >
              <div className="font-medium mb-0.5">🗺️ 격자 구성</div>
              <div className="text-fg-default">좌표변환 → 영역추출 → 격자보간 표준화</div>
            </div>
          </div>
        </div>
      </div>

      {/* 취송류 경험식 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--color-info)')}>취송류(Wind-Driven Current) 경험식</div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <div className={`${codeBox} mb-2`}>
              <span className="text-fg-default text-label-2">/* 취송류 유속 (이·강, 2000) */</span>
              <br />
              V_WDC = <span className="text-color-accent">0.029</span> × V_wind
            </div>
            <div className={codeBox}>
              <span className="text-fg-default text-label-2">/* 취송류 유향 */</span>
              <br />
              θ_WDC = θ_wind + <span className="text-color-accent">18.6°</span>
            </div>
          </div>
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            <div
              className="px-2 py-1.5 rounded"
              style={{
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(59,130,246,.15)',
              }}
            >
              <span className="text-color-accent font-bold">V_WDC</span> : 표면 취송류 유속 (m/s) —
              바람의 약 2.9%
            </div>
            <div
              className="px-2 py-1.5 rounded"
              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}
            >
              <span className="text-color-accent font-bold">18.6°</span> : Ekman 편향각 — 북반구
              기준 풍향 우편향
            </div>
            <div
              className="px-2 py-1.5 rounded"
              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}
            >
              <b className="text-color-accent">출처</b> : 이문진·강용균(2000), 해양 표면취송류
              라그랑지안 측류 및 모델링
            </div>
          </div>
        </div>
      </div>
      {/* 상시 운용 통신 체계 */}
      <div className={`${card} ${cardBg}`}>
        <div style={labelStyle('var(--fg-default)')}>상시 운용 통신 체계</div>
        <div className="flex items-center justify-center gap-0 py-3">
          {[
            { label: 'NFRDI', sub: 'SST', color: 'var(--color-accent)' },
            { label: 'KMA', sub: 'Wind·기온', color: 'var(--color-accent)' },
            { label: 'HYCOM', sub: '해류', color: 'var(--color-accent)' },
            {
              label: 'DB 서버',
              sub: '동적+정적자료',
              color: 'var(--color-accent)',
              strong: true,
            },
            { label: 'KOSPS', sub: '확산예측', color: 'var(--color-accent)', strong: true },
            { label: '운용자', sub: '결과 수령', color: 'var(--color-accent)' },
          ].map((node, i) => (
            <div key={node.label} className="flex items-center">
              <div
                className="px-3 py-2.5 rounded-lg text-center text-label-2"
                style={{
                  background: `${node.color}14`,
                  border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
                }}
              >
                <div className="font-bold" style={{ color: node.color }}>
                  {node.label}
                </div>
                <div className="text-label-2 text-fg-default">{node.sub}</div>
              </div>
              {i < 5 && (
                <div className="w-[30px] h-px" style={{ background: 'var(--stroke-light)' }} />
              )}
            </div>
          ))}
        </div>
        <div className="text-label-2 text-center mt-1 text-fg-default">
          FTP 자동 갱신 → DB 정규화 → 격자 재구성 → 모델 구동 → 결과 표출
        </div>
        <div
          className="mt-2.5 p-2 rounded-md"
          style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}
        >
          <div className="text-label-2 font-bold mb-1 text-color-caution">⚠️ 예측 신뢰도 한계</div>
          <div className="text-label-2 text-fg-sub leading-[1.6]">
            조류: 무한 예보 가능
            <br />
            해류(HYCOM): <b>5일치</b> 제한
            <br />
            기온·취송류: <b className="text-color-caution">3일치</b> 제한
            <br />→ <b className="text-color-caution">72h 초과 예측 시 신뢰도 저하</b>
          </div>
        </div>
      </div>

      {/* 이문진 박사 특허 핵심 기술 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        {/* 헤더 */}
        <div className="flex items-center gap-2.5 mb-3.5">
          <div className="w-[34px] h-[34px] rounded-lg flex items-center justify-center text-title-1 bg-bg-elevated border border-stroke">
            📜
          </div>
          <div>
            <div className="text-title-4 font-bold text-fg">
              이문진 박사 특허 기반 핵심 기술 (등록특허 10-1567431)
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법 ·
              한국해양과학기술원 · 2015년 등록
            </div>
          </div>
        </div>

        {/* 특허 개요 */}
        <div
          className="rounded-lg p-3 mb-3.5 text-label-2"
          style={{
            background: 'rgba(6,182,212,.04)',
            border: '1px solid rgba(6,182,212,.12)',
            color: 'var(--fg-sub)',
            lineHeight: '1.8',
          }}
        >
          본 특허는{' '}
          <b className="text-color-accent">
            방제정보지도(ESI, Environmental Sensitivity Index Map)
          </b>
          를 기반으로 실시간 조류·취송류·해수유동을 산출하고, 이를 유출유 확산 예측에 직결하는 통합
          방법론을 특허화한 것입니다. 기상예측시스템·위성영상수신시스템·검조소를 인터넷으로 연결하여
          실시간 기상·수온·조석 정보를 자동 수신하고,{' '}
          <b className="text-color-accent">CHARRY 모델</b>로 실시간 조류를 예측하여 유출유 확산에
          적용합니다.
        </div>

        {/* 3단계 처리 프로세스 */}
        <div className="text-label-2 font-bold mb-2.5">⚙️ 특허 청구항 3단계 처리 프로세스</div>
        <div className="grid grid-cols-3 gap-2 mb-3.5">
          <div
            className="rounded-lg p-3"
            style={{
              background: 'var(--bg-base)',
              border: '1px solid var(--stroke-default)',
            }}
          >
            <div className="text-label-2 font-bold mb-1.5 text-color-info">
              ① 실시간 자료 수신 (S10)
            </div>
            <div className="text-label-2 text-fg-sub leading-[1.7]">
              • <b>기상자료</b> : 바람·기온·기압 분포
              <br />• <b>수온자료</b> : NGSST 위성 원격탐사 (일본 토호쿠대학, 5km 해상도)
              <br />• <b>조석정보</b> : 검조소 실시간 조위
            </div>
            <div
              className="mt-1 p-1 rounded text-label-2"
              style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-disabled)' }}
            >
              FTP 자동 접속·수신·좌표변환·DB구축까지 자동화
            </div>
          </div>
          <div
            className="rounded-lg p-3"
            style={{
              background: 'var(--bg-base)',
              border: '1px solid rgba(6,182,212,.2)',
            }}
          >
            <div className="text-label-2 font-bold mb-1.5 text-color-accent">
              ② 조류·취송류 예측 (S20)
            </div>
            <div className="text-label-2 text-fg-sub leading-[1.7]">
              • <b className="text-color-accent">CHARRY 모델</b>로 실시간 조류 예측
              <br />
              • 2D 해수유동 방정식 기반 조화상수 DB 구축
              <br />
              • 취송류 경험식 : V_WDC=0.029×V_wind, θ_WDC=θ_wind+18.6°
              <br />• M2·S2·K1·O1 주요 4대 분조 조화분해
            </div>
            <div
              className="mt-1 p-1 rounded text-label-2"
              style={{ background: 'rgba(6,182,212,.06)', color: 'var(--fg-disabled)' }}
            >
              계산격자 : 15초(약 463m) 등간격 · 총 3,225,600격자
            </div>
          </div>
          <div
            className="rounded-lg p-3"
            style={{
              background: 'var(--bg-base)',
              border: '1px solid var(--stroke-default)',
            }}
          >
            <div className="text-label-2 font-bold mb-1.5 text-color-info">
              ③ 유출유 확산 예측 (S30)
            </div>
            <div className="text-label-2 text-fg-sub leading-[1.7]">
              • 클라이언트로부터 <b>유출유량·유출지점</b> 입력 수신
              <br />
              • 몬테카를로(Monte Carlo) 입자추적 기법
              <br />
              • fBm 기반 난류확산 : σ²=Atᵐ (m≈2H)
              <br />• 풍화모델 : 퍼짐·증발·소산·유상화·침강 통합
            </div>
            <div
              className="mt-1 p-1 rounded text-label-2"
              style={{ background: 'rgba(59,130,246,.06)', color: 'var(--fg-disabled)' }}
            >
              ESI Map 환경민감자원 DB와 결합하여 피해 위험도 평가
            </div>
          </div>
        </div>

        {/* 해수유동 방정식 & 풍화 5단계 */}
        <div className="grid grid-cols-2 gap-2.5 mb-3">
          <div
            className="rounded-lg p-3"
            style={{ background: 'var(--bg-base)', border: '1px solid rgba(59,130,246,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-info">
              📐 2차원 해수유동 방정식
            </div>
            <div className="text-label-2 mb-2 text-fg-sub leading-[1.7]">
              극좌표계(Polar Coordinate) 적용 · 지구 구면효과 반영
            </div>
            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
              {[
                { label: '기조력', desc: '제1(Love Number 0.69) + 제2(α=0.9) 포함' },
                { label: '4대 분조', desc: 'M2(1.405×10⁻⁴/s) · S2 · K1 · O1' },
                { label: '수치기법', desc: '양해법 + 경사차분법 + 양방향 순차계산법' },
                { label: '조간대', desc: 'Flather & Heaps(1975) 처리기법' },
              ].map((r) => (
                <div
                  key={r.label}
                  className="px-2 py-1 rounded"
                  style={{ background: 'rgba(59,130,246,.05)' }}
                >
                  <span className="font-bold text-color-info">{r.label}</span> : {r.desc}
                </div>
              ))}
            </div>
          </div>
          <div
            className="rounded-lg p-3"
            style={{ background: 'var(--bg-base)', border: '1px solid rgba(59,130,246,.2)' }}
          >
            <div className="text-label-2 font-bold mb-2 text-color-info">
              🔁 유출유 풍화(Weathering) 5단계
            </div>
            <div className="flex flex-col gap-1 text-label-2 text-fg-sub">
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.1)',
                }}
              >
                <span className="font-bold text-color-info">① 퍼짐</span> : Fay(1969) + Mackay et
                al.(1980) · 두께별 3단계 모델
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(59,130,246,.05)',
                  border: '1px solid rgba(59,130,246,.1)',
                }}
              >
                <span className="font-bold text-color-info">② 증발</span> : Stiver &amp;
                Mackay(1984) · 증류데이터 기반 해석 (1~10일, 25%)
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.1)',
                }}
              >
                <span className="font-bold text-color-info">③ 소산</span> : 쇄파에너지·풍속 함수 ·
                수면하 수직 분산 (15%)
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(234,179,8,.05)',
                  border: '1px solid rgba(234,179,8,.1)',
                }}
              >
                <span className="font-bold text-color-caution">④ 유상화</span> : Mackay et al.(1980)
                + Mooney(1951) · water-in-oil
              </div>
              <div
                className="px-2 py-1 rounded"
                style={{
                  background: 'rgba(6,182,212,.05)',
                  border: '1px solid rgba(6,182,212,.1)',
                }}
              >
                <span className="font-bold text-color-info">⑤ 침강</span> : 용해·생물분해 포함 ·
                초기유출량 선형 감소율 적용
              </div>
            </div>
          </div>
        </div>

        {/* Akima 수심 보간 & NGSST 수온 */}
        <div className="grid grid-cols-2 gap-2.5 mb-3">
          <div className="rounded-lg p-3 bg-bg-card border border-stroke">
            <div className="text-label-2 font-bold mb-2 text-color-accent">
              🗺️ Akima 수심 보간 기법
            </div>
            <div className="text-label-2 text-fg-sub leading-[1.7]">
              전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때{' '}
              <b className="text-color-accent">Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic
              Polynomial)을 사용합니다. 삼각망(TIN)을 구성하여 각 꼭지점의 편미분 연속성 조건으로
              21개 계수를 결정합니다.
            </div>
            <div className="mt-1.5 p-1.5 rounded bg-bg-base font-mono text-label-1 leading-loose">
              z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ{' '}
              <span className="text-label-2 text-fg-default">(i≤5, i+j≤5)</span>
            </div>
          </div>
          <div className="rounded-lg p-3 bg-bg-card border border-stroke">
            <div className="text-label-2 font-bold mb-2 text-color-accent">
              🌡️ NGSST 실시간 수온자료
            </div>
            <div className="text-label-2 text-fg-sub leading-[1.7]">
              일본 토호쿠대학 Kawamura 교수팀의{' '}
              <b className="text-color-accent">New Generation SST(NGSST)</b>를 FTP 자동수신합니다.
              열적외선(AVHRR·MODIS) + 마이크로파(AMSR-E) 융합으로 구름 무관 일별 수온 제공.
            </div>
            <div className="flex flex-col gap-1 mt-1.5 text-label-2 text-fg-sub">
              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}>
                <span className="font-bold text-color-accent">영역</span> : 116~166°E, 13~63°N
                (북서태평양)
              </div>
              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}>
                <span className="font-bold text-color-accent">해상도</span> : 3분(약 5km) · 일 1회
                갱신
              </div>
              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}>
                <span className="font-bold text-color-accent">변환식</span> : SST(℃) = 0.15 × DN −
                3.0
              </div>
            </div>
          </div>
        </div>

        {/* 특허 기여율 */}
        <div
          className="rounded-lg p-3"
          style={{ background: 'rgba(234,179,8,.04)', border: '1px solid rgba(234,179,8,.2)' }}
        >
          <div className="text-label-2 font-bold mb-2 text-color-caution">
            📋 특허 지원 국가연구개발사업 및 기여율
          </div>
          <div className="grid grid-cols-2 gap-2 text-label-2 text-fg-sub">
            <div
              className="p-2 rounded-md"
              style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}
            >
              <div className="font-bold mb-1 text-color-accent">🔷 과제① (기여율 65%)</div>
              <div className="text-fg-sub leading-[1.6]">
                3차원 유출유 확산예측 기반 해양유류오염 방제 지원기술 개발
                <br />
                <span className="text-fg-default">해양수산부 | 2013.01~2013.12</span>
              </div>
            </div>
            <div
              className="p-2 rounded-md"
              style={{
                background: 'rgba(6,182,212,.05)',
                border: '1px solid rgba(6,182,212,.12)',
              }}
            >
              <div className="font-bold mb-1 text-color-info">🔶 과제② (기여율 35%)</div>
              <div className="text-fg-sub leading-[1.6]">
                주요 위험유해물질(HNS) 유출 거동예측 및 대응정보 지원기술 개발
                <br />
                <span className="text-fg-default">해양수산부 | 2013.01~2013.12</span>
              </div>
            </div>
          </div>
          <div
            className="mt-2 p-1.5 rounded text-label-2"
            style={{
              background: 'rgba(255,255,255,.02)',
              border: '1px solid var(--stroke-default)',
              color: 'var(--fg-disabled)',
            }}
          >
            특허권자: 한국해양과학기술원 | 발명자: 이문진·김혜진·이승현·전태병 | 등록번호:
            10-1567431 | 공고일: 2015.11.12
          </div>
        </div>
      </div>

      {/* KOSPS관련 유출유 확산예측 논문 */}
      <div className="rounded-[10px] p-[14px] mb-4 bg-bg-card border border-stroke">
        <div
          className="flex items-center gap-2.5 cursor-pointer select-none"
          onClick={() => setKospsPapersOpen(!kospsPapersOpen)}
        >
          <div
            className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-title-3 shrink-0"
            style={{ background: 'var(--bg-elevated)', border: '1px solid rgba(6,182,212,.25)' }}
          >
            📄
          </div>
          <div className="flex-1">
            <div className="text-label-1 font-bold">
              KOSPS관련 유출유 확산예측 논문{' '}
              <span
                className="text-label-2 ml-1"
                style={{
                  color: 'var(--fg-disabled)',
                  transition: 'transform .2s',
                  display: 'inline-block',
                  transform: kospsPapersOpen ? 'rotate(180deg)' : 'rotate(0)',
                }}
              >
                ▼
              </span>
            </div>
            <div className="text-label-2 mt-0.5 text-fg-default">
              KOSPS 개발 · 허베이스피리트 검증 · 3D 확산예측 시스템 · 방제효과 모델링 —
              한국해양환경·에너지학회
            </div>
          </div>
        </div>
        {kospsPapersOpen && (
          <div className="flex flex-col gap-2 mt-3.5">
            {[
              {
                tags: [
                  { label: '유출유 확산', color: '#06b6d4' },
                  { label: '허베이스피리트 검증', color: 'var(--color-info)' },
                  { label: 'Radarsat·GNOME', color: 'var(--color-accent)' },
                ],
                year: '2010',
                title: '허베이스피리트호 유출유 확산예측 검증 분석',
                authors:
                  '이문진, 김선동, 김혜진, 오세웅 (한국해양연구원 해양시스템안전연구소) | 한국해양과학기술협의회 공동학술대회 | 2010.6 | pp.3154',
                desc: '허베이 스피리트호 유출사고 당시 적용된 유출유 확산예측시스템의 결과를 2가지 검증방법으로 분석. (1) 사고당시 촬영된 Radarsat 인공위성영상에 나타난 유출유 분포와 확산예측시스템의 결과를 비교 분석, (2) 미국 NOAA의 유출유 확산예측시스템인 GNOME의 결과와 동일 입력조건 하에서 비교 검증. NAP 해양유출사고 대응지원시스템 구축 연구의 일부.',
              },
              {
                tags: [
                  { label: '3D 확산시스템', color: '#06b6d4' },
                  { label: '3차원 모델', color: 'var(--color-accent)' },
                  { label: 'Monte Carlo', color: 'var(--color-accent)' },
                ],
                year: '2013',
                title: '3차원 유출유 확산예측 시스템 연구',
                authors:
                  '이문진, 김혜진, 강관근 (한국해양과학기술원) | 한국해양과학기술협의회 공동학술대회 | 2013.5 | pp.17–18',
                desc: '해수순환에 따른 유출유의 해수중 거동을 실제와 부합하게 재현하기 위해 3차원 유출유 확산예측모델 개발. Monte Carlo Simulation 방법을 적용한 수치 추적자(numerical tracer) 방법에 근거하며, 해수유동에 의한 이송(transport)·난류에 의한 확산(turbulent diffusion)·유출유의 침강 및 표면혼합층의 혼탁효과·풍화작용(weathering effect)을 통합 모의. 허베이 스피리트호 사고에 적용(2007.12.7 07:00~2008.1.6 07:00, 약 720시간) — 바람 및 해수유동 재현 결과에 근거하여 3차원 유출유의 수직 이동을 포함한 분포 결과 및 수층 이동 재현. 한국해양과학기술원 지원 〈3차원 유출유 확산예측 기반 해양유류오염 방제지원 기술 개발〉 연구의 일부.',
              },
              {
                tags: [
                  { label: '모델 적용', color: '#06b6d4' },
                  { label: 'GS칼텍스·Captain Vangelis', color: 'var(--color-caution)' },
                ],
                year: '2014',
                title: '유출유 확산예측 모델의 해양사고 적용 및 개선방안 연구',
                authors:
                  '이문진, 김혜진 (선박해양플랜트연구소/KRISO) | 한국해양과학기술협의회 공동학술대회 | 2014.5 | pp.2353',
                desc: '유출유 확산예측 고도화의 일환으로 실제 해양사고에 유출유 확산예측 모델을 적용하고 개선방안 연구. 최근 발생한 GS 칼텍스 송유관 유출사고와 Captain Vangelis 유출사고에 적용하여, 사고로 발생된 유출유의 이동확산을 예측하고 현장 보고자료와 비교하여 유출유 확산 예측 모델의 정확도 및 문제점을 분석. 비교 분석을 토대로 기존 모델의 개선방안을 도출하고, 현실과 부합하는 현장상황 재현을 위한 신규 모델링 기술의 개발 방안 연구. 선박해양플랜트연구소 지원 〈3차원 유출유 확산예측 기반 해양유류오염 방제 지원기술 개발〉 연구의 일부.',
              },
              {
                tags: [
                  { label: '방제효과', color: '#06b6d4' },
                  { label: '오일펜스·유회수기·유처리제', color: 'var(--color-accent)' },
                ],
                year: '2014',
                title: '유출유 확산예측 모델의 방제효과 모델링 기술 연구',
                authors:
                  '이문진, 오상우, 정정열 (선박해양플랜트연구소/KRISO) | 한국해양과학기술협의회 공동학술대회 | 2014.5 | pp.2354',
                desc: '유출유 확산예측 모델의 정확도 제고를 위하여 유출유 방제효과와 모델링 기술 연구. 유출유 방제효과는 오일펜스의 차단 포집 효과, 유처리제 분산효과, 유회수기 회수효과 등을 고려하여 각각의 효과를 개별 모델로 개발하고 유출유 확산예측 모델과 통합. 오일펜스의 차단 포집효과 모델링에서는 오일펜스 자체의 누유율을 적용하여 유출유의 포집량 및 누유량을 시뮬레이션하며, 유처리제 분산효과 모델링에서는 유처리제 및 유출유 특성을 고려하여 분산에 따른 확산면적 변화를 시뮬레이션. 유회수기 회수 효과 모델링에서는 유회수기의 특성에 따라 회수율을 적용하여 유출유 해상 분포량의 변화를 시뮬레이션. 선박해양플랜트연구소 지원 〈3차원 유출유 확산예측 기반 해양유류오염 방제 지원기술 개발〉 연구의 일부.',
              },
            ].map((paper) => (
              <div
                key={paper.title}
                className="rounded-[9px] p-3"
                style={{
                  background: 'var(--bg-surface)',
                  border: '1px solid rgba(6,182,212,.18)',
                }}
              >
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-1.5">
                    {paper.tags.map((t) => (
                      <span
                        key={t.label}
                        style={{
                          padding: '2px 7px',
                          background: `${t.color}1A`,
                          border: `1px solid ${t.color}38`,
                          borderRadius: '4px',
                          fontSize: 'var(--font-size-label-2)',
                          fontWeight: 700,
                          color: t.color,
                        }}
                      >
                        {t.label}
                      </span>
                    ))}
                  </div>
                  <span className="text-label-2 text-fg-default">{paper.year}</span>
                </div>
                <div className="text-label-2 font-bold mb-1">{paper.title}</div>
                <div className="text-label-2 mb-1.5 text-fg-default">{paper.authors}</div>
                <div className="text-label-2 text-fg-sub leading-[1.7]">{paper.desc}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 국내 학술논문 */}
      <div className={`${card} ${cardBg}`}>
        <div
          className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
          onClick={() => setPapersOpen(!papersOpen)}
        >
          <span
            style={{
              ...tag('var(--fg-sub)'),
              fontWeight: 700,
              fontSize: 'var(--font-size-label-1)',
            }}
          >
            📄 국내 학술논문
          </span>
          <span
            className="text-label-2 ml-1"
            style={{
              color: 'var(--fg-disabled)',
              transition: 'transform .2s',
              display: 'inline-block',
              transform: papersOpen ? 'rotate(180deg)' : 'rotate(0)',
            }}
          >
            ▼
          </span>
        </div>
        {papersOpen && (
          <div className="flex flex-col gap-1.5 mb-3.5 text-label-2 text-fg-sub">
            {[
              {
                num: '①',
                title: '유출유 확산 예측 모델의 상시 운용 체계 개발에 관한 연구',
                authors: '김혜진 · 이문진 · 오세웅 · 강준묵',
                journal: '해양환경안전학회지',
                detail: '제17권 4호, pp.375-382 | 2011',
                desc: 'KOSPS 상시 운용 체계 구축 · 정적/동적 자료 FTP 자동 연계 · 서해·남해 시범 운용 성능 평가',
                color: 'var(--color-accent)',
              },
              {
                num: '②',
                title: '해양오염 방제지원시스템 구축을 위한 실시간 조류 예측 기술 개발',
                authors: '이문진 · 강용균 외',
                journal: '해양환경안전학회 춘계학술발표회',
                detail: '| 2008',
                desc: 'CHARRY 모델 인천·서해 적용 검증 · 창조/낙조 실시간 조류 재현 결과',
                color: 'var(--color-accent)',
              },
              {
                num: '③',
                title: '표면 취송류 라그랑지안 측류 및 수치모델링',
                authors: '이문진 · 강용균',
                journal: '한국해양학회지',
                detail: '| 2000',
                desc: '취송류 경험식 V=0.029·Vw, θ=θw+18.6° 도출 · 국내 연안 현장 관측 기반',
                color: 'var(--color-accent)',
              },
              {
                num: '④',
                title: '허베이스피리트호 유출유 확산예측 검증 분석',
                authors: '이문진 · 김선동 · 김혜진 · 오세웅',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.3154 | 2010',
                desc: '허베이 스피리트호 유출사고 당시 확산예측시스템 결과 검증 · Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증',
                color: 'var(--color-info)',
                tags: ['허베이스피리트', 'Radarsat 위성영상', 'GNOME 비교검증'],
              },
              {
                num: '⑤',
                title: '3차원 유출유 확산예측 시스템 연구',
                authors: '이문진 · 김혜진 · 강관근',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.17-18 | 2013',
                desc: 'Monte Carlo Simulation + 수치 추적자 방법 기반 3차원 유출유 확산예측모델 개발 · 이송·난류확산·침강·혼탁효과·풍화작용 통합 모의 · 허베이 스피리트호 720시간 적용 검증',
                color: 'var(--color-accent)',
                tags: ['3D 확산모델', 'Monte Carlo', '수치추적자', '720시간 검증'],
              },
              {
                num: '⑥',
                title: '유출유 확산예측 모델의 해양사고 적용 및 개선방안 연구',
                authors: '이문진 · 김혜진',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.2353 | 2014',
                desc: 'GS 칼텍스 송유관 유출사고 · Captain Vangelis 유출사고에 모델 적용 · 현장 보고자료와 비교 분석 · 기존 모델 개선방안 도출 · 신규 모델링 기술 개발 방안',
                color: 'var(--fg-default)',
                tags: ['GS칼텍스', 'Captain Vangelis', '현장검증', '모델개선'],
              },
              {
                num: '⑦',
                title: '유출유 확산예측 모델의 방제효과 모델링 기술 연구',
                authors: '이문진 · 오상우 · 정정열',
                journal: '한국해양과학기술협의회 공동학술대회',
                detail: 'pp.2354 | 2014',
                desc: '오일펜스 차단 포집 효과(누유율) · 유처리제 분산효과(확산면적 변화) · 유회수기 회수효과(해상 분포량 변화) 개별 모델 개발 및 확산예측 모델과 통합',
                color: 'var(--color-accent)',
                tags: ['오일펜스', '유처리제', '유회수기', '방제효과 통합'],
              },
              {
                num: '⑧',
                title: '해양유류오염사고 위해도 평가에 관한 연구',
                authors: '이문진 · 김혜진',
                journal: '한국해양공학회지',
                detail: '제23권 1호, pp.24-30 | 2009',
                desc: '라그랑쥐 입자추적 + fBm 난류확산 모델 · CHARRY 실시간 조류예측 · 취송류 교적계수 반응함수 · 20년 과거자료 기반 100회 몬테카를로 통계 위험평가 · 가로림만 해안/어장 도달확률·도달시간 산정',
                color: 'var(--color-accent)',
                tags: ['Monte Carlo 100회', 'fBm 난류확산', '통계적 위험평가', '가로림만'],
              },
              {
                num: '⑨',
                title: '해양정보기반 방제지원시스템 프로토타입 구축에 관한 연구',
                authors: '김혜진 · 이문진',
                journal: '한국지리정보학회지',
                detail: '제11권 4호, pp.182-192 | 2008',
                desc: 'KOSPS 원형 시스템 · CHARRY 모델 기반 실시간 조류예측 + fBm 난류확산 통합 · GIS 기반 ESI 방제정보지도 통합 · 통계적 피해위험도(20년 200회) + 실시간 위험도 이원 체계',
                color: 'var(--color-accent)',
                tags: ['KOSPS 원형', 'GIS-ESI 통합', '의사결정지원', '인천-대산'],
              },
              {
                num: '⑩',
                title: '유출유의 초기 확산예측을 위한 고해상도 결합모형 개발',
                authors: '손상영 · 이칠우 · 윤현덕 · 정태화',
                journal: '한국해안·해양공학회논문집',
                detail: '제29권 4호, pp.189-197 | 2017',
                desc: 'Boussinesq 동수역학 모형 + MEDSLIK-II 유류 이송-확산-변형 모형 외적 결합 · Lagrangian 유막 표현 · 울산 진하해역 시뮬레이션 검증',
                color: 'var(--color-accent)',
                tags: ['Boussinesq', 'MEDSLIK-II', '고해상도 결합', '울산 진하'],
              },
            ].map((paper) => (
              <div
                key={paper.num}
                className="rounded-lg p-2.5"
                style={{
                  background: 'var(--bg-base)',
                  border: '1px solid var(--stroke-default)',
                  display: 'grid',
                  gridTemplateColumns: '28px 1fr',
                  gap: '10px',
                  alignItems: 'start',
                }}
              >
                <div
                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                  style={{ background: `${paper.color}1F` }}
                >
                  {paper.num}
                </div>
                <div>
                  <div className="font-bold mb-0.5">{paper.title}</div>
                  <div className="text-fg-default leading-[1.6]">
                    {paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b>{' '}
                    {paper.detail}
                  </div>
                  <div className="mt-1 text-fg-sub">{paper.desc}</div>
                  {paper.tags && (
                    <div className="flex flex-wrap gap-1 mt-1">
                      {paper.tags.map((t) => (
                        <span key={t} style={tag(paper.color)}>
                          {t}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 국외 핵심 논문 */}
      <div className={`${card} ${cardBg}`}>
        <div
          className="flex items-center gap-1.5 mb-2 cursor-pointer select-none"
          onClick={() => setIntlPapersOpen(!intlPapersOpen)}
        >
          <span
            style={{
              ...tag('var(--fg-sub)'),
              fontWeight: 700,
              fontSize: 'var(--font-size-label-1)',
            }}
          >
            🌐 국외 핵심 논문
          </span>
          <span
            className="text-label-2 ml-1"
            style={{
              color: 'var(--fg-disabled)',
              transition: 'transform .2s',
              display: 'inline-block',
              transform: intlPapersOpen ? 'rotate(180deg)' : 'rotate(0)',
            }}
          >
            ▼
          </span>
        </div>
        {intlPapersOpen && (
          <div className="flex flex-col gap-1.5 text-label-2 text-fg-sub">
            {[
              {
                num: '①',
                title: 'OpenDrift v1.0: a generic framework for trajectory modelling',
                authors: 'Dagestad et al.',
                journal: 'Geoscientific Model Development',
                detail: 'Vol.11, pp.1405-1420 | 2018',
                desc: 'OpenDrift 프레임워크 전체 설계·구현·검증 · Python 모듈화 구조 · OpenOil 유출유 모듈 포함',
                color: 'var(--color-accent)',
              },
              {
                num: '②',
                title:
                  'Observation-based evaluation of surface wave effects on oil spill trajectories',
                authors: 'Röhrs et al.',
                journal: 'J. Geophys. Res. Oceans',
                detail: '| 2013',
                desc: 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 검증',
                color: 'var(--color-accent)',
              },
              {
                num: '③',
                title: 'Numerical modelling and fate assessment of oil spills at sea',
                authors: 'Nordam et al.',
                journal: 'Marine Pollution Bulletin',
                detail: '| 2019',
                desc: '3D 유출유 수직 분포 모의 · 해저면 도달 경로 분석 · 풍화 통합 수치 검증',
                color: 'var(--color-accent)',
              },
              {
                num: '④',
                title: 'The spreading of oil in the sea',
                authors: 'Fay, J.A.',
                journal: 'Oil on the Sea, Plenum Press',
                detail: '| 1969',
                desc: '유출유 퍼짐 3단계 이론(중력-관성력, 관성력-점성력, 표면장력-점성력) 원전. KOSPS 풍화모델 기반',
                color: 'var(--color-accent)',
              },
              {
                num: '⑤',
                title: 'Evaporation and dissolution of oil spills',
                authors: 'Stiver, W. & Mackay, D.',
                journal: 'Environmental Science & Technology',
                detail: '18(11) | 1984',
                desc: '증발 해석 모델 · 증류 데이터 기반 증발비 산정 · KOSPS 증발 서브모듈 직접 적용',
                color: 'var(--color-accent)',
              },
              {
                num: '⑥',
                title: 'A physical-chemical model of the dispersal of oil in water',
                authors: 'Mackay, D. et al.',
                journal: 'Environmental Science & Technology',
                detail: '| 1980',
                desc: '유상화(water-in-oil) 모델 · 소산·유상화 통합 수리 공식. KOSPS·OpenOil 양쪽 공통 적용',
                color: 'var(--color-accent)',
              },
              {
                num: '⑦',
                title:
                  'Bivariate interpolation and smooth surface fitting based on local procedures',
                authors: 'Akima, H.',
                journal: 'Commun. ACM 17(1) | 1974 / ACM TOMS | 1978',
                detail: '',
                desc: '2차원 5차다항식 보간법(Bivariate Quintic). KOSPS 수심·수온 격자 보간 알고리즘 직접 적용',
                color: 'var(--color-accent)',
              },
            ].map((paper) => (
              <div
                key={paper.num}
                className="rounded-lg p-2.5"
                style={{
                  background: 'var(--bg-base)',
                  border: '1px solid var(--stroke-default)',
                  display: 'grid',
                  gridTemplateColumns: '28px 1fr',
                  gap: '10px',
                  alignItems: 'start',
                }}
              >
                <div
                  className="w-6 h-6 rounded-[5px] flex items-center justify-center text-label-2 shrink-0"
                  style={{ background: `${paper.color}1F` }}
                >
                  {paper.num}
                </div>
                <div>
                  <div className="font-bold mb-0.5">{paper.title}</div>
                  <div className="text-fg-default leading-[1.6]">
                    {paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b>{' '}
                    {paper.detail}
                  </div>
                  <div className="mt-1 text-fg-sub">{paper.desc}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
