/* 공식홈 공통 부품: 라이트/다크 테마 토글 단추 (design M002.P024.T020, spec.md).
   사이트 css 뒤, 사이트 다크 팔레트(sites/*-dark.css) 앞이나 뒤 어디든 된다(서로 다른 속성만 만진다).
   단추 색은 머리말 글색을 물려받는다(color: inherit) — 아이콘 대비는 사이트의 글/바탕 대비와 같다. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-btn { display: none; }
.js .theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-btn svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.theme-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .js .theme-btn:hover { background: rgba(127, 127, 127, .14); } }
/* 아이콘은 aria-pressed가 아니라 data-theme으로 고른다 — theme.js가 돌기 전 첫 그림부터 맞는 아이콘이 나온다.
   라이트에서는 달(다크로), 다크에서는 해(라이트로). */
.theme-sun { display: none !important; }
:root[data-theme="dark"] .theme-sun { display: block !important; }
:root[data-theme="dark"] .theme-moon { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .theme-sun { display: block !important; }
  :root[data-theme="system"] .theme-moon { display: none !important; }
}