/*
 * app-safe-area.css
 * 외국어 탐험대 앱(WebView/TWA) 및 모바일 환경에서의 Safe Area 처리
 *
 * 적용 조건:
 *   - @media (display-mode: standalone)  → PWA / TWA 앱 모드
 *   - @media (pointer: coarse) and (max-width: 1024px)  → 일반 모바일 브라우저
 *
 * 데스크톱 브라우저에서는 아무 영향 없음.
 */

/* ============================================
   0. 기본: 앱 전용 뒤로가기 버튼 숨김 (데스크톱)
   ============================================ */
.app-back-btn {
    display: none !important;
}


/* ============================================
   A. Standalone 앱 모드 (PWA / TWA)
   ============================================ */
@media (display-mode: standalone) {

    /* --- 1. html/body Safe Area 기본 --- */
    html {
        background-color: #142814 !important;
    }

    body {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        overflow-x: hidden;
    }

    /* --- 2. 하단 바 (selection-summary) 위치 보정 --- */
    #selection-summary {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 3. 토스트 메시지 위치 보정 --- */
    #toast {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 4. 모달(레벨 정보, iOS 설치 안내) Safe Area 처리 --- */
    #ios-install-modal {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .ios-modal-sheet {
        padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 5. 헤더 상단 여백 (노치 대응) --- */
    .header-wave {
        padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    }

    /* --- 6. PWA 설치 버튼 숨김 (이미 앱 모드) --- */
    #pwa-install-btn {
        display: none !important;
    }

    /* --- 7. 스크롤 마진 조정 --- */
    .step-container {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    }

    /* --- 8. 도크바 하단 영역 배경색 처리 --- */
    body::after {
        content: '';
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        background-color: #ffffff;
        z-index: 9999;
        pointer-events: none;
    }
}


/* ============================================
   B. 모바일 브라우저 환경
   (터치 기기 + 화면폭 1024px 이하)
   ============================================ */
@media (pointer: coarse) and (max-width: 1024px) {

    body {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden;
    }

    /* 하단 바 Safe Area 보정 */
    #selection-summary {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 토스트 위치 */
    #toast {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* iOS 설치 모달 */
    #ios-install-modal {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .ios-modal-sheet {
        padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* ============================================
   C. 공통: 작은 화면에서 단계 번호 배지 크기 조정
   ============================================ */
@media (max-width: 360px) {
    .step-header-num {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
    }

    h2[style*="font-size:17px"] {
        font-size: 15px !important;
    }
}