/* 기본 리셋 & 배경 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

/* =========================
   풀스크린 높이 안정화 (모바일 대응)
   - 100svh: 보이는 화면 높이 (모바일 주소창 고려)
   - 100dvh: 동적 높이 (iOS 16+ 등)
   - fallback: 100vh / -webkit-fill-available
========================= */
.intro {
  position: relative;
  width: 100%;
  height: 100svh;               /* 1순위: 모바일 실제 보이는 높이 */
  height: 100dvh;               /* 지원 시 동적 뷰포트 높이 */
  height: -webkit-fill-available;  /* 구 iOS 대안 */
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* iOS 노치/안전영역 */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* 풀스크린 영상: “무조건 크게” 채우기 */
.intro__video {
  position: absolute;
  inset: 0;
  width: 100vw;    /* 가로는 뷰포트 기준으로 */
  height: 100%;    /* 세로는 컨테이너 높이 꽉 채움 */
  object-fit: cover;        /* 여백/레터박스 없이 채우기 */
  object-position: center;  /* 중앙 크롭 */
  background: #000;
}

/* 클릭/탭 전체영역 (힌트 하단 고정) */
.intro__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: grid;
  place-items: end center;
  padding: clamp(12px, 3vw, 28px);
  background: transparent;
  text-decoration: none;
}

/* 진입 힌트 버튼 느낌 */
.intro__hint {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  padding: 12px 18px;
  user-select: none;
  transition: transform .2s ease, opacity .2s ease;
  animation: pulse 1.8s ease-in-out infinite;
}
.intro__overlay:hover .intro__hint,
.intro__overlay:focus .intro__hint,
.intro__overlay:active .intro__hint {
  transform: translateY(-1px) scale(1.02);
  opacity: 1;
}

/* 맥박 효과 */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); }
  70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* 스크린 리더 전용 */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* 비디오 로딩 실패/지연 대비 */
.intro__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  text-align: center;
  padding: 24px;
}
.intro--fallback .intro__fallback {
  display: grid;
}
.fallback__link {
  color: #fff;
  text-decoration: underline;
}

/* =========================
   극단 비율 디바이스 대응
   - 세로가 과도하게 긴 화면에서
     더 꽉 차게 보이도록 최소 너비/높이 보정
========================= */
@media (max-aspect-ratio: 9/16) {
  .intro__video {
    min-width: 100%;
    min-height: 100%;
    object-position: 50% 50%;
  }
}

/* iOS Safari 옛 버전 추가 안전장치 */
@supports (-webkit-touch-callout: none) {
  .intro {
    height: 100svh;
  }
}