/* =====================================================================
   더지 (deoji.glut.co.kr) - 다크 모드 (토글 버전)
   ---------------------------------------------------------------------
   동작:
     body.dark-mode 클래스가 있을 때만 다크 적용.
     JS(dark-mode-toggle.js)가 토글 버튼 클릭 시 클래스 add/remove,
     localStorage에 사용자 선택 저장. 첫 방문은 OS 다크모드 설정 따름.
   적용 방법:
     wp-admin → 모양/외모 → 사용자 정의하기 → 추가 CSS
     → 이 파일 전체 붙여넣고 저장
   ===================================================================== */

/* ── 테마 전환 순간 모든 transition 무효화 (JS가 잠깐 추가) ── */
body.no-transitions,
body.no-transitions *,
body.no-transitions *::before,
body.no-transitions *::after {
  transition: none !important;
  animation: none !important;
}

/* ── 토글 버튼 (다크/라이트 공통) ──────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  transition: transform 0.15s ease;
}
.theme-toggle:hover {
  transform: scale(1.08);
}
.theme-toggle:active {
  transform: scale(0.96);
}

body.dark-mode .theme-toggle {
  background: #262626;
  color: #fbbf24;
  border-color: #525252;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 수동 라이트 모드: OS 다크모드(@media prefers-color-scheme)보다 우선 */
body.light-mode {
  --wp--preset--color--background: #ffffff !important;
  --wp--preset--color--base: #ffffff !important;
  --wp--preset--color--surface: #f8fafc !important;
  --wp--preset--color--text: #1a1a1a !important;
  --wp--preset--color--text-muted: #666666 !important;
  --wp--preset--color--border: #e5e7eb !important;
  --wp--preset--color--primary: #1a4d8c !important;
  --wp--preset--color--accent: #c47f17 !important;
  --deoji-table-head: #e0e0e0 !important;
  --deoji-table-border: #c0c0c0 !important;

  background-color: #ffffff !important;
  color: #1a1a1a !important;
  color-scheme: light;
}

body.light-mode .wp-site-blocks {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

body.light-mode header,
body.light-mode footer,
body.light-mode .wp-block-template-part,
body.light-mode .deoji-site-header {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .wp-block-post-title,
body.light-mode .entry-title {
  color: #111827 !important;
}

body.light-mode p,
body.light-mode li,
body.light-mode dd,
body.light-mode dt,
body.light-mode .entry-content p,
body.light-mode .entry-content li {
  color: #1f2937 !important;
}

body.light-mode a:where(:not(.wp-element-button)) {
  color: #1a4d8c !important;
}

body.light-mode .theme-toggle {
  background: #ffffff;
  color: #333333;
  border-color: #cccccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =====================================================================
   다크 모드 본체 (body.dark-mode 가 있을 때만)
   ===================================================================== */

/* ── WP 글로벌 컬러 프리셋 덮어쓰기 ────────────────── */
body.dark-mode {
  --wp--preset--color--background: #1a1a1a !important;
  --wp--preset--color--text: #e5e5e5 !important;
  --wp--preset--color--text-muted: #a3a3a3 !important;
  --wp--preset--color--surface: #262626 !important;
  --wp--preset--color--border: #404040 !important;
  --wp--preset--color--primary: #60a5fa !important;
  --wp--preset--color--accent: #fbbf24 !important;

  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
}

body.dark-mode .wp-site-blocks {
  background-color: #1a1a1a !important;
  color: #e5e5e5 !important;
}

/* ── 헤더/푸터/사이드바 ─────────────────────────────── */
body.dark-mode header,
body.dark-mode footer,
body.dark-mode .wp-block-template-part {
  background-color: #262626 !important;
  color: #e5e5e5 !important;
}

/* ── 제목 ─────────────────────────────────────────── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .wp-block-post-title,
body.dark-mode .entry-title,
body.dark-mode .entry-content h1,
body.dark-mode .entry-content h2,
body.dark-mode .entry-content h3,
body.dark-mode .entry-content h4 {
  color: #fafafa !important;
  border-color: #404040 !important;
}
body.dark-mode .entry-content h2 {
  border-top-color: #404040 !important;
}

/* ── 본문 텍스트 ──────────────────────────────────── */
body.dark-mode p,
body.dark-mode li,
body.dark-mode dd,
body.dark-mode dt,
body.dark-mode .entry-content p,
body.dark-mode .entry-content li {
  color: #e5e5e5 !important;
}

/* ── 링크 ─────────────────────────────────────────── */
body.dark-mode a:where(:not(.wp-element-button)) {
  color: #60a5fa !important;
}
body.dark-mode a:where(:not(.wp-element-button)):hover {
  color: #93c5fd !important;
}

/* ── 구분선 ───────────────────────────────────────── */
body.dark-mode hr,
body.dark-mode .entry-content hr,
body.dark-mode .wp-block-separator {
  border-top-color: #404040 !important;
  border-color: #404040 !important;
}

/* ── 표 ───────────────────────────────────────────── */
body.dark-mode .entry-content table {
  background-color: #262626 !important;
  border-color: #404040 !important;
}
body.dark-mode .entry-content th {
  background-color: #404040 !important;
  color: #fafafa !important;
  border-color: #525252 !important;
}
body.dark-mode .entry-content td {
  border-color: #404040 !important;
  color: #e5e5e5 !important;
}

/* ── 코드 ─────────────────────────────────────────── */
body.dark-mode code,
body.dark-mode pre,
body.dark-mode .entry-content code,
body.dark-mode .entry-content pre {
  background-color: #262626 !important;
  color: #fbbf24 !important;
  border-color: #404040 !important;
}
body.dark-mode pre code {
  background: transparent !important;
}

/* ── 인용구 ───────────────────────────────────────── */
body.dark-mode blockquote,
body.dark-mode .entry-content blockquote {
  background-color: #262626 !important;
  border-left-color: #60a5fa !important;
  color: #d4d4d4 !important;
}

/* ── 글 메타·태그 ─────────────────────────────────── */
body.dark-mode .wp-block-post-date,
body.dark-mode .wp-block-post-terms,
body.dark-mode .taxonomy-post_tag,
body.dark-mode .wp-block-post-author-name {
  color: #a3a3a3 !important;
}
body.dark-mode .wp-block-post-terms a,
body.dark-mode .taxonomy-post_tag a {
  color: #60a5fa !important;
}
body.dark-mode .wp-block-post-terms a:hover {
  color: #93c5fd !important;
}

/* ── 기타 공통 폼 입력 ────────────────────────────── */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1a1a1a;
  color: #fafafa;
  border-color: #525252;
}