/**
 * Mobile App Navigation Styles
 * 모바일 앱 스타일 네비게이션 CSS
 *
 * 구조:
 * - 상단 헤더: 로고 (56px 고정)
 * - 콘텐츠: 스크롤 가능 영역
 * - 하단 푸터: 5개 탭 네비게이션 (64px 고정)
 *
 * @version 1.0.0
 * @date 2025-01-30
 */

/* ========================================
   CSS 변수 정의
   ======================================== */
:root {
    /* 색상 - 밝은 gray 배경과 고급스러운 대비 */
    --mobile-nav-bg: #f5f5f7;  /* 밝은 gray 배경 (애플 스타일) */
    --mobile-nav-border: #d2d2d7;  /* 약간 진한 gray 테두리 */
    --mobile-nav-text: #1d1d1f;  /* 거의 검은색 (고급스러운 대비) */
    --mobile-nav-text-secondary: #6e6e73;  /* 중간 톤 gray (보조 텍스트) */
    --mobile-nav-active: #5856d6;  /* 고급스러운 퍼플 (활성 상태) */
    --mobile-nav-active-bg: rgba(88, 86, 214, 0.08);  /* 퍼플 틴트 배경 */
    --mobile-nav-shadow: rgba(0, 0, 0, 0.06);

    /* 레이아웃 */
    --mobile-nav-header-height: 56px;
    --mobile-nav-footer-height: 64px;
    --mobile-nav-z-header: 1000;
    --mobile-nav-z-footer: 1000;

    /* iOS Safe Area */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

    /* 애니메이션 */
    --mobile-nav-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   모바일 레이아웃 구조
   ======================================== */
/* HTML 및 Body 최소 높이 보장 */
html,
body {
    min-height: 100vh;
    width: 100%;
}

/* 모바일 화면에서만 적용 (767px 이하) */
@media screen and (max-width: 767px) {
    /* 모바일 네비게이션 활성화 시 body 설정 */
    body.mobile-nav-active {
        margin: 0 !important;
        padding-top: var(--mobile-nav-header-height) !important;  /* 56px 헤더 높이만큼 */
        padding-bottom: calc(var(--mobile-nav-footer-height) + var(--safe-area-inset-bottom)) !important;
        overflow-x: hidden;
        min-height: 100vh;
        background-color: #ffffff;
        position: relative;
    }

    /* iOS에서 스크롤 부드럽게 */
    body.mobile-nav-active.ios-device {
        -webkit-overflow-scrolling: touch;
    }

    /* 메인 컨테이너 조정 */
    body.mobile-nav-active .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: calc(100vh - var(--mobile-nav-header-height) - var(--mobile-nav-footer-height));
    background-color: #ffffff;
}

/* 첫 번째 자식 요소 마진 완전 제거 */
body.mobile-nav-active .container > *:first-child,
body.mobile-nav-active .content,
body.mobile-nav-active .content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Masonry 레이아웃 최소 높이 보장 */
body.mobile-nav-active .masonry {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: calc(100vh - var(--mobile-nav-footer-height) - var(--mobile-nav-header-height) - 40px);
}

    /* Content 영역 최소 높이 */
    body.mobile-nav-active .content {
        min-height: calc(100vh - var(--mobile-nav-footer-height) - var(--mobile-nav-header-height));
        background-color: #ffffff;
    }
} /* 미디어 쿼리 종료 (767px 이하) */

/* ========================================
   모바일 헤더 (상단 로고)
   ======================================== */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px; /* 고정 높이 */
    background: #f5f5f7 !important;
    background-color: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2147483647; /* iOS 최대 z-index */
    display: flex;
    display: -webkit-flex; /* Safari */
    align-items: center;
    -webkit-align-items: center; /* Safari */
    justify-content: center;
    -webkit-justify-content: center; /* Safari */
    padding: 0 16px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari */
    -moz-box-sizing: border-box; /* Firefox */
    /* iOS 스크롤 버그 해결 */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    /* iOS Safari 전용 stacking context 강제 */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* iOS Safe Area - 선택적 적용 */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile-header {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(56px + env(safe-area-inset-top, 0px));
    }
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0 10px;
}

.mobile-header-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    color: var(--mobile-nav-text);
}

