refactor(card): extract shared CardHeader for detail-page body cards

상세 페이지 본문 카드 8개가 character-by-character 로 동일한 헤더
markup 을 중복 정의하고 있었음 — ReturnBucket 분리와 같은 future
drift 리스크. 단일 source of truth 로 묶음.

신규 web/components/CardHeader.tsx:
- 표준 패턴 캡슐화: mb-3 flex items-baseline justify-between 컨테이너
  + text-sm font-medium text-zinc-200 title + 옵셔널 text-[11px]
  text-zinc-500 subtitle.
- subtitle 은 옵셔널 — MetricsPanel 처럼 제목만 있는 카드도 같은
  컨테이너로 정렬돼 본문 카드 라인 높이 통일.

적용한 카드 8개:
- IntradayReturns / PeriodReturns / CompositeScoreCard /
  PeerComparePanel / TradingValuePanel / DisclosuresPanel / NewsList
  — 기존 markup 과 시각 결과 완전 동일.
- MetricsPanel — 기존 mb-2 standalone div → CardHeader 로 흡수,
  마진이 mb-2 → mb-3 으로 정렬됨. 다른 본문 카드들과 헤더 아래 공간
  통일.

적용 제외:
- PredictionPanel: 우측 슬롯이 button (예측 실행), 좌측이 title+
  subtitle 두 줄 중첩. 단순 text subtitle 모델에 안 맞음.
- InvestorCumulative: 우측 슬롯이 window 선택 button 그룹 (1M/3M/...)
  + aria-pressed. 위와 같은 이유.

검증:
- npx tsc --noEmit clean
- npx next lint "✔ No ESLint warnings or errors"

web/components/CardHeader.tsx

@@ -0,0 +1,30 @@
+// 상세 페이지 본문 카드의 표준 헤더 — title 좌, 옵셔널 subtitle 우.
+// 작은 wrapper 지만 본문 카드 9개(Metrics / IntradayReturns / PeriodReturns /
+// CompositeScoreCard / PeerComparePanel / TradingValuePanel / InvestorCumulative /
+// DisclosuresPanel / NewsList) 가 같은 mb-3 flex items-baseline justify-between
+// 패턴을 character-by-character 로 중복 정의하고 있어, ReturnBucket 분리와 같은
+// 이유로 단일 source of truth 로 묶는다 — 한쪽만 마진/폰트 바꾸면 본문 카드들
+// 사이에 톤 점프가 생기는 future drift 리스크 제거.
+//
+// PredictionPanel 은 우측이 '예측 실행' button 인 커스텀 레이아웃이라 이 wrapper
+// 대상이 아님. 해당 카드는 자체 헤더 유지.
+
+import type { ReactNode } from "react";
+
+type Props = {
+  title: ReactNode;
+  // 우측 보조 정보. 없으면 헤더에 title 만 남음 (이 경우에도 mb-3 flex 컨테이너
+  // 는 유지 — MetricsPanel 같은 단일-제목 카드도 같은 라인 높이로 정렬).
+  subtitle?: ReactNode;
+};
+
+export function CardHeader({ title, subtitle }: Props) {
+  return (
+    <div className="mb-3 flex items-baseline justify-between">
+      <div className="text-sm font-medium text-zinc-200">{title}</div>
+      {subtitle != null && (
+        <div className="text-[11px] text-zinc-500">{subtitle}</div>
+      )}
+    </div>
+  );
+}

web/components/CompositeScoreCard.tsx

