/* ========================================================================== FUTURELY 디자인 시스템 토큰 색 조합: 노션 · 모노톤 / 버튼: 입체 그림자 / 폰트: Space Grotesk / 아이콘: 듀오톤 ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap'); :root { /* 색상 */ --primary: #2383E2; --primary-dark: #1a6bc0; --text: #191919; --sub: #787774; --bg: #FFFFFF; --bg-rgb: 255,255,255; /* var(--bg)를 rgba()에 섞어 써야 하는 곳(topbar 반투명 블러)에만 사용 */ --surface: #F7F6F3; --border: #E9E9E7; /* 시맨틱 색상 (모노톤 팔레트 안에서 최소한으로만 사용) */ --success: #2e8b57; --warning: #c77b17; --danger: #d1453b; /* 브랜드 하늘색 보조 토큰 — AI 응답 카드, 강조 CTA 등 제한된 영역에만 사용 */ --sky-tint: #EAF6FE; --sky-border: #BFE3FB; --sky-accent: #4FB6F0; /* 반경 / 간격 */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* 그림자 (입체 그림자 버튼 시스템) */ --shadow-btn: 0 6px 14px rgba(0,0,0,.25); --shadow-btn-hover: 0 10px 20px rgba(0,0,0,.32); --shadow-card: 0 1px 3px rgba(0,0,0,.06); --shadow-card-hover: 0 6px 16px rgba(0,0,0,.10); /* 폰트 */ --font: 'Space Grotesk', sans-serif; /* 레이아웃 */ --sidebar-w: 248px; --topbar-h: 64px; } /* ========================================================================== 다크 모드 — 일 때만 재정의한다. --primary/--success/--warning/--danger/--sky-accent 등 브랜드·시맨틱 색상은 라이트/다크 공통으로 그대로 두었다(채도가 있는 색은 어두운 배경에서도 대비가 충분하고, badge/form-message 등이 이미 이 색을 rgba()로 옅게 섞어 쓰고 있어 여기서 색을 바꾸면 그 rgba() 값들과 어긋나기 때문). 배경/표면/글자처럼 "밝기"가 핵심인 무채색 계열만 순수 검정이 아닌 네이비·차콜 톤으로 재정의한다. ========================================================================== */ [data-theme="dark"] { --text: #ECEDEE; --sub: #9BA1AC; --bg: #14171C; --bg-rgb: 20,23,28; --surface: #1C2028; --border: #646B79; /* --bg/--surface 대비 각각 3.35:1 / 3.05:1 — WCAG 비텍스트(UI 경계) 권장 3:1 충족 */ /* AI 응답 카드(card-ai)용 — 라이트 모드의 아주 옅은 하늘색 톤을 다크에서는 짙은 네이비 톤으로 대응시킨다. */ --sky-tint: #17232C; --sky-border: #2A4055; /* 다크 배경 위에서는 옅은 그림자가 거의 안 보이므로 알파를 올려 카드 경계가 테두리(border)만으로도, 그리고 그림자로도 이중으로 확실히 드러나게 한다. */ --shadow-btn: 0 6px 14px rgba(0,0,0,.5); --shadow-btn-hover: 0 10px 20px rgba(0,0,0,.6); --shadow-card: 0 1px 3px rgba(0,0,0,.4); --shadow-card-hover: 0 6px 16px rgba(0,0,0,.5); }