/* ============================================================================
   앱(Capacitor 웹뷰) edge-to-edge 안전영역 보정 — html.app-e2e 게이트 한정
   ----------------------------------------------------------------------------
   Android 16(API 36)+ 에서는 targetSdk 36 부터 windowOptOutEdgeToEdgeEnforcement
   (앱 values-v35 테마 옵트아웃)가 무시되어 웹뷰가 상태바(카메라홀)~내비바 밑까지
   그려진다 (2026-08-22 사용자 신고: 클립 "1단계"가 카메라홀에 가리고 하단
   정지버튼이 제스처바에 겹침). root layout 의 8/4 구제(header padding-top)는
   header 태그 상단만 덮어 div.viewer_header 와 하단 fixed 전부가 뚫려 있었다.

   env(safe-area-inset-*) 는 앱 UA 한정 viewport-fit=cover(root layout 스크립트)
   에서만 실값(에뮬 실측 top 52px / bottom 24px), 일반 브라우저·인셋을 네이티브
   마진으로 처리한 앱 빌드에서는 0 → 이중 적용 없음.

   원칙: 하단 fixed 요소는 아래로만 확장(padding-bottom)이라 위 라인이 불변 →
   본문 가림 보정 불필요. 상단 viewer_header 는 아래로 커지므로 viewer_cont
   margin-top 을 같이 보정. 원본 style.css 의 미디어쿼리 구간을 그대로 복제.
   ========================================================================== */

/* 클립/뷰어 상단 고정 헤더 — 자체 padding 이 없어 content-box 로 height(80/56)
   변형 무관하게 상태바 높이만큼만 총높이 확장 */
html.app-e2e .viewer_header {
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
}
html.app-e2e .viewer_cont {
  margin-top: calc(80px + env(safe-area-inset-top, 0px));
}
/* 뷰어 내 문장 리스트 패널(fixed 풀높이 오버레이) */
html.app-e2e .viewer_header .wrap_list {
  padding-top: env(safe-area-inset-top, 0px);
}

/* 클립/뷰어 하단 재생 컨트롤 (기본 height 100, 자체 padding 없음) */
html.app-e2e .viewer_player {
  height: calc(100px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 하단 고정 바 계열 — 아래로만 확장 */
html.app-e2e .bottom_nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.app-e2e .bottom_bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.app-e2e .open_banner {
  bottom: calc(87px + env(safe-area-inset-bottom, 0px));
}
html.app-e2e .floating_banner {
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* 상단 토스트(fixed top 40) */
html.app-e2e .box_toast {
  top: calc(40px + env(safe-area-inset-top, 0px));
}

/* 햄버거 메뉴 풀스크린 드로어(fixed top 0, 자체 스크롤) */
html.app-e2e .campus_header .drawer_box {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media screen and (max-width: 767px) {
  html.app-e2e .viewer_cont {
    margin-top: calc(56px + env(safe-area-inset-top, 0px));
  }
  /* 모바일 viewer_player 는 padding:16px shorthand 라 bottom 만 16+env 로 재정의 */
  html.app-e2e .viewer_player {
    height: calc(80px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  html.app-e2e .viewer_player.clip {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}