From fabc21e262f4d62283d11dee5ff43018175c7228 Mon Sep 17 00:00:00 2001
From: claude-owner <claude-owner@ejclaw.local>
Date: Mon, 1 Jun 2026 10:57:50 +0900
Subject: [PATCH] ui(chart): harmonize StockChart container tone to detail-page
 body-card palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

상세 페이지 본문 카드 톤 통일 마무리. StockChart 컨테이너는 본문 영역의
top-level 카드 슬롯인데 마지막 남은 분기 톤이었음:

  before:  w-full rounded-lg border border-zinc-800 bg-zinc-900/30 p-2
  after:   w-full rounded-md border border-zinc-800 bg-zinc-900/40 p-2

- rounded-lg → rounded-md : 3b06b95 에서 PredictionPanel 도 같은 통일을 했고,
  같은 좌측 컬럼에서 차트 바로 아래에 PredictionPanel 이 붙어있어 corner radius
  분기는 시각적 톤 점프.
- bg-zinc-900/30 → bg-zinc-900/40 : /30 은 ReturnBucket 같은 nested sub-card
  보조 톤. top-level 본문 카드는 일관되게 /40 이어야 함.
- p-2 유지 : 차트 캔버스가 자체 inner padding 을 들이므로 p-4 는 빈 가장자리
  낭비. 이건 의도된 분기라 주석으로 근거 명시.
- fullscreen 모드는 viewport 전체 차지라 별개 — 손대지 않음.

전체화면 외 모든 종목 페이지에서 StockChart → PredictionPanel 톤 일치 확인.
tsc/next lint 통과.
---
 web/components/StockChart.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/components/StockChart.tsx b/web/components/StockChart.tsx
index 8f3178b..d8a0107 100644
--- a/web/components/StockChart.tsx
+++ b/web/components/StockChart.tsx
@@ -918,10 +918,14 @@ export function StockChart({ chart, prediction, targets }: Props) {
   };
 
   // 전체화면(native or 폴백) 일 때는 viewport 를 꽉 채워서 차트 면적 최대화.
-  // 일반 모드는 기존 카드 스타일 유지.
+  // 일반 모드는 상세 페이지 본문 카드 표준 톤 (rounded-md / border-zinc-800 /
+  // bg-zinc-900/40) 채택 — 같은 좌측 컬럼 바로 아래의 PredictionPanel 과 톤 일치.
+  // padding 만 p-2 유지: 차트 캔버스가 자체 inner padding 을 들이므로 p-4 는 빈
+  // 가장자리 낭비. (참고: bg-zinc-900/30 은 ReturnBucket 같은 nested sub-card 용
+  // 보조 톤 — top-level 본문 카드는 /40 로 통일.)
   const wrapperCls = fullscreen
     ? "fixed inset-0 z-50 flex w-full flex-col overflow-auto bg-zinc-950 p-3"
-    : "w-full rounded-lg border border-zinc-800 bg-zinc-900/30 p-2";
+    : "w-full rounded-md border border-zinc-800 bg-zinc-900/40 p-2";
   // 차트 본체 높이 — 전체화면이면 가용 공간을 차지하도록 flex-1.
   const chartBoxCls = fullscreen
     ? "relative min-h-[300px] flex-1 w-full"