/**
 * Capacitor / 네이티브 WebView — notch·홈 인디케이터 안전영역
 * body.wr-native-app + viewport-fit=cover 필요
 * inset 보정: safe-area 대비 상·하단 각 5px 축소
 */
html.wr-native-app,
body.wr-native-app {
  padding: 0;
  --wr-sat: max(0px, calc(env(safe-area-inset-top, 0px) - 5px));
  --wr-sab: max(0px, calc(env(safe-area-inset-bottom, 0px) - 5px));
}

/* 상단 고정바: 상태바/노치만큼 패딩 (−5px) */
body.wr-native-app .topbar {
  padding-top: var(--wr-sat);
  height: calc(55px + var(--wr-sat));
  box-sizing: border-box;
}

body.wr-native-app .top_wrapper {
  height: calc(55px + var(--wr-sat));
}

body.wr-native-app .top_space {
  height: calc(55px + var(--wr-sat));
  box-sizing: border-box;
}

body.wr-native-app .topbar-left-buttons {
  top: calc(15px + var(--wr-sat));
}

body.wr-native-app .topbar-left {
  top: calc(13px + var(--wr-sat));
}

body.wr-native-app .topbar-right {
  top: calc(13px + var(--wr-sat));
}

/* 사이드/서브 패널 — 탑바 아래로 */
body.wr-native-app #user_menu {
  top: calc(55px + var(--wr-sat));
  height: calc(100vh - 55px - var(--wr-sat));
  height: calc(100dvh - 55px - var(--wr-sat));
  padding-bottom: var(--wr-sab);
  box-sizing: border-box;
}

body.wr-native-app .wr_member_sub_panel {
  top: calc(55px + var(--wr-sat));
  height: calc(100vh - 55px - var(--wr-sat));
  height: calc(100dvh - 55px - var(--wr-sat));
  padding-bottom: var(--wr-sab);
  box-sizing: border-box;
}

/* 하단 고정 UI (−5px) */
body.wr-native-app #ft {
  padding-bottom: max(10px, var(--wr-sab));
}

body.wr-native-app #top_btn {
  bottom: calc(35px + var(--wr-sab)) !important;
}

body.wr-native-app .wr-chat-fab,
body.wr-native-app a.wr-chat-fab,
body.wr-native-app .write_btn,
body.wr-native-app a.write_btn {
  bottom: calc(145px + var(--wr-sab)) !important;
}

body.wr-native-app .wr-share-fab,
body.wr-native-app .dropup {
  bottom: calc(90px + var(--wr-sab)) !important;
}