fix(stock): 포트폴리오 카드 모바일 금액 줄바꿈 방지

천만원 단위 이상에서 '원'이 다음 줄로 넘어가던 문제 해결.
값 길이별 폰트 단계 축소(is-fit-sm/xs) + nowrap 적용.

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

src/pages/stock/Stock.css

@@ -833,6 +833,17 @@
 .pf-total-summary__card strong {
     font-size: 16px;
     color: var(--text);
+    white-space: nowrap;
+}
+
+.pf-total-summary__card strong.is-fit-sm {
+    font-size: 13px;
+    letter-spacing: -0.01em;
+}
+
+.pf-total-summary__card strong.is-fit-xs {
+    font-size: 11px;
+    letter-spacing: -0.02em;
 }
 
 .pf-item-actions {
@@ -955,6 +966,14 @@
     .pf-total-summary__card strong {
         font-size: 14px;
     }
+
+    .pf-total-summary__card strong.is-fit-sm {
+        font-size: 12px;
+    }
+
+    .pf-total-summary__card strong.is-fit-xs {
+        font-size: 10px;
+    }
 }
 
 /* ── Cash Panel (예수금) ─────────────────────────────────────────── */

src/pages/stock/components/PortfolioTab.jsx

@@ -4,7 +4,7 @@ import {
     ResponsiveContainer, AreaChart, Area, XAxis, YAxis,
     Tooltip as ChartTooltip,
 } from 'recharts';
-import { formatNumber, formatPercent, toNumeric, profitColorClass } from '../stockUtils';
+import { formatNumber, formatPercent, toNumeric, profitColorClass, numFitClass } from '../stockUtils';
 
 const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
     <>
@@ -140,32 +140,38 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                         { label: '총 평가', value: pf.portfolioSummary.total_eval },
                         { label: '총 손익', value: pf.portfolioSummary.total_profit, isProfit: true },
                         { label: '수익률', value: pf.portfolioSummary.total_profit_rate, isRate: true },
-                    ].map((s) => (
+                    ].map((s) => {
-                        <div key={s.label} className="pf-total-summary__card">
+                        const display = s.isRate ? formatPercent(s.value) : formatNumber(s.value);
-                            <span>{s.label}</span>
+                        const profitCls = s.isProfit || s.isRate
-                            <strong
+                            ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
-                                className={
+                            : '';
-                                    s.isProfit || s.isRate
+                        return (
-                                        ? `stock-profit ${profitColorClass(toNumeric(s.value))}`
+                            <div key={s.label} className="pf-total-summary__card">
-                                        : ''
+                                <span>{s.label}</span>
-                                }
+                                <strong className={`${profitCls} ${numFitClass(display)}`.trim()}>
-                            >
+                                    {display}
-                                {s.isRate ? formatPercent(s.value) : formatNumber(s.value)}
+                                </strong>
-                            </strong>
+                            </div>
-                        </div>
+                        );
-                    ))}
+                    })}
-                    {pf.totalCash != null && (
+                    {pf.totalCash != null && (() => {
-                        <div className="pf-total-summary__card is-cash">
+                        const display = `${formatNumber(pf.totalCash)}원`;
-                            <span>예수금 합계</span>
+                        return (
-                            <strong>{formatNumber(pf.totalCash)}원</strong>
+                            <div className="pf-total-summary__card is-cash">
-                        </div>
+                                <span>예수금 합계</span>
-                    )}
+                                <strong className={numFitClass(display)}>{display}</strong>
-                    {pf.totalAssets != null && (
+                            </div>
-                        <div className="pf-total-summary__card is-assets">
+                        );
-                            <span>총 자산</span>
+                    })()}
-                            <strong>{formatNumber(pf.totalAssets)}원</strong>
+                    {pf.totalAssets != null && (() => {
-                        </div>
+                        const display = `${formatNumber(pf.totalAssets)}원`;
-                    )}
+                        return (
+                            <div className="pf-total-summary__card is-assets">
+                                <span>총 자산</span>
+                                <strong className={numFitClass(display)}>{display}</strong>
+                            </div>
+                        );
+                    })()}
                 </div>
             )}
 

src/pages/stock/stockUtils.js

@@ -71,6 +71,13 @@ export const profitColorClass = (numericValue) => {
     return '';
 };
 
+export const numFitClass = (text) => {
+    const len = String(text ?? '').length;
+    if (len >= 13) return 'is-fit-xs';
+    if (len >= 10) return 'is-fit-sm';
+    return '';
+};
+
 export const getVixLabel = (vix) => {
     if (vix < 12) return '극히 낮음 (안일 주의)';
     if (vix < 20) return '정상 (안정적)';