/**
 * Mobile UX layer — 터치/스크롤/뷰포트/브라우저별 통합 최적화
 * 모든 브라우저·모바일 기기에서 동일한 사용자 경험 보장
 */

/* ─── 1. 터치 및 클릭 인터랙션 ─── */

/* 300ms 클릭 지연 방지 + 터치 하이라이트 통일 */
a[href],
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
.feature-card,
.feature-card a,
.feature-card__visual,
.feature-card__img-wrap,
.feature-card__cta,
.feature-card__launch,
.tarot-tile,
.tarot-tile a,
.dp-master-card,
.dp-master-card a,
.dw-item,
.tab-btn,
.nav-btn,
.ctg-btn,
.lang-btn,
.tog-btn,
.oracle-cat-btn-m,
.oracle-card-m,
.iching-btn,
.celeb-tab-btn,
.celeb-btn,
.tarot-cat-btn,
.fate-btn,
.mystic-tab-btn,
.modal-close,
.ia-hd {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* 터치 타겟: 클릭 가능 요소 최소 44x44px (패딩으로 확보) */
a[href].btn,
.feature-card__cta,
.feature-card__launch,
.tab-btn,
.nav-btn,
.ctg-btn,
.lang-btn,
.tog-btn,
.fate-btn,
.mystic-tab-btn,
.celeb-tab-btn,
.celeb-btn,
.tarot-cat-btn,
.oracle-cat-btn-m,
.oracle-card-m,
.iching-btn,
.modal-close,
.fate-scroll-next-arrow {
  min-height: 44px;
  min-width: 44px;
}
.feature-card,
.tarot-tile,
.dw-item {
  min-height: 44px;
}

/* Active 상태: 터치 시 즉각적인 시각적 피드백 */
@media (hover: none) and (pointer: coarse) {
  button:active,
  [role="button"]:active,
  a[href]:active,
  .feature-card:active,
  .tarot-tile:active,
  .dp-master-card:active {
    opacity: 0.92;
  }

  /* 컬렉션 카드(토글 헤더/타일)는 스크롤 중 위치 변형을 금지하고 세로 스크롤을 우선한다. */
  .feature-card-grid .feat-collection,
  .feature-card-grid .tarot-collection,
  .feature-card-grid .fc-toggle-btn,
  .feature-card-grid .tarot-tile {
    touch-action: pan-y;
  }

  .feature-card-grid .feat-collection:active,
  .feature-card-grid .tarot-collection:active,
  .feature-card-grid .fc-toggle-btn:active,
  .feature-card-grid .tarot-tile:active {
    transform: none !important;
  }
}

/* Sticky hover 방지: 포인터 있는 기기에서만 hover 적용 (보조) */
@media (hover: hover) {
  .feature-card:hover .feature-card__img,
  .tarot-tile:hover .tarot-tile__img {
    transform: none;
  }
}

/* ─── 2. 스크롤 경험 ─── */

/* iOS 모멘텀 스크롤 + 스크롤 체이닝 방지 (모달/오버레이 내부) */
.modal,
.modal-box,
[class*="modal-overlay"],
[class*="Overlay"].is-open,
#tarotReunionOverlay.is-open,
#privacy-modal-overlay.show,
.dream-story-scroll,
.scroll-touch,
.celeb-name-area,
.year-sub,
.tarot-love-reading-content,
.tarot-healing-reading-content,
.ty-month-category-text {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal,
[class*="modal-overlay"],
#tarotReunionOverlay,
#privacy-modal-overlay {
  touch-action: pan-y;
}

/* 자미두수/점성술/숙요점: 스크롤 freeze 방지를 위해 오버레이/시트 축 스크롤 허용을 명시 */
#ziweiModalOverlay,
#astroModalOverlay,
#sukuyoModalOverlay {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}
#ziweiModalSheet,
#astroModalSheet,
#sukuyoModalSheet {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

/* 자미두수·숙요점·점성술·거북점(주역) 모달: 모바일 스크롤 막힘 수정
   overscroll-behavior: contain + touch-action: pan-y 조합이 iOS Safari에서
   일정 구간 아래로 스크롤 시 스크롤이 멈추는 버그 유발 → 모바일에서 완화 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #ziweiModalOverlay.modal-overlay-ziwei,
  #sukuyoModalOverlay.modal-overlay-sukuyo,
  #astroModalOverlay.modal-overlay-astro,
  #juyukModalOverlay.modal-overlay-juyuk {
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* 숙요점/자미두수/점성술: 동일한 상단 네비 동작 통일
     네비는 항상 상단에 보이고, 시트만 끝까지 세로 스크롤되도록 고정 */
  #sukuyoNavBar.modal-top-nav,
  #ziweiModalNavBar.modal-top-nav,
  #astroNavBar.modal-top-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #sukuyoNavBar .modal-nav-home,
  #sukuyoNavBar .modal-nav-close,
  #ziweiModalNavBar .modal-nav-home,
  #ziweiModalNavBar .modal-nav-close,
  #astroNavBar .modal-nav-home,
  #astroNavBar .modal-nav-close {
    white-space: nowrap;
  }
  #sukuyoNavBar .modal-nav-home,
  #ziweiModalNavBar .modal-nav-home,
  #astroNavBar .modal-nav-home {
    justify-self: start;
    font-size: 0.78rem;
    padding: 8px 2px;
    gap: 3px;
  }
  #sukuyoNavBar .modal-nav-close,
  #ziweiModalNavBar .modal-nav-close,
  #astroNavBar .modal-nav-close {
    justify-self: end;
    font-size: 0.66rem;
    padding: 8px 8px;
  }
  #sukuyoNavBar .modal-nav-title,
  #ziweiModalNavBar .modal-nav-title,
  #astroNavBar .modal-nav-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 1.1px;
  }
  /* 시트: absolute 분리 대신 flex 스크롤로 통일 (iOS/Android 스크롤 중단 방지) */
  #sukuyoModalOverlay #sukuyoModalSheet,
  #ziweiModalOverlay #ziweiModalSheet,
  #astroModalOverlay #astroModalSheet {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }
  @media (max-width: 360px) {
    #sukuyoNavBar.modal-top-nav,
    #ziweiModalNavBar.modal-top-nav,
    #astroNavBar.modal-top-nav {
      column-gap: 2px;
      padding-left: 8px;
      padding-right: 8px;
    }
    #sukuyoNavBar .modal-nav-home,
    #ziweiModalNavBar .modal-nav-home,
    #astroNavBar .modal-nav-home {
      font-size: 0.72rem;
      padding: 8px 0;
      gap: 2px;
    }
    #sukuyoNavBar .modal-nav-close,
    #ziweiModalNavBar .modal-nav-close,
    #astroNavBar .modal-nav-close {
      font-size: 0.62rem;
      padding: 8px 6px;
    }
    #sukuyoNavBar .modal-nav-title,
    #ziweiModalNavBar .modal-nav-title,
    #astroNavBar .modal-nav-title {
      font-size: 0.62rem;
      letter-spacing: 0.7px;
    }
  }

  #juyukModalOverlay #juyukModalSheet {
    touch-action: pan-y;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }

  @media (max-width: 360px) {
    #ziweiModalNavBar.modal-top-nav,
    #astroNavBar.modal-top-nav {
      column-gap: 2px;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}

