feat(ui): 예측 오버레이 캔들화 + 7탭 기간 셀렉터 + 가격 헤로

- 예측 오버레이: 라인 시리즈 3개 (median/q10/q90) 를 단일 캔들 시리즈
  하나로 합쳤다. 합성 OHLC: open=직전 close, close=point_close,
  high=ci_high, low=ci_low. 옅은 색 (up #fda4af / down #93c5fd) 으로
  실 캔들과 시각 톤은 같고 명도만 낮춰 "어우러지되 미래"임이 보이게.
- 예측 프리셋 단순화: 단기/중기/장기 + 직접입력 다 떼고 15일/30일/1년
  3개로. 백엔드 horizon cap 30 → 252 로 확장 (1년 = 240 거래일).
- PriceHero: 종목명/현재가/등락 큰 글씨 헤더. KR 관례대로 상승=빨강,
  하락=파랑.
- PeriodTabs: 1일/1주/1달/3달/1년/5년/최대 7탭. 기존 interval+days
  이중 컨트롤 제거. 5년·최대 는 자동으로 주봉/월봉으로 폴백.
- 차트 본체 캔들 색조도 KR 관례 (적/청) 로 통일.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/components/PredictionPanel.tsx

@@ -42,38 +42,25 @@ function normalizeFromPredictResponse(
   };
 }
 
