/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/**
 * PWA 네이티브 앱 동작
 */

/* 전역 설정 - 터치 동작 최적화 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 텍스트 입력 필드는 선택 가능하게 */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* 링크와 버튼 텍스트 선택 방지 */
a,
button {
    -webkit-user-select: none;
    user-select: none;
}

/* body와 html 스크롤 설정 */
html,
body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

/* 내려서 새로고침 방지 - 1200px 이하에서만 적용 */
@media (max-width: 1200px) {
    body {
        overscroll-behavior: none;
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* wrapper에 스크롤 적용 */
    .wrapper {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* iOS bounce 효과 완전 제거 */
    @supports (-webkit-overflow-scrolling: touch) {
        body {
            position: fixed;
            overflow: hidden;
        }

        .wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* 더블탭 줌 방지 */
a,
button,
input,
textarea,
select {
    touch-action: manipulation;
}

/* 이미지 드래그 방지 */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* 스크롤 가능한 영역만 터치 허용 */
.bottom-sheet-content,
.main-contents,
.basic-body-main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/**
 * 네이티브 앱 스타일 상단/하단 고정바
 * 1200px 이하에서만 표시
 */

/* 상단 고정바 */
.app-top-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* ⭐ height 대신 min-height 사용 (safe-area 공간 확보) */
    min-height: 40px;
    /* iOS safe-area 포함한 전체 높이 */
    height: calc(40px + constant(safe-area-inset-top)); /* iOS 11.0-11.2 */
    height: calc(40px + env(safe-area-inset-top)); /* iOS 11.2+ */
    background: #ffffff;
    color: #333;
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.app-top-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 15px;
}

.app-logo {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #333;
}

/* 하단 고정바 */
.app-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* ⭐ height 대신 min-height 사용 (safe-area 공간 확보) */
    min-height: 60px;
    /* iOS safe-area 포함한 전체 높이 */
    height: calc(60px + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
    height: calc(60px + env(safe-area-inset-bottom)); /* iOS 11.2+ */
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 99999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.app-bottom-bar {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.app-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6c757d;
    transition: all 0.2s ease;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
}

.app-nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.app-nav-item span {
    font-size: 11px;
    font-weight: 500;
}

.app-nav-item:hover,
.app-nav-item.active {
    color: #667eea;
    text-decoration: none;
}

.app-nav-item:active {
    transform: scale(0.95);
}

/*
 * iOS Safe Area 대응 (중요!)
 * iOS에서 safe-area가 적용 안 될 경우:
 * 1. PWA standalone 모드에서는 env() 값이 0일 수 있음
 * 2. constant()를 먼저 선언하여 iOS 11~12 지원
 * 3. min() 대신 constant/env 직접 사용
 */
.app-top-bar {
    padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
    padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
}

.app-bottom-bar {
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}

/* 1200px 이하에서 고정바 표시 및 body padding 추가 */
@media (max-width: 1200px) {
    .app-top-bar {
        display: block;
    }

    .app-bottom-bar {
        display: grid;
    }

    /* 상단/하단 고정바 공간 확보 */
    /* ⭐ 모바일 기본: 40px (상단) / 60px (하단) - 고정바 높이와 일치 */
    body {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .wrapper {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .main-contents {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    /* 기존 floating 버튼들 숨김 (하단 고정바로 통합) */
    .counsel-btn,
    .sidebar-user-btn,
    .navbar-mobile-toggler {
        display: none !important;
    }
}

/* Android 최적화 */
@media (max-width: 1200px) and (min-resolution: 2dppx) {
    .app-bottom-bar {
        height: 56px;
    }

    body {
        padding-bottom: 56px !important;
    }
}

/**
 * Bottom Sheet 메뉴 (구글맵 스타일)
 * 1200px 이하에서만 표시
 */

/* Overlay */
.bottom-sheet-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bottom-sheet-overlay.active {
    display: block;
    opacity: 1;
}

/* Bottom Sheet */
.bottom-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 100001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.bottom-sheet.active {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
}

/* Handle */
.bottom-sheet-handle {
    width: 160px;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
    margin: 12px auto 8px;
    flex-shrink: 0;
    cursor: grab;
}

.bottom-sheet-handle:active {
    cursor: grabbing;
}

/* Header */
.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.bottom-sheet-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #666;
    text-align: left;
}

/* Content */
.bottom-sheet-content {
    overflow-y: auto;
    flex: 1;
    padding: 0 0 20px 0;
}

/* Member Menu */
.bottom-sheet-member-menu {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.btn-shop {
    display: block;
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 15px;
    transition: transform 0.2s;
}

.btn-shop:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* 스와이프 가능한 퀵메뉴 - 가로 스크롤 레이아웃 */
.quick-menu-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding: 0;
    margin: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

/* 스크롤바 숨김 */
.quick-menu-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.member-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border-radius: 12px;
    text-decoration: none;
    color: #555;
    font-size: 10px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    scroll-snap-align: start;
}

.member-quick-btn i {
    font-size: 20px;
    margin-bottom: 4px;
    color: #667eea;
}

.member-quick-btn span {
    text-align: center;
    position: relative;
    line-height: 1.1;
    word-break: keep-all;
    padding: 0 4px;
}

.member-quick-btn .badge {
    position: absolute;
    top: -2px;
    right: -8px;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-quick-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #667eea;
    text-decoration: none;
}

.member-quick-btn:active {
    transform: scale(0.95);
}

/* Tile Grid Navigation Menu */
.bottom-sheet-nav {
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Menu Page Container - FADE IN/OUT */
.menu-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.menu-page.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.menu-page.sliding-out {
    opacity: 0;
}

.menu-page.sliding-in {
    opacity: 1;
}

/* Menu Page Header (for sub pages) - HIDDEN (헤더에 통합) */
.menu-page-header {
    display: none;
}

/* Tile Grid - 가로 스크롤 레이아웃 */
.tile-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 15px;
    padding: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

/* 스크롤바 숨김 */
.tile-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.tile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    scroll-snap-align: start;
}

.tile-item i:first-child {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 6px;
}

.tile-item span {
    line-height: 1.2;
    word-break: keep-all;
    padding: 0 4px;
}

.tile-item:hover {
    background: #f8f9fa;
    border-color: #667eea;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    text-decoration: none;
    color: #667eea;
}

.tile-item:active {
    transform: scale(0.95);
}

.tile-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #667eea;
}

.tile-item.active i:first-child {
    color: #fff;
}

/* Tile Arrow (for items with submenu) */
.tile-arrow {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: #999;
}

/* Sub Menu Tiles (smaller) */
.tile-item-sub {
    font-size: 10px;
}

.tile-item-sub i:first-child {
    font-size: 22px;
    margin-bottom: 4px;
}

/* Tile Back Button */
.tile-back-btn {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

.tile-back-btn i:first-child {
    color: #495057 !important;
}

.tile-back-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

/* Badge */
.badge-new {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #dc3545;
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 8px;
    font-weight: 600;
}

/* 반응형 그리드 제거 - 모든 화면에서 4열 고정 */

/* 1200px 초과에서 Bottom Sheet 숨김 */
@media (min-width: 1201px) {
    .bottom-sheet,
    .bottom-sheet-overlay {
        display: none !important;
    }
}

/**
 * 1200px 이하에서 헤더, 푸터, 사이드바 등 모두 숨김
 * index.html.php의 메인 콘텐츠만 전체 화면으로 표시
 */
@media (max-width: 1200px) {
    /* ==================== 헤더 영역 숨김 ==================== */

    /* 상단 로그인/회원가입 영역 (top-header) */
    .top-header {
        display: none !important;
    }

    /* 로고 및 검색 영역 (header-title) */
    .header-title {
        display: none !important;
    }

    /* 네비게이션 메뉴 영역 (nav-wrap) */
    .nav-wrap {
        display: none !important;
    }

    /* 전체 헤더 영역 */
    .header-wrap {
        display: none !important;
    }

    /* ==================== 푸터 영역 숨김 ==================== */

    /* 서비스이용약관, 개인정보처리방침 등 (footer-top) */
    .footer-top {
        display: none !important;
    }

    /* 회사정보 영역 (footer-cont-info) */
    .footer-cont-info {
        display: none !important;
    }

    /* 카피라이트 영역 (footer-copyright) */
    .footer-copyright {
        display: none !important;
    }

    /* 전체 푸터 영역 */
    .footer {
        display: none !important;
    }

    /* ==================== 사이드바 영역 숨김 ==================== */

    .basic-body-side {
        display: none !important;
    }

    /* ==================== 기타 UI 요소 숨김 ==================== */

    /* 상단으로 스크롤 버튼 */
    .eb-backtotop {
        display: none !important;
    }

    /* 사이드바 회원 버튼 (모바일) */
    .sidebar-user-btn {
        display: none !important;
    }

    /* 네비게이션 모바일 토글 버튼 */
    .navbar-mobile-toggler {
        display: none !important;
    }

    /* 상담신청 버튼 */
    .counsel-btn {
        display: none !important;
    }

    /* 검색 전체화면 */
    .search-full {
        display: none !important;
    }

    /* 메인 슬라이더 영역 */
    .main-slider-top {
        display: none !important;
    }

    /* EB 슬라이더 스킨 */
    [class*="ebs-basic-wrap-"],
    .ebs-basic-wrap,
    .ebs-basic-in,
    [class*="ebs-shop-basic-wrap-"],
    .ebs-shop-basic-wrap,
    .ebs-shop-basic-in {
        display: none !important;
    }

    /* EB 배너 스킨 */
    [class*="ebb-basic-wrap-"],
    .ebb-basic-wrap,
    .ebb-basic-in {
        display: none !important;
    }

    /* 페이지 타이틀 영역 숨김 */
    .page-title-wrap {
        display: none !important;
    }

    /* ==================== 메인 콘텐츠 전체 화면 설정 ==================== */

    /* wrapper 여백 제거 */
    .wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* basic-body 여백 제거 */
    .basic-body {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 메인 콘텐츠 전체 폭 사용 */
    .basic-body-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 메인 콘텐츠 컨테이너 */
    .main-wrap {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 컨테이너 전체 폭 사용 */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* index.html.php의 main-contents만 표시 */
    .main-contents {
        width: 100% !important;
        padding: 40px 0 0 0 !important;
        margin: 0 !important;
    }

    /* iOS Safe Area 대응 - main-contents */
    @supports (padding: max(0px)) {
        .main-contents {
            padding-top: calc(40px + env(safe-area-inset-top)) !important;
        }
    }

    /* ==================== 슬라이드/배너 영역 처리 ==================== */

    /* 슬라이드가 있다면 전체 폭으로 표시 */
    .swiper-container,
    .swiper-wrapper,
    .eb-slider,
    .eb-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/**
 * 태블릿 (768px ~ 1200px): 추가 최적화
 */
@media (min-width: 768px) and (max-width: 1200px) {
    .basic-body-main {
        padding: 0 30px !important;
    }
}

/**
 * 모바일 (768px 이하): 모바일 최적화
 */
@media (max-width: 767px) {
    .basic-body-main {
        padding: 0 10px !important;
    }

    /* 메인 콘텐츠 내부 여백 조정 */
    .main-contents {
        padding: 15px 0;
    }
}

/**
 * =====================================================
 * z-index 계층 구조 (iOS/Android 통합)
 * =====================================================
 *
 * 레이어 순서 (낮음 → 높음):
 * 1. 기본 콘텐츠: auto
 * 2. 상단/하단 앱 바: 999
 * 3. Bottom Sheet: 10000-10001
 * 4. SweetAlert2 모달: 100002-100004
 * 5. JavaScript alert(): 브라우저 기본 (최상위)
 *
 * 근본 문제:
 * - Bottom Sheet(100001)가 SweetAlert2(999999)보다 높아서 충돌
 * - iOS는 stacking context를 다르게 생성하여 z-index 무시됨
 * - isolation: isolate로 각 레이어를 독립시켜 해결
 */

/* === 레이어 1: 앱 바 (기본 UI) === */
.app-top-bar {
    z-index: 999 !important;
}

.app-bottom-bar {
    z-index: 999 !important;
}

.header-wrap {
    z-index: 998 !important;
}

/* === 레이어 2: Bottom Sheet === */
.bottom-sheet-overlay {
    z-index: 10000 !important;
}

.bottom-sheet {
    z-index: 10001 !important;
}

/* === 레이어 3: SweetAlert2 모달 (최상위) === */

/*
 * 단순 접근: 검은 반투명 배경 완전 제거
 * 테스트 목적:
 * 1. 배경 없이 모달만 표시하면 정상 작동하는가?
 * 2. 버튼 클릭이 가능한가?
 * 3. 어떤 문제가 발생하는가?
 */

/* SweetAlert2 Container */
/* ⚠️ 핵심: pointer-events를 none으로! */
div.swal2-container,
div[class*="swal2-container"] {
    /* z-index를 Bottom Sheet보다 높게 */
    z-index: 100002 !important;

    /* 위치 고정 */
    position: fixed !important;

    /* ⭐ 배경 완전 제거 */
    background: none !important;
    background-color: transparent !important;

    /* ⭐⭐⭐ 핵심: 컨테이너는 클릭 불가 (통과) */
    pointer-events: none !important;
}

/* ⭐ backdrop-show 상태에서도 배경 없음 + 클릭 통과 */
div.swal2-container.swal2-backdrop-show,
div.swal2-container.swal2-noanimation,
div[class*="swal2-container"][class*="backdrop-show"] {
    background: none !important;
    background-color: transparent !important;

    /* ⭐⭐⭐ 핵심: 배경도 클릭 통과 */
    pointer-events: none !important;
}

/* SweetAlert2 Popup (모달 창만 클릭 가능) */
div.swal2-popup,
div[class*="swal2-popup"] {
    /* 위치 유지 */
    position: relative !important;
    /* ⭐⭐⭐ 핵심: backdrop보다 확실히 높게 설정 */
    z-index: 100005 !important;

    /* ⭐⭐⭐ 핵심: 모달만 클릭 가능 */
    pointer-events: auto !important;
}

/* Bootstrap 모달 콘텐츠도 동일하게 처리 */
.modal-content {
    position: relative !important;
    z-index: 1001 !important;
    pointer-events: auto !important;
}

/* === iOS Safari 전용 최적화 === */
@supports (-webkit-touch-callout: none) {
    /* iOS에서만 적용 */

    /* SweetAlert2 Container */
    .swal2-container {
        /* ⭐⭐⭐ 핵심: iOS에서 fixed 대신 absolute 사용 */
        position: absolute !important;

        /* 위치 명시적 설정 */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        /* ⭐⭐⭐ iOS에서 배경 완전 제거 */
        background: none !important;
        background-color: transparent !important;

        /* ⭐⭐⭐ 클릭 이벤트 통과 */
        pointer-events: none !important;

        /* Webkit 하드웨어 가속 활성화 */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;

        /* 렌더링 최적화 */
        -webkit-perspective: 1000px !important;
        perspective: 1000px !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;

        /* transform 속성 변경 힌트 */
        will-change: transform !important;
    }

    /* Bootstrap Modal Backdrop (있을 경우 대비) */
    .modal-backdrop {
        /* ⭐⭐⭐ iOS에서는 배경 완전 제거 */
        background: none !important;
        background-color: transparent !important;
        pointer-events: none !important;
        z-index: 1000 !important;
    }

    .swal2-popup {
        /* 모달도 하드웨어 가속 */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: transform !important;
    }

    /* 모달 열렸을 때 body 스크롤 방지 */
    /* iOS에서 overflow:hidden만 쓰면 터치 입력이 막히므로
       반드시 position:fixed와 함께 사용 */
    body.swal2-shown {
        position: fixed !important;
        width: 100% !important;
        overflow: hidden !important;
        top: 0 !important;
        left: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* === PWA Standalone 모드 === */
@media (display-mode: standalone) {
    /* PWA로 설치했을 때 iOS safe-area 고려 */
    .swal2-container {
        /* iOS 11.0-11.2 지원 */
        top: constant(safe-area-inset-top);
        bottom: constant(safe-area-inset-bottom);
        left: constant(safe-area-inset-left);
        right: constant(safe-area-inset-right);

        /* iOS 11.2+ 지원 */
        top: env(safe-area-inset-top);
        bottom: env(safe-area-inset-bottom);
        left: env(safe-area-inset-left);
        right: env(safe-area-inset-right);
    }
}

/* 기타 UI 요소들의 z-index 조정 */
.header-wrap {
    z-index: 1002 !important;
}

.sidebar-left.offcanvas,
.sidebar-shop-member.offcanvas {
    z-index: 1004 !important;
}

.offcanvas-backdrop {
    z-index: 1003 !important;
}

/* 전체화면 검색 */
.search-full {
    z-index: 1010 !important;
}

/* Magnific Popup */
.mfp-bg {
    z-index: 1042 !important;
}

.mfp-wrap {
    z-index: 1043 !important;
}

/* iOS PWA 하단 고정바 safe-area 추가 최적화 */
@media (max-width: 1200px) {
    /* iOS notch 및 home indicator 영역 대응 */
    @supports (padding: max(0px)) {
        .app-top-bar {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(40px + env(safe-area-inset-top)) !important;
        }

        .app-bottom-bar {
            padding-bottom: max(env(safe-area-inset-bottom), 8px) !important;
            height: calc(60px + max(env(safe-area-inset-bottom), 8px)) !important;
        }

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

        /* ⭐ wrapper와 main-contents에도 적용 */
        .wrapper {
            padding-top: calc(40px + env(safe-area-inset-top)) !important;
            padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 8px)) !important;
        }

        .main-contents {
            padding-top: calc(40px + env(safe-area-inset-top)) !important;
            padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 8px)) !important;
        }

        /* 모달창이 열렸을 때도 safe-area 유지 */
        body.swal2-shown {
            padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 8px)) !important;
        }
    }

    /* iPhone X 이상 모델 대응 */
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
           only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
           only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
           only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3),
           only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
        .app-bottom-bar {
            padding-bottom: 34px !important;
            height: 94px !important;
        }

        body {
            padding-bottom: 94px !important;
        }
    }
}
/* ==================== PC 화면(1200px 초과)에서 푸터 표시 ==================== */
@media (min-width: 1201px) {
    .footer {
        display: block !important;
    }
    
    .footer-top {
        display: block !important;
    }
    
    .footer-cont-info {
        display: block !important;
    }
    
    .footer-copyright {
        display: block !important;
    }
}

/* ==================== 모든 PC 화면에서 푸터 기본 표시 (미디어 쿼리 우선순위 조정) ==================== */
/* 1200px 이하 숨김 룰보다 나중에 로드되어 우선순위가 높음 */
.footer {
    display: block !important;
}

.footer-top {
    display: block !important;
}

.footer-cont-info {
    display: block !important;
}

.footer-copyright {
    display: block !important;
}

/* 1200px 이하에서만 숨김 재적용 (더 높은 우선순위로) */
@media (max-width: 1200px) {
    .footer,
    .footer-top,
    .footer-cont-info,
    .footer-copyright {
        display: none !important;
    }
}