@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #111111;
  --muted: #555555;
  --border: #e5e7eb;
  --card: #ffffff;
  --brand: #007bff;
  --brand-600: #0056b3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --text: #e7edf5;
    --muted: #9fb0c2;
    --border: #203040;
    --card: #121922;
    --brand: #5aa2ff;
    --brand-600: #3a82df;
  }
}

/* Explicit dark override via toggle */
.dark {
  --bg: #0b0f14;
  --text: #e7edf5;
  --muted: #9fb0c2;
  --border: #203040;
  --card: #121922;
  --brand: #5aa2ff;
  --brand-600: #3a82df;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: 'Pretendard','Noto Sans KR','Apple SD Gothic Neo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.site-content { flex: 1 0 auto; }

.site-header { background: var(--card); border-bottom: 1px solid var(--border); }
.site-footer { background: var(--card); border-top: 1px solid var(--border); margin-top: auto; }

/* Navbar common styles */
.navbar { max-width: 1100px; margin:0 auto; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.brand { font-weight:700; color: var(--text); text-decoration:none; }
.nav-link { color: var(--muted); text-decoration:none; }
.nav-link:hover { color: var(--brand); }

/* Focus-visible 접근성 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Optional utility classes */
.btn { transition: background-color .2s ease, border-color .2s ease; }

/* Dark mode toggle */
.dark-toggle { appearance: none; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--border); position: relative; cursor: pointer; background: var(--border); }
.dark-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: transform .2s ease; }
.dark .dark-toggle { background: var(--brand); border-color: var(--brand-600); }
.dark .dark-toggle::after { transform: translateX(20px); }

/* Dark class overrides */
.dark body { background: var(--bg); color: var(--text); }