/* 마이베스트 특성화중&고 테마 레이어
   기본은 기존 서비스의 밝은 화이트/아이보리 팔레트이며,
   data-theme="dark"일 때만 정본 토큰을 재매핑한다. */

:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ev-void: Canvas;
  --ev-deep: Canvas;
  --ev-surface: color-mix(in srgb, CanvasText 6%, Canvas);
  --ev-surface-2: color-mix(in srgb, CanvasText 10%, Canvas);
  --ev-surface-3: color-mix(in srgb, CanvasText 14%, Canvas);
  --ev-line: color-mix(in srgb, CanvasText 15%, Canvas);
  --ev-line-strong: color-mix(in srgb, CanvasText 26%, Canvas);
  --ev-text: CanvasText;
  --ev-text-2: color-mix(in srgb, CanvasText 74%, Canvas);
  --ev-text-3: color-mix(in srgb, CanvasText 56%, Canvas);
  --sh-1: 0 2px 10px color-mix(in srgb, Canvas 72%, transparent);
  --sh-2: 0 16px 40px color-mix(in srgb, Canvas 62%, transparent);
}

:root[data-theme="dark"] .js-topbar {
  background: color-mix(in srgb, Canvas 82%, transparent);
}

:root[data-theme="dark"] .ev-space {
  opacity: 1;
}

.js-theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ev-line-strong);
  border-radius: var(--r-pill);
  background: var(--ev-surface-2);
  color: var(--ev-text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.js-theme-toggle:hover {
  background: var(--ev-surface-3);
}

.js-theme-toggle:focus-visible {
  outline: 3px solid var(--ev-accent);
  outline-offset: 3px;
}

.js-sidebar__brand,
.path-brand {
  letter-spacing: -.01em;
  text-wrap: balance;
}
.js-sidebar__brand img,
.path-brand img { width:28px; height:28px; border-radius:8px; object-fit:cover; flex:0 0 auto; }

.path-header > .js-theme-toggle {
  margin-inline-start: auto;
}

@media (max-width: 900px) {
  .js-topbar > .js-theme-toggle {
    margin-inline-start: auto;
  }
}

@media (max-width: 520px) {
  .path-header > .js-theme-toggle {
    align-self: flex-end;
  }

  .js-theme-toggle {
    padding-inline: 10px;
  }
}

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