/* 화면 테마 버튼(시스템·라이트·다크)과 테마 전환 보조 스타일 — 모든 페이지 공통.
   haven.css 를 읽지 않는 할리갈리·인디언 포커도 쓰므로 토큰에 기대지 않고 자체 변수만 쓴다.
   페이지마다 어울리게 바꾸려면 .hv-theme-switch 에 --ts-* 변수를 덮어쓰면 된다(버튼 크기는 --ts-btn, 기본 28px).
   버튼은 /assets/haven/theme.js 가 [data-theme-switch] 안에 그린다.
   선택자를 :root[data-theme] 로 시작하는 이유: 페이지 다크 CSS(생성물)는 모든 규칙에 (0,2,0)을 더하므로
   button{color:inherit} 같은 일반 규칙도 강해진다. 버튼 색이 거기에 지지 않도록 같은 수준 이상으로 맞춘다. */

/* 테마를 바꾸는 순간에는 색 전환 애니메이션을 끈다(theme.js 가 두 프레임 동안 붙였다 뗀다). */
.hv-theme-switching,.hv-theme-switching *,.hv-theme-switching *::before,.hv-theme-switching *::after{transition:none!important}

:root[data-theme] .hv-theme-switch{
  --ts-bg:#fff;--ts-line:#d9e8f4;--ts-icon:#8aa0b4;--ts-icon-hover:#0e2a47;--ts-on-bg:#0e2a47;--ts-on-icon:#ffd156;--ts-hover-bg:#eef6fd;--ts-focus:#1c7bc9;
  --ts-shadow:0 1px 2px rgba(14,42,71,.05),0 4px 14px rgba(28,123,201,.07);
  display:inline-flex;align-items:center;flex:0 0 auto;gap:2px;min-width:calc(var(--ts-btn,28px)*3 + 8px);height:calc(var(--ts-btn,28px) + 6px);padding:2px;box-sizing:border-box;
  border:1px solid var(--ts-line);border-radius:999px;background:var(--ts-bg);box-shadow:var(--ts-shadow)
}
:root[data-theme="dark"] .hv-theme-switch.hv-theme-switch{
  --ts-bg:#111b27;--ts-line:#223346;--ts-icon:#74889c;--ts-icon-hover:#e6eef7;--ts-on-bg:#ffd156;--ts-on-icon:#1a1300;--ts-hover-bg:rgba(255,255,255,.06);--ts-focus:#6cb7ff;
  --ts-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.28)
}
:root[data-theme] .hv-theme-switch>.hv-theme-option{display:inline-grid;place-items:center;width:var(--ts-btn,28px);height:var(--ts-btn,28px);flex:0 0 var(--ts-btn,28px);padding:0;margin:0;border:0;border-radius:999px;background:transparent;color:var(--ts-icon);cursor:pointer;transition:background .16s ease,color .16s ease;-webkit-tap-highlight-color:transparent}
:root[data-theme] .hv-theme-switch>.hv-theme-option svg{width:16px;height:16px;overflow:visible;pointer-events:none}
:root[data-theme] .hv-theme-switch>.hv-theme-option:hover:not([aria-pressed="true"]){background:var(--ts-hover-bg);color:var(--ts-icon-hover)}
:root[data-theme] .hv-theme-switch>.hv-theme-option[aria-pressed="true"]{background:var(--ts-on-bg);color:var(--ts-on-icon);cursor:default}
:root[data-theme] .hv-theme-switch>.hv-theme-option:focus-visible{outline:2px solid var(--ts-focus);outline-offset:1px}

@media(forced-colors:active){.hv-theme-switch{border:1px solid ButtonText}.hv-theme-option{color:ButtonText}.hv-theme-option[aria-pressed="true"]{background:Highlight;color:HighlightText}}
@media(prefers-reduced-motion:reduce){.hv-theme-option{transition:none}}