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

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

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

/* iOS 확대/축소 방지 */
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    touch-action: pan-x pan-y !important;
    -ms-touch-action: pan-x pan-y !important;
}

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

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

/* body와 html 스크롤 설정 */
html {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    /* iOS PWA safe-area 지원 - html 요소에 최소 높이 설정 */
    min-height: 100%;
    min-height: calc(100% + env(safe-area-inset-top));
}

body {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

/* ⚠️ 패딩 방식 제거됨 - pwa-grid-fix.css의 Grid 방식 사용 */

/* 더블탭 줌 방지 */
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 이하에서만 표시
 */

/* 상단 고정바 - 표준 Safe Area 방식
 * ⚠️ 주의: 1200px 이하에서는 pwa-grid-fix.css의 Grid 레이아웃이 이 스타일을 오버라이드합니다.
 * - position: fixed → relative (Grid Item으로 변경)
 * - 스크롤 시 숨김/표시 기능: topbar-scroll.js 참조
 */
.app-top-bar {
    display: none;
    position: fixed;
    /* ⭐ iOS: 노치/상태바 아래부터 시작 (표준 방식) */
    top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
    top: env(safe-area-inset-top); /* iOS 11.2+ */
    left: 0;
    right: 0;
    height: 40px; /* 고정 높이 */
    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;
}

/* 하단 고정바 - 표준 Safe Area 방식 */
.app-bottom-bar {
    display: none;
    position: fixed;
    /* ⭐ 화면 맨 아래에 고정 */
    bottom: 0;
    left: 0;
    right: 0;
    /* ⭐ iOS: 60px + safe-area 공간 확보 */
    min-height: 60px;
    height: calc(60px + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
    height: calc(60px + env(safe-area-inset-bottom)); /* iOS 11.2+ */
    /* ⭐ iOS: 내부 padding으로 버튼을 safe-area만큼 위로 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    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);
    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: 700;
}

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

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

/* 아이콘 래퍼 - 배지 오버레이용 */
.app-nav-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* 배지 스타일 - 아이콘 우측 상단에 오버레이 */
.app-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e53935;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/**
 * ========================================
 * Safe Area 처리 통합 (모바일 1200px 이하)
 * ========================================
 */
@media (max-width: 1200px) {
    /* 1. 앱 바 표시 */
    .app-top-bar {
        display: block;
    }

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

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

    /* ⚠️ wrapper 수동 계산 제거됨 - pwa-grid-fix.css의 Grid 방식 사용 */
    /* Grid가 자동으로 공간 계산: grid-row: 2 (상단바와 하단바 사이 공간 자동 할당) */
}

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

/* Overlay - display/opacity 분리로 애니메이션 보장 */
.bottom-sheet-overlay {
    display: block !important;           /* 항상 표시 상태 유지 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;  /* CSS 변수 대신 직접 값 사용 */
    opacity: 0 !important;               /* 투명으로 숨김 */
    visibility: hidden !important;       /* 숨김 */
    pointer-events: none !important;     /* 클릭 이벤트 차단 */
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.bottom-sheet-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;     /* 클릭 이벤트 허용 */
}

/* Bottom Sheet */
.bottom-sheet {
    display: flex !important;            /* 항상 flex 상태 유지 */
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: 85vh !important;
    background: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 10001 !important;  /* CSS 변수 대신 직접 값 사용 */
    transform: translateY(100%) !important;  /* 화면 아래로 숨김 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    visibility: hidden !important;       /* 숨김 */
    pointer-events: none !important;     /* 클릭 차단 */
}

.bottom-sheet.active {
    transform: translateY(0) !important;  /* 화면 위로 올라옴 */
    visibility: visible !important;       /* 보임 */
    pointer-events: auto !important;      /* 클릭 허용 */
}

/* 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;
}

/* Active 상태 - 현재 페이지 */
.member-quick-btn.active {
    background: #fff !important;
    border: 2px solid #667eea !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3), 0 2px 6px rgba(102, 126, 234, 0.2) !important;
    color: #667eea !important;
}

.member-quick-btn.active i {
    color: #667eea !important;
}

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

/* 퀵메뉴 아이콘 래퍼 - NEW 배지용 */
.quick-btn-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* NEW 배지 - 아이콘 우측 상단 오버레이 */
.quick-btn-new-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
    animation: pulse-new 2s infinite;
    z-index: 1;
}

/* NEW 배지 펄스 애니메이션 */
@keyframes pulse-new {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 3px 8px rgba(255, 107, 107, 0.6);
    }
}

/* 관리자 전용 배지 - 아이콘 우측 상단 오버레이 */
.admin-only-badge {
    position: absolute;
    top: -8px;
    right: -18px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 2.2px 5px;
    border-radius: 4px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(128, 128, 128, 0.5);
    animation: pulse-admin 3s infinite;
    z-index: 1;
}

/* 상품지급 메뉴의 관리자 배지 - 아이콘 위 배치 */
.member-quick-btn .admin-only-badge {
    position: absolute;
    top: -8px;
    right: -18px;
    display: inline-block;
    margin-top: 0;
    font-size: 8px;
}

/* 관리자 배지 펄스 애니메이션 */
@keyframes pulse-admin {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(128, 128, 128, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(128, 128, 128, 0.7);
    }
}

/* 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;
    font-weight: 700;
}

.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);
}

/* Active 선택된 메뉴 스타일 */
.tile-item.active {
    background: #fff !important;
    color: #333 !important;
    border: 2px solid #667eea !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3), 0 2px 8px rgba(102, 126, 234, 0.2) !important;
    transform: none !important;
}

.tile-item.active i:first-child {
    color: #667eea !important;
}

/* Active 상태에서 클릭 시 transform 무시 */
.tile-item.active:active {
    transform: scale(0.98) !important;
}

/* 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;
    }

    /* ==================== 쪽지 페이지 win-title 숨김 ==================== */
    .memo-list .win-title,
    .memo-write .win-title,
    .memo-view .win-title {
        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 padding 제거됨 - pwa-grid-fix.css에서 이미 처리 */

    /* 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: 0 !important;  /* ⭐ body에서 이미 패딩 적용되므로 0 */
        margin: 0 !important;
    }

    /* iOS Safe Area 대응 - main-contents는 불필요 (body에서 처리) */
    /* 삭제됨 */

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

    /* 슬라이드가 있다면 전체 폭으로 표시 */
    .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;
    }

    /* 메인 콘텐츠 내부 여백 조정 - body에서 이미 적용되므로 제거 */
    .main-contents {
        padding: 0 !important;
    }
}

