feat. 데이터 구조 변경에 따른 수정

layers/assets/css/app.css

@@ -1,3 +1,6 @@
+@import "./base/_theme.css";
+@import "./base/_reset.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

layers/assets/css/base/_reset.css

@@ -0,0 +1,6 @@
+/* CSS 리셋 및 기본 스타일 */
+@layer base {
+  body {
+    background-color: #000;
+  }
+}

layers/assets/css/base/_theme.css

@@ -1,4 +1,4 @@
-/* 라이트 테마 기본 색상 */
+/* CSS 변수 정의 - @layer 밖에 위치 */
 :root {
   --foreground: #ffffff;
   --foreground-10: #ffffff;
@@ -39,11 +39,13 @@
   --border: #475569;
 }
 
-/* Gradient 텍스트 스타일 */
-.text-gradient-pink {
-  background: linear-gradient(270deg, #e872ff 0%, #ff357e 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  color: transparent;
+/* 커스텀 컴포넌트 스타일 */
+@layer components {
+  .text-gradient-pink {
+    background: linear-gradient(270deg, #e872ff 0%, #ff357e 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+  }
 }