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

/* Safe area 변수 설정 - 시스템 네비 바가 숨겨지므로 하단은 최소값만 */
:root {
  --safe-area-top: env(safe-area-inset-top, 28px);
  --safe-area-bottom: env(safe-area-inset-bottom, 12px);
}

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

/* 상단 헤더가 있는 경우 헤더에 패딩 추가 */
html.capacitor-app header,
html.capacitor-app .mobile-header,
html.capacitor-app nav.fixed.top-0,
html.capacitor-app .fixed.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, 12px) !important;
}

/* 하단 콘텐츠 여백 - 네비게이션바 공간 확보 */
html.capacitor-app #main-content,
html.capacitor-app main {
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 12px)) !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, 12px) !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, 8px) !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;
  }
}