/* ============================================================ StockPulse Design System — stockpulse.css 단일 CSS 변수 기반 디자인 시스템 ============================================================ */ :root { /* ── 색상 팔레트 (회색/흰색 플랫 디자인) ── */ --sp-bg: #dcdcdc; /* 페이지 배경 — 연회색 */ --sp-surface: #f2f2f2; /* 카드/패널 — 연회색 */ --sp-surface-2: #f7f7f7; /* 중간 면 — 약간 밝은 회색 */ --sp-border: transparent; /* 선 없음 */ --sp-border-dark: transparent; --sp-text: #666666; /* 본문 */ --sp-text-sub: #666666; /* 보조 텍스트 */ --sp-text-muted: #666666; /* 흐린 텍스트 */ --sp-primary: #666666; /* 포인트 */ --sp-primary-hover: #555555; --sp-accent: #666666; --sp-danger: #888888; /* 모노톤 — 컬러 제거 */ --sp-success: #888888; --sp-warning: #888888; --sp-info: #888888; /* 주가 등락 — 한국 관례 상 최소 색상 유지 */ --sp-up: #b36060; /* 뮤트 레드 — 상승 전용 */ --sp-up-bg: #f7f0f0; --sp-down: #6080b0; /* 뮤트 블루 — 하락 전용 */ --sp-down-bg: #f0f3f8; --sp-flat: #888888; /* ── 레이아웃 — 플랫 ── */ --sp-navbar-h: 48px; --sp-radius: 0px; /* 라운드 없음 */ --sp-radius-lg: 0px; --sp-shadow: none; /* 그림자 없음 */ --sp-shadow-md: none; /* ── 타이포그래피 ── */ --sp-font: Arial, 'Nanum Barun Gothic', 'NanumBarunGothic', sans-serif; --sp-font-mono: Arial, 'Nanum Barun Gothic', 'NanumBarunGothic', sans-serif; --sp-font-size: 13px; --sp-line-height: 1.6; --sp-body-padding: 20px; } /* ============================================================ DARK MODE — [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { --sp-bg: #1a1a1a; /* 다크 배경 — 진한 회색 */ --sp-surface: #242424; /* 카드 — 약간 밝은 회색 */ --sp-surface-2: #2e2e2e; --sp-border: transparent; --sp-border-dark: transparent; --sp-text: #e8e8e8; --sp-text-sub: #aaaaaa; --sp-text-muted: #666666; --sp-primary: #cccccc; --sp-primary-hover: #ffffff; --sp-accent: #cccccc; --sp-danger: #e86060; --sp-success: #4db87a; --sp-warning: #d4a04a; --sp-info: #6a9ad8; --sp-up: #e86060; --sp-up-bg: #2a1a1a; --sp-down: #5b82d8; --sp-down-bg:#1a2030; --sp-flat: #888888; --sp-shadow: none; --sp-shadow-md: none; } /* 다크모드 전역 body/bg */ [data-theme="dark"] body { background: var(--sp-bg); color: var(--sp-text); } [data-theme="dark"] a { color: var(--sp-primary); } /* ── 다크모드 Bootstrap 유틸리티 오버라이드 ── */ [data-theme="dark"] .text-muted { color: #9898b0 !important; } [data-theme="dark"] .text-dark { color: #d8d8e8 !important; } [data-theme="dark"] .text-body { color: var(--sp-text) !important; } [data-theme="dark"] .text-secondary { color: #9898b0 !important; } [data-theme="dark"] small { color: #9898b0; } /* 카드/섹션 내 텍스트 밝기 보정 */ [data-theme="dark"] .card { color: #c8c8d8; } /* 다크모드 모든 border/hr 색상 통일 */ [data-theme="dark"] hr, [data-theme="dark"] .sp-divider { border-color: #2a2d34; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: #2a2d34 !important; } /* 섹션 구분선, group-header 하단선 */ [data-theme="dark"] .group-header { border-bottom-color: #2a2d34 !important; } /* 평가 이력 구분선 */ [data-theme="dark"] #eval-history-list > div { border-bottom-color: #2a2d34 !important; } /* 리포트 아이템 border-top */ [data-theme="dark"] .report-item { border-top-color: #2a2d34 !important; } /* wl-section-title 하단선 */ [data-theme="dark"] .wl-section-title { border-bottom-color: #3a3d44; } /* wl-table / wl-inner 선 */ [data-theme="dark"] .wl-table th, [data-theme="dark"] .wl-table td, [data-theme="dark"] .wl-inner th, [data-theme="dark"] .wl-inner td { border-color: #2a2d34 !important; } /* ============================================================ CHALK MODE — [data-theme="chalk"] on 스크린샷 기반: 상단 틸(#305d65) → 하단 포레스트그린(#102f29) ============================================================ */ [data-theme="chalk"] { --sp-bg: #1a3c38; --sp-surface: rgba(16, 47, 41, 0.88); --sp-border: #2a4a48; --sp-border-dark: #3a5a58; --sp-text: #f5f7f7; --sp-text-sub: #b0c8c8; --sp-text-muted: #6d8888; --sp-primary: #49ae25; --sp-primary-hover: #5ec930; --sp-accent: #49ae25; --sp-danger: #ff6b6b; --sp-success: #49ae25; --sp-warning: #e8c050; --sp-info: #60c8c8; /* 한국식 주가 색상 */ --sp-up: #ff7070; --sp-up-bg: rgba(80, 20, 20, 0.5); --sp-down: #58a6ff; --sp-down-bg:rgba(20, 50, 80, 0.5); --sp-flat: #6d8888; --sp-shadow: 0 2px 8px rgba(0,0,0,0.6); --sp-shadow-md: 0 4px 16px rgba(0,0,0,0.8); --sp-font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace; } /* ── 배경 그라디언트 ── 스크린샷: 상단 #305d65 (틸) → 하단 #102f29 (다크 포레스트) */ [data-theme="chalk"] html { background: #102f29; } [data-theme="chalk"] body { background: linear-gradient(to bottom, #305d65 0%, #224e54 25%, #1a3c3a 55%, #142e2a 78%, #102f29 100% ) fixed !important; color: #f5f7f7 !important; min-height: 100vh; } /* ── 텍스트 기본 상속 ── */ [data-theme="chalk"] .card, [data-theme="chalk"] .card-body, [data-theme="chalk"] .card-text, [data-theme="chalk"] .card-title { color: #f0f8f8 !important; } [data-theme="chalk"] td, [data-theme="chalk"] th { color: #e8f0f0 !important; } [data-theme="chalk"] h1, [data-theme="chalk"] h2, [data-theme="chalk"] h3, [data-theme="chalk"] h4, [data-theme="chalk"] h5, [data-theme="chalk"] h6 { color: #f0f8f8 !important; } [data-theme="chalk"] .sp-card-header, [data-theme="chalk"] .sp-section-title { color: #90c8c8 !important; } [data-theme="chalk"] small, [data-theme="chalk"] .small { color: #8ab0b0 !important; } /* ── 리포트 페이지 ── */ [data-theme="chalk"] .report-title { color: #e8f4f4 !important; } [data-theme="chalk"] .group-header { background: rgba(16,47,41,0.92) !important; } [data-theme="chalk"] .grp-company { color: #c8e8e8 !important; } [data-theme="chalk"] .section-title { color: #8ab0b0 !important; } [data-theme="chalk"] .report-row-g.is-read .report-title { color: #5a8080 !important; } /* ── 버튼: 흰 배경 제거 ── */ [data-theme="chalk"] .btn, [data-theme="chalk"] button:not(.navbar-toggler):not(#theme-toggle) { background-color: #1a3c38 !important; border-color: #3a6060 !important; color: #a0c8c8 !important; } [data-theme="chalk"] .btn:hover, [data-theme="chalk"] button:not(.navbar-toggler):not(#theme-toggle):hover { background-color: #224848 !important; color: #d0f0f0 !important; } [data-theme="chalk"] .btn-primary { background-color: #1a5a30 !important; border-color: #49ae25 !important; color: #d0f4c0 !important; } [data-theme="chalk"] .btn-secondary, [data-theme="chalk"] .btn-sm.btn-secondary { background-color: #1a3c38 !important; border-color: #2a4a48 !important; color: #90b8b8 !important; } [data-theme="chalk"] .btn-link { background: transparent !important; border-color: transparent !important; color: #49ae25 !important; } [data-theme="chalk"] .ignore-btn, [data-theme="chalk"] .read-btn, [data-theme="chalk"] .watch-btn { background: rgba(26,60,56,0.9) !important; border-color: #2a4a48 !important; color: #8ab0b0 !important; } [data-theme="chalk"] .ignore-btn.ignoring, [data-theme="chalk"] .read-btn.is-read { background: #2a5050 !important; color: #c0e8e8 !important; } [data-theme="chalk"] .watch-btn.watching { background: #1a5a30 !important; color: #90e870 !important; border-color: #49ae25 !important; } /* 컨테이너/래퍼가 배경을 가리지 않도록 */ [data-theme="chalk"] .container, [data-theme="chalk"] .container-fluid, [data-theme="chalk"] main { background: transparent !important; } /* 카드: 반투명 틸-다크 */ [data-theme="chalk"] .card { background: rgba(16, 47, 41, 0.88) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(73, 174, 37, 0.20) !important; color: var(--sp-text); box-shadow: 0 1px 6px rgba(0,0,0,0.5); } [data-theme="chalk"] .card-body { background: transparent !important; } [data-theme="chalk"] .card-header { background: rgba(10, 35, 30, 0.90) !important; border-bottom: 1px solid rgba(73, 174, 37, 0.20) !important; color: #90c8c8; font-weight: 600; } /* sp-card, sp-section 등 */ [data-theme="chalk"] .sp-card, [data-theme="chalk"] .sp-section, [data-theme="chalk"] .sp-surface { background: rgba(16, 47, 41, 0.88) !important; } [data-theme="chalk"] a { color: var(--sp-primary); } /* 숫자 컬럼 모노스페이스 */ [data-theme="chalk"] td, [data-theme="chalk"] .sp-num, [data-theme="chalk"] .badge { font-family: var(--sp-font-mono); } /* 텍스트 유틸리티 */ [data-theme="chalk"] .text-muted { color: #6d8888 !important; } [data-theme="chalk"] .text-dark { color: #c8d8d8 !important; } [data-theme="chalk"] .text-body { color: var(--sp-text) !important; } [data-theme="chalk"] .text-secondary { color: #90a5a6 !important; } [data-theme="chalk"] small { color: #7a9898; } /* 카드 (중복 정리) */ [data-theme="chalk"] .card-body { background: var(--sp-surface); } /* 모달 */ [data-theme="chalk"] .modal-content { background: #132e2a; border-color: var(--sp-border); color: var(--sp-text); } [data-theme="chalk"] .modal-header, [data-theme="chalk"] .modal-footer { border-color: var(--sp-border); } /* 폼 */ [data-theme="chalk"] .form-control, [data-theme="chalk"] .form-select { background: #1a3c38; border-color: #2a4a48; color: var(--sp-text); } [data-theme="chalk"] .form-control::placeholder { color: #4a6868; } /* 네비게이션 바 */ [data-theme="chalk"] .sp-navbar { background: rgba(10, 30, 28, 0.97); border-bottom: 1px solid rgba(73, 174, 37, 0.20); backdrop-filter: blur(8px); } [data-theme="chalk"] .sp-navbar .navbar-brand { color: #90c8c8 !important; font-weight: 600; } [data-theme="chalk"] .sp-navbar .nav-link { color: #6d8888 !important; } [data-theme="chalk"] .sp-navbar .nav-link.active { color: #f5f7f7 !important; border-bottom: 2px solid #49ae25; } [data-theme="chalk"] .sp-navbar .nav-link:hover { color: #b0c8c8 !important; } /* 테이블 */ [data-theme="chalk"] .table { color: #f0f8f8 !important; --bs-table-bg: transparent; --bs-table-border-color: #2a4a48; --bs-table-striped-bg: rgba(255,255,255,0.05); --bs-table-striped-color: #f0f8f8; --bs-table-hover-bg: rgba(73,174,37,0.12); --bs-table-hover-color: #ffffff; --bs-table-color: #f0f8f8; --bs-table-active-bg: rgba(255,255,255,0.08); --bs-table-active-color: #f0f8f8; } [data-theme="chalk"] .table th, [data-theme="chalk"] .table td { border-color: #2a4a48; color: #f0f8f8 !important; } [data-theme="chalk"] .table thead th, [data-theme="chalk"] .table > thead > tr > th, [data-theme="chalk"] thead th { background: #0d2a26 !important; color: #49ae25 !important; border-color: #2a4a48 !important; font-weight: 600; letter-spacing: 0.03em; font-family: var(--sp-font-mono); } [data-theme="chalk"] .table-hover tbody tr:hover > td, [data-theme="chalk"] .table-hover tbody tr:hover > th { background: rgba(73,174,37,0.12) !important; color: #ffffff !important; } [data-theme="chalk"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.04) !important; --bs-table-accent-bg: rgba(255,255,255,0.04); color: #f0f8f8 !important; } [data-theme="chalk"] .table-striped > tbody > tr:nth-of-type(even) > * { color: #f0f8f8 !important; } /* 선/구분선 */ [data-theme="chalk"] hr, [data-theme="chalk"] .sp-divider { border-color: #2a4a48; } [data-theme="chalk"] .border, [data-theme="chalk"] .border-top, [data-theme="chalk"] .border-bottom, [data-theme="chalk"] .border-start, [data-theme="chalk"] .border-end { border-color: #2a4a48 !important; } [data-theme="chalk"] .group-header { border-bottom-color: #2a4a48 !important; } [data-theme="chalk"] .report-item { border-top-color: #2a4a48 !important; } [data-theme="chalk"] .wl-section-title { border-bottom-color: #2a4a48; } [data-theme="chalk"] .wl-table th, [data-theme="chalk"] .wl-table td, [data-theme="chalk"] .wl-inner th, [data-theme="chalk"] .wl-inner td { border-color: #2a4a48 !important; } /* 뱃지/버튼 */ [data-theme="chalk"] .btn-outline-secondary { color: #90a5a6; border-color: #2a4a48; } [data-theme="chalk"] .btn-outline-secondary:hover { background: #1a3c38; color: #c8d8d8; } /* 주가 색상 */ [data-theme="chalk"] .text-danger, [data-theme="chalk"] .sp-up { color: #ff7070 !important; } [data-theme="chalk"] .text-primary, [data-theme="chalk"] .sp-down { color: #58a6ff !important; } [data-theme="chalk"] .text-success, [data-theme="chalk"] .sp-ok { color: #49ae25 !important; } /* ── end chalk theme ── */ /* 다크모드 Bootstrap 카드/배지 오버라이드 */ [data-theme="dark"] .card { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text); } [data-theme="dark"] .card-body { background: var(--sp-surface); } [data-theme="dark"] .modal-content { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--sp-border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #272a30; border-color: var(--sp-border-dark); color: var(--sp-text); } /* 다크모드 navbar */ [data-theme="dark"] .sp-navbar { background: #15171a; border-bottom-color: #3a3d44; } [data-theme="dark"] .sp-navbar .navbar-brand, [data-theme="dark"] .sp-navbar .nav-link { color: #d0d0d8 !important; } [data-theme="dark"] .sp-navbar .nav-link.active { color: #fff !important; } /* ── 다크모드 Bootstrap 테이블 전역 오버라이드 ── */ [data-theme="dark"] .table { color: #c8c8d8; --bs-table-bg: transparent; --bs-table-border-color: #2a2d34; --bs-table-striped-bg: #1e2026; --bs-table-hover-bg: #20232a; --bs-table-hover-color: #e0e0ec; --bs-table-color: #c8c8d8; } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: #2a2d34; } /* 라이트 모드 표 헤더 전체 통일 */ th, .table thead th, thead.table-light th, .table-light th, .table > thead > tr > th, thead th, .sp-table th, .wl-table th, .wl-inner th, .tracking-tbl th { background: #acacac !important; color: #ffffff !important; font-weight: 700; border-bottom: none !important; } [data-theme="dark"] .table thead th, [data-theme="dark"] thead.table-light th, [data-theme="dark"] .table-light th, [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] thead th { background: #16181d !important; color: #ffffff !important; border-color: #2a2d34 !important; font-weight: 500; --bs-table-color: #ffffff; } [data-theme="dark"] .table-hover tbody tr:hover > td, [data-theme="dark"] .table-hover tbody tr:hover > th { background: #20232a; color: #e0e0ec; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #1e2026; } /* 다크모드 테이블 */ [data-theme="dark"] .sp-table th { background: #252830; color: #ffffff; border-color: #3a3d44; } [data-theme="dark"] .sp-table td { border-color: #2e3035; } [data-theme="dark"] .sp-table tr:hover td { background: #20232a; } /* 다크모드 관심종목 wl-table */ [data-theme="dark"] .wl-table th, [data-theme="dark"] .wl-table td { border-color: #2e3035; } [data-theme="dark"] .wl-table td.td-label { background: #252830; color: #c0c0c8; } [data-theme="dark"] .wl-table td.td-ai { background: #1e2028; color: #888890; } [data-theme="dark"] .wl-inner th { background: #252830; color: #c0c0c8; } [data-theme="dark"] .wl-inner td { background: #1c1e21; border-color: #2e3035; } /* 다크모드 서브메뉴·탭 */ [data-theme="dark"] .submenu { border-color: #3a3d44; } [data-theme="dark"] .submenu-item { color: #999; } [data-theme="dark"] .submenu-item.active { background: #2e3035; color: #e0e0e8; } [data-theme="dark"] .sp-section-title { border-color: #3a3d44; color: var(--sp-text); } /* 다크모드 sp-card */ [data-theme="dark"] .sp-card-header { background: #1e2025; border-color: #2e3035; color: var(--sp-text-sub); } /* 다크모드 sp-input */ [data-theme="dark"] .sp-input { background: #272a30; border-color: #3a3d44; color: #e0e0e8; } [data-theme="dark"] .sp-btn-outline { background: #1e2026; border-color: #32353c; color: #a0a0a8; } [data-theme="dark"] .sp-btn-outline:hover { background: #2a2d34; color: #e0e0e8; } /* Bootstrap btn-outline-* 다크 오버라이드 */ [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-dark, [data-theme="dark"] .btn-outline-light, [data-theme="dark"] .btn-sm, [data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background: #1e2026; border-color: #32353c; color: #a0a0a8; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-dark:hover { background: #2a2d34; border-color: #44474f; color: #e0e0e8; } /* watch/ignore/eval 버튼 (watchlist_detail) */ [data-theme="dark"] .watch-btn, [data-theme="dark"] .ignore-btn, [data-theme="dark"] .eval-verdict-btn { background: #1e2026; border-color: #32353c; color: #888890; } [data-theme="dark"] .watch-btn.watching { background: transparent; border-color: #d4a017; color: #d4a017; font-weight: 600; } [data-theme="dark"] .ignore-btn.ignoring { background: #2e2e36; border-color: #555560; color: #a0a0a8; } [data-theme="dark"] .eval-verdict-btn.selected { background: #2e3a50; border-color: #4f70a0; color: #7ba8f5; } /* 다크모드 badge */ [data-theme="dark"] .sp-badge-gray { background: #2e3035; color: #a0a0a8; } [data-theme="dark"] .sp-badge-outline { background: #272a30; border-color: #3a3d44; color: #a0a0a8; } [data-theme="dark"] .sp-badge-primary { background: #1a2f60; color: #7ba8f5; } /* 다크모드 모바일 네비 */ [data-theme="dark"] .sp-mobile-nav { background: #15171a; border-top-color: #2e3035; } [data-theme="dark"] .sp-mobile-nav-item { color: #888; } [data-theme="dark"] .sp-mobile-nav-item.active { color: #4f83f0; } /* 다크모드 루틴 */ [data-theme="dark"] .sp-routine-item { border-color: #2e3035; } [data-theme="dark"] .sp-routine-item:hover { background: #20232a; } [data-theme="dark"] .sp-routine-item.done .routine-name { color: var(--sp-text-muted); } /* 다크모드 링크 카드 */ [data-theme="dark"] .sp-link-card { border-color: #2e3035; background: #1c1e21; } [data-theme="dark"] .sp-link-card:hover { border-color: var(--sp-primary); } [data-theme="dark"] .sp-link-card .name { color: #e0e0e8; } /* 다크모드 서적 카드 */ [data-theme="dark"] .sp-book-card { border-color: #2e3035; background: #1c1e21; } [data-theme="dark"] .sp-book-title { color: #e0e0e8; } /* 다크모드 하이라이트 (서재) */ [data-theme="dark"] .highlight-item { background: #1e2028; border-color: var(--sp-warning); color: #c0c0c8; } /* 다크모드 리포트 아이템 */ [data-theme="dark"] .report-item { border-color: #2e3035; color: var(--sp-text); } [data-theme="dark"] .report-item:hover { background: #20232a; } [data-theme="dark"] .group-header { background: #252830; border-color: #3a3d44; } /* 다크모드 pdf 컨테이너 */ [data-theme="dark"] #pdf-container { background: #111214; } /* 다크모드 scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1c1e21; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3d44; border-radius: var(--sp-radius); } /* ============================================================ 다크모드 Bootstrap 전역 컴포넌트 오버라이드 (모든 페이지의 bg-white, nav-pills, card-header 등 자동 수정) ============================================================ */ /* bg-white / bg-light / bg-dark */ [data-theme="dark"] .bg-white { background: var(--sp-surface) !important; color: var(--sp-text) !important; } [data-theme="dark"] .bg-light { background: var(--sp-bg) !important; color: var(--sp-text) !important; } /* card-header 전역 */ [data-theme="dark"] .card-header { background: var(--sp-bg) !important; border-bottom-color: var(--sp-border) !important; color: var(--sp-text) !important; } /* nav-pills */ [data-theme="dark"] .nav-pills .nav-link { color: var(--sp-text-sub) !important; background: transparent; } [data-theme="dark"] .nav-pills .nav-link:hover { color: var(--sp-text) !important; background: var(--sp-bg); } [data-theme="dark"] .nav-pills .nav-link.text-dark { color: var(--sp-text-sub) !important; } [data-theme="dark"] .nav-pills .nav-link.active, [data-theme="dark"] .nav-pills .nav-link.bg-dark { background: var(--sp-text) !important; color: var(--sp-bg) !important; } /* nav-tabs */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--sp-border) !important; } [data-theme="dark"] .nav-tabs .nav-link { color: var(--sp-text-muted); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--sp-text); border-color: var(--sp-border); background: var(--sp-bg); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--sp-text); background: var(--sp-surface); border-color: var(--sp-border) var(--sp-border) var(--sp-surface); } /* badge bg-light */ [data-theme="dark"] .badge.bg-light { background: var(--sp-surface) !important; color: var(--sp-text-sub) !important; border-color: var(--sp-border) !important; } [data-theme="dark"] .badge.text-dark { color: var(--sp-text) !important; } /* alert */ [data-theme="dark"] .alert { border-color: var(--sp-border); color: var(--sp-text-sub); } [data-theme="dark"] .alert-warning { background: #251d0a !important; border-color: var(--sp-warning) !important; color: var(--sp-warning) !important; } [data-theme="dark"] .alert-info { background: #0d1e30 !important; border-color: var(--sp-primary) !important; color: var(--sp-primary) !important; } [data-theme="dark"] .alert-danger { background: #2a0d0d !important; border-color: var(--sp-danger) !important; color: var(--sp-danger) !important; } [data-theme="dark"] .alert-success { background: #0d2a1a !important; border-color: var(--sp-success) !important; color: var(--sp-success) !important; } /* input-group */ [data-theme="dark"] .input-group-text { background: #272a30; border-color: var(--sp-border-dark); color: var(--sp-text-muted); } /* list-group */ [data-theme="dark"] .list-group-item { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text); } [data-theme="dark"] .list-group-item:hover { background: var(--sp-bg); } [data-theme="dark"] .list-group-item.active { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; } /* dropdown */ [data-theme="dark"] .dropdown-menu { background: var(--sp-surface); border-color: var(--sp-border); } [data-theme="dark"] .dropdown-item { color: var(--sp-text); } [data-theme="dark"] .dropdown-item:hover { background: var(--sp-bg); color: var(--sp-text); } [data-theme="dark"] .dropdown-divider { border-color: var(--sp-border); } /* progress */ [data-theme="dark"] .progress { background: var(--sp-border); } /* code / pre */ [data-theme="dark"] code { background: #272a30; color: #e8c07a; padding: 1px 4px; border-radius: var(--sp-radius); font-size: 0.9em; } [data-theme="dark"] pre { background: #16181d; border: 1px solid var(--sp-border); color: var(--sp-text); padding: 12px; border-radius: var(--sp-radius); } /* border utilities */ [data-theme="dark"] .border-bottom { border-bottom-color: var(--sp-border) !important; } [data-theme="dark"] .border-secondary { border-color: var(--sp-border-dark) !important; } [data-theme="dark"] .border-warning { border-color: var(--sp-warning) !important; } /* ── .submenu ── */ .submenu { display: flex; flex-wrap: wrap; gap: 0; align-items: center; margin-bottom: 0; background: #898989; } .submenu-item { font-size: 13px; color: #ffffff; text-decoration: none; padding: 4px 10px; border-bottom: 2px solid transparent; transition: color 0.15s, background 0.15s; } .submenu-item:hover { color: #ffffff; text-decoration: none; border-bottom: 2px solid #ffffff; } .submenu-item.active { font-weight: 700; color: #ffffff; } .submenu-sep { display: none; } /* ── .section-title (퀀트/분석 페이지용) ── */ .section-title { font-size: 15px; font-weight: 700; color: #666666; margin-bottom: 12px; padding-bottom: 0; padding-left: 2px; border-bottom: none; } /* ── 페이지 제목 통일 ── */ h5.fw-bold, h5.mb-0.fw-bold, h4.fw-bold, h6.fw-bold { font-size: 15px !important; font-weight: 700 !important; color: #666666 !important; } /* ── 본문 글자 통일 (13px #666666) ── */ .container-fluid { font-size: 13px; color: #666666; } .container-fluid p, .container-fluid span, .container-fluid div, .container-fluid td, .container-fluid li, .container-fluid a, .container-fluid label, .container-fluid small { color: #666666; } .container-fluid strong, .container-fluid b, .container-fluid .fw-bold, .container-fluid .fw-semibold, .container-fluid th { color: #666666; } /* 반전 예외 (서브메뉴/카드헤더/테이블헤더 = 흰색) */ .submenu-item, .submenu-item * { color: #ffffff !important; } .card-header, .card-header *, .sp-card-header, .sp-card-header * { color: #ffffff; } th { color: #ffffff !important; } /* ── 백테스트 페이지 전용 컴포넌트 다크 오버라이드 ── */ [data-theme="dark"] .strat-card { background: var(--sp-surface); border-color: var(--sp-border) !important; } [data-theme="dark"] .strat-card .strat-header { background: var(--sp-bg); border-bottom-color: var(--sp-border); } [data-theme="dark"] .strat-title { color: var(--sp-text); } [data-theme="dark"] .strat-desc { color: var(--sp-text-muted); } [data-theme="dark"] .summary-card { background: var(--sp-surface); border-color: var(--sp-border) !important; } [data-theme="dark"] .summary-card .s-title { color: var(--sp-text-sub); } [data-theme="dark"] .summary-card .s-sub { color: var(--sp-text-muted); } [data-theme="dark"] .best-box { background: color-mix(in srgb, var(--sp-warning) 8%, var(--sp-surface)); border-color: var(--sp-warning) !important; } [data-theme="dark"] .best-box .label { color: var(--sp-warning); } [data-theme="dark"] .metric-sub { color: var(--sp-text-muted); } [data-theme="dark"] .insight-box { background: color-mix(in srgb, var(--sp-success) 8%, var(--sp-surface)); border-color: var(--sp-success) !important; color: var(--sp-text-sub); } [data-theme="dark"] .guide-box { background: color-mix(in srgb, var(--sp-success) 8%, var(--sp-surface)); border-color: var(--sp-success) !important; color: var(--sp-text-sub); } [data-theme="dark"] .guide-warn { background: color-mix(in srgb, var(--sp-warning) 8%, var(--sp-surface)); border-color: var(--sp-warning) !important; color: var(--sp-text-sub); } [data-theme="dark"] .no-data-box { background: var(--sp-surface); border-color: var(--sp-border) !important; color: var(--sp-text-muted); } [data-theme="dark"] .section-label { color: var(--sp-text-muted); border-bottom-color: var(--sp-border) !important; } [data-theme="dark"] .mkt-kospi { background: #1a2540; color: #6090d8; } [data-theme="dark"] .mkt-kosdaq { background: #2a2010; color: #c8a040; } [data-theme="dark"] .badge-viable { background: color-mix(in srgb, var(--sp-success) 20%, var(--sp-surface)); color: var(--sp-success); border-color: var(--sp-success); } [data-theme="dark"] .badge-noviable { background: color-mix(in srgb, var(--sp-danger) 20%, var(--sp-surface)); color: var(--sp-danger); border-color: var(--sp-danger); } [data-theme="dark"] .stock-row:hover td { background: #20232a !important; } /* 최적 행(best row), 성공/실패 비교 행 하이라이트 */ [data-theme="dark"] .tr-best { background: color-mix(in srgb, var(--sp-warning) 10%, var(--sp-surface)) !important; } [data-theme="dark"] .tr-success { background: color-mix(in srgb, var(--sp-success) 8%, var(--sp-surface)) !important; } [data-theme="dark"] .tr-failure { background: color-mix(in srgb, var(--sp-danger) 8%, var(--sp-surface)) !important; } /* ── 시그널 추적 페이지 전용 ── */ [data-theme="dark"] .tracking-tbl th { background: var(--sp-bg); border-bottom-color: var(--sp-border-dark); color: var(--sp-text); } [data-theme="dark"] .tracking-tbl td { border-bottom-color: var(--sp-border); color: var(--sp-text); } [data-theme="dark"] .tracking-tbl tr:hover { background: #20232a; } [data-theme="dark"] .perf-badge.perf-up { background: color-mix(in srgb, var(--sp-up) 15%, var(--sp-surface)); color: var(--sp-up); } [data-theme="dark"] .perf-badge.perf-down { background: color-mix(in srgb, var(--sp-down) 15%, var(--sp-surface)); color: var(--sp-down); } [data-theme="dark"] .perf-badge.bg-light { background: var(--sp-surface) !important; color: var(--sp-text-muted) !important; } /* ============================================================ BASE RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ── 플랫 디자인 전역 리셋 ── */ *, *::before, *::after { border-radius: 0 !important; /* 라운드 전역 제거 */ box-shadow: none !important; /* 그림자 전역 제거 */ } /* 단, 인풋 포커스 outline은 유지 */ input:focus, select:focus, textarea:focus, button:focus { box-shadow: none !important; outline: 2px solid #cccccc !important; outline-offset: -2px; } body { background: var(--sp-bg); font-family: var(--sp-font); font-size: var(--sp-font-size); line-height: var(--sp-line-height); color: var(--sp-text); padding-top: var(--sp-navbar-h); -webkit-font-smoothing: antialiased; } a { color: var(--sp-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Bootstrap 카드 — 플랫 ── */ .card { border: none; border-radius: 0; box-shadow: none; background: var(--sp-surface); } .card-header { background: #acacac !important; border-bottom: none; font-size: 13px; font-weight: 700; color: #ffffff !important; padding: 10px 16px; } .card-body { padding: 1rem 1.25rem; } /* ── 섹션 간 여백 ── */ .sp-section + .sp-section { margin-bottom: 1.5rem; } /* ── Bootstrap 버튼 — 플랫 ── */ .btn { border-radius: 0; font-size: 13px; } .btn-outline-secondary { border-color: #cccccc; color: var(--sp-text-sub); border-radius: 0; } .btn-outline-secondary:hover { background: var(--sp-bg); border-color: #888888; color: var(--sp-text); } /* ── Bootstrap 테이블 — 플랫 ── */ .table { font-size: 13px; } .table th { font-weight: 600; color: var(--sp-text-sub); border-bottom: 2px solid #e0e0e0; text-align: left; } .table td { vertical-align: middle; text-align: left; border-bottom: 1px solid #f0f0f0; } .table-hover tbody tr:hover { background: #f7f7f7; } .table th.text-center, .table td.text-center { text-align: center; } .table th.text-end, .table td.text-end { text-align: end; } /* ============================================================ NAVBAR ============================================================ */ .sp-navbar { background: #434343; border-bottom: none; height: var(--sp-navbar-h); padding: 0; box-shadow: none; } .sp-navbar .navbar-brand { font-size: 15px; font-weight: 800; color: #ffffff !important; letter-spacing: -0.5px; } .sp-navbar .nav-link { font-size: 13px; color: #eeeeee !important; padding: 0 7px; line-height: var(--sp-navbar-h); transition: color 0.15s; } .sp-navbar .nav-link:hover { color: #ffffff !important; } .sp-navbar .nav-link.active { font-weight: 600; color: #ffffff !important; } /* ── 보조 메뉴 더보기 버튼 ── */ .sp-nav-more-btn { background: none; border: none; padding: 3px 10px; font-size: 16px; color: #eeeeee; cursor: pointer; line-height: 1.4; } .sp-nav-more-btn:hover { color: #ffffff; } .sp-dropdown { font-size: 13px; background: #a3a3a3 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .sp-dropdown .dropdown-item { padding: 6px 16px; color: #ffffff; } .sp-dropdown .dropdown-item:hover { background: #888888; color: #ffffff; } [data-theme="dark"] .sp-dropdown { background: var(--sp-surface); } [data-theme="dark"] .sp-dropdown .dropdown-item:hover { background: #2a2d35; } /* ============================================================ CARD ============================================================ */ .sp-card { background: var(--sp-surface); border: none; margin-bottom: 16px; overflow: hidden; } .sp-card-header { padding: 8px 16px; background: #acacac !important; border-bottom: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sp-text); } .sp-card-body { padding: 16px; background: var(--sp-surface); } /* ============================================================ SECTION TITLE ============================================================ */ .sp-section-title { font-size: 15px; font-weight: 700; color: var(--sp-text); padding-left: 2px; margin-bottom: 12px; padding-bottom: 0; border-bottom: none; } .sp-section-title.no-border { border-bottom: none; padding-bottom: 0; } /* (sp-submenu는 위 .submenu 블록과 통합됨) */ /* ============================================================ TABLE ============================================================ */ .sp-table { width: 100%; font-size: 12px; border-collapse: collapse; } .sp-table th { padding: 8px 10px; text-align: left; white-space: nowrap; font-size: 12px; } .sp-table td { border: none; border-bottom: 1px solid var(--sp-border); padding: 8px 10px; vertical-align: middle; } .sp-table tr:hover td { background: #f9f9f9; } .sp-table .text-right { text-align: right; } .sp-table .text-center { text-align: center; } /* ============================================================ BADGE ============================================================ */ .sp-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--sp-radius); line-height: 1.6; } .sp-badge-primary { background: #dbeafe; color: var(--sp-primary); } .sp-badge-success { background: #dcfce7; color: var(--sp-success); } .sp-badge-danger { background: #fee2e2; color: var(--sp-danger); } .sp-badge-warning { background: #fef3c7; color: #92400e; } .sp-badge-gray { background: #f0f0f0; color: #555; } .sp-badge-outline { background: #fff; color: #555; border: 1px solid #ccc; } /* ============================================================ BUTTON ============================================================ */ .sp-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--sp-radius); border: 1px solid transparent; cursor: pointer; line-height: 1.5; transition: background 0.1s, border-color 0.1s; white-space: nowrap; } .sp-btn:hover { text-decoration: none; } .sp-btn-primary { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); } .sp-btn-primary:hover { background: var(--sp-primary-hover); color: #fff; } .sp-btn-outline { background: #fff; color: #444; border-color: #ccc; } .sp-btn-outline:hover { background: #f5f5f5; color: #111; } .sp-btn-danger { background: var(--sp-danger); color: #fff; border-color: var(--sp-danger); } .sp-btn-sm { font-size: 11px; padding: 2px 8px; } .sp-btn-lg { font-size: 14px; padding: 6px 18px; } /* ============================================================ STAT CARD ============================================================ */ .sp-stat-card { background: var(--sp-surface); border: none; padding: 12px 16px; text-align: center; } .sp-stat-value { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--sp-text); } .sp-stat-label { font-size: 11px; color: var(--sp-text-muted); margin-top: 3px; } /* ============================================================ PRICE COLORS ============================================================ */ .sp-up { color: var(--sp-up) !important; } .sp-down { color: var(--sp-down) !important; } .sp-flat { color: var(--sp-flat) !important; } .sp-up-bg { background: var(--sp-up-bg); } .sp-down-bg { background: var(--sp-down-bg); } /* ============================================================ FORM ============================================================ */ .sp-input { display: block; width: 100%; font-size: 13px; padding: 5px 10px; border: 1px solid var(--sp-border-dark); border-radius: var(--sp-radius); background: #fff; color: var(--sp-text); line-height: 1.5; } .sp-input:focus { outline: none; border-color: var(--sp-primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); } .sp-label { font-size: 12px; font-weight: 600; color: var(--sp-text-sub); margin-bottom: 4px; display: block; } /* ============================================================ TABS ============================================================ */ .sp-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--sp-border); margin-bottom: 16px; } .sp-tab { font-size: 13px; padding: 7px 16px; cursor: pointer; color: var(--sp-text-sub); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; } .sp-tab:hover { color: var(--sp-text); } .sp-tab.active { color: var(--sp-primary); font-weight: 700; border-bottom-color: var(--sp-primary); } /* ============================================================ PROGRESS ============================================================ */ .sp-progress { height: 6px; background: var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; } .sp-progress-bar { height: 100%; background: var(--sp-primary); border-radius: var(--sp-radius); transition: width 0.3s; } .sp-progress-bar.success { background: var(--sp-success); } .sp-progress-bar.warning { background: var(--sp-warning); } .sp-progress-bar.danger { background: var(--sp-danger); } /* ============================================================ ALERT ============================================================ */ .sp-alert { padding: 10px 14px; border-radius: var(--sp-radius); font-size: 13px; margin-bottom: 12px; } .sp-alert-info { background: #eff6ff; border-color: var(--sp-primary); color: #1e3a8a; } .sp-alert-success { background: #f0fdf4; border-color: var(--sp-success); color: #14532d; } .sp-alert-warning { background: #fffbeb; border-color: var(--sp-warning); color: #78350f; } .sp-alert-danger { background: #fef2f2; border-color: var(--sp-danger); color: #7f1d1d; } /* ============================================================ EMPTY STATE ============================================================ */ .sp-empty { text-align: center; padding: 48px 24px; color: var(--sp-text-muted); } .sp-empty-icon { font-size: 40px; margin-bottom: 12px; } .sp-empty-text { font-size: 14px; } /* ============================================================ LOADING SKELETON ============================================================ */ @keyframes sp-skeleton { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .sp-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 400px 100%; animation: sp-skeleton 1.4s infinite; border-radius: var(--sp-radius); } /* ============================================================ MONOSPACE NUMBER (가격, 숫자) ============================================================ */ .sp-num { font-family: var(--sp-font-mono); font-size: 12px; } /* ============================================================ DIVIDER ============================================================ */ .sp-divider { border: none; border-top: 1px solid var(--sp-border); margin: 12px 0; } /* ============================================================ LINK CARD (F1 링크 모음) ============================================================ */ .sp-link-card { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); transition: border-color 0.15s, box-shadow 0.15s; } .sp-link-card:hover { border-color: var(--sp-primary); box-shadow: var(--sp-shadow); text-decoration: none; } .sp-link-card .icon { font-size: 20px; color: var(--sp-primary); flex-shrink: 0; width: 28px; text-align: center; } .sp-link-card .name { font-size: 12px; font-weight: 600; color: var(--sp-text); } .sp-link-card .desc { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; } /* ============================================================ BOOK CARD (F2 서재) ============================================================ */ .sp-book-card { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; transition: box-shadow 0.15s; cursor: pointer; } .sp-book-card:hover { box-shadow: var(--sp-shadow-md); } .sp-book-cover { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #bbb; } .sp-book-info { padding: 10px 12px; } .sp-book-title { font-size: 13px; font-weight: 600; color: var(--sp-text); line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-book-author { font-size: 11px; color: var(--sp-text-muted); margin-bottom: 6px; } /* ============================================================ ROUTINE CHECK (F3 루틴) ============================================================ */ .sp-routine-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--sp-border); transition: background 0.1s; } .sp-routine-item:last-child { border-bottom: none; } .sp-routine-item:hover { background: #f9f9f9; } .sp-routine-item.done { opacity: 0.6; } .sp-routine-item .check-wrap { width: 20px; height: 20px; flex-shrink: 0; } .sp-routine-item .check-wrap input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sp-success); cursor: pointer; } .sp-routine-item .routine-name { flex: 1; font-size: 13px; color: var(--sp-text); } .sp-routine-item.done .routine-name { text-decoration: line-through; color: var(--sp-text-muted); } /* 히트맵 */ .sp-heatmap { display: flex; flex-wrap: wrap; gap: 2px; } .sp-heatmap-cell { width: 13px; height: 13px; border-radius: var(--sp-radius); background: #eee; cursor: default; } .sp-heatmap-cell[data-level="1"] { background: #bbf7d0; } .sp-heatmap-cell[data-level="2"] { background: #4ade80; } .sp-heatmap-cell[data-level="3"] { background: #16a34a; } .sp-heatmap-cell[data-level="4"] { background: #14532d; } /* ============================================================ US MARKET (F6) ============================================================ */ .sp-market-index { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: var(--sp-radius); } .sp-market-index .idx-name { font-size: 12px; color: var(--sp-text-sub); width: 80px; } .sp-market-index .idx-value { font-family: var(--sp-font-mono); font-size: 14px; font-weight: 700; } .sp-market-index .idx-change { font-size: 12px; font-family: var(--sp-font-mono); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .sp-table th, .sp-table td { padding: 4px 6px; font-size: 11px; } .sp-card-body { padding: 10px; } .sp-stat-value { font-size: 18px; } /* 모바일에서 테이블을 카드로 */ .sp-table-responsive-card thead { display: none; } .sp-table-responsive-card tr { display: block; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); margin-bottom: 8px; padding: 8px; } .sp-table-responsive-card td { display: flex; justify-content: space-between; border: none; padding: 3px 0; } .sp-table-responsive-card td::before { content: attr(data-label); font-weight: 600; color: var(--sp-text-sub); font-size: 11px; margin-right: 8px; } /* 모바일 하단 네비 */ .sp-mobile-nav { display: flex !important; } } /* 모바일 하단 네비 (기본 숨김) */ .sp-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--sp-surface); box-shadow: 0 -1px 0 rgba(0,0,0,0.06); z-index: 1000; padding: 4px 0; padding-bottom: env(safe-area-inset-bottom); } .sp-mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 0; color: #666; font-size: 10px; text-decoration: none; gap: 2px; } .sp-mobile-nav-item i { font-size: 20px; } .sp-mobile-nav-item.active { color: var(--sp-primary); } /* ============================================================ PRINT ============================================================ */ @media print { .sp-navbar, .sp-mobile-nav { display: none !important; } body { padding-top: 0 !important; } } /* ============================================================ STOCK CHIP — 기업 두줄 표시 컴포넌트 ============================================================ */ .sc-wrap { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .sc-row1 { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; } .sc-row2 { display: flex; align-items: center; gap: 3px; white-space: nowrap; flex-wrap: nowrap; } .sc-name { font-weight: 600; font-size: 13px; color: #666666 !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .sc-name:hover { color: #333333 !important; } .sc-code { color: var(--sp-text-muted); font-size: 11px; font-family: var(--sp-font-mono); } .sc-market { color: var(--sp-text-muted); font-size: 11px; } .sc-sector { color: var(--sp-text-muted); font-size: 11px; } .sc-sep { color: #505060; font-size: 0.65rem; } .sc-icons { display: inline-flex; gap: 3px; align-items: center; flex-shrink: 0; } .sc-icon { display: inline-flex; align-items: center; opacity: 0.5; line-height: 1; text-decoration: none; } .sc-icon:hover { opacity: 1; } .sc-icon svg { display: block; } .sc-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 2px; border: none; background: none; color: #888888; font-size: 12px; font-weight: 700; font-family: sans-serif; line-height: 1; text-decoration: none; letter-spacing: 0; cursor: pointer; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s, color 0.15s; } .sc-icon-btn:hover { opacity: 1; color: #555555; background: none; } .sc-wrap:hover .sc-icon-btn { opacity: 0.9; } /* ── 공통 관심 버튼 (전 페이지 통일) ────────────────────────── */ .watch-btn, .kr-watch-btn { font-size: 0.72rem; padding: 2px 8px; border: none; background: #ffffff; color: #898989; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-weight: 400; line-height: 1.5; } .watch-btn:hover, .kr-watch-btn:hover { background: #f0f0f0; } .watch-btn.watching, .kr-watch-btn.watching { background: #898989 !important; color: #ffffff !important; font-weight: 400; } /* ============================================================ 색상 클래스 전역 통일 — 모노톤 원칙 주가 등락 전용 색상만 유지, 나머지는 회색 ============================================================ */ /* 주가 상승 — 뮤트 레드 */ .price-up, .idx-chg.up, .badge-score.up, .stock-chg.up { color: var(--sp-up) !important; } /* 주가 하락 — 뮤트 블루 */ .price-down, .idx-chg.down, .badge-score.down, .stock-chg.down { color: var(--sp-down) !important; } /* 나머지 컬러 클래스 → 회색으로 통일 */ .val-red, .val-hot, .judge-bad, .month-tag-best { color: #555555 !important; } .val-blue { color: #555555 !important; } .text-danger { color: #666666 !important; } .text-success { color: #666666 !important; } .text-warning { color: #666666 !important; } .bg-danger { background: #f0f0f0 !important; color: #555 !important; } .bg-success { background: #f0f0f0 !important; color: #555 !important; } .bg-warning { background: #f0f0f0 !important; color: #555 !important; } /* 신호 태그 — 회색 */ .signal-tag.sell { background: #888888 !important; color: #fff !important; } .signal-tag.buy { background: #666666 !important; color: #fff !important; } .ms-badge.bear { color: #666666 !important; border-color: #aaaaaa !important; } .regime-weak_bear { background: #aaaaaa !important; } /* 성공/실패/강조 행 — 회색 톤 */ .tr-best { background: #f5f5f5 !important; } .tr-success { background: #f5f5f5 !important; } .tr-failure { background: #eeeeee !important; } .badge-viable { background: #eeeeee; color: #555555; border-color: #cccccc; } .badge-noviable { background: #e8e8e8; color: #666666; border-color: #cccccc; } /* ev-neg/pos → 회색 */ .ev-neg { color: #666666 !important; } .ev-pos { color: #444444 !important; }