feat(lotto): 브리핑 컴포넌트 + CSS

src/pages/lotto/components/briefing/BriefingEmpty.jsx

@@ -0,0 +1,12 @@
+export default function BriefingEmpty({ regenerating, onRegenerate, error }) {
+    return (
+        <div className="briefing-empty">
+            <p>아직 이번 주 브리핑이 없습니다.</p>
+            <p className="briefing-empty-hint">매주 월요일 07:00에 자동 생성됩니다.</p>
+            <button onClick={onRegenerate} disabled={regenerating}>
+                {regenerating ? '⏳ 생성 중...' : '지금 생성'}
+            </button>
+            {error && <p className="briefing-error">⚠️ {error}</p>}
+        </div>
+    );
+}

src/pages/lotto/components/briefing/BriefingHeader.jsx

@@ -0,0 +1,28 @@
+import { estimateCost, fmtUsd, fmtTokens } from './pricing';
+
+export default function BriefingHeader({ briefing, regenerating, onRegenerate }) {
+    const cost = estimateCost(briefing);
+    const genDate = new Date(briefing.generated_at).toLocaleString('ko-KR');
+    return (
+        <div className="briefing-header">
+            <div className="briefing-header-row">
+                <h2>🗓 #{briefing.draw_no}회 브리핑</h2>
+                <button onClick={onRegenerate} disabled={regenerating}>
+                    {regenerating ? '⏳ 생성 중...' : '🔄 다시 생성'}
+                </button>
+            </div>
+            <div className="briefing-meta">
+                <span>{genDate}</span>
+                <span className="briefing-confidence">
+                    신뢰도 <strong>{briefing.confidence}</strong>/100
+                </span>
+                <span className="briefing-tokens">
+                    {fmtTokens(briefing.tokens_input)} in · {fmtTokens(briefing.tokens_output)} out · {fmtUsd(cost)}
+                </span>
+            </div>
+            <div className="briefing-confidence-bar">
+                <div style={{ width: `${briefing.confidence}%` }} />
+            </div>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/BriefingSummary.jsx

@@ -0,0 +1,16 @@
+export default function BriefingSummary({ narrative }) {
+    return (
+        <div className="briefing-summary">
+            <h3>{narrative.headline}</h3>
+            <ul className="briefing-3lines">
+                {narrative.summary_3lines.map((line, i) => <li key={i}>{line}</li>)}
+            </ul>
+            {narrative.hot_cold_comment && (
+                <p className="briefing-hotcold">🔥❄️ {narrative.hot_cold_comment}</p>
+            )}
+            {narrative.warnings && (
+                <p className="briefing-warning">⚠️ {narrative.warnings}</p>
+            )}
+        </div>
+    );
+}

src/pages/lotto/components/briefing/CuratorUsageFooter.jsx

@@ -0,0 +1,17 @@
+import useCuratorUsage from '../../hooks/useCuratorUsage';
+import { estimateCost, fmtUsd, fmtTokens } from './pricing';
+
+export default function CuratorUsageFooter() {
+    const { usage } = useCuratorUsage(30);
+    if (!usage) return null;
+    const cost = estimateCost(usage);
+    return (
+        <div className="curator-usage-footer">
+            <span>최근 30일 큐레이터:</span>
+            <span>{usage.calls}회 호출</span>
+            <span>{fmtTokens(usage.tokens_input + usage.tokens_output)} tokens</span>
+            <span>{fmtUsd(cost)}</span>
+            <span>캐시 {(usage.cache_hit_rate * 100).toFixed(0)}%</span>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/PickSetCard.jsx

@@ -0,0 +1,18 @@
+const RISK_BADGE = { '안정': '🟢', '균형': '🟡', '공격': '🔴' };
+
+export default function PickSetCard({ pick, index }) {
+    return (
+        <div className={`pick-card pick-card--${pick.risk_tag}`}>
+            <div className="pick-card-header">
+                <span className="pick-card-index">Set {index + 1}</span>
+                <span className="pick-card-risk">{RISK_BADGE[pick.risk_tag] || '⚪'} {pick.risk_tag}</span>
+            </div>
+            <div className="pick-card-balls">
+                {pick.numbers.map(n => (
+                    <span key={n} className={`ball ball--${Math.ceil(n / 10)}`}>{n}</span>
+                ))}
+            </div>
+            <p className="pick-card-reason">{pick.reason}</p>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/pricing.js

@@ -0,0 +1,23 @@
+const IN_PER_M = 3.00;
+const OUT_PER_M = 15.00;
+const CACHE_READ_PER_M = 0.30;
+const CACHE_WRITE_PER_M = 3.75;
+
+export function estimateCost({ tokens_input = 0, tokens_output = 0, cache_read = 0, cache_write = 0 }) {
+    const usd =
+        (tokens_input / 1_000_000) * IN_PER_M +
+        (tokens_output / 1_000_000) * OUT_PER_M +
+        (cache_read / 1_000_000) * CACHE_READ_PER_M +
+        (cache_write / 1_000_000) * CACHE_WRITE_PER_M;
+    return usd;
+}
+
+export function fmtUsd(usd) {
+    if (usd < 0.01) return `$${usd.toFixed(4)}`;
+    return `$${usd.toFixed(3)}`;
+}
+
+export function fmtTokens(n) {
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+    return String(n);
+}