import { sanitizeHtml } from '@common/utils/sanitize';

export function RescueTheoryView() {
  const contentHtml = `
      <div style="font-size:18px;font-weight:700;margin-bottom:4px;font-family:var(--font-korean)">📚 긴급구난모델 이론</div>
      <div style="font-size:12px;color:var(--fg-disabled);margin-bottom:22px;font-family:var(--font-korean)">해상 긴급구난 자원 배치·최적화 이론 및 참고 연구 문헌</div>

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start">

        <!-- 왼쪽 컬럼 -->
        <div style="display:flex;flex-direction:column;gap:14px">

          <!-- 다목적 최적화 모델 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:var(--radius-md);overflow:hidden">
            <div style="padding:12px 16px;background:rgba(6,182,212,.08);border-bottom:1px solid var(--stroke-default);display:flex;align-items:center;gap:8px">
              <span style="font-size:14px">⚙️</span>
              <span style="font-size:12px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">다목적 최적화 자원 배치</span>
            </div>
            <div style="padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:9px;font-family:var(--font-korean)">

              <!-- Dong et al. 2024 -->
              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px;border-left:2px solid var(--color-accent)">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(6,182,212,.2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:700;color:var(--color-accent)">①</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">A Multi-Objective Optimization Method for Maritime SAR Resource Allocation: South China Sea</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">Dong, Y. et al. | <i>J. Marine Science and Engineering</i> Vol.12(1):184, 2024 · DOI: <a href="https://doi.org/10.3390/jmse12010184" target="_blank" style="color:var(--color-info);text-decoration:none">10.3390/jmse12010184</a> · MDPI Open Access</div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:3px;color:var(--color-accent);font-size:8px">DNSGA-II</span>
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">다목적 최적화</span>
                    <span style="padding:1px 5px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:3px;color:var(--color-info);font-size:8px">구조선·항공기 배치</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">해상 사고 후 구조자원(구조선·항공기) 배치 최적화. 비용·응답시간 동시 최소화 DNSGA-II 진화적 최적화. 남중국해 적용 검증. WING 긴급구난 자산 우선순위 배치 알고리즘의 직접 참고 모델.</div>
                </div>
              </div>

              <!-- Zhang et al. 2017 -->
              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px;border-left:2px solid var(--color-accent)">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(6,182,212,.2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:700;color:var(--color-accent)">②</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">Optimized Maritime Emergency Resource Allocation under Dynamic Demand</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">Zhang, W., Yan, X. &amp; Yang, J. | <i>PLoS ONE</i> 12(12):e0189411, 2017 · DOI: <a href="https://doi.org/10.1371/journal.pone.0189411" target="_blank" style="color:var(--color-info);text-decoration:none">10.1371/journal.pone.0189411</a> · Open Access</div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:3px;color:var(--color-accent);font-size:8px">동적 수요 모델</span>
                    <span style="padding:1px 5px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:3px;color:var(--color-warning);font-size:8px">강건 최적화(Robust)</span>
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">불확실 수요 대응</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">동적·불확실 수요 반영 긴급구난 자원 배치 다목적 최적화 및 강건 최적화. WING 해상 상황 변화에 따른 실시간 자원 재배치 모델 이론 근거.</div>
                </div>
              </div>

              <!-- Ma et al. 2023 -->
              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(6,182,212,.12);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">③</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">A Method for Optimizing Maritime Emergency Resource Allocation in Inland Waterways</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">Ma, Q. et al. | <i>Ocean Engineering</i> Vol.282:116224, 2023 · DOI: <a href="https://doi.org/10.1016/j.oceaneng.2023.116224" target="_blank" style="color:var(--color-info);text-decoration:none">10.1016/j.oceaneng.2023.116224</a> · Open Access</div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:3px;color:var(--color-success);font-size:8px">AHP</span>
                    <span style="padding:1px 5px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:3px;color:var(--color-info);font-size:8px">DEA 효율성 평가</span>
                    <span style="padding:1px 5px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:3px;color:var(--color-warning);font-size:8px">내수로 적용</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">AHP(계층분석법)+DEA(자료포락분석)로 긴급구난 자원 효율성 평가 및 최적 배치. WING 자원 효율성 지수 산정·우선순위 결정 방법론 참조.</div>
                </div>
              </div>

            </div>
          </div>

          <!-- 오일스필 동적 스케줄링 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:var(--radius-md);overflow:hidden">
            <div style="padding:12px 16px;background:rgba(249,115,22,.08);border-bottom:1px solid var(--stroke-default);display:flex;align-items:center;gap:8px">
              <span style="font-size:14px">🛢</span>
              <span style="font-size:12px;font-weight:700;color:var(--color-warning);font-family:var(--font-korean)">오일스필 동적 자원 스케줄링</span>
            </div>
            <div style="padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:9px;font-family:var(--font-korean)">

              <!-- Zhang 2020 -->
              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px;border-left:2px solid var(--color-warning)">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(249,115,22,.2);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:700;color:var(--color-warning)">①</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">Dynamic Optimization of Emergency Resource Scheduling in a Large-Scale Maritime Oil Spill Accident</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">Zhang, L. | LJMU Research Online, 2020 · <a href="https://researchonline.ljmu.ac.uk/id/eprint/14880/3/Dynamic%20optimization%20of%20emergency%20resource%20scheduling%20in%20a%20large-scale%20maritime%20oil%20spill%20accident.pdf" target="_blank" style="color:var(--color-info);text-decoration:none">PDF 공개</a></div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.2);border-radius:3px;color:var(--color-warning);font-size:8px">Location-Routing 최적화</span>
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">하이브리드 휴리스틱</span>
                    <span style="padding:1px 5px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:3px;color:var(--color-accent);font-size:8px">Pareto 다목적</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">동적 Location-Routing 최적화 모델 + 하이브리드 휴리스틱 알고리즘으로 대규모 해양 오일스필 응급자원 스케줄링·라우팅 다목적 최적화. WING 방제정 동적 라우팅 모델의 이론 선행연구.</div>
                </div>
              </div>

            </div>
          </div>

        </div>

        <!-- 오른쪽 컬럼 -->
        <div style="display:flex;flex-direction:column;gap:14px">

          <!-- UAV·예측 기반 SAR -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:var(--radius-md);overflow:hidden">
            <div style="padding:12px 16px;background:rgba(168,85,247,.08);border-bottom:1px solid var(--stroke-default);display:flex;align-items:center;gap:8px">
              <span style="font-size:14px">🚁</span>
              <span style="font-size:12px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">UAV·예측 기반 해상구조 (보조자료)</span>
            </div>
            <div style="padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:9px;font-family:var(--font-korean)">

              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(168,85,247,.12);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">①</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">From Forecast to Action: UAV-Based Maritime SAR Deployment Optimization</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">arXiv:2512.09260 · <a href="https://arxiv.org/abs/2512.09260" target="_blank" style="color:var(--color-info);text-decoration:none">arxiv.org/abs/2512.09260</a></div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">예측 기반 UAV 배치</span>
                    <span style="padding:1px 5px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:3px;color:var(--color-success);font-size:8px">SAR 최적화</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">해상 조난 예측 → UAV 사전 배치 최적화. 예측-행동 연계 프레임워크. WING 항공탐색 연동 구조자원 선제 배치 참고 연구.</div>
                </div>
              </div>

              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(168,85,247,.12);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">②</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">UAV-Assisted SAR Latency Optimization</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">arXiv:2511.00844 · <a href="https://arxiv.org/abs/2511.00844" target="_blank" style="color:var(--color-info);text-decoration:none">arxiv.org/abs/2511.00844</a></div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">UAV 지원 구조</span>
                    <span style="padding:1px 5px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:3px;color:var(--color-danger);font-size:8px">응답 지연 최소화</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">UAV 지원 해상 구조 처리·지연 최적화. 통신·처리 지연 모델링 및 UAV 경로 최적화.</div>
                </div>
              </div>

              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(168,85,247,.12);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">③</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">UAV Path Planning for SAR: Performance Evaluation</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">arXiv:2402.01494 · <a href="https://arxiv.org/abs/2402.01494" target="_blank" style="color:var(--color-info);text-decoration:none">arxiv.org/abs/2402.01494</a></div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">UAV 경로계획</span>
                    <span style="padding:1px 5px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:3px;color:var(--color-info);font-size:8px">성능 평가</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">SAR 임무용 UAV 경로계획 알고리즘 성능 비교 평가. 탐색 커버리지·효율성 지표 분석.</div>
                </div>
              </div>

              <div style="display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 10px;background:var(--bg-base);border-radius:6px">
                <div style="width:20px;height:20px;border-radius:4px;background:rgba(168,85,247,.12);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">④</div>
                <div>
                  <div style="color:var(--fg-default);font-weight:700;margin-bottom:2px">Probabilistic Submarine Search and Rescue Strategy</div>
                  <div style="color:var(--fg-disabled);line-height:1.6">arXiv:2505.02186 · <a href="https://arxiv.org/abs/2505.02186" target="_blank" style="color:var(--color-info);text-decoration:none">arxiv.org/abs/2505.02186</a></div>
                  <div style="margin-top:3px;display:flex;flex-wrap:wrap;gap:3px">
                    <span style="padding:1px 5px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:3px;color:var(--color-tertiary);font-size:8px">확률론적 탐색</span>
                    <span style="padding:1px 5px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:3px;color:var(--color-danger);font-size:8px">잠수함 구조</span>
                  </div>
                  <div style="margin-top:2px;color:var(--fg-sub)">잠수함 구조 전략 확률론적 최적화. Bayesian 탐색 이론 기반 구조자원 투입 전략 도출.</div>
                </div>
              </div>

            </div>
          </div>

          <!-- 비교 요약 테이블 -->
          <div style="background:var(--bg-card);border:1px solid var(--stroke-default);border-radius:var(--radius-md);overflow:hidden">
            <div style="padding:12px 16px;background:rgba(34,197,94,.08);border-bottom:1px solid var(--stroke-default);display:flex;align-items:center;gap:8px">
              <span style="font-size:14px">📊</span>
              <span style="font-size:12px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">논문 비교 요약</span>
            </div>
            <div style="overflow-x:auto">
              <table style="width:100%;border-collapse:collapse;font-size:9px;font-family:var(--font-korean)">
                <thead>
                  <tr style="background:var(--bg-base)">
                    <th style="padding:8px 10px;text-align:left;font-weight:700;color:var(--fg-sub);border-bottom:1px solid var(--stroke-default)">논문</th>
                    <th style="padding:8px 10px;text-align:left;font-weight:700;color:var(--fg-sub);border-bottom:1px solid var(--stroke-default)">키워드</th>
                    <th style="padding:8px 10px;text-align:left;font-weight:700;color:var(--fg-sub);border-bottom:1px solid var(--stroke-default)">WING 활용</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style="border-bottom:1px solid var(--stroke-default)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-accent)">Dong et al. (2024)</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">DNSGA-II 다목적 최적화</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">구조자산 배치 최적화</td>
                  </tr>
                  <tr style="border-bottom:1px solid var(--stroke-default)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-accent)">Zhang et al. (2017)</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">동적수요·강건 최적화</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">실시간 자원 재배치</td>
                  </tr>
                  <tr style="border-bottom:1px solid var(--stroke-default)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-accent)">Ma et al. (2023)</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">AHP + DEA</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">자원 효율성 평가</td>
                  </tr>
                  <tr style="border-bottom:1px solid var(--stroke-default)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-warning)">Zhang (2020)</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">동적 Location-Routing</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">방제정 라우팅 모델</td>
                  </tr>
                  <tr style="border-bottom:1px solid var(--stroke-default)">
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-tertiary)">arXiv:2512.09260</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">예측→UAV 배치</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">항공탐색 연동 선제배치</td>
                  </tr>
                  <tr>
                    <td style="padding:7px 10px;font-weight:700;color:var(--color-tertiary)">arXiv:2505.02186</td>
                    <td style="padding:7px 10px;color:var(--fg-sub)">확률론적 탐색전략</td>
                    <td style="padding:7px 10px;color:var(--fg-disabled)">구조구역 확률 탐색</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>

      <!-- 긴급구난 관련 논문 -->
      <div style="margin-top:18px;border-radius:12px;padding:16px;background:linear-gradient(135deg,rgba(168,85,247,.05),rgba(59,130,246,.03));border:1px solid rgba(168,85,247,.2);position:relative;overflow:hidden">
        <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-tertiary),var(--color-info))"></div>
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
          <div style="width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);flex-shrink:0">📄</div>
          <div>
            <div style="font-size:12px;font-weight:700;color:var(--fg-default);font-family:var(--font-korean)">긴급구난 관련 논문</div>
            <div style="font-size:10px;margin-top:2px;color:var(--fg-disabled);font-family:var(--font-korean)">해양수색구조 의사결정지원 · 실시간 데이터·AI 기반 신속 대응</div>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:8px">
          <div style="border-radius:9px;padding:12px;background:var(--bg-surface);border:1px solid rgba(168,85,247,.18);border-left:3px solid var(--color-tertiary)">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
              <div style="display:flex;align-items:center;gap:5px">
                <span style="padding:2px 7px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.22);border-radius:4px;font-size:10px;font-weight:700;color:#3b82f6;font-family:var(--font-korean)">수색구조</span>
                <span style="padding:2px 7px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.22);border-radius:4px;font-size:10px;font-weight:700;color:var(--color-tertiary);font-family:var(--font-korean)">의사결정지원</span>
              </div>
              <span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean)">2025</span>
            </div>
            <div style="font-size:11px;font-weight:700;margin-bottom:4px;color:var(--fg-default);font-family:var(--font-korean)">지능형 해양수색구조 의사결정지원시스템: 신속한 대응을 위한 데이터와 기술 활용</div>
            <div style="font-size:11px;margin-bottom:6px;color:var(--fg-disabled);font-family:var(--font-korean)">김충기, 정해상, 이성숙, 윤종휘 | 한국해양환경·에너지학회 학술대회논문집 | 2025.5 | pp.160</div>
            <div style="font-size:11px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">초고해상도 3차원 연안 해양예측모델, 다중모델 앙상블 기법, AI 기반 확률론적 표류경로 예측 기술을 통합한 지능형 해양 수색구조 의사결정지원시스템 개발. 실해역 부유체 표류 실험과 예측 모델 검증을 통해 고정밀 성능을 확보하고, 수색 성공 확률 기반 스마트 수색계획 자동화 및 최적 자원 동원 알고리즘을 개발. 사고 발생부터 표류 예측, 수색계획 수립, 자원배치, 결과보고에 이르는 전 과정을 통합한 플랫폼을 시범 구축하고 시뮬레이션을 통해 현장 활용성을 확인. 해양경찰청 지원(RS-2022-KS221629).</div>
          </div>
          <div style="border-radius:9px;padding:12px;background:var(--bg-surface);border:1px solid rgba(59,130,246,.18);border-left:3px solid #3b82f6">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
              <div style="display:flex;align-items:center;gap:5px">
                <span style="padding:2px 7px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.22);border-radius:4px;font-size:10px;font-weight:700;color:#3b82f6;font-family:var(--font-korean)">AI·SAR</span>
                <span style="padding:2px 7px;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.22);border-radius:4px;font-size:10px;font-weight:700;color:var(--color-accent);font-family:var(--font-korean)">한국형 시스템</span>
                <span style="padding:2px 7px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);border-radius:4px;font-size:10px;font-weight:700;color:var(--color-success);font-family:var(--font-korean)">표류예측</span>
              </div>
              <span style="font-size:10px;color:var(--fg-disabled);font-family:var(--font-korean)">2024</span>
            </div>
            <div style="font-size:11px;font-weight:700;margin-bottom:4px;color:var(--fg-default);font-family:var(--font-korean)">AI 기반 한국형 해양수색구조 의사결정 지원시스템</div>
            <div style="font-size:11px;margin-bottom:6px;color:var(--fg-disabled);font-family:var(--font-korean)">김충기, 정해상, 윤종휘, 박창석, 김종호 | 한국환경연구원 물국토연구본부, 한국해양대학교 해양경찰학부 | 한국해양환경·에너지학회 추계학술대회 | 2024.11 | pp.127</div>
            <div style="font-size:11px;color:var(--fg-sub);font-family:var(--font-korean);line-height:1.7">한국형 부유체 표류특성을 분석하고, 초고해상도 3차원 연안 해양예측 모델 개발, 다중모델 앙상블 해양기상 예측, AI 기반 부유체 표류경로 예측, AI 기반 수색전략 수립 지원 등 AI 기반 한국형 해양수색구조 의사결정 지원 시스템을 구축. 연간 해양사고 경제적 손실 4,390억~5,420억 원 규모에 대응하여 신속하고 정확한 수색구조 활동을 지원하고 조난자의 생존 확률을 높이고 구조인력의 안전을 보장. 해양경찰청 지원(RS-2022-KS221629, 지능형 해양사고 대응 플랫폼 구축).</div>
          </div>
        </div>
      </div>
  `;

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        width: '100%',
        flex: 1,
        overflow: 'hidden',
        background: 'var(--bg-base)',
      }}
    >
      <div
        style={{
          flex: 1,
          overflowY: 'auto',
          scrollbarWidth: 'thin',
          scrollbarColor: 'var(--stroke-light) transparent',
          padding: '28px 36px',
        }}
        dangerouslySetInnerHTML={{ __html: sanitizeHtml(contentHtml) }}
      />
    </div>
  );
}
