/* BASIC css start */
/* =========================================================
   쇼핑몰 메인 최종통합 CSS
   ========================================================= */

/* 기본 레이아웃 및 구분선 제거 */
#container { padding-top: 0px !important; }
#header .topArea > ul > .left > .headerIcon span.fa { color: #000000; }
.main .main_cate { display: none; }
.main #contents { margin: 0 auto; }


/* 1. 상단 섹션들의 자체 마진 정리 (구분선 간격 일정화) */
.sub_brand_section { margin-bottom: 0 !important; }
.banner-wrapper { margin-bottom: 0 !important; }
.sub-strip-banner { margin-bottom: 0 !important; }
.main_list_title { margin-top: 0 !important; }

/* 2. 구분선 간격 및 스타일 통일 */
.mmline {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #e5e5e5 !important; /* 구분선 색상 */
    margin: 20px 0 !important;             /* 위아래 간격 일정하게 고정 */
    clear: both !important;
}
hr { display: none !important; border: 0 !important; }


/* 1. 메인 배너 (원본 스킨 고유 레이아웃 보존) */
.big .swiper-container.aa {
    width: 100% !important;
    height: calc(100vh - 110px) !important;
    margin: 0 auto !important;
    position: relative;
}
.big .swiper-container.aa .swiper-wrapper { height: 100% !important; }
.big .swiper-container.aa .swiper-slide { height: 100% !important; position: relative; }
.big .swiper-container.aa .swiper-slide a { display: block !important; width: 100% !important; height: 100% !important; }
.big .swiper-container.aa .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}
.big .swiper-container.aa .swiper-slide::after { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.17); 
    z-index: 5; 
    pointer-events: none;
}

/* =========================================================
   메인 배너 개별 예외 처리
   - banner-image-only 클래스가 붙은 슬라이드는
     어두운 오버레이와 코드 문구를 모두 숨기고 이미지 그대로 노출
   - 추후 원래 방식으로 되돌리려면 HTML에서
     banner-image-only 클래스만 삭제하면 됨
   ========================================================= */
.big .swiper-container.aa .swiper-slide.banner-image-only::after {
    background: rgba(0,0,0,0) !important;
}

.big .swiper-container.aa .swiper-slide.banner-image-only .slide_txt {
    display: none !important;
}

