/* 설치한 앱(홈 화면 앱)은 화면이 상태 표시줄(시계·배터리) 아래까지 이어진다.
   위쪽에 붙은 머리글이 그 밑에 가려져 닫기·뒤로가기를 누를 수 없고, 맨 위가 잘려 '위로 스크롤이 안 되는' 것처럼 보이던 문제를 막는다.
   브라우저 탭에서는 적용되지 않는다(display-mode: standalone 일 때만). */
@media (display-mode: standalone) {
  #dp-site-header, .write-page-header, header.sticky.top-0 { padding-top: env(safe-area-inset-top, 0px); }
  header.sticky.top-0.py-2\.5 { padding-top: calc(0.625rem + env(safe-area-inset-top, 0px)); }
  header.max-w-xl { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }   /* 가입 화면처럼 따라다니지 않는 머리글 */
}

/* 앱 전체에서 상태 표시줄 뒤로 본문이 비치지 않게 한다. */
@media (display-mode: standalone) {
  html::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:#fff; z-index:49; pointer-events:none; }
  html.dark::before { background:#161616; }
  html:has(.channel-page-header)::before { background:var(--hero); }
  #gag-mobile-header, #detail-sticky-header, .channel-page-header, #dp-site-header, header.sticky.top-0 { -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  #gag-mobile-header.gag-mh-hidden { transform:none!important; }
}

/* iOS navigator.standalone 경로도 앱으로 인식하고 헤더 합성 애니메이션을 중단한다. */
html.dp-app-mode #gag-mobile-header,html.dp-app-mode #detail-sticky-header,html.dp-app-mode .channel-page-header,html.dp-app-mode #dp-site-header,html.dp-app-mode header.sticky.top-0{
  filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;transition:none!important;will-change:auto!important;opacity:1!important;
}
html.dp-app-mode #gag-mobile-header{background:#fff!important}
html.dp-app-mode.dark #gag-mobile-header{background:#161616!important}
html.dp-app-mode::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#fff;z-index:49;pointer-events:none}
html.dp-app-mode.dark::before{background:#161616}
html.dp-app-mode:has(.channel-page-header)::before{background:var(--hero)}

/* 앱의 상태 표시줄과 52px 도구 줄을 별도 영역으로 고정한다. */
html.dp-app-mode:not(.dp-post-embed) #gag-mobile-header,html.dp-app-mode:not(.dp-post-embed) #detail-sticky-header{top:env(safe-area-inset-top,0px)!important;padding-top:0!important;height:52px!important;box-sizing:border-box!important}
html.dp-app-mode:not(.dp-post-embed) #drag-hint-banner{display:none!important}
html.dp-app-mode:not(.dp-post-embed) #gesture-wrapper{padding-top:0!important}

/* iOS PWA scroll-edge workaround: fixed color candidate > WebKit thinBorderWidth.
   실기기 검증 사례: https://zenn.dev/uakihir0/articles/260920-ios27-pwa-blur
   빈 요소의 background-clip:text는 배치나 실제 화면 색을 바꾸지 않는다. */
#dp-ios-status-edge{display:none}
@supports(-webkit-touch-callout:none){
  html.dp-ios-app #dp-ios-status-edge{display:block;position:fixed;top:0;left:0;right:0;height:12px;z-index:2147483647;pointer-events:none;background-color:#fff;-webkit-background-clip:text;background-clip:text}
  html.dp-ios-app.dark #dp-ios-status-edge{background-color:#161616}
  html.dp-ios-app:has(.channel-page-header) #dp-ios-status-edge{background-color:var(--hero)}
}