/* Capacitor 앱 전용 스타일 - Immersive Mode */

/* Safe area 변수 설정 - 시스템 네비 바가 숨겨지므로 하단은 충분한 여백 확보 */
:root {
  --safe-area-top: env(safe-area-inset-top, 28px);
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
}

/* 상단 상태바 영역 확보 */
html.capacitor-app body {
  padding-top: var(--safe-area-top) !important;
  padding-top: env(safe-area-inset-top, 28px) !important;
}

/* 상단 상태바 영역 배경 - 스크롤 시 콘텐츠 가림 */
html.capacitor-app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 28px);
  background: linear-gradient(to right, #2B3B6D, #1A2C52);
  z-index: 9999;
}

/* 상단 헤더가 있는 경우 헤더에 패딩 추가 */
html.capacitor-app header,
html.capacitor-app .mobile-header,
html.capacitor-app nav.fixed.top-0,
html.capacitor-app .fixed.top-0,
html.capacitor-app .sticky.top-0,
html.capacitor-app [class*="sticky"][class*="top-0"],
html.capacitor-app [class*="fixed"][class*="top-0"]:not(nav):not([class*="bottom"]) {
  padding-top: env(safe-area-inset-top, 28px) !important;
}

/* sticky/fixed top-0 헤더 - body padding 대신 헤더 자체에 패딩 */
html.capacitor-app header.sticky,
html.capacitor-app header[class*="sticky"] {
  padding-top: env(safe-area-inset-top, 28px) !important;
}

/* 모바일 전용 헤더 (인라인 스타일 포함) */
html.capacitor-app .mobile-only[style*="fixed"][style*="top"],
html.capacitor-app div.mobile-only[style*="position"] {
  padding-top: env(safe-area-inset-top, 28px) !important;
}

/* 탭/서브메뉴가 헤더 아래에 있는 경우 위치 조정 */
html.capacitor-app .tabs[style*="top: 56px"],
html.capacitor-app .tabs.fixed {
  top: calc(56px + env(safe-area-inset-top, 28px)) !important;
}

/* profile-header 등 커스텀 헤더 클래스 */
html.capacitor-app .profile-header,
html.capacitor-app [class*="-header"].sticky,
html.capacitor-app [class*="-header"][class*="top-0"] {
  padding-top: env(safe-area-inset-top, 28px) !important;
}

/* 하단 네비게이션바 영역 확보 - Immersive Mode에서는 시스템 바가 숨겨짐 */
html.capacitor-app nav.fixed.bottom-0,
html.capacitor-app .mobile-only.fixed.bottom-0,
html.capacitor-app .bottom-nav,
html.capacitor-app [class*="fixed"][class*="bottom-0"] {
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}

/* 하단 콘텐츠 여백 - 네비게이션바 공간 확보 */
html.capacitor-app #main-content,
html.capacitor-app main {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
}

/* 부드러운 스크롤 */
html.capacitor-app .overflow-y-auto,
html.capacitor-app .overflow-auto {
  -webkit-overflow-scrolling: touch;
}

/* 터치 하이라이트 제거 */
html.capacitor-app * {
  -webkit-tap-highlight-color: transparent;
}

/* viewport-fit=cover 지원 */
@supports (padding-top: env(safe-area-inset-top)) {
  html.capacitor-app body {
    padding-top: env(safe-area-inset-top) !important;
  }

  html.capacitor-app nav.fixed.bottom-0,
  html.capacitor-app .mobile-only.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
}

/* ========== 가로보기 (Landscape) 모드 ========== */
@media screen and (orientation: landscape) {
  /* 가로보기에서도 모바일 레이아웃 유지 */
  html.capacitor-app body {
    max-width: 100vw;
  }

  /* 가로보기에서 하단 네비 조정 */
  html.capacitor-app nav.fixed.bottom-0,
  html.capacitor-app .mobile-only.fixed.bottom-0,
  html.capacitor-app .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
  }

  /* 컨텐츠 영역 좌우 safe-area */
  html.capacitor-app main,
  html.capacitor-app #main-content,
  html.capacitor-app .content-wrapper {
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
  }
}

/* ========== 성경 읽기 한영 병렬 뷰 (가로보기) ========== */
@media screen and (orientation: landscape) {
  /* 한영 병렬 모드 컨테이너 */
  html.capacitor-app .bible-parallel-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
  }

  /* 한글 본문 (좌측) */
  html.capacitor-app .bible-parallel-container .bible-korean {
    flex: 1;
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
    overflow-y: auto;
  }

  /* 영어 본문 (우측) */
  html.capacitor-app .bible-parallel-container .bible-english {
    flex: 1;
    padding-left: 16px;
    overflow-y: auto;
  }

  /* 절 동기화 스크롤 */
  html.capacitor-app .bible-verse-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
  }

  html.capacitor-app .bible-verse-row .verse-korean,
  html.capacitor-app .bible-verse-row .verse-english {
    flex: 1;
  }
}