@@ -12,6 +12,7 @@
 // 종합 = 평균. 50 미만 = 약세(파랑), 50 초과 = 강세(빨강).
 
 import type { ChartPayload } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 type Scores = {
   momentum: number | null;
@@ -111,12 +112,7 @@ export function CompositeScoreCard({ chart }: { chart: ChartPayload }) {
   const s = computeScores(chart);
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">종합 점수 (AI)</div>
-        <div className="text-[11px] text-zinc-500">
-          모멘텀·수급·감성·추세 평균
-        </div>
-      </div>
+      <CardHeader title="종합 점수 (AI)" subtitle="모멘텀·수급·감성·추세 평균" />
       <div className="grid grid-cols-[auto_1fr] items-center gap-5">
         <ScoreDial value={s.composite} />
         <div className="grid grid-cols-2 gap-2">

web/components/DisclosuresPanel.tsx

@@ -5,6 +5,7 @@
 
 import { useEffect, useState } from "react";
 import { api, type NewsResponse } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 export function DisclosuresPanel({ code }: { code: string }) {
   const [data, setData] = useState<NewsResponse | null>(null);
@@ -27,12 +28,10 @@ export function DisclosuresPanel({ code }: { code: string }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">공시 (DART)</div>
-        <div className="text-[11px] text-zinc-500">
-          {data ? `최근 ${data.items.length}건` : ""}
-        </div>
-      </div>
+      <CardHeader
+        title="공시 (DART)"
+        subtitle={data ? `최근 ${data.items.length}건` : ""}
+      />
 
       {err && <div className="text-xs text-red-400">공시 로딩 실패: {err}</div>}
       {!err && !data && <div className="text-xs text-zinc-500">공시 로딩 중…</div>}

web/components/IntradayReturns.tsx

@@ -13,6 +13,7 @@
 // 추가 백엔드 호출 없음 — chart.ohlcv 슬라이싱만.
 
 import type { OhlcvPoint } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 import { ReturnBucket } from "./ReturnBucket";
 
 const BUCKETS: { label: string; bars: number }[] = [
@@ -50,10 +51,7 @@ export function IntradayReturns({ ohlcv }: { ohlcv: OhlcvPoint[] }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">단기 수익률</div>
-        <div className="text-[11px] text-zinc-500">10분봉 기준 · 60초 갱신</div>
-      </div>
+      <CardHeader title="단기 수익률" subtitle="10분봉 기준 · 60초 갱신" />
       <div className="grid grid-cols-3 gap-2 sm:grid-cols-5">
         {buckets.map((b) => (
           <ReturnBucket key={b.label} label={b.label} pct={b.pct} />

web/components/MetricsPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { api, type MetricsResponse } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 export function MetricsPanel({ code }: { code: string }) {
   const [m, setM] = useState<MetricsResponse | null>(null);
@@ -36,7 +37,7 @@ export function MetricsPanel({ code }: { code: string }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-2 text-sm font-medium text-zinc-200">최근 30일 모델 성능</div>
+      <CardHeader title="최근 30일 모델 성능" />
       <table className="w-full text-left text-sm">
         <thead className="text-xs text-zinc-500">
           <tr>

web/components/NewsList.tsx

@@ -7,6 +7,7 @@
 
 import { useEffect, useState } from "react";
 import { api, type NewsItem, type NewsResponse } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 export function NewsList({ code }: { code: string }) {
   const [data, setData] = useState<NewsResponse | null>(null);
@@ -34,10 +35,7 @@ export function NewsList({ code }: { code: string }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">뉴스 · 공시</div>
-        <div className="text-[11px] text-zinc-500">최근 {data.items.length}건</div>
-      </div>
+      <CardHeader title="뉴스 · 공시" subtitle={`최근 ${data.items.length}건`} />
       <ul className="space-y-2">
         {data.items.map((n, i) => (
           <NewsCard key={i} n={n} />

web/components/PeerComparePanel.tsx

@@ -7,6 +7,7 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { api, type PeerCompareItem, type PeerCompareResponse } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 export function PeerComparePanel({ code }: { code: string }) {
   const [data, setData] = useState<PeerCompareResponse | null>(null);
@@ -50,12 +51,10 @@ export function PeerComparePanel({ code }: { code: string }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">동종업종 비교</div>
-        <div className="text-[11px] text-zinc-500">
-          최근 {data.window}거래일 · peer {data.peer_count ?? 0}종목
-        </div>
-      </div>
+      <CardHeader
+        title="동종업종 비교"
+        subtitle={`최근 ${data.window}거래일 · peer ${data.peer_count ?? 0}종목`}
+      />
 
       <div className="mb-3 flex flex-wrap gap-1.5">
         {data.themes.map((t) => (

web/components/PeriodReturns.tsx

@@ -5,6 +5,7 @@
 // 거래일 기준 근사: 1주≈5, 1개월≈21, 3개월≈63, 6개월≈126, 1년≈252.
 
 import type { OhlcvPoint } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 import { ReturnBucket } from "./ReturnBucket";
 
 const BUCKETS: { label: string; days: number }[] = [
@@ -40,10 +41,7 @@ export function PeriodReturns({ ohlcv }: { ohlcv: OhlcvPoint[] }) {
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">기간 수익률</div>
-        <div className="text-[11px] text-zinc-500">차트 구간 기준</div>
-      </div>
+      <CardHeader title="기간 수익률" subtitle="차트 구간 기준" />
       <div className="grid grid-cols-3 gap-2 sm:grid-cols-6">
         {buckets.map((b) => (
           <ReturnBucket key={b.label} label={b.label} pct={b.pct} />

web/components/TradingValuePanel.tsx

@@ -6,6 +6,7 @@
 // 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑.
 
 import type { TradingValuePoint } from "../lib/api";
+import { CardHeader } from "./CardHeader";
 
 export function TradingValuePanel({
   data,
@@ -24,10 +25,10 @@ export function TradingValuePanel({
 
   return (
     <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">거래주체 순매수</div>
-        <div className="text-[11px] text-zinc-500">최근 {recent.length}일 · 단위: 억원</div>
-      </div>
+      <CardHeader
+        title="거래주체 순매수"
+        subtitle={`최근 ${recent.length}일 · 단위: 억원`}
+      />
       <div className="overflow-hidden rounded-md border border-zinc-800">
         <table className="w-full text-xs tabular-nums">
           <thead className="bg-zinc-900/60 text-[11px] text-zinc-500">