.big .slide_txt { 
    position: absolute; 
    bottom: 12%; 
    left: 20px; 
    color: #fff; 
    z-index: 10; 
    text-align: left; 
    pointer-events: none; 
    font-family: 'Pretendard', sans-serif; 
}
.big .slide_txt .tit01, 
.big .slide_txt .tit02, 
.big .slide_txt .desc { 
    display: block; 
    color: #ffffff; 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.8s ease; 
}
.big .slide_txt .tit01 { font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 5px; }
.big .slide_txt .tit02 { font-size: 23px; font-weight: 550; line-height: 1.2; margin-bottom: 30px; }
.big .slide_txt .desc { font-size: 16px; font-weight: 450; }
.big .swiper-slide-active .slide_txt .tit01 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.big .swiper-slide-active .slide_txt .tit02 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.big .swiper-slide-active .slide_txt .desc { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

/* 2. 아이콘 카테고리 (가로 4개씩 5줄 + 시안과 동일한 둥근 사각형 카드 배경) */
.category_card_wrap {
    width: 100% !important;
    margin: 43px 0 !important;
    padding: 10px 10px 15px 10px !important;
    background: #ffffff !important;

    /* 기존 하단 그림자 숨김
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08) !important;
    */

    /* 위 그림자 강하게 + 아래 그림자 기존 유지 */
    box-shadow:
        0 -10px 20px -5px rgba(0, 0, 0, 0.16),
        0 10px 20px -5px rgba(0, 0, 0, 0.08) !important;

    position: relative !important;
    z-index: 5 !important;

    box-sizing: border-box !important;
}


.icon_menu {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.icon_menu li {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
    padding: 8px 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    float: none !important;
}
.icon_menu li a { display: block !important; text-decoration: none !important; }
.icon_menu li .img_box {
    width: 64px !important;
    height: 64px !important;
    background: #f4f4f4 !important;
    border-radius: 18px !important;
    margin: 0 auto 8px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.icon_menu li .img_box img {
    width: 80% !important;
    height: 80% !important;
    object-fit: contain !important;
    display: block !important;
}
.icon_menu li p {
    font-size: 12px !important;
    color: #111111 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

/* 3. 타이틀 및 서브설명문구 (여유 있는 중앙 정렬) */
.main_list_title {
    margin: 45px auto 10px auto !important;
    text-align: center !important;
    width: 100% !important;
}
.main_list_title .main_title {
    color: #000000 !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding-bottom: 6px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.main_list_title p {
    color: #666666 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 4. 상품 더보기 버튼 (문구 중앙 정렬 + 검정 원형 화살표 우측 고정) */
.more_btn_floating {
    width: 100% !important;
    margin: 30px auto 45px auto !important;
    text-align: center !important;
}
.more_btn_floating a {
    display: inline-block !important;
    width: 84% !important;
    max-width: 320px !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.more_btn_floating .btn_moreGray {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e2 !important;
    border-radius: 25px !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 0 45px 0 20px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    outline: none !important;
}
.more_btn_floating .arrow_circle {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

/* 5. 라인 띠배너 (가로 100% 꽉 차게 노출) */
.banner-wrapper {
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
.banner-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.banner-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover !important;
}

/* 6. 서브 브랜드 영역 (검정 바탕 + 브랜드명/설명문구 가운데 정렬) */
.sub_brand_section {
    width: 100% !important;
    background-color: #000000 !important;
    padding: 40px 15px !important;
    box-sizing: border-box !important;
    margin: 25px 0 0 0 !important; /* ★ 맨 끝(하단) 40px를 0으로 변경 */
}
.brand_grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 12px !important;
    width: 100% !important;
}
.brand_item {
    width: calc(50% - 6px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.brand_img_link {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.2 !important;
    overflow: hidden !important;
    background: #111111 !important;
}
.brand_img_link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.brand_txt_box {
    display: block !important;
    padding: 12px 0 8px 0 !important;
    text-decoration: none !important;
    text-align: center !important;
    width: 100% !important;
}
.brand_name {
    display: block !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 480 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.3px !important;
    text-align: center !important;
}
.brand_desc {
    display: block !important;
    color: #aaaaaa !important;
    font-size: 12px !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* =========================================================
   7. 메인 팝업
   - 하단 고정 정사각형 팝업
   - 상단 한 줄 : 오늘 하루 안보기 / 닫기
   - 이미지 위 원형 X 버튼 사용하지 않음
   ========================================================= */

/* 팝업 열렸을 때 배경 스크롤 방지 */
body.mainPop {
    overflow: hidden !important;
}

/* 메이크샵 미리보기 오버레이 클릭 방해 제거 */
#overlay_layer {
    pointer-events: none !important;
}

/* 팝업 전체 레이어 */
#popupDiv {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100000 !important;
}

/* 팝업 노출 */
#popupDiv.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 딤 배경 */
#popupDiv .dim {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.58) !important;
    z-index: 100000 !important;
}

/* 팝업 본체 */
#popupDiv .popup.main-new {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 100001 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 상단 옵션 : 오늘 하루 안보기 / 닫기 */
#popupDiv .popup-top-option {
    position: absolute !important;
    top: -32px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 30 !important;
}

#popupDiv .popup-top-option a {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

#popupDiv .popup-top-option .layer_close_today {
    text-align: left !important;
}

#popupDiv .popup-top-option .popup-text-close,
#popupDiv .popup-top-option .layer_close {
    margin-left: auto !important;
    text-align: right !important;
}

/* 기존 □ 표시 제거 */
#popupDiv .popup-top-option a::after {
    content: none !important;
}

/* 슬라이더 전체 */
#popupDiv .pt-popup-slider {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 3 !important;
}

#popupDiv .pt-popup-slider .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

#popupDiv .pt-popup-slider .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px 16px 0 0 !important;
    background: transparent !important;
}

#popupDiv .pt-popup-slider .swiper-slide a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 정사각형 팝업 이미지 */
#popupDiv .pt-popup-slider .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 좌측 상단 1 / 6 */
#popupDiv .pt-popup-slider .swiper-pagination {
    position: absolute !important;
    top: 16px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: left !important;
    z-index: 10 !important;
}

#popupDiv .swiper-pagination-current,
#popupDiv .swiper-pagination-total {
    color: #ffffff !important;
}

/* 기존 도트 숨김 */
#popupDiv .swiper-pagination-bullet {
    display: none !important;
}

/* 이미지 위 기존 원형 X 버튼 제거 */
#popupDiv .popup-close {
    display: none !important;
}

/* 예전 하단 버튼 영역 숨김 */
#popupDiv .popup-btn-area {
    display: none !important;
}


/* 유틸리티 레이아웃 */
.newwarp { width: 100%; padding: 0 10px 0px; text-align: center; box-sizing: border-box; }
.newwarp p { text-align: center; padding-bottom: 10px; box-sizing: border-box; }
.newwarp p img { width: 100%; }