/* 페이지 끝 고무줄 효과 제한 (필요 시) */
html {
  overscroll-behavior-x: none;
}

/* ─── 3. 뷰포트 & Safe Area ─── */

/* 루트 safe area 패딩 (노치/홈 인디케이터 영역 회피) */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* 고정 상단/하단 바 safe area */
.fsn-bar,
[class*="fixed"].bottom {
  padding-top: 0;
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0));
}

/* ─── 4. 브라우저별 (Safari 등) ─── */

/* Safari glassmorphism: backdrop-blur 웹킷 접두사 보강 */
.card,
.theme-switch-wrapper,
.logo-area,
.dp-master-card,
.modal-card,
.lang-dropdown,
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

/* 이미지/아이콘 비율 유지 (찌그러짐 방지) */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* 아이콘/카드 이미지 비율 유지 */
.feature-card__img,
.tarot-tile__img,
.card img {
  object-fit: contain;
}

/* 컬렉션 타일 CLS 방지: 이미지 영역의 고정 비율/높이를 유지한다. */
.tarot-tile__img-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 120px;
  overflow: hidden;
  contain: layout paint;
}

.tarot-tile__img-wrap .tarot-tile__img,
.tarot-tile__img-wrap .tarot-tile__img-placeholder,
.tarot-tile__img-wrap .tarot-tile__img-skeleton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tarot-tile__img-wrap .tarot-tile__img-placeholder,
.tarot-tile__img-wrap .tarot-tile__img-skeleton {
  display: grid;
  place-items: center;
}

