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");
 }
@@ -723,3 +739,33 @@ export async function triggerEvolverEvaluate() {
     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/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

@@ -1,51 +1,194 @@
-.evolver { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
+/* Evolver tab — dark theme matching Lotto.css patterns */
-.evolver-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; gap: 16px; }
-.evolver-kicker { letter-spacing: 0.12em; color: #6b7280; font-size: 0.75rem; margin: 0 0 4px; }
-.evolver-header h1 { margin: 0 0 8px; font-size: 2rem; }
-.evolver-sub { color: #6b7280; margin: 0; }
-.refresh-btn { padding: 8px 14px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; }
 
-.evolver-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+.lotto-evolver { display: flex; flex-direction: column; gap: 16px; }
-.evolver-card.empty .muted { color: #9ca3af; }
+.lotto-evolver-muted { color: #94a3b8; }
-.evolver-card h2 { margin: 0 0 12px; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.evolver-card .badge { background: #ecfdf5; color: #065f46; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: normal; }
 
-.winner-card .winner-meta { display: flex; gap: 16px; flex-wrap: wrap; color: #6b7280; font-size: 0.9rem; margin-bottom: 12px; }
+.lotto-evolver-intro {
-.winner-card .winner-meta strong { color: #111827; }
+    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); }
 
-.trials-grid .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 140px; align-items: end; }
+/* Generic card */
-.trial-cell { border: none; background: #f9fafb; border-radius: 6px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: end; cursor: pointer; height: 100%; }
+.evolver-card {
-.trial-cell.winner { background: #ecfdf5; }
+    background: rgba(255,255,255,0.04);
-.trial-cell .bar { width: 80%; background: #34d399; border-radius: 3px 3px 0 0; min-height: 4px; }
+    border: 1px solid rgba(255,255,255,0.08);
-.trial-cell.winner .bar { background: #059669; }
+    border-radius: 12px;
-.trial-cell .label { font-size: 0.85rem; margin-top: 6px; }
+    padding: 18px 20px;
-.trial-cell .max-correct { font-size: 0.7rem; color: #6b7280; }
+    color: #e2e8f0;
-.trial-detail { margin-top: 16px; padding: 12px; background: #f9fafb; border-radius: 6px; }
+}
+.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; }
 
-.base-diff .diff-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
+/* BaseDiff */
-.metric-card { padding: 12px; background: #f9fafb; border-radius: 8px; text-align: center; }
+.base-diff .diff-grid {
-.metric-card .metric-name { color: #6b7280; font-size: 0.75rem; text-transform: uppercase; }
+    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
-.metric-card .metric-values { margin: 6px 0; font-size: 0.85rem; }
+}
-.metric-card .metric-diff { font-weight: bold; }
+.metric-card {
-.metric-card.up .metric-diff, .metric-card.up-big .metric-diff { color: #059669; }
+    padding: 12px 8px;
-.metric-card.down .metric-diff, .metric-card.down-big .metric-diff { color: #dc2626; }
+    background: rgba(255,255,255,0.03);
-.metric-card.eq .metric-diff { color: #9ca3af; }
+    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; }
 
-.activity-card .activity-list { list-style: none; padding: 0; margin: 0; }
+/* BaseHistory chart container */
-.activity-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
+.base-history { background: rgba(255,255,255,0.04); }
-.activity-item .ts { color: #9ca3af; font-size: 0.75rem; white-space: nowrap; }
-.activity-item .status.ok { color: #059669; }
-.activity-item .status.err { color: #dc2626; }
-.activity-item .detail { color: #6b7280; font-size: 0.85rem; }
 
+/* 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: #1f2937; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
+.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: #1f2937; color: #d1d5db; padding: 12px; border-radius: 6px; margin-top: 12px; max-height: 200px; overflow: auto; font-size: 0.8rem; }
+.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(2, 1fr); }
+    .base-diff .diff-grid { grid-template-columns: repeat(3, 1fr); }
-    .evolver-header { flex-direction: column; }
+    .lotto-evolver-intro { flex-direction: column; align-items: stretch; }
+    .activity-card .activity-list { max-height: 360px; }
 }

src/pages/lotto/Evolver.jsx

@@ -1,82 +1,7 @@
 import React from 'react';
-import './Evolver.css';
+import Lotto from './Lotto';
-import { useEvolverApi } from './evolver/useEvolverApi';
-import WinnerCard from './evolver/WinnerCard';
-import TrialsGrid from './evolver/TrialsGrid';
-import BaseDiff from './evolver/BaseDiff';
-import BaseHistory from './evolver/BaseHistory';
-import LottoActivityTimeline from './evolver/LottoActivityTimeline';
-import EvolverActions from './evolver/EvolverActions';
 
+// /lotto/evolver URL → Lotto 페이지가 useLocation으로 활성 탭 자동 선택
 export default function Evolver() {
-    const { status, history, activity, loading, error, refetch } = useEvolverApi({ days: 7, weeks: 12 });
+    return <Lotto />;
-
-    if (loading) return <div className="evolver"><p>로딩 중...</p></div>;
-    if (error) return <div className="evolver"><p>에러: {String(error)}</p></div>;
-
-    const latestBase = (history.items || [])[0];
-    const previousBase = (history.items || [])[1]?.weight || status?.current_base || [0.2, 0.2, 0.2, 0.2, 0.2];
-    const newBase = latestBase?.weight || status?.current_base;
-
-    const trials = status?.trials || [];
-    const winnerTrialId = latestBase?.source_trial_id;
-    const winnerTrial = trials.find(t => t.id === winnerTrialId);
-    const winnerInfo = winnerTrial ? {
-        day_of_week: winnerTrial.day_of_week,
-        weight: winnerTrial.weight,
-        avg_score: latestBase?.winner_score,
-        max_correct: latestBase?.winner_max_correct,
-        n_picks: (winnerTrial.picks || []).length,
-    } : null;
-
-    const perDay = trials.map(t => ({
-        day_of_week: t.day_of_week,
-        trial_id: t.id,
-        avg_score: (t.picks || []).reduce((s, p) => s + (p.meta_score || 0), 0) / Math.max(1, (t.picks || []).length),
-        max_correct: Math.max(0, ...(t.picks || []).map(p => p.correct || 0)),
-    }));
-
-    const hasBase = (history.items || []).length > 0;
-
-    return (
-        <div className="evolver">
-            <header className="evolver-header">
-                <div>
-                    <p className="evolver-kicker">Lotto · Weight Evolver</p>
-                    <h1>자율 학습 루프</h1>
-                    <p className="evolver-sub">
-                        매주 6가지 가중치를 시도해서 best 조합을 다음주 base로 학습합니다.
-                        {status?.latest_draw && ` 마지막 회차: ${status.latest_draw}회.`}
-                    </p>
-                </div>
-                <button className="refresh-btn" onClick={refetch}>↻ 새로고침</button>
-            </header>
-
-            {!hasBase ? (
-                <div className="evolver-card empty-state">
-                    <h2>아직 학습 시작 전</h2>
-                    <p>다음 월요일 09:00에 자동 시작 또는 수동 트리거 사용.</p>
-                    <EvolverActions onChange={refetch} />
-                </div>
-            ) : (
-                <>
-                    <WinnerCard
-                        winner={winnerInfo}
-                        previousBase={previousBase}
-                        updateReason={latestBase?.update_reason}
-                        drawNo={status?.latest_draw}
-                    />
-                    <TrialsGrid trials={trials} perDay={perDay} winnerTrialId={winnerTrialId} />
-                    <BaseDiff
-                        previousBase={previousBase}
-                        newBase={newBase}
-                        updateReason={latestBase?.update_reason}
-                    />
-                    <BaseHistory history={history.items || []} />
-                    <LottoActivityTimeline activity={activity} days={7} />
-                    <EvolverActions onChange={refetch} />
-                </>
-            )}
-        </div>
-    );
 }

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() {
+function renderTab(id) {
-    const [tab, setTab] = useState('briefing');
+    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 />}
+                        {renderTab(tab)}
-                        {tab === 'analysis' && <AnalysisTab />}
-                        {tab === 'purchase' && <PurchaseTab />}
                     </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>매주 6가지 가중치 시도 → 토요일 회고로 best base 학습</li>
-                        <li>20,000개 후보를 5가지 통계 기법으로 스코어링</li>
+                        <li>능동 시그널 모니터링 (Sim·Drift·Confidence z-score) + 텔레그램 알림</li>
-                        <li>핫·콜드·오버듀 번호 통계 분석 제공</li>
+                        <li>4시간마다 몬테카를로 20,000 후보 × 5종 점수 가중 평가</li>
+                        <li>AI 큐레이터 + 핫·콜드·오버듀 통계 분석</li>
                     </ul>
                 </div>
             </header>
 
-            <Functions />
+            <Functions initialTab={initialTab} />
         </div>
     );
 };

src/pages/lotto/tabs/EvolverTab.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import '../Evolver.css';
+import { useEvolverApi } from '../evolver/useEvolverApi';
+import WinnerCard from '../evolver/WinnerCard';
+import TrialsGrid from '../evolver/TrialsGrid';
+import BaseDiff from '../evolver/BaseDiff';
+import BaseHistory from '../evolver/BaseHistory';
+import LottoActivityTimeline from '../evolver/LottoActivityTimeline';
+import EvolverActions from '../evolver/EvolverActions';
+
+export default function EvolverTab() {
+    const { status, history, activity, loading, error, refetch } = useEvolverApi({ days: 7, weeks: 12 });
+
+    if (loading) return <div className="lotto-evolver"><p className="lotto-evolver-muted">로딩 중...</p></div>;
+    if (error) return <div className="lotto-evolver"><p className="lotto-evolver-muted">에러: {String(error)}</p></div>;
+
+    const latestBase = (history.items || [])[0];
+    const previousBase = (history.items || [])[1]?.weight || status?.current_base || [0.2, 0.2, 0.2, 0.2, 0.2];
+    const newBase = latestBase?.weight || status?.current_base;
+
+    const trials = status?.trials || [];
+    const winnerTrialId = latestBase?.source_trial_id;
+    const winnerTrial = trials.find(t => t.id === winnerTrialId);
+    const winnerInfo = winnerTrial ? {
+        day_of_week: winnerTrial.day_of_week,
+        weight: winnerTrial.weight,
+        avg_score: latestBase?.winner_score,
+        max_correct: latestBase?.winner_max_correct,
+        n_picks: (winnerTrial.picks || []).length,
+    } : null;
+
+    const perDay = trials.map(t => ({
+        day_of_week: t.day_of_week,
+        trial_id: t.id,
+        avg_score: (t.picks || []).reduce((s, p) => s + (p.meta_score || 0), 0) / Math.max(1, (t.picks || []).length),
+        max_correct: Math.max(0, ...(t.picks || []).map(p => p.correct || 0)),
+    }));
+
+    const hasBase = (history.items || []).length > 0;
+
+    return (
+        <div className="lotto-evolver">
+            <div className="lotto-evolver-intro">
+                <p className="lotto-evolver-sub">
+                    매주 6가지 가중치를 시도해서 best 조합을 다음주 base로 학습합니다.
+                    {status?.latest_draw && ` 마지막 회차: ${status.latest_draw}회.`}
+                </p>
+                <button className="lotto-evolver-refresh" onClick={refetch}>↻ 새로고침</button>
+            </div>
+
+            {!hasBase ? (
+                <div className="evolver-card lotto-evolver-empty">
+                    <h3>아직 학습 시작 전</h3>
+                    <p>다음 월요일 09:00에 자동 시작 또는 수동 트리거 사용.</p>
+                    <EvolverActions onChange={refetch} />
+                </div>
+            ) : (
+                <>
+                    <WinnerCard
+                        winner={winnerInfo}
+                        previousBase={previousBase}
+                        updateReason={latestBase?.update_reason}
+                        drawNo={status?.latest_draw}
+                    />
+                    <TrialsGrid trials={trials} perDay={perDay} winnerTrialId={winnerTrialId} />
+                    <BaseDiff
+                        previousBase={previousBase}
+                        newBase={newBase}
+                        updateReason={latestBase?.update_reason}
+                    />
+                    <BaseHistory history={history.items || []} />
+                    <LottoActivityTimeline activity={activity} days={7} />
+                    <EvolverActions onChange={refetch} />
+                </>
+            )}
+        </div>
+    );
+}

src/pages/tarot/History.jsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './Tarot.css';
+import { tarotListReadings, tarotPatchReading, tarotDeleteReading } from '../../api';
+import { findCard, SPREADS } from './data/cards';
+
+function pickLine(r) {
+  const labels = (r.cards || []).map((c) => {
+    const card = findCard(c.card_id);
+    const name = card ? card.name : c.card_id;
+    return `${c.position} · ${name}${c.reversed ? '(역)' : ''}`;
+  });
+  return labels.join(' / ');
+}
+
+export default function History() {
+  const [items, setItems] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [favoriteOnly, setFavoriteOnly] = useState(false);
+  const [spreadFilter, setSpreadFilter] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [openId, setOpenId] = useState(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await tarotListReadings({
+        page, size: 20,
+        favorite: favoriteOnly || undefined,
+        spread_type: spreadFilter || undefined,
+        category: categoryFilter || undefined,
+      });
+      setItems(res.items);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, favoriteOnly, spreadFilter, categoryFilter]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleFav = async (id, cur) => {
+    await tarotPatchReading(id, { favorite: !cur });
+    load();
+  };
+
+  const remove = async (id) => {
+    if (!window.confirm('삭제할까요?')) return;
+    await tarotDeleteReading(id);
+    load();
+  };
+
+  return (
+    <div className="tarot tarot-history">
+      <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, marginBottom: 16 }}>
+        리딩 히스토리
+      </h2>
+
+      <div className="tarot-reading__chips" style={{ marginBottom: 16 }}>
+        <button className={`tarot-chip ${favoriteOnly ? 'is-active' : ''}`}
+                onClick={() => setFavoriteOnly((v) => !v)}>
+          ⭐ 즐겨찾기만
+        </button>
+        <button className={`tarot-chip ${spreadFilter === 'three_card' ? 'is-active' : ''}`}
+                onClick={() => setSpreadFilter((v) => v === 'three_card' ? '' : 'three_card')}>
+          3장
+        </button>
+        <button className={`tarot-chip ${spreadFilter === 'one_card' ? 'is-active' : ''}`}
+                onClick={() => setSpreadFilter((v) => v === 'one_card' ? '' : 'one_card')}>
+          1장
+        </button>
+      </div>
+
+      {loading && <p style={{ color: 'var(--tarot-text-dim)' }}>불러오는 중…</p>}
+      {!loading && items.length === 0 && <p style={{ color: 'var(--tarot-text-dim)' }}>리딩 기록이 없습니다.</p>}
+
+      {items.map((r) => (
+        <div key={r.id} className="tarot-history__item">
+          <div>
+            <div style={{ fontSize: 12, color: 'var(--tarot-text-dim)' }}>
+              {r.created_at} · {SPREADS[r.spread_type]?.name || r.spread_type}
+              {r.category ? ` · ${r.category}` : ''}
+            </div>
+            <div style={{ marginTop: 6 }}>{r.question || '(질문 없음)'}</div>
+            <div style={{ marginTop: 6, fontSize: 13, color: 'var(--tarot-gold)' }}>
+              {pickLine(r)}
+            </div>
+            <p style={{ marginTop: 8, fontSize: 13, color: 'var(--tarot-text-dim)' }}>
+              {r.summary}
+            </p>
+            {openId === r.id && r.interpretation_json && (
+              <div style={{ marginTop: 12, padding: 12, background: 'rgba(0,0,0,.2)', borderRadius: 6 }}>
+                <p style={{ fontSize: 13 }}>{r.interpretation_json.advice}</p>
+                {r.interpretation_json.warning && (
+                  <p style={{ fontSize: 13, color: '#f43f5e' }}>⚠️ {r.interpretation_json.warning}</p>
+                )}
+              </div>
+            )}
+            <button
+              onClick={() => setOpenId(openId === r.id ? null : r.id)}
+              style={{ marginTop: 8, fontSize: 12, background: 'transparent', border: '1px solid rgba(255,255,255,.15)', color: 'var(--tarot-text-dim)', padding: '4px 8px', borderRadius: 4, cursor: 'pointer' }}
+            >
+              {openId === r.id ? '접기' : '자세히'}
+            </button>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            <button
+              className={`tarot-history__star ${r.favorite ? 'is-fav' : ''}`}
+              onClick={() => toggleFav(r.id, r.favorite)}
+              aria-label="즐겨찾기 토글"
+            >★</button>
+            <button
+              onClick={() => remove(r.id)}
+              style={{ background: 'transparent', border: 'none', color: 'var(--tarot-text-dim)', cursor: 'pointer', fontSize: 12 }}
+              aria-label="삭제"
+            >삭제</button>
+          </div>
+        </div>
+      ))}
+
+      {total > 20 && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'center' }}>
+          <button className="tarot-chip" disabled={page === 1} onClick={() => setPage((p) => p - 1)}>이전</button>
+          <span style={{ color: 'var(--tarot-text-dim)', alignSelf: 'center' }}>{page} / {Math.ceil(total / 20)}</span>
+          <button className="tarot-chip" disabled={page * 20 >= total} onClick={() => setPage((p) => p + 1)}>다음</button>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/tarot/Reading.jsx

@@ -0,0 +1,380 @@
+import React, { useState } from 'react';
+import './Tarot.css';
+import { TAROT_DECK, CATEGORIES, SPREADS } from './data/cards';
+import { useTarotShuffle } from './hooks/useTarotShuffle';
+import { useTarotReading } from './hooks/useTarotReading';
+import TarotCard from './components/TarotCard';
+import InterpretationPanel from './components/InterpretationPanel';
+
+const STEPS = [
+  { id: 1, label: '질문 & 설정' },
+  { id: 2, label: '카드 선택' },
+  { id: 3, label: '해석 보기' },
+];
+
+const CATEGORY_LABELS = {
+  '연애': '♡ 연애',
+  '일·커리어': '직업',
+  '관계': '인간관계',
+  '재물': '재물',
+  '건강': '건강',
+  '일반': '기타',
+};
+
+const RECENT_READINGS = [
+  { title: '연애운에 대해', meta: '3장 스프레드 · 방금 전' },
+  { title: '새로운 직장에 대한 고민', meta: '3장 스프레드 · 어제' },
+  { title: '오늘의 운세', meta: '3장 스프레드 · 2일 전' },
+];
+
+function StepIndicator({ current }) {
+  return (
+    <div className="tarot-reading-steps">
+      {STEPS.map((s, i) => (
+        <React.Fragment key={s.id}>
+          <div className={`tarot-reading-steps__item ${s.id < current ? 'is-done' : ''} ${s.id === current ? 'is-active' : ''}`}>
+            <span className="tarot-reading-steps__dot">{s.id < current ? '✓' : s.id}</span>
+            <span>{s.label}</span>
+          </div>
+          {i < STEPS.length - 1 && <div className="tarot-reading-steps__sep" />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default function Reading() {
+  const [category, setCategory] = useState('일반');
+  const [question, setQuestion] = useState('');
+  const [spreadId, setSpreadId] = useState('three_card');
+  const [step, setStep] = useState(1);
+  const [picks, setPicks] = useState([]);
+  const [focusIdx, setFocusIdx] = useState(null);
+
+  const spread = SPREADS[spreadId];
+  const { slice, reshuffle } = useTarotShuffle(TAROT_DECK, 20);
+  const { status, interpretation, runInterpretAndSave, error } = useTarotReading();
+
+  const startShuffle = () => {
+    reshuffle();
+    setPicks([]);
+    setFocusIdx(null);
+    setStep(1);
+  };
+
+  const openCardSpread = () => {
+    setPicks([]);
+    setFocusIdx(null);
+    setStep(2);
+  };
+
+  const handlePick = (card = null) => {
+    if (picks.length >= spread.positions.length) return;
+    const idx = picks.length;
+    const nextCard = card || slice.find((c) => !disabledIds.includes(c.slug));
+    if (!nextCard) return;
+    const pos = spread.positions[idx];
+    const next = [...picks, { card: nextCard, position: pos.label, reversed: nextCard.reversed }];
+    setPicks(next);
+    setFocusIdx(idx);
+    setStep(next.length === spread.positions.length ? 3 : 2);
+  };
+
+  const handleInterpret = async () => {
+    try {
+      await runInterpretAndSave({
+        spread_type: spreadId, category,
+        question: question.trim() || null, picks,
+      });
+      setStep(3);
+    } catch { /* error는 hook state */ }
+  };
+
+  const restart = () => {
+    setStep(1); setPicks([]); setFocusIdx(null);
+  };
+
+  const resetCards = () => {
+    reshuffle();
+    setPicks([]);
+    setFocusIdx(null);
+    setStep(1);
+  };
+
+  const changeSpread = (nextSpreadId) => {
+    setSpreadId(nextSpreadId);
+    setPicks([]);
+    setFocusIdx(null);
+    setStep(1);
+    reshuffle();
+  };
+
+  const disabledIds = picks.map((p) => p.card.slug);
+  const focusPick = focusIdx !== null && picks[focusIdx] ? picks[focusIdx] : picks[picks.length - 1] || null;
+  const focusCard = focusPick?.card || null;
+  const focusCardId = focusCard?.slug;
+  const allPicked = picks.length === spread.positions.length;
+  const busy = status === 'interpreting' || status === 'saving';
+  const currentPosition = step > 1 ? spread.positions[picks.length] : null;
+  const canDraw = picks.length < spread.positions.length;
+  const selectionOpen = step === 2 && !allPicked;
+  const remainingCount = spread.positions.length - picks.length;
+
+  return (
+    <div className="tarot tarot-reading-page">
+      <div className="tarot-reading">
+        <aside className="tarot-reading__col tarot-reading__settings">
+          <div className="tarot-reading__field-head">
+            <span>1. 질문을 입력하세요</span>
+            <b>?</b>
+          </div>
+          <textarea
+            className="tarot-reading__textarea"
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            maxLength={200}
+            placeholder="궁금한 점을 자유롭게 입력하세요."
+          />
+          <div className="tarot-reading__char-count">{question.length}/200</div>
+
+          <div className="tarot-reading__field-head">
+            <span>2. 카테고리 선택</span>
+          </div>
+          <div className="tarot-reading__chips">
+            {CATEGORIES.map((c) => (
+              <button
+                key={c}
+                className={`tarot-chip ${category === c ? 'is-active' : ''}`}
+                onClick={() => setCategory(c)}
+              >
+                {CATEGORY_LABELS[c] || c}
+              </button>
+            ))}
+          </div>
+
+          <div className="tarot-reading__field-head">
+            <span>3. 스프레드 선택</span>
+            <b>i</b>
+          </div>
+          <div className="tarot-spread-picker">
+            <button
+              type="button"
+              className={`tarot-spread-option ${spreadId === 'three_card' ? 'is-active' : ''}`}
+              onClick={() => changeSpread('three_card')}
+            >
+              <span className="tarot-spread-option__icon" aria-hidden>
+                <i /><i /><i />
+              </span>
+              <span>
+                <strong>3장 스프레드</strong>
+                <em>과거 · 현재 · 미래</em>
+              </span>
+              <b aria-hidden>⌄</b>
+            </button>
+            <button
+              type="button"
+              className={`tarot-spread-option ${spreadId === 'one_card' ? 'is-active' : ''}`}
+              onClick={() => changeSpread('one_card')}
+            >
+              <span className="tarot-spread-option__icon tarot-spread-option__icon--single" aria-hidden>
+                <i />
+              </span>
+              <span>
+                <strong>오늘의 카드</strong>
+                <em>하루의 흐름</em>
+              </span>
+              <b aria-hidden>⌄</b>
+            </button>
+          </div>
+
+          <div className="tarot-deck-box">
+            <img src="/images/tarot/card_back.png" alt="" aria-hidden />
+            <div>
+              <strong>아르카나 덱</strong>
+              <span>메이저 22장 · 마이너 56장</span>
+              <button type="button" onClick={startShuffle}>덱 변경</button>
+            </div>
+          </div>
+
+          <button className="tarot-reading__secondary-action" onClick={resetCards}>
+            ⤨ 카드 섞기
+          </button>
+
+          <button
+            className="tarot-reading__primary"
+            onClick={() => (allPicked ? handleInterpret() : openCardSpread())}
+            disabled={busy || (!allPicked && step === 2)}
+          >
+            {allPicked ? (busy ? '해석 중...' : '카드 해석하기') : step === 2 ? '카드를 선택하세요' : '카드 뽑기'}
+            <span>
+              {allPicked
+                ? 'AI 리딩을 시작합니다'
+                : step === 2
+                  ? `${remainingCount}장을 더 선택하면 리딩을 시작할 수 있습니다`
+                  : '20장의 카드 중 직감이 닿는 카드를 선택합니다'}
+            </span>
+          </button>
+
+          {picks.length > 0 && (
+            <button className="tarot-reading__ghost-action" onClick={restart}>
+              새 리딩
+            </button>
+          )}
+
+          {error && <p className="tarot-reading__error">{error}</p>}
+
+          <p className="tarot-reading__hint">✧ 직관을 믿고 마음을 가라앉힌 후 카드를 뽑아보세요.</p>
+        </aside>
+
+        <div className="tarot-reading__col tarot-reading__center">
+          <StepIndicator current={step} />
+
+          <div className="tarot-reading__prompt">
+            <strong>{allPicked ? '선택한 카드가 스프레드에 놓였습니다.' : selectionOpen ? '펼쳐진 카드 중 마음이 끌리는 카드를 선택하세요.' : '마음의 평화를 유지하고 직관을 통해 메시지를 받아보세요.'}</strong>
+            <span>{allPicked ? '카드를 선택하면 오른쪽에서 의미를 확인할 수 있습니다.' : currentPosition ? `${currentPosition.label} 위치에 놓을 카드를 선택할 차례입니다.` : '좌측에서 질문과 스프레드를 설정한 뒤 카드를 뽑아보세요.'}</span>
+          </div>
+
+          <div className="tarot-table">
+            <div className="tarot-table__rings" aria-hidden />
+            {step === 1 && picks.length === 0 ? (
+              <div className="tarot-deck-stage">
+                <div className="tarot-deck-pile" aria-hidden>
+                  <img src="/images/tarot/card_bunch.png" alt="" draggable={false} />
+                </div>
+                <p>{spread.name} 준비 완료</p>
+              </div>
+            ) : selectionOpen ? (
+              <div className="tarot-selection-stage">
+                <div className="tarot-selection-stage__status">
+                  <span>{picks.length}/{spread.positions.length}</span>
+                  <strong>{currentPosition?.label} 카드 선택</strong>
+                </div>
+                <div className="tarot-card-spread" aria-label="펼쳐진 타로 카드">
+                  {slice.map((card, idx) => {
+                    const selectedIdx = disabledIds.indexOf(card.slug);
+                    const selectedPick = selectedIdx >= 0 ? picks[selectedIdx] : null;
+                    return (
+                      <div
+                        key={card.slug}
+                        className={`tarot-card-choice ${selectedPick ? 'is-selected' : ''}`}
+                        style={{ '--choice-i': idx }}
+                      >
+                        <TarotCard
+                          card={card}
+                          faceDown
+                          size="sm"
+                          clickable={!selectedPick}
+                          onClick={() => handlePick(card)}
+                          label={`${idx + 1}번째 펼쳐진 카드`}
+                        />
+                        {selectedPick && (
+                          <span className="tarot-card-choice__badge">{selectedPick.position}</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+                <div className={`tarot-selected-strip tarot-selected-strip--${spread.positions.length}`}>
+                  {spread.positions.map((pos) => {
+                    const pick = picks[pos.idx];
+                    return (
+                      <button
+                        key={pos.idx}
+                        type="button"
+                        className={`tarot-selected-strip__item ${pick ? 'is-filled' : ''}`}
+                        onClick={() => pick && setFocusIdx(pos.idx)}
+                        disabled={!pick}
+                      >
+                        <strong>{pos.label}</strong>
+                        <span>{pick ? pick.card.name : '선택 대기'}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <div className={`tarot-table__cards tarot-table__cards--${spread.positions.length}`}>
+                {spread.positions.map((pos) => {
+                  const pick = picks[pos.idx];
+                  const isCurrent = pos.idx === picks.length && canDraw;
+                  return (
+                    <div
+                      key={pos.idx}
+                      className={`tarot-table-slot ${pick ? 'is-picked' : ''} ${isCurrent ? 'is-current' : ''}`}
+                    >
+                      <span className="tarot-table-slot__halo" aria-hidden />
+                      {pick ? (
+                        <TarotCard
+                          card={pick.card}
+                          reversed={pick.reversed}
+                          size="lg"
+                          clickable
+                          onClick={() => setFocusIdx(pos.idx)}
+                        />
+                      ) : (
+                        <TarotCard
+                          card={slice[pos.idx]}
+                          faceDown
+                          size="lg"
+                          clickable={isCurrent}
+                          onClick={() => isCurrent && handlePick()}
+                        />
+                      )}
+                      <span className="tarot-table-slot__mark">✥</span>
+                      <span className="tarot-table-slot__label">
+                        <strong>{pos.label}</strong>
+                        <em>{pos.label === '과거' ? 'Past' : pos.label === '현재' ? 'Present' : pos.label === '미래' ? 'Future' : 'Today'}</em>
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {picks.length > 0 && (
+            <div className="tarot-reading__center-actions">
+              <button type="button" onClick={resetCards}>⟳ 카드 다시 뽑기</button>
+              <label>
+                카드 뒤집기 애니메이션
+                <span aria-hidden />
+              </label>
+            </div>
+          )}
+
+          <div className="tarot-recent">
+            <div className="tarot-recent__head">
+              <strong>최근 리딩</strong>
+              <button type="button">전체 보기 ›</button>
+            </div>
+            <div className="tarot-recent__list">
+              {RECENT_READINGS.map((item) => (
+                <article key={item.title} className="tarot-recent-card">
+                  <div className="tarot-recent-card__thumb">
+                    <img src="/images/tarot/card_back.png" alt="" aria-hidden />
+                  </div>
+                  <div>
+                    <strong>{item.title}</strong>
+                    <span>{item.meta}</span>
+                  </div>
+                </article>
+              ))}
+              <button type="button" className="tarot-recent-card tarot-recent-card--new">
+                <span>＋</span>
+                새 리딩하기
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <InterpretationPanel
+          interpretation={interpretation}
+          selectedCard={focusCard}
+          focusCardId={focusCardId}
+          selectedPosition={focusPick?.position}
+          selectedReversed={!!focusPick?.reversed}
+        />
+      </div>
+    </div>
+  );
+}

src/pages/tarot/Tarot.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Tarot.css';
+
+export default function Tarot() {
+  return (
+    <div className="tarot tarot--landing">
+      <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
+      <div className="tarot__hero-overlay" />
+      <div className="tarot__corner tarot__corner--left" aria-hidden />
+      <div className="tarot__corner tarot__corner--right" aria-hidden />
+
+      <div className="tarot__hero-content">
+        <header className="tarot__brand" aria-label="Arcana Tarot">
+          <span className="tarot__brand-spark" aria-hidden>✦</span>
+          <span className="tarot__brand-mark" aria-hidden>A</span>
+          <span className="tarot__brand-name">ARCANA TAROT</span>
+          <span className="tarot__brand-spark" aria-hidden>✦</span>
+        </header>
+
+        <section className="tarot__hero-copy" aria-labelledby="tarot-landing-title">
+          <h1 id="tarot-landing-title" className="tarot__h1">
+            당신의<br />
+            오늘을 비추는 타로
+          </h1>
+          <div className="tarot__ornament" aria-hidden>
+            <span />
+            <b>✶</b>
+            <span />
+          </div>
+          <p className="tarot__sub">
+            카드를 뽑고, 당신만을 위한 인사이트를 받아보세요.<br />
+            운명은 이미 당신 안에 있습니다.
+          </p>
+
+          <div className="tarot__cta-row">
+            <Link to="/tarot/reading" className="tarot__cta">
+              <span aria-hidden>✦</span>
+              지금 시작하기
+              <span className="tarot__cta-arrow" aria-hidden>→</span>
+            </Link>
+            <Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">
+              <span className="tarot__card-icon" aria-hidden />
+              오늘의 카드
+            </Link>
+          </div>
+        </section>
+
+        <div id="tarot-guide" className="tarot__tier-row" aria-label="Tarot features">
+          <article className="tarot__tier">
+            <span className="tarot__tier-icon tarot__tier-icon--sun" aria-hidden />
+            <h3>오늘의 운세</h3>
+            <p>매일 한 장의 카드로<br />오늘의 흐름을 확인하세요.</p>
+          </article>
+          <article className="tarot__tier">
+            <span className="tarot__tier-icon tarot__tier-icon--cards" aria-hidden />
+            <h3>3장 스프레드</h3>
+            <p>과거·현재·미래를 통해<br />더 깊은 해답을 얻어보세요.</p>
+          </article>
+          <article className="tarot__tier">
+            <span className="tarot__tier-icon tarot__tier-icon--moon" aria-hidden />
+            <h3>AI 해석</h3>
+            <p>AI가 전하는 통찰로<br />나만의 리딩을 완성하세요.</p>
+          </article>
+        </div>
+
+        <div className="tarot__scroll-cue" aria-hidden>
+          <span>SCROLL TO DISCOVER</span>
+          <b>⌄</b>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/tarot/TodayCard.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import './Tarot.css';
+import { TAROT_DECK, CATEGORIES } from './data/cards';
+import { useTarotReading } from './hooks/useTarotReading';
+import TarotCard from './components/TarotCard';
+import InterpretationPanel from './components/InterpretationPanel';
+
+export default function TodayCard() {
+  const [category, setCategory] = useState('일반');
+  const [question, setQuestion] = useState('');
+  const [pick, setPick] = useState(null);
+  const { status, interpretation, runInterpretAndSave, error } = useTarotReading();
+
+  const drawCard = () => {
+    const idx = Math.floor(Math.random() * TAROT_DECK.length);
+    const reversed = Math.random() < 0.5;
+    const card = TAROT_DECK[idx];
+    setPick({ card, position: '오늘', reversed });
+  };
+
+  const handleStart = () => {
+    drawCard();
+  };
+
+  const handleInterpret = async () => {
+    if (!pick) return;
+    try {
+      await runInterpretAndSave({
+        spread_type: 'one_card',
+        category,
+        question: question.trim() || null,
+        picks: [pick],
+      });
+    } catch (e) {
+      // error는 hook의 state로 전달됨
+    }
+  };
+
+  const selectedCardMeaning = pick?.card || null;
+  const focusCardId = pick?.card?.slug;
+
+  const busy = status === 'interpreting' || status === 'saving';
+
+  return (
+    <div className="tarot tarot-reading">
+      <aside className="tarot-reading__col">
+        <div className="tarot-reading__step-label">오늘의 카드</div>
+        <label className="tarot-reading__step-label">질문 (선택)</label>
+        <textarea
+          className="tarot-reading__textarea"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          placeholder="오늘 무엇이 궁금한가요?"
+        />
+        <div className="tarot-reading__step-label" style={{ marginTop: 16 }}>카테고리</div>
+        <div className="tarot-reading__chips">
+          {CATEGORIES.map((c) => (
+            <button
+              key={c}
+              className={`tarot-chip ${category === c ? 'is-active' : ''}`}
+              onClick={() => setCategory(c)}
+            >{c}</button>
+          ))}
+        </div>
+        {!pick && (
+          <button className="tarot-reading__primary" onClick={handleStart}>
+            카드 뽑기
+          </button>
+        )}
+        {pick && !interpretation && (
+          <button className="tarot-reading__primary" onClick={handleInterpret} disabled={busy}>
+            {busy ? '해석 중…' : 'AI 해석 시작'}
+          </button>
+        )}
+        {pick && interpretation && (
+          <button className="tarot-reading__primary" onClick={() => { setPick(null); }}>
+            다시 뽑기
+          </button>
+        )}
+        {error && <p style={{ color: '#f43f5e', marginTop: 12, fontSize: 13 }}>오류: {error}</p>}
+      </aside>
+
+      <div className="tarot-reading__col" style={{ display: 'grid', placeItems: 'center', minHeight: 320 }}>
+        {pick ? (
+          <TarotCard card={pick.card} reversed={pick.reversed} size="lg" label={pick.position} />
+        ) : (
+          <p style={{ color: 'var(--tarot-text-dim)' }}>좌측에서 "카드 뽑기"를 눌러보세요.</p>
+        )}
+      </div>
+
+      <InterpretationPanel
+        interpretation={interpretation}
+        selectedCard={selectedCardMeaning}
+        focusCardId={focusCardId}
+      />
+    </div>
+  );
+}

src/pages/tarot/components/CardGrid.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import TarotCard from './TarotCard';
+
+export default function CardGrid({ slice, onPick, disabledIds = [] }) {
+  return (
+    <div className="tarot-grid">
+      {slice.map((card) => {
+        const disabled = disabledIds.includes(card.slug);
+        return (
+          <TarotCard
+            key={card.slug}
+            card={card}
+            faceDown
+            clickable={!disabled}
+            onClick={() => !disabled && onPick(card)}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/pages/tarot/components/InterpretationPanel.jsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+
+function ConfidenceBadge({ level }) {
+  if (!level) return null;
+  const cls = level === 'high' ? 'is-high' : level === 'low' ? 'is-low' : 'is-medium';
+  const text = level === 'high' ? '높음' : level === 'low' ? '낮음' : '보통';
+  return <span className={`tarot-confidence ${cls}`}>확신 {text}</span>;
+}
+
+export default function InterpretationPanel({
+  interpretation,
+  selectedCard,
+  focusCardId,
+  selectedPosition,
+  selectedReversed = false,
+}) {
+  const [showEvidence, setShowEvidence] = useState(true);
+
+  if (!interpretation && !selectedCard) {
+    return (
+      <aside className="tarot-panel tarot-panel--reading">
+        <div className="tarot-panel__tabs">
+          <button type="button" className="is-active">카드 해석</button>
+          <button type="button">AI 인사이트</button>
+        </div>
+        <div className="tarot-panel__empty-state">
+          <span>✦</span>
+          <p>카드를 뽑으면 이곳에 카드 의미와 AI 인사이트가 표시됩니다.</p>
+        </div>
+      </aside>
+    );
+  }
+
+  const cardDetail = focusCardId
+    ? (interpretation?.cards || []).find((c) => c.card === focusCardId)
+    : null;
+  const keywords = selectedReversed
+    ? selectedCard?.reversedKeywords || selectedCard?.keywords || []
+    : selectedCard?.keywords || [];
+  const meaning = selectedReversed
+    ? selectedCard?.meaningReversed || selectedCard?.meaningUpright
+    : selectedCard?.meaningUpright || selectedCard?.meaningReversed;
+  const symbols = selectedCard?.symbols || [];
+
+  return (
+    <aside className="tarot-panel tarot-panel--reading">
+      <div className="tarot-panel__tabs">
+        <button type="button" className="is-active">카드 해석</button>
+        <button type="button">AI 인사이트</button>
+      </div>
+
+      {selectedCard && (
+        <header className="tarot-panel__head">
+          <span className="tarot-panel__position">{selectedPosition || '선택한 카드'}</span>
+          <h3 className="tarot-panel__title">
+            {selectedCard.name} <small>({selectedCard.nameEn}{selectedReversed ? ' · 역방향' : ''})</small>
+            <span aria-hidden> ✦</span>
+          </h3>
+          <p className="tarot-panel__sub">핵심 키워드</p>
+          <div className="tarot-panel__chips">
+            {keywords.slice(0, 5).map((k) => (
+              <span key={k} className="tarot-chip">{k}</span>
+            ))}
+          </div>
+        </header>
+      )}
+
+      {selectedCard && !interpretation && (
+        <>
+          <section className="tarot-panel__section">
+            <h4>카드 의미 요약</h4>
+            <p>{meaning}</p>
+          </section>
+          <section className="tarot-panel__section">
+            <h4>주요 상징</h4>
+            <ul className="tarot-symbol-list">
+              {(symbols.length ? symbols : keywords.slice(0, 4).map((keyword) => ({
+                label: keyword,
+                meaning: `${keyword}의 흐름을 관찰하세요.`,
+              }))).slice(0, 4).map((symbol) => (
+                <li key={symbol.label}>
+                  <span aria-hidden>✺</span>
+                  <strong>{symbol.label}</strong>
+                  {symbol.meaning}
+                </li>
+              ))}
+            </ul>
+          </section>
+          <section className="tarot-panel__section tarot-panel__ai-note">
+            <h4>AI 타로 해석 ✦</h4>
+            <p>모든 카드를 뽑은 뒤 해석 버튼을 누르면 질문과 스프레드 위치를 함께 반영한 리딩이 생성됩니다.</p>
+          </section>
+          <div className="tarot-panel__advice-card">
+            <span aria-hidden>☾</span>
+            <p>
+              <strong>오늘의 조언</strong>
+              당신의 직감을 믿고, 작은 신호에도 귀 기울이세요.
+            </p>
+          </div>
+        </>
+      )}
+
+      {cardDetail && (
+        <section className="tarot-panel__section">
+          <h4>이 위치의 해석</h4>
+          <p>{cardDetail.interpretation}</p>
+          <p className="tarot-panel__advice">💡 {cardDetail.advice}</p>
+          <button
+            type="button"
+            className="tarot-panel__toggle"
+            onClick={() => setShowEvidence((v) => !v)}
+          >
+            {showEvidence ? '근거 접기' : '근거 펼치기'}
+          </button>
+          {showEvidence && cardDetail.evidence && (
+            <dl className="tarot-evidence">
+              <dt>카드 의미</dt>
+              <dd>{cardDetail.evidence.card_meaning_used}</dd>
+              <dt>위치 결합</dt>
+              <dd>{cardDetail.evidence.position_logic}</dd>
+              <dt>카테고리 관점</dt>
+              <dd>{cardDetail.evidence.category_lens}</dd>
+            </dl>
+          )}
+        </section>
+      )}
+
+      {interpretation && (
+        <section className="tarot-panel__section">
+          <h4>종합 해석 <ConfidenceBadge level={interpretation.confidence} /></h4>
+          <p>{interpretation.summary}</p>
+          <p className="tarot-panel__advice">💡 {interpretation.advice}</p>
+          {interpretation.warning && (
+            <p className="tarot-panel__warning">⚠️ {interpretation.warning}</p>
+          )}
+        </section>
+      )}
+
+      {(interpretation?.interactions || []).length > 0 && (
+        <section className="tarot-panel__section">
+          <h4>카드 상호작용</h4>
+          <ul className="tarot-interactions">
+            {interpretation.interactions.map((it, i) => (
+              <li key={i}>
+                <span className={`tarot-interaction-type tarot-interaction-type--${it.type}`}>
+                  {it.type === 'synergy' ? '시너지' : it.type === 'conflict' ? '충돌' : '전환'}
+                </span>
+                {' '}
+                <strong>{(it.between || []).join(' ↔ ')}</strong>
+                <p>{it.explanation}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </aside>
+  );
+}