/* Accessibility Styles */

/* ===================================
   1. Focus Styles (키보드 포커스)
   =================================== */

/* 기본 포커스 스타일 - 모든 인터랙티브 요소 */
:focus {
  outline: 2px solid #0159fd;
  outline-offset: 2px;
}

/* 마우스 사용자에겐 outline 숨기기 (키보드 사용자만 표시) */
:focus:not(:focus-visible) {
  outline: none;
}

/* 키보드 포커스 시 명확한 표시 */
:focus-visible {
  outline: 2px solid #0159fd;
  outline-offset: 2px;
}

/* 버튼 포커스 */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid #0159fd;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(1, 89, 253, 0.2);
}

/* 링크 포커스 */
a:focus-visible {
  outline: 2px solid #0159fd;
  outline-offset: 2px;
}

/* 다크 배경 위 요소들을 위한 포커스 스타일 */
.header a:focus-visible,
.header button:focus-visible,
.hero-slide a:focus-visible,
.hero-slide button:focus-visible,
.hero-video a:focus-visible,
.hero-video button:focus-visible,
.header-menu a:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* 폼 요소 포커스 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #0159fd;
  outline-offset: 0;
  border-color: #0159fd;
}

/* 슬라이더 인디케이터 포커스 */
.slider-indicator:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* ===================================
   2. Skip Link (스킵 링크)
   =================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0159fd;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: none;
}

/* ===================================
   3. Screen Reader Only (스크린 리더 전용)
   =================================== */

.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;
}

/* 포커스 시 표시 */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===================================
   4. Reduced Motion (움직임 줄이기)
   =================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-slide {
    transition: none;
  }

  .header-menu,
  .header-menu__drawer {
    transition: none;
  }
}

/* ===================================
   5. High Contrast Mode (고대비 모드)
   =================================== */

@media (prefers-contrast: high) {
  :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }

  .btn {
    border: 2px solid currentColor;
  }
}