feat(evolver): TrialsGrid + BaseDiff + BaseHistory 3 컴포넌트

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

src/pages/lotto/evolver/BaseDiff.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+
+function diffMarker(diff) {
+    if (Math.abs(diff) < 0.005) return { mark: '=', cls: 'eq' };
+    if (diff > 0) return diff < 0.05 ? { mark: '↑', cls: 'up' } : { mark: '↑↑', cls: 'up-big' };
+    return diff > -0.05 ? { mark: '↓', cls: 'down' } : { mark: '↓↓', cls: 'down-big' };
+}
+
+export default function BaseDiff({ previousBase, newBase, updateReason }) {
+    if (!previousBase || !newBase) {
+        return (
+            <div className="evolver-card base-diff empty">
+                <h2>다음주 base 변경</h2>
+                <p className="muted">아직 base 변경 이력 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card base-diff">
+            <h2>다음주 base 변경 {updateReason && <span className="badge">{updateReason}</span>}</h2>
+            <div className="diff-grid">
+                {METRIC_NAMES.map((name, i) => {
+                    const prev = previousBase[i] || 0;
+                    const next = newBase[i] || 0;
+                    const diff = next - prev;
+                    const { mark, cls } = diffMarker(diff);
+                    return (
+                        <div key={name} className={`metric-card ${cls}`}>
+                            <div className="metric-name">{name}</div>
+                            <div className="metric-values">
+                                {prev.toFixed(2)} → <strong>{next.toFixed(2)}</strong>
+                            </div>
+                            <div className="metric-diff">
+                                {mark} {diff >= 0 ? '+' : ''}{(diff * 100).toFixed(0)}%p
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}