/* ========================================================================== 공용 디자인 토큰 — 자산관리(stock) · 도치일기(dochi) 공통 단일 소스 -------------------------------------------------------------------------- 두 페이지가 서로 다른 팔레트/모서리/글자크기를 쓰던 것을 여기로 통합했다. 페이지별 CSS 에서는 색·모서리·글자크기를 직접 쓰지 말고 이 변수만 참조한다. 토큰 이름은 두 벌을 함께 제공한다 (값은 완전히 동일): stock 계열 : --bg-app / --bg-surface / --text-secondary / --accent-primary dochi 계열 : --bg-main / --bg-card / --text-sub / --primary 테마 정책: VS Code 고대비(흑백 기반) 스타일 ☀️ 주간 = 흰색 70% 회색(#B3B3B3) 배경 + 순수 흑 텍스트 🌙 야간 = 흰색 10% 회색(#1A1A1A) 배경 + 밝은 회색(#F0F0F0) 텍스트·테두리 흰색 정책: 순수 흰색(#FFFFFF)을 쓰지 않는다. 주간 베이스는 흰색의 70%(#B3B3B3), 야간 베이스는 흰색의 10%(#1A1A1A). 텍스트·테두리 등 밝은 회색 토큰은 #F0F0F0 계열을 유지한다. ========================================================================== */ :root { /* ── 타이포 스케일 (순차적 · 1단계씩) ─────────────────────────── */ --fs-2xs: 11px; /* 뱃지, 각주 */ --fs-xs: 12px; /* 보조 설명 */ --fs-sm: 13px; /* 라벨, 표 본문 */ --fs-base: 14px; /* 기본 본문 */ --fs-md: 16px; /* 강조 본문 */ --fs-lg: 18px; /* 카드 제목 */ --fs-xl: 22px; /* 섹션 제목 */ --fs-2xl: 28px; /* KPI 숫자 */ --fs-3xl: 34px; /* 대표 숫자 */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.2; --lh-normal: 1.5; /* ── 간격 (4px 배수) ──────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ── 모서리 (dochi 패밀리 통일 디자인) ────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; /* ── 카드 규격 : 네모 세로 크기를 전부 동일하게 ───────────────── */ --card-pad: 20px; --card-min-h: 132px; /* KPI 카드 공통 높이 */ --card-header-h: 56px; /* 카드 헤더 공통 높이 */ --control-h: 36px; /* 버튼·입력창 공통 높이 */ --control-h-sm: 30px; --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* ── 트랜지션 ─────────────────────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; /* ══ ☀️ 주간 모드 (베이스 = 흰색의 80% · #CCCCCC) ═══════════════ */ --bg-app: #CCCCCC; --bg-surface: #D6D6D6; --bg-surface-elevated: #C4C4C4; --bg-surface-hover: #B8B8B8; --bg-input: #CCCCCC; --border-color: #000000; --border-subtle: #767676; --border-hover: #000000; --text-main: #000000; --text-secondary: #3C3C3C; --text-muted: #5A5A5A; --on-accent: #FFFFFF; /* 강조색 배경 위 텍스트 (주간: 흰색) */ --chart-grid: rgba(0, 0, 0, 0.16); /* 차트 캔버스 그리드 (var() 불가 → 값 직접 읽음) */ --accent-primary: #004080; --accent-primary-hover: #002D5C; --accent-glow: rgba(0, 64, 128, 0.20); --accent-soft: rgba(0, 64, 128, 0.12); --color-profit: #0A7E3D; --color-profit-bg: rgba(10, 126, 61, 0.12); --color-loss: #C50F1F; --color-loss-bg: rgba(197, 15, 31, 0.12); --color-gold: #8A5B00; --color-gold-bg: rgba(138, 91, 0, 0.14); --accent-pink: #C21A6E; --accent-green: #0A7E3D; --accent-blue: #004080; --accent-purple: #5B21B6; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.14); --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.18); /* ── dochi 계열 별칭 (값 동일) ────────────────────────────────── */ --bg-main: var(--bg-app); --bg-card: var(--bg-surface); --bg-sub: var(--bg-surface-elevated); --text-sub: var(--text-secondary); --primary: #004080; --primary-hover: #002D5C; --primary-dark: #001F3F; --primary-light: rgba(0, 64, 128, 0.12); --secondary: #8A5B00; --shadow-soft: var(--shadow-md); --shadow-float: var(--shadow-lg); } /* ══ 📱 모바일 보정 ═════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --control-h: 44px; --control-h-sm: 38px; --card-pad: 16px; } } /* ══ 🌙 야간 모드 (베이스 = 흰색의 10% · #1A1A1A) ═════════════════ */ body.dark-theme, [data-theme="dark"] { --bg-app: #1A1A1A; --bg-surface: #262626; --bg-surface-elevated: #383838; --bg-surface-hover: #4D4D4D; --bg-input: #1A1A1A; --border-color: #F0F0F0; --border-subtle: #9E9E9E; --border-hover: #F0F0F0; --text-main: #F0F0F0; --text-secondary: #D4D4D4; --text-muted: #A6A6A6; --on-accent: #000000; /* 강조색 배경 위 텍스트 (야간: 검은색) */ --chart-grid: rgba(255, 255, 255, 0.28); /* 차트 캔버스 그리드 (var() 불가 → 값 직접 읽음) */ --accent-primary: #3794FF; --accent-primary-hover: #5CA8FF; --accent-glow: rgba(55, 148, 255, 0.25); --accent-soft: rgba(55, 148, 255, 0.16); --color-profit: #3DDC84; --color-profit-bg: rgba(61, 220, 132, 0.16); --color-loss: #FF5C5C; --color-loss-bg: rgba(255, 92, 92, 0.16); --color-gold: #FFDD57; --color-gold-bg: rgba(255, 221, 87, 0.14); --accent-pink: #FF6B9D; --accent-green: #3DDC84; --accent-blue: #3794FF; --accent-purple: #C586FF; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.55); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.65); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.75); --primary: #3794FF; --primary-hover: #5CA8FF; --primary-dark: #6FB4FF; --primary-light: rgba(55, 148, 255, 0.18); --secondary: #FFDD57; } /* ══ ☀️ 주간 모드 (명시 선택 시 · 베이스 = 흰색의 80% · #CCCCCC) ═══ */ body.light-theme, [data-theme="light"] { --bg-app: #CCCCCC; --bg-surface: #D6D6D6; --bg-surface-elevated: #C4C4C4; --bg-surface-hover: #B8B8B8; --bg-input: #CCCCCC; --border-color: #000000; --border-subtle: #767676; --border-hover: #000000; --text-main: #000000; --text-secondary: #3C3C3C; --text-muted: #5A5A5A; --on-accent: #FFFFFF; /* 강조색 배경 위 텍스트 (주간: 흰색) */ --chart-grid: rgba(0, 0, 0, 0.16); /* 차트 캔버스 그리드 (var() 불가 → 값 직접 읽음) */ --accent-primary: #004080; --accent-primary-hover: #002D5C; --accent-glow: rgba(0, 64, 128, 0.20); --accent-soft: rgba(0, 64, 128, 0.12); --color-profit: #0A7E3D; --color-profit-bg: rgba(10, 126, 61, 0.12); --color-loss: #C50F1F; --color-loss-bg: rgba(197, 15, 31, 0.12); --color-gold: #8A5B00; --color-gold-bg: rgba(138, 91, 0, 0.14); --accent-pink: #C21A6E; --accent-green: #0A7E3D; --accent-blue: #004080; --accent-purple: #5B21B6; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.14); --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.18); --primary: #004080; --primary-hover: #002D5C; --primary-dark: #001F3F; --primary-light: rgba(0, 64, 128, 0.12); --secondary: #8A5B00; }