.mobile-header-logo img {
    max-width: 150px;
    max-height: 36px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.mobile-header-logo span {
    font-size: 20px;
    font-weight: bold;
    color: var(--mobile-nav-text);
}

/* ========================================
   모바일 푸터 (하단 5탭 네비게이션)
   ======================================== */
.mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto; /* 자동 높이 */
    min-height: 64px; /* 최소 높이 */
    padding-bottom: 0; /* 기본 패딩 제거 */
    background: #f5f5f7;
    background-color: #f5f5f7;
    border-top: 1px solid #d2d2d7;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2147483647; /* iOS 최대 z-index */
    display: flex;
    display: -webkit-flex; /* Safari */
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari */
    -moz-box-sizing: border-box; /* Firefox */
    /* iOS 스크롤 버그 해결 */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    /* iOS Safari 전용 stacking context 강제 */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* iOS Safe Area - 선택적 적용 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-footer {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* 일반 하단 여백 (iOS가 아닌 경우) */
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-footer {
        padding-bottom: 10px;
    }
}

.mobile-footer-nav {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-footer-nav-item {
    flex: 1;
    display: flex;
    margin: 0;
    padding: 0;
}

.mobile-footer-nav-link {
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: column;
    -webkit-flex-direction: column; /* Safari */
    align-items: center;
    -webkit-align-items: center; /* Safari */
    justify-content: center;
    -webkit-justify-content: center; /* Safari */
    width: 100%;
    padding: 6px 4px;
    text-decoration: none;
    color: #6e6e73;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox */
    position: relative;
}

/* 탭 아이콘 */
.mobile-footer-nav-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
    transition: var(--mobile-nav-transition);
}

/* 탭 텍스트 */
.mobile-footer-nav-text {
    font-size: 10px;  /* 약간 작게 조정 */
    line-height: 1.2;
    text-align: center;
    white-space: normal;  /* 줄바꿈 허용 */
    word-break: keep-all;  /* 한글 단어 유지 */
    overflow: visible;  /* 오버플로우 보이기 */
    max-width: 100%;
    padding: 0 2px;  /* 좌우 여백 */
}

/* 활성 상태 */
.mobile-footer-nav-link.active {
    color: #5856d6;
    background: rgba(88, 86, 214, 0.08);
    background-color: rgba(88, 86, 214, 0.08);
}

.mobile-footer-nav-link.active .mobile-footer-nav-icon {
    transform: scale(1.1);
}

/* 터치 피드백 */
.mobile-footer-nav-link:active {
    background: var(--mobile-nav-active-bg);
    transform: scale(0.95);
}

/* ========================================
   콘텐츠 영역 조정 - 모바일에서만
   ======================================== */
@media screen and (max-width: 767px) {
    /* 기존 데스크톱 네비게이션 완전 제거 (공간도 제거) */
    body.mobile-nav-active #logo-navbar,
    body.mobile-nav-active #sticky-anchor,
    body.mobile-nav-active .navbar-horizontal-scroll,
    body.mobile-nav-active #top_search_form,
    body.mobile-nav-active #navbar-region,
    body.mobile-nav-active > .clearfix:first-of-type {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }

    /* 콘텐츠 영역 스크롤 */
    body.mobile-nav-active .container {
        min-height: calc(100vh - var(--mobile-nav-header-height) - var(--mobile-nav-footer-height));
        overflow-y: auto;
    }
}

/* ========================================
   깜빡임 방지 및 리사이즈 최적화 - 모바일에서만
   ======================================== */
@media screen and (max-width: 767px) {
    /* 리사이즈 시 깜빡임 방지 - transition 제거 */
    body.mobile-nav-active,
    body.mobile-nav-active *,
    body.mobile-nav-active .container,
    body.mobile-nav-active .content,
    body.mobile-nav-active .masonry {
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
    }

    /* 배경색 고정으로 깜빡임 방지 */
    body.mobile-nav-active {
        background: #ffffff !important;
    }

    body.mobile-nav-active .container,
    body.mobile-nav-active .content {
        background: #ffffff !important;
    }

    /* Masonry 높이 자동 계산 시 최소 높이 유지 */
    body.mobile-nav-active .masonry[style*="height"] {
        min-height: calc(100vh - var(--mobile-nav-header-height) - var(--mobile-nav-footer-height) - 40px) !important;
    }
}

/* ========================================
   디바이스별 최적화
   ======================================== */

/* iPhone SE (360px) */
@media screen and (max-width: 375px) {
    .mobile-footer-nav-text {
        font-size: 10px;
    }

    .mobile-footer-nav-icon {
        font-size: 22px;
    }
}

/* iPhone 12/13/14 (393px) */
@media screen and (min-width: 376px) and (max-width: 430px) {
    .mobile-footer-nav-text {
        font-size: 11px;
    }

    .mobile-footer-nav-icon {
        font-size: 24px;
    }
}

/* iPhone 14 Plus/Pro Max (428px) */
@media screen and (min-width: 431px) {
    .mobile-footer-nav-text {
        font-size: 12px;
    }

    .mobile-footer-nav-icon {
        font-size: 26px;
    }
}

/* ========================================
   태블릿 대응 (768px 이상은 모바일 네비게이션 비활성화)
   ======================================== */
@media screen and (min-width: 768px) {
    body.mobile-nav-active .mobile-header,
    body.mobile-nav-active .mobile-footer {
        display: none !important;
    }

    body.mobile-nav-active {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.mobile-nav-active #logo-navbar,
    body.mobile-nav-active #sticky-anchor,
    body.mobile-nav-active .navbar-horizontal-scroll {
        display: block !important;
    }
}

/* ========================================
   다크 모드 지원 (선택사항)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --mobile-nav-bg: #1c1c1e;  /* 애플 다크모드 gray */
        --mobile-nav-border: #38383a;  /* 약간 밝은 gray 테두리 */
        --mobile-nav-text: #ffffff;  /* 흰색 텍스트 */
        --mobile-nav-text-secondary: #98989d;  /* 중간 밝기 gray */
        --mobile-nav-active: #9f9cf4;  /* 밝은 퍼플 (다크모드용) */
        --mobile-nav-active-bg: rgba(159, 156, 244, 0.12);  /* 퍼플 틴트 */
        --mobile-nav-shadow: rgba(0, 0, 0, 0.4);
    }
}

