<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header class="header">
        <h1>위성,드론 활용 농업재해 모니터링 시스템</h1>
    </header>

    <main class="main-container">
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul class="menu-list">
                    <li><a href="#" class="menu-item active" data-page="intro">Intro</a></li>
                    <li><a href="#" class="menu-item" data-page="waterbody">Water Body 추출</a></li>
                    <li class="has-submenu">
                        <a href="#" class="menu-item" data-page="flood-monitoring">침수</a>
                        <ul class="submenu">
                            <li><a href="#" class="submenu-item" data-page="flood-monitoring">침수 모니터링</a></li>
                            <li><a href="#" class="submenu-item" data-page="flood-simulation">3D 시뮬레이션</a></li>
                            <li><a href="#" class="submenu-item" data-page="flood-waterlevel">수위 곡선</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu">
                        <a href="#" class="menu-item" data-page="drought-monitoring">가뭄</a>
                        <ul class="submenu">
                            <li><a href="#" class="submenu-item" data-page="drought-monitoring">가뭄 모니터링</a></li>
                            <li><a href="#" class="submenu-item" data-page="drought-simulation">3D 시뮬레이션</a></li>
                            <li><a href="#" class="submenu-item" data-page="drought-waterlevel">시계열 변화 그래프</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="menu-item" data-page="kma-test">고흥 단기예보</a></li>
                </ul>
            </nav>
        </aside>
        <section class="content">
            <!-- Intro -->
            <div class="page-content active" id="intro">
                <div class="intro-dashboard">
                    <!-- 상단: 지도 + 현재 상태 -->
                    <div class="intro-top">
                        <!-- 왼쪽: 지도 -->
                        <div class="intro-map-section">
                            <div class="intro-map-header">
                                <h3>고흥군 모니터링</h3>
                                <span class="live-badge">LIVE</span>
                            </div>
                            <div id="map-intro" class="intro-map"></div>
                        </div>
                        <!-- 오른쪽: 현재 상태 요약 -->
                        <div class="intro-status-section">
                            <div class="current-status-card">
                                <div class="status-header">
                                    <span class="status-location">고흥군</span>
                                    <span class="status-date" id="current-datetime">2026.01.28 (화)</span>
                                </div>
                                <div class="status-main">
                                    <div class="status-icon safe">
                                        <span class="icon-circle"></span>
                                    </div>
                                    <div class="status-text">
                                        <span class="status-label">현재 상태</span>
                                        <span class="status-value">정상</span>
                                    </div>
                                </div>
                                <div class="status-details">
                                    <div class="detail-item">
                                        <span class="detail-label">저수율</span>
                                        <span class="detail-value">67%</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">토양수분</span>
                                        <span class="detail-value">45%</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="detail-label">누적강수</span>
                                        <span class="detail-value">12.5mm</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 날짜 선택 -->
                            <div class="date-selector">
                                <select class="date-select" id="select-year">
                                    <option value="2026">2026년</option>
                                    <option value="2025">2025년</option>
                                    <option value="2024">2024년</option>
                                </select>
                                <select class="date-select" id="select-month">
                                    <option value="1">1월</option>
                                    <option value="2">2월</option>
                                    <option value="3">3월</option>
                                    <option value="4">4월</option>
                                    <option value="5">5월</option>
                                    <option value="6">6월</option>
                                    <option value="7">7월</option>
                                    <option value="8">8월</option>
                                    <option value="9">9월</option>
                                    <option value="10">10월</option>
                                    <option value="11">11월</option>
                                    <option value="12">12월</option>
                                </select>
                                <select class="date-select" id="select-day">
                                    <option value="1">1일</option>
                                </select>
                                <button class="btn-search" id="btn-date-search">조회</button>
                            </div>
                        </div>
                    </div>
                    <!-- 하단: 예측 모니터링 카드 -->
                    <div class="intro-monitoring">
                        <!-- 침수 예측 카드 -->
                        <div class="monitoring-card flood">
                            <div class="card-header">
                                <div class="card-icon flood-icon">
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"/></svg>
                                </div>
                                <h4>침수 예측</h4>
                            </div>
                            <div class="card-body">
                                <div class="probability-display">
                                    <span class="prob-value" id="flood-prob">23</span>
                                    <span class="prob-unit">%</span>
                                </div>
                                <div class="prob-bar">
                                    <div class="prob-fill flood-fill" style="width: 23%"></div>
                                </div>
                                <span class="prob-status safe">낮음</span>
                            </div>
                            <div class="card-footer">
                                <div class="forecast-mini">
                                    <div class="forecast-item">
                                        <span class="fc-day">내일</span>
                                        <span class="fc-value">25%</span>
                                    </div>
                                    <div class="forecast-item">
                                        <span class="fc-day">모레</span>
                                        <span class="fc-value">30%</span>
                                    </div>
                                    <div class="forecast-item">
                                        <span class="fc-day">3일후</span>
                                        <span class="fc-value">28%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 가뭄 예측 카드 -->
                        <div class="monitoring-card drought">
                            <div class="card-header">
                                <div class="card-icon drought-icon">
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z"/></svg>
                                </div>
                                <h4>가뭄 예측</h4>
                            </div>
                            <div class="card-body">
                                <div class="probability-display">
                                    <span class="prob-value" id="drought-prob">58</span>
                                    <span class="prob-unit">%</span>
                                </div>
                                <div class="prob-bar">
                                    <div class="prob-fill drought-fill" style="width: 58%"></div>
                                </div>
                                <span class="prob-status warning">주의</span>
                            </div>
                            <div class="card-footer">
                                <div class="forecast-mini">
                                    <div class="forecast-item">
                                        <span class="fc-day">내일</span>
                                        <span class="fc-value">60%</span>
                                    </div>
                                    <div class="forecast-item">
                                        <span class="fc-day">모레</span>
                                        <span class="fc-value">65%</span>
                                    </div>
                                    <div class="forecast-item">
                                        <span class="fc-day">3일후</span>
                                        <span class="fc-value">62%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 종합 위험도 카드 -->
                        <div class="monitoring-card overall">
                            <div class="card-header">
                                <div class="card-icon overall-icon">
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"/></svg>
                                </div>
                                <h4>종합 위험도</h4>
                            </div>
                            <div class="card-body">
                                <div class="risk-gauge">
                                    <div class="gauge-circle">
                                        <svg viewBox="0 0 36 36" class="gauge-svg">
                                            <path class="gauge-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                            <path class="gauge-fill warning" stroke-dasharray="45, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                        </svg>
                                        <div class="gauge-text">
                                            <span class="gauge-value">45</span>
                                            <span class="gauge-label">보통</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="risk-legend">
                                    <span class="legend-dot safe"></span> 안전
                                    <span class="legend-dot warning"></span> 주의
                                    <span class="legend-dot danger"></span> 위험
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Water Body 추출 -->
            <div class="page-content" id="waterbody">
                <div class="waterbody-page">
                    <div class="waterbody-header">
                        <h2>Water Body 추출</h2>
                        <p class="waterbody-desc">위성/드론 이미지에서 수체(Water Body)를 자동으로 검출합니다.</p>
                    </div>
                    <!-- 이미지 비교 영역 -->
                    <div class="waterbody-comparison">
                        <!-- 왼쪽: 입력 이미지 (Drag & Drop) -->
                        <div class="comparison-panel input-panel">
                            <div class="panel-header">
                                <span class="panel-title">INPUT</span>
                                <span class="panel-subtitle">원본 이미지</span>
                            </div>
                            <div class="panel-content">
                                <div class="dropzone" id="wb-dropzone">
                                    <input type="file" id="wb-file-input" accept="image/*" hidden>
                                    <div class="dropzone-content" id="wb-dropzone-content">
                                        <div class="dropzone-icon">
                                            <svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48">
                                                <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                                            </svg>
                                        </div>
                                        <p class="dropzone-text">이미지를 드래그하여 놓거나</p>
                                        <button class="btn-browse" id="btn-wb-browse">파일 선택</button>
                                        <p class="dropzone-hint">JPG, PNG 형식 지원</p>
                                    </div>
                                    <div class="dropzone-preview" id="wb-preview" style="display: none;">
                                        <img id="wb-input-image" class="preview-image" src="" alt="입력 이미지">
                                        <button class="btn-remove-image" id="btn-wb-remove">X</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 중앙: 추출 버튼 -->
                        <div class="comparison-center">
                            <button class="btn-extract" id="btn-waterbody-extract" disabled>
                                <span class="btn-extract-text">추출</span>
                                <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                                    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
                                </svg>
                            </button>
                            <div class="extract-loading" id="wb-extract-loading" style="display: none;">
                                <div class="loading-spinner"></div>
                                <span>분석 중...</span>
                            </div>
                        </div>
                        <!-- 오른쪽: 결과 이미지 -->
                        <div class="comparison-panel output-panel">
                            <div class="panel-header">
                                <span class="panel-title">OUTPUT</span>
                                <span class="panel-subtitle">Water Body 검출 결과</span>
                            </div>
                            <div class="panel-content">
                                <div class="result-container" id="wb-result-container">
                                    <div class="result-placeholder" id="wb-result-placeholder">
                                        <svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48">
                                            <path d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"/>
                                        </svg>
                                        <p>이미지를 업로드하고<br>추출 버튼을 클릭하세요</p>
                                    </div>
                                    <img id="wb-output-image" class="result-image" src="" alt="추출 결과" style="display: none;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 결과 정보 -->
                    <div class="waterbody-info" id="wb-result-info" style="display: none;">
                        <div class="info-card">
                            <span class="info-label">Water Body 면적</span>
                            <span class="info-value" id="wb-area">-</span>
                        </div>
                        <div class="info-card">
                            <span class="info-label">전체 대비 비율</span>
                            <span class="info-value highlight" id="wb-ratio">-</span>
                        </div>
                        <div class="info-card">
                            <span class="info-label">검출 수역 수</span>
                            <span class="info-value" id="wb-count">-</span>
                        </div>
                        <div class="info-card">
                            <span class="info-label">신뢰도</span>
                            <span class="info-value" id="wb-confidence">-</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 침수 예측 - 3D 시뮬레이션 -->
            <div class="page-content" id="flood-simulation">
                <div class="empty-page-placeholder" style="display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:1.2rem;">
                    <p>준비 중입니다.</p>
                </div>
            </div>
            <!-- 침수 예측 - 수위 곡선 -->
            <div class="page-content" id="flood-waterlevel">
                <div class="waterlevel-page">
                    <div class="waterlevel-header">
                        <h2>침수 예측 - 수위 곡선</h2>
                        <div class="waterlevel-controls">
                            <div class="control-item">
                                <label>그래프 유형</label>
                                <select class="waterlevel-select" id="flood-graph-type">
                                    <option value="hourly">시간별 수위</option>
                                    <option value="reservoir">저수율 변화</option>
                                    <option value="river">하천 수위</option>
                                </select>
                            </div>
                            <div class="control-item">
                                <label>조회 기간</label>
                                <select class="waterlevel-select" id="flood-graph-period">
                                    <option value="day">최근 24시간</option>
                                    <option value="week">최근 7일</option>
                                    <option value="month">최근 30일</option>
                                </select>
                            </div>
                            <button class="btn-graph-load" id="btn-flood-graph-load">조회</button>
                        </div>
                    </div>
                    <div class="waterlevel-content">
                        <div class="graph-container">
                            <div class="graph-loading" id="flood-graph-loading" style="display: none;">
                                <span>그래프 로딩 중...</span>
                            </div>
                            <img class="graph-image" id="flood-graph-image" src="" alt="수위 곡선 그래프">
                            <div class="graph-placeholder" id="flood-graph-placeholder">
                                <span>조회 버튼을 클릭하여 그래프를 확인하세요</span>
                            </div>
                        </div>
                        <div class="graph-info">
                            <div class="info-card">
                                <span class="info-label">현재 수위</span>
                                <span class="info-value" id="flood-current-level">2.4m</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">평균 수위</span>
                                <span class="info-value" id="flood-avg-level">1.8m</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">최고 수위</span>
                                <span class="info-value warning" id="flood-max-level">3.2m</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">경고 수위</span>
                                <span class="info-value danger" id="flood-warning-level">4.0m</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 침수 예측 - 모니터링 -->
            <div class="page-content" id="flood-monitoring">
                <div class="flood-monitor-dashboard">
                    <!-- 메인 영역 (왼쪽) -->
                    <div class="flood-monitor-main">
                        <!-- 상단 필터 바 -->
                        <div class="flood-filter-bar">
                            <div class="flood-filter-group">
                                <label>침수지도</label>
                                <select class="flood-filter-select" id="flood-map-type">
                                    <option value="all">전체</option>
                                    <option value="river">하천</option>
                                    <option value="urban">도심</option>
                                </select>
                            </div>
                            <div class="flood-filter-group">
                                <label>조회기간</label>
                                <select class="flood-filter-select" id="flood-period">
                                    <option value="week">지난 일주일</option>
                                    <option value="month">지난 한달</option>
                                    <option value="quarter">지난 3개월</option>
                                </select>
                            </div>
                            <div class="flood-filter-group">
                                <label>지도유형</label>
                                <select class="flood-filter-select" id="flood-view-type">
                                    <option value="normal">일반지도</option>
                                    <option value="satellite">위성지도</option>
                                    <option value="terrain">지형지도</option>
                                </select>
                            </div>
                        </div>
                        <!-- 히트맵 지도 영역 -->
                        <div class="flood-heatmap-container">
                            <div id="flood-heatmap" class="flood-heatmap"></div>
                            <!-- 히트맵 이미지 오버레이 -->
                            <img id="flood-heatmap-overlay" class="flood-heatmap-image" src="" alt="침수 히트맵">
                            <!-- 위험도 오버레이 -->
                            <div class="flood-risk-overlay">
                                <div class="risk-info-box">
                                    <span class="risk-info-label">Risk Level</span>
                                    <span class="risk-info-value safe">낮음</span>
                                </div>
                                <div class="risk-info-box">
                                    <span class="risk-info-label">Risk Score</span>
                                    <span class="risk-info-score flood-score" id="flood-risk-score">23</span>
                                </div>
                            </div>
                        </div>
                        <!-- 하단 차트 영역 -->
                        <div class="flood-charts-row">
                            <div class="flood-chart-box">
                                <h4>월별 강수량</h4>
                                <div class="flood-chart-content">
                                    <img id="flood-monthly-chart" class="flood-chart-image" src="" alt="월별 강수량">
                                </div>
                                <div class="flood-chart-legend">
                                    <span class="legend-line flood-line">─ 2025</span>
                                    <span class="legend-line secondary">─ 2024</span>
                                </div>
                            </div>
                            <div class="flood-chart-box">
                                <h4>수위 현황</h4>
                                <div class="flood-waterlevel-content">
                                    <div class="waterlevel-bars">
                                        <div class="waterlevel-item">
                                            <span class="waterlevel-label">현재수위</span>
                                            <div class="waterlevel-bar-container">
                                                <div class="waterlevel-bar blue" style="width: 45%"></div>
                                            </div>
                                        </div>
                                        <div class="waterlevel-item">
                                            <span class="waterlevel-label">경고수위</span>
                                            <div class="waterlevel-bar-container">
                                                <div class="waterlevel-bar yellow" style="width: 70%"></div>
                                            </div>
                                        </div>
                                        <div class="waterlevel-item">
                                            <span class="waterlevel-label">위험수위</span>
                                            <div class="waterlevel-bar-container">
                                                <div class="waterlevel-bar red" style="width: 90%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flood-risk-legend">
                                    <span class="risk-legend-item"><span class="dot blue"></span> 침수위험 <span class="risk-text low">Low</span></span>
                                    <span class="risk-legend-item"><span class="dot yellow"></span> 하천수위 <span class="risk-text moderate">Moderate</span></span>
                                    <span class="risk-legend-item"><span class="dot green"></span> 배수상태 <span class="risk-text low">Low</span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 사이드바 (오른쪽) -->
                    <div class="flood-monitor-sidebar">
                        <h3>침수 예측 요약 View</h3>
                        <!-- 미니맵 -->
                        <div class="flood-summary-map">
                            <div id="flood-mini-map" class="flood-mini-map"></div>
                            <img id="flood-mini-heatmap" class="flood-mini-heatmap" src="" alt="미니 히트맵">
                            <div class="flood-mini-label">
                                <span class="location-name">고흥천 유역</span>
                                <span class="risk-badge safe">Risk Level 낮음</span>
                            </div>
                        </div>
                        <!-- 위험 지표 -->
                        <div class="flood-indicators">
                            <div class="flood-indicator-item">
                                <span class="indicator-name">침수위험</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">23</span>
                                    <span class="indicator-risk low">Risk Low</span>
                                </div>
                            </div>
                            <div class="flood-indicator-item">
                                <span class="indicator-name">하천수위</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">45</span>
                                    <span class="indicator-risk moderate">Risk Moderate</span>
                                </div>
                            </div>
                            <div class="flood-indicator-item">
                                <span class="indicator-name">배수상태</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">82</span>
                                    <span class="indicator-risk low">Risk Low</span>
                                </div>
                            </div>
                        </div>
                        <!-- 버튼 -->
                        <div class="flood-summary-buttons">
                            <button class="btn-detail" id="btn-flood-detail">상세보기</button>
                            <button class="btn-report" id="btn-flood-report">보고서 출력</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 가뭄 예측 - 모니터링 -->
            <div class="page-content" id="drought-monitoring">
                <div class="drought-monitor-dashboard">
                    <!-- 메인 영역 (왼쪽) -->
                    <div class="drought-monitor-main">
                        <!-- 상단 필터 바 -->
                        <div class="drought-filter-bar">
                            <div class="drought-filter-group">
                                <label>조회기간</label>
                                <select class="drought-filter-select" id="drought-period">
                                    <option value="week">지난 일주일</option>
                                    <option value="month">지난 한달</option>
                                    <option value="quarter">지난 3개월</option>
                                </select>
                            </div>
                            <div class="drought-filter-group">
                                <label>격자 단위(m)</label>
                                <div class="drought-grid-buttons">
                                    <button class="grid-btn" data-grid="100">100</button>
                                    <button class="grid-btn" data-grid="250">250</button>
                                    <button class="grid-btn active" data-grid="500">500</button>
                                    <button class="grid-btn" data-grid="1000">1000</button>
                                </div>
                            </div>
                        </div>
                        <!-- 히트맵 지도 영역 -->
                        <div class="drought-heatmap-container">
                            <div id="drought-heatmap" class="drought-heatmap"></div>
                        </div>
                        <!-- 하단 차트 영역 -->
                        <div class="drought-charts-row">
                            <div class="drought-chart-box">
                                <h4>월별 가뭄 지수</h4>
                                <div class="drought-chart-content">
                                    <img id="drought-monthly-chart" class="drought-chart-image" src="" alt="월별 가뭄 지수">
                                </div>
                                <div class="drought-chart-legend">
                                    <span class="legend-line">─ 2025</span>
                                    <span class="legend-line secondary">─ 2024</span>
                                </div>
                            </div>
                            <div class="drought-chart-box">
                                <h4>강우량</h4>
                                <div class="drought-rainfall-content">
                                    <div class="rainfall-bars">
                                        <div class="rainfall-item">
                                            <span class="rainfall-label">누적강우</span>
                                            <div class="rainfall-bar-container">
                                                <div class="rainfall-bar blue" style="width: 65%"></div>
                                            </div>
                                        </div>
                                        <div class="rainfall-item">
                                            <span class="rainfall-label">평년누적</span>
                                            <div class="rainfall-bar-container">
                                                <div class="rainfall-bar green" style="width: 85%"></div>
                                            </div>
                                        </div>
                                        <div class="rainfall-item">
                                            <span class="rainfall-label">평년대비</span>
                                            <div class="rainfall-bar-container">
                                                <div class="rainfall-bar orange" style="width: 45%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="drought-risk-legend">
                                    <span class="risk-legend-item"><span class="dot green"></span> 가뭄 <span class="risk-text high">High</span></span>
                                    <span class="risk-legend-item"><span class="dot yellow"></span> 토양수분 <span class="risk-text moderate">Moderate</span></span>
                                    <span class="risk-legend-item"><span class="dot blue"></span> 저수율 <span class="risk-text low">Low</span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 사이드바 (오른쪽) -->
                    <div class="drought-monitor-sidebar">
                        <h3>가뭄 예측 요약 View</h3>
                        <!-- 미니맵 -->
                        <div class="drought-summary-map">
                            <div id="drought-mini-map" class="drought-mini-map"></div>
                            <img id="drought-mini-heatmap" class="drought-mini-heatmap" src="" alt="미니 히트맵">
                            <div class="drought-mini-label">
                                <span class="location-name">AAA 공원</span>
                                <span class="risk-badge danger">Risk Level 심각</span>
                            </div>
                        </div>
                        <!-- 위험 지표 -->
                        <div class="drought-indicators">
                            <div class="drought-indicator-item">
                                <span class="indicator-name">가뭄</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">72</span>
                                    <span class="indicator-risk high">Risk High</span>
                                </div>
                            </div>
                            <div class="drought-indicator-item">
                                <span class="indicator-name">토양수분</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">45</span>
                                    <span class="indicator-risk moderate">Risk Moderate</span>
                                </div>
                            </div>
                            <div class="drought-indicator-item">
                                <span class="indicator-name">저수율</span>
                                <div class="indicator-data">
                                    <span class="indicator-value">27</span>
                                    <span class="indicator-risk low">Risk Low</span>
                                </div>
                            </div>
                        </div>
                        <!-- 버튼 -->
                        <div class="drought-summary-buttons">
                            <button class="btn-detail" id="btn-drought-detail">상세보기</button>
                            <button class="btn-report" id="btn-drought-report">보고서 출력</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 가뭄 예측 - 3D 시뮬레이션 -->
            <div class="page-content" id="drought-simulation">
                <div class="empty-page-placeholder" style="display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:1.2rem;">
                    <p>준비 중입니다.</p>
                </div>
            </div>
            <!-- 가뭄 예측 - 시계열 변화 그래프 -->
            <div class="page-content" id="drought-waterlevel">
                <div class="waterlevel-page drought-timeseries">
                    <div class="waterlevel-header">
                        <h2>가뭄 예측 - 시계열 변화 그래프</h2>
                        <div class="waterlevel-controls">
                            <div class="control-item">
                                <label>가뭄 지표</label>
                                <select class="waterlevel-select" id="drought-graph-type">
                                    <option value="spi">SPI (표준강수지수)</option>
                                    <option value="vhi">VHI (식생건강지수)</option>
                                </select>
                            </div>
                            <div class="control-item">
                                <label>조회 기간</label>
                                <select class="waterlevel-select" id="drought-graph-period">
                                    <option value="month">최근 1개월</option>
                                    <option value="quarter">최근 3개월</option>
                                    <option value="year">최근 1년</option>
                                </select>
                            </div>
                            <button class="btn-graph-load drought-btn" id="btn-drought-graph-load">조회</button>
                        </div>
                    </div>
                    <div class="waterlevel-content">
                        <div class="graph-container">
                            <div class="graph-loading" id="drought-graph-loading" style="display: none;">
                                <span>그래프 로딩 중...</span>
                            </div>
                            <img class="graph-image" id="drought-graph-image" src="" alt="가뭄 지표 그래프">
                            <div class="graph-placeholder" id="drought-graph-placeholder">
                                <span>조회 버튼을 클릭하여 그래프를 확인하세요</span>
                            </div>
                        </div>
                        <div class="graph-info drought-info">
                            <div class="info-card">
                                <span class="info-label">현재 지표값</span>
                                <span class="info-value" id="drought-current-value">-0.8</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">평균 지표값</span>
                                <span class="info-value" id="drought-avg-value">-0.3</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">최저값</span>
                                <span class="info-value warning" id="drought-min-value">-1.5</span>
                            </div>
                            <div class="info-card">
                                <span class="info-label">가뭄 등급</span>
                                <span class="info-value drought-level" id="drought-grade">약한 가뭄</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 고흥 단기예보 -->
            <div class="page-content" id="kma-test">
                <div class="waterlevel-page">
                    <!-- 육상예보 -->
                    <div class="waterlevel-header">
                        <h2>단기예보 (전라남도 고흥)</h2>
                        <div class="waterlevel-controls">
                            <button class="btn-graph-load" id="btn-kma-fetch">새로고침</button>
                        </div>
                    </div>
                    <div class="waterlevel-content">
                        <div class="kma-result-area">
                            <div class="kma-summary" id="kma-summary" style="display:none;">
                                <div class="info-card">
                                    <span class="info-label">발표시간</span>
                                    <span class="info-value" id="kma-announce-time">-</span>
                                </div>
                                <div class="info-card">
                                    <span class="info-label">조회 건수</span>
                                    <span class="info-value" id="kma-count">0</span>
                                </div>
                            </div>
                            <div class="graph-placeholder" id="kma-placeholder">
                                <span>데이터를 불러오는 중...</span>
                            </div>
                            <div class="kma-loading" id="kma-loading" style="display:none;">
                                <div class="loading-spinner"></div>
                                <span>데이터 조회 중...</span>
                            </div>
                            <div class="kma-data-container" id="kma-data-container" style="display:none;">
                                <div style="overflow-x:auto;">
                                    <table class="kma-table" id="kma-table">
                                        <thead id="kma-table-head"></thead>
                                        <tbody id="kma-table-body"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <p>&copy; 2026 All Rights Reserved</p>
    </footer>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="{{ url_for('static', filename='js/terrain3d.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
