이거 나중에 수정해주셈

src/app/globals.css

@@ -1,94 +1,26 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
+@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-* {
-  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+:root {
+    --bg: var(--ctp-mocha-base);
+    --fg: var(--ctp-mocha-crust);
+    --primary: var(--ctp-mocha-lavender);
+    --secondary: var(--ctp-mocha-mauve);
+    --accent: var(--ctp-mocha-peach);
+    --accent-foreground: var(--ctp-mocha-text);
 }
 
-html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #262225;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: flex;
-  min-height: 100vh;
-}
-
-#__next {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #ffe7fb;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #ffe7fb;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #ffe7fb;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-/* Scrollbar Styles */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 11px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgb(65, 66, 68);
-  border: 1px solid rgb(29, 30, 32);
-  border-radius: 8px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(155, 156, 157);
+.main {
+    background-color: var(--bg);
+    color: var(--fg);
+    width: 100vw;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }