From 9386c1e29a954974c8fe4f8e14612d3c06b0effc Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Mon, 16 Mar 2026 09:22:01 +0900
Subject: [PATCH] =?UTF-8?q?style(prediction):=20=ED=99=95=EC=82=B0=20?=
 =?UTF-8?q?=EC=98=88=EC=B8=A1=20=EC=9A=94=EC=95=BD=20=ED=8F=B0=ED=8A=B8/?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=84=20=EC=98=A4?=
 =?UTF-8?q?=EC=97=BC=20=EC=A2=85=ED=95=A9=20=EC=83=81=ED=99=A9=EA=B3=BC=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PredictionCard를 StatBox와 동일한 가로 레이아웃(라벨-값)으로 변경
- 폰트 사이즈 text-xs → text-[9px]로 축소하여 오염 종합 상황과 일치

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../tabs/prediction/components/RightPanel.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/src/tabs/prediction/components/RightPanel.tsx b/frontend/src/tabs/prediction/components/RightPanel.tsx
index 3f309af..81f2707 100755
--- a/frontend/src/tabs/prediction/components/RightPanel.tsx
+++ b/frontend/src/tabs/prediction/components/RightPanel.tsx
@@ -218,10 +218,10 @@ export function RightPanel({ onOpenBacktrack, onOpenRecalc, onOpenReport, detail
 
         {/* 확산 예측 요약 */}
         <Section title="확산 예측 요약 (+18h)" badge="위험" badgeColor="red">
-          <div className="grid grid-cols-2 gap-0.5">
+          <div className="grid grid-cols-2 gap-0.5 text-[9px]">
             <PredictionCard value="4.7 km²" label="영향 면적" color="var(--red)" />
-            <PredictionCard value="6.2 km" label="최대 확산 거리" color="var(--orange)" />
-            <PredictionCard value="NE 42°" label="주 확산 방향" color="var(--cyan)" />
+            <PredictionCard value="6.2 km" label="확산 거리" color="var(--orange)" />
+            <PredictionCard value="NE 42°" label="확산 방향" color="var(--cyan)" />
             <PredictionCard value="0.35 m/s" label="확산 속도" color="var(--t1)" />
           </div>
         </Section>
@@ -421,16 +421,9 @@ function StatBox({
 
 function PredictionCard({ value, label, color }: { value: string; label: string; color: string }) {
   return (
-    <div className="text-center py-[5px] px-1 bg-bg-0 border border-border rounded-[3px]">
-      <div
-        style={{ color }}
-        className="text-xs font-extrabold font-mono"
-      >
-        {value}
-      </div>
-      <div className="text-[7px] text-text-3 font-korean">
-        {label}
-      </div>
+    <div className="flex justify-between px-2 py-1 bg-bg-0 border border-border rounded-[3px] text-[9px]">
+      <span className="text-text-3 font-korean">{label}</span>
+      <span style={{ fontWeight: 700, color, fontFamily: 'var(--fM)' }}>{value}</span>
     </div>
   )
 }