diff --git a/backend/src/main/java/com/goldenchart/auth/MenuIds.java b/backend/src/main/java/com/goldenchart/auth/MenuIds.java
index 20e60b5..25396c6 100644
--- a/backend/src/main/java/com/goldenchart/auth/MenuIds.java
+++ b/backend/src/main/java/com/goldenchart/auth/MenuIds.java
@@ -7,7 +7,7 @@ public final class MenuIds {
     private MenuIds() {}
 
     public static final List<String> ALL = List.of(
-            "dashboard", "chart", "paper", "virtual", "trend-search", "verification-board", "strategy", "strategy-editor", "backtest", "notifications", "settings",
+            "dashboard", "chart", "paper", "virtual", "trend-search", "verification-board", "strategy", "strategy-editor", "backtest", "analysis-report", "notifications", "settings",
             "settings_general", "settings_chart", "settings_indicators", "settings_backtest",
             "settings_strategy", "settings_paper", "settings_virtual", "settings_live",
             "settings_trend-search",
diff --git a/backend/src/main/resources/db/migration/V59__analysis_report_menu.sql b/backend/src/main/resources/db/migration/V59__analysis_report_menu.sql
new file mode 100644
index 0000000..00c27a3
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V59__analysis_report_menu.sql
@@ -0,0 +1,6 @@
+-- 분석레포트 메뉴 권한
+INSERT INTO gc_role_menu_permission (role, menu_id, allowed) VALUES
+('ADMIN', 'analysis-report', 1),
+('USER',  'analysis-report', 1),
+('GUEST', 'analysis-report', 0)
+ON DUPLICATE KEY UPDATE allowed = VALUES(allowed);
diff --git a/docs/TRADING_REPORT_UI_DESIGN.pdf b/docs/TRADING_REPORT_UI_DESIGN.pdf
new file mode 100644
index 0000000..ef037ba
Binary files /dev/null and b/docs/TRADING_REPORT_UI_DESIGN.pdf differ
diff --git a/docs/TradingReport_UI_Design.pdf b/docs/TradingReport_UI_Design.pdf
new file mode 100644
index 0000000..6f19d11
Binary files /dev/null and b/docs/TradingReport_UI_Design.pdf differ
diff --git a/docs/_new_pdf_pages/page_01.png b/docs/_new_pdf_pages/page_01.png
new file mode 100644
index 0000000..b893139
Binary files /dev/null and b/docs/_new_pdf_pages/page_01.png differ
diff --git a/docs/_new_pdf_pages/page_02.png b/docs/_new_pdf_pages/page_02.png
new file mode 100644
index 0000000..27a77a7
Binary files /dev/null and b/docs/_new_pdf_pages/page_02.png differ
diff --git a/docs/_new_pdf_pages/page_03.png b/docs/_new_pdf_pages/page_03.png
new file mode 100644
index 0000000..b51bb11
Binary files /dev/null and b/docs/_new_pdf_pages/page_03.png differ
diff --git a/docs/_new_pdf_pages/page_04.png b/docs/_new_pdf_pages/page_04.png
new file mode 100644
index 0000000..10dae70
Binary files /dev/null and b/docs/_new_pdf_pages/page_04.png differ
diff --git a/docs/_new_pdf_pages/page_05.png b/docs/_new_pdf_pages/page_05.png
new file mode 100644
index 0000000..bfc338d
Binary files /dev/null and b/docs/_new_pdf_pages/page_05.png differ
diff --git a/docs/_new_pdf_pages/page_06.png b/docs/_new_pdf_pages/page_06.png
new file mode 100644
index 0000000..938def2
Binary files /dev/null and b/docs/_new_pdf_pages/page_06.png differ
diff --git a/docs/_new_pdf_pages/page_07.png b/docs/_new_pdf_pages/page_07.png
new file mode 100644
index 0000000..12e2b48
Binary files /dev/null and b/docs/_new_pdf_pages/page_07.png differ
diff --git a/docs/_new_pdf_pages/page_08.png b/docs/_new_pdf_pages/page_08.png
new file mode 100644
index 0000000..c201e05
Binary files /dev/null and b/docs/_new_pdf_pages/page_08.png differ
diff --git a/docs/_new_pdf_pages/page_09.png b/docs/_new_pdf_pages/page_09.png
new file mode 100644
index 0000000..2ddfd99
Binary files /dev/null and b/docs/_new_pdf_pages/page_09.png differ
diff --git a/docs/_new_pdf_pages/page_10.png b/docs/_new_pdf_pages/page_10.png
new file mode 100644
index 0000000..96d4e19
Binary files /dev/null and b/docs/_new_pdf_pages/page_10.png differ
diff --git a/docs/_new_pdf_pages/page_11.png b/docs/_new_pdf_pages/page_11.png
new file mode 100644
index 0000000..f1ccaae
Binary files /dev/null and b/docs/_new_pdf_pages/page_11.png differ
diff --git a/docs/_new_pdf_pages/page_12.png b/docs/_new_pdf_pages/page_12.png
new file mode 100644
index 0000000..cb76832
Binary files /dev/null and b/docs/_new_pdf_pages/page_12.png differ
diff --git a/docs/_pdf_pages/page_01.png b/docs/_pdf_pages/page_01.png
new file mode 100644
index 0000000..4fda9c4
Binary files /dev/null and b/docs/_pdf_pages/page_01.png differ
diff --git a/docs/_pdf_pages/page_02.png b/docs/_pdf_pages/page_02.png
new file mode 100644
index 0000000..1c779d8
Binary files /dev/null and b/docs/_pdf_pages/page_02.png differ
diff --git a/docs/_pdf_pages/page_03.png b/docs/_pdf_pages/page_03.png
new file mode 100644
index 0000000..9cbb249
Binary files /dev/null and b/docs/_pdf_pages/page_03.png differ
diff --git a/docs/_pdf_pages/page_04.png b/docs/_pdf_pages/page_04.png
new file mode 100644
index 0000000..9b9aa06
Binary files /dev/null and b/docs/_pdf_pages/page_04.png differ
diff --git a/docs/_pdf_pages/page_05.png b/docs/_pdf_pages/page_05.png
new file mode 100644
index 0000000..35c1927
Binary files /dev/null and b/docs/_pdf_pages/page_05.png differ
diff --git a/docs/_pdf_pages/page_06.png b/docs/_pdf_pages/page_06.png
new file mode 100644
index 0000000..55f55ff
Binary files /dev/null and b/docs/_pdf_pages/page_06.png differ
diff --git a/docs/_pdf_pages/page_07.png b/docs/_pdf_pages/page_07.png
new file mode 100644
index 0000000..1020a19
Binary files /dev/null and b/docs/_pdf_pages/page_07.png differ
diff --git a/docs/_pdf_pages/page_08.png b/docs/_pdf_pages/page_08.png
new file mode 100644
index 0000000..79492fb
Binary files /dev/null and b/docs/_pdf_pages/page_08.png differ
diff --git a/docs/_pdf_pages/page_09.png b/docs/_pdf_pages/page_09.png
new file mode 100644
index 0000000..6c183e1
Binary files /dev/null and b/docs/_pdf_pages/page_09.png differ
diff --git a/docs/_pdf_pages/page_10.png b/docs/_pdf_pages/page_10.png
new file mode 100644
index 0000000..384d586
Binary files /dev/null and b/docs/_pdf_pages/page_10.png differ
diff --git a/docs/_pdf_pages/page_11.png b/docs/_pdf_pages/page_11.png
new file mode 100644
index 0000000..618dd31
Binary files /dev/null and b/docs/_pdf_pages/page_11.png differ
diff --git a/docs/_pdf_pages/page_12.png b/docs/_pdf_pages/page_12.png
new file mode 100644
index 0000000..d5df399
Binary files /dev/null and b/docs/_pdf_pages/page_12.png differ
diff --git a/docs/_pdf_pages/page_13.png b/docs/_pdf_pages/page_13.png
new file mode 100644
index 0000000..7a76f9d
Binary files /dev/null and b/docs/_pdf_pages/page_13.png differ
diff --git a/docs/_pdf_pages/page_14.png b/docs/_pdf_pages/page_14.png
new file mode 100644
index 0000000..cf28571
Binary files /dev/null and b/docs/_pdf_pages/page_14.png differ
diff --git a/docs/_pdf_pages/page_15.png b/docs/_pdf_pages/page_15.png
new file mode 100644
index 0000000..1e355cf
Binary files /dev/null and b/docs/_pdf_pages/page_15.png differ
diff --git a/frontend/src/App.css b/frontend/src/App.css
index c7f1da6..c9899b3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -228,6 +228,7 @@ html.theme-blue {
   min-width: 0;
 }
 .tmb-nav-btn {
+  position: relative; /* 알림 뱃지 absolute 기준점 */
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -12193,37 +12194,21 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
   color: var(--text);
 }
 
-/* TopMenuBar 알림 버튼 */
-.tmb-notify-group {
+/* TopMenuBar 알림 ── 아이콘 버튼 제거, 메뉴 뱃지 + 팝업 닫기 버튼만 유지 */
+.tmb-notify-dismiss-btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-}
-.tmb-notify-btn {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg3);
-  color: var(--text2);
-  cursor: pointer;
-}
-.tmb-notify-btn:hover { background: var(--bg4); color: var(--text); }
-.tmb-notify-dismiss-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
+  height: 32px;
+  padding: 0 8px;
   border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--bg3);
   color: var(--text2);
   cursor: pointer;
+  font-size: 12px;
 }
 .tmb-notify-dismiss-btn:hover:not(:disabled) {
   background: rgba(239, 83, 80, 0.12);
@@ -12234,10 +12219,11 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
   opacity: 0.35;
   cursor: not-allowed;
 }
+/* 공통 뱃지 — 알림 팝업 닫기 버튼 내 또는 메뉴 버튼 위에 표시 */
 .tmb-notify-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
@@ -12246,8 +12232,15 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
   color: #fff;
   font-size: 10px;
   font-weight: 700;
-  line-height: 16px;
-  text-align: center;
+  line-height: 1;
+}
+
+/* 메뉴 버튼 내 뱃지 (알림목록 메뉴) */
+.tmb-notify-badge--nav {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  pointer-events: none;
 }
 .tmb-notify-layout {
   position: relative;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2246006..4245b9b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -120,6 +120,7 @@ const StrategyPage = lazy(() => import('./components/StrategyPage'));
 const StrategyEditorPage = lazy(() => import('./components/StrategyEditorPage'));
 const TradeNotificationListPage = lazy(() => import('./components/TradeNotificationListPage'));
 const BacktestHistoryPage = lazy(() => import('./components/BacktestHistoryPage').then(m => ({ default: m.BacktestHistoryPage })));
+const AnalysisReportPage = lazy(() => import('./components/analysisReport/AnalysisReportPage').then(m => ({ default: m.AnalysisReportPage })));
 const SettingsPage = lazy(() => import('./components/SettingsPage'));
 const PaperTradingPage = lazy(() => import('./components/PaperTradingPage'));
 const VirtualTradingPage = lazy(() => import('./components/VirtualTradingPage'));
@@ -2004,6 +2005,16 @@ function App() {
           : <FormalLoginGate onLogin={requireFormalLogin} />
       )}
 
