@pfct/purple 1.15.0 → 1.15.1

package/dist/theme.css

@@ -0,0 +1,826 @@
+/**
+ * @pfct/purple design tokens — 소비처가 직접 import하는 @theme 소스.
+ *
+ * `@import "tailwindcss"` 없이 토큰 값(:root/.dark) + @theme 등록 + 타이포그래피만 담는다.
+ * 소비처: `@import "tailwindcss"; @import "@pfct/purple/theme.css";`
+ *   → 유틸 생성 + Tailwind IntelliSense 자동완성.
+ * purple 자체 빌드는 global.css가 이 파일을 @import하므로 동일하게 동작한다.
+ */
+
+:root {
+	--radius: 0.625rem;
+
+	/* Card_Floating_Shadow (PC) */
+	--shadow-card-floating: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
+
+	--background: oklch(1 0 0);
+
+	--foreground: oklch(0.145 0 0);
+
+	--card: oklch(1 0 0);
+
+	--card-foreground: oklch(0.145 0 0);
+
+	--popover: oklch(1 0 0);
+
+	--popover-foreground: oklch(0.145 0 0);
+
+	--primary: oklch(0.205 0 0);
+
+	--primary-foreground: oklch(0.985 0 0);
+
+	--secondary: oklch(0.97 0 0);
+
+	--secondary-foreground: oklch(0.205 0 0);
+
+	--muted: oklch(0.97 0 0);
+
+	--muted-foreground: oklch(0.556 0 0);
+
+	--accent: oklch(0.97 0 0);
+
+	--accent-foreground: oklch(0.205 0 0);
+
+	--destructive: oklch(0.577 0.245 27.325);
+
+	--border: oklch(0.922 0 0);
+
+	--input: oklch(0.922 0 0);
+
+	--ring: oklch(0.708 0 0);
+
+	--chart-1: oklch(0.646 0.222 41.116);
+
+	--chart-2: oklch(0.6 0.118 184.704);
+
+	--chart-3: oklch(0.398 0.07 227.392);
+
+	--chart-4: oklch(0.828 0.189 84.429);
+
+	--chart-5: oklch(0.769 0.188 70.08);
+
+	--sidebar: oklch(0.985 0 0);
+
+	--sidebar-foreground: oklch(0.145 0 0);
+
+	--sidebar-primary: oklch(0.205 0 0);
+
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+
+	--sidebar-accent: oklch(0.97 0 0);
+
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+
+	--sidebar-border: oklch(0.922 0 0);
+
+	--sidebar-ring: oklch(0.708 0 0);
+
+	--color-white: #ffffff;
+	--color-black: #000000;
+	--color-dark-gray: #262626;
+	--color-deep-dark-gray: #1b1b1b;
+
+	--color-pink-5: #fffafd;
+	--color-pink-25: #fff4fa;
+	--color-pink-50: #ffeaf5;
+	--color-pink-100: #ffc6e3;
+	--color-pink-200: #fe99ce;
+	--color-pink-300: #fe67b5;
+	--color-pink-400: #fe2c99;
+	--color-pink-500: #eb1584;
+	--color-pink-600: #de0475;
+	--color-pink-700: #ca036a;
+	--color-pink-800: #b2005c;
+	--color-pink-900: #970051;
+
+	--color-red-5: #fffbfc;
+	--color-red-25: #fff6f9;
+	--color-red-50: #ffeff2;
+	--color-red-100: #ffb7c4;
+	--color-red-200: #ff738c;
+	--color-red-300: #ff5170;
+	--color-red-400: #ff2f54;
+	--color-red-500: #ff0d38;
+	--color-red-600: #ea002a;
+	--color-red-700: #c80024;
+	--color-red-800: #a6001e;
+	--color-red-900: #840018;
+
+	--color-orange-5: #fffaf7;
+	--color-orange-25: #fff5ef;
+	--color-orange-50: #fff0e5;
+	--color-orange-100: #ffccad;
+	--color-orange-200: #ffa168;
+	--color-orange-300: #ff8b44;
+	--color-orange-400: #ff7b2b;
+	--color-orange-500: #ff6b10;
+	--color-orange-600: #f55d00;
+	--color-orange-700: #d85200;
+	--color-orange-800: #ba4700;
+	--color-orange-900: #983a00;
+
+	--color-yellow-5: #fffdf4;
+	--color-yellow-25: #fffbe6;
+	--color-yellow-50: #fff7e0;
+	--color-yellow-100: #ffe59c;
+	--color-yellow-200: #ffd55e;
+	--color-yellow-300: #ffcd4b;
+	--color-yellow-400: #ffb712;
+	--color-yellow-500: #efa600;
+	--color-yellow-600: #cd8e00;
+	--color-yellow-700: #ab7700;
+	--color-yellow-800: #895f00;
+	--color-yellow-900: #745000;
+
+	--color-lime-5: #f9fef9;
+	--color-lime-25: #f3fdf3;
+	--color-lime-50: #e7fce8;
+	--color-lime-100: #bff4c1;
+	--color-lime-200: #7eee87;
+	--color-lime-300: #60df6a;
+	--color-lime-400: #37c94d;
+	--color-lime-500: #16b234;
+	--color-lime-600: #139d2d;
+	--color-lime-700: #0d8323;
+	--color-lime-800: #0e6c1f;
+	--color-lime-900: #045613;
+
+	--color-green-5: #f8fffa;
+	--color-green-25: #f0fff6;
+	--color-green-50: #dcf9e8;
+	--color-green-100: #a7ebbe;
+	--color-green-200: #57db84;
+	--color-green-300: #1fcc5a;
+	--color-green-400: #19b14d;
+	--color-green-500: #159340;
+	--color-green-600: #117533;
+	--color-green-700: #0d5826;
+	--color-green-800: #0a4920;
+	--color-green-900: #083a19;
+
+	--color-mint-5: #f4fefd;
+	--color-mint-25: #ecfcfb;
+	--color-mint-50: #e0f8f7;
+	--color-mint-100: #b4f6ee;
+	--color-mint-200: #76ebe6;
+	--color-mint-300: #3de2da;
+	--color-mint-400: #02d1c8;
+	--color-mint-500: #02b8ae;
+	--color-mint-600: #029f94;
+	--color-mint-700: #02867a;
+	--color-mint-800: #026d60;
+	--color-mint-900: #015447;
+
+	--color-skyblue-5: #f5feff;
+	--color-skyblue-25: #ebfcff;
+	--color-skyblue-50: #e6fbff;
+	--color-skyblue-100: #cbefff;
+	--color-skyblue-200: #9de1ff;
+	--color-skyblue-300: #70d3ff;
+	--color-skyblue-400: #2ebfff;
+	--color-skyblue-500: #02b2ff;
+	--color-skyblue-600: #00a5ed;
+	--color-skyblue-700: #0092d3;
+	--color-skyblue-800: #007cb2;
+	--color-skyblue-900: #005f89;
+
+	--color-blue-5: #f9fcff;
+	--color-blue-25: #f1f9ff;
+	--color-blue-50: #e3f4ff;
+	--color-blue-100: #bbe2ff;
+	--color-blue-200: #8dd0ff;
+	--color-blue-300: #48afff;
+	--color-blue-400: #007dff;
+	--color-blue-500: #1269ec;
+	--color-blue-600: #0c5cd3;
+	--color-blue-700: #114bbd;
+	--color-blue-800: #073ca4;
+	--color-blue-900: #00308d;
+
+	--color-indigo-5: #fafaff;
+	--color-indigo-25: #f2f2ff;
+	--color-indigo-50: #ececff;
+	--color-indigo-100: #c0c4ff;
+	--color-indigo-200: #8d99ff;
+	--color-indigo-300: #606fff;
+	--color-indigo-400: #3f52ff;
+	--color-indigo-500: #3948ec;
+	--color-indigo-600: #2d3cdc;
+	--color-indigo-700: #2835be;
+	--color-indigo-800: #202ba4;
+	--color-indigo-900: #162191;
+
+	--color-purple-5: #fcfbff;
+	--color-purple-25: #f9f4ff;
+	--color-purple-50: #f4eefe;
+	--color-purple-100: #d4befb;
+	--color-purple-200: #b48ef8;
+	--color-purple-300: #955dff;
+	--color-purple-400: #732ff1;
+	--color-purple-500: #602fe4;
+	--color-purple-600: #521ddf;
+	--color-purple-700: #491ac6;
+	--color-purple-800: #3e16a8;
+	--color-purple-900: #33128a;
+
+	--color-gray-5: #fbfbfb;
+	--color-gray-25: #f6f6f6;
+	--color-gray-50: #eeeeee;
+	--color-gray-100: #d2d2d2;
+	--color-gray-200: #c0c0c0;
+	--color-gray-300: #979797;
+	--color-gray-400: #828282;
+	--color-gray-500: #6f6f6f;
+	--color-gray-600: #656565;
+	--color-gray-700: #5a5a5a;
+	--color-gray-800: #444444;
+	--color-gray-900: #2e2e2e;
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+
+	--foreground: oklch(0.985 0 0);
+
+	--card: oklch(0.205 0 0);
+
+	--card-foreground: oklch(0.985 0 0);
+
+	--popover: oklch(0.205 0 0);
+
+	--popover-foreground: oklch(0.985 0 0);
+
+	--primary: oklch(0.922 0 0);
+
+	--primary-foreground: oklch(0.205 0 0);
+
+	--secondary: oklch(0.269 0 0);
+
+	--secondary-foreground: oklch(0.985 0 0);
+
+	--muted: oklch(0.269 0 0);
+
+	--muted-foreground: oklch(0.708 0 0);
+
+	--accent: oklch(0.269 0 0);
+
+	--accent-foreground: oklch(0.985 0 0);
+
+	--destructive: oklch(0.704 0.191 22.216);
+
+	--border: oklch(1 0 0 / 10%);
+
+	--input: oklch(1 0 0 / 15%);
+
+	--ring: oklch(0.556 0 0);
+
+	--chart-1: oklch(0.488 0.243 264.376);
+
+	--chart-2: oklch(0.696 0.17 162.48);
+
+	--chart-3: oklch(0.769 0.188 70.08);
+
+	--chart-4: oklch(0.627 0.265 303.9);
+
+	--chart-5: oklch(0.645 0.246 16.439);
+
+	--sidebar: oklch(0.205 0 0);
+
+	--sidebar-foreground: oklch(0.985 0 0);
+
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+
+	--sidebar-accent: oklch(0.269 0 0);
+
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+
+	--sidebar-border: oklch(1 0 0 / 10%);
+
+	--sidebar-ring: oklch(0.556 0 0);
+
+	/* https://www.figma.com/design/d3dCA2mgA3kM1W5gLNDvt7/%F0%9F%8E%A8-Graphics-Library?node-id=4143-10160&m=dev */
+	--color-white: #ffffff;
+	--color-black: #000000;
+	--color-dark-gray: #262626;
+	--color-deep-dark-gray: #1b1b1b;
+
+	--color-pink-5: #2e2a2c;
+	--color-pink-25: #3b3137;
+	--color-pink-50: #4f3844;
+	--color-pink-100: #763457;
+	--color-pink-200: #9f2a66;
+	--color-pink-300: #db2d87;
+	--color-pink-400: #ff52ab;
+	--color-pink-500: #fe76bc;
+	--color-pink-600: #fea3d3;
+	--color-pink-700: #ffcce6;
+	--color-pink-800: #ffecf6;
+	--color-pink-900: #fff5fb;
+
+	--color-red-5: #2e2a2b;
+	--color-red-25: #3b3133;
+	--color-red-50: #593d42;
+	--color-red-100: #8a3f4c;
+	--color-red-200: #b14055;
+	--color-red-300: #eb4361;
+	--color-red-400: #ff5170;
+	--color-red-500: #ff627e;
+	--color-red-600: #ff8198;
+	--color-red-700: #ffbeca;
+	--color-red-800: #ffecf0;
+	--color-red-900: #fffbfc;
+
+	--color-orange-5: #2e2c2a;
+	--color-orange-25: #3b3531;
+	--color-orange-50: #59473d;
+	--color-orange-100: #8a5a3d;
+	--color-orange-200: #b16a3e;
+	--color-orange-300: #eb813f;
+	--color-orange-400: #ff8840;
+	--color-orange-500: #ff9757;
+	--color-orange-600: #ffaa77;
+	--color-orange-700: #ffd1b5;
+	--color-orange-800: #fff1e8;
+	--color-orange-900: #fff6f1;
+
+	--color-yellow-5: #2e2d2a;
+	--color-yellow-25: #3b3730;
+	--color-yellow-50: #594f39;
+	--color-yellow-100: #8a7034;
+	--color-yellow-200: #b18a31;
+	--color-yellow-300: #ebb12b;
+	--color-yellow-400: #ffbe2a;
+	--color-yellow-500: #ffcc57;
+	--color-yellow-600: #ffd96e;
+	--color-yellow-700: #ffe8a6;
+	--color-yellow-800: #fff8e3;
+	--color-yellow-900: #fffbe8;
+
+	--color-lime-5: #2a2d2b;
+	--color-lime-25: #323833;
+	--color-lime-50: #3e5141;
+	--color-lime-100: #42764a;
+	--color-lime-200: #459451;
+	--color-lime-300: #49bf5b;
+	--color-lime-400: #4bce5f;
+	--color-lime-500: #70e279;
+	--color-lime-600: #8bf093;
+	--color-lime-700: #c5f5c7;
+	--color-lime-800: #e9fcea;
+	--color-lime-900: #f4fdf4;
+
+	--color-green-5: #2a2d2b;
+	--color-green-25: #303733;
+	--color-green-50: #3a4f41;
+	--color-green-100: #376e4a;
+	--color-green-200: #348650;
+	--color-green-300: #31ac5b;
+	--color-green-400: #30b95f;
+	--color-green-500: #2cd265;
+	--color-green-600: #68df90;
+	--color-green-700: #b0edc5;
+	--color-green-800: #e0faea;
+	--color-green-900: #f0fef5;
+
+	--color-mint-5: #292d2d;
+	--color-mint-25: #2f3938;
+	--color-mint-50: #375351;
+	--color-mint-100: #2e7a76;
+	--color-mint-200: #289893;
+	--color-mint-300: #1ec6bf;
+	--color-mint-400: #1bd6ce;
+	--color-mint-500: #50e4de;
+	--color-mint-600: #84ede8;
+	--color-mint-700: #bbf7f0;
+	--color-mint-800: #e3f9f8;
+	--color-mint-900: #eefcfb;
+
+	--color-skyblue-5: #2a2d2e;
+	--color-skyblue-25: #31383b;
+	--color-skyblue-50: #3d5059;
+	--color-skyblue-100: #3e738a;
+	--color-skyblue-200: #408eb1;
+	--color-skyblue-300: #42b8eb;
+	--color-skyblue-400: #43c5ff;
+	--color-skyblue-500: #7ed7ff;
+	--color-skyblue-600: #a7e4ff;
+	--color-skyblue-700: #d0f1ff;
+	--color-skyblue-800: #e8fbff;
+	--color-skyblue-900: #edfcff;
+
+	--color-blue-5: #292c2e;
+	--color-blue-25: #2f353b;
+	--color-blue-50: #373e4d;
+	--color-blue-100: #344972;
+	--color-blue-200: #2e5999;
+	--color-blue-300: #207bda;
+	--color-blue-400: #1990ff;
+	--color-blue-500: #5ab7ff;
+	--color-blue-600: #98d5ff;
+	--color-blue-700: #c2e5ff;
+	--color-blue-800: #e6f5ff;
+	--color-blue-900: #f2faff;
+
+	--color-indigo-5: #2b2b2e;
+	--color-indigo-25: #32333b;
+	--color-indigo-50: #3f4259;
+	--color-indigo-100: #454c8a;
+	--color-indigo-200: #4953b1;
+	--color-indigo-300: #5564f1;
+	--color-indigo-400: #707dff;
+	--color-indigo-500: #848fff;
+	--color-indigo-600: #98a3ff;
+	--color-indigo-700: #c6caff;
+	--color-indigo-800: #eeeeff;
+	--color-indigo-900: #f3f3ff;
+
+	--color-purple-5: #2c2a2e;
+	--color-purple-25: #35313a;
+	--color-purple-50: #473d57;
+	--color-purple-100: #583f85;
+	--color-purple-200: #6540a9;
+	--color-purple-300: #8651e9;
+	--color-purple-400: #9a66fa;
+	--color-purple-500: #a879ff;
+	--color-purple-600: #bb99f9;
+	--color-purple-700: #d8c5fb;
+	--color-purple-800: #f5f0fe;
+	--color-purple-900: #fbfafe;
+
+	--color-gray-5: #2c2c2c;
+	--color-gray-25: #353535;
+	--color-gray-50: #434343;
+	--color-gray-100: #555555;
+	--color-gray-200: #7b7b7b;
+	--color-gray-300: #9d9d9d;
+	--color-gray-400: #c4c4c4;
+	--color-gray-500: #d9d9d9;
+	--color-gray-600: #e9e9e9;
+	--color-gray-700: #f5f5f5;
+	--color-gray-800: #f9f9f9;
+	--color-gray-900: #fefefe;
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+
+	--radius-md: calc(var(--radius) - 2px);
+
+	--radius-lg: var(--radius);
+
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--shadow-card-floating: var(--shadow-card-floating);
+
+	--color-background: var(--background);
+
+	--color-foreground: var(--foreground);
+
+	--color-card: var(--card);
+
+	--color-card-foreground: var(--card-foreground);
+
+	--color-popover: var(--popover);
+
+	--color-popover-foreground: var(--popover-foreground);
+
+	--color-primary: var(--primary);
+
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-secondary: var(--secondary);
+
+	--color-secondary-foreground: var(--secondary-foreground);
+
+	--color-muted: var(--muted);
+
+	--color-muted-foreground: var(--muted-foreground);
+
+	--color-accent: var(--accent);
+
+	--color-accent-foreground: var(--accent-foreground);
+
+	--color-destructive: var(--destructive);
+
+	--color-border: var(--border);
+
+	--color-input: var(--input);
+
+	--color-ring: var(--ring);
+
+	--color-chart-1: var(--chart-1);
+
+	--color-chart-2: var(--chart-2);
+
+	--color-chart-3: var(--chart-3);
+
+	--color-chart-4: var(--chart-4);
+
+	--color-chart-5: var(--chart-5);
+
+	--color-sidebar: var(--sidebar);
+
+	--color-sidebar-foreground: var(--sidebar-foreground);
+
+	--color-sidebar-primary: var(--sidebar-primary);
+
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+
+	--color-sidebar-accent: var(--sidebar-accent);
+
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+
+	--color-sidebar-border: var(--sidebar-border);
+
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--color-white: var(--color-white);
+	--color-black: var(--color-black);
+	--color-dark-gray: var(--color-dark-gray);
+	--color-deep-dark-gray: var(--color-deep-dark-gray);
+
+	--color-pink-5: var(--color-pink-5);
+	--color-pink-25: var(--color-pink-25);
+	--color-pink-50: var(--color-pink-50);
+	--color-pink-100: var(--color-pink-100);
+	--color-pink-200: var(--color-pink-200);
+	--color-pink-300: var(--color-pink-300);
+	--color-pink-400: var(--color-pink-400);
+	--color-pink-500: var(--color-pink-500);
+	--color-pink-600: var(--color-pink-600);
+	--color-pink-700: var(--color-pink-700);
+	--color-pink-800: var(--color-pink-800);
+	--color-pink-900: var(--color-pink-900);
+
+	--color-red-5: var(--color-red-5);
+	--color-red-25: var(--color-red-25);
+	--color-red-50: var(--color-red-50);
+	--color-red-100: var(--color-red-100);
+	--color-red-200: var(--color-red-200);
+	--color-red-300: var(--color-red-300);
+	--color-red-400: var(--color-red-400);
+	--color-red-500: var(--color-red-500);
+	--color-red-600: var(--color-red-600);
+	--color-red-700: var(--color-red-700);
+	--color-red-800: var(--color-red-800);
+	--color-red-900: var(--color-red-900);
+
+	--color-orange-5: var(--color-orange-5);
+	--color-orange-25: var(--color-orange-25);
+	--color-orange-50: var(--color-orange-50);
+	--color-orange-100: var(--color-orange-100);
+	--color-orange-200: var(--color-orange-200);
+	--color-orange-300: var(--color-orange-300);
+	--color-orange-400: var(--color-orange-400);
+	--color-orange-500: var(--color-orange-500);
+	--color-orange-600: var(--color-orange-600);
+	--color-orange-700: var(--color-orange-700);
+	--color-orange-800: var(--color-orange-800);
+	--color-orange-900: var(--color-orange-900);
+
+	--color-yellow-5: var(--color-yellow-5);
+	--color-yellow-25: var(--color-yellow-25);
+	--color-yellow-50: var(--color-yellow-50);
+	--color-yellow-100: var(--color-yellow-100);
+	--color-yellow-200: var(--color-yellow-200);
+	--color-yellow-300: var(--color-yellow-300);
+	--color-yellow-400: var(--color-yellow-400);
+	--color-yellow-500: var(--color-yellow-500);
+	--color-yellow-600: var(--color-yellow-600);
+	--color-yellow-700: var(--color-yellow-700);
+	--color-yellow-800: var(--color-yellow-800);
+	--color-yellow-900: var(--color-yellow-900);
+
+	--color-lime-5: var(--color-lime-5);
+	--color-lime-25: var(--color-lime-25);
+	--color-lime-50: var(--color-lime-50);
+	--color-lime-100: var(--color-lime-100);
+	--color-lime-200: var(--color-lime-200);
+	--color-lime-300: var(--color-lime-300);
+	--color-lime-400: var(--color-lime-400);
+	--color-lime-500: var(--color-lime-500);
+	--color-lime-600: var(--color-lime-600);
+	--color-lime-700: var(--color-lime-700);
+	--color-lime-800: var(--color-lime-800);
+	--color-lime-900: var(--color-lime-900);
+
+	--color-green-5: var(--color-green-5);
+	--color-green-25: var(--color-green-25);
+	--color-green-50: var(--color-green-50);
+	--color-green-100: var(--color-green-100);
+	--color-green-200: var(--color-green-200);
+	--color-green-300: var(--color-green-300);
+	--color-green-400: var(--color-green-400);
+	--color-green-500: var(--color-green-500);
+	--color-green-600: var(--color-green-600);
+	--color-green-700: var(--color-green-700);
+	--color-green-800: var(--color-green-800);
+	--color-green-900: var(--color-green-900);
+	--color-mint-5: var(--color-mint-5);
+	--color-mint-25: var(--color-mint-25);
+	--color-mint-50: var(--color-mint-50);
+	--color-mint-100: var(--color-mint-100);
+	--color-mint-200: var(--color-mint-200);
+	--color-mint-300: var(--color-mint-300);
+	--color-mint-400: var(--color-mint-400);
+	--color-mint-500: var(--color-mint-500);
+	--color-mint-600: var(--color-mint-600);
+	--color-mint-700: var(--color-mint-700);
+	--color-mint-800: var(--color-mint-800);
+	--color-mint-900: var(--color-mint-900);
+	--color-skyblue-5: var(--color-skyblue-5);
+	--color-skyblue-25: var(--color-skyblue-25);
+	--color-skyblue-50: var(--color-skyblue-50);
+	--color-skyblue-100: var(--color-skyblue-100);
+	--color-skyblue-200: var(--color-skyblue-200);
+	--color-skyblue-300: var(--color-skyblue-300);
+	--color-skyblue-400: var(--color-skyblue-400);
+	--color-skyblue-500: var(--color-skyblue-500);
+	--color-skyblue-600: var(--color-skyblue-600);
+	--color-skyblue-700: var(--color-skyblue-700);
+	--color-skyblue-800: var(--color-skyblue-800);
+	--color-skyblue-900: var(--color-skyblue-900);
+	--color-blue-5: var(--color-blue-5);
+	--color-blue-25: var(--color-blue-25);
+	--color-blue-50: var(--color-blue-50);
+	--color-blue-100: var(--color-blue-100);
+	--color-blue-200: var(--color-blue-200);
+	--color-blue-300: var(--color-blue-300);
+	--color-blue-400: var(--color-blue-400);
+	--color-blue-500: var(--color-blue-500);
+	--color-blue-600: var(--color-blue-600);
+	--color-blue-700: var(--color-blue-700);
+	--color-blue-800: var(--color-blue-800);
+	--color-blue-900: var(--color-blue-900);
+	--color-indigo-5: var(--color-indigo-5);
+	--color-indigo-25: var(--color-indigo-25);
+	--color-indigo-50: var(--color-indigo-50);
+	--color-indigo-100: var(--color-indigo-100);
+	--color-indigo-200: var(--color-indigo-200);
+	--color-indigo-300: var(--color-indigo-300);
+	--color-indigo-400: var(--color-indigo-400);
+	--color-indigo-500: var(--color-indigo-500);
+	--color-indigo-600: var(--color-indigo-600);
+	--color-indigo-700: var(--color-indigo-700);
+	--color-indigo-800: var(--color-indigo-800);
+	--color-indigo-900: var(--color-indigo-900);
+	--color-purple-5: var(--color-purple-5);
+	--color-purple-25: var(--color-purple-25);
+	--color-purple-50: var(--color-purple-50);
+	--color-purple-100: var(--color-purple-100);
+	--color-purple-200: var(--color-purple-200);
+	--color-purple-300: var(--color-purple-300);
+	--color-purple-400: var(--color-purple-400);
+	--color-purple-500: var(--color-purple-500);
+	--color-purple-600: var(--color-purple-600);
+	--color-purple-700: var(--color-purple-700);
+	--color-purple-800: var(--color-purple-800);
+	--color-purple-900: var(--color-purple-900);
+	--color-gray-5: var(--color-gray-5);
+	--color-gray-25: var(--color-gray-25);
+	--color-gray-50: var(--color-gray-50);
+	--color-gray-100: var(--color-gray-100);
+	--color-gray-200: var(--color-gray-200);
+	--color-gray-300: var(--color-gray-300);
+	--color-gray-400: var(--color-gray-400);
+	--color-gray-500: var(--color-gray-500);
+	--color-gray-600: var(--color-gray-600);
+	--color-gray-700: var(--color-gray-700);
+	--color-gray-800: var(--color-gray-800);
+	--color-gray-900: var(--color-gray-900);
+
+	--animate-pulse: pulse 1.2s ease-in-out infinite;
+
+	/* OverlayRoot scrim fade — `ease-out` is the CSS keyword curve cubic-bezier(0,0,0.58,1),
+	   matching the emotion modalSettings animation exactly (Tailwind's ease-out token differs). */
+	--animate-overlay-fade-in: overlay-fade-in 0.4s ease-out;
+	--animate-overlay-fade-out: overlay-fade-out 0.4s ease-out;
+
+	--breakpoint-pc: 75rem;
+
+	@keyframes pulse {
+		50% {
+			background-color: var(--color-gray-5);
+		}
+	}
+
+	@keyframes overlay-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes overlay-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+}
+
+/** Figma에 web이라고 붙은 폰트는 이것 사용 */
+@utility typo-h1 {
+	@apply text-[41px] leading-[56px] font-semibold tracking-[-0.8px];
+}
+@utility typo-h2 {
+	@apply text-[29px] leading-[38px] font-semibold tracking-[-0.4px];
+}
+@utility typo-h3 {
+	@apply text-[23px] leading-[32px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h4 {
+	@apply text-[19px] leading-[26px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h5 {
+	@apply text-[17px] leading-[24px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h6 {
+	@apply text-[15px] leading-[22px] font-semibold tracking-[-0.2px];
+}
+@utility typo-h7 {
+	@apply text-[13px] leading-[18px] font-semibold tracking-[-0.2px];
+}
+@utility typo-h8 {
+	@apply text-[11px] leading-[18px] font-semibold tracking-[-0.2px];
+}
+@utility typo-t1 {
+	@apply text-[19px] leading-[26px] font-medium tracking-[-0.3px];
+}
+@utility typo-t2 {
+	@apply text-[17px] leading-[24px] font-medium tracking-[-0.3px];
+}
+@utility typo-t3 {
+	@apply text-[15px] leading-[22px] font-medium tracking-[-0.2px];
+}
+@utility typo-t4 {
+	@apply text-[13px] leading-[18px] font-medium tracking-[-0.2px];
+}
+@utility typo-b1 {
+	@apply text-[15px] leading-[22px] font-normal tracking-[-0.2px];
+}
+@utility typo-b2 {
+	@apply text-[13px] leading-[18px] font-normal tracking-[-0.2px];
+}
+@utility typo-c1 {
+	@apply text-[11px] leading-[18px] font-medium tracking-[-0.2px];
+}
+@utility typo-c2 {
+	@apply text-[9px] leading-[14px] font-medium tracking-[-0.2px];
+}
+
+/** Figma에 aos 붙은 폰트는 이것 사용 */
+@utility typo-h1-android {
+	@apply text-[41px] leading-[56px] font-semibold tracking-[-0.8px];
+}
+@utility typo-h2-android {
+	@apply text-[29px] leading-[35px] font-semibold tracking-[-0.4px];
+}
+@utility typo-h3-android {
+	@apply text-[23px] leading-[27px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h4-android {
+	@apply text-[19px] leading-[23px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h5-android {
+	@apply text-[17px] leading-[20px] font-semibold tracking-[-0.3px];
+}
+@utility typo-h6-android {
+	@apply text-[15px] leading-[18px] font-semibold tracking-[-0.2px];
+}
+@utility typo-h7-android {
+	@apply text-[13px] leading-[18px] font-semibold tracking-[-0.2px];
+}
+@utility typo-h8-android {
+	@apply text-[11px] leading-[18px] font-semibold tracking-[-0.2px];
+}
+@utility typo-t1-android {
+	@apply text-[19px] leading-[23px] font-medium tracking-[-0.3px];
+}
+@utility typo-t2-android {
+	@apply text-[17px] leading-[20px] font-medium tracking-[-0.3px];
+}
+@utility typo-t3-android {
+	@apply text-[15px] leading-[18px] font-medium tracking-[-0.2px];
+}
+@utility typo-t4-android {
+	@apply text-[13px] leading-[16px] font-medium tracking-[-0.2px];
+}
+@utility typo-b1-android {
+	@apply text-[15px] leading-[18px] font-normal tracking-[-0.2px];
+}
+@utility typo-b2-android {
+	@apply text-[13px] leading-[16px] font-normal tracking-[-0.2px];
+}
+@utility typo-c1-android {
+	@apply text-[11px] leading-[18px] font-medium tracking-[-0.2px];
+}
+@utility typo-c2-android {
+	@apply text-[9px] leading-[14px] font-medium tracking-[-0.2px];
+}