style(prediction): 확산 예측 요약 폰트/레이아웃을 오염 종합 상황과 통일

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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="6.2 km" label="확산 거리" color="var(--orange)" />
-            <PredictionCard value="NE 42°" label="주 확산 방향" color="var(--cyan)" />
+            <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 className="flex justify-between px-2 py-1 bg-bg-0 border border-border rounded-[3px] text-[9px]">
-      <div
+      <span className="text-text-3 font-korean">{label}</span>
-        style={{ color }}
+      <span style={{ fontWeight: 700, color, fontFamily: 'var(--fM)' }}>{value}</span>
-        className="text-xs font-extrabold font-mono"
-      >
-        {value}
-      </div>
-      <div className="text-[7px] text-text-3 font-korean">
-        {label}
-      </div>
     </div>
   )
 }