+      {menuPage === 'analysis-report' && (
+        formalLogin
+          ? (
+            <Suspense fallback={<PageLoadFallback />}>
+              <AnalysisReportPage theme={theme} />
+            </Suspense>
+          )
+          : <FormalLoginGate onLogin={requireFormalLogin} />
+      )}
+
       {menuPage === 'paper' && (
         formalLogin ? (
         <Suspense fallback={<PageLoadFallback />}>
diff --git a/frontend/src/components/TopMenuBar.tsx b/frontend/src/components/TopMenuBar.tsx
index 5aae103..6183152 100644
--- a/frontend/src/components/TopMenuBar.tsx
+++ b/frontend/src/components/TopMenuBar.tsx
@@ -7,19 +7,19 @@
 import React, { memo, useEffect, useState } from 'react';
 import type { Theme } from '../types';
 import type { AuthSession } from '../utils/auth';
-import TradeAlertPopupMenubarSelect from './TradeAlertPopupMenubarSelect';
 import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';
 import { canAccessMenu } from '../utils/permissions';
 
-export type MenuPage = 'dashboard' | 'chart' | 'paper' | 'virtual' | 'trend-search' | 'verification-board' | 'strategy' | 'strategy-editor' | 'backtest' | 'notifications' | 'settings';
+export type MenuPage = 'dashboard' | 'chart' | 'paper' | 'virtual' | 'trend-search' | 'verification-board' | 'strategy' | 'strategy-editor' | 'backtest' | 'analysis-report' | 'notifications' | 'settings';
 
 interface TopMenuBarProps {
   activePage: MenuPage;
   theme:      Theme;
   onPage:     (page: MenuPage) => void;
   onTheme:    () => void;
-  /** 미확인 매매 시그널 알림 수 */
+  /** 미확인 매매 시그널 알림 수 — 알림목록 메뉴 뱃지로 표시 */
   tradeNotifyUnread?: number;
+  /** @deprecated 알림 아이콘 버튼 제거됨, 하위 호환 유지 */
   onOpenNotifications?: () => void;
   /** 모바일 앱 다운로드 모달 */
   onOpenAppDownload?: () => void;
@@ -66,6 +66,16 @@ const IcChart = () => (
   </svg>
 );
 
+const IcAnalysisReport = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M5 2h8a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
+    <path d="M3 5H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8"/>
+    <line x1="7" y1="6" x2="11" y2="6"/>
+    <line x1="7" y1="9" x2="11" y2="9"/>
+    <line x1="7" y1="12" x2="9" y2="12"/>
+  </svg>
+);
+
 const IcBacktest = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
     <rect x="1" y="9" width="2.5" height="5" rx="0.5"/>
@@ -98,15 +108,6 @@ const IcNotify = () => (
   </svg>
 );
 
-/** 알림 팝업 전체 닫기 */
-const IcDismissPopups = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="2" y="3" width="9" height="10" rx="1"/>
-    <path d="M11 5.5 14 2.5M14 5.5 11 2.5"/>
-    <line x1="4.5" y1="6.5" x2="8.5" y2="10.5"/>
-    <line x1="8.5" y1="6.5" x2="4.5" y2="10.5"/>
-  </svg>
-);
 
 const IcFullscreen = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -191,6 +192,7 @@ const MENU_ITEMS: { page: MenuPage; label: string; icon: React.ReactNode }[] = [
   { page: 'trend-search', label: '추세검색', icon: <IcTrendSearch /> },
   { page: 'strategy-editor', label: '전략편집기', icon: <IcStrategyEditor /> },
   { page: 'backtest',  label: '백테스팅',   icon: <IcBacktest />  },
+  { page: 'analysis-report', label: '분석레포트', icon: <IcAnalysisReport /> },
   { page: 'notifications', label: '알림목록', icon: <IcNotify /> },
   { page: 'settings',  label: '설정',       icon: <IcSettings />  },
   { page: 'verification-board', label: '검증게시판', icon: <IcVerificationBoard /> },
@@ -199,7 +201,6 @@ const MENU_ITEMS: { page: MenuPage; label: string; icon: React.ReactNode }[] = [
 export const TopMenuBar = memo(function TopMenuBar({
   activePage, theme, onPage, onTheme,
   tradeNotifyUnread = 0,
-  onOpenNotifications,
   onOpenAppDownload,
   tradeNotifyToastCount = 0,
   onDismissAllNotifyPopups,
@@ -227,8 +228,6 @@ export const TopMenuBar = memo(function TopMenuBar({
   const visibleItems = menuPermissions
     ? MENU_ITEMS.filter(({ page }) => canAccessMenu(menuPermissions, page))
     : MENU_ITEMS;
-  const showNotifications = menuPermissions == null || menuPermissions.notifications === true;
-
   return (
     <header className="top-menubar">
       {/* 로고 */}
@@ -254,6 +253,11 @@ export const TopMenuBar = memo(function TopMenuBar({
             >
               <span className="tmb-nav-icon">{icon}</span>
               <span className="tmb-nav-label">{label}</span>
+              {page === 'notifications' && tradeNotifyUnread > 0 && (
+                <span className="tmb-notify-badge tmb-notify-badge--nav">
+                  {tradeNotifyUnread > 99 ? '99+' : tradeNotifyUnread}
+                </span>
+              )}
             </button>
           </React.Fragment>
         ))}
@@ -274,54 +278,6 @@ export const TopMenuBar = memo(function TopMenuBar({
             >
               <IcAppDownload />
             </button>
-            {onOpenNotifications && showNotifications && (
-              <span className="tmb-divider" aria-hidden="true" />
-            )}
-          </>
-        )}
-        {onOpenNotifications && showNotifications && (
-          <>
-            <div className="tmb-notify-group">
-            <button
-              type="button"
-              className={`tmb-notify-btn ${activePage === 'notifications' ? 'tmb-nav-btn--active' : ''}`}
-              onClick={onOpenNotifications}
-              title="매매 시그널 알림"
-              aria-label="매매 시그널 알림"
-            >
-              <IcNotify />
-              {tradeNotifyUnread > 0 && (
-                <span className="tmb-notify-badge">
-                  {tradeNotifyUnread > 99 ? '99+' : tradeNotifyUnread}
-                </span>
-              )}
-            </button>
-            <TradeAlertPopupMenubarSelect
-              position={tradeAlertPopupPosition}
-              layout={tradeAlertPopupLayout}
-              gridCols={tradeAlertPopupGridCols}
-              onPositionChange={onTradeAlertPopupPosition}
-              onLayoutChange={onTradeAlertPopupLayout}
-              onGridColsChange={onTradeAlertPopupGridCols}
-            />
-            {onDismissAllNotifyPopups && (
-              <button
-                type="button"
-                className="tmb-notify-dismiss-btn"
-                onClick={onDismissAllNotifyPopups}
-                disabled={tradeNotifyToastCount <= 0}
-                title={
-                  tradeNotifyToastCount > 0
-                    ? `알림 팝업 ${tradeNotifyToastCount}건 전체 닫기`
-                    : '닫을 알림 팝업 없음'
-                }
-                aria-label="알림 팝업 전체 닫기"
-              >
-                <IcDismissPopups />
-              </button>
-            )}
-            </div>
-            <span className="tmb-divider" aria-hidden="true" />
           </>
         )}
 
diff --git a/frontend/src/components/analysisReport/AnalysisReportPage.tsx b/frontend/src/components/analysisReport/AnalysisReportPage.tsx
new file mode 100644
index 0000000..7b2b81d
--- /dev/null
+++ b/frontend/src/components/analysisReport/AnalysisReportPage.tsx
@@ -0,0 +1,247 @@
+/**
+ * 분석레포트 — 좌: 백테스팅/실시간 목록(백테스팅 화면과 동일) · 우: PDF 10 Variations 탭
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Theme } from '../../types';
+import {
+  loadBacktestResults,
+  loadPaperTrades,
+  loadPaperSummary,
+  loadStrategies,
+  type BacktestResultRecord,
+  type StrategyDto,
+} from '../../utils/backendApi';
+import type { AnalysisReportTypeId } from '../../utils/analysisReportTypes';
+import { ANALYSIS_REPORT_TYPES } from '../../utils/analysisReportTypes';
+import {
+  buildContextFromBacktest,
+  buildContextFromLive,
+} from '../../utils/analysisReportContext';
+import { buildLiveExecutionItems, type LiveExecutionItem } from '../../utils/liveExecutionGroups';
+import { PAPER_TRADES_CHANGED_EVENT } from '../../utils/paperTradeEvents';
+import {
+  readStoredSize,
+  storeSize,
+  usePanelResize,
+} from '../strategyEditor/usePanelResize';
+import BacktestExecutionList, { type ExecutionListTab } from '../backtest/BacktestExecutionList';
+import AnalysisReportViews from './AnalysisReportViews';
+import BacktestAnalysisReportModal from '../backtest/BacktestAnalysisReportModal';
+import {
+  buildBacktestReportModel,
+  buildLiveReportModel,
+} from '../../utils/backtestReportModel';
+import '../../styles/strategyEditorTheme.css';
+import '../../styles/backtestDashboard.css';
+import '../../styles/analysisReportPage.css';
+
+const LEFT_KEY = 'arp-left-width';
+const LEFT_DEFAULT = 380;
+
+interface Props {
+  theme?: Theme;
+}
+
+function pickCompareBacktest(
+  selected: BacktestResultRecord,
+  records: BacktestResultRecord[],
+): BacktestResultRecord | null {
+  const others = records.filter(r => r.id !== selected.id);
+  const sameSymbol = others.filter(r => r.symbol === selected.symbol);
+  return sameSymbol[0] ?? others[0] ?? null;
+}
+
+export function AnalysisReportPage({ theme = 'dark' }: Props) {
+  const [reportTypeId, setReportTypeId] = useState<AnalysisReportTypeId>('standard');
+  const [sourceTab, setSourceTab] = useState<ExecutionListTab>('backtest');
+  const [records, setRecords] = useState<BacktestResultRecord[]>([]);
+  const [liveItems, setLiveItems] = useState<LiveExecutionItem[]>([]);
+  const [selectedBacktest, setSelectedBacktest] = useState<BacktestResultRecord | null>(null);
+  const [selectedLive, setSelectedLive] = useState<LiveExecutionItem | null>(null);
+  const [strategies, setStrategies] = useState<StrategyDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [reportOpen, setReportOpen] = useState(false);
+
+  const [leftWidth, setLeftWidth] = useState(() => Math.max(readStoredSize(LEFT_KEY, LEFT_DEFAULT), 300));
+  const leftRef = useRef(leftWidth);
+  leftRef.current = leftWidth;
+  const onLeftSplit = usePanelResize('vertical', setLeftWidth, () => leftRef.current, 300, 520, v => storeSize(LEFT_KEY, v));
+
+  const refreshLive = useCallback(async () => {
+    const [trades, summary, stratList] = await Promise.all([
+      loadPaperTrades(),
+      loadPaperSummary(),
+      loadStrategies(),
+    ]);
+    setStrategies(stratList);
+    const strategyNames = Object.fromEntries(stratList.map(s => [s.id, s.name]));
+    const live = buildLiveExecutionItems(trades, summary, strategyNames);
+    setLiveItems(live);
+    setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
+  }, []);
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [recs, stratList] = await Promise.all([
+        loadBacktestResults(),
+        loadStrategies(),
+      ]);
+      setRecords(recs);
+      setStrategies(stratList);
+      setSelectedBacktest(prev => (prev && recs.some(r => r.id === prev.id) ? prev : recs[0] ?? null));
+      await refreshLive();
+    } finally {
+      setLoading(false);
+    }
+  }, [refreshLive]);
+
+  useEffect(() => { void fetchAll(); }, [fetchAll]);
+  useEffect(() => {
+    const onPaper = () => { void refreshLive(); };
+    window.addEventListener(PAPER_TRADES_CHANGED_EVENT, onPaper);
+    return () => window.removeEventListener(PAPER_TRADES_CHANGED_EVENT, onPaper);
+  }, [refreshLive]);
+
+  const compareBacktest = useMemo(() => {
+    if (!selectedBacktest) return null;
+    return pickCompareBacktest(selectedBacktest, records);
+  }, [records, selectedBacktest]);
+
+  const compareLive = useMemo(() => {
+    if (!selectedLive) return null;
+    return liveItems.find(x => x.id !== selectedLive.id) ?? null;
+  }, [liveItems, selectedLive]);
+
+  const ctx = useMemo(() => {
+    if (sourceTab === 'backtest' && selectedBacktest) {
+      return buildContextFromBacktest(selectedBacktest, compareBacktest);
+    }
+    if (sourceTab === 'live' && selectedLive) {
+      return buildContextFromLive(selectedLive);
+    }
+    return null;
+  }, [sourceTab, selectedBacktest, selectedLive, compareBacktest]);
+
+  const strategyNamesById = useMemo(
+    () => Object.fromEntries(strategies.map(s => [s.id, s.name])),
+    [strategies],
+  );
+
+  const reportModel = useMemo(() => {
+    if (sourceTab === 'backtest' && selectedBacktest && ctx?.analysis) {
+      return buildBacktestReportModel(
+        selectedBacktest,
+        ctx.analysis,
+        ctx.signals,
+        strategyNamesById,
+      );
+    }
+    if (sourceTab === 'live' && selectedLive) {
+      return buildLiveReportModel(selectedLive, ctx?.signals ?? [], '1h');
+    }
+    return null;
+  }, [sourceTab, selectedBacktest, selectedLive, ctx, strategyNamesById]);
+
+  if (loading) {
+    return (
+      <div className={`arp-page se-page se-page--${theme}`}>
+        <header className="arp-header">
+          <h1 className="arp-header-title">분석레포트</h1>
+        </header>
+        <div className="arp-loading">데이터 로딩…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`arp-page se-page se-page--${theme}`}>
+      <header className="arp-header">
+        <div className="arp-header-brand">
+          <h1 className="arp-header-title">분석레포트</h1>
+          <span className="arp-header-sub">TradingReport UI Design · 10 Variations</span>
+        </div>
+        <div className="arp-header-actions">
+          <button type="button" className="arp-btn" onClick={() => void fetchAll()}>새로고침</button>
+          <button
+            type="button"
+            className="arp-btn arp-btn--gold"
+            disabled={!reportModel}
+            onClick={() => setReportOpen(true)}
+          >
+            인쇄 / PDF
+          </button>
+        </div>
+      </header>
+
+      <div className="arp-body">
+        <aside
+          className="arp-sidebar btd-sidebar"
+          style={{ width: leftWidth, flex: `0 0 ${leftWidth}px` }}
+        >
+          <BacktestExecutionList
+            tab={sourceTab}
+            onTabChange={setSourceTab}
+            backtestRecords={records}
+            liveItems={liveItems}
+            selectedBacktestId={selectedBacktest?.id ?? null}
+            selectedLiveId={selectedLive?.id ?? null}
+            onSelectBacktest={r => {
+              setSelectedBacktest(r);
+              setSourceTab('backtest');
+            }}
+            onSelectLive={item => {
+              setSelectedLive(item);
+              setSourceTab('live');
+            }}
+          />
+        </aside>
+
+        <div
+          className="arp-splitter btd-splitter btd-splitter--v"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="좌측 패널 너비"
+          onPointerDown={onLeftSplit}
+        />
+
+        <main className="arp-main">
+          <div className="arp-type-tabs" role="tablist" aria-label="레포트 유형">
+            {ANALYSIS_REPORT_TYPES.map(t => (
+              <button
+                key={t.id}
+                type="button"
+                role="tab"
+                aria-selected={reportTypeId === t.id}
+                className={`arp-type-tab${reportTypeId === t.id ? ' arp-type-tab--on' : ''}`}
+                title={t.subtitle}
+                onClick={() => setReportTypeId(t.id)}
+              >
+                <span className="arp-type-tab-num">{t.tabLabel.split(' ')[0]}</span>
+                <span className="arp-type-tab-name">{t.tabLabel.replace(/^\d+\s*/, '')}</span>
+              </button>
+            ))}
+          </div>
+          <div className="arp-viewport">
+            <AnalysisReportViews
+              typeId={reportTypeId}
+              ctx={ctx}
+              theme={theme}
+              allBacktests={records}
+              compareBacktest={compareBacktest}
+              compareLive={compareLive}
+            />
+          </div>
+        </main>
+      </div>
+
+      <BacktestAnalysisReportModal
+        open={reportOpen}
+        onClose={() => setReportOpen(false)}
+        model={reportModel}
+      />
+    </div>
+  );
+}
+
+export default AnalysisReportPage;
diff --git a/frontend/src/components/analysisReport/AnalysisReportViews.tsx b/frontend/src/components/analysisReport/AnalysisReportViews.tsx
new file mode 100644
index 0000000..d42bccf
--- /dev/null
+++ b/frontend/src/components/analysisReport/AnalysisReportViews.tsx
@@ -0,0 +1,1000 @@
+/**
+ * The Quant Command Center — 10 Dimensions
+ * TRADING_REPORT_UI_DESIGN.pdf 설계 기반
+ */
+import React, { useMemo, useState } from 'react';
+import type { Theme } from '../../types';
+import type { AnalysisReportTypeId } from '../../utils/analysisReportTypes';
+import { getReportType } from '../../utils/analysisReportTypes';
+import type { AnalysisReportContext } from '../../utils/analysisReportContext';
+import type { BacktestResultRecord } from '../../utils/backendApi';
+import {
+  estimateCagr,
+  buildMonthlyMatrix,
+  buildYtdByYear,
+  buildReturnDistribution,
+  buildHoldingPoints,
+  buildAllocationSlices,
+  buildVolatilitySeries,
+  drawdownSeries,
+} from '../../utils/analysisReportMetrics';
+import { repairUtf8Mojibake } from '../../utils/textEncoding';
+
+/* ── 포맷 유틸 ── */
+const pct   = (v: number, dec = 2) => `${v >= 0 ? '+' : ''}${(v * 100).toFixed(dec)}%`;
+const pctAbs= (v: number, dec = 1) => `${(v * 100).toFixed(dec)}%`;
+const num   = (v: number, dec = 2) => (isFinite(v) ? v.toFixed(dec) : '—');
+const wonFmt= (v: number) => {
+  const abs = Math.abs(v);
+  const sign = v < 0 ? '-' : v > 0 ? '+' : '';
+  if (abs >= 1e8) return `${sign}${(abs / 1e8).toFixed(1)}억`;
+  if (abs >= 1e4) return `${sign}${(abs / 1e4).toFixed(0)}만`;
+  return `${sign}${abs.toLocaleString('ko-KR')}원`;
+};
+const colorCls = (v: number) => (v > 0 ? 'up' : v < 0 ? 'down' : '');
+
+interface Props {
+  typeId: AnalysisReportTypeId;
+  ctx: AnalysisReportContext | null;
+  theme: Theme;
+  compareBacktest?: BacktestResultRecord | null;
+  /** 현재 사용 안 함 — AnalysisReportPage 호환용 */
+  allBacktests?: BacktestResultRecord[];
+  compareLive?: unknown;
+}
+
+/* ── 공통 유틸 ── */
+function fmtDateTime(ts: number) {
+  const d = new Date(ts * 1000);
+  return `${d.getFullYear().toString().slice(2)}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+function fmtDuration(sec: number) {
+  if (sec < 3600) return `${Math.round(sec / 60)}m`;
+  const h = Math.floor(sec / 3600);
+  const m = Math.round((sec % 3600) / 60);
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+
+/* ── SVG 스파크 라인 ── */
+function SparkLine({
+  values,
+  w = 400,
+  h = 100,
+  positive = true,
+  fill = true,
+}: {
+  values: number[];
+  w?: number;
+  h?: number;
+  positive?: boolean;
+  fill?: boolean;
+}) {
+  const path = useMemo(() => {
+    if (values.length < 2) return { line: '', area: '' };
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    const range = hi - lo || 1;
+    const pts = values.map((v, i) => {
+      const x = (i / (values.length - 1)) * w;
+      const y = h - 8 - ((v - lo) / range) * (h - 16);
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    });
+    const line = pts.join(' ');
+    const area = `${line} L${w},${h} L0,${h} Z`;
+    return { line, area };
+  }, [values, w, h]);
+
+  const stroke = positive ? '#00e5ff' : '#ff1744';
+  const fillId = `sf${positive ? 'c' : 'r'}`;
+
+  return (
+    <svg className="qcc-spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
+      <defs>
+        <linearGradient id={fillId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={stroke} stopOpacity="0.4" />
+          <stop offset="100%" stopColor={stroke} stopOpacity="0.02" />
+        </linearGradient>
+      </defs>
+      {fill && <path d={path.area} fill={`url(#${fillId})`} />}
+      <path d={path.line} fill="none" stroke={stroke} strokeWidth="2" />
+    </svg>
+  );
+}
+
+/* ── 도넛 차트 ── */
+function DonutChart({
+  slices,
+  centerLabel,
+  centerValue,
+}: {
+  slices: { pct: number; color: string }[];
+  centerLabel: string;
+  centerValue: string;
+}) {
+  const r = 70;
+  const c = 2 * Math.PI * r;
+  let acc = 0;
+  const total = slices.reduce((s, x) => s + x.pct, 0) || 1;
+
+  return (
+    <svg viewBox="0 0 180 180" className="qcc-donut-svg">
+      {slices.map((sl, i) => {
+        const dash = (sl.pct / total) * c;
+        const offset = c * 0.25 - acc;
+        acc += dash;
+        return (
+          <circle
+            key={i}
+            cx="90" cy="90" r={r}
+            fill="none"
+            stroke={sl.color}
+            strokeWidth="20"
+            strokeDasharray={`${dash.toFixed(1)} ${(c - dash).toFixed(1)}`}
+            strokeDashoffset={offset.toFixed(1)}
+          />
+        );
+      })}
+      <text x="90" y="85" textAnchor="middle" fontSize="11" fill="var(--se-text-muted)">{centerLabel}</text>
+      <text x="90" y="103" textAnchor="middle" fontSize="13" fontWeight="700" fill="#00e5ff">{centerValue}</text>
+    </svg>
+  );
+}
+
+/* ── VaR 반원 게이지 ── */
+function VarGauge({ varPct }: { varPct: number }) {
+  const abs = Math.abs(varPct) * 100;
+  const degree = Math.min(180, abs * 9); // 0~20% → 0~180도
+  const rad = ((degree - 180) * Math.PI) / 180;
+  const x = 90 + 70 * Math.cos(rad);
+  const y = 90 + 70 * Math.sin(rad);
+
+  return (
+    <svg viewBox="0 0 180 100" className="qcc-var-svg">
+      <defs>
+        <linearGradient id="varGrad" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stopColor="#00e5ff" />
+          <stop offset="50%" stopColor="#ffd700" />
+          <stop offset="100%" stopColor="#ff1744" />
+        </linearGradient>
+      </defs>
+      <path d="M10,90 A80,80 0 0,1 170,90" fill="none" stroke="#1e2a3a" strokeWidth="18" />
+      <path d="M10,90 A80,80 0 0,1 170,90" fill="none" stroke="url(#varGrad)" strokeWidth="18" opacity="0.35" />
+      <circle cx={x.toFixed(1)} cy={y.toFixed(1)} r="6" fill="#fff" />
+      <text x="15" y="100" fontSize="9" fill="#00e5ff">Low Risk</text>
+      <text x="135" y="100" fontSize="9" fill="#ff1744">High Risk</text>
+      <text x="90" y="80" textAnchor="middle" fontSize="12" fontWeight="700" fill="#ffd700">
+        VaR: {abs.toFixed(2)}%
+      </text>
+    </svg>
+  );
+}
+
+/* ── 원형 게이지 (Efficiency) ── */
+function CircularGauge({ value, label, max = 100 }: { value: number; label: string; max?: number }) {
+  const r = 60;
+  const c = 2 * Math.PI * r;
+  const pct2 = Math.min(1, Math.max(0, value / max));
+  const dash = pct2 * c;
+  const color = value >= max * 0.9 ? '#ffd700' : value >= max * 0.5 ? '#00e676' : '#ff1744';
+
+  return (
+    <svg viewBox="0 0 160 160" className="qcc-gauge-svg">
+      <circle cx="80" cy="80" r={r} fill="none" stroke="#1e2a3a" strokeWidth="14" />
+      <circle
+        cx="80" cy="80" r={r}
+        fill="none"
+        stroke={color}
+        strokeWidth="14"
+        strokeDasharray={`${dash.toFixed(1)} ${(c - dash).toFixed(1)}`}
+        strokeDashoffset={(c * 0.25).toFixed(1)}
+        strokeLinecap="round"
+        style={{ filter: `drop-shadow(0 0 8px ${color})` }}
+      />
+      <text x="80" y="74" textAnchor="middle" fontSize="22" fontWeight="900" fill={color}>
+        {value >= 99 ? '99+' : value.toFixed(value >= 10 ? 2 : 2)}
+      </text>
+      <text x="80" y="93" textAnchor="middle" fontSize="11" fill="var(--se-text-muted)">{label}</text>
+    </svg>
+  );
+}
+
+/* ── 산포도 (Timing) ── */
+function ScatterPlot({ points }: { points: { x: number; y: number; label?: string }[] }) {
+  if (points.length === 0) {
+    return <div className="qcc-empty">보유시간 데이터 없음</div>;
+  }
+  const maxX = Math.max(...points.map(p => p.x), 120);
+  const maxY = Math.max(...points.map(p => p.y), 10);
+  const W = 400; const H = 220;
+  const pad = { l: 36, r: 12, t: 12, b: 28 };
+  const xScale = (v: number) => pad.l + (v / maxX) * (W - pad.l - pad.r);
+  const yScale = (v: number) => H - pad.b - (v / maxY) * (H - pad.t - pad.b);
+
+  const xTicks = [0, 15, 30, 45, 60, 80, 100, 120].filter(v => v <= maxX);
+  const yTicks = [0, 50, 100, 150, 200].filter(v => v <= maxY);
+
+  return (
+    <svg viewBox={`0 0 ${W} ${H}`} className="qcc-scatter">
+      {/* 그리드 */}
+      {xTicks.map(v => (
+        <g key={v}>
+          <line x1={xScale(v)} y1={pad.t} x2={xScale(v)} y2={H - pad.b} stroke="rgba(255,255,255,0.05)" />
+          <text x={xScale(v)} y={H - 4} textAnchor="middle" fontSize="8" fill="#556">{v}</text>
+        </g>
+      ))}
+      {yTicks.map(v => (
+        <g key={v}>
+          <line x1={pad.l} y1={yScale(v)} x2={W - pad.r} y2={yScale(v)} stroke="rgba(255,255,255,0.05)" />
+          <text x={pad.l - 4} y={yScale(v) + 3} textAnchor="end" fontSize="8" fill="#556">{v}%</text>
+        </g>
+      ))}
+      {/* 축 */}
+      <line x1={pad.l} y1={pad.t} x2={pad.l} y2={H - pad.b} stroke="#334" />
+      <line x1={pad.l} y1={H - pad.b} x2={W - pad.r} y2={H - pad.b} stroke="#334" />
+      {/* 점 */}
+      {points.map((p, i) => (
+        <circle key={i} cx={xScale(p.x)} cy={yScale(Math.min(p.y, maxY))}
+          r="4" fill="#00e676" opacity="0.75" />
+      ))}
+      {/* 축 레이블 */}
+      <text x={(W + pad.l) / 2} y={H} textAnchor="middle" fontSize="8.5" fill="#778">
+        Holding Duration (Minutes/Hours)
+      </text>
+      <text x={8} y={H / 2} textAnchor="middle" fontSize="8.5" fill="#778"
+        transform={`rotate(-90,8,${H / 2})`}>P&L (%)</text>
+    </svg>
+  );
+}
+
+/* ── 뷰 쉘 ── */
+function ViewShell({
+  ctx,
+  typeId,
+  children,
+}: {
+  ctx: AnalysisReportContext | null;
+  typeId: AnalysisReportTypeId;
+  children: React.ReactNode;
+}) {
+  const def = getReportType(typeId);
+  if (!ctx) {
+    return (
+      <div className="qcc-empty-page">
+        <span>📊</span>
+        <p>좌측 목록에서 백테스팅 또는 실시간 투자 실행을 선택하세요.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="qcc-view">
+      <div className="qcc-view-meta">
+        <span className="qcc-badge">{ctx.symbol}</span>
+        <span className="qcc-badge">{ctx.timeframe}</span>
+        <span className="qcc-badge qcc-badge--muted">{ctx.sourceTab === 'backtest' ? '백테스팅' : '실시간'}</span>
+        <span className="qcc-badge qcc-badge--strategy">{repairUtf8Mojibake(ctx.strategyName)}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   01 Standard — Assets & P&L + 3 Hero KPIs + Growth Chart
+   ══════════════════════════════════════════════════════════ */
+function StandardView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const cagr = a ? estimateCagr(a.totalReturnPct, ctx.signals) : 0;
+  const equityVals = ctx.equityCurve.map(p => p.equity);
+  const up = (a?.totalReturnPct ?? 0) >= 0;
+
+  return (
+    <div className="qcc-standard">
+      {/* 좌측: Assets & P&L Summary */}
+      <div className="qcc-panel qcc-panel--gold qcc-standard-left">
+        <div className="qcc-panel-title">Assets &amp; P&amp;L Summary</div>
+        <div className="qcc-summary-rows">
+          <div className="qcc-summary-row">
+            <span>Total Trades</span>
+            <strong>{a?.numberOfPositions ?? '—'}</strong>
+          </div>
+          <div className="qcc-summary-row">
+            <span>Win Rate</span>
+            <strong className={colorCls((a?.winRate ?? 0) - 0.5)}>{pctAbs(a?.winRate ?? 0)}</strong>
+          </div>
+          <div className="qcc-summary-row">
+            <span>Profit Factor</span>
+            <strong className={colorCls((a?.profitLossRatio ?? 0) - 1)}>{num(a?.profitLossRatio ?? 0)}</strong>
+          </div>
+          <div className="qcc-summary-row">
+            <span>Average P&amp;L</span>
+            <strong className={colorCls(a?.avgReturnPct ?? 0)}>{pct(a?.avgReturnPct ?? 0)}</strong>
+          </div>
+          <div className="qcc-summary-divider" />
+          <div className="qcc-summary-row">
+            <span>Gross Profit</span>
+            <strong className="up">{wonFmt(a?.grossProfit ?? 0)}</strong>
+          </div>
+          <div className="qcc-summary-row">
+            <span>Gross Loss</span>
+            <strong className="down">{wonFmt(a?.grossLoss ?? 0)}</strong>
+          </div>
+          <div className="qcc-summary-row">
+            <span>Net P&amp;L</span>
+            <strong className={colorCls(a?.totalProfitLoss ?? 0)}>{wonFmt(a?.totalProfitLoss ?? 0)}</strong>
+          </div>
+        </div>
+      </div>
+
+      {/* 우측: 3 Hero KPIs + Growth Chart */}
+      <div className="qcc-standard-right">
+        <div className="qcc-hero-row">
+          {/* Total ROI */}
+          <div className={`qcc-hero qcc-hero--roi qcc-hero--${up ? 'up' : 'down'}`}>
+            <div className="qcc-hero-label">Total ROI</div>
+            <div className="qcc-hero-value">{pct(a?.totalReturnPct ?? 0)}</div>
+            <div className="qcc-hero-sub">(CAGR: {pct(cagr)})</div>
+            <SparkLine values={equityVals.length >= 2 ? equityVals : [0, 1]} h={40} positive={up} />
+          </div>
+          {/* MDD */}
+          <div className="qcc-hero qcc-hero--mdd">
+            <div className="qcc-hero-label">Max Drawdown (MDD)</div>
+            <div className={`qcc-hero-value ${(a?.maxDrawdownPct ?? 0) < 0 ? 'down' : ''}`}>
+              {pct(a?.maxDrawdownPct ?? 0)}
+            </div>
+            <div className="qcc-hero-sub-line" />
+          </div>
+          {/* Sharpe */}
+          <div className="qcc-hero qcc-hero--sharpe">
+            <div className="qcc-hero-label">Sharpe Ratio</div>
+            <div className="qcc-hero-value qcc-hero-gold">{num(a?.sharpeRatio ?? 0, 2)}</div>
+            <SparkLine values={equityVals.length >= 2 ? equityVals : [0, 1]} h={36} fill={false} />
+          </div>
+        </div>
+
+        {/* Assets Growth Chart */}
+        <div className="qcc-panel qcc-panel--neutral qcc-growth-panel">
+          <div className="qcc-panel-title">Assets Growth Chart</div>
+          <div className="qcc-growth-chart-wrap">
+            <SparkLine values={equityVals.length >= 2 ? equityVals : [0, 1]} h={200} positive={up} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   02 Risk — Drawdown Depth + Volatility + VaR Gauge
+   ══════════════════════════════════════════════════════════ */
+function RiskView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const dd = useMemo(() => drawdownSeries(ctx.equityCurve), [ctx.equityCurve]);
+  const vol = useMemo(() => buildVolatilitySeries(ctx.equityCurve), [ctx.equityCurve]);
+  const ddVals = dd.map(d => d.ddPct * 100);
+  const volVals = vol.map(v => v.vol);
+  const mdd = a?.maxDrawdownPct ?? 0;
+
+  return (
+    <div className="qcc-risk">
+      <div className="qcc-panel qcc-panel--cyan qcc-risk-left">
+        <div className="qcc-panel-title">Stress-Testing Capital Preservation</div>
+        <ul className="qcc-risk-bullets">
+          <li>
+            <strong>Capital Drawdown (Underwater Curve):</strong> Peak-to-trough declines evaluated across the backtest period.
+            Current MDD: <span className={mdd < 0 ? 'down' : ''}>{pct(mdd)}</span>.
+          </li>
+          <li>
+            <strong>Volatility Metrics:</strong> Annualized standard deviation of returns and Ulcer Index (depth and duration of drawdowns).
+          </li>
+          <li>
+            <strong>Value at Risk (VaR - 95%):</strong> Maximum expected loss over a specific timeframe at a 95% confidence interval.
+          </li>
+        </ul>
+      </div>
+      <div className="qcc-risk-right">
+        <div className="qcc-panel qcc-panel--neutral">
+          <div className="qcc-panel-title">Drawdown Depth <span className="qcc-panel-sub">Current MDD: {pct(mdd)}</span></div>
+          <div className="qcc-chart-wrap">
+            <SparkLine values={ddVals.length >= 2 ? ddVals : [0, -0.01]} h={160} positive={false} />
+          </div>
+        </div>
+        <div className="qcc-risk-bottom">
+          <div className="qcc-panel qcc-panel--neutral">
+            <div className="qcc-panel-title">Volatility Index</div>
+            <div className="qcc-chart-wrap">
+              <SparkLine values={volVals.length >= 2 ? volVals : [0.5, 0.5, 0.5]} h={100} positive={true} fill={false} />
+            </div>
+            <div className="qcc-vol-label">Low Volatility Channel</div>
+          </div>
+          <div className="qcc-panel qcc-panel--neutral">
+            <div className="qcc-panel-title">Value at Risk (VaR – 95%)</div>
+            <VarGauge varPct={a?.valueAtRisk95 ?? 0.0001} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   03 Efficiency — Profit Factor Gauge + Win Rate + Avg Win/Loss
+   ══════════════════════════════════════════════════════════ */
+function EfficiencyView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const pf = a?.profitLossRatio ?? 0;
+  const wr = (a?.winRate ?? 0) * 100;
+  const avgWin = a ? (a.grossProfit / (a.numberOfWinning || 1)) / (a.initialCapital || 1) * 100 : 0;
+  const avgLoss = a ? Math.abs(a.grossLoss / (a.numberOfLosing || 1)) / (a.initialCapital || 1) * 100 : 0;
+  const maxBar = Math.max(avgWin, avgLoss, 0.1);
+
+  return (
+    <div className="qcc-efficiency">
+      <div className="qcc-panel qcc-panel--gold qcc-efficiency-left">
+        <div className="qcc-panel-title">Execution Quality and Profit Extraction</div>
+        <div className="qcc-eff-desc">
+          <p><strong>Profit Factor [{pf >= 99 ? '99.00' : pf.toFixed(2)}]:</strong> Gross Profit / Gross Loss. {pf >= 10 ? 'An extreme metric indicating near-perfect trade filtering.' : 'Measures overall profitability efficiency.'}</p>
+          <p><strong>Win Rate [{pctAbs(a?.winRate ?? 0)}]:</strong> Profitable Trades / Total Trades ({a?.numberOfWinning ?? 0} consecutive wins).</p>
+          <p><strong>Average Profit vs. Average Loss:</strong> Avg P&amp;L stands at {pct(a?.avgReturnPct ?? 0)} {(a?.numberOfLosing ?? 0) === 0 ? 'with zero losing trades executed.' : '.'}</p>
+        </div>
+      </div>
+      <div className="qcc-efficiency-right">
+        <div className="qcc-eff-center">
+          <CircularGauge value={Math.min(pf, 99)} label="Profit Factor" max={99} />
+          <div className="qcc-winrate-bar-wrap">
+            <div className="qcc-winrate-bar" style={{ width: `${wr}%` }} />
+            <div className="qcc-winrate-label">Win Rate {wr.toFixed(1)}%</div>
+          </div>
+        </div>
+        <div className="qcc-eff-bars">
+          <div className="qcc-eff-bar-item">
+            <div className="qcc-eff-bar-label up">+{avgWin.toFixed(2)}%<br /><span>Avg Win</span></div>
+            <div className="qcc-eff-bar-track">
+              <div className="qcc-eff-bar-fill up" style={{ height: `${(avgWin / maxBar) * 90}%` }} />
+            </div>
+          </div>
+          <div className="qcc-eff-bar-item">
+            <div className="qcc-eff-bar-label down">{avgLoss > 0 ? `-${avgLoss.toFixed(2)}%` : '0.00%'}<br /><span>Avg Loss</span></div>
+            <div className="qcc-eff-bar-track">
+              <div className="qcc-eff-bar-fill down" style={{ height: `${(avgLoss / maxBar) * 90}%` }} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   04 Temporal — Seasonality Monthly Matrix
+   ══════════════════════════════════════════════════════════ */
+const MON_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function TemporalView({ ctx }: { ctx: AnalysisReportContext }) {
+  const monthly = useMemo(() => buildMonthlyMatrix(ctx.trades), [ctx.trades]);
+  const ytdMap  = useMemo(() => buildYtdByYear(monthly), [monthly]);
+  const years   = useMemo(() => [...new Set(monthly.map(r => r.year))].sort(), [monthly]);
+  const map = useMemo(() => new Map(monthly.map(r => [`${r.year}-${r.month}`, r.returnPct])), [monthly]);
+
+  if (years.length === 0) {
+    return <div className="qcc-empty-page"><span>📅</span><p>거래 데이터가 부족합니다.</p></div>;
+  }
+
+  return (
+    <div className="qcc-temporal">
+      <div className="qcc-temporal-header">
+        <h2 className="qcc-section-title">Seasonality and Time-Based Consistency</h2>
+        <p className="qcc-section-sub">Monthly &amp; Yearly Performance Matrix: Verifying that the algorithm generates consistent alpha regardless of specific macro-market phases.</p>
+      </div>
+      <div className="qcc-temporal-table-wrap">
+        <table className="qcc-temporal-table">
+          <thead>
+            <tr>
+              <th />
+              {MON_LABELS.map(m => <th key={m}>{m}</th>)}
+              <th className="qcc-ytd-col">YTD</th>
+            </tr>
+          </thead>
+          <tbody>
+            {years.map(year => {
+              const ytd = ytdMap.get(year) ?? 0;
+              return (
+                <tr key={year}>
+                  <td className="qcc-year-cell">{year}</td>
+                  {MON_LABELS.map((_, mi) => {
+                    const v = map.get(`${year}-${mi}`);
+                    const intensity = v != null ? Math.min(1, Math.abs(v) * 8) : 0;
+                    const bg = v == null
+                      ? 'transparent'
+                      : v > 0
+                        ? `rgba(0,230,118,${0.15 + intensity * 0.65})`
+                        : v < 0
+                          ? `rgba(255,23,68,${0.15 + intensity * 0.65})`
+                          : 'rgba(60,70,90,0.3)';
+                    return (
+                      <td key={mi} style={{ background: bg }} className="qcc-month-cell">
+                        {v != null ? pct(v, 2) : <span className="qcc-zero">0.00%</span>}
+                      </td>
+                    );
+                  })}
+                  <td className={`qcc-ytd-col ${colorCls(ytd)}`}>{pct(ytd, 2)}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   05 Logs — Granular Trade Log (Entry+Exit Price, Duration)
+   ══════════════════════════════════════════════════════════ */
+interface TradeLogFull {
+  id: number;
+  dateTime: string;
+  symbol: string;
+  side: string;
+  entryPrice: number;
+  exitPrice: number;
+  qty: number;
+  pnlPct: number;
+  durationSec: number;
+}
+
+function buildFullLogRows(ctx: AnalysisReportContext): TradeLogFull[] {
+  if (ctx.sourceTab === 'live' && ctx.paperTrades.length > 0) {
+    return ctx.paperTrades.map((t, i) => {
+      const ts = t.createdAt ? Math.floor(new Date(t.createdAt).getTime() / 1000) : 0;
+      return {
+        id: t.id ?? i,
+        dateTime: ts ? fmtDateTime(ts) : '—',
+        symbol: t.symbol,
+        side: t.side,
+        entryPrice: t.side === 'SELL' ? t.price : t.price * 0.99,
+        exitPrice: t.price,
+        qty: t.quantity,
+        pnlPct: t.realizedPnlDelta != null ? t.realizedPnlDelta / (t.price * t.quantity || 1) * 100 : 0,
+        durationSec: 0,
+      };
+    });
+  }
+
+  const buys = new Map<string, { time: number; price: number; qty: number }>();
+  const rows: TradeLogFull[] = [];
+  const sorted = [...ctx.trades].sort((a, b) => a.time - b.time);
+  for (const t of sorted) {
+    if (t.side === 'buy') {
+      buys.set(t.symbol, { time: t.time, price: t.price, qty: t.quantity });
+    } else {
+      const buy = buys.get(t.symbol);
+      const entry = buy?.price ?? t.price;
+      const dur = buy ? t.time - buy.time : 0;
+      rows.push({
+        id: t.id,
+        dateTime: fmtDateTime(t.time),
+        symbol: t.symbol,
+        side: 'BUY/SELL',
+        entryPrice: entry,
+        exitPrice: t.price,
+        qty: t.quantity,
+        pnlPct: (t.pnlPct ?? 0) * 100,
+        durationSec: dur,
+      });
+      buys.delete(t.symbol);
+    }
+  }
+  return rows;
+}
+
+function LogsView({ ctx }: { ctx: AnalysisReportContext }) {
+  const rows = useMemo(() => buildFullLogRows(ctx), [ctx]);
+
+  return (
+    <div className="qcc-logs">
+      <h2 className="qcc-section-title">Granular Transparency for Every Execution</h2>
+      <p className="qcc-section-sub">Data derived from the GoldenChart execution feed (100ms latency WebSocket).</p>
+      <div className="qcc-logs-table-wrap">
+        <table className="qcc-logs-table">
+          <thead>
+            <tr>
+              <th>Date &amp; Time</th>
+              <th>Symbol</th>
+              <th>Side</th>
+              <th>Entry Price</th>
+              <th>Exit Price</th>
+              <th>Qty</th>
+              <th>P&amp;L (%)</th>
+              <th>Duration</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 ? (
+              <tr><td colSpan={8} className="qcc-empty-cell">거래 내역 없음</td></tr>
+            ) : rows.map(r => (
+              <tr key={r.id} className={r.pnlPct > 0 ? 'qcc-row--up' : r.pnlPct < 0 ? 'qcc-row--down' : ''}>
+                <td>{r.dateTime}</td>
+                <td className="qcc-sym">{r.symbol.replace('KRW-', 'KRW-')}</td>
+                <td className="qcc-side">{r.side}</td>
+                <td className="qcc-num">{r.entryPrice.toLocaleString('ko-KR')}</td>
+                <td className="qcc-num">{r.exitPrice.toLocaleString('ko-KR')}</td>
+                <td className="qcc-num">{r.qty.toFixed(3)}</td>
+                <td className={r.pnlPct >= 0 ? 'up' : 'down'}>{r.pnlPct >= 0 ? '+' : ''}{r.pnlPct.toFixed(1)}%</td>
+                <td className="qcc-dur">{r.durationSec > 0 ? fmtDuration(r.durationSec) : '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   06 Allocation — Donut + Legend Table
+   ══════════════════════════════════════════════════════════ */
+function AllocationView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const slices = useMemo(
+    () => buildAllocationSlices(ctx.trades, a?.initialCapital ?? 10_000_000),
+    [ctx.trades, a],
+  );
+  const totalCapital = a?.initialCapital ?? 10_000_000;
+
+  return (
+    <div className="qcc-allocation">
+      <div className="qcc-alloc-left">
+        <h2 className="qcc-section-title">Capital Distribution<br />and Asset Weights</h2>
+        <p className="qcc-section-sub">
+          Dynamic Capital Allocation: Visualizing the distribution of the initial simulated capital across different cryptocurrency pairs during the backtest.
+        </p>
+        <p className="qcc-section-sub" style={{ marginTop: 8 }}>
+          Exposure Analysis: Validating risk distribution across multiple assets in accordance with the CAPITAL_PCT engine settings.
+        </p>
+        <div className="qcc-alloc-legend">
+          {slices.map(sl => (
+            <div key={sl.symbol} className="qcc-alloc-row">
+              <span className="qcc-alloc-dot" style={{ background: sl.color }} />
+              <span className="qcc-alloc-sym">{sl.symbol.replace('KRW-', 'KRW-')}</span>
+              <span className="qcc-alloc-pct">{(sl.pct * 100).toFixed(2)}%</span>
+              <span className="qcc-alloc-krw">₩{Math.round(sl.capitalKrw).toLocaleString('ko-KR')}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="qcc-alloc-right">
+        <DonutChart
+          slices={slices.map(sl => ({ pct: sl.pct * 100, color: sl.color }))}
+          centerLabel="Total Capital Deployed"
+          centerValue={`₩${Math.round(totalCapital / 1e8).toLocaleString()}억`}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   07 Stats — Return Distribution Histogram
+   ══════════════════════════════════════════════════════════ */
+function StatsView({ ctx }: { ctx: AnalysisReportContext }) {
+  const buckets = useMemo(() => buildReturnDistribution(ctx.trades), [ctx.trades]);
+  const maxCount = Math.max(...buckets.map(b => b.count), 1);
+
+  const W = 500; const H = 240;
+  const pad = { l: 36, r: 20, t: 20, b: 32 };
+  const bw = buckets.length > 0 ? (W - pad.l - pad.r) / buckets.length - 2 : 0;
+
+  return (
+    <div className="qcc-stats">
+      <div className="qcc-panel qcc-panel--cyan qcc-stats-left">
+        <div className="qcc-panel-title">The Shape of Returns: Statistical Distribution</div>
+        <ul className="qcc-risk-bullets">
+          <li><strong>Right Tail:</strong> Outlier massive wins — extreme positive P&L executions.</li>
+          <li><strong>Center Mass:</strong> The bulk of standard, high-probability trades falling in the +1% to +6% range.</li>
+          <li><strong>Left Tail:</strong> Frequency and severity of losing trades.</li>
+        </ul>
+        <div className="qcc-stats-summary">
+          {buckets.filter(b => b.count > 0).slice(0, 5).map(b => (
+            <div key={b.bucket} className="qcc-stats-row">
+              <span>{b.bucket}</span>
+              <strong>{b.count}</strong>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="qcc-stats-chart">
+        {buckets.length === 0 ? (
+          <div className="qcc-empty">거래 분포 데이터 없음</div>
+        ) : (
+          <svg viewBox={`0 0 ${W} ${H}`} className="qcc-hist-svg">
+            {/* 그리드 */}
+            {[0, 25, 50, 75, 100].map(p => {
+              const y = H - pad.b - (p / 100) * (H - pad.t - pad.b);
+              return <line key={p} x1={pad.l} y1={y} x2={W - pad.r} y2={y} stroke="rgba(255,255,255,0.05)" />;
+            })}
+            {/* 막대 */}
+            {buckets.map((b, i) => {
+              const barH = (b.count / maxCount) * (H - pad.t - pad.b);
+              const x = pad.l + i * ((W - pad.l - pad.r) / buckets.length);
+              const isExtreme = b.from >= 100;
+              const fill = isExtreme ? '#ffd700' : b.from >= 0 ? '#00e676' : '#ff1744';
+              return (
+                <g key={b.bucket}>
+                  <rect
+                    x={x + 1} y={H - pad.b - barH}
+                    width={bw} height={barH}
+                    fill={fill} opacity="0.85"
+                  />
+                  {b.count > 0 && (
+                    <text x={x + bw / 2} y={H - pad.b - barH - 4}
+                      textAnchor="middle" fontSize="8" fill={fill}>{b.count}</text>
+                  )}
+                  {isExtreme && b.count > 0 && (
+                    <text x={x + bw / 2} y={H - pad.b - barH - 14}
+                      textAnchor="middle" fontSize="9" fill="#ffd700">+{b.from}%</text>
+                  )}
+                  <text x={x + bw / 2} y={H - 4}
+                    textAnchor="middle" fontSize="7" fill="#556">{b.bucket.replace('%', '')}</text>
+                </g>
+              );
+            })}
+            {/* Y축 */}
+            {[0, 25, 50, 75, 100].map(p => {
+              const cnt = Math.round((p / 100) * maxCount);
+              const y = H - pad.b - (p / 100) * (H - pad.t - pad.b);
+              return <text key={p} x={pad.l - 4} y={y + 3} textAnchor="end" fontSize="8" fill="#556">{cnt}</text>;
+            })}
+            {/* 종 곡선 (정규분포 근사) */}
+            {buckets.length >= 3 && (() => {
+              const pts = buckets.map((_, i) => {
+                const x = pad.l + (i + 0.5) * ((W - pad.l - pad.r) / buckets.length);
+                const normI = (i - buckets.length / 2) / (buckets.length / 4);
+                const bell = Math.exp(-0.5 * normI * normI) * 0.9;
+                const y = H - pad.b - bell * (H - pad.t - pad.b);
+                return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+              });
+              return <path d={pts.join(' ')} fill="none" stroke="#00e5ff" strokeWidth="2" opacity="0.6" />;
+            })()}
+            <text x={(W + pad.l) / 2} y={H} textAnchor="middle" fontSize="9" fill="#778">Return % Buckets</text>
+            <text x={10} y={H / 2} textAnchor="middle" fontSize="9" fill="#778"
+              transform={`rotate(-90,10,${H / 2})`}>Frequency</text>
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   08 AI Feedback — LLM Terminal Output
+   ══════════════════════════════════════════════════════════ */
+function AiFeedbackView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const mdd = a?.maxDrawdownPct ?? 0;
+  const sharpe = a?.sharpeRatio ?? 0;
+  const pf = a?.profitLossRatio ?? 0;
+  const wr = a?.winRate ?? 0;
+
+  const lines: { key: string; label: string; text: string }[] = [
+    {
+      key: 'market',
+      label: 'Market Context',
+      text: sharpe > 1
+        ? `Strategy performed optimally during the backtest period. Sharpe ratio of ${sharpe.toFixed(2)} confirms risk-adjusted alpha generation with ${pctAbs(wr)} win rate.`
+        : `Strategy shows moderate performance. Win rate of ${pctAbs(wr)} with Sharpe ${sharpe.toFixed(2)} suggests potential for parameter optimization.`,
+    },
+    {
+      key: 'indicator',
+      label: 'Indicator Interpretation',
+      text: pf > 2
+        ? `Profit Factor of ${pf.toFixed(2)} indicates highly efficient trade filtering. Gross profit significantly exceeds gross loss, validating the entry/exit logic.`
+        : `Profit Factor of ${pf.toFixed(2)} is ${pf >= 1 ? 'profitable but moderate' : 'below breakeven'}. Review entry conditions to improve signal quality.`,
+    },
+    {
+      key: 'weakness',
+      label: 'Weakness Detection',
+      text: Math.abs(mdd) > 0.1
+        ? `MDD of ${pct(mdd)} suggests significant drawdown exposure. Consider adding an ATR-based trailing stop or reducing position sizing during volatile periods.`
+        : `Maximum drawdown remains controlled at ${pct(mdd)}. Current risk management parameters appear well-calibrated for the tested market conditions.`,
+    },
+  ];
+
+  return (
+    <div className="qcc-ai">
+      <div className="qcc-panel qcc-panel--gold qcc-ai-panel">
+        <div className="qcc-ai-header">
+          <div>
+            <h2 className="qcc-section-title" style={{ color: '#ffd700' }}>Qualitative Insights via Local LLM (qwen3:4b)</h2>
+            <p className="qcc-section-sub">Powered by <span className="qcc-ai-hl">LangGraph strategy_tool</span> and <span className="qcc-ai-hl">backtest_tool</span> orchestration.</p>
+          </div>
+          <div className="qcc-ai-icon">
+            <svg viewBox="0 0 60 60" width="52" height="52" fill="none" stroke="#00e5ff" strokeWidth="1.5">
+              <circle cx="10" cy="10" r="6" /><circle cx="50" cy="10" r="6" />
+              <circle cx="10" cy="50" r="6" /><circle cx="50" cy="50" r="6" />
+              <circle cx="30" cy="30" r="7" />
+              <line x1="16" y1="10" x2="44" y2="10" /><line x1="10" y1="16" x2="10" y2="44" />
+              <line x1="16" y1="50" x2="44" y2="50" /><line x1="50" y1="16" x2="50" y2="44" />
+              <line x1="16" y1="16" x2="24" y2="24" /><line x1="44" y1="16" x2="36" y2="24" />
+              <line x1="16" y1="44" x2="24" y2="36" /><line x1="44" y1="44" x2="36" y2="36" />
+            </svg>
+          </div>
+        </div>
+        <div className="qcc-ai-terminal">
+          {lines.map(l => (
+            <div key={l.key} className="qcc-ai-line">
+              <span className="qcc-ai-prompt">&gt;</span>
+              <span className="qcc-ai-label"> {l.label}: </span>
+              <span className="qcc-ai-text">{l.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   09 Comparative — Strategy vs. Buy & Hold
+   ══════════════════════════════════════════════════════════ */
+function ComparativeView({ ctx }: { ctx: AnalysisReportContext }) {
+  const a = ctx.analysis;
+  const stratVals = ctx.equityCurve.map(p => p.equity);
+  const initial = a?.initialCapital ?? 10_000_000;
+
+  // Buy & Hold 시리즈 재구성 (첫 신호 진입가→마지막 신호 가격)
+  const benchVals = useMemo(() => {
+    const signals = ctx.signals;
+    if (signals.length < 2) return stratVals.map(() => initial);
+    const p0 = signals[0].price;
+    return ctx.equityCurve.map((_, i) => {
+      const s = signals[Math.min(i, signals.length - 1)];
+      return initial * (s.price / p0);
+    });
+  }, [ctx.signals, ctx.equityCurve, initial]);
+
+  const W = 600; const H = 300;
+  const pad = { l: 44, r: 80, t: 16, b: 28 };
+
+  const allVals = [...stratVals, ...benchVals];
+  const lo = Math.min(...allVals);
+  const hi = Math.max(...allVals);
+  const range = hi - lo || 1;
+  const xS = (i: number) => pad.l + (i / (stratVals.length - 1)) * (W - pad.l - pad.r);
+  const yS = (v: number) => H - pad.b - ((v - lo) / range) * (H - pad.t - pad.b);
+
+  const stratPath = stratVals.map((v, i) => `${i === 0 ? 'M' : 'L'}${xS(i).toFixed(1)},${yS(v).toFixed(1)}`).join(' ');
+  const benchPath = benchVals.map((v, i) => `${i === 0 ? 'M' : 'L'}${xS(i).toFixed(1)},${yS(v).toFixed(1)}`).join(' ');
+  const benchPct = a?.buyAndHoldReturnPct ?? (benchVals.length > 1 ? (benchVals[benchVals.length - 1] - initial) / initial : 0);
+  const stratRetFinal = a?.totalReturnPct ?? 0;
+
+  return (
+    <div className="qcc-comparative">
+      <div className="qcc-panel qcc-panel--cyan qcc-comp-header">
+        <h2 className="qcc-section-title">Strategy vs. Benchmark: Alpha Generation</h2>
+        <p className="qcc-section-sub">Relative Performance Analytics: Proving the value of active, algorithmically traded signals over passive market exposure.</p>
+      </div>
+      <div className="qcc-comp-chart-wrap qcc-panel qcc-panel--neutral">
+        <svg viewBox={`0 0 ${W} ${H}`} className="qcc-comp-svg">
+          {/* 그리드 */}
+          {[0, 25, 50, 75, 100].map(p => {
+            const v = lo + (p / 100) * range;
+            const y = yS(v);
+            const lbl = `${(((v - initial) / initial) * 100).toFixed(0)}%`;
+            return (
+              <g key={p}>
+                <line x1={pad.l} y1={y} x2={W - pad.r} y2={y} stroke="rgba(255,255,255,0.05)" />
+                <text x={pad.l - 4} y={y + 3} textAnchor="end" fontSize="8" fill="#556">{lbl}</text>
+              </g>
+            );
+          })}
+          {/* Bench area */}
+          <path d={`${benchPath} L${xS(benchVals.length - 1)},${H - pad.b} L${xS(0)},${H - pad.b} Z`}
+            fill="rgba(80,80,80,0.2)" />
+          <path d={benchPath} fill="none" stroke="#666" strokeWidth="1.5" strokeDasharray="4 3" />
+          {/* Strategy */}
+          <path
+            d={`${stratPath} L${xS(stratVals.length - 1)},${H - pad.b} L${xS(0)},${H - pad.b} Z`}
+            fill="rgba(0,230,118,0.08)" />
+          <path d={stratPath} fill="none" stroke="#00e676" strokeWidth="2.5"
+            style={{ filter: 'drop-shadow(0 0 4px #00e676)' }} />
+          {/* 우측 레이블 */}
+          <text x={W - pad.r + 6} y={yS(stratVals[stratVals.length - 1]) + 4} fontSize="9" fill="#00e676">
+            Return +{(stratRetFinal * 100).toFixed(0)}%
+          </text>
+          <text x={W - pad.r + 6} y={yS(stratVals[stratVals.length - 1]) + 16} fontSize="8" fill="#ff1744">
+            Max drawdown {pct(a?.maxDrawdownPct ?? 0)}
+          </text>
+          <text x={W - pad.r + 6} y={yS(stratVals[stratVals.length - 1]) + 28} fontSize="8" fill="#ffd700">
+            Sharpe {num(a?.sharpeRatio ?? 0)}
+          </text>
+          <text x={W - pad.r + 6} y={yS(benchVals[benchVals.length - 1]) + 4} fontSize="9" fill="#888">
+            Benchmark +{(benchPct * 100).toFixed(0)}%
+          </text>
+        </svg>
+        <div className="qcc-comp-legend">
+          <span className="qcc-comp-leg qcc-comp-leg--strat">━ GoldenChart Strategy</span>
+          <span className="qcc-comp-leg qcc-comp-leg--bench">┅ Buy &amp; Hold Benchmark</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   10 Timing — Holding Periods & Entry Precision Scatter
+   ══════════════════════════════════════════════════════════ */
+function TimingView({ ctx }: { ctx: AnalysisReportContext }) {
+  const pts = useMemo(
+    () => buildHoldingPoints(ctx.signals, ctx.symbol),
+    [ctx.signals, ctx.symbol],
+  );
+
+  return (
+    <div className="qcc-timing">
+      <div className="qcc-panel qcc-panel--gold qcc-timing-left">
+        <div className="qcc-panel-title">Holding Periods &amp; Entry Precision</div>
+        <div className="qcc-eff-desc">
+          <p>
+            <span className="qcc-ai-label">Time-Efficiency: </span>
+            Analyzing how long capital is locked up to generate returns, evaluating{' '}
+            <span className="qcc-ai-hl">AVERAGE_HOLDING_PERIOD</span> against the execution type.
+          </p>
+          <p>
+            <span className="qcc-ai-label">Cluster Analysis: </span>
+            High concentration of short-duration trades signifies highly efficient, surgical market entries.
+          </p>
+        </div>
+        {pts.length > 0 && (
+          <div className="qcc-timing-stats">
+            <div className="qcc-timing-stat">
+              <span>Avg Duration</span>
+              <strong>{fmtDuration(pts.reduce((s, p) => s + p.durationMin * 60, 0) / pts.length)}</strong>
+            </div>
+            <div className="qcc-timing-stat">
+              <span>Total Trades</span>
+              <strong>{pts.length}</strong>
+            </div>
+            <div className="qcc-timing-stat">
+              <span>Avg P&amp;L</span>
+              <strong className="up">+{(pts.reduce((s, p) => s + p.pnlPct, 0) / pts.length).toFixed(2)}%</strong>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="qcc-panel qcc-panel--neutral qcc-timing-right">
+        <ScatterPlot
+          points={pts.map(p => ({ x: Math.min(p.durationMin, 200), y: Math.abs(p.pnlPct) }))}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ══════════════════════════════════════════════════════════
+   메인 라우터
+   ══════════════════════════════════════════════════════════ */
+export default function AnalysisReportViews({ typeId, ctx, theme, compareBacktest }: Props) {
+  const body = useMemo(() => {
+    if (!ctx) return null;
+    switch (typeId) {
+      case 'standard':   return <StandardView ctx={ctx} />;
+      case 'risk':       return <RiskView ctx={ctx} />;
+      case 'efficiency': return <EfficiencyView ctx={ctx} />;
+      case 'temporal':   return <TemporalView ctx={ctx} />;
+      case 'logs':       return <LogsView ctx={ctx} />;
+      case 'allocation': return <AllocationView ctx={ctx} />;
+      case 'stats':      return <StatsView ctx={ctx} />;
+      case 'ai-feedback': return <AiFeedbackView ctx={ctx} />;
+      case 'comparative': return <ComparativeView ctx={ctx} />;
+      case 'timing':     return <TimingView ctx={ctx} />;
+      default:           return <StandardView ctx={ctx} />;
+    }
+  }, [typeId, ctx, theme]);
+
+  return (
+    <ViewShell typeId={typeId} ctx={ctx}>
+      {body}
+    </ViewShell>
+  );
+}
diff --git a/frontend/src/components/analysisReport/analysisReportUi.tsx b/frontend/src/components/analysisReport/analysisReportUi.tsx
new file mode 100644
index 0000000..eaf5b71
--- /dev/null
+++ b/frontend/src/components/analysisReport/analysisReportUi.tsx
@@ -0,0 +1,191 @@
+/**
+ * PDF TradingReport 공통 UI (글래스 패널·차트·히트맵)
+ */
+import React, { useMemo } from 'react';
+import { pct, pctAbs } from '../shared/analysisDashboardUi';
+
+export type PanelTone = 'gold' | 'cyan' | 'neutral';
+
+export function GlassPanel({
+  tone = 'gold',
+  title,
+  subtitle,
+  children,
+  className = '',
+}: {
+  tone?: PanelTone;
+  title?: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={`arp-panel arp-panel--${tone} ${className}`.trim()}>
+      {(title || subtitle) && (
+        <header className="arp-panel-head">
+          {title && <h3 className="arp-panel-title">{title}</h3>}
+          {subtitle && <p className="arp-panel-sub">{subtitle}</p>}
+        </header>
+      )}
+      <div className="arp-panel-body">{children}</div>
+    </section>
+  );
+}
+
+/** PDF Assets Growth — 영역 채우기 라인 */
+export function EquityGrowthChart({
+  values,
+  height = 140,
+  positive = true,
+}: {
+  values: number[];
+  height?: number;
+  positive?: boolean;
+}) {
+  const w = 400;
+  const path = useMemo(() => {
+    if (values.length < 2) return { line: '', area: '' };
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    const range = hi - lo || 1;
+    const pts = values.map((v, i) => {
+      const x = (i / (values.length - 1)) * w;
+      const y = height - 12 - ((v - lo) / range) * (height - 24);
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    });
+    const line = pts.join(' ');
+    const area = `${line} L ${w},${height} L 0,${height} Z`;
+    return { line, area };
+  }, [values, height]);
+
+  const stroke = positive ? '#00e5ff' : '#ff1744';
+  const fillId = positive ? 'arpEqCyan' : 'arpEqRed';
+
+  return (
+    <svg className="arp-equity-chart" viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none">
+      <defs>
+        <linearGradient id={fillId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={stroke} stopOpacity="0.45" />
+          <stop offset="100%" stopColor={stroke} stopOpacity="0.02" />
+        </linearGradient>
+      </defs>
+      <path d={path.area} fill={`url(#${fillId})`} />
+      <path d={path.line} fill="none" stroke={stroke} strokeWidth="2.5" />
+    </svg>
+  );
+}
+
+export function MonthlyHeatmap({
+  cells,
+  showValues = false,
+}: {
+  cells: { year: number; month: number; returnPct: number }[];
+  showValues?: boolean;
+}) {
+  const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
+  const years = [...new Set(cells.map(c => c.year))].sort();
+  const map = new Map(cells.map(c => [`${c.year}-${c.month}`, c.returnPct]));
+
+  return (
+    <div className="arp-heatmap arp-heatmap--rich">
+      <div className="arp-heatmap-head">
+        <span />
+        {months.map(m => <span key={m}>{m}</span>)}
+      </div>
+      {years.map(y => (
+        <div key={y} className="arp-heatmap-row">
+          <span className="arp-heatmap-y">{y}</span>
+          {months.map((_, mi) => {
+            const v = map.get(`${y}-${mi}`) ?? 0;
+            const intensity = Math.min(1, Math.abs(v) * 6);
+            const bg = v > 0
+              ? `rgba(0, 230, 118, ${0.2 + intensity * 0.7})`
+              : v < 0
+                ? `rgba(255, 23, 68, ${0.2 + intensity * 0.7})`
+                : 'rgba(60,70,90,0.35)';
+            return (
+              <span key={mi} className="arp-heatmap-cell" style={{ background: bg }} title={pct(v)}>
+                {showValues && v !== 0 && (
+                  <span className="arp-heatmap-val">{pctAbs(v, 0)}</span>
+                )}
+              </span>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function TrafficLight({ level }: { level: 'green' | 'yellow' | 'red' }) {
+  return (
+    <div className="arp-traffic">
+      <span className={`arp-traffic-bulb${level === 'red' ? ' arp-traffic-bulb--on' : ''}`} data-c="r" />
+      <span className={`arp-traffic-bulb${level === 'yellow' ? ' arp-traffic-bulb--on' : ''}`} data-c="y" />
+      <span className={`arp-traffic-bulb${level === 'green' ? ' arp-traffic-bulb--on' : ''}`} data-c="g" />
+    </div>
+  );
+}
+
+export function DonutAllocation({
+  slices,
+}: {
+  slices: { label: string; pct: number; color: string }[];
+}) {
+  const total = slices.reduce((s, x) => s + x.pct, 0) || 1;
+  let acc = 0;
+  const r = 40;
+  const c = 2 * Math.PI * r;
+  return (
+    <div className="arp-donut-wrap">
+      <svg width="100" height="100" viewBox="0 0 100 100">
+        {slices.map((sl, i) => {
+          const dash = (sl.pct / total) * c;
+          const offset = c * 0.25 - acc;
+          acc += dash;
+          return (
+            <circle
+              key={i}
+              cx="50"
+              cy="50"
+              r={r}
+              fill="none"
+              stroke={sl.color}
+              strokeWidth="14"
+              strokeDasharray={`${dash} ${c - dash}`}
+              strokeDashoffset={offset}
+            />
+          );
+        })}
+      </svg>
+      <ul className="arp-donut-legend">
+        {slices.map(sl => (
+          <li key={sl.label}>
+            <span className="arp-donut-dot" style={{ background: sl.color }} />
+            {sl.label} {sl.pct.toFixed(1)}%
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function KpiTile({
+  label,
+  value,
+  sub,
+  variant = 'gold',
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+  variant?: 'gold' | 'green' | 'red';
+}) {
+  return (
+    <div className={`arp-kpi-tile arp-kpi-tile--${variant}`}>
+      <span className="arp-kpi-tile-label">{label}</span>
+      <strong className="arp-kpi-tile-value">{value}</strong>
+      {sub && <span className="arp-kpi-tile-sub">{sub}</span>}
+    </div>
+  );
+}
diff --git a/frontend/src/components/backtest/BacktestAnalysisChart.tsx b/frontend/src/components/backtest/BacktestAnalysisChart.tsx
index 2ad9d77..cd7fc03 100644
--- a/frontend/src/components/backtest/BacktestAnalysisChart.tsx
+++ b/frontend/src/components/backtest/BacktestAnalysisChart.tsx
@@ -54,6 +54,8 @@ interface Props {
   /** 분석 레포트 팝업 (백테스팅 상단 툴바) */
   onOpenReport?: () => void;
   reportDisabled?: boolean;
+  /** 거래 로그 클릭 시 해당 시점으로 차트 이동 */
+  focusTimeSec?: number | null;
 }
 
 const noop = () => {};
@@ -105,6 +107,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
   onToggleOverlay,
   onOpenReport,
   reportDisabled = false,
+  focusTimeSec = null,
 }) => {
   const { getParams, getVisualConfig } = useIndicatorSettings();
   const { defaults: appDefaults } = useAppSettings();
@@ -300,6 +303,15 @@ const BacktestAnalysisChart: React.FC<Props> = ({
     applyMarkers();
   }, [signals, bars, applyMarkers]);
 
+  useEffect(() => {
+    if (focusTimeSec == null) return;
+    const mgr = managerRef.current;
+    if (!mgr) return;
+    const barSec = timeframeBarSeconds(timeframeRaw);
+    const pad = Math.max(barSec * 48, 3600);
+    mgr.applyVisibleTimeRange(focusTimeSec - pad, focusTimeSec + pad);
+  }, [focusTimeSec, timeframeRaw]);
+
   useEffect(() => {
     const mgr = managerRef.current;
     if (mgr) applyPaneRatio(mgr);
diff --git a/frontend/src/styles/analysisReportPage.css b/frontend/src/styles/analysisReportPage.css
new file mode 100644
index 0000000..07fbe7b
--- /dev/null
+++ b/frontend/src/styles/analysisReportPage.css
@@ -0,0 +1,742 @@
+/**
+ * The Quant Command Center — Analysis Report Styles
+ * TRADING_REPORT_UI_DESIGN.pdf 기반
+ */
+
+/* ── 페이지 레이아웃 ── */
+.arp-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  font-size: 13px;
+  color: var(--se-text-primary, #e0e8f0);
+  background: var(--se-bg, #0a1628);
+}
+.arp-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ── 사이드바 ── */
+.arp-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-width: 180px;
+  max-width: 360px;
+  background: var(--se-surface, #0d1e35);
+  border-right: 1px solid var(--se-border, #1e3050);
+  overflow: hidden;
+}
+.arp-splitter {
+  width: 4px;
+  cursor: col-resize;
+  background: var(--se-border, #1e3050);
+  flex-shrink: 0;
+  z-index: 10;
+  transition: background 0.2s;
+}
+.arp-splitter:hover { background: var(--se-accent-cyan, #00e5ff); }
+
+/* ── 메인 영역 ── */
+.arp-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── 탭 바 ── */
+.arp-type-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  background: var(--se-surface, #0d1e35);
+  border-bottom: 1px solid var(--se-border, #1e3050);
+  padding: 0 8px;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.arp-type-tabs::-webkit-scrollbar { display: none; }
+
+.arp-type-tab {
+  flex-shrink: 0;
+  padding: 7px 12px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--se-text-muted, #6a7f96);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+.arp-type-tab:hover { color: #00e5ff; }
+.arp-type-tab[aria-selected="true"] {
+  color: #ffd700;
+  border-bottom-color: #ffd700;
+}
+
+/* ── 뷰포트 ── */
+.arp-viewport {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ════════════════════════════════════════
+   공통 QCC 뷰 기반
+   ════════════════════════════════════════ */
+.qcc-view {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 6px 8px 4px;
+  gap: 6px;
+}
+
+/* 메타 배지 */
+.qcc-view-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.qcc-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 3px;
+  background: rgba(0, 229, 255, 0.12);
+  color: #00e5ff;
+  border: 1px solid rgba(0, 229, 255, 0.25);
+  white-space: nowrap;
+}
+.qcc-badge--muted {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--se-text-muted, #6a7f96);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.qcc-badge--strategy {
+  background: rgba(255, 215, 0, 0.12);
+  color: #ffd700;
+  border-color: rgba(255, 215, 0, 0.25);
+}
+
+/* 빈 상태 */
+.qcc-empty-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--se-text-muted);
+}
+.qcc-empty-page span { font-size: 36px; }
+.qcc-empty-page p { font-size: 13px; }
+.qcc-empty { padding: 20px; text-align: center; color: var(--se-text-muted); font-size: 12px; }
+
+/* 패널 */
+.qcc-panel {
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.qcc-panel--gold { border-color: rgba(255, 215, 0, 0.25); background: rgba(255, 215, 0, 0.05); }
+.qcc-panel--cyan { border-color: rgba(0, 229, 255, 0.25); background: rgba(0, 229, 255, 0.04); }
+.qcc-panel--neutral { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
+.qcc-panel-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--se-text-secondary, #a0b4c8);
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+.qcc-panel-sub {
+  font-size: 10px;
+  color: var(--se-text-muted);
+  margin-left: 6px;
+  font-weight: 400;
+}
+
+/* ── 섹션 타이틀 ── */
+.qcc-section-title {
+  font-size: clamp(14px, 1.8vw, 22px);
+  font-weight: 800;
+  color: #e0e8f0;
+  margin: 0 0 4px;
+  line-height: 1.25;
+}
+.qcc-section-sub {
+  font-size: 11px;
+  color: var(--se-text-muted);
+  margin: 0 0 6px;
+  line-height: 1.5;
+}
+
+/* 컬러 유틸 */
+.up   { color: #00e676; }
+.down { color: #ff1744; }
+.qcc-hero-gold { color: #ffd700; }
+
+/* 스파크 차트 */
+.qcc-spark {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ════════════════════════════════════════
+   01 Standard
+   ════════════════════════════════════════ */
+.qcc-standard {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-standard-left {
+  flex: 0 0 220px;
+  min-width: 160px;
+  overflow-y: auto;
+}
+.qcc-standard-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.qcc-summary-rows { display: flex; flex-direction: column; gap: 6px; }
+.qcc-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+.qcc-summary-row span { color: var(--se-text-muted); }
+.qcc-summary-row strong { font-weight: 700; font-size: 13px; }
+.qcc-summary-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
+
+/* Hero row */
+.qcc-hero-row {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.qcc-hero {
+  flex: 1;
+  min-width: 0;
+  padding: 10px 12px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.1);
+  background: rgba(255,255,255,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+.qcc-hero--up   { border-color: rgba(0,230,118,0.35); background: rgba(0,230,118,0.05); }
+.qcc-hero--down { border-color: rgba(255,23,68,0.35);  background: rgba(255,23,68,0.05); }
+.qcc-hero--mdd  { border-color: rgba(255,23,68,0.25); }
+.qcc-hero--sharpe { border-color: rgba(255,215,0,0.25); background: rgba(255,215,0,0.04); }
+.qcc-hero-label { font-size: 10px; color: var(--se-text-muted); font-weight: 600; flex-shrink: 0; }
+.qcc-hero-value {
+  font-size: clamp(18px, 2.5vw, 28px);
+  font-weight: 900;
+  line-height: 1.1;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qcc-hero--up .qcc-hero-value   { color: #00e676; }
+.qcc-hero--down .qcc-hero-value { color: #ff1744; }
+.qcc-hero--mdd .qcc-hero-value  { color: #ff1744; }
+.qcc-hero-sub  { font-size: 10px; color: var(--se-text-muted); flex-shrink: 0; }
+.qcc-hero-sub-line { height: 2px; background: rgba(0,229,255,0.5); margin: 6px 0; flex-shrink: 0; }
+
+/* Growth panel */
+.qcc-growth-panel { flex: 1; min-height: 0; }
+.qcc-growth-chart-wrap { flex: 1; min-height: 0; display: flex; align-items: stretch; }
+
+/* ════════════════════════════════════════
+   02 Risk
+   ════════════════════════════════════════ */
+.qcc-risk {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-risk-left {
+  flex: 0 0 240px;
+  min-width: 180px;
+  overflow-y: auto;
+}
+.qcc-risk-bullets {
+  margin: 0;
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qcc-risk-bullets li { font-size: 11.5px; line-height: 1.55; color: var(--se-text-secondary); }
+.qcc-risk-bullets strong { color: #e0e8f0; }
+.qcc-risk-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-risk-bottom {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.qcc-risk-bottom > .qcc-panel { flex: 1; min-width: 0; }
+.qcc-chart-wrap { flex: 1; min-height: 60px; display: flex; align-items: stretch; overflow: hidden; }
+.qcc-vol-label { text-align: center; font-size: 10px; color: var(--se-text-muted); flex-shrink: 0; margin-top: 4px; }
+.qcc-var-svg { width: 100%; max-height: 120px; display: block; }
+
+/* ════════════════════════════════════════
+   03 Efficiency
+   ════════════════════════════════════════ */
+.qcc-efficiency {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-efficiency-left {
+  flex: 0 0 240px;
+  min-width: 180px;
+  overflow-y: auto;
+}
+.qcc-eff-desc { display: flex; flex-direction: column; gap: 10px; }
+.qcc-eff-desc p { font-size: 11.5px; line-height: 1.55; color: var(--se-text-secondary); margin: 0; }
+.qcc-eff-desc strong { color: #e0e8f0; }
+.qcc-efficiency-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 16px;
+  overflow: hidden;
+  align-items: flex-start;
+}
+.qcc-eff-center {
+  flex: 0 0 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.qcc-gauge-svg { width: 160px; height: 160px; }
+.qcc-winrate-bar-wrap {
+  width: 100%;
+  position: relative;
+  height: 24px;
+  background: rgba(0,230,118,0.12);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(0,230,118,0.3);
+}
+.qcc-winrate-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #00e676, #69f0ae);
+  border-radius: 12px;
+  transition: width 0.6s ease;
+}
+.qcc-winrate-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #0a1628;
+}
+.qcc-eff-bars {
+  display: flex;
+  gap: 24px;
+  align-items: flex-end;
+  flex: 1;
+  min-width: 0;
+  height: 200px;
+  padding-bottom: 8px;
+}
+.qcc-eff-bar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 60px;
+}
+.qcc-eff-bar-label { font-size: 12px; font-weight: 700; text-align: center; }
+.qcc-eff-bar-label span { font-size: 10px; color: var(--se-text-muted); display: block; }
+.qcc-eff-bar-track {
+  width: 40px;
+  height: 160px;
+  background: rgba(255,255,255,0.06);
+  border-radius: 4px;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+}
+.qcc-eff-bar-fill {
+  width: 100%;
+  border-radius: 4px;
+  transition: height 0.5s ease;
+}
+.qcc-eff-bar-fill.up { background: linear-gradient(180deg, #00e676, #00b44e); }
+.qcc-eff-bar-fill.down { background: linear-gradient(180deg, #ff1744, #aa0033); }
+
+/* ════════════════════════════════════════
+   04 Temporal
+   ════════════════════════════════════════ */
+.qcc-temporal {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  gap: 8px;
+}
+.qcc-temporal-header { flex-shrink: 0; }
+.qcc-temporal-table-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border-radius: 6px;
+  border: 1px solid rgba(0,229,255,0.15);
+}
+.qcc-temporal-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.qcc-temporal-table th {
+  background: rgba(0,229,255,0.08);
+  color: var(--se-text-muted);
+  font-weight: 600;
+  padding: 7px 8px;
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid rgba(0,229,255,0.15);
+}
+.qcc-temporal-table td {
+  padding: 8px;
+  text-align: center;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  font-size: 11.5px;
+}
+.qcc-year-cell {
+  font-weight: 700;
+  color: var(--se-text-secondary);
+  background: rgba(0,0,0,0.2);
+  text-align: right !important;
+  padding-right: 12px !important;
+}
+.qcc-month-cell { transition: background 0.2s; }
+.qcc-ytd-col {
+  font-weight: 800;
+  border-left: 2px solid rgba(255,215,0,0.3);
+  background: rgba(255,215,0,0.06) !important;
+}
+.qcc-zero { color: var(--se-text-muted); font-size: 10px; }
+
+/* ════════════════════════════════════════
+   05 Logs
+   ════════════════════════════════════════ */
+.qcc-logs {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  gap: 6px;
+}
+.qcc-logs-table-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border-radius: 6px;
+  border: 1px solid rgba(0,229,255,0.15);
+}
+.qcc-logs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  font-family: 'Consolas', 'Courier New', monospace;
+}
+.qcc-logs-table th {
+  background: rgba(0,229,255,0.08);
+  color: var(--se-text-muted);
+  font-weight: 600;
+  padding: 8px 10px;
+  text-align: left;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid rgba(0,229,255,0.15);
+  white-space: nowrap;
+}
+.qcc-logs-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  white-space: nowrap;
+}
+.qcc-row--up   { background: rgba(0,230,118,0.04); }
+.qcc-row--down { background: rgba(255,23,68,0.04); }
+.qcc-row--up:hover   { background: rgba(0,230,118,0.09); }
+.qcc-row--down:hover { background: rgba(255,23,68,0.09); }
+.qcc-sym { font-weight: 700; color: #00e5ff; }
+.qcc-side { color: var(--se-text-muted); font-size: 11px; }
+.qcc-num { text-align: right; color: #e0e8f0; }
+.qcc-dur { color: var(--se-text-muted); }
+.qcc-empty-cell { padding: 40px; text-align: center; color: var(--se-text-muted); }
+
+/* ════════════════════════════════════════
+   06 Allocation
+   ════════════════════════════════════════ */
+.qcc-allocation {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 16px;
+  overflow: hidden;
+  align-items: flex-start;
+  padding: 4px 0;
+}
+.qcc-alloc-left {
+  flex: 0 0 300px;
+  min-width: 220px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.qcc-alloc-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.qcc-alloc-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+.qcc-alloc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.qcc-alloc-dot {
+  width: 14px; height: 14px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.qcc-alloc-sym { flex: 1; font-weight: 700; color: #00e5ff; }
+.qcc-alloc-pct { min-width: 52px; text-align: right; color: var(--se-text-secondary); }
+.qcc-alloc-krw { min-width: 110px; text-align: right; color: var(--se-text-muted); font-size: 11px; }
+.qcc-donut-svg { width: min(100%, 300px); height: auto; }
+
+/* ════════════════════════════════════════
+   07 Stats
+   ════════════════════════════════════════ */
+.qcc-stats {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-stats-left {
+  flex: 0 0 230px;
+  min-width: 180px;
+  overflow-y: auto;
+}
+.qcc-stats-summary { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
+.qcc-stats-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11.5px;
+}
+.qcc-stats-row span { color: var(--se-text-muted); }
+.qcc-stats-row strong { font-weight: 700; }
+.qcc-stats-chart {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+.qcc-hist-svg { width: 100%; height: 100%; }
+
+/* ════════════════════════════════════════
+   08 AI Feedback
+   ════════════════════════════════════════ */
+.qcc-ai {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  align-items: flex-start;
+}
+.qcc-ai-panel {
+  flex: 1;
+  overflow-y: auto;
+}
+.qcc-ai-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+.qcc-ai-icon { flex-shrink: 0; opacity: 0.85; }
+.qcc-ai-terminal {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.65;
+}
+.qcc-ai-line { display: flex; gap: 6px; }
+.qcc-ai-prompt { color: #ffd700; flex-shrink: 0; }
+.qcc-ai-label { color: #ffd700; font-weight: 700; }
+.qcc-ai-text { color: var(--se-text-secondary); }
+.qcc-ai-hl { color: #ffd700; text-decoration: underline; }
+
+/* ════════════════════════════════════════
+   09 Comparative
+   ════════════════════════════════════════ */
+.qcc-comparative {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-comp-header { flex-shrink: 0; }
+.qcc-comp-chart-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 8px;
+}
+.qcc-comp-svg { width: 100%; flex: 1; min-height: 0; display: block; }
+.qcc-comp-legend {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.qcc-comp-leg { display: flex; align-items: center; gap: 4px; }
+.qcc-comp-leg--strat { color: #00e676; }
+.qcc-comp-leg--bench { color: #888; }
+
+/* ════════════════════════════════════════
+   10 Timing
+   ════════════════════════════════════════ */
+.qcc-timing {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 8px;
+  overflow: hidden;
+}
+.qcc-timing-left {
+  flex: 0 0 260px;
+  min-width: 200px;
+  overflow-y: auto;
+}
+.qcc-timing-right {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+.qcc-timing-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+.qcc-timing-stat {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+.qcc-timing-stat span { color: var(--se-text-muted); }
+.qcc-timing-stat strong { font-weight: 700; }
+.qcc-scatter { width: 100%; height: 100%; display: block; }
+
+/* ════════════════════════════════════════
+   반응형
+   ════════════════════════════════════════ */
+@media (max-width: 1100px) {
+  .qcc-standard-left    { flex: 0 0 180px; }
+  .qcc-risk-left        { flex: 0 0 190px; }
+  .qcc-efficiency-left  { flex: 0 0 190px; }
+  .qcc-stats-left       { flex: 0 0 180px; }
+  .qcc-alloc-left       { flex: 0 0 240px; }
+  .qcc-timing-left      { flex: 0 0 210px; }
+  .qcc-hero-value       { font-size: clamp(16px, 2vw, 24px); }
+}
+@media (max-width: 800px) {
+  .qcc-standard, .qcc-risk, .qcc-efficiency,
+  .qcc-stats, .qcc-timing, .qcc-allocation {
+    flex-direction: column;
+  }
+  .qcc-standard-left, .qcc-risk-left, .qcc-efficiency-left,
+  .qcc-stats-left, .qcc-timing-left, .qcc-alloc-left {
+    flex: none;
+    max-height: 180px;
+  }
+  .qcc-hero-row { flex-wrap: wrap; }
+  .qcc-hero { flex: 0 0 calc(50% - 4px); }
+  .qcc-alloc-right { justify-content: flex-start; }
+  .qcc-eff-bars { display: none; }
+}
+@media (max-width: 600px) {
+  .arp-type-tab { font-size: 10px; padding: 6px 8px; }
+  .qcc-hero-row { gap: 4px; }
+  .qcc-hero { flex: 0 0 100%; }
+}
diff --git a/frontend/src/utils/analysisReportContext.ts b/frontend/src/utils/analysisReportContext.ts
new file mode 100644
index 0000000..d405570
--- /dev/null
+++ b/frontend/src/utils/analysisReportContext.ts
@@ -0,0 +1,144 @@
+import type {
+  BacktestAnalysis,
+  BacktestResultRecord,
+  BacktestSignal,
+  PaperTradeDto,
+} from './backendApi';
+import type { LiveExecutionItem } from './liveExecutionGroups';
+import type { EquityPoint, TradeHistoryRow } from './backtestEquity';
+import { buildEquityFromSignals } from './backtestEquity';
+import { paperTradesToSignals } from './liveExecutionGroups';
+import { repairUtf8Mojibake } from './textEncoding';
+
+export type AnalysisSourceTab = 'backtest' | 'live';
+
+export interface AnalysisReportContext {
+  sourceTab: AnalysisSourceTab;
+  strategyName: string;
+  symbol: string;
+  timeframe: string;
+  barCount: number;
+  createdAt?: string;
+  analysis: BacktestAnalysis | null;
+  signals: BacktestSignal[];
+  trades: TradeHistoryRow[];
+  equityCurve: EquityPoint[];
+  paperTrades: PaperTradeDto[];
+  backtestRecord?: BacktestResultRecord;
+  liveItem?: LiveExecutionItem;
+  compareBacktest?: BacktestResultRecord | null;
+}
+
+function parseBacktestRecord(r: BacktestResultRecord) {
+  let analysis: BacktestAnalysis | null = null;
+  let signals: BacktestSignal[] = [];
+  try {
+    if (r.analysisJson) analysis = JSON.parse(r.analysisJson);
+    if (r.signalsJson) signals = JSON.parse(r.signalsJson);
+  } catch { /* ignore */ }
+  const cap = analysis?.initialCapital ?? 10_000_000;
+  const eq = buildEquityFromSignals(signals, cap, r.symbol);
+  return {
+    analysis,
+    signals,
+    trades: eq.trades,
+    equityCurve: eq.curve,
+  };
+}
+
+export function buildContextFromBacktest(
+  r: BacktestResultRecord,
+  compare?: BacktestResultRecord | null,
+): AnalysisReportContext {
+  const parsed = parseBacktestRecord(r);
+  return {
+    sourceTab: 'backtest',
+    strategyName: repairUtf8Mojibake(r.strategyName || '전략 없음'),
+    symbol: r.symbol,
+    timeframe: r.timeframe,
+    barCount: r.barCount || 300,
+    createdAt: r.createdAt,
+    analysis: parsed.analysis,
+    signals: parsed.signals,
+    trades: parsed.trades,
+    equityCurve: parsed.equityCurve,
+    paperTrades: [],
+    backtestRecord: r,
+    compareBacktest: compare ?? null,
+  };
+}
+
+export function buildContextFromLive(item: LiveExecutionItem): AnalysisReportContext {
+  const signals = paperTradesToSignals(item.trades);
+  const cap = 10_000_000;
+  const eq = buildEquityFromSignals(signals, cap, item.symbol);
+  const finalEquity = cap * (1 + item.totalReturnPct);
+  const analysis: BacktestAnalysis = {
+    initialCapital: cap,
+    finalEquity,
+    totalReturnPct: item.totalReturnPct,
+    totalProfitLoss: finalEquity - cap,
+    grossProfit: 0,
+    grossLoss: 0,
+    avgReturnPct: item.tradeCount > 0 ? item.totalReturnPct / item.tradeCount : 0,
+    profitLossRatio: item.profitFactor,
+    numberOfPositions: item.tradeCount,
+    numberOfWinning: Math.round(item.tradeCount * item.winRatePct),
+    numberOfLosing: Math.max(0, item.tradeCount - Math.round(item.tradeCount * item.winRatePct)),
+    numberOfBreakEven: 0,
+    winRate: item.winRatePct,
+    maxDrawdownPct: item.mddPct,
+    maxRunupPct: 0,
+    sharpeRatio: item.sharpeRatio,
+    sortinoRatio: 0,
+    calmarRatio: 0,
+    valueAtRisk95: 0,
+    expectedShortfall: 0,
+    buyAndHoldReturnPct: 0,
+    vsBuyAndHold: 0,
+  };
+  return {
+    sourceTab: 'live',
+    strategyName: repairUtf8Mojibake(item.strategyLabel),
+    symbol: item.symbol,
+    timeframe: '1h',
+    barCount: 300,
+    createdAt: item.createdAt,
+    analysis,
+    signals,
+    trades: eq.trades,
+    equityCurve: eq.curve,
+    paperTrades: item.trades,
+    liveItem: item,
+    compareBacktest: null,
+  };
+}
+
+/** 월별 수익률 히트맵 셀 (0~1 비율) */
+export function buildMonthlyHeatmap(
+  trades: TradeHistoryRow[],
+  initialCapital: number,
+): { year: number; month: number; returnPct: number }[] {
+  const byKey = new Map<string, number>();
+  for (const t of trades) {
+    if (t.pnlPct == null) continue;
+    const d = new Date(t.time * 1000);
+    const key = `${d.getFullYear()}-${d.getMonth()}`;
+    byKey.set(key, (byKey.get(key) ?? 0) + t.pnlPct);
+  }
+  const out: { year: number; month: number; returnPct: number }[] = [];
+  for (const [key, v] of byKey) {
+    const [y, m] = key.split('-').map(Number);
+    out.push({ year: y, month: m, returnPct: v });
+  }
+  return out.sort((a, b) => a.year - b.year || a.month - b.month);
+}
+
+export function drawdownSeries(curve: EquityPoint[]): { time: number; ddPct: number }[] {
+  let peak = curve[0]?.equity ?? 0;
+  return curve.map(p => {
+    if (p.equity > peak) peak = p.equity;
+    const dd = peak > 0 ? (p.equity - peak) / peak : 0;
+    return { time: p.time, ddPct: dd };
+  });
+}
diff --git a/frontend/src/utils/analysisReportMetrics.ts b/frontend/src/utils/analysisReportMetrics.ts
new file mode 100644
index 0000000..bda294d
--- /dev/null
+++ b/frontend/src/utils/analysisReportMetrics.ts
@@ -0,0 +1,156 @@
+import type { BacktestSignal } from './backendApi';
+import type { TradeHistoryRow, EquityPoint } from './backtestEquity';
+
+/** CAGR 추정 */
+export function estimateCagr(totalReturnPct: number, signals: BacktestSignal[]): number {
+  if (signals.length < 2 || !isFinite(totalReturnPct)) return totalReturnPct;
+  const t0 = signals[0].time;
+  const t1 = signals[signals.length - 1].time;
+  const years = (t1 - t0) / (365.25 * 86400);
+  if (years <= 0.01) return totalReturnPct;
+  const mult = 1 + totalReturnPct;
+  if (mult <= 0) return totalReturnPct;
+  return Math.pow(mult, 1 / years) - 1;
+}
+
+/** 월별×연도 수익률 행렬 (히트맵 + Temporal 탭) */
+export function buildMonthlyMatrix(
+  trades: TradeHistoryRow[],
+): { year: number; month: number; returnPct: number }[] {
+  const byKey = new Map<string, number>();
+  for (const t of trades) {
+    if (t.pnlPct == null) continue;
+    const d = new Date(t.time * 1000);
+    const key = `${d.getFullYear()}-${d.getMonth()}`;
+    byKey.set(key, (byKey.get(key) ?? 0) + t.pnlPct);
+  }
+  const out: { year: number; month: number; returnPct: number }[] = [];
+  for (const [key, v] of byKey) {
+    const [y, m] = key.split('-').map(Number);
+    out.push({ year: y, month: m, returnPct: v });
+  }
+  return out.sort((a, b) => a.year - b.year || a.month - b.month);
+}
+
+/** YTD(연도별 합산) */
+export function buildYtdByYear(monthly: { year: number; month: number; returnPct: number }[]): Map<number, number> {
+  const m = new Map<number, number>();
+  for (const r of monthly) {
+    m.set(r.year, (m.get(r.year) ?? 0) + r.returnPct);
+  }
+  return m;
+}
+
+/** 수익률 분포 버킷 (Stats 탭 히스토그램) */
+export function buildReturnDistribution(
+  trades: TradeHistoryRow[],
+): { bucket: string; from: number; to: number; count: number }[] {
+  const withPnl = trades.filter(t => t.pnlPct != null).map(t => (t.pnlPct ?? 0) * 100);
+  if (withPnl.length === 0) return [];
+
+  const buckets: { label: string; min: number; max: number }[] = [
+    { label: '< -10%', min: -Infinity, max: -10 },
+    { label: '-10~-5%', min: -10, max: -5 },
+    { label: '-5~0%', min: -5, max: 0 },
+    { label: '0~2%', min: 0, max: 2 },
+    { label: '2~4%', min: 2, max: 4 },
+    { label: '4~6%', min: 4, max: 6 },
+    { label: '6~10%', min: 6, max: 10 },
+    { label: '10~50%', min: 10, max: 50 },
+    { label: '50~100%', min: 50, max: 100 },
+    { label: '100~500%', min: 100, max: 500 },
+    { label: '500%+', min: 500, max: Infinity },
+  ];
+
+  return buckets.map(b => ({
+    bucket: b.label,
+    from: b.min,
+    to: b.max,
+    count: withPnl.filter(v => v >= b.min && v < b.max).length,
+  })).filter(b => b.count > 0 || (b.from >= -10 && b.to <= 10));
+}
+
+/** 보유시간(분/시간) 계산 — BUY 신호 후 SELL 신호까지 */
+export interface HoldingPoint {
+  durationMin: number;
+  pnlPct: number;
+  symbol: string;
+}
+
+export function buildHoldingPoints(
+  signals: BacktestSignal[],
+  symbol: string,
+): HoldingPoint[] {
+  const sorted = [...signals].sort((a, b) => a.time - b.time);
+  const pts: HoldingPoint[] = [];
+  const buys: BacktestSignal[] = [];
+
+  for (const s of sorted) {
+    if (s.type === 'BUY') {
+      buys.push(s);
+    } else if ((s.type === 'SELL' || s.type === 'SHORT_EXIT' || s.type === 'PARTIAL_SELL') && buys.length > 0) {
+      const buy = buys.pop()!;
+      const durSec = s.time - buy.time;
+      const pnl = buy.price > 0 ? (s.price - buy.price) / buy.price : 0;
+      pts.push({ durationMin: durSec / 60, pnlPct: pnl * 100, symbol });
+    }
+  }
+  return pts;
+}
+
+/** 자본 배분 슬라이스 (Allocation 탭) */
+export interface AllocationSlice {
+  symbol: string;
+  pct: number;
+  capitalKrw: number;
+  color: string;
+}
+
+const SLICE_COLORS = ['#00e5ff', '#00e676', '#ffd700', '#ab47bc', '#ff7043', '#42a5f5'];
+
+export function buildAllocationSlices(
+  trades: TradeHistoryRow[],
+  initialCapital: number,
+): AllocationSlice[] {
+  const bySymbol = new Map<string, number>();
+  for (const t of trades) {
+    bySymbol.set(t.symbol, (bySymbol.get(t.symbol) ?? 0) + 1);
+  }
+  const total = [...bySymbol.values()].reduce((a, b) => a + b, 0) || 1;
+  return [...bySymbol.entries()]
+    .map(([sym, cnt], i) => ({
+      symbol: sym,
+      pct: cnt / total,
+      capitalKrw: initialCapital * (cnt / total),
+      color: SLICE_COLORS[i % SLICE_COLORS.length],
+    }))
+    .sort((a, b) => b.pct - a.pct);
+}
+
+/** 변동성 시리즈 (롤링 20봉 표준편차) */
+export function buildVolatilitySeries(curve: EquityPoint[], window = 20): { time: number; vol: number }[] {
+  if (curve.length < 2) return [];
+  const returns: number[] = [];
+  for (let i = 1; i < curve.length; i++) {
+    const r = curve[i - 1].equity > 0 ? (curve[i].equity - curve[i - 1].equity) / curve[i - 1].equity : 0;
+    returns.push(r);
+  }
+  const out: { time: number; vol: number }[] = [];
+  for (let i = window - 1; i < returns.length; i++) {
+    const slice = returns.slice(i - window + 1, i + 1);
+    const mean = slice.reduce((a, b) => a + b, 0) / window;
+    const variance = slice.reduce((a, b) => a + (b - mean) ** 2, 0) / window;
+    out.push({ time: curve[i + 1].time, vol: Math.sqrt(variance) * 100 });
+  }
+  return out;
+}
+
+/** 드로다운 시리즈 */
+export function drawdownSeries(curve: EquityPoint[]): { time: number; ddPct: number }[] {
+  let peak = curve[0]?.equity ?? 0;
+  return curve.map(p => {
+    if (p.equity > peak) peak = p.equity;
+    const dd = peak > 0 ? (p.equity - peak) / peak : 0;
+    return { time: p.time, ddPct: dd };
+  });
+}
diff --git a/frontend/src/utils/analysisReportTypes.ts b/frontend/src/utils/analysisReportTypes.ts
new file mode 100644
index 0000000..98c5616
--- /dev/null
+++ b/frontend/src/utils/analysisReportTypes.ts
@@ -0,0 +1,39 @@
+/**
+ * TRADING_REPORT_UI_DESIGN.pdf — The Quant Command Center 10 Dimensions
+ */
+
+export type AnalysisReportTypeId =
+  | 'standard'
+  | 'risk'
+  | 'efficiency'
+  | 'temporal'
+  | 'logs'
+  | 'allocation'
+  | 'stats'
+  | 'ai-feedback'
+  | 'comparative'
+  | 'timing';
+
+export interface AnalysisReportTypeDef {
+  id: AnalysisReportTypeId;
+  tabLabel: string;
+  title: string;
+  subtitle: string;
+}
+
+export const ANALYSIS_REPORT_TYPES: AnalysisReportTypeDef[] = [
+  { id: 'standard',    tabLabel: '01 Standard',    title: 'Standard',    subtitle: 'Assets & P&L Summary' },
+  { id: 'risk',        tabLabel: '02 Risk',         title: 'Risk',        subtitle: 'Stress-Testing Capital Preservation' },
+  { id: 'efficiency',  tabLabel: '03 Efficiency',   title: 'Efficiency',  subtitle: 'Execution Quality & Profit Extraction' },
+  { id: 'temporal',    tabLabel: '04 Temporal',     title: 'Temporal',    subtitle: 'Seasonality & Time-Based Consistency' },
+  { id: 'logs',        tabLabel: '05 Logs',         title: 'Logs',        subtitle: 'Granular Transparency for Every Execution' },
+  { id: 'allocation',  tabLabel: '06 Allocation',   title: 'Allocation',  subtitle: 'Capital Distribution & Asset Weights' },
+  { id: 'stats',       tabLabel: '07 Stats',        title: 'Stats',       subtitle: 'Shape of Returns: Statistical Distribution' },
+  { id: 'ai-feedback', tabLabel: '08 AI Feedback',  title: 'AI Feedback', subtitle: 'Qualitative Insights via Local LLM' },
+  { id: 'comparative', tabLabel: '09 Comparative',  title: 'Comparative', subtitle: 'Strategy vs. Benchmark: Alpha Generation' },
+  { id: 'timing',      tabLabel: '10 Timing',       title: 'Timing',      subtitle: 'Holding Periods & Entry Precision' },
+];
+
+export function getReportType(id: AnalysisReportTypeId): AnalysisReportTypeDef {
+  return ANALYSIS_REPORT_TYPES.find(t => t.id === id) ?? ANALYSIS_REPORT_TYPES[0];
+}
diff --git a/frontend/src/utils/appNavigationPaths.ts b/frontend/src/utils/appNavigationPaths.ts
index 6c50a1b..6fcbe0d 100644
--- a/frontend/src/utils/appNavigationPaths.ts
+++ b/frontend/src/utils/appNavigationPaths.ts
@@ -27,6 +27,7 @@ export const APP_NAVIGATION_PATHS: AppNavigationPathEntry[] = [
   P('메뉴-검증게시판', 'verification', 'QA', '이슈', '검증'),
   P('메뉴-전략편집기', 'strategy-editor', '전략', '편집'),
   P('메뉴-백테스팅', 'backtest', '백테스트', '히스토리'),
+  P('메뉴-분석레포트', 'analysis-report', '레포트', '분석', '투자분석'),
   P('메뉴-설정', 'settings', '환경설정'),
 
   // ── 실시간 차트 · 툴바 ──
diff --git a/frontend/src/utils/permissions.ts b/frontend/src/utils/permissions.ts
index 453dbd3..def5002 100644
--- a/frontend/src/utils/permissions.ts
+++ b/frontend/src/utils/permissions.ts
@@ -12,7 +12,7 @@ export type SettingsCategoryId =
   | 'paper' | 'virtual' | 'live' | 'trend-search' | 'alert' | 'network' | 'admin';
 
 export const TOP_MENU_IDS: TopMenuId[] = [
-  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'strategy-editor', 'backtest', 'notifications', 'settings', 'verification-board',
+  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'strategy-editor', 'backtest', 'analysis-report', 'notifications', 'settings', 'verification-board',
 ];
 
 export const SETTINGS_MENU_IDS: SettingsCategoryId[] = [
@@ -21,7 +21,7 @@ export const SETTINGS_MENU_IDS: SettingsCategoryId[] = [
 ];
 
 export const ALL_MENU_IDS = [
-  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'verification-board', 'strategy', 'strategy-editor', 'backtest', 'notifications', 'settings',
+  'dashboard', 'chart', 'paper', 'virtual', 'trend-search', 'verification-board', 'strategy', 'strategy-editor', 'backtest', 'analysis-report', 'notifications', 'settings',
   ...SETTINGS_MENU_IDS.map(id => `settings_${id}` as const),
 ] as const;
 
@@ -37,6 +37,7 @@ export const MENU_LABELS: Record<string, string> = {
   strategy: '투자전략',
   'strategy-editor': '전략편집기',
   backtest: '백테스팅',
+  'analysis-report': '분석레포트',
   notifications: '알림목록',
   settings: '설정',
   settings_general: '설정 · 일반',
diff --git a/image/KakaoTalk_Photo_2026-05-22-15-10-44 001.jpeg b/image/KakaoTalk_Photo_2026-05-22-15-10-44 001.jpeg
deleted file mode 100644
index 95589b2..0000000
Binary files a/image/KakaoTalk_Photo_2026-05-22-15-10-44 001.jpeg and /dev/null differ
diff --git a/image/KakaoTalk_Photo_2026-05-22-15-10-45 002.jpeg b/image/KakaoTalk_Photo_2026-05-22-15-10-45 002.jpeg
deleted file mode 100644
index dabb789..0000000
Binary files a/image/KakaoTalk_Photo_2026-05-22-15-10-45 002.jpeg and /dev/null differ
diff --git a/image/KakaoTalk_Photo_2026-05-22-15-10-45 003.jpeg b/image/KakaoTalk_Photo_2026-05-22-15-10-45 003.jpeg
deleted file mode 100644
index ffc8c9c..0000000
Binary files a/image/KakaoTalk_Photo_2026-05-22-15-10-45 003.jpeg and /dev/null differ
diff --git a/image/KakaoTalk_Photo_2026-05-22-15-10-46 004.jpeg b/image/KakaoTalk_Photo_2026-05-22-15-10-46 004.jpeg
deleted file mode 100644
index 70761af..0000000
Binary files a/image/KakaoTalk_Photo_2026-05-22-15-10-46 004.jpeg and /dev/null differ