/**
 * Cheez PWA - Web-specific styles
 * iOS Safari Safe Area 지원
 */

/* iOS Safe Area 지원 */
:root {
  /* Safe area insets를 CSS 변수로 정의 */
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

/* 전체 앱 컨테이너 - body padding 제거 (position fixed 요소가 영향받지 않음) */
body {
  /* iOS에서 bounce 스크롤 방지 */
  overscroll-behavior: none;
}

/* Pretendard 폰트 우선순위 (기존 설정 유지) */
* {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}

/* 아이콘 폰트는 제외 */
[data-icon-font] {
  font-family: 'Ionicons', 'Material Icons', 'FontAwesome' !important;
}

/* ChatRoom Safe Area - 상단/하단 시스템 영역을 불투명 배경으로 가림 */
[data-safearea="chatroom"] {
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  box-sizing: border-box !important;
}

/* iOS Safe Area 적용 - React Native Web의 하단 fixed 요소 */
/* PWA standalone 모드에서만 적용 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (display-mode: standalone) {
    /* #root의 자식 중 하단 fixed 요소 */
    #root > div > div[style*="position"][style*="fixed"][style*="bottom"],
    #root > div > div[style*="position"][style*="absolute"][style*="bottom"] {
      padding-bottom: env(safe-area-inset-bottom) !important;
      box-sizing: border-box !important;
    }
  }
}
/* PWA standalone 모드 - Header Safe Area 적용 */
@media (display-mode: standalone) {
  /* Header 컴포넌트 - 상단 시스템 UI 겹침 방지 */
  .cheez-pwa-header {
    padding-top: calc(env(safe-area-inset-top) + 4px) !important;
    box-sizing: border-box !important;
  }
}