.inside { width: 100%; margin: 0 auto; padding: 30px 20px 5px 20px; border-top: 1px solid #999; box-sizing: border-box; }
.inside:after { content: ""; clear: both; display: block; }
.inside li { width: calc(100% - 7px); margin-right: 7px; float: left; text-align: center; box-sizing: border-box; }
.inside li img { width: 100%; }

.event { width: 100%; margin: 0 auto; box-sizing: border-box; background: #f5f1ee; }
.event:after { content: ""; clear: both; display: block; }
.event h2 { padding: 20px 20px; border-bottom: 1px solid #f3f2f0; font-size: 14px; }
.event ul { background: #fcf8f5; }
.event li { border-bottom: 1px solid #f3f2f0; padding: 10px 30px; }
.event li a { font-size: 13px; color: #936361; }
.event li a span { font-size: 20px; margin-right: 10px; }
.event p.last { padding: 15px 0px; background: #f5f1ee; }

.mmbnr img { width: 100%; }


/* =========================================================
   메인 콘텐츠 클릭 활성화 + 헤더 레이어 우선순위 보정
   ========================================================= */


/* 1. 상단 헤더를 가장 위로 */
#header,
#header .topArea {
    position: relative !important;
    z-index: 20000 !important;
}


/* 2. MD 추천 영역 클릭 활성화 */
.md-recommend-section {
    position: relative !important;
    z-index: 9999 !important;
}

.md-recommend-section .more_btn_floating,
.md-recommend-section .more_btn_floating a,
.md-recommend-section .more_btn_floating button {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}


/* 3. 메인 라인배너 클릭 활성화 */
.banner-wrapper {
    position: relative !important;
    z-index: 9999 !important;
}

.banner-wrapper a,
.banner-wrapper img {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}


/* 4. 서브브랜드 클릭 활성화 */
.sub_brand_section {
    position: relative !important;
    z-index: 9999 !important;
}

.sub_brand_section .brand_item,
.sub_brand_section .brand_img_link,
.sub_brand_section .brand_txt_box {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}


/* 5. 일반 더보기 버튼도 클릭 가능하게 */
.more_btn_floating {
    position: relative !important;
    z-index: 9999 !important;
}

.more_btn_floating a,
.more_btn_floating button {
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
}

/* =========================================================
   서브브랜드 타이틀
   ========================================================= */

.sub_brand_title {
    width: 100% !important;
    margin: 0 auto 28px auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.sub_brand_title_main {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px !important;
    margin: 0 !important;
    padding: 0 0 7px 0 !important;
    text-align: center !important;
}

.sub_brand_title p {
    color: #aaaaaa !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    text-align: center !important;
}

/* =========================================================
   메인배너 1번 단독 고정 - 최종 보강
   Swiper가 clone을 생성하더라도 1번 외에는 노출하지 않음
   ========================================================= */
.big.main-banner-fixed .swiper-slide-duplicate {
    display: none !important;
}

.big.main-banner-fixed .swiper-wrapper {
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
}

.big.main-banner-fixed .swiper-slide.banner-image-only {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
}

.big.main-banner-fixed .swiper-slide.banner-image-only::after {
    background: transparent !important;
}

.big.main-banner-fixed .swiper-slide.banner-image-only .slide_txt {
    display: none !important;
}

/* =========================================================
   ★ MD 추천 8개씩 노출 보조
   ========================================================= */
.md-recommend-section ul.items {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* =========================================================
   ★ 우측 전화 / 카카오 / 위아래 퀵버튼 레이어 복구
   MD추천~서브브랜드가 퀵버튼 위로 올라오는 문제 해결
   ========================================================= */

/* 콘텐츠 섹션은 퀵메뉴보다 아래로 */
.md-recommend-section,
.banner-wrapper,
.sub_brand_section,
.more_btn_floating {
    position: relative !important;
    z-index: 1 !important;
}

/* 실제 클릭 요소는 클릭만 유지하고 레이어는 과하게 올리지 않음 */
.md-recommend-section .more_btn_floating,
.md-recommend-section .more_btn_floating a,
.md-recommend-section .more_btn_floating button,
.banner-wrapper a,
.banner-wrapper img,
.sub_brand_section .brand_item,
.sub_brand_section .brand_img_link,
.sub_brand_section .brand_txt_box,
.more_btn_floating a,
.more_btn_floating button {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* 메이크샵 미리보기 투명레이어는 클릭 방해 금지 */
#overlay_layer {
    pointer-events: none !important;
}

/* =========================================================
   7-1. 메인 팝업 상단 위치 미세조정
   - 오늘 하루 안보기 / 닫기 : 좌우 18px 안쪽
   - 페이지 번호 : 이미지 안쪽으로 조금 더 내려 배치
   ========================================================= */

/* 오늘 하루 안보기 / 닫기 */
#popupDiv .popup-top-option {
    top: -32px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 24px !important;

    padding: 0 18px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#popupDiv .popup-top-option .layer_close_today {
    margin: 0 !important;
    text-align: left !important;
}

#popupDiv .popup-top-option .popup-text-close,
#popupDiv .popup-top-option .layer_close {
    margin-left: auto !important;
    text-align: right !important;
}

/* 페이지 번호 1 / 6 */
#popupDiv .pt-popup-slider .swiper-pagination {
    top: 18px !important;
    left: 18px !important;

    padding: 4px 7px !important;

    background: rgba(0,0,0,.22) !important;
    border-radius: 12px !important;

    font-size: 12px !important;
    line-height: 1 !important;
}

/* =========================================================
   7-2. 팝업 페이지번호 위치 조정
   - 이미지 상단 로고/문구와 겹치지 않도록 아래로 이동
   ========================================================= */
#popupDiv .pt-popup-slider .swiper-pagination {
    top: 38px !important;
    left: 16px !important;

    padding: 3px 6px !important;

    font-size: 11px !important;
    line-height: 1 !important;

    background: rgba(0, 0, 0, 0.28) !important;
    border-radius: 10px !important;
}


/* BASIC css end */