/* 요소의 원래 배경(헤더의 불투명 surface, 배너 이미지 등)을 대체하지 않도록 배경 위에 안쪽 그림자로만 색을 얹는다. */
[data-debug-colors="on"] [data-debug-color],
[data-debug-colors="on"] .category-bar[data-debug-color]::before,
[data-debug-colors="on"] .library-carousel[data-debug-color]::before {
  box-shadow: inset 0 0 0 100vmax rgb(var(--debug-color) / var(--debug-color-opacity));
}

/* 전체 폭 배경을 칠하되 본문 폭 안에서 같은 색이 두 번 겹치지 않게 한다. */
[data-debug-colors="on"] .category-bar[data-debug-color],
[data-debug-colors="on"] .library-carousel[data-debug-color] {
  box-shadow: none;
}

[data-debug-color="coral"] {
  --debug-color: var(--color-debug-coral);
}

[data-debug-color="cyan"] {
  --debug-color: var(--color-debug-cyan);
}

[data-debug-color="lime"] {
  --debug-color: var(--color-debug-lime);
}

[data-debug-color="violet"] {
  --debug-color: var(--color-debug-violet);
}

[data-debug-color="amber"] {
  --debug-color: var(--color-debug-amber);
}

[data-debug-color="magenta"] {
  --debug-color: var(--color-debug-magenta);
}

/* 오른쪽 아래에 거터만큼 떨어져 놓인다.
   메뉴 열 위에 두면 이 버튼이 위 층이라 열 안 항목(폭 100%인 로그아웃)의 클릭을 가로챈다(2026-09-17 관리 접근 검사에서 발견). */
.debug-colors-toggle {
  position: fixed;
  z-index: var(--z-index-skip-link);
  right: var(--layout-gutter-inline);
  bottom: var(--space-md);
  min-height: var(--size-control-md);
  padding-inline: var(--space-md);
  border: var(--line-width-default) solid rgb(var(--color-gray-500));
  border-radius: var(--radius-full);
  background: rgb(var(--color-gray-100));
  color: rgb(var(--color-gray-900));
  font: var(--font-weight-bold) var(--font-size-sm) / var(--font-line-height-sm) var(--font-family-sans);
  cursor: pointer;
}

.debug-colors-toggle[aria-pressed="true"] {
  border-color: rgb(var(--color-gray-900));
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
}

@media (max-width: 47.9375rem) {
  body:has(> .debug-colors-toggle) {
    padding-block-end: calc(var(--size-control-md) + var(--space-md));
  }
}