/* ========================================
   접근성 개선
   ======================================== */
/* 포커스 스타일 */
.mobile-footer-nav-link:focus {
    outline: 2px solid var(--mobile-nav-active);
    outline-offset: -2px;
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
    .mobile-header,
    .mobile-footer {
        border-width: 2px;
    }

    .mobile-footer-nav-link.active {
        text-decoration: underline;
    }
}

/* ========================================
   iOS 전용 최적화
   ======================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS 스크롤 시 fixed 요소 보호 */
    .mobile-header {
        position: fixed !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 2147483647 !important;
    }

    .mobile-footer {
        position: fixed !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        z-index: 2147483647 !important;
    }

    /* iOS 100vh 문제 해결 */
    body.mobile-nav-active {
        height: 100vh;
        height: -webkit-fill-available;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    /* iOS에서 콘텐츠가 fixed 요소 위로 올라오지 못하게 */
    .container,
    .masonry,
    .content,
    .masonry-item {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        z-index: 1 !important;
        position: relative !important;
    }

    /* iOS 스크롤 최적화 */
    .container {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }

    /* iOS Safari에서 로고와 텍스트가 보이도록 보장 */
    .mobile-header-logo span,
    .mobile-header-logo a {
        color: #1d1d1f !important;
        -webkit-text-fill-color: #1d1d1f !important;
    }

    .mobile-footer-nav-link {
        color: #6e6e73 !important;
        -webkit-text-fill-color: #6e6e73 !important;
    }

    .mobile-footer-nav-link.active {
        color: #5856d6 !important;
        -webkit-text-fill-color: #5856d6 !important;
    }
}

/* ========================================
   로딩/애니메이션 효과
   ======================================== */