.tarot-tile__img-wrap .tarot-tile__img {
  object-fit: cover;
}

@media (max-width: 520px) {
  .tarot-tile__img-wrap {
    min-height: 108px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ★ GPU 가속 애니메이션 최적화 (Core Web Vitals: INP/CLS 개선)
   ═══════════════════════════════════════════════════════════ */

/*
 * 원칙:
 * 1. 실제로 변환(transform/opacity)이 일어나는 요소만 will-change 지정
 * 2. 정적 상태에서는 will-change:auto로 메모리 절약
 * 3. translate3d(0,0,0)으로 GPU 레이어 생성 (애니메이션 중)
 * 4. 배터리 소모 방지: prefers-reduced-motion 감지 시 모든 애니메이션 제거
 */

/* 애니메이션 활성 요소 — 인터랙션 전 레이어 예약 */
.feature-card,
.tarot-tile,
.totem-card,
.oracle-card-m,
.dp-master-card {
  /* GPU 레이어 격리로 painter 비용 감소 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* hover/focus 발생 시에만 will-change 활성화 */
@media (hover: hover) {
  .feature-card:hover,
  .tarot-tile:hover,
  .totem-card:hover {
    will-change: transform;
  }
}

/* 터치 디바이스: active 상태에서만 will-change 활성화 */
@media (hover: none) and (pointer: coarse) {
  .feature-card:active,
  .tarot-tile:active {
    will-change: transform;
  }
  /* 정적 상태에서는 will-change 해제 (메모리 절약 — 모바일 필수) */
  .feature-card:not(:active),
  .tarot-tile:not(:active) {
    will-change: auto;
  }
}

/* 슬라이드/페이드 오버레이 — 표시 중만 GPU 레이어 사용 */
[class*="overlay"].is-open,
[class*="overlay"][style*="display: block"],
[class*="overlay"][style*="display:block"],
.df-studio-overlay[style*="block"],
.tarot-self-esteem-overlay[style*="block"],
#astralModal[style*="block"] {
  will-change: opacity, transform;
  transform: translate3d(0, 0, 0);
}

/* 코즈믹 배경 별 애니메이션 — 독립 레이어 격리 */
.cosmic-star,
.cosmic-star-flower,
.logo-star {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

/* 카드 플립/회전 — GPU 합성 레이어에서 처리 */
.saju-book,
.saju-book .book-page,
.tarot-card[class*="flip"],
.tarot-card[class*="rotate"] {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── 모션 감소 설정 존중 (배터리/전정 기관 배려) ─── */
@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;
    will-change: auto !important;
  }

  .cosmic-star,
  .cosmic-star-flower,
  .logo-star,
  .orb,
  .ritual-particle,
  .q-back-element-emoji {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ★ 터치 타겟 강화 — 최소 44×44px 전체 적용
   (기존 globals.css 규칙을 보완하는 특정 소형 버튼 대상)
   ═══════════════════════════════════════════════════════════ */

/* 모달 닫기/소형 칩 버튼 — 터치 영역 확장 */
.df-studio-close,
.df-studio-chip,
.df-source-tab,
.tarot-self-esteem-close,
.modal-close,
.astral-close-btn,
.ios-modal-close,
.dp-sheet-close,
.back-btn,
.df-studio-btn,
.ritual-btn,
.privacy-btns .btn-cancel,
.privacy-btns .btn-agree {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: max(8px, 0.5rem) max(12px, 0.75rem);
}

/* 언어 선택 드롭다운 버튼 */
.lang-btn {
  min-height: 44px;
  padding-top: max(10px, 0.625rem);
  padding-bottom: max(10px, 0.625rem);
}

/* 탭 버튼 (타로/카테고리) */
.tab-btn,
.ctg-btn,
.tarot-cat-btn,
.oracle-cat-btn-m,
.mystic-tab-btn,
.celeb-tab-btn,
.df-source-tab {
  min-height: 44px;
}

/* 토글 버튼 (남/여) */
.tog-btn {
  min-height: 44px;
  padding: 12px 20px;
}

/* 스크롤 화살표 */
.fate-scroll-next-arrow {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
}

/* select 요소: iOS에서 터치 영역 확보 */
select.inp {
  min-height: 44px;
  font-size: 16px; /* iOS 줌 방지 */
}

/* 모바일 WebKit에서 날짜 텍스트(년/월/일)가 투명하게 보이는 이슈 방지 */
#birthDate.inp,
input.inp[type="date"] {
  color: #2d2438 !important;
  -webkit-text-fill-color: #2d2438 !important;
  color-scheme: light;
}

body.neo-mode #birthDate.inp,
body.neo-mode input.inp[type="date"] {
  color: rgba(240, 232, 220, 0.95) !important;
  -webkit-text-fill-color: rgba(240, 232, 220, 0.95) !important;
  color-scheme: dark;
}

#birthDate.inp::-webkit-date-and-time-value,
#birthDate.inp::-webkit-datetime-edit,
#birthDate.inp::-webkit-datetime-edit-text,
#birthDate.inp::-webkit-datetime-edit-year-field,
#birthDate.inp::-webkit-datetime-edit-month-field,
#birthDate.inp::-webkit-datetime-edit-day-field {
  color: #2d2438 !important;
  -webkit-text-fill-color: #2d2438 !important;
}

body.neo-mode #birthDate.inp::-webkit-date-and-time-value,
body.neo-mode #birthDate.inp::-webkit-datetime-edit,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-text,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-year-field,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-month-field,
body.neo-mode #birthDate.inp::-webkit-datetime-edit-day-field {
  color: rgba(240, 232, 220, 0.95) !important;
  -webkit-text-fill-color: rgba(240, 232, 220, 0.95) !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ font-display: swap 폴백
   (Google Fonts가 swap을 지원하지만, 로컬 @font-face는 별도 적용)
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Noto Sans KR";
  font-display: swap;
  /* Google Fonts CDN에서 실제 src를 오버라이드하지 않고
     display:swap을 로컬로 보장 (환경에 따라 Google Fonts가
     display=swap 파라미터를 미반영할 경우 대비) */
  src: local("Noto Sans KR");
  unicode-range: U+AC00-D7A3; /* 한글 */
}
@font-face {
  font-family: "Cinzel";
  font-display: swap;
  src: local("Cinzel");
}

/* IO 기반 이미지/배경 지연 로딩용 LQIP 상태 */
.io-lazy-img {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0.82;
  transition: filter 0.28s ease, transform 0.28s ease, opacity 0.28s ease;
  background: linear-gradient(135deg, rgba(43, 31, 72, 0.9), rgba(23, 20, 38, 0.95));
}

.io-lazy-img.is-loaded {
  filter: none;
  transform: none;
  opacity: 1;
}

[data-lazy-bg] {
  background-color: rgba(16, 12, 30, 0.9);
  background-size: cover;
  background-position: center;
}

[data-lazy-bg].is-bg-loaded {
  transition: background-image 0.25s ease;
}