/**********************************************************************************/
/* 스크롤바 숨김 스타일 시작 *******************************************************/
/* 웹킷 기반 브라우저(Chrome, Safari, 최신 Edge) */
::-webkit-scrollbar {
    display: none;
}

/* Firefox */
* {
    scrollbar-width: none;
}

/* IE, Edge (Legacy) */
* {
    -ms-overflow-style: none;
}

/* iOS에서 부드러운 스크롤 지원 - 개선된 방식 */
[style*="overflow: auto"], 
[style*="overflow:auto"], 
[style*="overflow-y: auto"], 
[style*="overflow-y:auto"],
[style*="overflow: scroll"], 
[style*="overflow:scroll"], 
[style*="overflow-y: scroll"], 
[style*="overflow-y:scroll"],
.content-wrapper, 
.main-wrapper, 
.store-list, 
.notice-list,
.content,
main,
.subHeader ~ main,
body {
    -webkit-overflow-scrolling: touch;
}

/* 서브 화면의 메인 콘텐츠 영역에 스크롤바 명시적으로 숨김 */
.subHeader ~ main::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}

/* 서브 헤더 스크롤바 숨김 강화 */
.subHeader, .topArea {
    overflow: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.subHeader::-webkit-scrollbar, 
.topArea::-webkit-scrollbar {
    display: none;
    width: 0 !important;
}
/* 스크롤바 숨김 스타일 끝 ********************************************************/

/**********************************************************************************/
/* 서브 페이지 레이아웃 구조 - 2단 레이아웃 *****************************************/
/* 모든 페이지에 기본 구조 설정 */
html {
    height: -webkit-fill-available; /* iOS Safari용 추가 */
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    height: -webkit-fill-available; /* iOS Safari용 추가 */
    display: flex;
    flex-direction: column;
}

/* body 바로 아래 container를 flex 컨테이너로 설정 */
body > .container {
    display: flex;
    flex-direction: column;
    flex: 1; /* 남은 공간 모두 차지 */
    overflow: hidden; /* 중요: 내부 스크롤을 위해 컨테이너 자체는 오버플로우 숨김 */
}

/* CSS 변수 도입 - 단순화된 버전 */
:root {
    --toparea-height: 55px; /* 서브헤더 영역 높이 */
    --notch-padding: env(safe-area-inset-top, 0); /* 노치 영역 패딩 */
    --content-gap: 15px; /* 타이틀과 컨텐츠 사이 간격 - 줄임 */
    --header-total-height: calc(var(--toparea-height) + var(--notch-padding) + var(--content-gap));
}

/* 서브헤더 아래 메인 콘텐츠에 헤더 높이만큼 패딩 추가 - 간소화 */
.subHeader ~ main {
    padding-top: var(--header-total-height); /* 단순화된 계산식 */
    padding-left: 20px;
    padding-right: 20px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* 첫 번째 콘텐츠 요소 최적화 */
/* .subHeader ~ main > *:first-child {
    margin-top: 0; 
} */

/* 첫 번째 콘텐츠 요소를 위한 조정 클래스 (필요한 경우만 사용) */
.first-content {
    margin-top: -5px; /* 여백이 너무 큰 페이지에서 상쇄용 */
}

.first-content-large {
    margin-top: 10px; /* 더 큰 여백이 필요한 경우 */
}

/* 스크롤바 숨김 강화 */
.subHeader ~ main::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}

/* 노치 및 펀치홀 카메라 대응 스타일 - sub_header.php에서 이동 */
.status-bar-area {
    height: env(safe-area-inset-top, 0);
    background-color: #EFF0F0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

/* 서브헤더 스타일 조정 */
.subHeader {
    position: fixed;
    top: env(safe-area-inset-top, 0); /* 안전 영역 적용 */
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: #EFF0F0;
}

/* 타이틀 스타일 개선 */
.topArea {
    max-width: 1024px;
    width: 100%;
    background-color: #EFF0F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: var(--toparea-height); /* CSS 변수 사용 */
    box-sizing: border-box;
    margin: 0 auto;
}

.topArea .header-title {
    position: relative;
    text-align: center;
    flex-grow: 1;
    color: #000;
    font-size: 16px;
    margin: 0;
    padding: 0 24px; /* 양쪽 버튼 영역만큼 패딩 추가 */
    /* 텍스트가 너무 길 경우 줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* style.css에서 이동한 버튼 스타일 */
.topArea button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.header-close-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-close-btn img {
    width: 14px;
    height: 14px;
}

/* 좁은 화면에서 추가 최적화 */
@media screen and (max-width: 320px) {
    .topArea .header-title {
        font-size: 15px;
    }
}

/* 아이폰 노치 모델 대응 */
@supports (padding-top: env(safe-area-inset-top)) {
    .topArea {
        padding-top: 3px; /* 4px에서 3px로 변경 */
        padding-bottom: 3px; /* 4px에서 3px로 변경 */
    }
}

/* 미디어 쿼리 최적화 - 디바이스 크기별 간격 조정 */
@media screen and (max-height: 700px) {
    :root {
        --toparea-height: 50px;
        --content-gap: 10px; /* 작은 화면에서 더 좁은 간격 */
    }
}

@media screen and (min-height: 700px) and (max-height: 900px) {
    :root {
        --toparea-height: 52px;
        --content-gap: 12px; /* 중간 크기 화면 */
    }
}

@media screen and (min-height: 900px) {
    :root {
        --toparea-height: 55px;
        --content-gap: 15px; /* 큰 화면 */
    }
}

/* 노치가 큰 iPhone X, XS, 11, 12, 13 시리즈 대응 */
@supports (-webkit-touch-callout: none) {
    @media screen and (min-height: 800px) {
        :root {
            --content-gap: 18px; /* iOS 노치 기기에서 약간 더 넓은 간격 */
        }
    }
    
    /* 노치가 특히 큰 iPhone 12/13 Pro Max 대응 */
    @media screen and (min-height: 900px) {
        :root {
            --content-gap: 18px;
        }
    }
}

/* 서브 페이지 레이아웃 구조 끝 ****************************************************/


/* 커스텀 알림창 스타일 시작 *******************************************************/
.custom-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 24px 20px;
    width: 300px;
    max-width: 90%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
}

.custom-alert.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.custom-alert p {
    margin: 0 0 20px 0;
    font-size: 16px;
    line-height: 1.5;
    word-break: keep-all;
}

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

.alert-overlay.show {
    opacity: 1;
}

.alert-icon {
    text-align: center;
    margin-bottom: 15px;
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23333333"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.alert-icon svg {
    width: 40px;
    height: 40px;
    color: #333333;
}

#alertMessage {
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px;
    color: #333;
}

/* 버튼 컨테이너 추가 */
.alert-buttons {
    display: flex;
    gap: 10px;
}

/* 기본 버튼 스타일 */
.custom-alert button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 0; /* 직각 스타일로 변경 */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

/* 확인 버튼 스타일 */
.custom-alert .confirm-btn {
    background: #333333;
    color: white;
}

.custom-alert .confirm-btn:hover {
    background: #222222;
}

/* 취소 버튼 스타일 */
.custom-alert .cancel-btn {
    background: #f8f8f8;
    color: #333;
    border: 1px solid #ddd;
}

.custom-alert .cancel-btn:hover {
    background: #eee;
}

/* 단일 버튼일 때는 너비 100% */
.custom-alert:not(.with-cancel) .confirm-btn {
    width: 100%;
}

.custom-alert button:focus {
    outline: none;
}
/* 커스텀 알림창 스타일 끝 ********************************************************/

/* 노치 영역 대응 클래스 - style.css에서 이동 및 개선 */
/* 하단에 고정된 요소가 있는 컨테이너에 적용 (노치 영역 대응) */
.fixed-bottom-container {
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 15px); /* 0px에서 15px로 증가 */
  margin-bottom: 20px;
}

/* iOS 디바이스에서 추가 패딩 적용 */
@supports (-webkit-touch-callout: none) {
  .fixed-bottom-container {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 25px); /* iOS에서는 더 많은 여백 */
  }
}

/* 노치 영역이 특히 큰 iPhone X, 11, 12, 13 시리즈 대응 */
@media screen and (min-height: 800px) and (max-width: 430px) {
  .fixed-bottom-container {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 30px);
  }
}

/* 상단에 고정된 요소가 있는 경우(노치 영역 대응) */
.fixed-top-container {
  padding-top: env(safe-area-inset-top, 0);
}