feat(ui): 홈 SEED-10 타일 + 가격 헤로 sparkline

홈 페이지:
  - 텍스트 카드를 SeedTiles 컴포넌트로 교체. 10개 병렬로 /api/chart 2일치 받아
    현재가 + 전일대비 (절대값+%) 카드 그리드 (2/3/5 컬럼).
  - max-w 를 3xl → 5xl 로 확장하여 타일 5열 그리드 수용.

종목 페이지:
  - PriceHero 에 series prop 추가, 우측에 SVG sparkline (최근 30 종가) 표시.
  - 라인 색상은 전일대비 부호로 결정 (상승 빨강 / 하락 파랑).
  - lightweight-charts 인스턴스 추가 없이 인라인 SVG 만 사용 — 가벼움.

verify: tsc/next lint clean.

web/components/PriceHero.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // 종목 페이지 상단 가격 헤더.
-// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 (절대값 + 퍼센트).
+// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
 // 한국 거래소 관행대로 상승=빨강, 하락=파랑.
 
 type Props = {
@@ -11,9 +11,11 @@ type Props = {
   current: number | null;
   prev: number | null;
   asOf?: string | null;
+  // 헤더 우측 sparkline 용 종가 시계열 (오래된 → 최신 순). 비어 있으면 미표시.
+  series?: number[];
 };
 
-export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
+export function PriceHero({ name, code, market, current, prev, asOf, series }: Props) {
   const change = current != null && prev != null ? current - prev : null;
   const pct = change != null && prev ? (change / prev) * 100 : null;
   const tone =
@@ -25,28 +27,70 @@ export function PriceHero({ name, code, market, current, prev, asOf }: Props) {
   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)}%)
+    <div className="mb-5 flex items-end justify-between gap-4">
+      <div>
+        <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>
-      {asOf && (
-        <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>
+
+      {series && series.length >= 2 && (
+        <Sparkline
+          values={series}
+          stroke={change != null && change < 0 ? "#3b82f6" : "#ef4444"}
+        />
       )}
     </div>
   );
 }
+
+// 가벼운 SVG sparkline. lightweight-charts 인스턴스를 또 만들 필요 없음.
+function Sparkline({ values, stroke }: { values: number[]; stroke: string }) {
+  const W = 140;
+  const H = 44;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const stepX = W / (values.length - 1);
+  const points = values
+    .map((v, i) => {
+      const x = (i * stepX).toFixed(1);
+      const y = (H - ((v - min) / span) * H).toFixed(1);
+      return `${x},${y}`;
+    })
+    .join(" ");
+  return (
+    <svg
+      width={W}
+      height={H}
+      viewBox={`0 0 ${W} ${H}`}
+      className="shrink-0 opacity-80"
+      aria-hidden
+    >
+      <polyline
+        points={points}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}