상세분석 레포르 알림목록, 분석레포트 화면에 기능적용

This commit is contained in:
Macbook
2026-06-07 12:35:30 +09:00
parent 9bde682b4e
commit 864e5e8eb1
3 changed files with 82 additions and 25 deletions
+48 -15
View File
@@ -38,7 +38,7 @@
z-index: 10;
transition: background 0.2s;
}
.arp-splitter:hover { background: var(--se-accent-cyan, #00e5ff); }
.arp-splitter:hover { background: var(--se-gold, #ffd700); }
/* ── 메인 영역 ── */
.arp-main {
@@ -76,12 +76,45 @@
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.arp-type-tab:hover { color: #00e5ff; }
.arp-type-tab:hover { color: var(--se-gold, #ffd700); }
.arp-type-tab[aria-selected="true"] {
color: #ffd700;
border-bottom-color: #ffd700;
}
/* 탭바 우측 고정 영역 */
.arp-type-tabs-end {
margin-left: auto;
display: flex;
align-items: center;
padding: 0 4px;
flex-shrink: 0;
position: sticky;
right: 0;
background: var(--se-surface, #0d1e35);
}
.arp-tab-report-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--se-border, #1e3050);
border-radius: 5px;
background: transparent;
color: var(--se-text-muted, #6a7f96);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.arp-tab-report-btn:hover:not(:disabled) {
background: rgba(255, 215, 0, 0.12);
color: var(--se-gold, #ffd700);
border-color: rgba(255, 215, 0, 0.35);
}
.arp-tab-report-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* ── 뷰포트 ── */
.arp-viewport {
flex: 1;
@@ -116,9 +149,9 @@
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);
background: rgba(255, 215, 0, 0.12);
color: var(--se-gold, #ffd700);
border: 1px solid rgba(255, 215, 0, 0.25);
white-space: nowrap;
}
.qcc-badge--muted {
@@ -156,7 +189,7 @@
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--cyan { border-color: rgba(255, 215, 0, 0.2); background: rgba(255, 215, 0, 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;
@@ -273,7 +306,7 @@
.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; }
.qcc-hero-sub-line { height: 2px; background: rgba(255,215,0,0.35); margin: 6px 0; flex-shrink: 0; }
/* Growth panel */
.qcc-growth-panel { flex: 1; min-height: 0; }
@@ -434,7 +467,7 @@
min-height: 0;
overflow: auto;
border-radius: 6px;
border: 1px solid rgba(0,229,255,0.15);
border: 1px solid rgba(255,255,255,0.1);
}
.qcc-temporal-table {
width: 100%;
@@ -442,7 +475,7 @@
font-size: 12px;
}
.qcc-temporal-table th {
background: rgba(0,229,255,0.08);
background: rgba(255,255,255,0.05);
color: var(--se-text-muted);
font-weight: 600;
padding: 7px 8px;
@@ -450,7 +483,7 @@
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid rgba(0,229,255,0.15);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.qcc-temporal-table td {
padding: 8px;
@@ -489,7 +522,7 @@
min-height: 0;
overflow: auto;
border-radius: 6px;
border: 1px solid rgba(0,229,255,0.15);
border: 1px solid rgba(255,255,255,0.1);
}
.qcc-logs-table {
width: 100%;
@@ -498,7 +531,7 @@
font-family: 'Consolas', 'Courier New', monospace;
}
.qcc-logs-table th {
background: rgba(0,229,255,0.08);
background: rgba(255,255,255,0.05);
color: var(--se-text-muted);
font-weight: 600;
padding: 8px 10px;
@@ -506,7 +539,7 @@
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid rgba(0,229,255,0.15);
border-bottom: 1px solid rgba(255,255,255,0.1);
white-space: nowrap;
}
.qcc-logs-table td {
@@ -518,7 +551,7 @@
.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-sym { font-weight: 700; color: var(--se-gold, #ffd700); }
.qcc-side { color: var(--se-text-muted); font-size: 11px; }
.qcc-num { text-align: right; color: #e0e8f0; }
.qcc-dur { color: var(--se-text-muted); }
@@ -563,7 +596,7 @@
border-radius: 3px;
flex-shrink: 0;
}
.qcc-alloc-sym { flex: 1; font-weight: 700; color: #00e5ff; }
.qcc-alloc-sym { flex: 1; font-weight: 700; color: var(--se-gold, #ffd700); }
.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; }
@@ -852,6 +852,15 @@
.btd-btn--ghost { background: transparent; }
.btd-btn--danger { border-color: color-mix(in srgb, var(--se-sell) 45%, transparent); color: var(--se-sell); }
.btd-btn--gold {
background: var(--se-btn-gold-bg, rgba(255,215,0,0.15));
border-color: var(--se-btn-gold-border, rgba(255,215,0,0.45));
color: var(--se-gold, #ffd700);
}
.btd-btn--gold:hover:not(:disabled) {
background: rgba(255,215,0,0.25);
border-color: rgba(255,215,0,0.65);
}
.btd-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btd-loading {