/**
 * [한글 주석] 다크모드 색상 팔레트 — 블랙·다크 계열 배경 / 흰색·회색 폰트만 사용합니다.
 * 파란색 등 다른 색상은 일절 사용하지 않습니다.
 */

:root[data-zyss-color-mode="light"] {
  color-scheme: light;
}

:root[data-zyss-color-mode="dark"] {
  color-scheme: dark;
  --zyss-color-background:     #000000;
  --zyss-color-surface:        #121212;
  --zyss-color-surface-strong: #1a1a1a;
  --zyss-color-text:           #ffffff;
  --zyss-color-text-muted:     #a0a0a0;
  --zyss-color-border:         rgba(255, 255, 255, 0.10);
  --zyss-color-accent:         #d8d8d8;
  --zyss-shadow-soft:          0 22px 40px rgba(0, 0, 0, 0.50);
}

/* ── 폼 요소: 배경 다크 (#1a1a1a), 폰트 흰색 ── */
:root[data-zyss-color-mode="dark"] input,
:root[data-zyss-color-mode="dark"] textarea,
:root[data-zyss-color-mode="dark"] select {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
}

:root[data-zyss-color-mode="dark"] input::placeholder,
:root[data-zyss-color-mode="dark"] textarea::placeholder {
  color: #888888 !important;
}

/* 자동완성 파란 배경 차단 */
:root[data-zyss-color-mode="dark"] input:-webkit-autofill,
:root[data-zyss-color-mode="dark"] input:-webkit-autofill:hover,
:root[data-zyss-color-mode="dark"] input:-webkit-autofill:focus,
:root[data-zyss-color-mode="dark"] textarea:-webkit-autofill,
:root[data-zyss-color-mode="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
  box-shadow:         0 0 0 1000px #1a1a1a inset !important;
}

/* ── 헤더·카드·사이드바 등 주요 컴포넌트 ── */
:root[data-zyss-color-mode="dark"] .zyss-theme__header,
:root[data-zyss-color-mode="dark"] .zyss-theme__nav,
:root[data-zyss-color-mode="dark"] .zyss-theme__hero-card,
:root[data-zyss-color-mode="dark"] .zyss-theme__board-hero,
:root[data-zyss-color-mode="dark"] .zyss-theme__card,
:root[data-zyss-color-mode="dark"] .zyss-theme__single,
:root[data-zyss-color-mode="dark"] .zyss-theme__sidebar,
:root[data-zyss-color-mode="dark"] .zyss-theme__widget,
:root[data-zyss-color-mode="dark"] .zyss-theme__nav-submenu {
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.40);
}

/* ── 링크·메뉴 hover (파란색 차단, 흰색 계열만) ── */
:root[data-zyss-color-mode="dark"] a {
  color: #e0e0e0;
}
:root[data-zyss-color-mode="dark"] a:hover {
  color: #ffffff;
}

:root[data-zyss-color-mode="dark"] .zyss-theme__nav-link:hover,
:root[data-zyss-color-mode="dark"] .zyss-theme__footer-nav-list a:hover,
:root[data-zyss-color-mode="dark"] .zyss-theme__primary-link:hover,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── 활성 메뉴·뱃지 ── */
:root[data-zyss-color-mode="dark"] .zyss-theme__nav-link.is-current,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link.is-current,
:root[data-zyss-color-mode="dark"] .zyss-theme__nav-link.is-current-branch,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link.is-current-branch,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-badge,
:root[data-zyss-color-mode="dark"] .zyss-theme__card-skin-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
}

/* ── 사이드 내비 링크 ── */
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link--depth-2,
:root[data-zyss-color-mode="dark"] .zyss-theme__side-nav-link--depth-3 {
  background: rgba(255, 255, 255, 0.04);
}

/* ── 보조 텍스트 (회색) ── */
:root[data-zyss-color-mode="dark"] .zyss-theme__eyebrow,
:root[data-zyss-color-mode="dark"] .zyss-theme__card-meta,
:root[data-zyss-color-mode="dark"] .zyss-theme__site-description,
:root[data-zyss-color-mode="dark"] .zyss-theme__meta,
:root[data-zyss-color-mode="dark"] .zyss-theme__footer-text,
:root[data-zyss-color-mode="dark"] .zyss-theme__breadcrumb {
  color: #a0a0a0;
}

/* ── 게시판 스킨 뱃지 ── */
:root[data-zyss-color-mode="dark"] .zyss-theme__card-skin-badge--list,
:root[data-zyss-color-mode="dark"] .zyss-theme__card-skin-badge--webzine,
:root[data-zyss-color-mode="dark"] .zyss-theme__card-skin-badge--album {
  background: rgba(255, 255, 255, 0.08);
  color: #d6d6d6;
}

/* ── 포커스 링 (파란색 차단) ── */
:root[data-zyss-color-mode="dark"] *:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.40) !important;
  outline-offset: 2px;
}