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/PriceHero.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+// 종목 페이지 상단 가격 헤더.
+// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 (절대값 + 퍼센트).
+// 한국 거래소 관행대로 상승=빨강, 하락=파랑.
+
+type Props = {
+  name: string;
+  code: string;
+  market: string;
+  current: number | null;
+  prev: number | null;
+  asOf?: string | null;
+};
+
+export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
+  const change = current != null && prev != null ? current - prev : null;
+  const pct = change != null && prev ? (change / prev) * 100 : null;
+  const tone =
+    change == null || change === 0
+      ? "text-zinc-400"
+      : change > 0
+        ? "text-rose-400"
+        : "text-sky-400";
+  const arrow = change == null || change === 0 ? "—" : change > 0 ? "▲" : "▼";
+
+  return (
+    <div className="mb-5">
+      <div className="text-xs text-zinc-500">
+        {code} · {market}
+      </div>
+      <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
+        {name}
+      </h1>
+      <div className="mt-3 flex items-baseline gap-3">
+        <span className="text-4xl font-semibold tabular-nums text-zinc-50">
+          {current != null ? current.toLocaleString() : "-"}
+        </span>
+        {change != null && pct != null && (
+          <span className={`text-base font-medium tabular-nums ${tone}`}>
+            {arrow} {Math.abs(change).toLocaleString()}{" "}
+            ({pct >= 0 ? "+" : ""}
+            {pct.toFixed(2)}%)
+          </span>
+        )}
+      </div>
+      {asOf && (
+        <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>
+      )}
+    </div>
+  );
+}