/*
 * app-safe-area.css
 * 어사문 앱(웹뷰) 및 모바일 환경에서의 safe area 처리 & 네비게이션 바 하단 이동
 *
 * 적용 조건:
 *   - 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: #fefce8 !important;
    }

    body {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
        /* 스크롤 시 콘텐츠가 safe area 밖으로 넘어가지 않게 */
        overflow-x: hidden;
    }


    /* --- 3. 상단 네비 바 → 하단 이동 + 균등 배치 + 구분선 --- */

    /* 일반 페이지 header-fixed */
    .header-fixed {
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.12) !important;
        z-index: 20 !important;
        padding: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !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;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        border-radius: 0 !important;
        /* 구분선 */
        border-right: 1px solid rgba(0,0,0,0.08) !important;
        font-size: 14px !important;
    }

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


    /* hanja-detail #topbar → 하단 이동 + 노랑 배경 + 균등 배치 */
    #topbar {
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.15) !important;
        /* 배경을 불투명 노랑으로 변경 */
        background-color: #FFD700 !important;
        background: #FFD700 !important;
        backdrop-filter: none !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        transform: none !important;
    }

    #topbar > div {
        width: 100% !important;
        padding: 0 !important;
    }

    #topbar > div > .flex {
        width: 100% !important;
        gap: 0 !important;
    }

    #topbar > div > .flex > * {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(0,0,0,0.08) !important;
    }

    #topbar > div > .flex > *:last-child {
        border-right: none !important;
    }


    /* hanja-quiz 헤더 → 하단 이동 + 균등 배치 */
    header[class*="sticky"][class*="top-0"] {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.15) !important;
        background-color: #FFD700 !important;
        background: #FFD700 !important;
        backdrop-filter: none !important;
        z-index: 20 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }


    /* --- 4. 필터 컨테이너 → 메인 바 위로 --- */
    .filter-container-fixed {
        top: auto !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.08) !important;
    }


    /* --- 5. body 패딩 세부 조정 --- */

    body:has(#topbar) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
        --topbar-height: 0px !important;
    }

    body:has(.filter-container-fixed) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.header-fixed):not(:has(.filter-container-fixed)):not(.home-page) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(header[class*="sticky"]) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }


    /* --- 6. 하단 고정 요소들 위치 조정 --- */

    /* 검색 FAB → 메뉴바 위로 충분히 올림 */
    #search-fab {
        bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.filter-container-fixed) #search-fab {
        bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 토스트 알림 → 메뉴바 위로 */
    #toast-notification,
    #toast,
    .toast-notification {
        bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 오디오 컨트롤 숨김 (교사 전용) */
    #audio-controls {
        display: none !important;
    }


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

    h3[id] {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }

    [id^="subgroup-"] {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }


    /* --- 8. 교사 전용 버튼 숨김 --- */
    #slide-mode-link,
    #audio-play-btn,
    #copy-notes-btn {
        display: none !important;
    }

    #notes-popup-overlay {
        display: none !important;
    }


    /* --- 9. 홈 페이지 전용 --- */
    body.home-page {
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh) !important;
    }


    /* --- 10. PPT 슬라이드 전용 --- */
    body.slide-page {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.slide-page #ppt-controls {
        top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }
    body.slide-page #page-logo {
        top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    }
    body.slide-page .app-back-btn {
        display: none !important;
    }


    /* --- 11. 도크바 아래 콘텐츠 비노출 처리 --- */
    /* safe area 하단 영역을 배경색으로 채움 */
    .header-fixed::after,
    #topbar::after,
    header[class*="sticky"][class*="top-0"]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
        background-color: inherit;
        z-index: -1;
    }
}


/* ============================================
   모바일 환경 (터치 + 좁은 화면)
   ============================================ */
@media (pointer: coarse) and (max-width: 1024px) {

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


    /* --- 2. html/body safe area --- */
    html {
        background-color: #fefce8 !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.12) !important;
        z-index: 20 !important;
        padding: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !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;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(0,0,0,0.08) !important;
        font-size: 14px !important;
    }

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


    /* hanja-detail #topbar */
    #topbar {
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.15) !important;
        background-color: #FFD700 !important;
        background: #FFD700 !important;
        backdrop-filter: none !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        transform: none !important;
    }

    #topbar > div {
        width: 100% !important;
        padding: 0 !important;
    }

    #topbar > div > .flex {
        width: 100% !important;
        gap: 0 !important;
    }

    #topbar > div > .flex > * {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        border-radius: 0 !important;
        border-right: 1px solid rgba(0,0,0,0.08) !important;
    }

    #topbar > div > .flex > *:last-child {
        border-right: none !important;
    }


    /* hanja-quiz 헤더 */
    header[class*="sticky"][class*="top-0"] {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.15) !important;
        background-color: #FFD700 !important;
        background: #FFD700 !important;
        backdrop-filter: none !important;
        z-index: 20 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }


    /* --- 4. 필터 컨테이너 --- */
    .filter-container-fixed {
        top: auto !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -2px 4px rgba(0,0,0,0.08) !important;
    }


    /* --- 5. body 패딩 --- */

    body:has(#topbar) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
        --topbar-height: 0px !important;
    }

    body:has(.filter-container-fixed) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.header-fixed):not(:has(.filter-container-fixed)):not(.home-page) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(header[class*="sticky"]) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }


    /* --- 6. 하단 고정 요소 --- */
    #search-fab {
        bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:has(.filter-container-fixed) #search-fab {
        bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #toast-notification,
    #toast,
    .toast-notification {
        bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #audio-controls {
        display: none !important;
    }


    /* --- 7. 스크롤 마진 --- */
    .content-section {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 1rem) !important;
    }

    h3[id] {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }

    [id^="subgroup-"] {
        scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }


    /* --- 8. 교사 전용 버튼 숨김 --- */
    #slide-mode-link,
    #audio-play-btn,
    #copy-notes-btn {
        display: none !important;
    }

    #notes-popup-overlay {
        display: none !important;
    }


    /* --- 9. 홈 페이지 전용 --- */
    body.home-page {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh) !important;
    }


    /* --- 10. PPT 슬라이드 전용 --- */
    body.slide-page {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.slide-page #ppt-controls {
        top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    }
    body.slide-page #page-logo {
        top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    }
    body.slide-page .app-back-btn {
        display: none !important;
    }


    /* --- 11. 도크바 아래 콘텐츠 비노출 --- */
    .header-fixed::after,
    #topbar::after,
    header[class*="sticky"][class*="top-0"]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
        background-color: inherit;
        z-index: -1;
    }
}