/* ═══════════════════════════════════════════════════════════════
OpenSurvey Dataspace AI — DESIGN TOKENS (master snapshot)
출처: index.html(Hero) :root — Figma 5LZ47wmOKr0lp3ZTqfXatd
섹션 데모는 이 파일 + engine.css + engine.js 를 import 해서
Hero 와 동일한 룩을 그대로 이어받는다. index.html 은 건드리지 않음(스냅샷).
⚠️ 폰트/아이콘은 CSS 가 아니라 링크로 로드 — 데모 HTML 에 함께 넣을 것:
═══════════════════════════════════════════════════════════════ */
:root {
/* === Dataspace AI 디자인 토큰 (Figma 5LZ47…) === */
/* Surface — 중립 뉴트럴 (ChatGPT 레퍼런스) */
--bg-page: #F4F4F4;
--bg-sidebar: #F9F9F9;
--bg-rail: #ECF0F7; /* 레일 색상 */
--bg-canvas: #ffffff;
--bg-card: #ffffff;
--bg-hover: #F3F3F3;
--bg-active: #F0F5FF; /* Blue-01 — 메인 컬러는 자사 DS 유지 */
--bg-input: #ffffff;
/* Border — 뉴트럴 그레이 */
--border: #ECECEC;
--border-strong: #D9D9D9;
--border-focus: #4781FF; /* Blue-07 */
/* Text — 고대비 뉴트럴 */
--text-primary: #0D0D0D;
--text-secondary: #5D5D5D;
--text-tertiary: #8F8F8F;
--text-accent: #4781FF; /* Blue-07 */
--text-white: #ffffff;
/* Gray scale (full) — 뉴트럴 */
--gray-08: #6E6E6E;
--gray-10: #424242;
--gray-12: #2A2A2A;
--grayop-02: #5D5D5D;
/* Brand (Blue) */
--blue: #4781FF; /* Blue-07 */
--blue-light: #E0EAFF; /* Blue-02 */
--blue-soft: #F0F5FF; /* Blue-01 */
--blue-faint: #F6F8FC; /* Blue-00 — 표/노트/인용 등 옅은 정보 면 */
--blue-hover: #2469FF; /* Blue-08 */
--blue-deep: #0050FF; /* Blue-09 */
--navy: #1E293B;
/* 차트 카테고리 팔레트 (계열 1~6) — 데이터 시각화 공통 색 시스템 */
--chart-1: #C1D7FF; /* 옅은 블루 */
--chart-2: #83ADFF;
--chart-3: #0050FF; /* 진한 블루 */
--chart-4: #C7AD83; /* 탄 */
--chart-5: #E67E22; /* 오렌지 */
--chart-6: #7B879B; /* 슬레이트 */
--sig-pos: #0EC5D1; /* 시그널 — 긍정/높음 */
--sig-neg: #F14448; /* 시그널 — 부정/낮음 */
/* State */
--red: #DD4040; /* Red-06 — 유의 높음 */
--green: #40B08E; /* Green-06 */
--green-bg: #D6F0E8; /* Green-02 */
--yellow: #EDB90C; /* Yellow-06 */
--orange: #F18C2D; /* Orange-06 */
--sky: #0E9CAA; /* Sky-08 */
/* Data colors */
--chart-blue: #4781FF;
--chart-green: #40B08E;
/* Shadows — 플랫 최소화 (보더·면 대비 위주) */
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 2px 8px rgba(0,0,0,.06);
--shadow-lg: 0 8px 24px rgba(0,0,0,.10);
/* Radius — 크고 부드럽게 */
--r-xs: 5px;
--r-sm: 8px;
--r-md: 13px;
--r-lg: 21px;
--r-xl: 34px;
--r-pill:9999px;
/* Motion */
--t-fast: 150ms ease;
--t-normal: 200ms ease;
/* Font */
--font: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', monospace;
}
/* ═══════════════════════════════════════════════
RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
font-size: 14px;
line-height: 22px;
color: var(--text-primary);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }
/* 클릭 가능한 요소는 포인터(손가락) 커서 — 엔진 공용 셀렉터만 (Hero 전용 .hero-tab 등 제외) */
[onclick], [role="button"], .clickable, .chat-item, .rail-row, .sd-q, .ed-li,
.co-option, .co-start, .cc-data, .file-chip.clickable, .cc-card.cc-done.clickable,
.send-btn, .composer-attach, .artifact-close, .av-ds, .sd-edit-cta button { cursor: pointer; }