fix: scss cannot set html[dataset], move it to global.css

styles/agenda/common.scss

@@ -17,51 +17,3 @@ $color-coalition-lee: #ff8a85;
 
 // font-family
 $font-family-menu: 'Cafe24 Simplehae';
-
-// color
-$bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
-$bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
-
-$text-light: black;
-$text-dark: white;
-$border-light: 1px solid black;
-$border-dark: 1px solid white;
-
-$box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-$box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
-
-$highlight-yellow-light: #f8df85;
-$highlight-violet-light: #af71ff;
-$highlight-yellow-dark: #ff8534;
-$highlight-violet-dark: #af71ff; // 나중에 수정 - 다크모드 색상 변경 필요
-
-$box-bg-1-light: #f8f8f8;
-$box-bg-2-light: #c8c8c8;
-$box-bg-3-light: #b0b0b0;
-$box-bg-1-dark: #666666;
-$box-bg-2-dark: #888888;
-$box-bg-3-dark: #a7a7a7;
-
-html[data-theme='light'] {
-  --color-bg: #{$bg-light};
-  --color-text: #{$text-light};
-  --default-border: #{$border-light};
-  --default-box-shadow: #{$border-light};
-  --highlight-yellow: #{$highlight-yellow-light};
-  --highlight-violet: #{$highlight-violet-light};
-  --box-bg-1: #{$box-bg-1-light};
-  --box-bg-2: #{$box-bg-2-light};
-  --box-bg-3: #{$box-bg-3-light};
-}
-
-html[data-theme='dark'] {
-  --color-bg: #{$bg-dark};
-  --color-text: #{$text-dark};
-  --default-border: #{$border-dark};
-  --default-box-shadow: #{$border-dark};
-  --highlight-yellow: #{$highlight-yellow-dark};
-  --highlight-violet: #{$highlight-violet-dark};
-  --box-bg-1: #{$box-bg-1-dark};
-  --box-bg-2: #{$box-bg-2-dark};
-  --box-bg-3: #{$box-bg-3-dark};
-}

styles/color-theme.css

@@ -0,0 +1,48 @@
+/* dark - light mode */
+:root {
+  --bg-light: linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%);
+  --bg-dark: linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%);
+  --text-light: #000000;
+  --text-dark: #ffffff;
+  --border-light: 1px solid black;
+  --border-dark: 1px solid white;
+
+  --box-shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  --box-shadow-dark: 0px 4px 4px 0px rgba(255, 255, 255, 0.25);
+
+  --highlight-yellow-light: #f8df85;
+  --highlight-violet-light: #af71ff;
+  --highlight-yellow-dark: #ff8534;
+  --highlight-violet-dark: #af71ff;
+
+  --box-bg-1-light: #f8f8f8;
+  --box-bg-2-light: #c8c8c8;
+  --box-bg-3-light: #b0b0b0;
+  --box-bg-1-dark: #666666;
+  --box-bg-2-dark: #888888;
+  --box-bg-3-dark: #a7a7a7;
+}
+
+html[data-theme='light'] {
+  --color-bg: #{linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%)};
+  --color-text: #{$text-light};
+  --default-border: #{$border-light};
+  --default-box-shadow: #{$border-light};
+  --highlight-yellow: #{$highlight-yellow-light};
+  --highlight-violet: #{$highlight-violet-light};
+  --box-bg-1: #{$box-bg-1-light};
+  --box-bg-2: #{$box-bg-2-light};
+  --box-bg-3: #{$box-bg-3-light};
+}
+
+html[data-theme='dark'] {
+  --color-bg: #{linear-gradient(180deg, #38253a 0%, #604ecd 73%, #999772 100%)};
+  --color-text: #{$text-dark};
+  --default-border: #{$border-dark};
+  --default-box-shadow: #{$border-dark};
+  --highlight-yellow: #{$highlight-yellow-dark};
+  --highlight-violet: #{$highlight-violet-dark};
+  --box-bg-1: #{$box-bg-1-dark};
+  --box-bg-2: #{$box-bg-2-dark};
+  --box-bg-3: #{$box-bg-3-dark};
+}

styles/globals.css

@@ -1,3 +1,5 @@
+@import url('./color-theme.css');
+
 html,
 body {
   padding: 0;