/* 페이지 전환 시 부드러운 효과 */
.mobile-footer-nav-link {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* iOS Safari 전용 Fixed 레이아웃 - 모바일에서만 */
@media screen and (max-width: 767px) {
    /* iOS에서 body를 완전히 고정 */
    .ios-device.mobile-nav-active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        /* iOS에서 body 패딩 오버라이드 */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* iOS 스크롤 래퍼 생성 */
    .ios-device .ios-scroll-wrapper {
        position: fixed !important;
        top: 56px !important; /* 헤더 높이 */
        left: 0 !important;
        right: 0 !important;
        bottom: 64px !important; /* 푸터 높이 */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 1 !important;
    }

    /* Safe Area 적용 시 */
    @supports (padding-top: env(safe-area-inset-top)) {
        .ios-device .ios-scroll-wrapper {
            top: calc(56px + env(safe-area-inset-top, 0px)) !important;
            bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* iOS에서 container 조정 */
    .ios-device .ios-scroll-wrapper .container {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        min-height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important; /* 하단 패딩 제거 */
        margin: 0 !important;
        width: 100% !important;
    }

    /* iOS에서 content와 row 패딩 조정 */
    .ios-device .ios-scroll-wrapper .content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .ios-device .ios-scroll-wrapper .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* iOS에서 Masonry 레이아웃 수정 - 안드로이드와 동일하게 float만 사용 */
    .ios-device .ios-scroll-wrapper .masonry {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important; /* 컨테이너 패딩 제거 - 아이템에 이미 패딩 있음 */
        box-sizing: border-box !important;
        position: relative !important;
        display: block !important; /* flexbox 사용하지 않음 */
        overflow: hidden !important;
    }

    .ios-device .ios-scroll-wrapper .masonry-item {
        position: relative !important;
        float: left !important;
        width: 50% !important; /* 2열 레이아웃 */
        box-sizing: border-box !important; /* 패딩을 너비/높이에 포함 */
        display: block !important;
        margin: 0 !important; /* 외부 여백 제거 */
    }

    /* iOS에서 scrap-wrap 패딩 처리 - 인라인 스타일 오버라이드 */
    .ios-device .ios-scroll-wrapper .masonry-item.scrap-wrap {
        padding: 5px !important; /* DB값 대신 고정값 사용 */
    }

    /* box 내부 패딩 조정 */
    .ios-device .ios-scroll-wrapper .masonry-item .box {
        padding: 10px !important; /* 내부 패딩 통일 */
    }

    /* iOS에서 높이가 auto인 항목들 처리 */
    .ios-device .ios-scroll-wrapper .masonry-item.h-full {
        height: auto !important;
    }

    /* iOS에서 h-*-scrap 클래스 높이 조정 - 화면 크기별 반응형 적용 */

    /* iOS Safari CSS Grid 레이아웃 지원 */
    .ios-device .masonry {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 0 !important;
        grid-auto-flow: row dense !important;
        grid-auto-rows: 72px !important;  /* 기본 행 높이 */
    }

    /* iOS Safari Grid 아이템 설정 */
    .ios-device .masonry-item {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* w-full 클래스는 2열 차지 */
    .ios-device .masonry-item.w-full {
        grid-column: span 2 !important;
    }

    /* 높이별 행 차지 설정 */
    .ios-device .masonry-item.h-1-scrap {
        grid-row: span 1 !important;
    }
    .ios-device .masonry-item.h-2-scrap {
        grid-row: span 2 !important;
    }
    .ios-device .masonry-item.h-3-scrap {
        grid-row: span 3 !important;
    }
    .ios-device .masonry-item.h-4-scrap {
        grid-row: span 4 !important;
    }
    .ios-device .masonry-item.h-5-scrap {
        grid-row: span 5 !important;
    }
    .ios-device .masonry-item.h-6-scrap {
        grid-row: span 6 !important;
    }
    .ios-device .masonry-item.h-7-scrap {
        grid-row: span 7 !important;
    }
    .ios-device .masonry-item.h-8-scrap {
        grid-row: span 8 !important;
    }

    /* 작은 모바일 화면 (768px 미만) - unit_h: 72px */
    @media screen and (max-width: 767px) {
        .ios-device .masonry-item.h-1-scrap {
            height: 72px !important;
        }
        .ios-device .masonry-item.h-2-scrap {
            height: 144px !important;
        }
        .ios-device .masonry-item.h-3-scrap {
            height: 216px !important;
        }
        .ios-device .masonry-item.h-4-scrap {
            height: 288px !important;
        }
        .ios-device .masonry-item.h-5-scrap {
            height: 360px !important;
        }
        .ios-device .masonry-item.h-6-scrap {
            height: 432px !important;
        }
        .ios-device .masonry-item.h-7-scrap {
            height: 504px !important;
        }
        .ios-device .masonry-item.h-8-scrap {
            height: 576px !important;
        }
    }

    /* 태블릿 화면 (768px - 991px) - unit_h: 45px (Android와 동일) */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        .ios-device .masonry-item.h-1-scrap {
            height: 45px !important;
        }
        .ios-device .masonry-item.h-2-scrap {
            height: 90px !important;
        }
        .ios-device .masonry-item.h-3-scrap {
            height: 135px !important;
        }
        .ios-device .masonry-item.h-4-scrap {
            height: 180px !important;
        }
        .ios-device .masonry-item.h-5-scrap {
            height: 225px !important;
        }
        .ios-device .masonry-item.h-6-scrap {
            height: 270px !important;
        }
        .ios-device .masonry-item.h-7-scrap {
            height: 315px !important;
        }
        .ios-device .masonry-item.h-8-scrap {
            height: 360px !important;
        }
    }

    .ios-device .ios-scroll-wrapper .grid-sizer {
        width: 50% !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* 작은 화면에서는 1열로 */
    @media screen and (max-width: 480px) {
        .ios-device .ios-scroll-wrapper .masonry-item {
            width: 100% !important;
            float: left !important;
        }
        .ios-device .ios-scroll-wrapper .grid-sizer {
            width: 100% !important;
        }
    }

    /* iOS 헤더 진짜 고정 */
    .ios-device .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
    }

    /* iOS 푸터 진짜 고정 */
    .ios-device .mobile-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
    }
}

/* ========================================
   유틸리티 클래스
   ======================================== */
@media screen and (max-width: 767px) {
    /* 모바일에서만 숨김 */
    .mobile-nav-active .hide-on-mobile-nav {
        display: none !important;
    }

    /* 모바일에서만 표시 */
    .mobile-nav-active .show-on-mobile-nav {
        display: block !important;
    }
}

/* 기본적으로 숨김 */
.show-on-mobile-nav {
    display: none !important;
}