.

src/app/globals.css

@@ -1,8 +1,19 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-page: #f5f5f7;
+  --color-surface: rgba(255, 255, 255, 0.78);
+  --color-surface-strong: #ffffff;
+  --color-line: rgba(0, 0, 0, 0.08);
+  --color-text: #1d1d1f;
+  --color-text-muted: #6e6e73;
+  --color-text-subtle: #86868b;
+  --color-accent: #007aff;
+  --color-accent-soft: rgba(0, 122, 255, 0.1);
+  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.08);
+  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.06);
+  --background: var(--color-page);
+  --foreground: var(--color-text);
 }
 
 @theme inline {
@@ -14,15 +25,40 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --color-page: #0b0b0c;
+    --color-surface: rgba(28, 28, 30, 0.72);
+    --color-surface-strong: #1c1c1e;
+    --color-line: rgba(255, 255, 255, 0.1);
+    --color-text: #f5f5f7;
+    --color-text-muted: #a1a1a6;
+    --color-text-subtle: #8e8e93;
+    --color-accent: #0a84ff;
+    --color-accent-soft: rgba(10, 132, 255, 0.16);
+    --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.36);
+    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.28);
+    --background: var(--color-page);
+    --foreground: var(--color-text);
+    color-scheme: dark;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "SF Pro Display",
+    "SF Pro Text",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    system-ui,
+    sans-serif;
+}
+
+::selection {
+  background: var(--color-accent-soft);
+  color: var(--color-text);
 }
 
 .w-md-editor {
@@ -34,4 +70,4 @@ body {
 .w-md-editor-toolbar {
   border-radius: 0.75rem 0.75rem 0 0 !important;
   background-color: #f9fafb !important;
-}
+}