nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-11
feat: Figma 디자인 토큰 531개를 @fox/styles로 이식 
Figma 컬렉션 5개(primitive/theme/size/테마/반응형)·모드 7개를 옮겼다.
색상은 light/dark를 light-dark() 한 줄에 묶어 테마 드리프트를 구조적으로 막고,
반응형 크기는 모바일 우선으로 깔고 768px 이상에서 pc 값이 덮는다.

Figma의 alias를 CSS에서도 var() 참조로 보존했다 — 색상 표현 542개 중 476개가
primitive/theme를 참조하므로 바닥층을 바꾸면 시맨틱까지 전파된다. 참조 대상이
없거나 값이 어긋나는 것만 리터럴로 떨어뜨렸다.

알파 색상은 rgb(R G B / A)로 낸다. hex는 알파를 담지 못해 그대로 두면 반투명이
불투명이 된다.

루트에 소속 없이 들어 있던 29개는 두 번째 theme 컬렉션(미제공)을 참조하며
chart-alt로 명명했다 — 이름은 임시다.

Co-Authored-By: Claude Opus 5
@c619a3b9c3f30b4e4e7c143da43dced20bb1f5cc
 
c619a3b
@fox/styles/_functions.scss (added)
+++ @fox/styles/_functions.scss
@@ -0,0 +1,103 @@
+// 토큰 접근 함수 — 디자인 시스템 규율을 **컴파일러가 강제**하는 지점.
+//
+// 화면 코드는 `color: #256EF4`나 `padding: 13px`를 쓸 수 없고, 반드시
+// `color: fox.color(font-neutral-strong)` / `padding: fox.padding(6)`로 토큰을
+// 지목해야 한다. 존재하지 않는 이름을 쓰면 `@error`로 **빌드가 실패**하고 사용
+// 가능한 토큰 목록이 함께 출력된다.
+//
+// 반환값은 CSS 커스텀 프로퍼티 참조(`var(--fox-*)`)다. 값이 아니라 참조를 돌려주므로
+// (1) 라이트/다크와 pc/모바일이 런타임에 전환되고 (2) 특정 영역만 토큰을 덮어쓰는
+// 스코프 오버라이드가 가능하며 (3) devtools에서 어떤 토큰인지 그대로 보인다.
+
+@use "sass:map";
+@use "tokens";
+
+/// 토큰 이름을 검증하고 커스텀 프로퍼티 참조를 반환한다.
+@function _token($group, $key, $registry, $var-name) {
+  @if not map.has-key($registry, $key) {
+    @error "[@fox] 알 수 없는 #{$group} 토큰: `#{$key}` — 사용 가능한 값: #{map.keys($registry)}";
+  }
+
+  @return var(--fox-#{$var-name});
+}
+
+
+@function color($name) {
+  @return _token("color", $name, tokens.$color, "color-#{$name}");
+}
+
+@function primitive($name) {
+  @return _token("primitive", $name, tokens.$primitive, "primitive-#{$name}");
+}
+
+@function theme($name) {
+  @return _token("theme", $name, tokens.$theme, "theme-#{$name}");
+}
+
+@function number($name) {
+  @return _token("number", $name, tokens.$number, "number-#{$name}");
+}
+
+@function font-family($name) {
+  @return _token("font-family", "family-#{$name}", tokens.$font, "font-family-#{$name}");
+}
+
+@function font-weight($name) {
+  @return _token("font-weight", "weight-#{$name}", tokens.$font, "font-weight-#{$name}");
+}
+
+@function border($name) {
+  @return _token("border", "border-#{$name}", tokens.$size, "border-#{$name}");
+}
+
+@function padding($name) {
+  @return _token("padding", "padding-#{$name}", tokens.$size, "padding-#{$name}");
+}
+
+@function gap($name) {
+  @return _token("gap", "gap-#{$name}", tokens.$size, "gap-#{$name}");
+}
+
+@function radius($name) {
+  @return _token("radius", "radius-#{$name}", tokens.$size, "radius-#{$name}");
+}
+
+@function icon($name) {
+  @return _token("icon", "icon-#{$name}", tokens.$size, "icon-#{$name}");
+}
+
+@function shadow($name) {
+  @return _token("shadow", "shadow-#{$name}", tokens.$size, "shadow-#{$name}");
+}
+
+@function backdrop($name) {
+  @return _token("backdrop", "backdrop-#{$name}", tokens.$size, "backdrop-#{$name}");
+}
+
+@function font-size($name) {
+  @return _token("font-size", "font-size-#{$name}", tokens.$responsive, "font-size-#{$name}");
+}
+
+@function form($name) {
+  @return _token("form", "form-#{$name}", tokens.$responsive, "form-#{$name}");
+}
+
+@function grid($name) {
+  @return _token("grid", "grid-#{$name}", tokens.$responsive, "grid-#{$name}");
+}
+
+@function card($name) {
+  @return _token("card", "card-#{$name}", tokens.$responsive, "card-#{$name}");
+}
+
+@function modal($name) {
+  @return _token("modal", "modal-#{$name}", tokens.$responsive, "modal-#{$name}");
+}
+
+@function spacing($name) {
+  @return _token("spacing", "spacing-#{$name}", tokens.$responsive, "spacing-#{$name}");
+}
+
+@function section($name) {
+  @return _token("section", "section-#{$name}", tokens.$responsive, "section-#{$name}");
+}
 
c619a3b
@fox/styles/_mixins.scss (added)
+++ @fox/styles/_mixins.scss
@@ -0,0 +1,20 @@
+// 믹스인 — 여러 선언이 항상 함께 가야 하는 패턴을 묶는다.
+
+@use "tokens";
+
+/// PC 이상(>= 768px)에서 적용. 모바일 우선이므로 기본 스타일은 밖에 쓴다.
+///
+/// ⚠️ 미디어 쿼리 조건부는 `var()`를 해석하지 못하므로 브레이크포인트만은 CSS 변수가
+/// 아닌 컴파일타임 값이다. 그래서 이 믹스인 경유가 강제된다.
+@mixin pc {
+  @media (min-width: tokens.$breakpoint-pc) {
+    @content;
+  }
+}
+
+/// PC 미만에서만 적용. `pc`와 경계가 겹치지 않도록 0.02px을 뺀다.
+@mixin mobile {
+  @media (max-width: tokens.$breakpoint-pc - 0.02px) {
+    @content;
+  }
+}
 
c619a3b
@fox/styles/_root.scss (added)
+++ @fox/styles/_root.scss
@@ -0,0 +1,71 @@
+// 토큰 CSS 출력 — `tokens/`의 SCSS map을 `--fox-*` 커스텀 프로퍼티로 선언한다.
+//
+// **앱 전체에서 딱 한 번만 로드되어야 한다** (`index.scss` 경유).
+// 컴포넌트의 `.module.scss`에서는 절대 `@use` 하지 않는다.
+//
+// map을 순회해 생성하므로 토큰을 추가할 때 이 파일은 손대지 않는다.
+
+@use "sass:map";
+@use "tokens";
+
+:root {
+  // 기본은 OS 설정 추종. 아래 `[data-theme]` 규칙이 이 값만 덮어써 수동 선택을
+  // 처리하므로, 색상 값 자체는 `tokens/_color.scss` 한 곳에만 존재한다.
+  color-scheme: light dark;
+
+  @each $name, $value in tokens.$primitive {
+    --fox-primitive-#{$name}: #{$value};
+  }
+
+  @each $name, $value in tokens.$font {
+    --fox-font-#{$name}: #{$value};
+  }
+
+  @each $name, $value in tokens.$number {
+    --fox-number-#{$name}: #{$value};
+  }
+
+  @each $name, $value in tokens.$theme {
+    --fox-theme-#{$name}: #{$value};
+  }
+
+  // size / color / responsive 는 이름에 그룹이 이미 들어 있어 접두사가 `--fox-` 뿐이다.
+  @each $name, $value in tokens.$size {
+    --fox-#{$name}: #{$value};
+  }
+
+  @each $name, $value in tokens.$color {
+    --fox-color-#{$name}: #{$value};
+  }
+
+  // 모바일 우선 기본값.
+  @each $name, $value in tokens.$responsive {
+    --fox-#{$name}: #{$value};
+  }
+}
+
+// PC 모드 — 반응형 토큰만 덮어쓴다. 색상은 뷰포트와 무관하므로 여기 오지 않는다.
+@media (min-width: tokens.$breakpoint-pc) {
+  :root {
+    @each $name, $value in tokens.$responsive-pc {
+      --fox-#{$name}: #{$value};
+    }
+  }
+}
+
+// 수동 테마 선택 — `color-scheme`만 고정하면 `light-dark()`가 해당 분기로 확정된다.
+// 속성이 없거나 `"system"`이면 위 `:root`의 `light dark`가 유지되어 OS를 따른다.
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+// ⚠️ 1rem = 10px 규약의 근거. 브라우저 기본 글자 크기(16px)의 62.5%가 10px다.
+// 모든 토큰의 rem 값이 이 선언을 전제로 계산돼 있다.
+// 미디어 쿼리 안의 rem은 이 값의 영향을 받지 않는다(항상 브라우저 기본 크기 기준).
+html {
+  font-size: 62.5%;
+}
 
c619a3b
@fox/styles/abstracts.scss (added)
+++ @fox/styles/abstracts.scss
@@ -0,0 +1,17 @@
+// 저작(authoring) 진입점 — 컴포넌트의 `.module.scss`가 `@use`하는 파일.
+//
+//   @use "@fox/styles/abstracts" as fox;
+//
+//   .button {
+//     padding: fox.padding(5) fox.padding(7);
+//     background: fox.color(button-primary-surface);
+//     border-radius: fox.radius(3);
+//     font-size: fox.font-size(label-md);
+//   }
+//
+// ⚠️ **이 파일은 CSS를 한 줄도 출력하지 않는다.** 함수·믹스인·map 정의만 있다.
+// 실제 CSS 출력(토큰 선언)은 앱이 딱 한 번 import하는 `index.scss`가 전담한다.
+
+@forward "tokens";
+@forward "functions";
+@forward "mixins";
9db7ffa
c619a3b
@fox/styles/index.scss
--- @fox/styles/index.scss
+++ @fox/styles/index.scss
@@ -1,0 +1,10 @@
 
+// 글로벌 스타일 진입점 — **호스트 앱이 딱 한 번 import한다.**
 
+//
 
+//   // app/globals.scss
 
+//   @use "@fox/styles";
 
+//
 
+// 여기서만 CSS가 출력된다. 컴포넌트의 `.module.scss`는 이 파일이 아니라
 
+// `abstracts.scss`를 `@use`해야 한다 — 그쪽은 CSS 출력이 0이라 몇 번을 참조해도
 
+// 중복이 생기지 않는다.
 
+
 
+@use "root";
 
c619a3b
@fox/styles/tokens/_color.scss (added)
+++ @fox/styles/tokens/_color.scss
@@ -0,0 +1,283 @@
+// ⚠️ 이 파일은 Figma Design Tokens export에서 **자동 생성**되었습니다.
+// 원본: light.tokens.json / dark.tokens.json
+// 손으로 고치지 말고 원본 JSON을 다시 export한 뒤 변환기를 재실행하세요.
+
+// 시맨틱 색상 — 라이트/다크 값을 `light-dark()` 한 줄에 함께 보유한다.
+// 전환은 `_root.scss`의 `color-scheme`이 담당하므로 다크 전용 블록이 없고,
+// 따라서 한쪽만 고쳐서 생기는 테마 불일치가 구조적으로 불가능하다.
+//
+// 값이 `var(--fox-primitive-*)` / `var(--fox-theme-*)`인 항목은 Figma의 alias를
+// 그대로 옮긴 것이다 — 바닥층을 바꾸면 여기까지 전파된다.
+$color: (
+  background-default: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-100)),
+  background-neutral: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-95)),
+  background-neutral-strong: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  background-primary: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  background-secondary: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  background-accent: light-dark(var(--fox-theme-accent-5), var(--fox-theme-accent-95)),
+  background-dim: light-dark(var(--fox-primitive-alpha-black50), var(--fox-primitive-alpha-black75)),
+  background-dim-inverse: light-dark(var(--fox-primitive-alpha-white50), var(--fox-primitive-alpha-black75)),
+  surface-neutral-default: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-95)),
+  surface-neutral-default-strong: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-90)),
+  surface-neutral-default-static: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-0)),
+  surface-neutral-default-inverse: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-10)),
+  surface-neutral-default-inverse-static: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-90)),
+  surface-neutral-gray: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-90)),
+  surface-neutral-gray-strong: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-80)),
+  surface-neutral-gray-stronger: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-70)),
+  surface-neutral-gray-inverse: light-dark(var(--fox-primitive-neutral-80), var(--fox-primitive-neutral-20)),
+  surface-neutral-gray-strong-inverse: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-30)),
+  surface-neutral-gray-stronger-inverse: light-dark(var(--fox-primitive-neutral-60), var(--fox-primitive-neutral-40)),
+  surface-neutral-disabled: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-70)),
+  surface-theme-primary: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  surface-theme-primary-inverse: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-40)),
+  surface-theme-secondary: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  surface-theme-secondary-inverse: light-dark(var(--fox-theme-secondary-60), var(--fox-theme-secondary-40)),
+  surface-theme-accent: light-dark(var(--fox-theme-accent-5), var(--fox-theme-accent-95)),
+  surface-theme-accent-inverse: light-dark(var(--fox-theme-accent-60), var(--fox-theme-accent-40)),
+  surface-system-danger: light-dark(var(--fox-primitive-danger-5), var(--fox-primitive-danger-95)),
+  surface-system-danger-inverse: light-dark(var(--fox-primitive-danger-60), var(--fox-primitive-danger-40)),
+  surface-system-warning: light-dark(var(--fox-primitive-warning-5), var(--fox-primitive-warning-95)),
+  surface-system-warning-inverse: light-dark(var(--fox-primitive-warning-60), var(--fox-primitive-warning-40)),
+  surface-system-success: light-dark(var(--fox-primitive-success-5), var(--fox-primitive-success-95)),
+  surface-system-success-inverse: light-dark(var(--fox-primitive-success-60), var(--fox-primitive-success-40)),
+  surface-system-information: light-dark(var(--fox-primitive-information-5), var(--fox-primitive-information-95)),
+  surface-system-information-inverse: light-dark(var(--fox-primitive-information-60), var(--fox-primitive-information-40)),
+  border-neutral-default: light-dark(var(--fox-primitive-neutral-30), var(--fox-primitive-neutral-70)),
+  border-neutral-subtle: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-80)),
+  border-neutral-subtler: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  border-neutral-strong: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-0)),
+  border-neutral-disabled: light-dark(var(--fox-primitive-neutral-30), var(--fox-primitive-neutral-70)),
+  border-neutral-overlay: light-dark(var(--fox-primitive-alpha-black10), var(--fox-primitive-alpha-white25)),
+  border-theme-primary: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  border-theme-primary-inverse: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-90)),
+  border-theme-secondary: light-dark(var(--fox-theme-secondary-60), var(--fox-theme-secondary-40)),
+  border-theme-secondary-inverse: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-90)),
+  border-theme-accent: light-dark(var(--fox-theme-accent-50), var(--fox-theme-accent-50)),
+  border-theme-accent-inverse: light-dark(var(--fox-theme-accent-10), var(--fox-theme-accent-90)),
+  border-system-danger: light-dark(var(--fox-primitive-danger-50), var(--fox-primitive-danger-50)),
+  border-system-danger-inverse: light-dark(var(--fox-primitive-danger-10), var(--fox-primitive-danger-90)),
+  border-system-warning: light-dark(var(--fox-primitive-warning-50), var(--fox-primitive-warning-50)),
+  border-system-warning-inverse: light-dark(var(--fox-primitive-warning-10), var(--fox-primitive-warning-90)),
+  border-system-success: light-dark(var(--fox-primitive-success-50), var(--fox-primitive-success-50)),
+  border-system-success-inverse: light-dark(var(--fox-primitive-success-10), var(--fox-primitive-success-90)),
+  border-system-information: light-dark(var(--fox-primitive-information-50), var(--fox-primitive-information-50)),
+  border-system-information-inverse: light-dark(var(--fox-primitive-information-10), var(--fox-primitive-information-90)),
+  font-neutral-strong: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-5)),
+  font-neutral-default: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-20)),
+  font-neutral-subtle: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-30)),
+  font-neutral-subtler: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-40)),
+  font-neutral-strong-inverse: light-dark(var(--fox-primitive-alpha-white100), var(--fox-primitive-neutral-95)),
+  font-neutral-default-inverse: light-dark(var(--fox-primitive-alpha-white75), var(--fox-primitive-neutral-90)),
+  font-neutral-subtle-inverse: light-dark(var(--fox-primitive-alpha-white50), var(--fox-primitive-neutral-80)),
+  font-neutral-subtler-inverse: light-dark(var(--fox-primitive-alpha-white25), var(--fox-primitive-neutral-70)),
+  font-neutral-static: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-90)),
+  font-neutral-static-inverse: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-0)),
+  font-neutral-disabled: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-60)),
+  font-neutral-disabled-strong: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-50)),
+  font-theme-primary: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-20)),
+  font-theme-primary-inverse: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-70)),
+  font-theme-secondary: light-dark(var(--fox-theme-secondary-60), var(--fox-theme-secondary-20)),
+  font-theme-secondary-inverse: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-70)),
+  font-theme-accent: light-dark(var(--fox-theme-accent-60), var(--fox-theme-accent-20)),
+  font-theme-accent-inverse: light-dark(var(--fox-theme-accent-10), var(--fox-theme-accent-70)),
+  font-system-danger: light-dark(var(--fox-primitive-danger-60), var(--fox-primitive-danger-20)),
+  font-system-danger-inverse: light-dark(var(--fox-primitive-danger-10), var(--fox-primitive-danger-70)),
+  font-system-warning: light-dark(var(--fox-primitive-warning-60), var(--fox-primitive-warning-20)),
+  font-system-warning-inverse: light-dark(var(--fox-primitive-warning-10), var(--fox-primitive-warning-70)),
+  font-system-success: light-dark(var(--fox-primitive-success-60), var(--fox-primitive-success-20)),
+  font-system-success-inverse: light-dark(var(--fox-primitive-success-10), var(--fox-primitive-success-70)),
+  font-system-information: light-dark(var(--fox-primitive-information-60), var(--fox-primitive-information-20)),
+  font-system-information-inverse: light-dark(var(--fox-primitive-information-10), var(--fox-primitive-information-70)),
+  icon-neutral-strong: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-5)),
+  icon-neutral-default: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-20)),
+  icon-neutral-subtle: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-30)),
+  icon-neutral-subtler: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-40)),
+  icon-neutral-fill: light-dark(var(--fox-primitive-alpha-black25), var(--fox-primitive-alpha-white25)),
+  icon-neutral-strong-inverse: light-dark(var(--fox-primitive-alpha-white100), var(--fox-primitive-neutral-95)),
+  icon-neutral-default-inverse: light-dark(var(--fox-primitive-alpha-white75), var(--fox-primitive-neutral-90)),
+  icon-neutral-subtle-inverse: light-dark(var(--fox-primitive-alpha-white50), var(--fox-primitive-neutral-80)),
+  icon-neutral-subtler-inverse: light-dark(var(--fox-primitive-alpha-white25), var(--fox-primitive-neutral-70)),
+  icon-neutral-fill-inverse: light-dark(var(--fox-primitive-alpha-white25), var(--fox-primitive-neutral-70)),
+  icon-neutral-static: light-dark(var(--fox-primitive-neutral-90), var(--fox-primitive-neutral-90)),
+  icon-neutral-static-inverse: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-0)),
+  icon-neutral-disabled: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-60)),
+  icon-neutral-disabled-strong: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-50)),
+  icon-theme-primary: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-20)),
+  icon-theme-primary-strong: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-30)),
+  icon-theme-primary-static: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  icon-theme-primary-inverse: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-70)),
+  icon-theme-secondary: light-dark(var(--fox-theme-secondary-60), var(--fox-theme-secondary-30)),
+  icon-theme-secondary-strong: light-dark(var(--fox-theme-secondary-70), var(--fox-theme-secondary-40)),
+  icon-theme-secondary-static: light-dark(var(--fox-theme-secondary-50), var(--fox-theme-secondary-50)),
+  icon-theme-secondary-inverse: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-70)),
+  icon-theme-accent: light-dark(var(--fox-theme-accent-50), var(--fox-theme-accent-20)),
+  icon-theme-accent-strong: light-dark(var(--fox-theme-accent-60), var(--fox-theme-accent-30)),
+  icon-theme-accent-static: light-dark(var(--fox-theme-accent-50), var(--fox-theme-accent-50)),
+  icon-theme-accent-inverse: light-dark(var(--fox-theme-accent-10), var(--fox-theme-accent-70)),
+  icon-system-danger: light-dark(var(--fox-primitive-danger-50), var(--fox-primitive-danger-20)),
+  icon-system-danger-strong: light-dark(var(--fox-primitive-danger-60), var(--fox-primitive-danger-30)),
+  icon-system-danger-inverse: light-dark(var(--fox-primitive-danger-10), var(--fox-primitive-danger-70)),
+  icon-system-warning: light-dark(var(--fox-primitive-warning-50), var(--fox-primitive-warning-20)),
+  icon-system-warning-strong: light-dark(var(--fox-primitive-warning-60), var(--fox-primitive-warning-30)),
+  icon-system-warning-inverse: light-dark(var(--fox-primitive-warning-10), var(--fox-primitive-warning-70)),
+  icon-system-success: light-dark(var(--fox-primitive-success-50), var(--fox-primitive-success-20)),
+  icon-system-success-strong: light-dark(var(--fox-primitive-success-60), var(--fox-primitive-success-30)),
+  icon-system-success-inverse: light-dark(var(--fox-primitive-success-10), var(--fox-primitive-success-70)),
+  icon-system-information: light-dark(var(--fox-primitive-information-50), var(--fox-primitive-information-20)),
+  icon-system-information-strong: light-dark(var(--fox-primitive-information-60), var(--fox-primitive-information-30)),
+  icon-system-information-inverse: light-dark(var(--fox-primitive-information-10), var(--fox-primitive-information-70)),
+  element-neutral-strong: light-dark(var(--fox-primitive-neutral-60), var(--fox-primitive-neutral-40)),
+  element-neutral-default: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-50)),
+  element-neutral-subtle: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  element-neutral-subtler: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-95)),
+  element-neutral-inverse: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-95)),
+  element-neutral-inverse-static: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-0)),
+  element-neutral-alpha: light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.5)),
+  element-neutral-alpha-inverse: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.25)),
+  element-neutral-disabled: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-80)),
+  element-neutral-disabled-strong: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-60)),
+  element-theme-primary: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  element-theme-primary-strong: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-40)),
+  element-theme-primary-subtle: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-90)),
+  element-theme-primary-subtler: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  element-theme-secondary: light-dark(var(--fox-theme-secondary-70), var(--fox-theme-secondary-60)),
+  element-theme-secondary-strong: light-dark(var(--fox-theme-secondary-70), var(--fox-theme-secondary-60)),
+  element-theme-secondary-subtle: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-90)),
+  element-theme-secondary-subtler: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  element-theme-accent: light-dark(var(--fox-theme-accent-50), var(--fox-theme-accent-50)),
+  element-theme-accent-strong: light-dark(var(--fox-theme-accent-60), var(--fox-theme-accent-40)),
+  element-theme-accent-subtle: light-dark(var(--fox-theme-accent-10), var(--fox-theme-accent-90)),
+  element-theme-accent-subtler: light-dark(var(--fox-theme-accent-5), var(--fox-theme-accent-95)),
+  element-system-danger: light-dark(var(--fox-primitive-danger-50), var(--fox-primitive-danger-50)),
+  element-system-danger-strong: light-dark(var(--fox-primitive-danger-60), var(--fox-primitive-danger-40)),
+  element-system-danger-inverse: light-dark(var(--fox-primitive-danger-5), var(--fox-primitive-danger-95)),
+  element-system-warning: light-dark(var(--fox-primitive-warning-30), var(--fox-primitive-warning-30)),
+  element-system-warning-strong: light-dark(var(--fox-primitive-warning-50), var(--fox-primitive-warning-20)),
+  element-system-warning-inverse: light-dark(var(--fox-primitive-warning-5), var(--fox-primitive-warning-95)),
+  element-system-success: light-dark(var(--fox-primitive-success-50), var(--fox-primitive-success-50)),
+  element-system-success-strong: light-dark(var(--fox-primitive-success-60), var(--fox-primitive-success-40)),
+  element-system-success-inverse: light-dark(var(--fox-primitive-success-5), var(--fox-primitive-success-95)),
+  element-system-information: light-dark(var(--fox-primitive-information-50), var(--fox-primitive-information-50)),
+  element-system-information-strong: light-dark(var(--fox-primitive-information-60), var(--fox-primitive-information-40)),
+  element-system-information-inverse: light-dark(var(--fox-primitive-information-5), var(--fox-primitive-information-95)),
+  alpha-default100: light-dark(var(--fox-primitive-alpha-white100), var(--fox-primitive-alpha-black100)),
+  alpha-default75: light-dark(var(--fox-primitive-alpha-white75), var(--fox-primitive-alpha-black75)),
+  alpha-default50: light-dark(var(--fox-primitive-alpha-white50), var(--fox-primitive-alpha-black50)),
+  alpha-default25: light-dark(var(--fox-primitive-alpha-white25), var(--fox-primitive-alpha-black25)),
+  alpha-default10: light-dark(var(--fox-primitive-alpha-white10), var(--fox-primitive-alpha-black10)),
+  alpha-default0: light-dark(var(--fox-primitive-alpha-white0), var(--fox-primitive-alpha-black0)),
+  alpha-default-inverse100: light-dark(var(--fox-primitive-alpha-black100), var(--fox-primitive-alpha-white100)),
+  alpha-default-inverse75: light-dark(var(--fox-primitive-alpha-black75), var(--fox-primitive-alpha-white75)),
+  alpha-default-inverse50: light-dark(var(--fox-primitive-alpha-black50), var(--fox-primitive-alpha-white50)),
+  alpha-default-inverse25: light-dark(var(--fox-primitive-alpha-black25), var(--fox-primitive-alpha-white25)),
+  alpha-default-inverse10: light-dark(var(--fox-primitive-alpha-black10), var(--fox-primitive-alpha-white10)),
+  alpha-default-inverse0: light-dark(var(--fox-primitive-alpha-black0), var(--fox-primitive-alpha-white0)),
+  action-default: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-100)),
+  action-default-hover: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-95)),
+  action-default-pressed: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  action-default-selected: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  action-default-active: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-60)),
+  action-neutral: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-95)),
+  action-neutral-hover: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-90)),
+  action-neutral-pressed: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-80)),
+  action-neutral-selected: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-80)),
+  action-neutral-active: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-60)),
+  action-primary: light-dark(var(--fox-primitive-alpha-white0), var(--fox-primitive-alpha-black0)),
+  action-primary-hover: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  action-primary-pressed: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-90)),
+  action-primary-selected: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  action-primary-active: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  action-secondary: light-dark(var(--fox-primitive-alpha-white0), var(--fox-primitive-alpha-black0)),
+  action-secondary-hover: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  action-secondary-pressed: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-90)),
+  action-secondary-selected: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-90)),
+  action-secondary-active: light-dark(var(--fox-theme-secondary-70), var(--fox-theme-secondary-60)),
+  button-primary-surface: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  button-primary-surface-hover: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-60)),
+  button-primary-surface-pressed: light-dark(var(--fox-theme-primary-70), var(--fox-theme-primary-70)),
+  button-primary-border: light-dark(var(--fox-primitive-alpha-black0), var(--fox-primitive-alpha-black0)),
+  button-primary-font: light-dark(var(--fox-primitive-alpha-white100), var(--fox-primitive-alpha-white100)),
+  button-secondary-surface: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  button-secondary-surface-hover: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-90)),
+  button-secondary-surface-pressed: light-dark(var(--fox-theme-primary-20), var(--fox-theme-primary-80)),
+  button-secondary-border: light-dark(var(--fox-theme-primary-30), var(--fox-theme-primary-70)),
+  button-secondary-font: light-dark(var(--fox-theme-primary-60), var(--fox-theme-primary-30)),
+  button-default-surface: light-dark(var(--fox-primitive-alpha-white0), var(--fox-primitive-alpha-black0)),
+  button-default-surface-hover: light-dark(var(--fox-primitive-neutral-5), var(--fox-primitive-neutral-95)),
+  button-default-surface-pressed: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-80)),
+  button-default-border: light-dark(var(--fox-primitive-neutral-30), var(--fox-primitive-neutral-70)),
+  button-default-font: light-dark(var(--fox-primitive-neutral-70), var(--fox-primitive-neutral-20)),
+  button-text-surface: light-dark(var(--fox-primitive-alpha-white0), var(--fox-primitive-alpha-black0)),
+  button-text-surface-hover: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  button-text-surface-pressed: light-dark(var(--fox-theme-secondary-10), var(--fox-theme-secondary-90)),
+  button-text-visited: light-dark(#5917B8, #C49FF9),
+  button-disabled-surface: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-80)),
+  button-disabled-border: light-dark(var(--fox-primitive-neutral-30), var(--fox-primitive-neutral-70)),
+  button-disabled-font: light-dark(var(--fox-primitive-neutral-50), var(--fox-primitive-neutral-50)),
+  input-surface: light-dark(var(--fox-primitive-neutral-0), var(--fox-primitive-neutral-90)),
+  input-surface-disabled: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-95)),
+  input-border: light-dark(var(--fox-primitive-neutral-60), var(--fox-primitive-neutral-40)),
+  input-border-active: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-50)),
+  input-border-error: light-dark(var(--fox-primitive-danger-50), var(--fox-primitive-danger-50)),
+  input-border-success: light-dark(var(--fox-primitive-success-50), var(--fox-primitive-success-50)),
+  input-border-disabled: light-dark(var(--fox-primitive-neutral-30), var(--fox-primitive-neutral-70)),
+  chart-default-bar: light-dark(var(--fox-theme-primary-20), var(--fox-theme-primary-70)),
+  chart-default-surface: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-70)),
+  chart-default-line: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-70)),
+  chart-default-disabled: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-70)),
+  chart-level-1: light-dark(var(--fox-theme-primary-90), var(--fox-theme-primary-10)),
+  chart-level-2: light-dark(var(--fox-theme-primary-70), var(--fox-theme-primary-20)),
+  chart-level-3: light-dark(var(--fox-theme-primary-50), var(--fox-theme-primary-40)),
+  chart-level-4: light-dark(var(--fox-theme-primary-40), var(--fox-theme-primary-50)),
+  chart-level-5: light-dark(var(--fox-theme-primary-20), var(--fox-theme-primary-70)),
+  chart-level-6: light-dark(var(--fox-theme-primary-10), var(--fox-theme-primary-90)),
+  chart-level-7: light-dark(var(--fox-primitive-neutral-60), var(--fox-primitive-neutral-10)),
+  chart-level-8: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-20)),
+  chart-level-9: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-40)),
+  chart-level-10: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-60)),
+  chart-type-1-bar: light-dark(var(--fox-theme-primary-20), var(--fox-theme-primary-50)),
+  chart-type-1-line: light-dark(var(--fox-theme-primary-40), var(--fox-theme-primary-30)),
+  chart-type-1-surface: light-dark(var(--fox-theme-primary-5), var(--fox-theme-primary-95)),
+  chart-type-2-bar: light-dark(var(--fox-theme-accent-20), var(--fox-theme-accent-50)),
+  chart-type-2-line: light-dark(var(--fox-theme-accent-30), var(--fox-theme-accent-30)),
+  chart-type-2-surface: light-dark(var(--fox-theme-accent-5), var(--fox-theme-accent-95)),
+  chart-type-3-bar: light-dark(var(--fox-theme-secondary-20), var(--fox-theme-secondary-50)),
+  chart-type-3-line: light-dark(var(--fox-theme-secondary-30), var(--fox-theme-secondary-30)),
+  chart-type-3-surface: light-dark(var(--fox-theme-secondary-5), var(--fox-theme-secondary-95)),
+  chart-type-4-bar: light-dark(#FFDF94, #DEB451),
+  chart-type-4-line: light-dark(#FBC35A, #FBC35A),
+  chart-type-4-surface: light-dark(#FFF7E9, #2F2D28),
+  chart-type-5-bar: light-dark(#FF9F85, #D96645),
+  chart-type-5-line: light-dark(#FF7C57, #FF7C57),
+  chart-type-5-surface: light-dark(#FFECE7, #3F3330),
+  chart-alt-level-1: light-dark(#002D31, #D4F4F7),
+  chart-alt-level-2: light-dark(#005A62, #9EE7EE),
+  chart-alt-level-3: light-dark(#00828E, #1EBCCB),
+  chart-alt-level-4: light-dark(#1EBCCB, #00828E),
+  chart-alt-level-5: light-dark(#9EE7EE, #005A62),
+  chart-alt-level-6: light-dark(#D4F4F7, #002D31),
+  chart-alt-level-7: light-dark(var(--fox-primitive-neutral-60), var(--fox-primitive-neutral-10)),
+  chart-alt-level-8: light-dark(var(--fox-primitive-neutral-40), var(--fox-primitive-neutral-20)),
+  chart-alt-level-9: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-40)),
+  chart-alt-level-10: light-dark(var(--fox-primitive-neutral-10), var(--fox-primitive-neutral-60)),
+  chart-alt-default-bar: light-dark(#9EE7EE, #005A62),
+  chart-alt-default-surface: light-dark(#D4F4F7, #005A62),
+  chart-alt-default-line: light-dark(#00828E, #005A62),
+  chart-alt-default-disabled: light-dark(var(--fox-primitive-neutral-20), var(--fox-primitive-neutral-70)),
+  chart-alt-type-1-bar: light-dark(#9EE7EE, #00828E),
+  chart-alt-type-1-line: light-dark(#1EBCCB, #57D2DE),
+  chart-alt-type-1-surface: light-dark(#E9FAFC, #001A1C),
+  chart-alt-type-2-bar: light-dark(#CDE566, #5E8100),
+  chart-alt-type-2-line: light-dark(#A7CC00, #A7CC00),
+  chart-alt-type-2-surface: light-dark(#F2F9D9, #121900),
+  chart-alt-type-3-bar: light-dark(#97CBED, #00577D),
+  chart-alt-type-3-line: light-dark(#52A6D3, #52A6D3),
+  chart-alt-type-3-surface: light-dark(#E8F4FC, #00080C),
+  chart-alt-type-4-bar: light-dark(#FFDF94, #DEB451),
+  chart-alt-type-4-line: light-dark(#FBC35A, #FBC35A),
+  chart-alt-type-4-surface: light-dark(#FFF7E9, #2F2D28),
+  chart-alt-type-5-bar: light-dark(#FF9F85, #D96645),
+  chart-alt-type-5-line: light-dark(#FF7C57, #FF7C57),
+  chart-alt-type-5-surface: light-dark(#FFECE7, #3F3330)
+);
 
c619a3b
@fox/styles/tokens/_index.scss (added)
+++ @fox/styles/tokens/_index.scss
@@ -0,0 +1,10 @@
+// 토큰 map 모음 — **CSS를 한 줄도 출력하지 않는다.**
+// 값 선언(이 폴더)과 CSS 출력(`../_root.scss`)을 분리해 두었기 때문에, 컴포넌트의
+// `.module.scss`가 몇 개든 `abstracts`를 `@use`해도 `:root` 블록이 중복 출력되지 않는다
+// (각 CSS Module은 별도 컴파일 단위라 CSS를 내보내는 모듈을 공유하면 파일마다 복제된다).
+
+@forward "primitive";
+@forward "theme";
+@forward "size";
+@forward "color";
+@forward "responsive";
 
c619a3b
@fox/styles/tokens/_primitive.scss (added)
+++ @fox/styles/tokens/_primitive.scss
@@ -0,0 +1,112 @@
+// ⚠️ 이 파일은 Figma Design Tokens export에서 **자동 생성**되었습니다.
+// 원본: primitive.tokens.json
+// 손으로 고치지 말고 원본 JSON을 다시 export한 뒤 변환기를 재실행하세요.
+
+// 원시 팔레트 — 화면에서 직접 쓰지 않는다. 시맨틱 토큰(`$color`)이 참조하는 바닥층이다.
+$primitive: (
+  neutral-0: #FFFFFF,
+  neutral-5: #F4F5F6,
+  neutral-10: #E6E8EA,
+  neutral-20: #CDD1D5,
+  neutral-30: #B1B8BE,
+  neutral-40: #8A949E,
+  neutral-50: #6D7882,
+  neutral-60: #58616A,
+  neutral-70: #464C53,
+  neutral-80: #33363D,
+  neutral-90: #1E2124,
+  neutral-95: #131416,
+  neutral-100: #000000,
+  danger-5: #FDEFEC,
+  danger-10: #FCDFD9,
+  danger-20: #F7AFA1,
+  danger-30: #F48771,
+  danger-40: #F05F42,
+  danger-50: #DE3412,
+  danger-60: #BD2C0F,
+  danger-70: #8A240F,
+  danger-80: #5C180A,
+  danger-90: #390D05,
+  danger-95: #260903,
+  warning-5: #FFF3DB,
+  warning-10: #FFE0A3,
+  warning-20: #FFC95C,
+  warning-30: #FFB114,
+  warning-40: #C78500,
+  warning-50: #9E6A00,
+  warning-60: #8A5C00,
+  warning-70: #614100,
+  warning-80: #422C00,
+  warning-90: #2E1F00,
+  warning-95: #241800,
+  success-5: #EAF6EC,
+  success-10: #D8EEDD,
+  success-20: #A9DAB4,
+  success-30: #7EC88E,
+  success-40: #3FA654,
+  success-50: #228738,
+  success-60: #267337,
+  success-70: #285D33,
+  success-80: #1F4727,
+  success-90: #122B18,
+  success-95: #0E2012,
+  information-5: #E7F4FE,
+  information-10: #D3EBFD,
+  information-20: #9ED2FA,
+  information-30: #5FB5F7,
+  information-40: #2098F3,
+  information-50: #0B78CB,
+  information-60: #096AB3,
+  information-70: #085691,
+  information-80: #053961,
+  information-90: #03253F,
+  information-95: #021A2C,
+  alpha-black100: #000000,
+  alpha-black75: rgb(0 0 0 / 0.75),
+  alpha-black50: rgb(0 0 0 / 0.5),
+  alpha-black25: rgb(0 0 0 / 0.25),
+  alpha-black10: rgb(0 0 0 / 0.1),
+  alpha-black0: rgb(0 0 0 / 0),
+  alpha-white100: #FFFFFF,
+  alpha-white75: rgb(255 255 255 / 0.75),
+  alpha-white50: rgb(255 255 255 / 0.5),
+  alpha-white25: rgb(255 255 255 / 0.25),
+  alpha-white10: rgb(255 255 255 / 0.1),
+  alpha-white0: rgb(255 255 255 / 0)
+);
+
+// 서체 — family는 문자열, weight는 무단위 수치(길이가 아니므로 rem 변환 대상이 아니다).
+$font: (
+  family-title: Pretendard,
+  family-body: Pretendard,
+  weight-regular: 400,
+  weight-medium: 600,
+  weight-bold: 800
+);
+
+// 원시 수치 스케일 — size 컬렉션이 참조하는 값들. 1rem = 10px 기준으로 변환됨.
+$number: (
+  0: 0,
+  1: 0.1rem,
+  2: 0.2rem,
+  3: 0.4rem,
+  4: 0.6rem,
+  5: 0.8rem,
+  6: 1rem,
+  7: 1.2rem,
+  8: 1.6rem,
+  9: 2rem,
+  10: 2.4rem,
+  11: 2.8rem,
+  12: 3.2rem,
+  13: 3.6rem,
+  14: 4rem,
+  15: 4.4rem,
+  16: 4.8rem,
+  17: 5.6rem,
+  18: 6.4rem,
+  19: 7.2rem,
+  20: 8rem,
+  21: 9.6rem,
+  max: 100rem
+);
 
c619a3b
@fox/styles/tokens/_responsive.scss (added)
+++ @fox/styles/tokens/_responsive.scss
@@ -0,0 +1,163 @@
+// ⚠️ 이 파일은 Figma Design Tokens export에서 **자동 생성**되었습니다.
+// 원본: mobile.tokens.json / pc.tokens.json
+// 손으로 고치지 말고 원본 JSON을 다시 export한 뒤 변환기를 재실행하세요.
+
+// 뷰포트에 따라 달라지는 크기 토큰. 키는 두 모드가 완전히 동일하다.
+// 모바일 우선 — `$responsive`가 기본값이고 `$responsive-pc`가 브레이크포인트 이상에서 덮는다.
+$breakpoint-pc: 768px;
+
+$responsive: (
+  font-size-display-lg: 4.4rem,
+  font-size-display-md: 3.2rem,
+  font-size-display-sm: 2.8rem,
+  font-size-heading-xlg: 2.8rem,
+  font-size-heading-lg: 2.4rem,
+  font-size-heading-md: 2rem,
+  font-size-heading-sm: 1.7rem,
+  font-size-heading-xsm: 1.5rem,
+  font-size-heading-2xsm: 1.3rem,
+  font-size-body-lg: 1.5rem,
+  font-size-body-md: 1.3rem,
+  font-size-body-sm: 1.2rem,
+  font-size-body-xsm: 1rem,
+  font-size-label-lg: 1.5rem,
+  font-size-label-md: 1.3rem,
+  font-size-label-sm: 1.2rem,
+  font-size-label-xsm: 1rem,
+  form-radius-xsm: 0.4rem,
+  form-radius-sm: 0.4rem,
+  form-radius-md: 0.8rem,
+  form-radius-lg: 1.2rem,
+  form-padding-lg: 2rem,
+  form-padding-md: 1.2rem,
+  form-padding-sm: 0.8rem,
+  form-padding-xsm: 0.4rem,
+  form-icon-lg: 2rem,
+  form-icon-md: 1.6rem,
+  form-icon-sm: 1.2rem,
+  form-icon-xsm: 1.2rem,
+  form-height-xsm: 2rem,
+  form-height-sm: 2.8rem,
+  form-height-md: 4rem,
+  form-height-lg: 4.8rem,
+  grid-wrap-full: 38rem,
+  grid-wrap-default: 34.8rem,
+  grid-wrap-sm: 32rem,
+  grid-wrap-xsm: 28rem,
+  grid-margin-full: 0,
+  grid-margin-default: 1.6rem,
+  grid-margin-sm: 3rem,
+  grid-margin-xsm: 5rem,
+  grid-gutter-sm: 0.8rem,
+  grid-gutter-md: 1.6rem,
+  grid-gutter-lg: 2rem,
+  grid-gutter-xlg: 2rem,
+  grid-gutter-2xlg: 4rem,
+  card-radius-xlg: 1.6rem,
+  card-radius-lg: 1.6rem,
+  card-radius-md: 1.2rem,
+  card-radius-sm: 0.8rem,
+  card-padding-xlg: 2.4rem,
+  card-padding-lg: 2rem,
+  card-padding-md: 1.6rem,
+  card-padding-sm: 1.2rem,
+  modal-width-full: 38rem,
+  modal-width-lg: 34.8rem,
+  modal-width-md: 34.8rem,
+  modal-width-sm: 34.8rem,
+  modal-padding-default: 2.4rem,
+  modal-btn-close: 5.6rem,
+  spacing-top-2xlg: 8rem,
+  spacing-top-xlg: 5.6rem,
+  spacing-top-lg: 3.2rem,
+  spacing-top-md: 2rem,
+  spacing-top-sm: 1.2rem,
+  spacing-top-none: 0,
+  spacing-bottom-xlg: 4.8rem,
+  spacing-bottom-lg: 2.8rem,
+  spacing-bottom-md: 2rem,
+  spacing-bottom-sm: 1.2rem,
+  spacing-bottom-none: 0,
+  section-spacing-lg: 8rem,
+  section-spacing-md: 4rem,
+  section-spacing-sm: 2.4rem,
+  section-spacing-xsm: 1.6rem
+);
+
+$responsive-pc: (
+  font-size-display-lg: 4rem,
+  font-size-display-md: 3.2rem,
+  font-size-display-sm: 2.6rem,
+  font-size-heading-xlg: 3.2rem,
+  font-size-heading-lg: 2.6rem,
+  font-size-heading-md: 2rem,
+  font-size-heading-sm: 1.7rem,
+  font-size-heading-xsm: 1.5rem,
+  font-size-heading-2xsm: 1.3rem,
+  font-size-body-lg: 1.7rem,
+  font-size-body-md: 1.5rem,
+  font-size-body-sm: 1.3rem,
+  font-size-body-xsm: 1.1rem,
+  font-size-label-lg: 1.7rem,
+  font-size-label-md: 1.5rem,
+  font-size-label-sm: 1.3rem,
+  font-size-label-xsm: 1.1rem,
+  form-radius-xsm: 0.4rem,
+  form-radius-sm: 0.4rem,
+  form-radius-md: 0.8rem,
+  form-radius-lg: 1.2rem,
+  form-padding-lg: 2rem,
+  form-padding-md: 1.2rem,
+  form-padding-sm: 0.8rem,
+  form-padding-xsm: 0.8rem,
+  form-icon-lg: 2.4rem,
+  form-icon-md: 2rem,
+  form-icon-sm: 1.6rem,
+  form-icon-xsm: 1.2rem,
+  form-height-xsm: 2.4rem,
+  form-height-sm: 2.8rem,
+  form-height-md: 4rem,
+  form-height-lg: 5.6rem,
+  grid-wrap-full: 192rem,
+  grid-wrap-default: 158.4rem,
+  grid-wrap-sm: 108rem,
+  grid-wrap-xsm: 80rem,
+  grid-margin-full: 0,
+  grid-margin-default: 4.8rem,
+  grid-margin-sm: 42rem,
+  grid-margin-xsm: 56rem,
+  grid-gutter-sm: 0.8rem,
+  grid-gutter-md: 1.6rem,
+  grid-gutter-lg: 2.4rem,
+  grid-gutter-xlg: 4rem,
+  grid-gutter-2xlg: 6.4rem,
+  card-radius-xlg: 2.4rem,
+  card-radius-lg: 2.4rem,
+  card-radius-md: 1.6rem,
+  card-radius-sm: 1.2rem,
+  card-padding-xlg: 4rem,
+  card-padding-lg: 3.2rem,
+  card-padding-md: 2.4rem,
+  card-padding-sm: 1.6rem,
+  modal-width-full: 192rem,
+  modal-width-lg: 76rem,
+  modal-width-md: 56rem,
+  modal-width-sm: 40rem,
+  modal-padding-default: 4rem,
+  modal-btn-close: 6.4rem,
+  spacing-top-2xlg: 8rem,
+  spacing-top-xlg: 6.4rem,
+  spacing-top-lg: 4rem,
+  spacing-top-md: 2.4rem,
+  spacing-top-sm: 1.6rem,
+  spacing-top-none: 0,
+  spacing-bottom-xlg: 3.6rem,
+  spacing-bottom-lg: 2.8rem,
+  spacing-bottom-md: 2rem,
+  spacing-bottom-sm: 1.2rem,
+  spacing-bottom-none: 0,
+  section-spacing-lg: 12rem,
+  section-spacing-md: 8rem,
+  section-spacing-sm: 4rem,
+  section-spacing-xsm: 2.4rem
+);
 
c619a3b
@fox/styles/tokens/_size.scss (added)
+++ @fox/styles/tokens/_size.scss
@@ -0,0 +1,62 @@
+// ⚠️ 이 파일은 Figma Design Tokens export에서 **자동 생성**되었습니다.
+// 원본: size.tokens.json
+// 손으로 고치지 말고 원본 JSON을 다시 export한 뒤 변환기를 재실행하세요.
+
+// 모드와 무관한 크기 스케일. 값은 1rem = 10px 기준 rem.
+$size: (
+  border-0: 0,
+  border-1: 0.1rem,
+  border-2: 0.2rem,
+  border-3: 0.4rem,
+  padding-1: 0.2rem,
+  padding-2: 0.4rem,
+  padding-3: 0.8rem,
+  padding-4: 1rem,
+  padding-5: 1.2rem,
+  padding-6: 1.6rem,
+  padding-7: 2rem,
+  padding-8: 2.4rem,
+  padding-9: 3.2rem,
+  padding-10: 4rem,
+  padding-11: 6.4rem,
+  gap-1: 0.2rem,
+  gap-2: 0.4rem,
+  gap-3: 0.8rem,
+  gap-4: 1.2rem,
+  gap-5: 1.6rem,
+  gap-6: 2rem,
+  gap-7: 2.4rem,
+  gap-8: 3.2rem,
+  gap-9: 4rem,
+  gap-10: 4.8rem,
+  gap-11: 6.4rem,
+  gap-12: 8rem,
+  radius-1: 0.2rem,
+  radius-2: 0.4rem,
+  radius-3: 0.8rem,
+  radius-4: 1.2rem,
+  radius-5: 1.6rem,
+  radius-6: 2.4rem,
+  radius-7: 4rem,
+  radius-max: 100rem,
+  icon-1: 0.8rem,
+  icon-2: 1.2rem,
+  icon-3: 1.6rem,
+  icon-4: 2rem,
+  icon-5: 2.4rem,
+  icon-6: 3.2rem,
+  icon-7: 4rem,
+  shadow-location1: 0.1rem,
+  shadow-location2: 0.2rem,
+  shadow-location3: 0.4rem,
+  shadow-location4: 0.8rem,
+  shadow-location5: 1.6rem,
+  shadow-blur1: 0.2rem,
+  shadow-blur2: 0.4rem,
+  shadow-blur3: 0.8rem,
+  shadow-blur4: 1.6rem,
+  shadow-blur5: 3.2rem,
+  backdrop-blur1: 1rem,
+  backdrop-blur2: 2.4rem,
+  backdrop-blur3: 4rem
+);
 
c619a3b
@fox/styles/tokens/_theme.scss (added)
+++ @fox/styles/tokens/_theme.scss
@@ -0,0 +1,40 @@
+// ⚠️ 이 파일은 Figma Design Tokens export에서 **자동 생성**되었습니다.
+// 원본: theme.tokens.json
+// 손으로 고치지 말고 원본 JSON을 다시 export한 뒤 변환기를 재실행하세요.
+
+// 브랜드 램프 — primary / secondary / accent.
+$theme: (
+  primary-5: #ECF2FE,
+  primary-10: #D8E5FD,
+  primary-20: #B1CEFB,
+  primary-30: #86AFF9,
+  primary-40: #4C87F6,
+  primary-50: #256EF4,
+  primary-60: #0B50D0,
+  primary-70: #083891,
+  primary-80: #052561,
+  primary-90: #03163A,
+  primary-95: #020F27,
+  secondary-5: #EEF2F7,
+  secondary-10: #D6E0EB,
+  secondary-20: #BACBDE,
+  secondary-30: #90B0D5,
+  secondary-40: #6B96C7,
+  secondary-50: #346FB2,
+  secondary-60: #1C589C,
+  secondary-70: #063A74,
+  secondary-80: #052B57,
+  secondary-90: #031F3F,
+  secondary-95: #02162C,
+  accent-5: #FBEFF0,
+  accent-10: #F5D6D9,
+  accent-20: #EBADB2,
+  accent-30: #E0858C,
+  accent-40: #D65C66,
+  accent-50: #D63D4A,
+  accent-60: #AB2B36,
+  accent-70: #7A1F26,
+  accent-80: #521419,
+  accent-90: #310C0F,
+  accent-95: #21080A
+);
Add a comment
List