@charset "UTF-8";
/* accessibility.css (common.css 다음에 로드) */

:root {
  --a11y-focus-color: var(--focus-ring, var(--primary-50));
  --a11y-focus-width: 2px;
  --a11y-focus-offset: 3px;
  --a11y-focus-radius: var(--radius-small);
}

/* 대비 선호 환경(자동 보정) */
@media (prefers-contrast: more) {
  :root {
    --a11y-focus-width: 3px;
    --a11y-focus-offset: 4px;
  }
}

/* 강제색 모드(Windows High Contrast) 동조 */
@media (forced-colors: active) {
  :root {
    --a11y-focus-color: Highlight;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  글로벌 인터랙티브 포커스(버튼 제외)
  -common.css의 *:focus-visible 은 유지
  -여기서는 offset/반지름만 보강
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:where(
    a[href],
    area[href],
    input:not([type='hidden']),
    select,
    textarea,
    summary,
    [role='link'],
    [role='menuitem'],
    [role='tab'],
    [role='checkbox'],
    [role='radio'],
    [role='switch'],
    [contenteditable='true'],
    [tabindex]:not([tabindex='-1'])
  ):not(:where(button, .btn, [role='button'])):focus-visible {
  outline-offset: var(--a11y-focus-offset);
  border-radius: var(--a11y-focus-radius);
}

/* 필요 시 내부 링이 필요한 곳에만 수동 적용 */
.focus-inset:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: 0;
  border-radius: var(--a11y-focus-radius);
}

/* 포커스 무시 유틸 (장식용 아이콘 등) */
.focus-none:focus,
.focus-none:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 앵커 점프 지점의 가시성 강화 */
:target {
  outline: var(--a11y-focus-width) dashed var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-radius: var(--a11y-focus-radius);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  폼 그룹 focus-within — 그룹 단위 강조
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:where(.form-field, .input-group, .form-group):focus-within {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-radius: var(--radius-medium);
}

/* 네이티브 컨트롤 자체의 가독성 소폭 보강(윤곽 유지) */
:where(input, select, textarea):focus-visible {
  border-radius: var(--a11y-focus-radius);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  브레드크럼/칩(알약형) 포커스
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:where(.breadcrumb .chip, .breadcrumb .crumb, .chip, .tag):focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-radius: var(--radius-pill);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  테이블 — 행 단위 탐색 가시성
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* :where(table tr):focus-within {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: -2px;
} */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  상태/유틸
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 모달 등에서 inert 백그라운드 비활성 */
[inert] {
  pointer-events: none !important;
  user-select: none !important;
}

/* 스크린리더 전용이지만 포커스 시 노출 */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}