/**
 * PWA Grid Layout - 패딩 없이 콘텐츠 가림 해결
 *
 * 방식: CSS Grid로 body를 3등분
 * - 상단바: 고정 높이
 * - 메인 콘텐츠: 남은 공간 전체
 * - 하단바: 고정 높이
 */

@media (max-width: 1200px) {
    /* HTML/Body 기본 설정 */
    html {
        height: 100%;
        width: 100%;
    }

    body {
        /* Grid 레이아웃 활성화 */
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;

        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS Safari */

        margin: 0;
        padding: 0;
        overflow: hidden;

        /* Grid 전환 애니메이션 */
        transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 상단바 숨김 시 Grid 구조 변경 */
    body.hide-top-bar {
        grid-template-rows: 0fr 1fr auto;
    }

    /* 상단 고정바 */
    .app-top-bar {
        grid-row: 1;
        position: relative !important; /* fixed 해제 */
        top: auto !important;

        /* Safe Area 적용 */
        padding-top: env(safe-area-inset-top);
        height: calc(40px + env(safe-area-inset-top));

        /* 숨김 애니메이션 */
        overflow: hidden;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 상단바 숨김 상태 */
    body.hide-top-bar .app-top-bar {
        height: 0 !important;
        min-height: 0 !important;
        opacity: 0;
        visibility: hidden;
        padding: 0 !important;
    }

    /* 메인 콘텐츠 영역 (.wrapper) */
    .wrapper {
        grid-row: 2;
        position: relative !important; /* fixed 해제 */
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        /* 패딩 제거 - Grid가 알아서 계산 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* 하단 고정바 */
    .app-bottom-bar {
        grid-row: 3;
        position: relative !important; /* fixed 해제 */
        bottom: auto !important;

        /* Safe Area 적용 */
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(60px + env(safe-area-inset-bottom));
    }
}

/* 가로 모드 */
@media (max-width: 1200px) and (orientation: landscape) {
    .app-top-bar {
        height: calc(35px + env(safe-area-inset-top));
    }

    /* 가로 모드에서 상단바 숨김 */
    body.hide-top-bar .app-top-bar {
        height: 0 !important;
    }

    .app-bottom-bar {
        height: calc(50px + env(safe-area-inset-bottom));
    }
}

/* iOS 최적화 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 1200px) {
        body {
            min-height: -webkit-fill-available;
        }
    }
}

/* 데스크톱 (1200px 초과) - Grid 비활성화 */
@media (min-width: 1201px) {
    body {
        display: block;
    }

    .app-top-bar,
    .app-bottom-bar {
        display: none;
    }

    .wrapper {
        position: static;
    }
}