-const HORIZON_PRESETS: { label: string; value: number[] }[] = [
-  { label: "단기 (1·3·5)", value: [1, 3, 5] },
-  { label: "중기 (1·5·10)", value: [1, 5, 10] },
-  { label: "장기 (5·10·20)", value: [5, 10, 20] },
+// 15일/30일/1년 세 프리셋. 각각 그 구간 안에 6~7 step 을 깔아서 차트 캔들이
+// 너무 듬성하지 않게 한다. 백엔드는 1..252 거래일 horizon 을 허용 (predict.py 참조).
+const PREDICT_PRESETS: { id: string; label: string; horizons: number[] }[] = [
+  { id: "15d", label: "15일", horizons: [1, 3, 5, 7, 10, 15] },
+  { id: "30d", label: "30일", horizons: [1, 5, 10, 15, 20, 25, 30] },
+  { id: "1y", label: "1년", horizons: [5, 15, 30, 60, 120, 180, 240] },
 ];
 
 export function PredictionPanel({ code, initial, onResult }: Props) {
   const [pred, setPred] = useState<LatestPredictionResponse | null>(initial ?? null);
   const [loading, setLoading] = useState(false);
   const [err, setErr] = useState<string | null>(null);
-  const [presetIdx, setPresetIdx] = useState(0);
-  const [customRaw, setCustomRaw] = useState("");
-  const [useCustom, setUseCustom] = useState(false);
-
-  function effectiveHorizons(): number[] {
-    if (useCustom) {
-      // 백엔드 predict.py 가 1~30 만 허용 (모델 학습/검증 범위와 일치).
-      // 프론트에서 동일 cap 으로 끊어서 400 안 나게 한다.
-      const parsed = customRaw
-        .split(",")
-        .map((s) => Number(s.trim()))
-        .filter((n) => Number.isFinite(n) && n >= 1 && n <= 30);
-      if (parsed.length > 0) return Array.from(new Set(parsed)).sort((a, b) => a - b);
-    }
-    return HORIZON_PRESETS[presetIdx].value;
-  }
+  const [presetIdx, setPresetIdx] = useState(1); // 30일 기본
 
   async function runPredict() {
     setLoading(true);
     setErr(null);
     try {
-      const horizons = effectiveHorizons();
+      const horizons = PREDICT_PRESETS[presetIdx].horizons;
       const r = await api.predict(code, horizons);
       const normalized = normalizeFromPredictResponse(code, r);
       setPred(normalized);
@@ -88,64 +75,43 @@ export function PredictionPanel({ code, initial, onResult }: Props) {
   const steps = pred?.steps ?? [];
 
   return (
-    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-center justify-between">
+    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
         <div>
           <div className="text-sm font-medium text-zinc-200">예측 (Chronos + LightGBM 앙상블)</div>
           <div className="text-xs text-zinc-500">
-            클릭한 종목은 자동 저장 후 다음 거래일 장 종료 시 실제 가격과 비교됩니다.
+            결과는 차트에 옅은 색 캔들로 이어 붙고, 꼬리 길이가 신뢰구간 폭입니다.
           </div>
         </div>
         <button
           onClick={runPredict}
           disabled={loading}
-          className="rounded-md bg-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 disabled:opacity-50"
+          className="rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-500 disabled:opacity-50"
         >
           {loading ? "예측 중…" : pred?.found ? "다시 예측" : "예상차트 보기"}
         </button>
       </div>
 
       <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
-        <span className="text-zinc-500">예측 거래일:</span>
-        {HORIZON_PRESETS.map((p, i) => (
+        <span className="text-zinc-500">예측 기간:</span>
+        {PREDICT_PRESETS.map((p, i) => (
           <button
-            key={p.label}
-            onClick={() => {
-              setUseCustom(false);
-              setPresetIdx(i);
-            }}
+            key={p.id}
+            onClick={() => setPresetIdx(i)}
             className={
-              !useCustom && presetIdx === i
-                ? "rounded-full bg-emerald-700 px-3 py-1 text-white"
+              presetIdx === i
+                ? "rounded-full bg-zinc-700 px-3 py-1 font-medium text-zinc-50"
                 : "rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
             }
           >
             {p.label}
           </button>
         ))}
-        <label
-          className={
-            useCustom
-              ? "flex items-center gap-1 rounded-full bg-emerald-700 px-3 py-1 text-white"
-              : "flex items-center gap-1 rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
-          }
-        >
-          <input
-            type="checkbox"
-            checked={useCustom}
-            onChange={(e) => setUseCustom(e.target.checked)}
-            className="h-3 w-3"
-          />
-          직접
-          <input
-            type="text"
-            placeholder="1~30, 예: 1,2,3,7"
-            value={customRaw}
-            onChange={(e) => setCustomRaw(e.target.value)}
-            onFocus={() => setUseCustom(true)}
-            className="ml-1 w-28 rounded border border-zinc-700 bg-zinc-900 px-1 py-0.5 text-xs text-zinc-100"
-          />
-        </label>
+        {presetIdx === 2 && (
+          <span className="ml-1 text-[11px] text-amber-400">
+            ※ 30거래일 너머는 모델 학습 범위 밖 — 참고용
+          </span>
+        )}
       </div>
 
       {err && <div className="mb-3 text-xs text-red-400">에러: {err}</div>}
@@ -156,54 +122,56 @@ export function PredictionPanel({ code, initial, onResult }: Props) {
             기준일 {pred.base_date} · 기준종가{" "}
             {pred.base_close != null ? pred.base_close.toLocaleString() : "-"}
           </div>
-          <table className="w-full text-left text-sm">
-            <thead className="text-xs text-zinc-500">
-              <tr>
-                <th className="py-1">+거래일</th>
-                <th>매칭일</th>
-                <th>방향</th>
-                <th>P(up/flat/down)</th>
-                <th>기대수익</th>
-                <th>예측 종가</th>
-                <th>q10~q90</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-zinc-800">
-              {steps.map((s) => (
-                <tr key={s.horizon}>
-                  <td className="py-2">+{s.horizon}</td>
-                  <td className="text-xs text-zinc-400">{s.target_date}</td>
-                  <td>
-                    <span
-                      className={
-                        s.direction === "up"
-                          ? "text-emerald-400"
-                          : s.direction === "down"
-                            ? "text-red-400"
-                            : "text-zinc-300"
-                      }
-                    >
-                      {s.direction}
-                    </span>
-                  </td>
-                  <td className="text-xs text-zinc-300">
-                    {fmtPct(s.prob_up)} / {fmtPct(s.prob_flat)} / {fmtPct(s.prob_down)}
-                  </td>
-                  <td>{fmtSignedPct(s.expected_return)}</td>
-                  <td>{s.point_close != null ? s.point_close.toLocaleString() : "-"}</td>
-                  <td className="text-xs text-zinc-400">
-                    {s.ci_low != null ? s.ci_low.toLocaleString() : "-"} ~{" "}
-                    {s.ci_high != null ? s.ci_high.toLocaleString() : "-"}
-                  </td>
+          <div className="max-h-60 overflow-y-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="sticky top-0 bg-zinc-900/95 text-xs text-zinc-500">
+                <tr>
+                  <th className="py-1">+거래일</th>
+                  <th>매칭일</th>
+                  <th>방향</th>
+                  <th>P(up/flat/down)</th>
+                  <th>기대수익</th>
+                  <th>예측 종가</th>
+                  <th>q10~q90</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="divide-y divide-zinc-800">
+                {steps.map((s) => (
+                  <tr key={s.horizon}>
+                    <td className="py-2">+{s.horizon}</td>
+                    <td className="text-xs text-zinc-400">{s.target_date}</td>
+                    <td>
+                      <span
+                        className={
+                          s.direction === "up"
+                            ? "text-rose-400"
+                            : s.direction === "down"
+                              ? "text-sky-400"
+                              : "text-zinc-300"
+                        }
+                      >
+                        {s.direction}
+                      </span>
+                    </td>
+                    <td className="text-xs text-zinc-300">
+                      {fmtPct(s.prob_up)} / {fmtPct(s.prob_flat)} / {fmtPct(s.prob_down)}
+                    </td>
+                    <td>{fmtSignedPct(s.expected_return)}</td>
+                    <td>{s.point_close != null ? s.point_close.toLocaleString() : "-"}</td>
+                    <td className="text-xs text-zinc-400">
+                      {s.ci_low != null ? s.ci_low.toLocaleString() : "-"} ~{" "}
+                      {s.ci_high != null ? s.ci_high.toLocaleString() : "-"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       ) : (
         <div className="text-xs text-zinc-500">
-          아직 예측이 없습니다. <b>예상차트 보기</b> 버튼을 누르면 1·3·5거래일 후 예측을 생성하고
-          차트에 점선으로 이어 붙입니다.
+          아직 예측이 없습니다. <b>예상차트 보기</b> 를 누르면 선택한 기간의 예측 캔들이
+          현재 차트에 옅은 색으로 이어 붙습니다.
         </div>
       )}
     </div>