/* ===== Open Design Lab — Dark Mode =====
   순수 invert(1)만 사용: 두 번 적용하면 픽셀 단위로 정확히 원복되므로
   사진·영상에 채도 저하 등 필터 흔적이 전혀 남지 않는다. */

html.dark {
  filter: invert(1);
  background: #0e0e0e;
}

/* 사진·영상 등 래스터 미디어는 원본 그대로 (정확한 재반전).
   단색 SVG 아이콘은 제외 → 반전되어 검정 아이콘이 흰색으로 표시 */
html.dark img:not([src$=".svg"]),
html.dark video,
html.dark iframe,
html.dark canvas {
  filter: invert(1);
}

/* 파란 심볼이 있는 GNB 로고: CSS content로 즉시 흰색 버전 교체(깜빡임 없음),
   재반전으로 원본 색 유지 */
html.dark img[src$="logo-gnb.svg"] {
  content: url("/images/logo-gnb-white.svg");
}
html.dark img[src$="logo-gnb.svg"],
html.dark img[src*="logo-gnb-white.svg"],
html.dark img[src*="logo-full.svg"] {
  filter: invert(1);
}

/* 2026 리뉴얼 GNB 로고(검정 버전): 흰색 버전으로 교체 후 재반전 →
   파란 심볼이 주황으로 변하지 않고 원래 브랜드 블루로 표시된다 */
html.dark img[src$="logo-gnb-black-2.svg"] {
  content: url("/images/logo-gnb-white-2.svg");
}
html.dark img[src$="logo-gnb-black-m-2.svg"] {
  content: url("/images/logo-gnb-white-m-2.svg");
}
html.dark img[src$="logo-gnb-black-2.svg"],
html.dark img[src$="logo-gnb-black-m-2.svg"],
html.dark img[src*="logo-gnb-white-2.svg"],
html.dark img[src*="logo-gnb-white-m-2.svg"] {
  filter: invert(1);
}
/* 브랜드 블루 아이콘(활성·호버 상태)도 반전하면 주황이 되므로 재반전 */
html.dark img[src*="-blue-ic"] {
  filter: invert(1);
}

/* ===== 헤더(탑바) 공통: 항상 상단 고정, 슬라이드 등 움직임 제거 ===== */
:is(header.sc-ghWlax, ul.sc-cHqXqK) {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  top: 0 !important;
}

/* ===== 홈("/" = Philosophy 포함): 라이트 모드 전용 ===== */
/* 테마 전환 버튼 숨김 */
html.odl-route-light #odl-dark-toggle {
  display: none !important;
}

/* ===== 밝은 모드 =====
   2026 리뉴얼 헤더는 자체 글라스모피즘(rgba(255,255,255,.88) + blur(80px))과
   검정 로고·아이콘을 기본 제공한다. 예전에 우리가 흉내내던
   #odl-topbar-bg 오버레이·아이콘 교체 규칙은 모두 불필요해져 제거했다.
   (다크 모드에서는 전역 invert 와 backdrop-filter 가 충돌하므로
    아래처럼 전용 배경 바를 계속 사용한다) */
html:not(.dark) #odl-topbar-bg { display: none !important; }

/* ===== 다크 모드: 어두운 유리 톤 탑바 =====
   배경은 React 밖(body 직속)의 전용 고정 바(#odl-topbar-bg)가 담당 →
   페이지 전환으로 헤더가 갈아끼워져도 배경은 절대 깜빡이지 않음 */
html.dark #odl-topbar-bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 94px;
  /* 글라스모피즘(블러 없는 버전): 반투명 유리 톤.
     주의: backdrop-filter는 전역 반전과 충돌(Chrome 합성 버그)하여 사용 불가 */
  background: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22); /* 표시: 은은한 밝은 경계선 */
  z-index: 99;         /* 헤더(z:100) 바로 아래 */
  pointer-events: none;
}
/* 헤더 자체는 항상 투명 — 배경은 위의 고정 바가 대신함 */
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) {
  background: transparent !important;
  filter: none !important;
  transition: none !important;
}
/* 텍스트는 항상 밝게 (반전 후 기준) — 원본 값 #1c1c1c → 표시 #e3e3e3 */
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) a,
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) button,
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) span,
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) p,
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) div {
  color: #1c1c1c !important;
  transition: none !important;
}
/* 흰색 아이콘 버전이 쓰이는 경우에도 항상 밝게 표시되도록 원본 유지 */
html.dark :is(header.sc-ghWlax, ul.sc-cHqXqK) img[src*="-white-ic"] {
  filter: invert(1);
}

/* ===== 프로젝트 카드 그리드(.masonry-list) =====
   구 디자인은 '이미지 위에 흰 글자를 얹은' 카드라 카드 전체를 재반전해야 했다.
   2026 리뉴얼 카드는 이미지와 글자가 분리된 구조(a.item > img + .title)이므로
   전역 규칙만으로 정확하다 —
     · 글자(#222) → 전역 반전으로 밝아짐 (검정 배경에서 잘 보임)
     · 이미지     → 전역 img 재반전으로 원본 색 유지
   따라서 카드 단위 반전과 .odl-keep 처리는 하지 않는다.
   (.odl-keep 이 붙으면 이미지 재반전이 취소돼 사진이 뒤집혀 보인다) */
