공개 화면 테마와 패널 구조 보정

assets/css/main.css

@@ -3,29 +3,67 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --site-bg: #fbfbfa;
+    --site-panel: #f6f6f5;
+    --site-panel-strong: #ffffff;
+    --site-text: #111111;
+    --site-muted: #454545;
+    --site-soft: #6f7480;
+    --site-line: #e2e2e0;
+    --site-input: #f2f2f1;
+    --site-accent: #ff4f2e;
+    --site-accent-text: #ffffff;
+    --site-invert: #111111;
+    --site-invert-text: #ffffff;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --site-bg: #050505;
+      --site-panel: #080808;
+      --site-panel-strong: #0d0d0d;
+      --site-text: #f4f4f2;
+      --site-muted: #c7c7c2;
+      --site-soft: #8b8e96;
+      --site-line: #252525;
+      --site-input: #171717;
+      --site-accent: #ff4f2e;
+      --site-accent-text: #ffffff;
+      --site-invert: #f4f4f2;
+      --site-invert-text: #111111;
+    }
+  }
+
   html {
     font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
-    color: #1f2328;
-    background: #f7f7f4;
+    color: var(--site-text);
+    background: var(--site-bg);
   }
 
   body {
     min-width: 320px;
     margin: 0;
+    background: var(--site-bg);
   }
 }
 
 @layer components {
   .site-shell {
-    @apply min-h-screen bg-surface text-ink;
+    min-height: 100vh;
+    color: var(--site-text);
+    background: var(--site-bg);
   }
 
   .site-content-grid {
     @apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
+    min-height: calc(100vh - 57px);
+    background: var(--site-bg);
   }
 
   .site-section {
-    @apply border-b border-line bg-paper;
+    border-bottom: 1px solid var(--site-line);
+    background: var(--site-bg);
   }
 
   .site-section-header {
@@ -37,6 +75,55 @@
   }
 
   .post-prose {
-    @apply max-w-none text-[17px] leading-8 text-ink;
+    @apply max-w-none text-[17px] leading-8;
+    color: var(--site-text);
+  }
+
+  .site-header {
+    height: 57px;
+    border-bottom: 1px solid var(--site-line);
+    background: var(--site-panel);
+    color: var(--site-text);
+  }
+
+  .site-main {
+    min-height: calc(100vh - 57px);
+    border-left: 1px solid var(--site-line);
+    border-right: 1px solid var(--site-line);
+    background: var(--site-bg);
+  }
+
+  .site-sidebar {
+    min-height: calc(100vh - 57px);
+    background: var(--site-panel);
+    color: var(--site-text);
+  }
+
+  .site-sidebar-section {
+    border-bottom: 1px solid var(--site-line);
+  }
+
+  .site-muted {
+    color: var(--site-muted);
+  }
+
+  .site-soft {
+    color: var(--site-soft);
+  }
+
+  .site-input {
+    border: 1px solid var(--site-line);
+    background: var(--site-input);
+    color: var(--site-text);
+  }
+
+  .site-button {
+    background: var(--site-invert);
+    color: var(--site-invert-text);
+  }
+
+  .site-accent-button {
+    background: var(--site-accent);
+    color: var(--site-accent-text);
   }
 }