fix(tarot): 랜딩 영상 element 복원 + scroll-cue 제거

- codex UI 재구성 시 <video> element 자체와 .tarot__hero-video CSS가
  누락되어 영상 재생 불가 (poster img만 정적 표시).
- <video> 복원 (autoplay, loop, muted, playsInline) + poster fallback.
- CSS z-index 0으로 poster 위, overlay(1) 아래에 stack.
- prefers-reduced-motion @media display:none 동작 복원.
- 사용자 요청에 따라 tarot__scroll-cue 제거.

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

public/images/tarot/card_back.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300" width="200" height="300">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1a0d2e"/>
+      <stop offset="100%" stop-color="#0a0420"/>
+    </linearGradient>
+    <linearGradient id="goldFrame" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#d4af37"/>
+      <stop offset="100%" stop-color="#8b6914"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="300" rx="14" fill="url(#bg)"/>
+  <rect x="8" y="8" width="184" height="284" rx="10" fill="none"
+        stroke="url(#goldFrame)" stroke-width="2"/>
+  <g transform="translate(100 150)" fill="#d4af37" font-family="serif" text-anchor="middle">
+    <circle r="38" fill="none" stroke="#d4af37" stroke-width="1.5"/>
+    <text font-size="48" dy="14" font-style="italic">A</text>
+    <g opacity=".5">
+      <circle cx="-60" cy="-90" r="1.5"/>
+      <circle cx="55" cy="-100" r="1"/>
+      <circle cx="-50" cy="80" r="1.2"/>
+      <circle cx="65" cy="90" r="1"/>
+      <circle cx="0" cy="-110" r="1.6"/>
+    </g>
+  </g>
+  <text x="100" y="280" fill="#d4af37" font-family="serif" font-size="10"
+        text-anchor="middle" letter-spacing="2">ARCANA TAROT</text>
+</svg>

src/api.js

@@ -55,6 +55,22 @@ export async function apiPut(path, body) {
   return res.json();
 }
 
