refactor(card): extend CardHeader with right slot, absorb InvestorCumulative

본문 카드 헤더 단일 source of truth 한 단계 확장.

CardHeader:
- 옵셔널 right?: ReactNode 슬롯 추가. 제공되면 subtitle 대신 렌더. subtitle 은
  텍스트 케이스(text-[11px] text-zinc-500 자동) 편의 prop 으로 유지.
- 컨테이너에 gap-2 추가. 기존 8개 caller 는 justify-between 으로 충분히 떨어져
  있어 시각 변화 없고, 좁은 폭에서 title↔우측 슬롯 충돌 방지 효과.
- 주석: 적용 카드 8 → 9 (InvestorCumulative 추가). 제외 카드 PredictionPanel
  유지 — title 이 제목+설명 2줄 stack 이고 큰 button 정렬을 위해 items-center
  필요해 wrapper API 확장 비용보다 자체 헤더 유지가 surgical.

InvestorCumulative:
- 자체 헤더 markup 을 <CardHeader title=... right={...} /> 로 교체. window
  선택 button 그룹(20/60/120일 · aria-pressed) 은 right slot 으로 전달, 기존
  inline className/동작 그대로 보존.
- 시각 결과 완전 동일 — 기존 헤더가 character-by-character 로 CardHeader 와
  같은 mb-3 flex items-baseline justify-between gap-2 였음을 확인.

검증: tsc/next lint 통과.

web/components/InvestorCumulative.tsx

@@ -14,6 +14,7 @@
 
 import { useMemo, useState } from "react";
 import type { TradingValuePoint } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 type Window = 20 | 60 | 120;
 
@@ -66,29 +67,31 @@ export function InvestorCumulative({ data }: { data: TradingValuePoint[] }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between gap-2">
-        <div className="text-sm font-medium text-zinc-200">투자자별 누적 순매수</div>
-        <div className="flex items-center gap-1.5 text-[10px]">
-          {WINDOW_OPTIONS.map((w) => {
-            const on = win === w.v;
-            return (
-              <button
-                key={w.v}
-                type="button"
-                onClick={() => setWin(w.v)}
-                className={`rounded-full border px-2 py-0.5 transition ${
-                  on
-                    ? "border-zinc-600 bg-zinc-800/80 text-zinc-100"
-                    : "border-zinc-800 bg-transparent text-zinc-500 hover:text-zinc-300"
-                }`}
-                aria-pressed={on}
-              >
-                {w.label}
-              </button>
-            );
-          })}
-        </div>
-      </div>
+      <CardHeader
+        title="투자자별 누적 순매수"
+        right={
+          <div className="flex items-center gap-1.5 text-[10px]">
+            {WINDOW_OPTIONS.map((w) => {
+              const on = win === w.v;
+              return (
+                <button
+                  key={w.v}
+                  type="button"
+                  onClick={() => setWin(w.v)}
+                  className={`rounded-full border px-2 py-0.5 transition ${
+                    on
+                      ? "border-zinc-600 bg-zinc-800/80 text-zinc-100"
+                      : "border-zinc-800 bg-transparent text-zinc-500 hover:text-zinc-300"
+                  }`}
+                  aria-pressed={on}
+                >
+                  {w.label}
+                </button>
+              );
+            })}
+          </div>
+        }
+      />
       <div className="space-y-2.5">
         {SUBJECTS.map((s) => (
           <SubjectRow key={s.key} label={s.label} color={s.color} values={series.out[s.key]} />