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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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