/* 다크모드 변수 및 스타일 */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --color-bg: #f7f7f8;
  --color-text: #202123;
  --color-link: #0a83d7;
  --color-nav-bg: #ffffff;
  --color-section-bg: #ffffff;
  --color-btn-bg: #f1f2f4;
  --color-btn-text: #202123;
  --color-border: #e0e0e0;
  --color-muted: #666;
  --color-complete: green;
  --color-drag-over: #e0e0e0;
  --color-drag-over-edge: #bbb;
  --hover-brightness: 90%;
  --color-badge-bg: red;
  --color-badge-text: white;
}

body.dark-mode {
  --color-bg: #212121;
  --color-text: #eaeaea;
  --color-link: #6a9eff;
  --color-nav-bg: #181818;
  --color-section-bg: #181818;
  --color-btn-bg: #333543;
  --color-btn-text: #eaeaea;
  --color-border: #333333;
  --color-muted: #aaaaaa;
  --color-complete: green;
  --color-drag-over: #383a40;
  --color-drag-over-edge: #777;
  --hover-brightness: 110%;
  --color-badge-bg: red;
  --color-badge-text: white;
}

@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    --color-bg: #212121;
    --color-text: #eaeaea;
    --color-link: #6a9eff;
    --color-nav-bg: #181818;
    --color-section-bg: #181818;
    --color-btn-bg: #333543;
    --color-btn-text: #eaeaea;
    --color-border: #333333;
    --color-muted: #aaaaaa;
    --color-complete: green;
    --color-drag-over: #383a40;
    --color-drag-over-edge: #777;
    --hover-brightness: 110%;
    --color-badge-bg: red;
    --color-badge-text: white;
  }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.3s, color 0.3s;
}
nav {
  background: var(--color-nav-bg);
}
a {
  color: var(--color-link);
}
main, section.creative {
  background: var(--color-section-bg);
}

button, input[type="button"], input[type="submit"] {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: none;
  border-radius: 1px;
  padding: 2px 4px;
  transition: background 0.3s, color 0.3s;
}

/* 기타 요소도 필요에 따라 추가 가능 */