분석레포트 화면 추가
This commit is contained in:
Macbook
@@ -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%; }
|
||||
}
|
||||
Reference in New Issue
Block a user