/* ============================================================ Changup.AI Design System v1 — 토큰 ------------------------------------------------------------ 출처: docs/mockups/20260922/창업AI/자료함.html 의 :root 블록 (rev.4) ⚠ **이 파일에는 선언만 둔다.** 규칙(셀렉터)을 넣기 시작하면 모든 화면에 걸리는 전역 스타일시트가 된다. 규칙은 화면별 CSS 에 쓴다. ⚠ 지금은 **자료함만** 이 값을 쓴다. 다른 화면은 주입만 되고 아무 변화가 없다 — 이름이 `--color-…` 꼴이라 기존 CSS 의 `--sans`·`--sp5` 같은 이름과 겹치지 않는다. 겹치지 않는다는 것을 tokens.rules.test.ts 가 지킨다. 시안이 스스로 미결로 남긴 값(카드 모서리 20 · 작은 버튼 38)은 **시안 값 그대로** 가져왔다. 판단 근거가 될 DS 규칙서가 전달물에 없다(SCRUM-206 참고). 로고는 가져오지 않았다 — 헤더는 AppShell 것을 쓰고, 시안의 SVG 는 안에 래스터 PNG 6장이 들어 있어 84KB 다. ============================================================ */ :root{ /* --- 01 Primitive : Brand ------------------------------------------------ */ --color-brand-teal-50:#EEFAF9; --color-brand-teal-100:#D3F2F0; --color-brand-teal-300:#8BDCD9; --color-brand-teal-500:#51C6CA; --color-brand-teal-700:#2F8F96; --color-brand-cyan-50:#ECF8FD; --color-brand-cyan-100:#CFEEFA; --color-brand-cyan-300:#93DCF3; --color-brand-cyan-500:#57CBED; --color-brand-cyan-700:#2B90B4; --color-brand-blue-50:#EEF3FE; --color-brand-blue-100:#D5E2FB; --color-brand-blue-300:#9CBAF8; --color-brand-blue-500:#6694F5; --color-brand-blue-700:#3A67C9; --color-brand-indigo-50:#EDF0FA; --color-brand-indigo-100:#D6DDF3; --color-brand-indigo-300:#93A5E2; --color-brand-indigo-500:#4363CA; --color-brand-indigo-700:#2C4491; /* gray/800 — 자료 상세 CTA 배너 배경. Figma 변수는 존재하나 §3 에 문서화되어 있지 않고 대응 semantic(surface/inverse)도 없다. Toast 의 gray/900 과 같은 성격의 §47-9 예외다. */ --color-brand-gray-800:#252D44; --color-brand-peri-50:#F2F2FE; --color-brand-peri-100:#E2E2FB; --color-brand-peri-300:#B6B7F6; --color-brand-peri-500:#8C8FF2; --color-brand-peri-700:#5B5EC4; /* --- 01 Primitive : Gray / Base ------------------------------------------ */ --color-brand-orange-50:#FDF6E8; --color-brand-orange-500:#E0972B; --color-brand-green-50:#EDF7F1; --color-brand-green-100:#D4EBDE; --color-brand-green-300:#92CFAF; --color-brand-green-400:#63B58D; --color-brand-green-500:#299C6D; --color-brand-green-700:#118057; --color-brand-red-500:#D9534F; --color-brand-gray-25:#FAFBFD; --color-brand-gray-50:#F2F5FA; --color-brand-gray-100:#EFF2F7; --color-brand-gray-200:#E6E9F1; --color-brand-gray-300:#D5DAE6; --color-brand-gray-400:#9AA0B2; --color-brand-gray-500:#6B7288; --color-brand-gray-700:#454C61; --color-brand-gray-900:#0D1120; --color-base-white:#FFFFFF; /* --- 02 Semantic : Action ------------------------------------------------ */ --color-action-primary:var(--color-brand-blue-500); --color-action-primary-hover:var(--color-brand-blue-700); --color-action-primary-subtle:var(--color-brand-blue-50); --color-action-primary-border:var(--color-brand-blue-100); --color-action-strong:var(--color-brand-indigo-500); /* --- 02 Semantic : Text -------------------------------------------------- */ --color-text-primary:var(--color-brand-gray-900); --color-text-secondary:var(--color-brand-gray-700); --color-text-muted:var(--color-brand-gray-500); --color-text-faint:var(--color-brand-gray-400); --color-text-inverse:var(--color-base-white); /* --- 02 Semantic : Surface / Border -------------------------------------- */ --color-surface-default:var(--color-base-white); --color-surface-subtle:var(--color-brand-gray-50); --color-surface-sunken:var(--color-brand-gray-25); --color-border-subtle:var(--color-brand-gray-100); --color-border-default:var(--color-brand-gray-200); --color-border-strong:var(--color-brand-gray-300); /* --- 02 Semantic : Status ------------------------------------------------ */ --color-status-progress:var(--color-brand-cyan-500); --color-status-progress-subtle:var(--color-brand-cyan-50); --color-status-ai:var(--color-brand-peri-500); --color-status-ai-subtle:var(--color-brand-peri-50); --color-status-complete:var(--color-brand-green-500); --color-status-complete-subtle:var(--color-brand-green-50); --color-status-complete-border:var(--color-brand-green-400); --color-status-warning:var(--color-brand-orange-500); --color-status-warning-subtle:var(--color-brand-orange-50); --color-status-danger:var(--color-brand-red-500); /* --- Gradient (Figma Paint Styles, §3.5) --------------------------------- */ --gradient-button:linear-gradient(180deg,var(--color-brand-blue-500) 0%,var(--color-brand-indigo-500) 100%); --gradient-surface:linear-gradient(135deg,var(--color-brand-teal-50) 0%,var(--color-brand-blue-50) 45%,var(--color-brand-peri-50) 100%); --gradient-hairline:linear-gradient(95deg,var(--color-brand-teal-300) 0%,var(--color-brand-blue-300) 50%,var(--color-brand-peri-300) 100%); /* --- Spacing (§5, 4px grid) ---------------------------------------------- */ --space-1:4px; --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 (§6) ---------------------------------------------------------- */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; /* ⚠ §6 미승인값. 카드·다이얼로그·미리보기가 공유하는 20px 를 토큰으로 묶어 NORMALIZE(→ radius/xl 24) 결정 시 한 줄만 고치면 되게 한다. §47-23 */ --radius-card:20px; --radius-xl:24px; --radius-full:999px; /* --- Layout (§7 / §7.1 Responsive Page Inset) ------------------------------ 좌우 고정 inset(170px)은 폐기되었다. 페이지 여백은 `max-width: container + margin-inline:auto + padding-inline: gutter` 로만 만든다. 뷰포트별 콘텐츠 폭은 §7.1 표를 따른다. ------------------------------------ */ --layout-shell-height:54px; --layout-container-default:1120px; --layout-container-narrow:760px; --layout-gutter-desktop:40px; --layout-gutter-mobile:20px; --layout-gutter:var(--layout-gutter-desktop); /* §7.1: ≤760 에서 mobile 로 전환 */ /* 서비스 지원 최소 뷰포트. 이보다 좁아지면 레이아웃을 더 줄이지 않고 페이지 가로 스크롤로 넘긴다(§35 는 컨테이너 스크롤 규칙이므로 별개). 360 = Galaxy S/A 계열 실사용 최소 폭. 승인 2026-09-18. */ --layout-min-width-mobile:360px; /* --- Control size (§12) --------------------------------------------------- */ --control-sm:32px; --control-md:40px; --control-lg:48px; --control-xl:56px; /* §12 승격(2026-09-18) — Base/Button size=lg · Composite/Search size=xl 공유 */ /* --- Icon (§11) ----------------------------------------------------------- */ --icon-size-16:16px; --icon-size-20:20px; --icon-size-24:24px; --icon-stroke-regular:1.5; /* Figma 토큰 기준. 문서(§11)는 2 — §47-12 미해결 */ /* --- Shadow / Focus (§9) -------------------------------------------------- */ --shadow-e1:0 1px 2px 0 rgba(13,17,32,.05), 0 1px 0 0 #EFF2F7; --shadow-e2:0 6px 18px -10px rgba(13,17,32,.22); --shadow-e3:0 10px 30px -18px rgba(13,17,32,.20), 0 1px 0 0 #EFF2F7; --shadow-e4:0 22px 54px -18px rgba(13,17,32,.28); /* Figma Effect Style `Focus/Ring` = spread 1 blue/500(안쪽 선) + spread 3 blue/100(바깥) CSS 는 먼저 쓴 그림자가 위에 그려지므로 blue/500 을 앞에 둔다. */ --focus-ring:0 0 0 1px var(--color-action-primary), 0 0 0 3px var(--color-brand-blue-100); /* --- Motion (§10) --------------------------------------------------------- */ --motion-duration-fast:140ms; --motion-duration-base:200ms; --motion-duration-slow:320ms; --motion-easing-default:cubic-bezier(.22,.61,.36,1); --motion-easing-exit:cubic-bezier(.55,.06,.68,.19); /* --- Typography (§4) ------------------------------------------------------ */ --typography-font-family-sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,sans-serif; /* --- Typography (§4 / §44) -------------------------------------------------- Figma Text Style 과 1:1 이다. size / line / tracking 은 스케일 단계가 공유하고, weight 만 스타일별로 다르다(Body / Body-Medium / Body-Strong 은 같은 단계). ⚠ Figma 에는 아직 typography Variable 이 없고 Text Style 로만 존재한다. 이 토큰 이름은 §44 매핑 규칙(`typography/body/size` → `--typography-body-size`)을 따른 코드측 선언이며, Figma Variable 승격은 §47 등재 대상이다. */ --typography-display-size:50px; --typography-display-line:64px; --typography-display-tracking:-2.4px; --typography-h1-size:36px; --typography-h1-line:48px; --typography-h1-tracking:-1.5px; --typography-h2-size:24px; --typography-h2-line:34px; --typography-h2-tracking:-.8px; --typography-h3-size:20px; --typography-h3-line:29px; --typography-h3-tracking:-.5px; --typography-lead-size:18px; --typography-lead-line:29px; --typography-lead-tracking:-.3px; --typography-body-size:16px; --typography-body-line:26px; --typography-body-tracking:-.2px; --typography-small-size:14px; --typography-small-line:22px; --typography-small-tracking:-.1px; --typography-caption-size:12px; --typography-caption-line:18px; --typography-caption-tracking:0; --typography-micro-size:10px; --typography-micro-line:14px; --typography-micro-tracking:0; /* §4 허용 weight 5종. 650/750/900 은 만들지 않는다. */ --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800; /* §4 Mobile 스케일 — 현재 구현은 H1 만 축소한다. ⚠ §4 는 Display 32 / H2 22 / H3 18 / Lead 16 도 규정하지만 line-height·tracking 명세가 없어 구현하지 않았다. 아래 38 / -1.2 도 §4 에 없는 기존 구현값이다. §47 등재 대상. */ --typography-h1-mobile-size:28px; --typography-h1-mobile-line:38px; --typography-h1-mobile-tracking:-1.2px; /* main 세로 패딩 — §5 승인 spacing token 이 아니다(60 은 §7 section-y/desktop 64 와도 어긋남). 2026-09-18 Human Review 에서 현행 유지(EXCEPTION)로 결정했다. §47-25 / §53 예외표 */ --layout-main-pad-top:60px; --layout-hero-pad-top:100px; /* §47-46 해소 — Figma 100.9 → 100 NORMALIZE. §5 미승인값이므로 §53 EXCEPTION */ --layout-section-gap:80px; /* Figma content gap 80 (Search Result ↔ 추천 자료). §5 미승인 — §53 EXCEPTION, space/20 승격 검토 중 */ --layout-main-pad-bottom:100px; /* --- Hero 배경 --- 시안에서 내보낸 1440×286 이미지. CSS 그라디언트 근사가 아니다. */ --hero-bg:url('/img/library/hero-bg.webp'); }