/**
 * Wehome Premium Craft — accessibility baseline
 * SSOT: docs/design-md/a11y.md · craft.md §2 접근성 축 · wh-tokens.css
 * Load after wh-tokens / _wh-bridge
 *
 * :where() 로 specificity 0 — 페이지 CSS의 커스텀 focus 스타일을 덮지 않고,
 * 스타일이 없는 요소에만 기본 ring 을 제공한다.
 */

/* ── Focus ring (WCAG 1.4.11 / 2.4.13 — 8.11:1) ── */
:where(a[href], area, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--wh-focus-ring, #681DC7);
  outline-offset: 2px;
}

/* 마우스 클릭에는 ring 을 띄우지 않음 (focus-visible 지원 브라우저) */
:where(a[href], button, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ── Focus Not Obscured (WCAG 2.4.11) ──
   하단 sticky CTA · bottom_nav 뒤로 포커스 요소가 숨지 않도록 스크롤 여백 확보 */
html {
  scroll-padding-bottom: calc(var(--wh-touch-cta, 48px) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* 입력 경계는 페이지 CSS에서 --wh-bd-input 을 명시적으로 쓴다 (a11y.md §2).
   전역 element 규칙은 기존 컨트롤 렌더링을 예측 못 하게 바꾸므로 두지 않는다. */

/* ── Screen reader only (visible on focus) ── */
.wh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wh-sr-only--focusable:focus,
.wh-sr-only--focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Skip link (키보드 첫 Tab) ── */
.wh-skip-link {
  position: absolute;
  top: -100px;
  left: var(--wh-space-md, 16px);
  z-index: var(--wh-z-toast, 11000);
  padding: 10px 16px;
  border-radius: var(--wh-radius-btn, 18px);
  background: var(--wh-card, #fff);
  color: var(--wh-tx, #191f28);
  font-family: var(--wh-ff);
  font-size: var(--wh-text-sm, 0.875rem);
  font-weight: 700;
  box-shadow: var(--wh-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06));
}
.wh-skip-link:focus,
.wh-skip-link:focus-visible {
  top: calc(env(safe-area-inset-top, 0px) + var(--wh-space-xs, 8px));
}

/* ── 강제 색 반전 환경 (Windows 고대비 등) ── */
@media (forced-colors: active) {
  :where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
}