/*
 * app-safe-area.css
 * 잉사문(Engsamun) 앱(웹뷰) 및 모바일 환경 safe area 처리
 * 어사문(Eosamun) app-safe-area.css 기반 — Sage EDU 컬러 시스템 적용
 *
 * 적용 조건:
 *   - standalone 모드 (앱에서 웹뷰로 열린 경우)
 *   - 또는 모바일(터치 디바이스 + 화면폭 1024px 이하) 환경
 * 데스크톱 브라우저에서는 아무 영향 없음.
 */

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

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

    /* 1. 뒤로가기 버튼 표시 */
    .app-back-btn {
        display: flex !important;
    }

    /* 2. html/body safe area */
    html {
        background-color: var(--color-canvas, #F8F7F4) !important;
    }

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

    /* 3. 상단 네비 → 하단 이동 */
    .header-fixed {
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.10) !important;
        z-index: 100 !important;
        padding: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background-color: var(--color-surface, #FFFFFF) !important;
        border-top: 1px solid var(--color-hairline, #E8E7E4) !important;
    }

    .header-fixed > nav {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-fixed > nav > * {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        border-radius: 0 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        gap: 2px !important;
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        color: var(--color-slate, #6F6E69) !important;
        text-decoration: none !important;
        transition: color 0.15s, background 0.15s !important;
    }

    .header-fixed > nav > *:last-child {
        border-right: none !important;
    }

    .header-fixed > nav > *.active,
    .header-fixed > nav > *:hover {
        color: var(--color-sage-teal, #2E7D6F) !important;
        background-color: var(--color-sage-teal-light, #E0F2EF) !important;
    }

    /* 4. 상태바 스페이서 */
    .status-bar-spacer {
        height: env(safe-area-inset-top, 0px) !important;
        background-color: var(--color-sage-teal, #2E7D6F) !important;
        flex-shrink: 0 !important;
    }

    /* 5. 슬라이드 페이지 전체화면 */
    .slide-fullscreen {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* 6. 모달 safe area */
    .modal-bottom {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 7. FAB 버튼 위치 (floating action button) */
    .fab-btn {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   모바일 터치 환경 (standalone 아닌 경우)
   ============================================ */
@media (max-width: 1024px) and (pointer: coarse) {

    .app-back-btn {
        display: flex !important;
    }

    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .header-fixed {
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.10) !important;
        z-index: 100 !important;
        padding: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background-color: var(--color-surface, #FFFFFF) !important;
        border-top: 1px solid var(--color-hairline, #E8E7E4) !important;
    }

    .header-fixed > nav {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-fixed > nav > * {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        border-radius: 0 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        gap: 2px !important;
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        color: var(--color-slate, #6F6E69) !important;
        text-decoration: none !important;
        transition: color 0.15s !important;
    }

    .header-fixed > nav > *:last-child {
        border-right: none !important;
    }

    .header-fixed > nav > *.active,
    .header-fixed > nav > *:hover {
        color: var(--color-sage-teal, #2E7D6F) !important;
        background-color: var(--color-sage-teal-light, #E0F2EF) !important;
    }

    .fab-btn {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   공통 유틸리티 클래스
   ============================================ */

/* 앱 뒤로가기 버튼 기본 스타일 */
.app-back-btn {
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    border: none;
    cursor: pointer;
    color: var(--color-ink, #37352F);
    transition: background 0.15s;
    flex-shrink: 0;
}

.app-back-btn:hover {
    background: rgba(0,0,0,0.12);
}

/* 앱 전용 top-bar */
.app-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--color-sage-teal, #2E7D6F);
    color: white;
    flex-shrink: 0;
    min-height: 48px;
}

/* 터치 하이라이트 제거 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 모바일 safe-area 패딩 유틸 */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
    padding-top: env(safe-area-inset-top, 0px);
}