Enhance tarot reading experience

topbar wrapper 제거, brand가 hero-content 직속 첫 자식이 됨.
nav(오늘의 카드/타로 리딩/스프레드/가이드/마이 페이지) + account(프리미엄/로그인)
모두 제거 — brand 단독으로 좌상단 표시.

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

@@ -97,7 +97,6 @@
 .ao-card-dot.working          { background: #22c55e; }
 .ao-card-dot.error            { background: #ef4444; }
 .ao-card-dot.waiting_approval { background: #f59e0b; }
-.ao-card-dot.break            { background: #94a3b8; }
 .ao-card-dot.pulse {
   animation: ao-pulse 1.6s ease-in-out infinite;
 }
@@ -196,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;
@@ -205,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 {
@@ -378,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/AgentOffice.jsx

@@ -10,7 +10,7 @@ import './AgentOffice.css';
 
 export default function AgentOffice() {
   const {
-    agents, pendingTasks, notifications, connected,
+    agents, pendingTasks, notifications, connected, reconnectAttempt,
     refreshTrigger, clearNotifications
   } = useAgentManager();
 
@@ -53,7 +53,7 @@ export default function AgentOffice() {
 
   return (
     <div className="ao-root">
-      <TopBar connected={connected} />
+      <TopBar connected={connected} reconnectAttempt={reconnectAttempt} />
       <div className="ao-main">
         <div className="ao-grid-wrap">
           <AgentGrid

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

@@ -15,7 +15,7 @@ export default function LogTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentLogs(agentId, 50).then(data => {
-      if (!cancelled) setLogs(data || []);
+      if (!cancelled) setLogs(Array.isArray(data) ? data : (data?.logs || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);

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,8 +30,18 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
             <div className="ao-sidepanel-state">● {stateText}</div>
           </div>
         </div>
+        <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">
         {TABS.map(tab => (

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

@@ -11,6 +11,22 @@ const STATUS_STYLE = {
   rejected:  { bg: '#7f1d1d', fg: '#fca5a5' }
 };
 
+// result_data는 백엔드에서 dict 또는 string 둘 다 올 수 있다.
+// React child로 직접 못 그리는 객체는 stringify, string은 parse 시도 후 pretty,
+// 둘 다 안 되면 원본 문자열을 그대로 표시.
+function formatResultData(rd) {
+  if (rd == null) return '';
+  if (typeof rd === 'object') {
+    try { return JSON.stringify(rd, null, 2); }
+    catch { return String(rd); }
+  }
+  if (typeof rd === 'string') {
+    try { return JSON.stringify(JSON.parse(rd), null, 2); }
+    catch { return rd; }
+  }
+  return String(rd);
+}
+
 function formatTime(ts) {
   if (!ts) return '';
   const d = new Date(ts);
@@ -27,7 +43,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentTasks(agentId, 20).then(data => {
-      if (!cancelled) setTasks(data || []);
+      if (!cancelled) setTasks(Array.isArray(data) ? data : (data?.tasks || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);
@@ -46,10 +62,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
             </div>
             {expanded === task.id && task.result_data && (
               <pre className="ao-task-result">
-                {(() => {
+                {formatResultData(task.result_data)}
-                  try { return JSON.stringify(JSON.parse(task.result_data), null, 2); }
-                  catch { return task.result_data; }
-                })()}
               </pre>
             )}
           </div>

src/pages/agent-office/components/TaskTab.test.jsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import TaskTab from './TaskTab.jsx';
+
+const mockGetAgentTasks = vi.fn();
+vi.mock('../../../api', () => ({
+  getAgentTasks: (...args) => mockGetAgentTasks(...args),
+}));
+
+describe('TaskTab response shape handling', () => {
+  it('백엔드가 {tasks: [...]} 객체로 wrapping해서 응답해도 .map 깨지지 않음', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [
+        { id: 't1', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+        { id: 't2', task_type: 'fetch_news', status: 'failed', created_at: '2026-05-18T08:05:00Z' },
+      ],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+    expect(screen.getByText('fetch_news')).toBeInTheDocument();
+  });
+
+  it('백엔드가 bare array를 반환해도 동작 (backward compat)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce([
+      { id: 't9', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+    ]);
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+  });
+
+  it('응답이 falsy/empty이면 No tasks yet 표시', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({ tasks: [] });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('No tasks yet')).toBeInTheDocument());
+  });
+
+  it('task 클릭 → result_data가 객체일 때도 stringify되어 안전하게 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_compose',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: { music_task_id: 'abc-123', tracks: [] },
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/music_task_id/);
+    expect(pre.textContent).toContain('"music_task_id": "abc-123"');
+    expect(pre.textContent).toContain('"tracks": []');
+  });
+
+  it('task 클릭 → result_data가 JSON 문자열일 때 parse 후 pretty 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_str',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: '{"foo":"bar"}',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/foo/);
+    expect(pre.textContent).toContain('"foo": "bar"');
+  });
+
+  it('task 클릭 → result_data가 plain string이면 그대로 표시 (parse 실패 fallback)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_plain',
+        task_type: 'fetch_news',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: 'Just a log line',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('fetch_news');
+    fireEvent.click(row.closest('.ao-task-item'));
+    expect(await screen.findByText('Just a log line')).toBeInTheDocument();
+  });
+});

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

@@ -1,11 +1,19 @@
 // src/pages/agent-office/components/TopBar.jsx
-export default function TopBar({ connected }) {
+export default function TopBar({ connected, reconnectAttempt = 0 }) {
+  let statusText;
+  if (connected) {
+    statusText = 'Connected';
+  } else if (reconnectAttempt === 0) {
+    statusText = 'Connecting…';
+  } else {
+    statusText = `Disconnected · 재연결 시도 #${reconnectAttempt}`;
+  }
   return (
     <div className="ao-topbar">
       <div className="ao-topbar-left">
         <span className="ao-topbar-title">Agent Office</span>
         <span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
-          ● {connected ? 'Connected' : 'Disconnected'}
+          ● {statusText}
         </span>
       </div>
     </div>

src/pages/agent-office/constants.js

@@ -38,7 +38,6 @@ export const STATE_COLORS = {
   working:          { color: '#22c55e', pulse: true  },
   error:            { color: '#ef4444', pulse: false },
   waiting_approval: { color: '#f59e0b', pulse: true  },
-  break:            { color: '#94a3b8', pulse: false },
 };
 
 export const DEFAULT_STATE_COLOR = STATE_COLORS.idle;

src/pages/agent-office/hooks/useAgentManager.js

@@ -1,25 +1,34 @@
 // src/pages/agent-office/hooks/useAgentManager.js
 import { useState, useEffect, useRef, useCallback } from 'react';
 
-const WS_RECONNECT_DELAY = 3000;
+// Exponential backoff with cap. 1s → 2s → 4s → 8s → 16s → 30s (cap)
+const WS_BACKOFF_BASE_MS = 1000;
+const WS_BACKOFF_CAP_MS = 30000;
+const WS_BACKOFF_MAX_EXP = 5;
 
 export function useAgentManager() {
   const [agents, setAgents] = useState({});           // { agentId: { state, detail, task_id } }
   const [pendingTasks, setPendingTasks] = useState([]); // [{id, agent_id, task_type, input_data}]
   const [notifications, setNotifications] = useState({}); // { agentId: count }
   const [connected, setConnected] = useState(false);
+  const [reconnectAttempt, setReconnectAttempt] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0); // 탭 데이터 리프레시용
 
   const wsRef = useRef(null);
   const reconnectRef = useRef(null);
   const connectRef = useRef(null);
+  const attemptRef = useRef(0);
 
   const connect = useCallback(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
     const ws = new WebSocket(`${protocol}://${window.location.host}/api/agent-office/ws`);
     wsRef.current = ws;
 
-    ws.onopen = () => setConnected(true);
+    ws.onopen = () => {
+      setConnected(true);
+      attemptRef.current = 0;
+      setReconnectAttempt(0);
+    };
 
     ws.onmessage = (e) => {
       const msg = JSON.parse(e.data);
@@ -69,10 +78,17 @@ export function useAgentManager() {
 
     ws.onclose = () => {
       setConnected(false);
-      reconnectRef.current = setTimeout(() => connectRef.current?.(), WS_RECONNECT_DELAY);
+      const exp = Math.min(attemptRef.current, WS_BACKOFF_MAX_EXP);
+      const delay = Math.min(WS_BACKOFF_BASE_MS * 2 ** exp, WS_BACKOFF_CAP_MS);
+      attemptRef.current += 1;
+      setReconnectAttempt(attemptRef.current);
+      reconnectRef.current = setTimeout(() => connectRef.current?.(), delay);
     };
 
-    ws.onerror = () => ws.close();
+    // onerror fires before onclose; swallow so the browser doesn't print an
+    // unhandled-error pair for every retry. onclose still runs and schedules
+    // the next attempt.
+    ws.onerror = () => {};
   }, []);
 
   useEffect(() => {
@@ -108,6 +124,7 @@ export function useAgentManager() {
     pendingTasks,
     notifications,
     connected,
+    reconnectAttempt,
     refreshTrigger,
     sendCommand,
     sendApproval,

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,11 +587,12 @@ 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) => (
+            {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">
@@ -589,6 +609,25 @@ function KeywordsPanel({ onCreateSlate }) {
               </div>
             ))}
           </div>
+
+          {totalPages > 1 && (
+            <div className="ic-keywords__pager">
+              <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>
   );

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