/* 파일: /css/accessibility.css */

/* 키보드 포커스 스타일 */
:focus {
  outline: 2px solid var(--accent-color, #00BFFF);
  outline-offset: 4px;
}

/* 스크린 리더용 숨김 클래스 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 페이드인(접근성 고려용 클래스) */
/* 애니메이션 정의는 animations.css에 있으며, 이 파일에서는 접근성 제어만 합니다. */
.fade-in {
  animation: fadeIn 0.6s ease-out both;
}

/* 스킵 링크 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--accent-color, #00BFFF);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  outline: none;
  z-index: 10000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

/* 포커스 가시화 (키보드 탐색 우선) */
a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.5);
}

/* 추가: 폼 요소 포커스 표시 (키보드 탐색 시만) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.5);
  outline: none;
}

/* 마우스 클릭 등 :focus이지만 :focus-visible이 아닌 경우 포커스 비표시 */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* 폼 에러 및 ARIA 상태 */
[aria-invalid="true"] {
  border-color: #e11d48; /* rose-600 */
}

[role="alert"] {
  margin-top: 6px;
  font-size: 0.875rem;
  color: #e11d48;
}

/* 대체 텍스트 강조(이미지 대체 텍스트가 시각적 텍스트로 제공될 때 선택적으로 사용) */
.alt-emphasis {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* 토스트/라이브 리전 예시 */
.live-region {
  position: fixed;
  left: 16px;
  bottom: 16px;
  min-width: 240px;
  max-width: 90vw;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  border-radius: 10px;
  z-index: 10000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* 도움말 툴팁(접근성 안내용) */
.help-tip {
  position: absolute;
  left: 16px;
  top: 12px;
  padding: 8px 12px;
  background: #fff;
  color: #000;
  border-radius: 8px;
  z-index: 10000;
  box-shadow: 0 0 0 3px rgba(11, 124, 102, 0.3);
}

/* OS에서 모션 줄이기 설정 시 페이드인 비활성화 */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
  }
}

/* 타자 텍스트 기본(가로쓰기) */
.typewriter {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal; /* 기본은 일반 줄바꿈 */
}

/* 애니 쓸 때 줄바꿈 방지용 선택 클래스 */
.typewriter--nowrap {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}