<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GBS 국민BIZ - 설계 DNA 계측기</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css">
</head>
<body>

    <div class="dashboard-container">

        <div class="top-metric-grid">
            <div class="metric-card" style="border-left: 5px solid #e53935;">
                <span style="font-size: 0.85rem; color: #666; display: block;">최종청구금액 (TV포함)</span>
                <h2 style="margin: 5px 0 0 0; color: #e53935; font-size: 1.5rem; font-weight: 800;">87,171,820원</h2>
            </div>
            <div class="metric-card" style="border-left: 5px solid #757575;">
                <span style="font-size: 0.85rem; color: #666; display: block;">청구액 합계 (TV별도)</span>
                <h2 style="margin: 5px 0 0 0; color: #333; font-size: 1.5rem; font-weight: 800;">87,237,877원</h2>
            </div>
            <div class="metric-card" style="border-left: 5px solid #2e7d32;">
                <span style="font-size: 0.85rem; color: #666; display: block;">대상 월 절감액 (1차)</span>
                <h2 id="main_top_savings_trigger" style="margin: 5px 0 0 0; color: #2e7d32; font-size: 1.5rem; font-weight: 800;">10,024,759원</h2>
            </div>
            <div class="metric-card" style="border-left: 5px solid #f57c00;">
                <span style="font-size: 0.85rem; color: #666; display: block;">AI 추천 최적 변압기 용량</span>
                <h2 style="margin: 5px 0 0 0; color: #f57c00; font-size: 1.5rem; font-weight: 800;">950kVA</h2>
            </div>
        </div>

        <div style="margin-bottom: 20px;">
            <div style="background: linear-gradient(135deg, #0b132b 0%, #1c2541 60%, #3a506b 100%); color: #fff; padding: 22px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); border: 2px solid #00e676;">
                
                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 12px;">
                    <div>
                        <span style="background: #00e676; color: #0b132b; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 800;">국민BIZ CORE ENGINE</span>
                        <h3 style="margin: 4px 0 0 0; font-size: 1.25rem; font-weight: 800; color: #ffffff;">🏆 GBS 핵심 성과금액 배분 시뮬레이터</h3>
                    </div>
                    <div style="text-align: right;">
                        <span style="font-size: 0.75rem; color: #cbd5e1; display: block; margin-bottom: 2px;">실시간 셰어링 비율</span>
                        <div id="sim_top_ratio_badge" style="background: rgba(0, 230, 118, 0.15); border: 2px solid #00e676; padding: 4px 12px; border-radius: 30px; font-weight: 900; font-size: 1rem; color: #00e676; display: inline-block;">50% : 50%</div>
                    </div>
                </div>

                <div style="margin-top: 15px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0,230,118,0.15); padding: 15px; border-radius: 8px; text-align: center;">
                    <span style="font-size: 0.85rem; color: #00e676; font-weight: 700; display: block; margin-bottom: 4px;">🏆 예상 총 성과 배분 금액 (100% 기준)</span>
                    <h1 id="sim_top_total_savings" style="font-size: 2.5rem; margin: 0; font-weight: 900; color: #ffffff;">0원</h1>
                </div>

                <div style="margin-top: 15px; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);">
                    <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px;">
                        <span style="color: #38bdf8;">🏢 아파트 (A) 지분 비율: <span id="slider_top_a_text" style="font-weight:800;">50</span>%</span>
                        <span style="color: #fb923c;">⚡ 운영사 (G) 지분 비율: <span id="slider_top_g_text" style="font-weight:800;">50</span>%</span>
                    </div>
                    <input type="range" id="sim_top_ratio_slider" min="0" max="100" value="50" step="5" style="width: 100%; height: 6px; cursor: pointer;">
                </div>

                <div style="grid-template-columns: repeat(3, 1fr); display: grid; gap: 12px; margin-top: 15px;">
                    <div style="background: rgba(56, 189, 248, 0.04); padding: 12px; border-radius: 6px; border: 1px solid rgba(56, 189, 248, 0.15); border-top: 3px solid #38bdf8;">
                        <span style="font-size: 0.8rem; color: #94a3b8; display: block;">🏢 아파트(A) 최종 귀속분</span>
                        <span id="sim_top_apartment_share" style="font-size: 1.2rem; font-weight: 800; color: #38bdf8; display: block; margin-top: 2px;">0원</span>
                    </div>
                    <div style="background: rgba(251, 146, 60, 0.04); padding: 12px; border-radius: 6px; border: 1px solid rgba(251, 146, 60, 0.15); border-top: 3px solid #fb923c;">
                        <span style="font-size: 0.8rem; color: #94a3b8; display: block;">⚡ 운영사(G) 최종 귀속분</span>
                        <span id="sim_top_gbs_share" style="font-size: 1.2rem; font-weight: 800; color: #fb923c; display: block; margin-top: 2px;">0원</span>
                    </div>
                    <div style="background: rgba(241, 245, 249, 0.02); padding: 12px; border-radius: 6px; border: 1px solid rgba(241, 245, 249, 0.08); border-top: 3px solid #cbd5e1;">
                        <span style="font-size: 0.8rem; color: #94a3b8; display: block;">🛠️ 유지관리비 (15%)</span>
                        <span id="sim_top_maintenance_cost" style="font-size: 1.1rem; font-weight: 700; color: #e2e8f0; display: block; margin-top: 2px;">0원</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="main-content-layout">
            
            <div class="board-panel">
                <h4 style="margin: 0 0 15px 0; color: #0288d1; font-weight: 700; border-bottom: 2px solid #0288d1; padding-bottom: 8px;">① 한전 청구서 OCR 판독 및 파일 엔진</h4>
                
                <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
                    <input type="file" id="real_file_input" style="display: none;">
                    <button type="button" id="btn_file_select" class="btn-primary">📁 청구서 파일 선택</button>
                    <span id="txt_file_status" style="font-size: 0.8rem; color: #666; font-weight: 600;">선택된 파일 없음</span>
                    
                    <button type="button" id="btn_ai_scan" class="btn-danger">⚡ AI 정부 스캔 실행</button>
                    <button type="button" id="btn_sample_load" class="btn-success">진천 샘플 로드</button>
                </div>

                <h4 style="margin: 20px 0 10px 0; color: #333; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px;">①-1 수동 정밀 제어 레이어</h4>
                
                <table class="control-table">
                    <tr>
                        <td>고객명/단지명</td>
                        <td><input type="text" id="input_cust_name" value="진천역대성skyrex아파트 대표회의"></td>
                    </tr>
                    <tr>
                        <td>계약전력 (kW)</td>
                        <td><input type="text" id="input_contract_power" value="8,500"></td>
                    </tr>
                    <tr>
                        <td style="color: #ec407a;">ⓐ 요금적용전력 (kW)</td>
                        <td><input type="text" id="input_applied_power" value="2,439"></td>
                    </tr>
                    <tr>
                        <td style="color: #f57c00;">ⓑ 최근 2개년 최대수요 (kW)</td>
                        <td><input type="text" id="input_recent_max_power" value="2,000" style="border-color: #fbc02d; background-color: #fffde7;"></td>
                    </tr>
                    <tr>
                        <td>당월 최대수요전력 (kW)</td>
                        <td><input type="text" id="input_current_max" value="732"></td>
                    </tr>
                    <tr>
                        <td>기본요금 (원)</td>
                        <td><input type="text" id="input_base_price" value="51,497,130"></td>
                    </tr>
                    <tr>
                        <td>전력량요금 (원)</td>
                        <td><input type="text" id="input_elect_price" value="57,171,820"></td>
                    </tr>
                </table>

                <button type="button" id="btn_engine_sync" style="width: 100%; margin-top: 18px; background: #1976d2; color: white; border: none; padding: 12px; border-radius: 6px; font-size: 0.95rem; font-weight: bold; cursor: pointer;">
                    🔥 판단 엔진 동기화 및 시각화 구동
                </button>
            </div>

            <div class="board-panel" style="border: 1px solid #ffcdd2;">
                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ef5350; padding-bottom: 8px; margin-bottom: 15px;">
                    <h4 style="margin: 0; color: #ef5350; font-weight: 700;">② Gold Bell Star 설계 DNA 계측기</h4>
                    <span style="background: #ef5350; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold;">과영 설계 경고</span>
                </div>

                <div style="text-align: center; background: #fff5f5; border: 1px dashed #ef5350; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
                    <span style="font-size: 0.85rem; color: #555; font-weight: 600;">변압기 및 설비 용량 과영지수 (SOIS)</span>
                    <h2 id="txt_sois_index" style="margin: 3px 0 0 0; color: #d32f2f; font-size: 2.2rem; font-weight: 900;">325.0%</h2>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;">
                    <div style="background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0;">
                        <span style="font-size: 0.75rem; color: #64748b; display: block;">계약전력</span>
                        <span id="lbl_contract_power" style="font-size: 0.95rem; font-weight: 700;">8,500 kW</span>
                    </div>
                    <div style="background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0;">
                        <span style="font-size: 0.75rem; color: #64748b; display: block;">ⓐ 요금적용전력</span>
                        <span id="lbl_applied_power" style="font-size: 0.95rem; font-weight: 700;">2,439 kW</span>
                    </div>
                    <div style="background: #fffde7; padding: 10px; border-radius: 6px; border: 1px solid #ffe082;">
                        <span style="font-size: 0.75rem; color: #f57c00; display: block;">ⓑ 최근 1년 실부하 최대수요</span>
                        <span id="display_recent_max_power" style="font-size: 0.95rem; font-weight: 800; color: #e65100;">2,000 kW</span>
                    </div>
                    <div style="background: #f8fafc; padding: 10px; border-radius: 6px; border: 1px solid #e2e8f0;">
                        <span style="font-size: 0.75rem; color: #64748b; display: block;">당월 최대수요피크</span>
                        <span id="lbl_current_max" style="font-size: 0.95rem; font-weight: 700;">732 kW</span>
                    </div>
                </div>

                <div class="meter-wrapper">
                    <div class="meter-item">
                        <div class="meter-label-row"><span>계약전력</span><strong>8,500 kW</strong></div>
                        <div class="meter-bg-bar"><div class="meter-fill-bar" style="width: 100%; background: #64748b;"></div></div>
                    </div>
                    <div class="meter-item">
                        <div class="meter-label-row"><span>ⓐ 요금적용전력</span><strong style="color: #d32f2f;">2,439 kW</strong></div>
                        <div class="meter-bg-bar"><div class="meter-fill-bar" style="width: 28.6%; background: #ef5350;"></div></div>
                    </div>
                    <div class="meter-item">
                        <div class="meter-label-row"><span>ⓑ 최근 1개년 실제 최대수요</span><strong id="bar_text_max_power" style="color: #f57c00;">2,000 kW</strong></div>
                        <div class="meter-bg-bar"><div id="bar_width_max_power" class="meter-fill-bar" style="width: 23.5%; background: #ffb74d;"></div></div>
                    </div>
                    <div class="meter-item">
                        <div class="meter-label-row"><span>당월 최대수요피크</span><strong>732 kW</strong></div>
                        <div class="meter-bg-bar"><div class="meter-fill-bar" style="width: 8.6%; background: #4caf50;"></div></div>
                    </div>
                </div>

                <p style="font-size: 0.8rem; color: #e53935; margin-top: 15px; font-weight: 600; line-height: 1.5; letter-spacing: -0.3px;">
                    요약판단결과: 국내의 모든 수전설비공동이 과잉설계로 과다설계와 관행으로 엄청난 손실이 발생해서 어처구니 없는 불필요한 낭비를 한다는 것을 보여줍니다. 아파트 주택용 전력 계약 방식 변경을 통한 성과배분 진단 최우선 대상 단지입니다.
                </p>
            </div>

        </div>

        <div style="margin-top: 20px; background: #e8f5e9; padding: 15px; border-radius: 8px; font-size: 0.85rem; color: #2e7d32; border: 1px solid #c8e6c9; line-height: 1.45;">
            <strong>③ 세금/기금 법정 요율 자동 검증기</strong><br>
            부가가치세 산출기산액: 77,088,270원 | 전력기금 부과기산액 기산지표 일치: 2,416,132원 | 전력산업기반기금(3.2%): 2,466,550원 확정 | 한전 최종 발행 청구서 위변조 여부 검증: 정상 검증 완료
        </div>

    </div>

    <script src="app.js"></script>
</body>
</html>