diff --git a/apps/manager/package.json b/apps/manager/package.json
index fbce9d94..70544993 100644
--- a/apps/manager/package.json
+++ b/apps/manager/package.json
@@ -21,6 +21,7 @@
     "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
     "@hcc/ui": "workspace:*",
+    "@hcc/style": "workspace:*",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@vercel/analytics": "^1.5.0",
     "next": "^15.4.6",
diff --git a/apps/manager/src/app/layout.tsx b/apps/manager/src/app/layout.tsx
index e20e0541..8e912676 100644
--- a/apps/manager/src/app/layout.tsx
+++ b/apps/manager/src/app/layout.tsx
@@ -5,7 +5,7 @@ import { Layout } from '~/components/layout';
 import { Pretendard } from './_fonts';
 import { Provider } from './provider';
 import '~/styles/globals.css';
-import '@hcc/ui/index.css';
+import '@hcc/ui/styles.css';
 
 export const metadata: Metadata = {
   title: '훕치치 매니저',
diff --git a/apps/manager/src/styles/globals.css b/apps/manager/src/styles/globals.css
index b990ee02..c871147d 100644
--- a/apps/manager/src/styles/globals.css
+++ b/apps/manager/src/styles/globals.css
@@ -1,38 +1,3 @@
 @import "tailwindcss";
-@import "./utilities.css";
-
-@theme {
-  --breakpoint-*: initial;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-
-  --z-index-header: 10;
-  --z-index-above: 1;
-
-  --app-max-width: 560px;
-
-  --color-primary-100: #F2F8FF;
-  --color-primary-600: #007AFF;
-}
-
-@layer base {
-  html, body {
-    height: 100%;
-  }
-
-  body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    padding-bottom: env(safe-area-inset-bottom);
-    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;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-size-adjust: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scrollbar-gutter: stable;
-    background-color: var(--color-neutral-50);
-  }
-}
+@import "@hcc/style/utilities.css";
+@import "@hcc/style/theme.css";
diff --git a/apps/spectator/package.json b/apps/spectator/package.json
index c268b914..fb6a40f7 100644
--- a/apps/spectator/package.json
+++ b/apps/spectator/package.json
@@ -19,6 +19,7 @@
     "@bprogress/next": "^3.2.12",
     "@hcc/api-base": "workspace:*",
     "@hcc/icons": "workspace:*",
+    "@hcc/style": "workspace:*",
     "@vercel/analytics": "^1.5.0",
     "next": "^15.4.6",
     "react": "^19.1.1",
diff --git a/apps/spectator/src/styles/globals.css b/apps/spectator/src/styles/globals.css
index b990ee02..c871147d 100644
--- a/apps/spectator/src/styles/globals.css
+++ b/apps/spectator/src/styles/globals.css
@@ -1,38 +1,3 @@
 @import "tailwindcss";
-@import "./utilities.css";
-
-@theme {
-  --breakpoint-*: initial;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-
-  --z-index-header: 10;
-  --z-index-above: 1;
-
-  --app-max-width: 560px;
-
-  --color-primary-100: #F2F8FF;
-  --color-primary-600: #007AFF;
-}
-
-@layer base {
-  html, body {
-    height: 100%;
-  }
-
-  body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    padding-bottom: env(safe-area-inset-bottom);
-    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;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -webkit-text-size-adjust: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    scrollbar-gutter: stable;
-    background-color: var(--color-neutral-50);
-  }
-}
+@import "@hcc/style/utilities.css";
+@import "@hcc/style/theme.css";
diff --git a/apps/spectator/src/styles/utilities.css b/apps/spectator/src/styles/utilities.css
deleted file mode 100644
index 54c35286..00000000
--- a/apps/spectator/src/styles/utilities.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@layer utilities {
-  .center {
-    @apply flex items-center justify-center;
-  }
-
-  .center-x {
-    @apply flex justify-center;
-  }
-
-  .center-y {
-    @apply flex items-center;
-  }
-
-  .row-between {
-    @apply flex items-center justify-between;
-  }
-
-  .column {
-    @apply flex flex-col;
-  }
-
-  .column-center {
-    @apply flex flex-col items-center justify-center;
-  }
-
-  .column-center-x {
-    @apply flex flex-col items-center;
-  }
-
-  .column-center-y {
-    @apply flex flex-col justify-center;
-  }
-
-  .column-between {
-    @apply flex flex-col items-center justify-between;
-  }
-}
diff --git a/packages/style/README.md b/packages/style/README.md
new file mode 100644
index 00000000..743628db
--- /dev/null
+++ b/packages/style/README.md
@@ -0,0 +1 @@
+## `@hcc/style`
diff --git a/packages/style/css/theme.css b/packages/style/css/theme.css
new file mode 100644
index 00000000..dd6b28fe
--- /dev/null
+++ b/packages/style/css/theme.css
@@ -0,0 +1,36 @@
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+
+  --z-index-above: 1;
+  --z-index-header: 10;
+
+  --app-max-width: 560px;
+
+  --color-primary-100: #F2F8FF;
+  --color-primary-600: #007AFF;
+}
+
+@layer base {
+  html, body {
+    height: 100%;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding-bottom: env(safe-area-inset-bottom);
+    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;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scrollbar-gutter: stable;
+    background-color: var(--color-neutral-50);
+  }
+}
diff --git a/apps/manager/src/styles/utilities.css b/packages/style/css/utilities.css
similarity index 100%
rename from apps/manager/src/styles/utilities.css
rename to packages/style/css/utilities.css
diff --git a/packages/style/package.json b/packages/style/package.json
new file mode 100644
index 00000000..efc38650
--- /dev/null
+++ b/packages/style/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@hcc/style",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {},
+  "sideEffects": [
+    "css/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    "./theme.css": "./css/theme.css",
+    "./utilities.css": "./css/utilities.css"
+  },
+  "files": [
+    "css"
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d0ff5a10..a9b567d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@hcc/icons':
         specifier: workspace:*
         version: link:../../packages/icons
+      '@hcc/style':
+        specifier: workspace:*
+        version: link:../../packages/style
       '@hcc/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -90,6 +93,9 @@ importers:
       '@hcc/icons':
         specifier: workspace:*
         version: link:../../packages/icons
+      '@hcc/style':
+        specifier: workspace:*
+        version: link:../../packages/style
       '@vercel/analytics':
         specifier: ^1.5.0
         version: 1.5.0(next@15.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)
@@ -184,6 +190,8 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
+  packages/style: {}
+
   packages/ui:
     dependencies:
       '@radix-ui/react-slot':