+export async function apiPatch(path, body) {
+  const res = await fetch(toApiUrl(path), {
+    method: "PATCH",
+    headers: {
+      "Accept": "application/json",
+      ...(body ? { "Content-Type": "application/json" } : {}),
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`HTTP ${res.status} ${res.statusText}: ${text}`);
+  }
+  return res.json();
+}
+
 export function getLatest() {
   return apiGet("/api/lotto/latest");
 }
@@ -681,3 +697,75 @@ export const refreshScreenerSnap  = ()           => apiPost('/api/stock/screener
 export const listScreenerRuns     = (limit = 30) => apiGet (`/api/stock/screener/runs?limit=${limit}`);
 export const getScreenerRun       = (id)         => apiGet (`/api/stock/screener/runs/${id}`);
 
+// --- Lotto Weight Evolver ---
+
+export async function fetchEvolverStatus() {
+    const r = await fetch('/api/lotto/evolver/status');
+    if (!r.ok) throw new Error(`evolver/status ${r.status}`);
+    return r.json();
+}
+
+export async function fetchEvolverHistory(weeks = 12) {
+    const r = await fetch(`/api/lotto/evolver/history?weeks=${weeks}`);
+    if (!r.ok) throw new Error(`evolver/history ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoTasks({ days = 7, taskType = null } = {}) {
+    const params = new URLSearchParams({ days: String(days), limit: '100' });
+    if (taskType) params.set('task_type', taskType);
+    const r = await fetch(`/api/agent-office/agents/lotto/tasks?${params}`);
+    if (!r.ok) throw new Error(`agent-office tasks ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoLogs({ days = 7 } = {}) {
+    const r = await fetch(`/api/agent-office/agents/lotto/logs?limit=200`);
+    if (!r.ok) throw new Error(`agent-office logs ${r.status}`);
+    const data = await r.json();
+    if (!days) return data;
+    const cutoff = new Date(Date.now() - days * 24 * 3600 * 1000).toISOString();
+    return { items: (data.items || data.logs || []).filter(l => (l.created_at || '') >= cutoff) };
+}
+
+export async function triggerEvolverGenerate() {
+    const r = await fetch('/api/lotto/evolver/generate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`generate-now ${r.status}`);
+    return r.json();
+}
+
+export async function triggerEvolverEvaluate() {
+    const r = await fetch('/api/lotto/evolver/evaluate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`evaluate-now ${r.status}`);
+    return r.json();
+}
+
+// --- Tarot Lab ---
+
+export function tarotInterpret(body) {
+  return apiPost('/api/agent-office/tarot/interpret', body);
+}
+
+export function tarotSaveReading(body) {
+  return apiPost('/api/agent-office/tarot/readings', body);
+}
+
+export function tarotListReadings({ page = 1, size = 20, favorite, spread_type, category } = {}) {
+  const qs = new URLSearchParams({ page: String(page), size: String(size) });
+  if (favorite !== undefined) qs.set('favorite', favorite ? 'true' : 'false');
+  if (spread_type) qs.set('spread_type', spread_type);
+  if (category) qs.set('category', category);
+  return apiGet(`/api/agent-office/tarot/readings?${qs.toString()}`);
+}
+
+export function tarotGetReading(id) {
+  return apiGet(`/api/agent-office/tarot/readings/${id}`);
+}
+
+export function tarotPatchReading(id, body) {
+  return apiPatch(`/api/agent-office/tarot/readings/${id}`, body);
+}
+
+export function tarotDeleteReading(id) {
+  return apiDelete(`/api/agent-office/tarot/readings/${id}`);
+}

src/components/Icons.jsx

@@ -134,3 +134,12 @@ export const IconInsta = () =>
             <circle cx="17.5" cy="6.5" r="1" fill="currentColor" strokeWidth="0" />
         </>
     );
+
+export const IconTarot = () =>
+    svg(
+        <>
+            <rect x="5" y="3" width="14" height="18" rx="2" />
+            <path d="M12 7v10M9 12h6" />
+            <circle cx="12" cy="12" r="3" />
+        </>
+    );

src/pages/agent-office/AgentOffice.css

@@ -195,6 +195,11 @@
   font-size: 11px;
   color: #94a3b8;
 }
+.ao-sidepanel-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .ao-sidepanel-close {
   background: none;
   border: none;
@@ -204,6 +209,18 @@
   padding: 0 4px;
 }
 .ao-sidepanel-close:hover { color: #fff; }
+/* 전체 화면 토글 — 모바일 전용 (데스크톱에서는 숨김) */
+.ao-sidepanel-expand {
+  display: none;
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.ao-sidepanel-expand:hover { color: #fff; }
 
 /* Tabs */
 .ao-sidepanel-tabs {
@@ -377,19 +394,31 @@
     bottom: 0;
     left: 0;
     right: 0;
+    top: auto;
     width: 100%;
+    height: 55vh;
     max-height: 55vh;
     border-left: none;
     border-top: 1px solid #333;
     border-radius: 16px 16px 0 0;
     animation: slideUp 0.25s ease-out;
     z-index: 100;
+    transition: height 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease;
+  }
+  /* 전체 화면으로 확장 */
+  .ao-sidepanel.expanded {
+    top: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border-top: none;
   }
   @keyframes slideUp {
     from { transform: translateY(100%); }
     to { transform: translateY(0); }
   }
 
+  .ao-sidepanel-expand { display: inline-block; }
   .ao-sidepanel-header { padding: 8px 12px; }
   .ao-sidepanel-header::before {
     content: '';

src/pages/agent-office/components/SidePanel.jsx

@@ -10,6 +10,7 @@ const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
 
 export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
   const [activeTab, setActiveTab] = useState('Commands');
+  const [expanded, setExpanded] = useState(false);
   const meta = AGENT_META[agentId];
   if (!meta) return null;
 
@@ -18,7 +19,7 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
     : agentState?.state || 'unknown';
 
   return (
-    <div className="ao-sidepanel">
+    <div className={`ao-sidepanel${expanded ? ' expanded' : ''}`}>
       <div className="ao-sidepanel-header">
         <div className="ao-sidepanel-agent">
           <div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
@@ -29,7 +30,17 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
             <div className="ao-sidepanel-state">● {stateText}</div>
           </div>
         </div>
-        <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        <div className="ao-sidepanel-actions">
+          <button
+            className="ao-sidepanel-expand"
+            onClick={() => setExpanded(e => !e)}
+            aria-label={expanded ? '축소' : '전체 화면'}
+            title={expanded ? '축소' : '전체 화면'}
+          >
+            {expanded ? '⤡' : '⤢'}
+          </button>
+          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        </div>
       </div>
 
       <div className="ao-sidepanel-tabs">

src/pages/insta/InstaCards.css

@@ -59,6 +59,18 @@
 .ic-keyword-row__meta { font-size: 0.72rem; color: rgba(255,255,255,.35); white-space: nowrap; }
 .ic-keyword-row__score { font-size: 0.75rem; font-weight: 700; color: #ec4899; min-width: 36px; text-align: right; }
 
+/* 키워드 페이저 (10개씩, 이전/다음) */
+.ic-keywords__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
+.ic-pager-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 99px;
+  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
+  color: rgba(255,255,255,.7); font-size: 1.1rem; cursor: pointer; transition: all .15s;
+}
+.ic-pager-btn:hover:not(:disabled) { background: rgba(236,72,153,.18); border-color: #ec4899; color: #ec4899; }
+.ic-pager-btn:disabled { opacity: .3; cursor: not-allowed; }
+.ic-pager-info { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.55); min-width: 48px; text-align: center; }
+
 /* 슬레이트 그리드 — 모바일 2칸 강제, 데스크탑 auto-fill */
 .ic-slates-grid {
   display: grid;

src/pages/insta/InstaCards.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import PullToRefresh from '../../components/PullToRefresh';
 import {
   getInstaStatus,
@@ -521,11 +521,13 @@ function TriggerPanel() {
 
 /* ══════════════════════ 키워드 목록 ══════════════════════════════════════ */
 const CATEGORIES = ['전체', 'economy', 'psychology', 'celebrity'];
+const KEYWORDS_PER_PAGE = 10;
 
 function KeywordsPanel({ onCreateSlate }) {
   const [category, setCategory] = useState('전체');
   const [keywords, setKeywords] = useState([]);
   const [creating, setCreating] = useState(null); // keyword_id being created
+  const [page, setPage] = useState(0);
 
   const load = useCallback(() => {
     const cat = category === '전체' ? undefined : category;
@@ -533,6 +535,23 @@ function KeywordsPanel({ onCreateSlate }) {
   }, [category]);
 
   useEffect(() => { load(); }, [load]);
+  useEffect(() => { setPage(0); }, [category]); // 카테고리 변경 시 첫 페이지로
+
+  // 동일 keyword 중복 제거(최고 score 1개만 유지) + score 내림차순
+  const deduped = useMemo(() => {
+    const best = new Map();
+    for (const kw of keywords) {
+      const name = (kw.keyword || '').trim();
+      if (!name) continue;
+      const prev = best.get(name);
+      if (!prev || (kw.score ?? 0) > (prev.score ?? 0)) best.set(name, kw);
+    }
+    return [...best.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
+  }, [keywords]);
+
+  const totalPages = Math.max(1, Math.ceil(deduped.length / KEYWORDS_PER_PAGE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageItems = deduped.slice(safePage * KEYWORDS_PER_PAGE, safePage * KEYWORDS_PER_PAGE + KEYWORDS_PER_PAGE);
 
   // 부모(InstaCards)의 handleCreateSlate에 위임 — progress 배너 + 스크롤 + 자동 미리보기 공통화
   async function handleCreate(kw) {
@@ -568,27 +587,47 @@ function KeywordsPanel({ onCreateSlate }) {
 
       {/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */}
 
-      {keywords.length === 0 ? (
+      {deduped.length === 0 ? (
         <div className="ic-empty">키워드가 없습니다. 키워드 추출을 실행하세요.</div>
       ) : (
-        <div className="ic-keywords">
-          {keywords.map((kw) => (
-            <div key={kw.id} className="ic-keyword-row">
-              <span className="ic-keyword-row__kw">{kw.keyword}</span>
-              <span className="ic-keyword-row__meta">
-                {kw.category} · {kw.articles_count ?? 0}건
-              </span>
-              <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+        <>
+          <div className="ic-keywords">
+            {pageItems.map((kw) => (
+              <div key={kw.id} className="ic-keyword-row">
+                <span className="ic-keyword-row__kw">{kw.keyword}</span>
+                <span className="ic-keyword-row__meta">
+                  {kw.category} · {kw.articles_count ?? 0}건
+                </span>
+                <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+                <button
+                  className="ic-btn ic-btn--primary ic-btn--sm"
+                  onClick={() => handleCreate(kw)}
+                  disabled={!!creating}
+                >
+                  {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
+                </button>
+              </div>
+            ))}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="ic-keywords__pager">
               <button
-                className="ic-btn ic-btn--primary ic-btn--sm"
-                onClick={() => handleCreate(kw)}
-                disabled={!!creating}
-              >
-                {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
-              </button>
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+                disabled={safePage === 0}
+                aria-label="이전 키워드"
+              >←</button>
+              <span className="ic-pager-info">{safePage + 1} / {totalPages}</span>
+              <button
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={safePage >= totalPages - 1}
+                aria-label="다음 키워드"
+              >→</button>
             </div>
-          ))}
-        </div>
+          )}
+        </>
       )}
     </div>
   );

src/pages/lotto/Evolver.css

@@ -0,0 +1,194 @@
+/* Evolver tab — dark theme matching Lotto.css patterns */
+
+.lotto-evolver { display: flex; flex-direction: column; gap: 16px; }
+.lotto-evolver-muted { color: #94a3b8; }
+
+.lotto-evolver-intro {
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 12px; flex-wrap: wrap;
+}
+.lotto-evolver-sub { margin: 0; color: #94a3b8; font-size: 0.9rem; flex: 1; }
+.lotto-evolver-refresh {
+    padding: 6px 12px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 6px;
+    color: #cbd5e1;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.lotto-evolver-refresh:hover { background: rgba(255,255,255,0.1); }
+
+/* Generic card */
+.evolver-card {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 12px;
+    padding: 18px 20px;
+    color: #e2e8f0;
+}
+.evolver-card h2 {
+    margin: 0 0 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #f1f5f9;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+.evolver-card .badge {
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+.evolver-card.empty .muted, .evolver-card .muted { color: #64748b; }
+
+.lotto-evolver-empty h3 { margin: 0 0 6px; color: #f1f5f9; }
+.lotto-evolver-empty p { color: #94a3b8; margin: 0 0 12px; }
+
+/* WinnerCard */
+.winner-card .winner-meta {
+    display: flex; gap: 16px; flex-wrap: wrap;
+    color: #94a3b8; font-size: 0.85rem; margin-bottom: 14px;
+}
+.winner-card .winner-meta strong { color: #f1f5f9; font-weight: 600; }
+.winner-card .winner-chart { background: rgba(0,0,0,0.15); border-radius: 8px; padding: 8px; }
+
+/* TrialsGrid */
+.trials-grid .grid {
+    display: grid; grid-template-columns: repeat(6, 1fr);
+    gap: 8px; height: 140px; align-items: end;
+}
+.trial-cell {
+    border: 1px solid rgba(255,255,255,0.06);
+    background: rgba(255,255,255,0.03);
+    border-radius: 6px;
+    padding: 8px 4px;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: end;
+    cursor: pointer;
+    height: 100%;
+    color: #cbd5e1;
+    transition: background 0.15s;
+}
+.trial-cell:hover { background: rgba(255,255,255,0.06); }
+.trial-cell.winner { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
+.trial-cell .bar {
+    width: 80%;
+    background: #475569;
+    border-radius: 3px 3px 0 0;
+    min-height: 4px;
+}
+.trial-cell.winner .bar { background: #34d399; }
+.trial-cell .label { font-size: 0.85rem; margin-top: 6px; color: #e2e8f0; }
+.trial-cell .max-correct { font-size: 0.7rem; color: #94a3b8; }
+.trial-detail {
+    margin-top: 14px; padding: 12px;
+    background: rgba(0,0,0,0.15);
+    border-radius: 6px;
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.trial-detail h3 { margin: 0 0 8px; font-size: 0.9rem; color: #f1f5f9; }
+.trial-detail ul { margin: 8px 0 0; padding-left: 18px; }
+.trial-detail li { margin-bottom: 4px; }
+
+/* BaseDiff */
+.base-diff .diff-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
+}
+.metric-card {
+    padding: 12px 8px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 8px;
+    text-align: center;
+    color: #cbd5e1;
+}
+.metric-card .metric-name {
+    color: #94a3b8;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.metric-card .metric-values { margin: 6px 0; font-size: 0.8rem; }
+.metric-card .metric-values strong { color: #f1f5f9; }
+.metric-card .metric-diff { font-weight: 600; font-size: 0.8rem; }
+.metric-card.up .metric-diff, .metric-card.up-big .metric-diff { color: #34d399; }
+.metric-card.down .metric-diff, .metric-card.down-big .metric-diff { color: #f87171; }
+.metric-card.eq .metric-diff { color: #64748b; }
+
+/* BaseHistory chart container */
+.base-history { background: rgba(255,255,255,0.04); }
+
+/* ActivityCard — scrollable */
+.activity-card .activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 420px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.activity-card .activity-list::-webkit-scrollbar { width: 6px; }
+.activity-card .activity-list::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.15); border-radius: 3px;
+}
+.activity-item {
+    display: grid;
+    grid-template-columns: 24px 1fr auto;
+    gap: 10px;
+    padding: 10px 4px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.activity-item:last-child { border-bottom: none; }
+.activity-item .icon { font-size: 1rem; text-align: center; }
+.activity-item .body .line { color: #e2e8f0; }
+.activity-item .body strong { color: #f1f5f9; }
+.activity-item .ts {
+    color: #64748b;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    align-self: center;
+}
+.activity-item .status.ok { color: #34d399; }
+.activity-item .status.err { color: #f87171; }
+.activity-item .status.pending { color: #fbbf24; }
+.activity-item .detail { color: #94a3b8; font-size: 0.78rem; margin-top: 2px; }
+
+/* EvolverActions */
+.actions-card .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
+.actions-card button {
+    padding: 8px 14px;
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    border: 1px solid rgba(52,211,153,0.3);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.actions-card button:hover:not(:disabled) { background: rgba(52,211,153,0.25); }
+.actions-card button:disabled { opacity: 0.5; cursor: wait; }
+.action-output {
+    background: rgba(0,0,0,0.3);
+    color: #94a3b8;
+    padding: 12px;
+    border-radius: 6px;
+    margin-top: 12px;
+    max-height: 200px;
+    overflow: auto;
+    font-size: 0.75rem;
+}
+
+@media (max-width: 640px) {
+    .trials-grid .grid { grid-template-columns: repeat(3, 1fr); height: auto; }
+    .base-diff .diff-grid { grid-template-columns: repeat(3, 1fr); }
+    .lotto-evolver-intro { flex-direction: column; align-items: stretch; }
+    .activity-card .activity-list { max-height: 360px; }
+}

src/pages/lotto/Evolver.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Lotto from './Lotto';
+
+// /lotto/evolver URL → Lotto 페이지가 useLocation으로 활성 탭 자동 선택
+export default function Evolver() {
+    return <Lotto />;
+}

src/pages/lotto/Functions.jsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import BriefingTab from './tabs/BriefingTab';
 import AnalysisTab from './tabs/AnalysisTab';
 import PurchaseTab from './tabs/PurchaseTab';
+import EvolverTab from './tabs/EvolverTab';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import SwipeableView from '../../components/SwipeableView';
 
@@ -9,10 +10,19 @@ const TABS = [
     { id: 'briefing', label: '🗓 이번 주 브리핑' },
     { id: 'analysis', label: '📚 자료실 / Deep Dive' },
     { id: 'purchase', label: '💰 구매·성과' },
+    { id: 'evolver',  label: '🧬 자율 학습' },
 ];
 
-export default function Functions() {
-    const [tab, setTab] = useState('briefing');
+function renderTab(id) {
+    if (id === 'briefing') return <BriefingTab />;
+    if (id === 'analysis') return <AnalysisTab />;
+    if (id === 'purchase') return <PurchaseTab />;
+    if (id === 'evolver')  return <EvolverTab />;
+    return null;
+}
+
+export default function Functions({ initialTab = 'briefing' }) {
+    const [tab, setTab] = useState(initialTab);
     const isMobile = useIsMobile();
 
     const tabIndex = TABS.findIndex(t => t.id === tab);
@@ -28,7 +38,7 @@ export default function Functions() {
                     tabs={TABS.map(t => ({
                         key: t.id,
                         label: t.label,
-                        content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
+                        content: renderTab(t.id),
                     }))}
                     activeIndex={tabIndex}
                     onTabChange={handleTabChange}
@@ -45,9 +55,7 @@ export default function Functions() {
                         ))}
                     </nav>
                     <div className="lotto-tab-body">
-                        {tab === 'briefing' && <BriefingTab />}
-                        {tab === 'analysis' && <AnalysisTab />}
-                        {tab === 'purchase' && <PurchaseTab />}
+                        {renderTab(tab)}
                     </div>
                 </>
             )}

src/pages/lotto/Lotto.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import Functions from './Functions';
 import './Lotto.css';
 
 const Lotto = () => {
+    const location = useLocation();
+    const initialTab = location.pathname.endsWith('/evolver') ? 'evolver' : 'briefing';
+
     return (
         <div className="lotto">
             <header className="lotto-header">
@@ -15,16 +19,17 @@ const Lotto = () => {
                     </p>
                 </div>
                 <div className="lotto-card">
-                    <p className="lotto-card__title">시뮬레이션 추천 시스템</p>
+                    <p className="lotto-card__title">자율 학습 시뮬레이션</p>
                     <ul>
-                        <li>하루 6회 몬테카를로 시뮬레이션 자동 실행</li>
-                        <li>20,000개 후보를 5가지 통계 기법으로 스코어링</li>
-                        <li>핫·콜드·오버듀 번호 통계 분석 제공</li>
+                        <li>매주 6가지 가중치 시도 → 토요일 회고로 best base 학습</li>
+                        <li>능동 시그널 모니터링 (Sim·Drift·Confidence z-score) + 텔레그램 알림</li>
+                        <li>4시간마다 몬테카를로 20,000 후보 × 5종 점수 가중 평가</li>
+                        <li>AI 큐레이터 + 핫·콜드·오버듀 통계 분석</li>
                     </ul>
                 </div>
             </header>
 
-            <Functions />
+            <Functions initialTab={initialTab} />
         </div>
     );
 };

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>
+    );
+}

src/pages/lotto/evolver/BaseHistory.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+const COLORS = ['#34d399', '#60a5fa', '#fbbf24', '#f43f5e', '#c084fc'];
+
+export default function BaseHistory({ history }) {
+    if (!history || history.length === 0) {
+        return (
+            <div className="evolver-card base-history empty">
+                <h2>12주 Base 변화</h2>
+                <p className="muted">학습 이력이 부족합니다.</p>
+            </div>
+        );
+    }
+
+    const data = history
+        .slice()
+        .reverse()
+        .map(h => {
+            const w = h.weight || [0, 0, 0, 0, 0];
+            return {
+                date: (h.effective_from || '').slice(5),
+                freq: w[0], finger: w[1], gap: w[2], cooccur: w[3], divers: w[4],
+                reason: h.update_reason,
+            };
+        });
+
+    return (
+        <div className="evolver-card base-history">
+            <h2>Base 변화 (최근 {history.length}주)</h2>
+            <ResponsiveContainer width="100%" height={280}>
+                <LineChart data={data}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="date" />
+                    <YAxis domain={[0, 0.5]} />
+                    <Tooltip />
+                    <Legend />
+                    {METRIC_NAMES.map((name, i) => (
+                        <Line key={name} type="monotone" dataKey={name} stroke={COLORS[i]} dot />
+                    ))}
+                </LineChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}

src/pages/lotto/evolver/EvolverActions.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { triggerEvolverGenerate, triggerEvolverEvaluate } from '../../../api';
+
+export default function EvolverActions({ onChange }) {
+    const [busy, setBusy] = useState(null);
+    const [out, setOut] = useState(null);
+
+    async function run(kind) {
+        setBusy(kind);
+        setOut(null);
+        try {
+            const fn = kind === 'generate' ? triggerEvolverGenerate : triggerEvolverEvaluate;
+            const res = await fn();
+            setOut(res);
+            onChange && onChange();
+        } catch (e) {
+            setOut({ error: String(e) });
+        } finally {
+            setBusy(null);
+        }
+    }
+
+    return (
+        <div className="evolver-card actions-card">
+            <h2>수동 트리거 (dev)</h2>
+            <div className="action-buttons">
+                <button disabled={!!busy} onClick={() => run('generate')}>
+                    {busy === 'generate' ? '생성 중...' : 'generate-now (월요일 후보 생성)'}
+                </button>
+                <button disabled={!!busy} onClick={() => run('evaluate')}>
+                    {busy === 'evaluate' ? '평가 중...' : 'evaluate-now (회고 + base 갱신)'}
+                </button>
+            </div>
+            {out && <pre className="action-output">{JSON.stringify(out, null, 2)}</pre>}
+        </div>
+    );
+}

src/pages/lotto/evolver/LottoActivityTimeline.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+const ICONS = {
+    curate_weekly: '📋',
+    signal_check: '🔍',
+    daily_digest: '📊',
+    weekly_evolution_report: '🧬',
+    evolver_generate: '🌱',
+    evolver_apply: '🎲',
+};
+
+const STATUS_CLS = {
+    succeeded: 'ok',
+    failed: 'err',
+    working: 'pending',
+    pending: 'pending',
+};
+
+function formatTaskDetail(t) {
+    const r = t.result_data || {};
+    switch (t.task_type) {
+        case 'signal_check': return `${r.source} → ${r.overall_fire} (${r.n_results} results)`;
+        case 'daily_digest': return `평가 ${r.evaluated} / 발화 ${r.fired}`;
+        case 'weekly_evolution_report': return `draw=${r.draw_no} reason=${r.update_reason}`;
+        case 'evolver_apply': return `${r.n_picks}세트 추출`;
+        case 'evolver_generate': return `${r.trials_count} trials 생성`;
+        case 'curate_weekly': return `draw=${r.draw_no || '?'} conf=${r.confidence || '?'}`;
+        default: return '';
+    }
+}
+
+function renderItem(item) {
+    const ts = (item.ts || '').replace('T', ' ').slice(0, 19);
+    if (item.kind === 'task') {
+        const t = item.payload;
+        const icon = ICONS[t.task_type] || '⚙️';
+        const cls = STATUS_CLS[t.status] || '';
+        const detail = formatTaskDetail(t);
+        return (
+            <li key={`task-${t.id}`} className={`activity-item task ${cls}`}>
+                <span className="icon">{icon}</span>
+                <div className="body">
+                    <div className="line"><strong>{t.task_type}</strong> · <span className={`status ${cls}`}>{t.status}</span></div>
+                    {detail && <div className="detail">{detail}</div>}
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'log') {
+        const l = item.payload;
+        return (
+            <li key={`log-${l.id}`} className={`activity-item log level-${l.level}`}>
+                <span className="icon">{l.level === 'error' ? '❌' : l.level === 'warning' ? '⚠️' : '·'}</span>
+                <div className="body"><div className="line">{l.message}</div></div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'evolver') {
+        const e = item.payload;
+        return (
+            <li key={`evolver-${e.id}`} className="activity-item evolver">
+                <span className="icon">⚖️</span>
+                <div className="body">
+                    <div className="line"><strong>weight_evolver_eval</strong> (lotto-lab)</div>
+                    <div className="detail">reason={e.update_reason} winner_max={e.winner_max_correct}</div>
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    return null;
+}
+
+export default function LottoActivityTimeline({ activity = [], days = 7 }) {
+    if (!activity || activity.length === 0) {
+        return (
+            <div className="evolver-card activity-card empty">
+                <h2>최근 활동</h2>
+                <p className="muted">지난 {days}일 활동 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card activity-card">
+            <h2>최근 {days}일 에이전트 활동 ({activity.length})</h2>
+            <ul className="activity-list">{activity.map(renderItem)}</ul>
+        </div>
+    );
+}

src/pages/lotto/evolver/TrialsGrid.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+
+const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
+
+export default function TrialsGrid({ trials, perDay, winnerTrialId }) {
+    const [expanded, setExpanded] = useState(null);
+
+    const byDow = {};
+    for (const t of trials || []) byDow[t.day_of_week] = t;
+
+    const perDayByDow = {};
+    for (const d of perDay || []) perDayByDow[d.day_of_week] = d;
+
+    const maxScore = Math.max(...(perDay || []).map(d => d.avg_score || 0), 0.001);
+
+    return (
+        <div className="evolver-card trials-grid">
+            <h2>이번주 6일 Trials</h2>
+            <div className="grid">
+                {DAY_NAMES.map((name, dow) => {
+                    const trial = byDow[dow];
+                    const day = perDayByDow[dow];
+                    const isWinner = trial && trial.id === winnerTrialId;
+                    const heightPct = day ? (day.avg_score / maxScore) * 100 : 0;
+                    return (
+                        <button
+                            key={dow}
+                            type="button"
+                            className={`trial-cell ${isWinner ? 'winner' : ''} ${expanded === dow ? 'expanded' : ''}`}
+                            onClick={() => setExpanded(expanded === dow ? null : dow)}
+                        >
+                            <div className="bar" style={{ height: `${heightPct}%` }} />
+                            <span className="label">{name}{isWinner && '⭐'}</span>
+                            {day && <span className="max-correct">max={day.max_correct}</span>}
+                        </button>
+                    );
+                })}
+            </div>
+            {expanded !== null && byDow[expanded] && (
+                <div className="trial-detail">
+                    <h3>{DAY_NAMES[expanded]}요일 상세</h3>
+                    <p>W = [{(byDow[expanded].weight || []).map(w => w.toFixed(2)).join(', ')}]</p>
+                    <ul>
+                        {(byDow[expanded].picks || []).map(p => (
+                            <li key={p.id}>
+                                {(p.numbers || []).join(', ')} —
+                                score {(p.meta_score || 0).toFixed(3)}
+                                {p.correct != null && ` · 적중 ${p.correct}개`}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}