/* ========================================================================== TradingBot Ops — Colors & Type ========================================================================== 다크 모드 전용 트레이딩 운영 대시보드 디자인 토큰. Bloomberg 터미널 + Datadog/Grafana 모니터링 중간 결. 고밀도, 가독성 우선, 장식 최소화. ========================================================================== */ /* ---------- Fonts (CDN) ---------- */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"); :root { /* ==================================================================== COLOR — Surface (배경 계층) 트레이딩 화면은 어두운 회색 다단계로 깊이를 만듭니다. pure black (#000) 은 OLED 번인 회피 + 차트 대비를 위해 회피. ==================================================================== */ --bg-0: #07090d; /* 최외곽 (body) */ --bg-1: #0b0e14; /* 기본 패널 / 카드 */ --bg-2: #11151c; /* 카드 위 카드 / hover */ --bg-3: #171c25; /* 입력, 선택 행, sticky header */ --bg-elevated: #1c2230; /* 모달, 드롭다운, 툴팁 */ --bg-overlay: rgba(7, 9, 13, 0.72); /* 모달 오버레이 */ /* ==================================================================== COLOR — Foreground (텍스트 계층) 5단계: primary > secondary > tertiary > quaternary > disabled ==================================================================== */ --fg-1: #e6e9ef; /* 본문 / 주요 숫자 */ --fg-2: #a8b0bd; /* 라벨 / 보조 텍스트 */ --fg-3: #6b7384; /* 메타 / 캡션 */ --fg-4: #4a5160; /* placeholder / 비활성 라벨 */ --fg-disabled: #2f3543; --fg-inverse: #07090d; /* 밝은 배경 위 텍스트 */ /* ==================================================================== COLOR — Border / Divider 매우 절제된 회색. 카드 분리는 background 차이로, border 는 입력 / 셀 구분 같은 정밀한 선에만 사용. ==================================================================== */ --border-1: #1f2632; /* 기본 카드 테두리, 표 셀 */ --border-2: #2a3142; /* hover 강조 / 입력 활성 */ --border-3: #3a4256; /* focus ring 외곽 */ --divider: rgba(255, 255, 255, 0.04); /* 동일 카드 내 행 구분 */ /* ==================================================================== COLOR — Semantic (상태) 트레이딩에서 색은 _의미_ 입니다. 장식이 아닙니다. success / long → 초록 (수익, 정상, 매수) danger / short → 빨강 (손실, 실패, 매도) warn → 노랑 (경고, stale data, 주의) info → 파랑 (정보, 중립 메타) accent → 청록 (브랜드 강조, 링크) ==================================================================== */ --success: #00d4a3; /* PnL +, long, ok */ --success-fg: #5cf0c8; /* 텍스트용 (배경 위 가독성) */ --success-bg: rgba(0, 212, 163, 0.10); --success-bd: rgba(0, 212, 163, 0.28); --danger: #ff4d5e; /* PnL -, short, fail */ --danger-fg: #ff7a87; --danger-bg: rgba(255, 77, 94, 0.10); --danger-bd: rgba(255, 77, 94, 0.30); --warn: #ffb020; /* stale, divergence, attention */ --warn-fg: #ffc24d; --warn-bg: rgba(255, 176, 32, 0.10); --warn-bd: rgba(255, 176, 32, 0.30); --info: #4a9eff; /* neutral 정보 */ --info-fg: #7ab8ff; --info-bg: rgba(74, 158, 255, 0.10); --info-bd: rgba(74, 158, 255, 0.28); --accent: #5cf0c8; /* 브랜드 청록 (로고, 링크, focus) */ --accent-bd: rgba(92, 240, 200, 0.40); /* PnL 직렬 (숫자 색 일관성) */ --pnl-pos: var(--success); --pnl-neg: var(--danger); --pnl-flat: var(--fg-3); /* ==================================================================== COLOR — Chart (차트 직렬 — 색맹 친화 + 다크에서 가독) ==================================================================== */ --chart-1: #5cf0c8; /* equity / 누적 — accent */ --chart-2: #4a9eff; /* 보조 라인 */ --chart-3: #ffb020; /* 강조 / drawdown */ --chart-4: #c084fc; /* 카테고리 */ --chart-5: #f472b6; /* 카테고리 */ --chart-6: #a3e635; /* 카테고리 */ --chart-grid: rgba(255, 255, 255, 0.04); --chart-axis: var(--fg-3); /* ==================================================================== TYPOGRAPHY — Families ==================================================================== */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-numeric: var(--font-mono); /* 모든 숫자는 mono — 정렬 위해 */ /* ==================================================================== TYPOGRAPHY — Scale 운영 대시보드는 작은 글자가 많습니다. 11px 가 _최하한_ (테이블 메타). 12-13px 이 본문 표준. 큰 숫자는 KPI 카드에서만 28-40px 사용. ==================================================================== */ --text-2xs: 10px; /* 배지, ticker badge */ --text-xs: 11px; /* 테이블 셀, 메타 */ --text-sm: 12px; /* 기본 본문, 라벨 */ --text-base: 13px; /* 강조 본문 */ --text-md: 14px; /* 카드 타이틀 */ --text-lg: 16px; /* 섹션 헤더 */ --text-xl: 20px; /* 페이지 타이틀 */ --text-2xl: 24px; /* KPI 작은 숫자 */ --text-3xl: 28px; /* KPI 표준 숫자 */ --text-4xl: 36px; /* KPI 강조 숫자 */ --text-display: 44px; /* 히어로 숫자 (드물게) */ /* Line height — 데이터 화면은 tight */ --lh-tight: 1.1; /* 큰 숫자 */ --lh-snug: 1.25; /* 헤더 */ --lh-normal: 1.45; /* 본문 */ /* Font weights — Pretendard Variable */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter spacing — caps 라벨용 */ --tracking-caps: 0.06em; /* SECTION HEADER 같은 caps */ --tracking-tight: -0.01em; /* 큰 숫자 */ /* ==================================================================== SPACING — 4px 그리드, 고밀도 ==================================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ==================================================================== RADIUS — 절제됨. 트레이딩 UI 는 둥근 코너 최소화. ==================================================================== */ --radius-none: 0; --radius-xs: 2px; /* 배지 */ --radius-sm: 4px; /* 버튼, 입력 */ --radius-md: 6px; /* 카드 */ --radius-lg: 8px; /* 큰 패널 */ --radius-pill: 999px; /* ==================================================================== SHADOW — 다크에서는 그림자보다 _배경 lighten_ + _border_ 가 깊이. 하지만 모달/드롭다운엔 어두운 그림자. ==================================================================== */ --shadow-sm: 0 1px 0 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-1); --shadow-glow-success: 0 0 0 1px var(--success-bd), 0 0 12px -2px rgba(0, 212, 163, 0.25); --shadow-glow-danger: 0 0 0 1px var(--danger-bd), 0 0 12px -2px rgba(255, 77, 94, 0.25); --shadow-glow-warn: 0 0 0 1px var(--warn-bd), 0 0 12px -2px rgba(255, 176, 32, 0.25); /* ==================================================================== MOTION — 빠르고 절제됨. 트레이딩 화면에서 애니메이션은 _신호_ 만. ==================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 100ms; /* hover */ --dur-base: 160ms; /* 일반 트랜지션 */ --dur-slow: 240ms; /* 모달, 드로어 */ /* Layout */ --topbar-h: 44px; --sidebar-w: 220px; --sidebar-w-collapsed: 56px; } /* ========================================================================== LIGHT THEME — :root[data-theme="light"] -------------------------------------------------------------------------- 다크 모드가 기본. 라이트 모드는 옵션으로 `` 토글. surface 는 거의 흰색 ~ 매우 연한 cool gray. 트레이딩 화면 라이트모드는 "에어리하게" 가 아니라 "고밀도 + 충분한 대비" 가 우선. ========================================================================== */ :root[data-theme="light"] { /* Surface — pure white 회피 (눈부심), 매우 연한 cool gray */ --bg-0: #f3f5f8; /* body */ --bg-1: #ffffff; /* 패널 / 카드 */ --bg-2: #f7f9fc; /* hover, 카드 위 카드 */ --bg-3: #eef1f6; /* 입력, sticky header */ --bg-elevated: #ffffff; /* 모달, 드롭다운 */ --bg-overlay: rgba(15, 20, 28, 0.32); /* Foreground — 라이트 배경 위 진한 ink */ --fg-1: #0f1419; --fg-2: #4b5563; --fg-3: #6b7384; --fg-4: #97a0ae; --fg-disabled: #c5cdd9; --fg-inverse: #ffffff; /* Border / Divider — 라이트는 border 가 깊이의 주역 */ --border-1: #e3e8ef; --border-2: #cfd6e0; --border-3: #b3bcc9; --divider: rgba(15, 20, 28, 0.06); /* Semantic — 라이트 배경 위 충분한 대비를 위해 톤 다운 */ --success: #00997a; --success-fg: #007a61; /* 텍스트용, 더 진하게 */ --success-bg: rgba(0, 153, 122, 0.10); --success-bd: rgba(0, 153, 122, 0.32); --danger: #e0344b; --danger-fg: #c4263c; --danger-bg: rgba(224, 52, 75, 0.08); --danger-bd: rgba(224, 52, 75, 0.32); --warn: #c97b00; --warn-fg: #a86600; --warn-bg: rgba(201, 123, 0, 0.10); --warn-bd: rgba(201, 123, 0, 0.32); --info: #2f7fe6; --info-fg: #1f63bf; --info-bg: rgba(47, 127, 230, 0.08); --info-bd: rgba(47, 127, 230, 0.32); --accent: #00997a; --accent-bd: rgba(0, 153, 122, 0.36); /* PnL — 라이트에선 _fg_ 변형을 써야 가독 */ --pnl-pos: var(--success-fg); --pnl-neg: var(--danger-fg); --pnl-flat: var(--fg-3); /* Chart — 라이트 배경 기준 명도 낮춰 채도 유지 */ --chart-1: #00997a; --chart-2: #2f7fe6; --chart-3: #c97b00; --chart-4: #8b5cf6; --chart-5: #db2777; --chart-6: #65a30d; --chart-grid: rgba(15, 20, 28, 0.06); --chart-axis: var(--fg-3); /* Shadow — 라이트에선 그림자가 깊이의 주역 */ --shadow-sm: 0 1px 2px 0 rgba(15, 20, 28, 0.06); --shadow-md: 0 4px 12px -2px rgba(15, 20, 28, 0.10), 0 2px 4px -1px rgba(15, 20, 28, 0.06); --shadow-lg: 0 12px 32px -4px rgba(15, 20, 28, 0.14), 0 0 0 1px var(--border-1); --shadow-glow-success: 0 0 0 1px var(--success-bd), 0 0 10px -2px rgba(0, 153, 122, 0.20); --shadow-glow-danger: 0 0 0 1px var(--danger-bd), 0 0 10px -2px rgba(224, 52, 75, 0.20); --shadow-glow-warn: 0 0 0 1px var(--warn-bd), 0 0 10px -2px rgba(201, 123, 0, 0.20); /* Font weights — 라이트는 한 단계씩 더 두껍게 (대비 줄어든 만큼 굵기로 보강) */ --fw-regular: 500; --fw-medium: 600; --fw-semibold: 700; --fw-bold: 800; } /* 라이트모드 body 기본 weight 도 함께 올림 */ :root[data-theme="light"] body { font-weight: var(--fw-regular); } /* ========================================================================== SEMANTIC TYPOGRAPHY ELEMENTS ========================================================================== */ html, body { background: var(--bg-0); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "ss02", "tnum", "cv11"; } h1, .h1 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } h2, .h2 { font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h3, .h3 { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; } .label-caps { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); } .label { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--fg-2); } .meta { font-size: var(--text-xs); color: var(--fg-3); } /* 모든 숫자는 mono + tabular-nums */ .num, .mono, code, kbd, samp, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero"; } .num-lg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .num-xl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-4xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } /* PnL 색 헬퍼 */ .pnl-pos { color: var(--success-fg); } .pnl-neg { color: var(--danger-fg); } .pnl-flat { color: var(--fg-3); } .pnl-warn { color: var(--warn-fg); } * { box-sizing: border-box; } ::selection { background: var(--accent-bd); color: var(--fg-1); }