body main section{padding: 10px 0  !important;} 
html > body main{padding: 0 !important;}
img{  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}

._template{
  
    .titWrap{gap: 20px;}
    .titWrap, .conWrapper{max-width: 1100px;}
    .titWrap h3,.titWrap h4{font-weight: 500; width: 100%}
    .imgCon, img{width: 100%; font-size: 0;}
    div, p{font-weight: 300;}
    .typeDefault .swiper-pagination-bullet{width: 4px !important; height: 4px !important;}


    section.top{padding: 0 !important;
        position: relative;

        

        .titWrap{      
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 40px;
            color: #fff;
            text-align: center;
            z-index: 2;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            justify-content: space-between;
            margin: 0 auto;
            }
          h2{font-size: 24px; font-weight: 500; margin: 0;}
          .date{font-size: 20px; font-weight: 400; margin: 0;}
      
          img{aspect-ratio: 2.7 / 1;}
    }

    /*
     * 스티키 탭 (#pageNav) 테마
     * · dark  : 검정 배경 + 흰 글씨 (기본)
     * · light : 흰 배경 + 검정 글씨
     * 선택 방법 (둘 중 하나):
     *   1) #pageNav class="tab-theme--dark" | "tab-theme--light"
     *   2) <meta name="promo-tab-theme" content="dark|light"> (promotionlayout 자동 적용)
     */
    #pageNav.tab-theme--dark,
    #pageNav:not(.tab-theme--light):not(.tab-theme--dark) {
        background: #000 !important;
    }
    #pageNav.tab-theme--dark > a,
    #pageNav:not(.tab-theme--light):not(.tab-theme--dark) > a {
        color: rgba(255, 255, 255, 0.45);
    }
    #pageNav.tab-theme--dark > a.active,
    #pageNav:not(.tab-theme--light):not(.tab-theme--dark) > a.active {
        color: #fff !important;
        border-bottom-color: #fff !important;
    }

    #pageNav.tab-theme--light {
        background: #fff !important;
        border-bottom: 1px solid var(--color-border-default, #eeeeee);
    }
    #pageNav.tab-theme--light > a {
        color: rgba(0, 0, 0, 0.45);
    }
    #pageNav.tab-theme--light > a.active {
        color: #000 !important;
        border-bottom-color: #000 !important;
    }
    
    .benefits
    {
 
     
        .titWrap, .conWrapper{max-width: 800px;}
        /* .titWrap{margin-bottom: 0;} */
        .conWrapper {flex-direction: column; gap: 0; margin-top: 0;}
        .conWrapper:has(+ .btnWrap) {margin-bottom: 0;}
        .btnWrap{align-items: center;margin-bottom: 20px;}
        .benefitList 
        {
            
            li{display: flex; justify-content: space-between;flex-direction: row;padding: 20px 0;border-bottom: 1px solid #ddd;}
             li:first-child{border-top:2px solid #ddd;}
            li div{text-align: right;font-weight: 400;}
            li div.title{text-align: left; font-weight: 500;}
            li small{opacity: 0.4;}
        }
        

    }
    .notices 
        {   

            * {color: var(--color-notice, #666);}
            .accordionBtn{
                font-size: 0.9rem;
                margin-bottom: 20px;
                cursor: pointer;
                user-select: none;
                i{ display: inline-block; transition: transform 0.2s ease; }
            }
            .noticeList {
                display: none;
                li{font-size: 0.9rem; }
                & > li{display: flex; flex-direction: column;  gap: 10px;}
           
                li div{font-weight: 400;}
                li .title{text-align: left; font-weight: 500; font-size: 1rem;}
                li small{opacity: 0.4;}
            }
            &.is-open{
                .noticeList{ display: flex; flex-direction: column; gap: 20px; }
                .accordionBtn i{ transform: rotate(180deg); }
            }
            
        }

    
    .products{
        .titWrap{margin-bottom: 0;}
        .conWrapper{margin-top: 0;flex-direction: column;}
        .ec-base-product{width: 100%; margin: 0 auto;}
        .ec-base-product .-grid.-normal{
            padding: 0;
            gap: 30px 10px !important;
            grid-template-columns: repeat(var(--products-pc-cols), 1fr) !important;
        }
        .ec-base-product .prdList > li{margin: 0;}

        /* 컬렉션 소개 — imgWrap + txtWrap 2열 */
        .conWrapper.collection-intro-wrap {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0 !important;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto 40px;
        }
        .collection-intro-wrap .imgWrap {
            flex: 0 0 var(--collection-intro-img-width, 320px);
            width: var(--collection-intro-img-width, 320px);
            min-width: 0;
        }
        .collection-intro-wrap .imgWrap img {
            width: 100%;
            height: auto;
            display: block;
        }
        .collection-intro-wrap .txtWrap {
            flex: 1;
            min-width: 0;
            padding-left: var(--collection-intro-gap, 48px);
            box-sizing: border-box;
        }
        .collection-intro-wrap .txtBox {
            border: none;
            padding: 0;
            text-align: left;
        }
        .collection-intro-wrap .txtWrap div:not(:has(>b)){
            
            font-size: 16px;
        }

        .collection-intro-wrap .txtBox > div:first-child {
            color: var(--color-03, #333);
            font-weight: 600;
            margin-bottom: 12px;
        }
        .collection-intro-wrap .txtBox > div + div {
            color: var(--color-02, #666);
        }
    }
/* 프로모션 — 저널 (swipergallery is-multiview) */
.journals .titWrap { margin-bottom: 0px; }
.journals .conWrapper {
    margin-top: 0;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
}
.journals .ec-base-product {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}
.journals .swipergallery {
    width: 100%;
    padding-bottom: 28px;
    box-sizing: border-box;
}
/* Cafe24가 prdList를 빼도 동작하도록 swiper-wrapper 기준 */
.journals .swipergallery .swiper-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* width·margin-right는 Swiper가 인라인으로 잡음 — margin !important 금지(갭 사라짐) */
.journals .swipergallery .swiper-slide {
    display: block;
    float: none !important;
    height: auto;
    box-sizing: border-box;
}
.journals .promo-jn-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.journals .promo-jn-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
}
.journals .promo-jn-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    border: 0 !important;
}
.journals .promo-jn-card__title,
.journals .promo-jn-card__title span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-01, #333) !important;
    word-break: keep-all;
}

.relateds{
    border-top: 1px solid var( --color-border-default);
    .conWrapper{flex-direction: column; }
    .conWrapper:has(+ .conWrapper){margin-bottom: 0;}
    .conWrapper + .conWrapper{margin-top: 0px;}

    /* 연관 브랜드 — PC: btn_bnr 2개 이상일 때 최대 2열 */
    .brandB .btnWrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .brandB .btnWrap:has(> .btn_bnr:only-child) {
        grid-template-columns: 1fr;
    }
    .brandB.conWrapper:has(> .btnWrap + .btnWrap) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .brandB.conWrapper:has(> .btnWrap + .btnWrap) > .tit {
        grid-column: 1 / -1;
    }
    .brandB.conWrapper:has(> .btnWrap + .btnWrap) > .btnWrap {
        display: block;
    }
}
    .btn_bnr{ background: #fff;color: var( --color-text-secondary) !important; font-size: var(--text-size-label2); max-width: unset; width: 100%; border: 1px solid var( --color-border-default) !important;padding: 1.2rem 2rem;
        &:hover{ border: 1px solid var( --color-border-strong) !important;}
        strong{display: block; font-size: var(--text-size-body1); color: var(--color-text-primary) !important;}
    }

    .bodys{ gap: 0;
  
         article+article{margin-top: 0;}
        .conWrapper{display: flex; flex-direction: column; gap: 0;
        
            .txtWrap{ gap: 10px; display: flex; flex-direction: column;
                *{color: inherit;}
                .txtBox{padding: 30px 0; gap: 10px; display: flex; flex-direction: column; font-size: 17px; width: 100%;}
                b{font-weight: 500; font-size: inherit;}
                div{  font-size: inherit;}
                }
            .imgWrap{position: relative;}

            .swipergallery{
                --gallery-gap: 8px;

                & + &{margin-top: var(--gallery-gap);}
                .swiper-slide{
                    box-sizing: border-box;
                    display: flex;
                    gap: var(--gallery-gap);
                }
                &:not(.is-multiview) .swiper-slide{
                    width: 100%;
                }
                .swiper-slide:has(> .txtWrap){flex-direction: column;}
                /* 이미지 1개면 꽉, 2개면 반반 */
                .swiper-slide .imgCon{flex: 1 1 0; width: auto; min-width: 0;}

                /* PC 3장 / MO 1장 등 다중 노출 (promotionlayout 스크립트 연동) */
                &.is-multiview .swiper-slide{
                    display: block;
                    height: auto;
                    width: auto;
                }
                &.is-multiview .swiper-slide .imgCon{
                    width: 100%;
                    flex: none;
                }
            }

        }
       
    }
    .store{
        position: relative;
        gap: 0;

        &::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 0;}
        *{color: #fff !important; z-index: 1;}    
        .btnWrap{justify-content: center; margin-top: 0;}
    }

    :has(> .capBox){position: relative;}
    .capBox{
        position: absolute;   color: #fff; padding: 10px; text-align: left; z-index: 1;bottom: 0; font-size: var(--text-size-label2); right: 0;
    }

 
     .btnWrap .btn{padding: 0.8rem 1.1rem;min-width: unset;width: fit-content;font-size: 1rem;font-weight: inherit;line-height: 1.2;}

}



@media (max-width: 768px){
    ._template{
        .titWrap.m-taC *{width: 100% !important;}


        margin-top: var(--height-header);

        /* 스티키 탭 MO — pageDefault .tab > a(0.8rem 1.5rem) 오버라이드 */
        .contentslayout._template #pageNav > a {
            padding: 8px 20px !important;
            font-size: 14px !important;
            line-height: 1.3 !important;
        }

        .titWrap {gap: 10px;}
    
        section.top{
            .titWrap{padding: 30px;
                     align-items: center;}
            h2{font-size: 16px; font-weight: 600; margin: 0;}
            .date{font-size: 15px; font-weight: 500; margin: 0;}
            img{aspect-ratio: unset;}
        }

        /* .intro{
            .titWrap {display: flex; justify-content: center; align-items: center; }
        } */
        .benefits {
             li h6 {font-size: 16px !important;}
            li p, li h6 {text-align: left !important;border-top: none;padding-top: 0; line-height: 1.4;}
    
           
      
        }

        .notices 
        {   
 
            .accordionBtn{
                font-size: 13px;
                margin-bottom: 10px;
             
            }
            .noticeList {
               
                li{font-size: 12px; }
                li .title{  font-size: 12px;}
  
            }
            &.is-open{
                .noticeList{ gap: 10px; }
 
            }
            
        }
        .bodys{
  
 
           .conWrapper{display: flex; flex-direction: column; gap: 0;
           
               .txtWrap{ gap: 10px; display: flex; flex-direction: column;
                   *{color: inherit;}
                   .txtBox{padding: 20px 0;    font-size: 13.5px;}
     
                   }
                   .swipergallery{
                    --gallery-gap: 4px;
    
               
              
                }
                .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 0 !important;}
   
             
           }
          
       }

        .products{
            .ec-base-product .-grid.-normal{
                display: grid;
                grid-template-columns: repeat(2, 1fr) !important;
                width: 100%;
                gap: 20px 4px !important;
            }
            .conWrapper.collection-intro-wrap {
                flex-direction: column !important;
                gap: 0;
                margin-bottom: 24px;
                padding:0;
                width: calc(100% - var(--spacing-page-side)*2);
            }
            .collection-intro-wrap .imgWrap {
                flex: none;
                width: 100%;
                max-width: unset;
            }
            .collection-intro-wrap .imgWrap img{
                aspect-ratio:2/1
            }
            .collection-intro-wrap .txtWrap {
                padding-left: 0;
                padding: 20px;
       
            }
        .collection-intro-wrap .txtWrap div:not(:has(>b)){
            
            font-size: 13px;
        }
        }

        .relateds{
            .conWrapper{gap: 4px;}
            .conWrapper + .conWrapper{margin-top: 10px;   }
            .brandB .btnWrap {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .brandB.conWrapper:has(> .btnWrap + .btnWrap) {
                display: flex;
                flex-direction: column;
            }
        }

        .journals .swipergallery { padding-bottom: 24px; overflow: visible !important;}
        .journals .promo-jn-card { gap: 8px; }
        .journals .promo-jn-card__title,
        .journals .promo-jn-card__title span { font-size: 13px !important; }
            .btn_bnr{  padding: 1rem 1.2rem; font-size: var(--text-size-caption2);
                 strong{font-size: var(--text-size-label2);}
            }


        .store {
            .btnWrap{margin: 0; padding: 0 16px !important; justify-content: flex-start;}
         .btnWrap .btn  {margin: 0; padding: 9px 40px; margin-bottom: 20px; font-size: 14px !important; max-width: unset !important ; min-width: unset !important; width: fit-content !important;}

        }
       


    }


    
}
@media (max-width: 480px){

    .benefits {
        li {flex-direction: column !important; gap: 20px;}

      
 
   }
}