/* =========================================================================
   ev7-theme.css ─ EV7lab 다크 테마 레이어
   -------------------------------------------------------------------------
   사이트 대부분의 페이지가 Tailwind CDN 의 유틸리티 클래스로 색을 지정한다.
   페이지 20여 개의 마크업을 전부 고치는 대신, 다크일 때만 그 클래스들의
   색을 다시 칠하는 얇은 레이어를 씌운다.

   선택자를 :root[data-theme="dark"] .bg-white 처럼 겹쳐 쓰면 특정도가
   (0,3,0) 이 되어 Tailwind 의 (0,1,0) 보다 항상 우선한다.
   → !important 없이, CDN 이 나중에 주입되어도 안전하다.

   테마 결정 순서
     1) 쿠키 ev7_theme = dark | light   (사용자가 토글로 고른 값)
     2) 쿠키가 없으면 OS 의 prefers-color-scheme
   ========================================================================= */

/* 토큰은 assets/ev7-design.css 가 단일 출처. 여기서는 소비만 한다. */

/* =========================================================================
   다크일 때만 적용되는 재도색
   두 경로(토글 / OS)를 각각 써야 해서 규칙이 두 벌이다.
   ========================================================================= */

/* ── 1) 토글로 다크를 고른 경우 ───────────────────────────── */
:root[data-theme="dark"] body{ background-color:var(--ev-page); color:var(--ev-ink); }

:root[data-theme="dark"] .bg-white{ background-color:var(--ev-card); }
:root[data-theme="dark"] .bg-gray-50{ background-color:var(--ev-paper-2); }
:root[data-theme="dark"] .bg-gray-100{ background-color:var(--ev-page); }   /* 페이지 배경으로 쓰임 */
:root[data-theme="dark"] .bg-gray-200{ background-color:var(--ev-paper-2); }
:root[data-theme="dark"] .bg-gray-300{ background-color:#2a2f37; }

/* 헤더·푸터 등 원래도 어두운 영역 : 다크에서는 배경보다 '밝게' 올린다 */
:root[data-theme="dark"] .bg-gray-900{ background-color:var(--ev-chrome); }
:root[data-theme="dark"] .bg-gray-800{ background-color:var(--ev-chrome-2); }
:root[data-theme="dark"] .bg-gray-700{ background-color:var(--ev-chrome-2); }
:root[data-theme="dark"] .border-gray-700{ border-color:var(--ev-chrome-line); }

:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700{ color:var(--ev-ink); }
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500{ color:var(--ev-ink-2); }
:root[data-theme="dark"] .text-gray-400,
:root[data-theme="dark"] .text-gray-300{ color:var(--ev-ink-3); }

:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .border{ border-color:var(--ev-line); }

/* 반투명 흰 배경(모달·오버레이 등) */
:root[data-theme="dark"] .bg-white\/80,
:root[data-theme="dark"] .bg-white\/90{ background-color:color-mix(in srgb,var(--ev-card) 88%,transparent); }


/* 이미지·영상 눈부심 완화 (로고성 아이콘은 제외) */
:root[data-theme="dark"] img:not([src*="Badge"]):not([src*="icon"]):not([src*="logo"]){
  filter:brightness(.92);
}

/* iframe 으로 붙는 도구 화면은 밝은 채로 두되 테두리를 정리 */
:root[data-theme="dark"] iframe{ background:var(--ev-card); border-color:var(--ev-line); }

/* ── 2) OS 설정을 따르는 경우 (토글로 라이트를 고르지 않았을 때) ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{ background-color:var(--ev-page); color:var(--ev-ink); }

  :root:not([data-theme="light"]) .bg-white{ background-color:var(--ev-card); }
  :root:not([data-theme="light"]) .bg-gray-50{ background-color:var(--ev-paper-2); }
  :root:not([data-theme="light"]) .bg-gray-100{ background-color:var(--ev-page); }
  :root:not([data-theme="light"]) .bg-gray-200{ background-color:var(--ev-paper-2); }
  :root:not([data-theme="light"]) .bg-gray-300{ background-color:#2a2f37; }

  :root:not([data-theme="light"]) .bg-gray-900{ background-color:var(--ev-chrome); }
  :root:not([data-theme="light"]) .bg-gray-800{ background-color:var(--ev-chrome-2); }
  :root:not([data-theme="light"]) .bg-gray-700{ background-color:var(--ev-chrome-2); }
  :root:not([data-theme="light"]) .border-gray-700{ border-color:var(--ev-chrome-line); }

  :root:not([data-theme="light"]) .text-gray-900,
  :root:not([data-theme="light"]) .text-gray-800,
  :root:not([data-theme="light"]) .text-gray-700{ color:var(--ev-ink); }
  :root:not([data-theme="light"]) .text-gray-600,
  :root:not([data-theme="light"]) .text-gray-500{ color:var(--ev-ink-2); }
  :root:not([data-theme="light"]) .text-gray-400,
  :root:not([data-theme="light"]) .text-gray-300{ color:var(--ev-ink-3); }

  :root:not([data-theme="light"]) .border-gray-100,
  :root:not([data-theme="light"]) .border-gray-200,
  :root:not([data-theme="light"]) .border-gray-300,
  :root:not([data-theme="light"]) .border{ border-color:var(--ev-line); }

  :root:not([data-theme="light"]) .shadow-lg,

  :root:not([data-theme="light"]) img:not([src*="Badge"]):not([src*="icon"]):not([src*="logo"]){
    filter:brightness(.92);
  }
  :root:not([data-theme="light"]) iframe{ background:var(--ev-card); border-color:var(--ev-line); }
}

/* =========================================================================
   테마 토글 버튼 (menu.php 에서 사용)
   ========================================================================= */
.ev-theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;
  border:0;border-radius:9999px;background:transparent;color:inherit;
  cursor:pointer;transition:background-color .16s ease;
}
.ev-theme-btn:hover{ background:rgba(255,255,255,.12); }
.ev-theme-btn:focus-visible{ outline:2px solid #facc15; outline-offset:2px; }
.ev-theme-btn svg{ width:18px;height:18px; }

.ev-theme-btn .ev-ic-moon{ display:none; }
:root[data-theme="dark"] .ev-theme-btn .ev-ic-sun{ display:none; }
:root[data-theme="dark"] .ev-theme-btn .ev-ic-moon{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ev-theme-btn .ev-ic-sun{ display:none; }
  :root:not([data-theme="light"]) .ev-theme-btn .ev-ic-moon{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  .ev-theme-btn{ transition:none; }
}