임동욱 임동욱 07-27
style: 타이포·radius·그림자 토큰 추가 및 폰트 토큰 연결
Co-Authored-By: Claude Opus 5 
@35789438b839b5a69a791fe1eb90849c27db0136
app/globals.css
--- app/globals.css
+++ app/globals.css
@@ -58,9 +58,106 @@
 
   --color-scrim: var(--scrim);
 
-  --font-sans: var(--font-geist-sans);
+  /* WantedSans 연결 전에도 안전한 폴백(feature 레인이 app/layout.tsx에서
+     next/font/local로 --font-wanted-sans를 정의). */
+  --font-sans: var(--font-wanted-sans, system-ui), system-ui,
+    "Apple SD Gothic Neo", sans-serif;
   --font-mono: var(--font-geist-mono);
+
+  /* 타이포 토큰 출처: edupay-app lib/ui/core/tokens/app_typography.dart
+     (Figma: FOX PAY 1차 제작시안, node 112:11439). voucher/numeric 등 앱 전용
+     스타일은 어드민 무관으로 미이식. */
+  --text-display-lg: 3rem;
+  --text-display-lg--line-height: 1.5;
+  --text-display-lg--font-weight: 700;
+
+  --text-display-md: 2.25rem;
+  --text-display-md--line-height: 1.5;
+  --text-display-md--letter-spacing: -0.72px;
+  --text-display-md--font-weight: 700;
+
+  --text-display-sm: 2rem;
+  --text-display-sm--line-height: 1.5;
+  --text-display-sm--letter-spacing: -0.64px;
+  --text-display-sm--font-weight: 700;
+
+  --text-headline-lg: 1.5rem;
+  --text-headline-lg--line-height: 1.5;
+  --text-headline-lg--letter-spacing: -0.72px;
+  --text-headline-lg--font-weight: 700;
+
+  --text-headline-md: 1.25rem;
+  --text-headline-md--line-height: 1.5;
+  --text-headline-md--letter-spacing: -0.6px;
+  --text-headline-md--font-weight: 700;
+
+  --text-headline-sm: 1.125rem;
+  --text-headline-sm--line-height: 1.3;
+  --text-headline-sm--letter-spacing: -0.54px;
+  --text-headline-sm--font-weight: 700;
+
+  --text-title-lg: 1.125rem;
+  --text-title-lg--line-height: 1.5;
+  --text-title-lg--font-weight: 700;
+
+  --text-title-md: 1rem;
+  --text-title-md--line-height: 1.5;
+  --text-title-md--font-weight: 700;
+
+  --text-title-sm: 0.875rem;
+  --text-title-sm--line-height: 1.5;
+  --text-title-sm--letter-spacing: -0.42px;
+  --text-title-sm--font-weight: 700;
+
+  --text-body-lg: 1rem;
+  --text-body-lg--line-height: 1.5;
+  --text-body-lg--letter-spacing: -0.48px;
+  --text-body-lg--font-weight: 400;
+
+  --text-body-md: 0.875rem;
+  --text-body-md--line-height: 1.5;
+  --text-body-md--font-weight: 400;
+
+  --text-body-sm: 0.75rem;
+  --text-body-sm--line-height: 1.5;
+  --text-body-sm--font-weight: 400;
+
+  --text-label-lg: 1rem;
+  --text-label-lg--line-height: 1.4;
+  --text-label-lg--letter-spacing: -0.48px;
+  --text-label-lg--font-weight: 700;
+
+  --text-label-md: 0.875rem;
+  --text-label-md--letter-spacing: -0.28px;
+  --text-label-md--font-weight: 400;
+
+  --text-label-sm: 0.75rem;
+  --text-label-sm--font-weight: 400;
+
+  /* radius 토큰 출처: edupay-app lib/ui/core/tokens/app_radius.dart.
+     Tailwind 기본 스케일과 다른 값으로 의도적 재정의(앱 일체화, §8-4 승인).
+     pill(999)은 기본 rounded-full로 충족, card(50)은 앱 전용 미이식. */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.5rem;
+
+  /* 그림자 토큰 출처: edupay-app lib/ui/core/tokens/app_shadows.dart —
+     어드민 유효분만 이식(voucher inner·stacked 등 미이식). */
+  --shadow-card: 0 5.16px 5.16px rgb(93 100 119 / 0.12);
+  --shadow-list-card: 0 8px 16px rgb(93 100 119 / 0.12);
+  --shadow-dialog: 0 8px 16px rgb(0 0 0 / 0.1);
+  --shadow-popup: 2.16px 6.32px 6px rgb(177 178 180 / 0.24);
+  --shadow-toast: 0 10px 12px rgb(0 0 0 / 0.2);
+  --shadow-subtle: 0 2px 4px rgb(0 0 0 / 0.08);
 }
+
+/* 간격 토큰 매핑 (변경 없음) — edupay-app lib/ui/core/tokens/app_spacing.dart의
+   4/8 grid(4·8·12·16·20·24·32·40)는 Tailwind 기본 --spacing: 0.25rem 스케일과
+   정확히 일치한다: xs→p-1, sm→p-2, md→p-3, lg→p-4, xl→p-5, xxl→p-6,
+   xxxl→p-8, xxxxl→p-10. */
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -93,5 +190,4 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }
Add a comment
List