feat: dark mode toggle

- [data-theme=dark] 팔레트 토큰 오버라이드 → 컴포넌트 자동 적용
- 네비에 테마 토글(달/해 아이콘), localStorage 저장 + OS 선호 감지
- FOUC 방지용 head 인라인 스크립트로 페인트 전 테마 설정
- 기본은 라이트(design-ref: 다크는 기본 캔버스로 쓰지 않음), 토글 옵션 제공

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/static/app.css

@@ -63,6 +63,55 @@
   --pico-card-background-color: var(--bg);
   --pico-card-border-color: var(--border);
   --pico-card-box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04);
+  color-scheme: light;
+}
+
+/* 다크 테마 — 토큰만 교체하면 컴포넌트는 자동으로 따라온다.
+   design-ref 는 다크를 기본으로 쓰지 말라 하므로 토글 옵션으로만 제공. */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: #1b1d23;
+  --bg-alt: #131419;
+  --surface: #262a33;
+  --surface-2: #1e2b44;
+  --text: #eceef2;
+  --text-secondary: #c3c9d2;
+  --text-muted: #8b95a1;
+  --text-dim: #6b7480;
+  --border: #2b2f39;
+  --border-strong: #3a404c;
+  --accent: #4d94ff;
+  --accent-hover: #6aa6ff;
+  --accent-deep: #2f6fd0;
+  --accent-soft: #1e2b44;
+  --success-text: #2ee0a8;
+  --warning-text: #ffb454;
+  --danger: #ff6b78;
+
+  --pico-background-color: var(--bg-alt);
+  --pico-color: var(--text-secondary);
+  --pico-h1-color: var(--text);
+  --pico-h2-color: var(--text);
+  --pico-h3-color: var(--text);
+  --pico-muted-color: var(--text-muted);
+  --pico-primary: #ffffff;
+  --pico-primary-background: var(--accent);
+  --pico-primary-hover-background: var(--accent-hover);
+  --pico-primary-border: var(--accent);
+  --pico-primary-hover-border: var(--accent-hover);
+  --pico-card-background-color: var(--bg);
+  --pico-card-border-color: var(--border);
+  --pico-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --pico-form-element-background-color: var(--surface);
+  --pico-form-element-border-color: var(--border);
+  --pico-form-element-color: var(--text);
+  --pico-progress-background-color: var(--surface);
+}
+
+body {
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 body {
@@ -105,6 +154,40 @@ section {
 .app-nav .container {
   max-width: 1040px;
   padding-block: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 테마 토글 (아이콘 버튼) */
+.theme-toggle {
+  --pico-background-color: transparent;
+  --pico-border-color: var(--border-strong);
+  --pico-color: var(--text-secondary);
+  width: auto;
+  margin: 0;
+  padding: 7px 9px;
+  line-height: 0;
+}
+.theme-toggle:hover {
+  --pico-background-color: var(--bg-alt);
+  --pico-border-color: var(--text-dim);
+}
+.theme-toggle .icon {
+  width: 18px;
+  height: 18px;
+}
+.theme-toggle .sun {
+  display: none;
+}
+.theme-toggle .moon {
+  display: inline-block;
+}
+[data-theme="dark"] .theme-toggle .moon {
+  display: none;
+}
+[data-theme="dark"] .theme-toggle .sun {
+  display: inline-block;
 }
 .app-nav .brand {
   margin: 0;