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

@@ -1,32 +1,40 @@
-// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
-// 작은 wrapper 지만 본문 카드 8개(Metrics / IntradayReturns / PeriodReturns /
+// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 우측 슬롯 우.
+// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns /
 // CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel /
-// NewsList) 가 같은 mb-3 flex items-baseline justify-between 패턴을
-// character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은 이유로
-// 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들 사이에
-// 톤 점프가 생기는 future drift 리스크 제거.
+// NewsList / InvestorCumulative) 가 같은 mb-3 flex items-baseline justify-between
+// 패턴을 character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은
+// 이유로 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들
+// 사이에 톤 점프가 생기는 future drift 리스크 제거.
 //
-// 제외 카드 — 우측이 단순 subtitle 텍스트가 아닌 인터랙티브 컨트롤이라 이
-// wrapper 대상이 아님. 자체 헤더 유지:
-//   - PredictionPanel       : 우측이 '예측 실행' button.
-//   - InvestorCumulative    : 우측이 window 선택 button 그룹(aria-pressed).
+// 우측 슬롯은 두 형태:
+//   - subtitle: 단순 보조 텍스트 (text-[11px] text-zinc-500 자동 적용). 8개 카드 사용.
+//   - right   : 임의 ReactNode (버튼 그룹 등 인터랙티브). InvestorCumulative 가 사용.
+// 둘 중 하나만 지정. 동시 지정 시 right 우선 (호출자 의도 명확화는 호출 시점에서).
+//
+// 제외 카드 — PredictionPanel: title 자체가 제목 + 설명 2줄 stack 이고 우측 큰
+// button 이라 flex 정렬이 items-center 필요. 별도 패턴이 한 곳뿐이라 wrapper 의
+// API 를 확장하기보다는 자체 헤더 유지하는 게 surgical.
 
 import type { ReactNode } from "react";
 
 type Props = {
   title: ReactNode;
-  // 우측 보조 정보. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
+  // 우측 보조 텍스트. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
   // 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬).
   subtitle?: ReactNode;
+  // 우측 임의 노드 (버튼 그룹 등). 제공되면 subtitle 대신 렌더.
+  right?: ReactNode;
 };
 
-export function CardHeader({ title, subtitle }: Props) {
+export function CardHeader({ title, subtitle, right }: Props) {
   return (
-    <div className="mb-3 flex items-baseline justify-between">
+    <div className="mb-3 flex items-baseline justify-between gap-2">
       <div className="text-sm font-medium text-zinc-200">{title}</div>
-      {subtitle != null && (
+      {right != null ? (
+        right
+      ) : subtitle != null ? (
         <div className="text-[11px] text-zinc-500">{subtitle}</div>
-      )}
+      ) : null}
     </div>
   );
 }

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,8 +67,9 @@ 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>
+      <CardHeader
+        title="투자자별 누적 순매수"
+        right={
           <div className="flex items-center gap-1.5 text-[10px]">
             {WINDOW_OPTIONS.map((w) => {
               const on = win === w.v;
@@ -88,7 +90,8 @@ export function InvestorCumulative({ data }: { data: TradingValuePoint[] }) {
               );
             })}
           </div>
-      </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]} />