/**
 * 가로 모드 최적화 (1200px 이하 + 가로 방향)
 * orientation: natural 설정 시 디바이스 회전 잠금 해제 상태에서만 적용
 */
@media (max-width: 1200px) and (orientation: landscape) {
    /* 상단 고정바 높이 축소 (가로 모드에서는 화면 높이가 작으므로) */
    .app-top-bar {
        min-height: 35px;
        height: calc(35px + env(safe-area-inset-top));
    }

    /* 하단 고정바 높이 축소 */
    .app-bottom-bar {
        min-height: 50px;
        height: calc(50px + constant(safe-area-inset-bottom));
        height: calc(50px + env(safe-area-inset-bottom));
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 하단바 아이콘 크기 조정 */
    .app-nav-item i {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .app-nav-item span {
        font-size: 10px;
    }

    /* ⚠️ wrapper 수동 계산 제거됨 - pwa-grid-fix.css의 Grid가 자동 처리 */
    /* pwa-grid-fix.css의 가로모드 최적화 코드 사용 (35px, 50px 높이 자동 적용) */

    /* Bottom Sheet 높이 조정 (가로 모드에서는 화면 높이가 작음) */
    .bottom-sheet {
        max-height: 75vh;
    }

    /* Quick Menu 버튼 크기 조정 */
    .member-quick-btn {
        width: 60px;
        height: 60px;
        font-size: 9px;
    }

    .member-quick-btn i {
        font-size: 18px;
        margin-bottom: 3px;
    }

    /* Tile Grid 버튼 크기 조정 */
    .tile-item {
        width: 70px;
        height: 70px;
        font-size: 10px;
    }

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

/**
 * =====================================================
 * ⭐ Z-INDEX 중앙 관리 시스템 (Central Z-Index Management)
 * =====================================================
 *
 * 모든 z-index는 여기서 한 번만 정의됩니다.
 * 다른 곳에서 중복 정의 금지!
 *
 * CSS 변수(Custom Properties)로 관리:
 * - 한 곳에서 수정하면 전체 적용
 * - 계층 구조를 명확하게 파악 가능
 * - 충돌 방지 및 유지보수 용이
 *
 * =====================================================
 * 레이어 순서 (낮음 → 높음):
 * =====================================================
 * 1. 기본 콘텐츠: auto
 * 2. 헤더/푸터: 998-999
 * 3. 사이드바/오프캔버스: 1003-1004
 * 4. 검색/팝업: 1010-1043
 * 5. Bottom Sheet: 10000-10001
 * 6. SweetAlert2: 10002-10005
 * 7. Bootstrap Modal: 10010-10013
 * =====================================================
 */

:root {
    /* === 레이어 1: 기본 UI (900번대) === */
    --z-header: 998;
    --z-app-bar: 999;

    /* === 레이어 2: 오프캔버스 (1000번대) === */
    --z-offcanvas-backdrop: 1003;
    --z-offcanvas: 1004;
    --z-search-full: 1010;
    --z-magnific-bg: 1042;
    --z-magnific-wrap: 1043;

    /* === 레이어 3: Bottom Sheet (10000번대) === */
    --z-bottom-sheet-overlay: 10000;
    --z-bottom-sheet: 10001;

    /* === 레이어 4: SweetAlert2 (10000번대 상위) === */
    --z-swal2-container: 10002;
    --z-swal2-popup: 10005;

    /* === 레이어 5: Bootstrap Modal (10010번대) === */
    --z-modal-backdrop: 10010;
    --z-modal: 10011;
    --z-modal-dialog: 10012;
    --z-modal-content: 10013;
}

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

.app-bottom-bar {
    z-index: var(--z-app-bar) !important;
}

.header-wrap {
    z-index: var(--z-header) !important;
}

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

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

/* SweetAlert2 Container */
/* ⚠️ 핵심: pointer-events를 none으로! */
div.swal2-container,
div[class*="swal2-container"] {
    /* z-index를 Bottom Sheet보다 높게 */
    z-index: var(--z-swal2-container) !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: var(--z-swal2-popup) !important;

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

/* Bootstrap 모달 콘텐츠도 동일하게 처리 */
.modal-content {
    position: relative !important;
    z-index: var(--z-modal-content) !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: var(--z-modal-backdrop) !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 조정 */
.sidebar-left.offcanvas,
.sidebar-shop-member.offcanvas {
    z-index: var(--z-offcanvas) !important;
}

.offcanvas-backdrop {
    z-index: var(--z-offcanvas-backdrop) !important;
}

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

/* Magnific Popup */
.mfp-bg {
    z-index: var(--z-magnific-bg) !important;
}

.mfp-wrap {
    z-index: var(--z-magnific-wrap) !important;
}

/* ========================================
 * 전역 모달 Grid 외부 배치 스타일 (모든 .modal)
 * ======================================== */

/* 모든 Bootstrap 모달을 중앙 관리 z-index로 설정 */
.modal {
    z-index: var(--z-modal) !important;
}

/* 모달 배경 (backdrop) */
.modal.fade {
    /* viewport 기준 고정 위치 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* 모달 다이얼로그 */
.modal .modal-dialog {
    z-index: var(--z-modal-dialog) !important;
    position: relative !important;
}

/* 모달 콘텐츠 */
.modal .modal-content {
    z-index: var(--z-modal-content) !important;
    position: relative !important;
}

/* 모달 backdrop (어두운 배경) */
.modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}

/* iOS 전용 최적화 */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari에서만 적용 */
    .modal {
        /* iOS에서 fixed가 제대로 작동하도록 강제 */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }

    /* iOS에서 모달 열릴 때 body 스크롤 방지 */
    body.modal-open {
        /* Grid Layout 유지하면서 스크롤만 방지 */
        overflow: hidden !important;
        /* position: fixed는 사용하지 않음 (Grid 깨짐 방지) */
    }
}

/* PWA 모드 (standalone) 전용 */
@media (display-mode: standalone) {
    /* PWA에서 safe-area 고려 */
    .modal .modal-dialog {
        /* iOS safe-area만큼 여백 추가 */
        margin-top: env(safe-area-inset-top, 0) !important;
        margin-bottom: env(safe-area-inset-bottom, 0) !important;
    }
}

/* 1200px 이하 모바일 기기 (Grid Layout 활성화 구간) */
@media (max-width: 1200px) {
    .modal .modal-dialog {
        /* 모바일에서 좌우 여백 최소화 */
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    /* 모달 열릴 때 상단/하단바 위에 표시되도록 강제 */
    body.modal-open .modal {
        /* Grid Item보다 우선 */
        position: fixed !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;
    }
}

/* 나의팀 버튼 - 심플 강조 (안쪽 테두리 - 그린) */
.member-quick-btn[href*="pid=team"] {
    border: none !important;
    box-shadow: inset 0 0 0 2.5px #28a745,
                0 2px 8px rgba(40, 167, 69, 0.2) !important;
}

.member-quick-btn[href*="pid=team"] i {
    color: #28a745 !important;
}