.masonry-list .css-0,
.masonry-list .css-0 img,
.masonry-list a.item,
.masonry-list a.item img,
.odl-keep,
.odl-keep img,
.odl-keep video {
  transition: none !important;   /* 테마 전환 시 중간 상태 깜빡임 방지 */
}
/* 카드에 잘못 부여된 원본유지 표시를 무력화하고, 사진은 항상 원본 색으로 */
html.dark .masonry-list a.item,
html.dark .masonry-list .css-0 {
  filter: none !important;
}
html.dark .masonry-list img:not([src$=".svg"]) {
  filter: invert(1) !important;
}

/* JS(dark-mode.js)가 부여하는 원본 유지 영역 */
html.dark .odl-keep {
  filter: invert(1);
}
html.dark .odl-keep img,
html.dark .odl-keep video,
html.dark .odl-keep iframe,
html.dark .odl-keep canvas {
  filter: none;
}
html.dark .odl-keep .odl-keep {
  filter: none;
}

/* 브랜드 블루 보존: 반전되면 오렌지가 되므로 예외 처리 */
/* 1) 지도 핀(div.pin, 배경 SVG): 원본 색 유지 —
   비활성 진회색 핀은 밝은 대륙 위에, 활성 핀은 브랜드 블루로 표시 */
html.dark .pin {
  filter: invert(1);
}
/* 혹시 원본 유지 영역 안에 핀이 들어가도 이중 반전 방지 */
html.dark .odl-keep .pin {
  filter: none;
}
/* 3) 슬라이드 메뉴 패널(nav) — 배경이 브랜드 블루(#2B66FF)라 전역 반전 시 노란색이 된다.
 *    패널 전체를 재반전해 원래 색으로 되돌린다. 내부 흰 글자·아이콘도 함께 제자리를 찾는다.
 *    (검정 배경 위에 파란 패널이 뜨는 라이트 모드와 동일한 모습이 된다) */
html.dark nav.sc-ivxoEo {
  filter: invert(1);
}
/* 패널을 재반전했으므로 그 안은 '원본 CSS 색이 화면에 그대로' 나온다.
 * 따라서 헤더용 색 강제(#1c1c1c)와 흰 아이콘 반전을 패널 안에서는 해제해야
 * 원래 디자인대로 파란 배경 + 흰 글자 + 흰 아이콘이 된다. */
html.dark nav.sc-ivxoEo a,
html.dark nav.sc-ivxoEo button,
html.dark nav.sc-ivxoEo span,
html.dark nav.sc-ivxoEo p,
html.dark nav.sc-ivxoEo div,
html.dark nav.sc-ivxoEo li {
  color: #fff !important;
}
/* 비활성 항목은 원본처럼 흐리게 */
html.dark nav.sc-ivxoEo a.disabled,
html.dark nav.sc-ivxoEo .disabled a {
  color: rgba(255, 255, 255, .45) !important;
}
/* 흰색 아이콘은 이미 흰색이므로 전역 반전 규칙을 되돌린다 */
html.dark nav.sc-ivxoEo img {
  filter: none !important;
}
/* 패널 안의 래스터 이미지(있다면)는 원본 그대로 */
html.dark nav.sc-ivxoEo img:not([src$=".svg"]),
html.dark nav.sc-ivxoEo video {
  filter: none !important;
}

/* 2) 파란 텍스트(JS가 .odl-blue 부여): 반전을 거치면 #2B66FF가 되는 보정색 지정 */
html.dark .odl-blue {
  color: rgb(212, 153, 0) !important;
}

/* Contact 지도: 흑백 그래픽이므로 반전 + 대비 보정 —
   바다는 페이지 배경(검정)에 녹아들고 대륙은 밝은 회색으로 표시 */
html.dark img[src*="map-back"] {
  filter: brightness(0.656) contrast(3.194);
  /* Chrome이 이미지 로드 후 필터를 다시 그리지 않는 버그 방지 (별도 레이어 강제) */
  transform: translateZ(0);
  will-change: filter;
}

/* 홈 히어로: 원본 디자인 유지. 상단(밝은 영역)에만 어두운 그라데이션 —
   중앙 로고·문구는 어두워지지 않음 */
html.dark section.sc-DvaoS {
  filter: invert(1);
}
html.dark section.sc-DvaoS img,
html.dark section.sc-DvaoS video {
  filter: none;
}
html.dark section.sc-DvaoS::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 8, .6) 0%, rgba(8, 8, 8, .25) 22%, rgba(8, 8, 8, 0) 42%);
  z-index: 9999;
  pointer-events: none;
}
html.dark section.sc-DvaoS .odl-keep {
  filter: none;
}

/* ===== 토글 버튼 (사이트 라인 아이콘 톤) ===== */
#odl-dark-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483647; /* 페이지 전환막 등 어떤 오버레이보다 항상 위 */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .25);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, border-color .15s ease;
}
#odl-dark-toggle svg { display: block; }
#odl-dark-toggle:hover { transform: scale(1.06); border-color: rgba(17, 17, 17, .6); }