{{ template "base.html" . }}

{{ define "sidebar" }}
<aside class="w-60 shrink-0 sticky top-20 self-start">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
            <h2 class="font-bold text-gray-800 text-sm">관심종목</h2>
        </div>

        <!-- 종목 추가 입력 -->
        <div class="p-3 border-b border-gray-100">
            <div class="flex gap-2">
                <input id="watchlistInput" type="text" placeholder="종목코드 (예: 005930)"
                    maxlength="6"
                    class="flex-1 text-xs px-2 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-400 font-mono">
                <button id="watchlistAddBtn"
                    class="text-xs px-2.5 py-1.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium shrink-0">
                    추가
                </button>
            </div>
            <p id="watchlistMsg" class="text-xs text-red-500 mt-1 hidden"></p>
        </div>

        <!-- 관심종목 목록 -->
        <ul id="watchlistSidebar" class="divide-y divide-gray-50 max-h-[60vh] overflow-y-auto">
            <li class="px-4 py-8 text-center text-xs text-gray-400" id="watchlistEmpty">
                관심종목을 추가해주세요
            </li>
        </ul>
    </div>
</aside>
{{ end }}

{{ define "content" }}
<div class="space-y-8">

    <!-- 체결강도 상승 감지 -->
    <section>
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
            <span class="text-orange-500">⚡</span> 체결강도 상승 감지
            <span class="text-xs font-normal text-gray-400 ml-1">(거래량 상위 20 | 10초 갱신)</span>
            <button id="signalGuideBtn"
                class="w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs font-bold hover:bg-orange-100 hover:text-orange-600 transition-colors flex items-center justify-center"
                title="판단 기준 보기">?</button>
            <button id="scannerToggleBtn"
                class="text-xs px-2.5 py-1 rounded-full font-semibold border transition-colors bg-green-100 text-green-700 border-green-300"
                title="스캐너 ON/OFF">● ON</button>
            <span id="signalUpdatedAt" class="text-xs font-normal text-gray-400 ml-auto"></span>
        </h2>

        <!-- 시그널 판단 기준 모달 -->
        <div id="signalGuideModal"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 hidden"
             role="dialog" aria-modal="true">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
                <div class="flex items-center justify-between px-6 pt-5 pb-3 border-b border-gray-100 sticky top-0 bg-white">
                    <h3 class="text-base font-bold text-gray-800">⚡ 시그널 판단 기준</h3>
                    <button id="signalGuideClose" class="text-gray-400 hover:text-gray-600 text-xl font-bold leading-none">✕</button>
                </div>
                <div class="px-6 py-5 space-y-6 text-sm text-gray-700">

                    <!-- 스코어 설명 -->
                    <div>
                        <p class="font-semibold text-gray-800 mb-2">📊 상승 확률 스코어 (0~100점)</p>
                        <p class="text-xs text-gray-400 mb-3">4가지 복합 요소를 동시에 만족해야 진짜 상승 확률이 높습니다.</p>
                        <table class="w-full text-xs border-collapse">
                            <thead>
                                <tr class="bg-gray-50 text-gray-500">
                                    <th class="text-left px-3 py-2 border border-gray-100 font-semibold">요소</th>
                                    <th class="text-center px-3 py-2 border border-gray-100 font-semibold w-16">배점</th>
                                    <th class="text-left px-3 py-2 border border-gray-100 font-semibold">핵심 로직</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="px-3 py-2 border border-gray-100 font-medium">A. 체결강도 레벨</td>
                                    <td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~30</td>
                                    <td class="px-3 py-2 border border-gray-100 text-gray-500">150+: 30점 · 130+: 22점 · 110+: 14점</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="px-3 py-2 border border-gray-100 font-medium">B. 연속 상승 횟수</td>
                                    <td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~25</td>
                                    <td class="px-3 py-2 border border-gray-100 text-gray-500">5회+: 25점 · 3회+: 14점 · 1회: 3점</td>
                                </tr>
                                <tr>
                                    <td class="px-3 py-2 border border-gray-100 font-medium">C. 가격 위치/캔들</td>
                                    <td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~20</td>
                                    <td class="px-3 py-2 border border-gray-100 text-gray-500">윗꼬리 10% 미만: +10점 · 60% 이상: −8점</td>
                                </tr>
                                <tr class="bg-gray-50">
                                    <td class="px-3 py-2 border border-gray-100 font-medium">D. 거래량 건전성</td>
                                    <td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~15</td>
                                    <td class="px-3 py-2 border border-gray-100 text-gray-500">2~5배 증가: +15점 · 10배 이상: −5점</td>
                                </tr>
                                <tr>
                                    <td class="px-3 py-2 border border-gray-100 font-medium">E. 매도잔량 소화</td>
                                    <td class="px-3 py-2 border border-gray-100 text-center text-gray-500">0~10</td>
                                    <td class="px-3 py-2 border border-gray-100 text-gray-500">매수잔량 압도적: +10점 · 매도 우세: −3점</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 신호 유형 설명 -->
                    <div>
                        <p class="font-semibold text-gray-800 mb-2">🏷️ 신호 유형 분류</p>
                        <div class="space-y-2">
                            <div class="flex items-start gap-3 p-2.5 rounded-lg bg-red-50">
                                <span class="bg-red-600 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">강한매수</span>
                                <span class="text-gray-600">체결강도 130+ · 3회 이상 연속 상승 · 윗꼬리 없음 · 매도잔량 소화 중 → 실매수 강하고 던지는 물량도 받아내는 패턴</span>
                            </div>
                            <div class="flex items-start gap-3 p-2.5 rounded-lg bg-orange-50">
                                <span class="bg-orange-400 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">매수우세</span>
                                <span class="text-gray-600">기본 상승 패턴. 강한매수 조건 미충족이나 전반적으로 매수세가 우위</span>
                            </div>
                            <div class="flex items-start gap-3 p-2.5 rounded-lg bg-yellow-50">
                                <span class="bg-yellow-100 text-yellow-700 border border-yellow-300 text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">물량소화</span>
                                <span class="text-gray-600">체결강도는 높은데 가격이 제자리 + 긴 윗꼬리 → 위에서 파는 물량을 받아내기만 하는 중. 돌파 여부 확인 필요</span>
                            </div>
                            <div class="flex items-start gap-3 p-2.5 rounded-lg bg-gray-100">
                                <span class="bg-gray-800 text-white text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">추격위험</span>
                                <span class="text-gray-600">체결강도 170+ · 거래량 7배 이상 · 긴 윗꼬리 동시 출현 → 단타 추격매수 몰림 후 고점 물량털기 가능성 경계</span>
                            </div>
                            <div class="flex items-start gap-3 p-2.5 rounded-lg bg-gray-50">
                                <span class="bg-gray-100 text-gray-500 border border-gray-300 text-xs px-2 py-0.5 rounded font-bold shrink-0 mt-0.5">약한상승</span>
                                <span class="text-gray-600">거래량 증가 없음 · 체결강도 120 미만 → 얇은 호가에서 뜬 상승, 소량 매도에도 쉽게 꺾일 수 있음</span>
                            </div>
                        </div>
                    </div>

                    <!-- 지표별 상세 설명 -->
                    <div>
                        <p class="font-semibold text-gray-800 mb-3">🔍 카드 지표 상세 설명</p>
                        <div class="space-y-3">

                            <!-- 체결강도 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">체결강도</span>
                                    <span class="text-xs text-gray-400">· 매수/매도 힘의 비율</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
                                    <p>10초마다 직전 체결강도와 비교해 <span class="font-semibold text-orange-500">연속으로 상승하는 종목</span>만 표시합니다.</p>
                                    <p class="text-gray-400">100 = 매수·매도 균형 / 100 초과 = 매수 우위 / 100 미만 = 매도 우위</p>
                                    <div class="flex flex-wrap gap-1.5 mt-1">
                                        <span class="bg-red-50 text-red-500 px-2 py-0.5 rounded">150+ 강한 매수세</span>
                                        <span class="bg-orange-50 text-orange-500 px-2 py-0.5 rounded">130~150 매수 우세</span>
                                        <span class="bg-yellow-50 text-yellow-600 px-2 py-0.5 rounded">100~130 매수 경향</span>
                                        <span class="bg-blue-50 text-blue-400 px-2 py-0.5 rounded">100 미만 매도 경향</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 연속 상승 뱃지 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">연속 상승 뱃지</span>
                                    <span class="text-xs text-gray-400">· 10초 단위 체결강도 상승 횟수</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
                                    <p>직전 측정값 대비 체결강도가 <span class="font-semibold">끊기지 않고 몇 번 연속으로 올랐는지</span>를 나타냅니다.</p>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-red-500 text-white px-2 py-0.5 rounded font-bold">🔥N연속</span>
                                        <span class="text-gray-500 self-center">4회 이상 — 강한 지속 매수세</span>
                                    </div>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-orange-400 text-white px-2 py-0.5 rounded font-bold">▲N연속</span>
                                        <span class="text-gray-500 self-center">2~3회 — 매수세 형성 중</span>
                                    </div>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded font-bold">↑상승</span>
                                        <span class="text-gray-500 self-center">1회 — 초기 매수 감지</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 거래량 증가율 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">거래량 증가</span>
                                    <span class="text-xs text-gray-400">· 직전 평균 대비 현재 구간 배수</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
                                    <p>직전 6회(1분) 구간 평균 거래량 대비 <span class="font-semibold">현재 10초 구간에서 얼마나 폭발적으로 거래됐는지</span>를 나타냅니다.</p>
                                    <div class="flex flex-wrap gap-1.5 mt-1">
                                        <span class="bg-green-50 text-green-600 font-semibold px-2 py-0.5 rounded">2~5배 최적</span>
                                        <span class="bg-orange-50 text-orange-400 px-2 py-0.5 rounded">5~10배 과열 초입</span>
                                        <span class="bg-gray-100 text-gray-400 px-2 py-0.5 rounded line-through">10배+ ⚠과열</span>
                                    </div>
                                    <p class="text-gray-400 mt-1">※ 10배 이상은 고점 물량털기 가능성이 높아 스코어가 감점됩니다.</p>
                                </div>
                            </div>

                            <!-- 매도/매수 잔량비 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">매도/매수 잔량</span>
                                    <span class="text-xs text-gray-400">· 호가창 전체 잔량 비율</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
                                    <p>10단계 매도호가 총잔량 ÷ 10단계 매수호가 총잔량입니다. <span class="font-semibold">1보다 작을수록 매수 우위</span>, 클수록 위에 팔 물량이 많다는 의미입니다.</p>
                                    <div class="flex flex-wrap gap-1.5 mt-1">
                                        <span class="bg-green-50 text-green-600 font-semibold px-2 py-0.5 rounded">0.7 미만 — 매수 강세</span>
                                        <span class="bg-green-50 text-green-500 px-2 py-0.5 rounded">0.7~1.0 — 매수 우세</span>
                                        <span class="bg-gray-50 text-gray-500 px-2 py-0.5 rounded">1.0~1.5 — 균형</span>
                                        <span class="bg-blue-50 text-blue-500 px-2 py-0.5 rounded">1.5+ — 매도 우세</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 가격 위치 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">가격 위치</span>
                                    <span class="text-xs text-gray-400">· 장중 저가~고가 내 현재가 위치 %</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
                                    <p>오늘 장중 저가를 0%, 고가를 100%로 봤을 때 <span class="font-semibold">현재가가 어디에 있는지</span>를 나타냅니다.</p>
                                    <div class="flex flex-wrap gap-1.5 mt-1">
                                        <span class="bg-red-50 text-red-500 font-semibold px-2 py-0.5 rounded">80%+ 고가권 · 강한 매수</span>
                                        <span class="bg-orange-50 text-orange-400 px-2 py-0.5 rounded">60~80% 상단부</span>
                                        <span class="bg-gray-50 text-gray-500 px-2 py-0.5 rounded">30~60% 중간대</span>
                                        <span class="bg-blue-50 text-blue-400 px-2 py-0.5 rounded">30% 미만 저가권</span>
                                    </div>
                                    <p class="text-gray-400 mt-1">※ 체결강도가 강한데 가격 위치가 낮으면 저점 반등 초기 신호일 수 있습니다.</p>
                                </div>
                            </div>

                            <!-- AI 감성 분석 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">AI 감성 분석</span>
                                    <span class="text-xs text-gray-400">· 최신 뉴스 기반 호재/악재 판단</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
                                    <p>상승 확률 50점 이상 · 2회 이상 연속 상승 · 체결강도 100 이상 종목에 한해 AI가 최신 뉴스를 분석합니다.</p>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-green-100 text-green-700 border border-green-200 px-2 py-0.5 rounded font-semibold">호재</span>
                                        <span class="text-gray-500 self-center">긍정적 뉴스·공시 감지</span>
                                    </div>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-red-100 text-red-600 border border-red-200 px-2 py-0.5 rounded font-semibold">악재</span>
                                        <span class="text-gray-500 self-center">부정적 뉴스·공시 감지</span>
                                    </div>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-gray-100 text-gray-500 px-2 py-0.5 rounded font-semibold">중립</span>
                                        <span class="text-gray-500 self-center">특이 뉴스 없음</span>
                                    </div>
                                    <p class="text-gray-400">※ 뱃지에 마우스를 올리면 AI가 판단한 근거 한 줄이 표시됩니다.</p>
                                </div>
                            </div>

                            <!-- AI 목표가 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">AI 목표가</span>
                                    <span class="text-xs text-gray-400">· 단기 기술적 목표가 추론</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1">
                                    <p>현재가·고가·저가·체결강도·연속상승 횟수·AI 감성을 종합해 <span class="font-semibold text-purple-600">단기 목표가</span>를 추론합니다. 투자 조언이 아닌 참고용 수치입니다.</p>
                                    <p class="text-gray-400">※ 뱃지에 마우스를 올리면 목표가 추론 근거가 표시됩니다.</p>
                                </div>
                            </div>

                            <!-- 익일 추세 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">익일 추세</span>
                                    <span class="text-xs text-gray-400">· 다음 거래일 방향성 예측</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600 space-y-1.5">
                                    <p>당일 기술 지표와 AI 감성 분석을 결합해 다음 거래일 방향성을 예측합니다. 신뢰도(높음/보통/낮음)를 함께 표시합니다.</p>
                                    <div class="flex flex-wrap gap-1.5">
                                        <span class="bg-red-50 text-red-500 border border-red-200 px-2 py-0.5 rounded font-bold">▲ 상승</span>
                                        <span class="bg-blue-50 text-blue-500 border border-blue-200 px-2 py-0.5 rounded font-bold">▼ 하락</span>
                                        <span class="bg-gray-50 text-gray-500 border border-gray-200 px-2 py-0.5 rounded font-bold">─ 횡보</span>
                                    </div>
                                    <p class="text-gray-400">※ AI 예측은 참고용이며, 실제 시장 상황에 따라 달라질 수 있습니다.</p>
                                </div>
                            </div>

                            <!-- 체결강도 미니차트 -->
                            <div class="rounded-lg border border-gray-100 overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50 flex items-center gap-2">
                                    <span class="font-semibold text-gray-800 text-xs">체결강도 차트</span>
                                    <span class="text-xs text-gray-400">· 카드 하단 주황색 라인</span>
                                </div>
                                <div class="px-3 py-2.5 text-xs text-gray-600">
                                    <p>시그널 감지 이후 <span class="font-semibold text-orange-500">10초마다 수집된 체결강도 흐름</span>을 라인차트로 표시합니다. 우상향이면 매수세가 지속되는 중입니다. 최대 60포인트(10분) 유지됩니다.</p>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 한 줄 기준 -->
                    <div class="bg-orange-50 rounded-xl p-4 border border-orange-100">
                        <p class="font-semibold text-orange-700 mb-1">💡 진짜 상승 한 줄 기준</p>
                        <p class="text-orange-600">가격이 오르면서 · 거래량이 받쳐주고 · 체결강도가 유지되고 · 위 매도물량이 실제로 소화되는 흐름</p>
                    </div>

                    <!-- 면책 안내 -->
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
                        <p class="font-semibold text-gray-600 mb-1">⚠️ 투자 유의사항</p>
                        <p class="text-gray-500 text-xs leading-relaxed">이 서비스의 모든 지표와 AI 분석은 <span class="font-semibold">참고용 정보</span>이며 투자 권유나 매매 신호가 아닙니다. 투자 결정은 본인의 판단과 책임 하에 이루어져야 하며, 모든 투자 손실에 대한 책임은 투자자 본인에게 있습니다.</p>
                    </div>

                </div>
            </div>
        </div>
        <div id="signalGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <p class="col-span-3 text-gray-400 text-center py-6 text-sm" id="signalEmpty">
                08:00 이후 거래량 상위 종목에서 체결강도 100 이상 + 상승 종목을 표시합니다.
            </p>
        </div>
    </section>

    <!-- 관심종목 실시간 패널 -->
    <section>
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
            <span class="text-yellow-500">★</span> 관심종목 실시간
            <span class="text-xs font-normal text-gray-400 ml-1" id="wsStatus">연결 중...</span>
        </h2>
        <div id="watchlistPanel" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            <div id="watchlistPanelEmpty" class="col-span-3 text-center py-12 text-gray-400 text-sm bg-white rounded-xl border border-dashed border-gray-200">
                좌측 메뉴에서 관심종목을 추가하면 실시간 시세가 표시됩니다.
            </div>
        </div>
    </section>

</div>

{{ end }}

{{ define "scripts" }}
<script src="/static/js/signal.js"></script>
<script src="/static/js/watchlist.js"></script>
{{ end }}