/*!* CSS 레이어 순서 정의 *!*/
/*@layer reset, token, base, layout, component, utility, animation, override;*/

/* CSS 파일 import */
@import url("./m_reset.css");
@import url("./m_token.css");
@import url("./m_common.css");
@import url("./m_layout.css");
@import url("./m_component.css?ver=260401_1");
@import url("./m_utility.css?ver=260323");
@import url("./m_animation.css?ver=260323");
@import url("./m_override.css");


/* m_shop_home.html 설정 시작 */
.m-shop-home {
    margin-top: 150px;

    & .product-container.double {
        gap: 10px 20px;

        & .product {
        }
    }

    /* ~를 위한 인기상품 */
    & .section--popular-product {
        margin-top: 50px;

    }

    & .section--store-nearby {
        /*margin-top: 50px;*/
        padding: 0 15px;
    }

    & .section--category-ranking {
        margin-top: 50px;
        padding: 0 15px;

        & .title-container {
            padding: 0;

            button {
                right: 0;
            }
        }

        & .product-container--horizontal {
            padding: 0;
        }
    }


    & .section--swiper2 {
        margin-top: 50px;

        .banner.full {
            height: unset;
        }

        a {
            display: block;
            inset: 0;
        }
    }

    & .section--swiper3 {
        margin-top: 50px;
    }


    .section--promotion-main {

        & .banner.full.promotion {
            aspect-ratio: unset;
            gap: 5px;
        }

        & .swiper-pagination--promotion-main {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }

    & .section--popular-brand {
        & .title-container {

        }

        .category-container {
            padding: 0;
        }

        .swiper-button-next {
            top: min(28vw, 240px);
            right: 5px!important;
        }

        .swiper-button-prev {
            top: min(28vw, 240px);
            left: -5px!important;
        }

        /* 스와이퍼 네비게이션 아이콘 커스텀 */
        .swiper-navigation-icon {
            width: 20px;
            height: 20px;
            color: #fff;
        }

        & .product-container--horizontal {
            padding: 0 15px;
        }

        & .button-container--bottom {
            margin-bottom: 10px;

            & .button--pill {
                width: 100%;
                height: 42px;
                color: #50585F;
                line-height: 42px;
                border-color: #dadde0;
            }
        }

        .badge--promotion {
            right: 0;
            left: unset;
        }

        .badge__item {
            border-radius: 0 5px 0 0;
        }
    }
}

.main-banner {
    position: relative;
    width: 100%;
    height: 100vw;
    max-height: 900px;
    padding: clamp(15px,3vw, 25px) 0 clamp(20px,3vw, 35px);
    overflow-x: hidden;
}

/* 쇼핑몰 비주얼 영역 업데이트 */
.main-banner .swiper-slide {
    position: relative;
    transform-origin: center;
    transform: scale(0.89, 0.792) !important;
    opacity: 0; /* scale 지정 때문에 초기 슬라이드 딸깍거림 방지 위해 추가 */

    & a {
        width: 100%;
        height: 100%;
        display: flex;

        &:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 40px;
            background: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent 50%);
        }
    }
}

/* Swiper 준비된 이후에만 애니메이션 켜기 */
.main-banner.is-ready .swiper-slide {
    transition: transform 0.3s ease;
    opacity: 1; /* scale 지정 때문에 초기 슬라이드 딸깍거림 방지 위해 추가 */
}

.main-banner .swiper-slide-active {
    transform: scale(1) !important;
}

.main-banner .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}

.main-banner .swiper-slide .text-container {
    position: absolute;
    bottom: clamp(40px , 10vw ,90px);
    left: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(15px,2vw, 20px);
    font-size: clamp(15px, 3vw, 30px);
    line-height: 1.2;
    color: #fff;
    transform: translateX(-50%);
    z-index: 2;
}

.main-banner .swiper-slide .text-container .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(25px, 5vw, 40px);
    line-height: 1.2;
    font-weight: 700;
}

.main-banner__index-container {
    position: absolute;
    bottom: clamp(30px , 8vw , 50px);
    left: 50%;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: min(20px,3.2vw);
    line-height: 1.1;
    color: #fff;
    transform: translateX(-50%);
    z-index: 2;
}

/* 상품영역 설정 시작 */
.category-container {
    width: 100%;
    max-width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    white-space: nowrap;
    background-color: #fff;
    padding: 0 15px;
    overflow-x: auto;
    transition: box-shadow 0.3s ease-in-out;
    z-index: 2;
}

.category-container::-webkit-scrollbar {
    display: none;
}

.product-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    isolation: isolate;
    z-index: 0;
}

.product-container--wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    overflow-x: unset;
}

.product-container::-webkit-scrollbar {
    display: none;
}

.product-container .product {
    width: 140px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-container .product .img-container {
    container-type: inline-size;
    container-name: product-image-container;
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    isolation: isolate;
    z-index: 0;
}

/* 기본적으로 상품 이미지는 정사각형 */
.product-container .product .img-container > img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-main);
}

/* 제품 이미지 로딩에 문제 생겼을 때 img-container 배경 설정 */
.product-container .product .img-container > img[src=""],
.product-container .product .img-container > img:not([src]) {
    opacity: 0;
}

.product-container .product .img-container:has(img[src=""]),
.product-container .product .img-container:has(img:not([src])),
.product-container .product .img-container:not(:has(img)) {
    background: url("/shop/common/image/mobile/image-empty-state-product.svg") center no-repeat;
    background-size: cover;
}

.product-container .product .info-container {
    height: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .flag-container {
        height: 17px;
        flex-shrink: 0;
    }
}

/* 12.14. grid-layout 변경 버튼 추가하며, 텍스트 요소들 묶을 컨테이너 필요해서 작성 -clover */
.product-container .product .text-container {
    width: 100%;
    height: calc(100% - 36px - 8px); /* icon-container 높이, info-container gap 뺴준 값 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.product-container .product .info-container .name {
    display: -webkit-box;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-container .product .info-container .price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.product-container .product .info-container .price .original {
    font-size: 11px;
    line-height: 13px;
    color: #b2b8be;
    text-decoration: line-through;
}

.product-container .product .info-container .price .discount {
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--color-black-main);
}
.product-container .product .info-container .price .discount .rate {
    color: #ff5753;
}

.product-container .product .info-container .rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 13px;
    color: #99a1a8;
}
.product-container .product .info-container .rating .icon {
    width: 8px;
    height: 8px;
    display: inline-block;
    background: url("/shop/common/image/icon/icon-star-grey-8x8.webp") center center no-repeat;
    background-size: contain;
    margin-bottom: 2px;
}

.product-container .product .icon-container {
    display: flex;
    transform: translateY(-8px);
}


.product-container .product .icon-container button {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-container .product .icon-container button span {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain!important;
}

.product-container .product .icon-container .heart {
    background: url("/shop/common/image/icon/icon-heart-darkgrey-16x16.svg") center center no-repeat;
}

.product-container .product .icon-container .heart.active {
    background: url("/shop/common/image/icon/icon-heart-active-16x16.webp") center center no-repeat;
    animation: popup 1s ease-in-out;
}

.product-container .product .icon-container .cart {
    background: url("/shop/common/image/icon/icon-cart-grey.svg") center center no-repeat;
}

.product-container .view-more {
    width: 94px;
    min-width: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #99a1a8;
    margin-left: 20px;
}

.product-container .view-more button {
    width: 100%;
    height: 100%;
}

.product-container .view-more button .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url("/shop/common/image/icon/icon-arrow-right.svg") center center no-repeat;
    background-size: contain;
}

/* 한 행에 표시할 제품 수 설정 기능 (Grid 모드) 시작 25.12.12. -clover */
/* 그리드 모드 설정 시작 */
.product-container.product-container--grid {
    /* 기본값 3개 */
    --product-columns: 3;
    --product-gap: 10px;
    display: grid;
    /* 실제 열 갯수 제어*/
    grid-template-columns: repeat(var(--product-columns), minmax(0, 1fr));

    align-items: stretch;
    gap: var(--product-gap);
    overflow-x: unset;

    & .product {
        width: 100%;
        min-width: unset;  /* product에 기본적으로 적용된 140px min-width 제거 */
        /* Grid stretch: 동일 행(row) 카드 높이 동기화를 위해 height:100%를 내부까지 전달 */
        height: 100%;

        /* Grid stretch: 동일 행(row) 카드 높이 동기화를 위해 height:100%를 내부까지 전달 */
        & .info-container {
            height: 100%;
        }

        /* Grid stretch: 동일 행(row) 카드 높이 동기화를 위해 height:100%를 내부까지 전달 */
        & .text-container {
            height: 100%;
        }
    }

    /* 결과 없을 때 모든 열 차지하도록 */
    & .empty-state {
        grid-column: 1 / -1;  /* 첫 번째 열부터 마지막 열까지 */
    }
}
/* 그리드 모드 설정 끝 */

/* 그리드 - info-conatiner를 없앤 compact 레이아웃 설정 시작 */
.product-container.product-container--compact {
    & .info-container {
        display: none;
    }
}
/* 그리드 - info-conatiner를 없앤 compact 레이아웃 설정 끝 */

/* 수직방향 프로덕트 컨테이너를 수평방향으로 변경 레이아웃 설정 시작 */
.product-container.product-container--grid-horizon-list {
    & .product {
        flex-direction: row;
        align-items: center;

        & .img-container {width: 105px; aspect-ratio: 1;}
    }

    & .info-container {
        width: calc(100% - 105px - 14px); /*  */
        height: unset!important;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        column-gap: 8px;
        row-gap: 8px;
        align-content: start;

        & .text-container {
            height: unset;
            align-items: flex-start;
        }

        /* grid-area 선언 */
        & .name {
            grid-column: 1;
            text-align: left;
        }

        & .price {
            grid-column: 1;
            justify-content: flex-end;
            align-items: flex-start;
        }

        & .flag-container {
            grid-column: 1;
        }

        & .rating {
            grid-column: 1;
            justify-content: flex-start;

            &:not(:has(*)) {display: none;}
        }

        & .icon-container {
            grid-column: 2;
            grid-row: 1;
            display: flex;
            flex-direction: column;
            transform: unset;
        }
    }

    /* m_store_view.html 같이 하단에 재고량 인디케이터가 있는 경우, 제품 정렬방식 가로형일 때 max-width 설정 */
    & .button--stock-indicator {
        max-width: 240px;
    }


}
/* 수직방향 프로덕트 컨테이너를 수평방향으로 변경 레이아웃 설정 끝 */

/* 한 행에 표시할 제품 수 설정 기능 (Grid 모드) 끝 25.12.12. -clover */

/* 가로형 제품 css 리뉴얼 시작 */
.product-container--horizontal {
    --size-image: 105px;
    --height-info-container: 94px;

    display: flex;
    flex-direction: column;
    gap: 15px;

    & .product--horizontal {
        width: 100%;
        display: flex;
        align-items: center;
        max-width: unset;
        gap: 15px;
    }

    & .img-container {
        container-type: inline-size;
        container-name: product-image-container;
        position: relative;
        width: var(--size-image);
        height: var(--size-image);

        /* img에 src가 없거나 빈 값일 때만 배경 표시 */
        &:has(img:not([src])),
        &:has(img[src=""]),
        &:not(:has(img)) {
            background: url("/shop/common/image/image-empty-state-product.svg") center no-repeat;
            background-size: contain;

            img {
                display: none;
            }
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-main);
        }
    }

    & .info-container {
        width: calc(100% - 120px);
        height: var(--height-info-container);
        display: flex;
        justify-content: space-between;
    }

    & .text-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;

        & .name {
            max-height: 32px;
            display: -webkit-box;
            font-size: 13px;
            line-height: 16px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        & .price {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            align-items: center;
            gap: 5px;

            & .original {
                font-size: 11px;
                line-height: 13px;
                color: var(--color-light-grey);
                text-decoration: line-through;
            }

            & .discount {
                font-size: 14px;
                font-weight: 600;
                line-height: 17px;
                color: var(--color-black-main);

                & .rate {
                    color: #ff5753;
                }
            }
        }

        & .rating {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            line-height: 13px;
            color: var(--color-light-grey);

            & .icon {
                width: 8px;
                height: 8px;
                display: inline-block;
                background: url("/shop/common/image/mobile/icon/icon-star-grey-8x8.webp") center center no-repeat;
                background-size: contain;
                margin-bottom: 2px;
            }
        }
    }

    & .icon-container {
        display: flex;
        flex-direction: column;
        justify-content: center;

        button {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            & span {
                width: 16px;
                height: 16px;
                display: inline-block;
            }

            & .heart {
                background: url("/shop/common/image/mobile/icon/icon-heart-darkgrey-16x16.svg") center no-repeat;
                background-size: contain;

                &.active {
                    background: url("/shop/common/image/mobile/icon/icon-heart-active-16x16.webp") center center no-repeat;
                    background-size: contain;
                    animation: popup 1s ease-in-out;
                }
            }

            & .cart {
                background: url("/shop/common/image/mobile/icon/icon-cart-grey.svg") center no-repeat;
                background-size: contain;
            }
        }
    }
}
/* 가로형 제품 css 리뉴얼 끝 */

/* 에디터 픽 섹션 */
.m-shop-home .section--editor-pick {

    & .title-container--main {

    }

    & .video-list--editor-pick {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    & .video__item {
        position: relative;
        z-index: 1;

        & .video-container {
            position: relative;
            width: clamp(300px, 65vw, 500px);
            aspect-ratio: 16/9;
            border-radius: var(--radius-main) var(--radius-main) 0 0;
            overflow: hidden;
            z-index: 1;
        }

        & iframe {
            position: relative;
            z-index: 0;
        }

    }


    & .button--related-product {
        height: 44px;
        justify-content: space-between;
        font-size: 12px;
        border-radius: 0 0 5px 5px;
        background: #5B584E;
        z-index: 2;
    }
}

/* 2행 배치 */
.product-container.double {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; /* 왼→오로 “열”을 계속 생성하면서 채움 */
    grid-auto-columns: 140px; /* 각 열(=카드 폭) */
    gap: 20px;
}

.product-container.double .product {
    height: unset;
}

.product-container.double .img-container {
    aspect-ratio: 1;
}

.product-container.double .info-container {
    height: 100%; /* grid 높이 상속 */
}

.product-container.double .price {
    margin-top: auto;
}
/* 상품영역 설정 끝 */

.index-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 13px;
    margin-top: 20px;
}

.index-container .btn {
    width: 60px;
    height: 16px;
}

.index-container .btn.prev {
    background: url("/shop/common/image/icon/icon-prev-16x16.webp") center center no-repeat;
    background-size: contain;
}
.index-container .btn.next {
    background: url("/shop/common/image/icon/icon-next-16x16.webp") center center no-repeat;
    background-size: contain;
}

.index-container .index {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b2b8be;
}

.index-container .index .current {
    color: #50585f;
}

.banner {
    width: 100%;
}

/* 띠배너 설정 시작 */
.banner.full {
    aspect-ratio: 5/1;
    border-radius: 4px;

    a {
        display: inline-block;
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /* 쇼핑몰 pc버전 전환 완료 후 반영해야하는 내용 */
    /*@media (width > 1024px) {*/
    /*    aspect-ratio: 10/1;*/
    /*}*/
}

[class*="banner--thin-solid"] {
    overflow: hidden;

    .swiper-slide {
        width: 100%;
        aspect-ratio: 100/18.4;
    }

    .banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .swiper-button-next {
        right: -5px!important;
    }

    .swiper-button-prev {
        left: -5px!important;
    }

    /* 스와이퍼 네비게이션 아이콘 커스텀 */
    .swiper-navigation-icon {
        width: 20px;
        height: 20px;
        color: #fff;
    }
}

[class*="pagination--thin-solid"] {
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .swiper-pagination-bullet {
        background-color: #000;
    }
}
/* 띠배너 설정 끝 */

.banner.half {
    height: 36vw;
    display: flex;
    gap: 15px;
    border-radius: 8px;
}

.banner .img-container {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.banner .img-container .text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
    z-index: 2;
}

.banner .img-container .text.first {
    bottom: 60px;
    font-size: 20px;
    font-weight: 700;
}

.banner .img-container .text.second {
    bottom: 30px;
    font-size: 13px;
    font-weight: 400;
}

.banner.full.promotion {
    height: unset;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: unset;
}

.banner.full.promotion .img-container {
    height: 40vw;
    border-radius: 4px;
    overflow: hidden;
}

.banner.full.promotion .img-container .text-container {
    width: unset;
    align-items: flex-start;
    gap: 5px;
    color: var(--color-black-main);
    text-align: unset;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

.banner.full.promotion .img-container .text.first {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.banner.half .img-container {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.banner.half .img-container:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), rgba(19, 21, 24, 0) 50%, rgba(19, 21, 24, .4));
    z-index: 1;
}

.banner img {
    width: 100%;
    object-fit: cover;
}

.banner.half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 각종 swiper 설정 시작 */

.swiper2 {

}
.swiper2-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.swiper2-pagination .swiper-pagination-bullet-active {
    background-color: #000;
}

/* 메인페이지 swiper3 width 100% 배너 스와이퍼 */
.swiper3--banner-full {
    max-height: 150px;
    overflow: hidden;

    a {
        display: inline-block;
        width: 100%;
        height: 100%;

        img {
            border-radius: 4px;
        }
    }
}

.swiper3--banner-full-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* 메인페이지 swiper pagination bullet 커스텀 시작 */
.m-shop-home .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
}
.m-shop-home .swiper-pagination-bullet-active {
    width: 16px;
    border-radius: 100px;
    background-color: #21242a;
}
/* 메인페이지 swiper pagination bullet 커스텀 끝 */

.swiper-category-ranking {
    width: 100%;
    .badge--promotion {
        top: 0;
        left: unset;
        right: 0;
    }

    .badge__item {
        border-radius: 0 5px 0 0;
    }
}

.swiper-event {
    margin: 0!important;
}

/* 각종 swiper 설정 끝 */

.curation {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.curation .title-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 메인페이지 tap 설정 시작 */
.tab__group--main-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    & .tab__list--main-page {
        width: 100%;
        display: flex;
        justify-content: center;
        white-space: nowrap;
        gap: 44px;

        /* scroll-x 시 좌,우측 여백 설정차 지정. */
        &:before {
            content: '';
            width: 4px;
            height: 1px;
            display: block;
            flex-shrink: 0;
        }

        &:after {
            content: '';
            width: 4px;
            height: 1px;
            display: block;
            flex-shrink: 0;
        }

        @media (width <= 768px) {
            gap: 12px;
        }

        @media (width <= 590px) {
            justify-content: unset;
        }
    }

    .tab__item--main-page {
        width: 60px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    & .tab__image-container--main-page {
        width: 56px;
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .03);

        & .tab__image--main-page {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .tab__text-container--main-page {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    & .tab__text--main-page {
        font-size: 11px;
        font-weight: 400;
        line-height: 13px;
        color: #3a3e45;
        word-break: break-word;
        text-wrap: wrap;
    }

    @media (min-width: 590px) and (max-width: 834px) {
        & .tab__list--main-page {
            justify-content: center;
            gap: 24px;
        }

        & .tab__item--main-page:first-of-type {
            margin: 0;
        }

        & .tab__item--main-page:last-of-type {
            margin: 0;
        }

        & .tab__item--main-page {
            /* 화면 양쪽 패딩(32px) gap 12px * 7번 보정 */
            /*width: calc((100% - 32px - 84px) / 8);*/
        }

        & .tab__image-container--main-page {
            width: 100%;
        }
    }
}

/* tap container 설정 끝 */

.curation .title-container .img-container {
    width: 100%;
    aspect-ratio: 578/350;
    border-radius: 4px;
    overflow: hidden;

    a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.curation .title-container .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.curation .title-container .text-container .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-black-main);

    & .text {
        text-align: center;
    }
}

/* 메인페이지 */
.m-shop-home .curation {
    & .title-container {
        & .text-container {
            & .wrapper {
                gap: 0;
            }
        }
    }
}

.curation .title-container .text-container > .text {
    font-size: 13px;
    color: var(--color-black-main);
}

/* m_shop_home.html 설정 끝 */

/* today_special.html 설정 시작 */
.today-special {
    margin-top: 120px;
}

.today-special > .title-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 15px;
}

.today-special > .title-container h2 span {
    display: inline-block;
    position: relative;
}
.today-special > .title-container h2 span:before {
    content: '';
    width: calc(100% + 8px);
    height: 13px;
    position: absolute;
    bottom: 0;
    left: -4px;
    opacity: 0.25;
    background-color: #9ac75b;
}


.today-special .wrapper.special-price .btn-container .img-container {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}

.today-special .wrapper.special-price .btn-container .img-container img {
    width: 100%;
    object-fit: cover;
}

.today-special .wrapper.special-price .btn-container button {
    width: 100%;
    height: 60px;
    justify-content: flex-start;
    gap: 12px;
    position: relative;
}

.today-special .wrapper.special-price .btn-container .icon.angle.right {
    position: absolute;
    right: 16px;
}

.today-special .wrapper.today-special {
    gap: 0;
    margin-top: 20px;
}

.today-special .wrapper.today-special > .title-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.today-special .wrapper.today-special > .title-container .btn-container {
    display: flex;
    gap: 15px;
}

.today-special .wrapper.today-special > .title-container button {
    display: flex;
    align-items: center;
    position: unset;
}

.today-special .wrapper.today-special > .title-container button.active {
    color: var(--color-black-main);
}

.today-special .wrapper.today-special > .title-container button .icon.check {
    display: none;
}

.today-special .wrapper.today-special > .title-container button.active .icon.check {
    display: inline-block;
}

.today-special .wrapper.today-special .product-container {
    flex-wrap: wrap;
    overflow-x: unset;
}

.today-special .wrapper.today-special .product-container .product {
    width: calc(25% - 8px);
    height: unset;
}

.today-special .wrapper.today-special .product-container .product .img-container {
    width: 100%;
    height: unset;
}
/* today_special.html 설정 끝 */

/* m_shop_ranking.html 시작 */
.main-contents.ranking {
    margin-top: 220px;

    & header {
        padding: 0;

        & .header-inner {
            padding: 0 15px;
        }
    }

    /* 페이지 상단 정렬/그리드 레이아웃 변경 버튼 컨테이너 */
    .sorting-container {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .badge--promotion {
        left: unset;
        right: 0;

        .badge__item {
            border-radius: 0 5px 0 0;
        }
    }
}
.main-contents.ranking > section {
    margin: 0;
}

.main-contents.ranking .ranking-type {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    color: #666;
    border-bottom: .5px solid #dadde0;
}

.main-contents.ranking .ranking-type .text {
    font-size: 11px;
}

.main-contents.ranking .ranking-type .btn-container {
    gap: 20px;
}

.main-contents.ranking .ranking-type .btn-container button.active {
    font-weight: 700;
    color: var(--color-black-main);
}

.main-contents.ranking section {
    gap: 10px;
}

.main-contents.ranking .category-container {
    height: 50px;

}

.filter-btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-btn-container > .text {
    color: #99A1A8;
}

.filter-btn-container .btn-container {
    display: flex;
    gap: 3px;
}
.filter-btn-container .btn-container button {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    padding: 7px;
}

.main-contents.ranking .product-container {
    flex-wrap: wrap;
    overflow-x: unset;
}


.popup.filter {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    background-color: unset;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: 3;
}

.popup.filter .filter-option {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    transform: translateY(100%);
    pointer-events: auto;
}


.popup.filter.active {
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: auto;
}

.popup.filter.active .filter-option {
    transform: translateY(0);
}

.popup.filter .filter-option .category-container {
    gap: 4px;
    margin: 0;
    border-bottom: 1px solid #E5E7EA;
}

.popup.filter .filter-option .category-container .category {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #c9cdd2;
    overflow: visible;
}

.popup.filter .filter-option .category-container .category.active {
    color: var(--color-black-main);
}

.popup.filter .filter-option .category-container .category.active button {
    font-weight: 700;
}

.popup.filter .filter-option .category-container .category button {
    padding: 16px;
}

.popup.filter .filter-option .sub-category {
    display: none;
    flex-direction: column;
    font-size: 14px;
}

.popup.filter .filter-option .sub-category.active {
    display: flex;
}

.popup.filter .filter-option .sub-category li {
    border-bottom: 1px solid #E5E7EA;
}


.popup.filter .filter-option .sub-category li button {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.popup.filter .filter-option .sub-category li button .icon.check {
    display: none;
}

.popup.filter .filter-option .sub-category li button.active {
    font-weight: 700;
}

.popup.filter .filter-option .sub-category li button.active .icon.check {
    display: inline-block;
}

.popup.filter .bottom-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 16px;
}

.popup.filter .bottom-container .btn-container.indicator {
    display: flex;
    gap: 8px;
}

.popup.filter .bottom-container .btn-container.indicator .btn.common {
    display: flex;
    gap: 5px;
}

.popup.filter .bottom-container .btn-container.indicator .btn.common .icon.close {
    display: none;
}

.popup.filter .bottom-container .btn-container.indicator .btn.common.active {
    color: var(--color-black-main);
    padding: 10px 13px 10px 16px;
    border: 1px solid #131518;
    background-color: #fff;
}

.popup.filter .bottom-container .btn-container.indicator .btn.common.active .icon.close {
    display: inline-block;
}

.popup.filter .bottom-container .btn-container.action {
    display: flex;
    justify-content: space-between;
}
.popup.filter .bottom-container .btn-container .btn.refresh {
    width: 84px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 16px;
}

.popup.filter .bottom-container .btn-container .btn.square.black {
    width: 790px;
}
/* m_shop_ranking.html 끝 */

/* m_shop_ranking_brand.html 시작 */
.m-shop-ranking-brand {

    .title-container--main {
        & .title--main {
            font-size: 16px;
        }

        & .badge--ranking {
            width: 22px;
            height: 22px;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            background-color: var(--color-black-main);
            border-radius: var(--radius-main);
            margin-right: 7px;
        }

        & .brand-image-container {
            --size-brand-image: 45px;
            width: var(--size-brand-image);
            height: var(--size-brand-image);

            & .brand-image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        & .button--like {
            flex-direction: column;
            align-items: center;
            font-size: 9px;
            color: #666;

            &.active {
                color: #ff5753;
            }
        }
    }

}
/* m_shop_ranking_brand.html 끝 */

/* m_category_list.html 설정 시작 */
.m-category-list {
    margin-top: 50px;

    .logo-container {
        translate: 0 2px;
    }
}

.main-contents.category section.wrapper.header {
    width: 100%;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #e5e7ea;
    z-index: 2;
}

.wrapper.header .logo-container {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapper.header .logo-container .btn.search {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.wrapper.header .menu-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

.wrapper.header .menu-container .menu {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper.header .menu-container .menu a {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #757d86;
    border-bottom: 2px solid transparent;
}

.wrapper.header .menu-container .menu.active a {
    font-weight: 700;
    color: var(--color-black-main);
    border-bottom: 2px solid #1b1d1f;
    padding: 0 5px;
}

.main-contents.category section.wrapper.bottom {
    flex-direction: row;
    gap: 0;
    /*margin-top: 100px;*/
    padding: 0;
}

.main-contents.category section.wrapper.bottom .category-index {
    min-height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    background-color: #F4F5F7FF;
    padding-bottom: 50px;
}

.main-contents.category section.wrapper.bottom .category-index .index {

}

.main-contents.category section.wrapper.bottom .category-index .index.active {
    background-color: #fff;
}

.main-contents.category section.wrapper.bottom .category-index .index button {
    width: 130px;
    font-size: 13px;
    font-weight: 400;
    color: #757d86;
    text-align: left;
    padding: 12px 15px;
}

.main-contents.category section.wrapper.bottom .category-index .index.active button {
    font-weight: 700;
    color: var(--color-black-main);
}

.main-contents.category section.wrapper.bottom .sub-menu-container {
    width: calc(100% - 130px);
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    padding: 8px 15px 0;
    overflow-y: auto;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid #e5e7ea;
    padding: 20px 0 10px;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .title-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .title-container .img-container {
    width: 33px;
    height: 33px;
    border-radius: 10px;
    overflow: hidden;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .title-container .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .title-container .title {
    font-size: 15px;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .list-wrapper {
    display: flex;
    flex-direction: column;
}

.main-contents.category section.wrapper.bottom .sub-menu-container .sub-menu .list-wrapper .menu a {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-black-main);
    padding-left: 5px;
}
/* m_category_list.html 설정 끝 */

/* m_shop_brand.html 시작 */
.main-contents.m-shop-brand {
    margin-top: 170px;
}

.m-shop-brand {
    .title--main {
        font-size: 16px;
    }

    .category-container {
        padding: 0;
    }

    .brand-recommend {

        .swiper-button-next {
            right: 0;
        }

        .swiper-button-prev {
            left: 0;
        }

        /* 스와이퍼 네비게이션 아이콘 커스텀 */
        .swiper-navigation-icon {
            width: 20px;
            height: 20px;
            color: #fff;
        }
    }
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container a {
    width: 100%;
    aspect-ratio: 1125/681;
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(19, 21, 24, 0), rgba(19, 21, 24, .4));
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container .text-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    z-index: 1;
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container .text-container .name {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container .text-container .text {
    font-size: 12px;
    text-shadow: 0 0 4px rgba(0, 0, 0, .5);
}

.m-shop-brand section.wrapper.brand-recommend .brand-container .img-container .btn.heart {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}


.m-shop-brand .product-container .product {
    width: 150px;
    flex-shrink: 0;
}

/* 좋아요한 브랜드 목록 */
.m-shop-brand .product-container .product a {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.m-shop-brand .product-container .img-container {
    width: 100%;
    aspect-ratio: unset;
}

.m-shop-brand .product-container .img-container img {
    width: 100%;
    aspect-ratio: 1125 / 681;
    object-fit: cover;
}

.m-shop-brand .product-container .img-container:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-main);
    background: linear-gradient(180deg, rgba(19, 21, 24, 0), rgba(19, 21, 24, .4));
}

.m-shop-brand section.like-brand .product-container {
    & .product .img-container button {
        position: absolute;
        bottom: 5px;
        right: 8px;
        z-index: 1;
    }

    & .info-container {
        width: 100%;
        height: unset;

        & .text-container {
            width: 100%;
            height: unset;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
    }

    .brand-story {
        width: 100%;
        text-align: center;
        font-size: 11px;
        color: #757d86;
    }


}

.m-shop-brand section.like-brand .product-container .product .info-container .name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

/* 많은 사람들이 좋아하는 브랜드 */
.m-shop-brand .section--brand-popular .title-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.m-shop-brand .section--brand-popular .product {
    width: calc((100% - 10px) / 2);

    & .img-container {
        width: 100%;
        aspect-ratio: 1125 / 681;
    }

}

.m-shop-brand .input-category-outer-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 55px;
    padding-top:10px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    z-index: 1;

    & .input-container {
        padding-right: 46px;

        & input {
            width: 100%;
            height: 100%;
        }
    }
}

.m-shop-brand .brand-list {
    display:flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;

    .brand {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:not(:first-child) {
            border-top: 1px solid #eee;
            padding-top: 18px;
        }
    }

    .brand__link {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .brand__name {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .english {
            font-size: 12px;
            color: #888;
        }
    }

    .brand__image-container {
        width: 40px;
        aspect-ratio: 1;
        flex-shrink: 0;
        border: 1px solid #F2F2F2;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06);
    }

    /* img에 src가 없거나 빈 값일 때만 배경 표시 */
    .brand__image-container:has(img:not([src])),
    .brand__image-container:has(img[src=""]),
    .brand__image-container:not(:has(img)) {
        background: url("/shop/common/image/image-empty-state-brand-like.svg") center no-repeat;
        background-size: contain;
    }

    .brand__image {
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }

    .button--like {
        width: 36px;
        height: 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 9px;
        color: #666;
    }
}

.filter-option.brand .sub-category li {
    border-bottom: none!important;
}
/* m_shop_brand.html 끝 */

/* m_my_page.html 설정 시작 */
.main-contents.my-page {
    margin-top: 50px;
}

.main-contents.my-page section.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dadde0;
    margin: 0;
    background-color: #fff;
    z-index: 1;
}

.main-contents.my-page section.header button {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-2px);
}

.main-contents.my-page section.header button .icon.cart {
    position: relative;
}

.main-contents.my-page section.header button .icon.cart .icon.count {
    position: absolute;
    right: -7px;
    top: -4px;
}

.main-contents.my-page section.user-info {
    margin-top: 50px;
}

.main-contents.my-page section.user-info .info-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;

    & .link--membership {
        display: flex;
        align-items: center;
        color: var(--color-highlight);

        & .angle.right {
            margin-bottom: 1px;
        }
    }
}

.main-contents.my-page section.user-info .info-container .user-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-contents.my-page section.user-info .info-container .user-detail .nickname {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: var(--color-black-main);
}

.main-contents.my-page section.user-info .info-container .user-detail .grade {
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 17px;
    color: #cfd31a;
}

.main-contents.my-page section.user-info .info-container .btn.profile {
    padding: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    color: #50585f;
    border-radius: 19px;
    background-color: #f6f7f9;
}

.main-contents.my-page section.user-info .membership-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.main-contents.my-page section.user-info .membership-container li {
    width: 25%;
}

.main-contents.my-page section.user-info .membership-container li a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.main-contents.my-page section.user-info .membership-container li a .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-black-main);
}

.main-contents.my-page section.user-info .btn-container button {
    width: 100%;
    height: 40px;
    border: 1px solid #f0f1f4;
}

.main-contents.my-page  section.delivery-info {
    margin-top: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 8px solid #f6f7f9;
    border-bottom: 8px solid #f6f7f9;
}

.main-contents.my-page  section.delivery-info .title-container button {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--color-black-main);
}

.main-contents.my-page  section.delivery-info .step-container {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.main-contents.my-page  section.delivery-info .step-container .step {
    width: 20%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.main-contents.my-page  section.delivery-info .step-container .step:not(:last-child):after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    display: inline-block;
    top: 6px;
    right: -7px;
    background: url("/shop/common/image/icon/icon-angle-right-grey.svg") center center no-repeat;
    background-size: contain;
}

.main-contents.my-page  section.delivery-info .step-container .step.active:after {
    background: url("/shop/common/image/icon/icon-angle-right-black.svg") center center no-repeat;
    background-size: contain;
}

.main-contents.my-page  section.delivery-info .step-container .step .number {
    font-size: 24px;
    font-weight: 600;
    color: #dadde0;
}

.main-contents.my-page  section.delivery-info .step-container .step.active .number {
    color: #000;
}

.main-contents.my-page  section.delivery-info .step-container .step .text {
    font-size: 12px;
    font-weight: 400;
    color: #99a1a8;
}

.main-contents.my-page section.delivery-info .step-container .step.active .text {
    color: #000;
}

.main-contents.my-page section.my-menu {
    padding: 20px 0 0 0;
    margin-top: 20px;
    border-top: 8px solid #f6f7f9;
}

.main-contents.my-page section.my-menu .category {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f0f1f4;
    padding: 0 15px 10px;
}

.main-contents.my-page section.my-menu .category .menu-container {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.main-contents.my-page section.my-menu .category .menu-container .menu a {
    width: 100%;
    display: flex;
    gap: 15px;
    padding: 15px 0;
}

.main-contents.my-page section.my-menu .category .menu-container .menu a .text-container {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    color: var(--color-black-main);
}

.main-contents.my-page section.my-menu .category .menu-container .menu a .text-container .text {
    font-size: 12px;
    color: #628ddf;
}

.main-contents.my-page section.my-menu .category.logout {
    border: none;
}

.main-contents.my-page section.my-menu .category.logout .menu-container {
    margin: 0;
}

.m-my-page {
    & .section--recent-order-history {
        margin-top: 20px;

        .product-container {
            gap: 10px;
        }

        & .product {
            width: clamp(108px, calc(100% - 20px) / 3, 300px);
            min-width: unset;
            flex-shrink: 0;
            gap: 8px;

            & .info-container {
                height: 54px;
                gap: 4px;

                .name {
                    font-size: 12px;
                }

                .rate {
                    font-size: 13px;
                }

                .number {
                    font-size: 13px;
                }
            }


        }

        & .empty-state {
            height: 88px;
            flex-direction: row;
            gap: 4px;
            color: #ccc;

            & .icon {
                width: 20px;
                height: 20px;
                background: url("/shop/common/image/mobile/icon/icon-order-delivery-history-ccc.svg") center no-repeat;
            }
        }
    }
}
/* m_my_page.html 설정 끝 */

/* m_customer_service_notice.html 시작 */
.m-customer-service-notice {
    margin-top: 50px;
}

.main-contents.notice section.header {
    width: 100%;
    height: 50px;
    justify-content: center;
    position: fixed;
    top: 0;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #dadde0;
    z-index: 1;
}

.main-contents.notice section.header .title-container {
    justify-content: center;
}

.main-contents.notice section.header .title-container button {
    width: 40px;
    left: 0;
}

.main-contents.notice section.notice .title-container select {
    width: 100%;
    height: var(--height-form-element);
    padding: 0 20px;
    color: #292c33;
    border: 1px solid #131518;
    border-radius: var(--radius-main);
    background: url("/shop/common/image/icon/icon-angle-down-black.svg") right 7px center no-repeat;
    margin-top: 8px;
}

.main-contents.notice section.notice .title-container select:focus {
    border-color: #628ddf;
}

.main-contents.notice section.notice .title-container select option {
    color: #292c33;
}

.main-contents.notice section.notice .notice-container {
    display: flex;
    flex-direction: column;
}

.main-contents.notice section.notice .notice-container .notice {
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.notice section.notice .notice-container .notice a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
}

.main-contents.notice section.notice .notice-container .notice .date {
    display: flex;
    gap: 5px;
    font-size: 12px;
    color: #757d86;

    & .text {
        line-height: 17px;
    }
}

.main-contents.notice section.notice .notice-container .notice .title {
    font-size: 15px;
    font-weight: 400;
    color: #292c33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* m_customer_service_notice.html 끝 */

/* customer_service_notice_view.html 시작 */
.m-customer-service-notice-view {
    margin-top: 50px;
}

.main-contents.notice.view section.notice {
    padding: 0;
}
.main-contents.notice.view section.notice .notice.title {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 15px;
    overflow: visible;
}

.main-contents.notice.view section.notice .notice-container .notice .title {
    white-space: unset;
    overflow: unset;
    text-overflow: unset;
}

.main-contents.notice.view section.notice .notice-container .notice.title .title h3 {
    font-size: 20px;
    color: #000;
}

.main-contents.notice.view section.notice .notice-container .notice-contents {
    color: #292c33;
    font-weight: 400;
    padding: 20px 0;
    margin: 0 15px;
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.notice.view section.notice .btn-container {
    display: flex;
    justify-content: center;
}

.main-contents.notice.view section.notice .btn-container button {
    width: 100px;
}
/* customer_service_notice_view.html 끝 */

/* m_category_view.html 시작 */
.main-contents.category-view {

    header {
        padding: 0;
    }

    & .header-inner.top {
        padding: 0 15px;

        .header__button-container--left {
            left: 15px;
        }

        .header__button-container--right {
            right: 15px;
            transform: translateY(-2px);
        }
    }

    & .header-inner.bottom {
        position: relative;
        gap: 15px;
        padding: 0 15px;

        &:not(:last-child) {
            border-bottom: 0.5px solid #dadde0;
        }
    }

    & .header__button-container--right {
        display: flex;

        & .btn.icon {
            width: 40px;
        }
    }

    .tab--pill {
        --color-tab-pill: var(--color-grey);

        height: 50px;
    }

    .tab__list--pill {
        align-items: center;
        padding: 0 15px;
    }

    .tab__item--pill {
        height: 32px;
        font-weight: 400;
    }

    & .product-container {
    }
}

.main-contents.category-view section.product-container .title-container {
    padding-top: 16px;

    & .grid-controller__item {
        top: unset;
    }
}

.main-contents.category-view section.product-container .title-container .button--filter-toggle {
    position: unset;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #777;
}

.main-contents.category-view section.product-container .product-container {
    flex-wrap: wrap;
    overflow-x: unset;
}


.main-contents.category-view section.product-container .product-container .product .info-container .name {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-black-main);
}

.main-contents.category-view section.product-container .product-container .product .info-container .name .tag {
    font-size: 13px;
    font-weight: 700;
}

.main-contents.category-view section.product-container .product-container .product .info-container .name .icon.vertical-bar {
    transform: translateY(2px);
}
/* m_category_view.html 끝 */

/* m_brand_view.html 시작 */
.main-contents.m-brand-view {
    margin-top: 50px;

    & .header-inner.top {

        & .header__button-container--right {
            & button {
                width: 40px;
                transform: translateY(-2px);
            }
        }

    }

    & section.video {
        padding: 0;
        margin-top: 50px;

        & .title-container {
            padding: 0 15px;
        }
    }

    & .title--main {
        font-size: 16px;
    }
}

.m-brand-view .brand__like-info {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #757d86;
}

/* 비디오 영역 */
.m-brand-view .video-container {
    position: relative;
    width: 100%;

    .video-overlay {
        position: absolute;
        inset: 0;
        cursor: pointer;
    }
}

.main-contents.brand-view .brand-banner .img-container {
    width: 100%;
    aspect-ratio: 1125/681;
    /* 디자이너 요청으로 화면 비율 양 옆 조금 잘리게 설정 */
}

.main-contents.brand-view .brand-banner .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.brand-view .brand-banner .brand-banner__text-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.main-contents.brand-view .brand-banner .brand-banner__text-container .title {
    display: inline-block;
    align-self: flex-start; /* 개별 요소를 왼쪽 정렬 */
    font-size: 22px;
    padding: 15px 15px 0;
    background-color: #fff;
}

.main-contents.brand-view .brand-banner .brand-banner__text-container .text {
    color: #50585f;
    padding: 0 15px;
}

.main-contents.brand-view section.curation .curation {
    width: 100%;
}

.main-contents.brand-view section.curation .curation .product-container {
    width: 100%;
    overflow-x: unset;
    gap: unset;
}

.main-contents.brand-view section.curation .curation .product {
    width: 100%;
}

.main-contents.brand-view section.curation .curation .product .info-container {
    height: unset;
}

.main-contents.brand-view section.curation .curation .product .info-container .name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black-main);
}

.main-contents.brand-view section.curation .curation .product .info-container .text-container {
    color: #50585f;
}

.swiper-control-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.swiper-control-container button {
    width: 40px;
}

.custom-pagination {
    width: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b2b8be;
}

.custom-pagination .page {
    width: 20px;
    text-align: center;
}

.custom-pagination .current {
    color: #50585f;
}

.main-contents.brand-view section.product-horizontal {

    & .product-container {
        gap: 0;
    }

    & .product:not(:first-child) {
        margin-left: 15px;
    }
}

.main-contents.brand-view section.product-horizontal .info-container {
    height: 165px;
}

.main-contents.brand-view section.product-horizontal .info-container .text-container {
    justify-content: center;
}

.main-contents.brand-view .tap-container {
    gap: 20px;
}

.main-contents.brand-view .tap-container .tap {
    width: max-content;
    font-size: 16px;
    color: #757d86;
    min-width: unset;
}

.main-contents.brand-view .tap-container .tap.active {
    color: var(--color-black-main);
}

.main-contents.brand-view .tap-container .tap.active button {
    font-weight: 700;
}

.main-contents.brand-view section.product-horizontal .btn-container button {
    width: 100%;
    height: 30px;
    font-size: 12px;
    margin: 0 15px;
}

.main-contents.brand-view section.brand-product {
    padding: 0;

    /* 카테고리 컨테이너 sticky 위치 조정 */
    .category-container--brand-view {
        top: 0;
        transition: top 0.3s ease-out;
    }
}

.main-contents.brand-view section.brand-product .title-container {
    padding: 0 15px;
}

/* 상단에 붙을 때 box-shadow 부여, brand-view 페이지에서만 작동하게 */
.category-container.is-sticky {
    position: sticky;
    top: 49px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10);
}

.main-contents.brand-view section.brand-product .filter-btn-container {
    padding: 0 15px;
}

.main-contents.brand-view section.brand-product .filter-btn-container .text {
    color: var(--color-black-main);
}

.main-contents.brand-view section.brand-product .filter-btn-container button {
    color: #757d86;
}

.main-contents.brand-view section.brand-product .product-container {
    flex-wrap: wrap;
    padding: 0 15px;
    overflow-x: unset;
}
/* m_brand_view.html 끝 */

/* m_product_recent_list.html 설정 시작 */
.main-contents.history .header {

    .btn-container {
        transform: translateY(-2px);
    }
    button {
        width: 40px;
    }
}

.main-contents.history section.history {
    margin-top: 110px;
}

/* 좋아요 페이지 최근 본 상품 목록 텍스트 컨테이너 높이 조절 */
.m-product-recent-list .product--horizontal {
    & .info-container {
        align-items: center;
    }

    & .text-container {
        height: 76px;
    }
}

/* 사용자가 '편집' 버튼 눌렀을 때 비슷한 상품 추천 섹션 삭제 */
.m-product-recent-list .section--history-first.is-editing ~ section.similar-product {
    display: none;
}

.m-product-recent-list .section--history-second {
    margin-top: 16px;
}

.m-product-recent-list .section--similar-product {
    border-top: 10px solid #eee;
    border-bottom: 10px solid #eee;
    padding: 40px 15px 30px;
}

.main-contents.history section.similar-product .filter-btn-container .text-container {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 700;
}

.main-contents.history section.similar-product .filter-btn-container .btn-container {
    color: #99a1a8;
}

.main-contents.history section.similar-product .category-container button {
    display: flex;
    gap: 10px;
    padding: 10px 16px 10px 4px;
}

.main-contents.history section.similar-product .category-container button .img-container {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}

.main-contents.history section.similar-product .category-container button .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.history section.similar-product .category-container button .text {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* m_product_recent_list.html 설정 끝 */

/* m_my_page_like.html 시작 */
.main-contents.m-my-page-like {
    margin-top: 170px;
}

.main-contents.m-my-page-like section.product {
    gap: 10px;
}

/* 좋아요한 상품 갯수 텍스트, 전체삭제 버튼과 상품 리스트간 간격 조절  */
.main-contents.history.like .filter-btn-container {
    margin-bottom: -5px;
}

.main-contents.m-my-page-like .product--horizontal {
    & .info-container {
        height: 76px;
    }
}

.main-contents.m-my-page-like section.recommend {
    margin-top: 30px;
}

.main-contents.m-my-page-like section.recommend {
    & .info-container {
        height: 120px;
    }
}

/* m_my_page_like_brand.html 설정 시작 */
.main-contents.history.like .header {
    button {
        width: 40px;
    }
}

/* 히스토리 페이지 상품/브랜드 선택 탭 설정 시작 (.history.like 클래스 수정 금지) -clover */
.main-contents.history.like section.header .sorting-container {
    padding: 15px;
    border-top: 1px solid #e5e7ea;
}

.main-contents.history.like section.header .sorting-container .menu-container {
    height: 37px;
    border-radius: 4px;
    background-color: #f0f1f4;
}

.main-contents.history.like section.header .sorting-container .menu-container .menu {
    padding: 3px;
}

.main-contents.history.like section.header .sorting-container .menu-container .menu a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #99a1a8;
    border: none;
    border-radius: 3px;
}

.main-contents.history.like section.header .sorting-container .menu-container .menu.active a {
    font-weight: 500;
    color: var(--color-black-main);
    border: none;
    background-color: #fff;
}
/* 히스토리 페이지 상품/브랜드 선택 탭 설정 끝 (.history.like 클래스 수정 금지) -clover */

.main-contents.m-my-page-like-brand section.product {
    margin-top: 170px;
}

/* 좋아요한 브랜드 목록 */
.main-contents.m-my-page-like-brand .product--horizontal {
    /* 이미지 컨테이너 사이즈 설정 */
    --size-image: 80px;

    & .img-container {

        & img {
            border-radius: 50%;
        }

        /* img에 src가 없거나 빈 값일 때만 배경 표시 */
        &:has(img:not([src])),
        &:has(img[src=""]),
        &:not(:has(img)) {
            background: url("/shop/common/image/image-empty-state-brand-like.svg") center no-repeat;
            background-size: contain;

            img {
                display: none;
            }
        }
    }

    & .text-container {
        gap: 3px;

        & .text--brand-name {
            font-size: 16px;
            font-weight: 700;
        }

        & .text--brand-explanation {
            color: var(--color-grey);
        }
    }

}

.main-contents.m-my-page-like-brand section.recommend .title-container .title {
    width: calc(100% - 60px);
    font-size: 16px;
}

.main-contents.m-my-page-like-brand section.recommend .product-container .product {
    width: 100px;
    min-width: 100px;
}

.main-contents.m-my-page-like-brand section.recommend .product-container .product .img-container {
    width: 100%;
}

.main-contents.m-my-page-like-brand section.recommend .product-container .info-container {
    height: 119px;
}

/* m_my_page_like.html 끝 */

/* m_shop_search.html 설정 시작 */
.m-shop-search-result {
    & .empty-state {
        height: 250px;
    }
}

.main-contents.m-shop-search-result header .input-container {
    padding-right: 80px;
}

.main-contents.m-shop-search-result header .input-container input {
    width: 100%;
    height: 100%;
}

.main-contents.m-shop-search-result header .input-container input::placeholder {
    font-size: 15px;
}

.main-contents.search section.keyword {
    gap: 40px;
    margin-top: 116px;
}

.main-contents.search section.keyword .inner-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-contents.search section.keyword .inner-container .title-container {
    display: flex;
    justify-content: space-between;
}

.main-contents.search section.keyword .title-container:not(:first-child) {
    margin-top: 30px;
}

.main-contents.search section.keyword .title-container .text {
    color: #99a1a8;
}

.main-contents.search section.keyword .category-container {
    flex-wrap: wrap;
    white-space: unset;
    overflow-x: unset;
}

.main-contents.search section.keyword .category-container.search-history .btn.common {
    gap: 5px;
    color: var(--color-black-main);
    border: 1px solid #f0f1f4;
}

.main-contents.search section.keyword .category-container.recommend-keyword .btn.common {
    color: var(--color-black-main);
    background-color: #f6f7f9;
    border: none;
}

.main-contents.search section.keyword .ranking-list {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0 50px;
}

.main-contents.search section.keyword .ranking-list li {
    width: calc(50% - 25px);
    height: 20%;
}

.main-contents.search section.keyword .ranking-list li a {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-black-main);
}

.main-contents.search section.keyword .ranking-list li a .rank-num {
    width: 15px;
}

.main-contents.search section.keyword .ranking-list li a .icon.rank {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
/* search.html 설정 끝 */

/* m_shop_search_result.html 시작 */
.main-contents.search-result {
    min-height: calc(100vh - 100px);
    margin-top: 116px;

    & .header__button-container--left {
        transform: translateY(-1px);
    }

    .auto-complete {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: calc(100svh - 100px);
        display: none;
        background: #fff;

        &.is-active {
            display: flex;
        }
    }

    .auto-complete__list {
        width: 100%;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow: auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
    }

    .auto-complete__item {
        height: 50px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 0 24px;

        .product-name {
            font-size: 14px;
        }

        mark {
            color: #3c8aff;
            background-color: unset;
        }
    }
}

.main-contents.search-result .check-box-container {
    display: flex;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid #f6f7f9;
}

.main-contents.search-result .check-box-container label {
    display: flex;
    gap: 8px;
}

.main-contents.search-result section.category {
    gap: 5px;
    padding-bottom: 15px;
    margin-top: 15px;
    border-bottom: 1px solid #f6f7f9;
}

.main-contents.search-result section.category .category-container {
    position: relative;
    padding-left: 60px;
}

.main-contents.search-result section.category .category-container .text-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-weight: 700;
}

.main-contents.search-result section.category .category-container .btn-container {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
}

.main-contents.search-result section.category .category-container .btn-container::-webkit-scrollbar {
    display: none;
}

.main-contents.search-result section.category .category-container button {
    gap: 8px;
    color: #757d86;
    border: none;
    padding: 10px 5px;
}

.main-contents.search-result section.category .category-container button.active {
    font-weight: 700;
    color: #628ddf;
    background-color: #fff;
}

.main-contents.search-result section.category .category-container.filter {
    padding: 0;
}

.main-contents.search-result section.category .category-container.filter button {
    align-items: center;
    font-size: 13px;
    border: 1px solid #dadde0;
    padding: 5px 12px;
    cursor: pointer;
}


.main-contents.search-result section.category .category-container button .icon.close {
    display: none; /* 초기에는 안보이게, button에 active 클래스 추가 시 활성화 */
}

.main-contents.search-result section.category .category-container button.active .icon.close {
    display: inline-block;
}

.main-contents.search-result section.product {
    margin-top: 15px;
}

.main-contents.search-result section.product .product-list.recommend .product-container .product.horizontal {
    width: 100%;
}

.main-contents.search-result section.product .product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-contents.search-result section.product .product-list .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-contents.search-result section.product .product-list .title-container .filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-contents.search-result section.product .product-list .title-container .filter-container select {
    color: var(--color-black-main);
    padding-right: 25px;
    background: url("/shop/common/image/icon/icon-angle-down.svg") 95% center no-repeat;
}

.main-contents.search-result section.product .product-container {
    flex-wrap: wrap;
    overflow-x: unset;
}

.main-contents.search-result section.recommend-brand {
    padding: 0;
    margin-top: 15px;
}

.main-contents.search-result section.recommend-brand .product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #f6f7f9;
}

.main-contents.search-result section.recommend-brand .product-list .title-container {
    padding: 15px 15px 0;
}

.main-contents.search-result section.recommend-brand .product-list .category-container {
    padding: 0 15px 15px;
    border-bottom: 1px solid #f6f7f9;
}

.main-contents.search-result section.recommend-brand .product-container {
    flex-wrap: wrap;
    padding: 0 15px;
    overflow-x: unset;
}

.main-contents.search-result section.recommend-keyword {
    padding: 0;
}

.main-contents.search-result section.recommend-keyword .product-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #f6f7f9;
}

.main-contents.search-result section.recommend-keyword .product-list .title-container {
    padding: 15px 15px 0;
}

.main-contents.search-result section.recommend-keyword .product-list .category-container {
    flex-wrap: wrap;
    padding: 0 15px 15px;
    border-bottom: 1px solid #f6f7f9;
    overflow-x: unset;
}

.main-contents.search-result section.recommend-keyword .product-container {
    flex-wrap: wrap;
    padding: 0 15px;
    overflow-x: unset;
}
/* m_shop_search_result.html 끝 */

/* m_modal_popup_search_result.html 시작 */
.radio__list--modal {
    flex-direction: column;
}

.radio__item--modal {
    height: 55px;
    display: flex;
    justify-content: space-between;
}

.radio__item--modal .icon.check {
    display: none;
}

.radio__item--modal:has(input:checked) {
    font-weight: 700;
}

.radio__item--modal:has(input:checked) .icon.check {
    display: unset;
}
/* m_modal_popup_search_result.html 끝 */

/* m_shop_cart.html 설정 시작 */
.main-contents.m-shop-cart .header {
    position: fixed;
    top: 0;
    margin: 0;
    width: 100%;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #dadde0;
    background-color: #fff;
    z-index: 3;
}

.main-contents.m-shop-cart .header .header-inner.top {
    position: relative;
    justify-content: center;
    border: none;

    & .header__button-container--left {
        left: 15px;
        transform: translateY(-1px);

        & .btn.back {
            height: 40px;
            display: flex;
            align-items: center;
        }
    }

    & .header__button-container--right {
        right: 15px;
        display: flex;

        & button {
            width: 40px;
            height: 40px;
        }
    }
}

.main-contents.m-shop-cart section.header .menu-container {
    height: 44px;
}

.main-contents.m-shop-cart {
    margin-top: 100px;
}

/* 유통사 계정으로 로그인 시 마진 조절 -clover */
.m-shop-cart.is-vendor-account {
    margin-top: 50px;

    section.product-info {
        margin-top: 20px;
    }
}

.main-contents.m-shop-cart section.delivery-info {
    gap: 0;
    padding: 0;
}

.main-contents.m-shop-cart section.delivery-info .btn-container {
    height: 44px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}

.main-contents.m-shop-cart section.delivery-info .btn-container .inner-container.left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-black-main);
}

.main-contents.m-shop-cart section.delivery-info .btn-container .inner-container.left label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.m-shop-cart section.delivery-info .btn-container .inner-container.right {
    display: flex;
    align-items: center;
    color: #757d86;
}

.cart-status {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 700;
    background-color: #E8F1FF;
    padding: 8px 16px;

    .cart-status__text {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        color: #8486FF;
    }

}

.cart-status label {
    display: flex;
    gap: 10px;
}

/* 오늘드림 배송지변경 기능 시작 */
.m-shop-cart .section--delivery-address {
    padding: 0 15px;
    margin-top: 20px;
}

.m-shop-cart .accordion__item--delivery-address {
    border: 1px solid #ccc;
    border-radius: var(--radius-main);
}

.m-shop-cart .accordion__header--delivery-address {
    padding: 12px 16px;
}

.m-shop-cart .accordion__header--delivery-address .text--grey {
    max-width: calc(100% - 30px);
    font-weight: 600;
    color: #333;
    line-height: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.m-shop-cart .accordion__body--delivery-address {
    flex-direction: column;
    border-top: 1px solid #ccc;
}

.delivery-address__list--shop-cart {
    display: flex;
    flex-direction: column;
}

.delivery-address__item--shop-cart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
}

.delivery-address__item--shop-cart:not(:first-child) {
    border-top: 1px solid #ccc;
}

.delivery-address__header--shop-cart {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.delivery-address__text--shop-cart {
    display: -webkit-box;            /* flex처럼 줄제한 작동 */
    -webkit-box-orient: vertical;    /* 세로 방향으로 줄 쌓기 */
    font-size: 13px;
    overflow: hidden;                /* 넘치는 텍스트 숨기기 */
    text-overflow: ellipsis;         /* 말줄임(...) 표시 */
    -webkit-line-clamp: 2;           /* 표시할 줄 수 = 2 */
}
/* 오늘드림 배송지변경 기능 끝 */

.main-contents.m-shop-cart section.delivery-info .delivery-fee {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px;
}

.main-contents.m-shop-cart section.delivery-info .delivery-fee .progress-container {
    width: 100%;
    height: 4px;
    display: flex;
    border-radius: 3px;
    background-color: #f0f1f4;
}

.main-contents.m-shop-cart section.delivery-info .delivery-fee .progress-container .progress-bar {
    width: 1%;
    height: 4px;
    display: inline-block;
    border-radius: 3px;
    background-color: #628ddf;
    transition: all 0.6s ease-in-out;
}

/* 장바구니 내 상품 설정 */
.m-shop-cart .product-container--horizontal {
    gap: 12px;
    padding-bottom: 15px;

    .badge--promotion {
        left: unset;
        right: 0;
    }

    .badge__item {
        border-radius: 0 5px 0 0;
    }

    &:not(:last-child) {
        border-bottom: 1px solid #f0f1f4;
    }

    & .product--horizontal {
        position: relative;

        & .img-container {
            & .product-label {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }

            & input[type=checkbox]:checked {
                /*border-radius: var(--radius-main);*/
            }
        }

    }

    & .info-container {
        width: calc(100% - 150px);
    }

    & .btn.close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        justify-content: flex-end;
        align-items: flex-start;

        /* 가상요소 추가로 button 터치영역 확보 -clover */
        &:before {
            content: '';
            position: absolute;
            top: -16px;
            bottom: -16px;
            left: -2px;
            right: -2px;
        }
    }

    .btn-container {
        justify-content: space-between;

        & .quantity-control {

            & button {
                width: 30px;
                height: 30px;
                border: 1px solid #dadde0;
            }

            input {
                width: 35px;
                height: 30px;
                font-size: 11px;
                font-weight: 400;
                color: #50585f;
                text-align: center;
                border-top: 1px solid #dadde0;
                border-bottom: 1px solid #dadde0;
                margin: 0 -4px;
            }
        }

        & .price {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 700;
            color: var(--color-black-main);

            & .original {
                font-size: 11px;
                font-weight: 500;
                color: #99a1a8;
                text-decoration: line-through;
            }
        }
    }

    .promotion {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #47A1FF;

        &.is-meet {
            color: #4059FF;
        }
    }
}

.dropdown-container .option-container {
    color: #292c33;
    border: 1px solid #e5e7ea;
    border-radius: var(--radius-main);
}

.dropdown-container .option-container .option-selected {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
}

.dropdown-container.active .option-container .option-selected {
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e7ea;
}

/* dropdown-container 비활성화시, option-list 비활성화 */
.dropdown-container .option-container .option-list {
    display: none;
}

.dropdown-container.active .option-container .option-list {
    width: 100%;
    height: 250px;
    flex-direction: column;
    overflow-y: auto;
}

.dropdown-container.active .option-container .option-list::-webkit-scrollbar {
    display: none;
}

.dropdown-container .option-container .option-list .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.dropdown-container .option-container .option-list .option:not(:last-child) {
    border-bottom: 1px solid #e5e7ea;
}

.dropdown-container .option-container .option-list .option .name {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #292c33;
}

.dropdown-container .option-container .option-list .option .name .flag {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #f374b7;
}

.dropdown-container .option-container .option-list .option .price {
    font-weight: 700;
    color: #000;
}

/* 장바구니 세트상품 옵션 영역 시작 */
.m-shop-cart {
    .set-option {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-radius: 5px;
        background: #F8F8F8;
        padding: 10px 16px;
    }

    .set-option__list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .set-option__item {
        font-size: 13px;
    }

    .button--set-option-change {
        width: 100%;
        height: 27px;
        font-size: 12px;
        color: #888;
        border: 1px solid #E9E9E9;
        border-radius: 100px;
        background: #FFF;
    }
}

body:has(.m-shop-cart) {
    .modal__body--option-select {
        max-height: 500px;
    }
}
/* 장바구니 세트상품 옵션 영역 끝 */

/* 상품금액 영역 시작 */
.main-contents.m-shop-cart section.price-info {
    padding: 20px 15px;
    border-top: 8px solid #f6f7f9;
    border-bottom: 8px solid #f6f7f9;
}

.main-contents.m-shop-cart section.price-info .price-info-container {
    display: flex;
    flex-direction: column;
}

.main-contents.m-shop-cart section.price-info .price-info-container .price {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

.main-contents.m-shop-cart section.price-info .text-container.notice {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 13px;
    color: #99a1a8;

    & .icon.info {
        margin-top: 1px;
    }
}

.main-contents.m-shop-cart section.price-info .btn-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background-color: #f6f7f9;
    border-radius: 4px;
}

.main-contents.m-shop-cart section.price-info .btn-container .top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.main-contents.m-shop-cart section.price-info .btn-container .top .img-container {
    width: 20px;
    height: 30px;
}

.main-contents.m-shop-cart section.price-info .btn-container .top .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.m-shop-cart section.price-info .btn-container .top .text-container {
    display: flex;
    flex-direction: column;
}

.main-contents.m-shop-cart section.price-info .btn-container .top .text-container .text {
    font-size: 12px;
    color: #757d86;
}

.main-contents.m-shop-cart section.price-info .btn-container .btn.icon {
    height: unset;
    font-size: 12px;
    color: #757d86;
}

.main-contents.m-shop-cart section.bottom-notice .bottom-notice {
    font-size: 11px;
    color: #99a1a8;
    text-align: center;
    padding-bottom: 15px;
}
/* 상품금액 영역 끝 */

/* 결제버튼 영역 시작 */
.m-shop-cart .section--purchase-proceed {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--max-width-all-contents);
    padding: 15px;
    border-top: 1px solid #c9cdd2;
    background-color: #fff;
    transform: translateX(-50%);
    z-index: 1;

    .purchase-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .purchase-info__calculation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .text--calculate {
        font-size: 13px;
        line-height: 19px;
    }

    .text--total-price {
        font-size: 15px;
        font-weight: 700;
        margin-left: auto;
    }

    .purchase-info__standard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #666;

        .purchase-info__text-container {
            display: flex;
            align-items: center;
        }

        .purchase-info__text--standard-below {
            font-size: 14px;
            font-weight: 600;
            color: #fb4e4a;
        }

        /* 바로드림 텍스트 */
        .purchase-info__text--standard-meet,
        /* 바로드림 무료 배달조건 충족했을 때 보여줄 텍스트 */
        .purchase-info__text--standard-meet-second {
            display: none;
            font-size: 14px;
            font-weight: 600;
            color: #8486FF;
        }

        &.is-meet {
            .purchase-info__text--standard-below {
                display: none;
            }

            .purchase-info__text--standard-meet {
                display: inline-block;
            }

            .purchase-info__text--normal {
                display: none;
            }
        }

        /* 택배 배송인 경우 */
        &.is-parcel {
            .purchase-info__text {
                font-size: 14px;
                font-weight: 600;
                color: #4F91F4;
            }

            &.is-meet {
                .purchase-info__text-container {
                    display: none;
                }

                .purchase-info__text--standard-meet {
                    display: inline-block;
                }
            }
        }
    }

    .progress--purchase-proceed {
        .progress__track {
            position: relative;
            width: 100%;
            height: 6px;
            border-radius: 100px;
            background-color: #D9D9D9;
        }

        .progress__bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 30%;
            max-width: 100%;
            border-radius: 100px;
            background: #848484;
            transition: width 0.3s ease-in-out;

            &.is-meet {
                background: #8486FF;
            }
        }

        &.is-parcel {

            .progress__track {
                background: #E8F1FF;
            }

            .progress__bar {
                background: #BDD7FF;
            }
        }
    }


    .button-container--purchase-proceed {
        width: 100%;
        gap: 10px;

        .btn {
            width: 50%;
            font-size: 16px;

            &.white {
                border: 1px solid #c9cdd2;

                &:disabled {
                    color: #D9D9D9;
                    border-color: #D9D9D9;
                    cursor: not-allowed;
                }
            }

            &.black:disabled {
                color: #fff;
                background: #D9D9D9;
                cursor: not-allowed;
            }
        }

        .button--below-standard {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #fff;
            border-radius: 5px;
            background: #D9D9D9;
            cursor: not-allowed;
        }
    }
}
/* 결제버튼 영역 끝 */

/* 카트가 비었을 때 */
.m-shop-cart .cart__no-product {
    width: 100%;
    height: 392px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #ccc;
}
/* m_shop_cart.html 설정 끝 */

/* m_shop_cart_pickup.html 시작 */
.m-shop-cart-pickup {
    & .cart-status {

        & .button {
            margin-bottom: 2px;
        }

        & .text--notice {
            font-size: 12px;
            font-weight: 400;
            color: var(--color-grey);
            line-height: 20px;
        }
    }

    & .button-container--store-select {
        padding: 0 15px 20px 15px;

        & .selected-store-container {
            width: 100%;
            height: 43px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f0f1f4;
            padding: 0 13px;

            & .text-container {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            & .button--store-change {
                height: 24px;
                font-size: 12px;
                line-height: 24px;
                background-color: #fff;
                padding: 0 10px;
            }
        }
    }

    & .button--store-select {
        width: 100%;
        height: 43px;
        gap: 5px;
        background-color: #f0f1f4;

        & .icon {
            width: 14px;
            height: 14px;
        }
    }

    & .section--product-list {
        margin-top: 0;
    }
}
/* m_shop_cart_pickup.html 끝 */

/* m_shop_cart_kiosk_password_layer.html 시작 */
.m-shop-cart-kiosk-password-layer {
    & .modal__body {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    & .title--section-sub {
        font-weight: 500;
    }

    & .form__list--column {
        gap: 8px;
    }

    & .filter__item {
        /*height: 50px;*/
        border-color: #ddd;
    }

    & .notice__item--order-list {
        color: #888;
    }
}
/* m_shop_cart_kiosk_password_layer.html 끝 */

/* m_modal_pickup_store_select.html 시작 */
.m-modal-pickup-store-select {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;

    & .modal__header {
        .title-container--main {
            position: relative;
            height: 50px;
            justify-content: center;
            border-bottom: 1px solid #dadde0;
            padding: 0 16px;

            & .modal__button--close {
                position: absolute;
                right: 16px;
            }
        }

        .filter__list {
            flex-direction: column;
            align-items: unset;
            gap: 20px;
            padding: 16px;
            border-bottom: 1px solid #dadde0;
        }

        & .filter__item-container--search {
            width: 100%;

            & .filter__item--search {
                padding-left: 16px;
            }

            & .input__adornment {
                right: 0;
                width: 40px;
                height: 40px;
                align-items: center;
            }
        }

        & .tab__list {
            display: flex;
            align-items: center;
            gap: 16px;

            & .tab__item {
                position: relative;
                font-size: 13px;
                color: var(--color-light-grey);

                &:not(:last-child):after {
                    content: '';
                    position: absolute;
                    right: -8px;
                    top: 50%;
                    width: 1px;
                    height: 10px;
                    background-color: var(--color-light-grey);
                    transform: translateY(-50%);
                }

                &:has(input:checked) {
                    font-weight: 700;
                    color: var(--color-black-main);
                }
            }
        }
    }

    & .modal__body {

        & .swiper-slide {
            position: relative;
        }

        .map-container {
            /* 헤더 높이(50px) 검색창 높이(112px) 제거 */
            height: calc(100vh - 50px - 112px);
        }

        & .L__list {
            position: absolute;
            top: 0;
            left: 0;
            /* 헤더 높이(50px) 검색창 높이(112px) 제거 */
            height: calc(100vh - 50px - 112px);
            display: flex;
            flex-direction: column;
            background-color: #fff;
            overflow-y: auto;
            overscroll-behavior: contain;
            transition: transform 0.3s ease;
            transform: translateY(100%);

            /* 스크롤바 제거 */
            &::-webkit-scrollbar {
                display: none;
            }

            & .L__item {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 16px;

                /* 매장명 */
                & .title-container {
                    display: flex;
                    align-items: flex-end;
                    gap: 10px;

                    & .store-name {
                        font-size: 16px;
                        font-weight: 600;
                    }

                    .distance {
                        font-size: 12px;
                        font-weight: 300;
                        color: var(--color-grey);
                    }
                }

                /* 매장 주소 */
                & .address-container {
                    font-weight: 400;
                }

                & .button-container {
                    gap: 20px;

                    & .button {
                        position: relative;
                        width: 20px;
                        height: 20px;
                        justify-content: center;
                        align-items: center;

                        &:before {
                            content: '';
                            position: absolute;
                            top: -5px;
                            bottom: -5px;
                            left: -5px;
                            right: -5px;
                        }

                        & .telephone {
                            width: 20px;
                            height: 20px;
                            background: url("/shop/common/image/mobile/icon/icon-tel-pickup-store-select.svg") center no-repeat;
                        }

                        & .icon.gps {
                            width: 20px;
                            height: 20px;
                            background: url("/shop/common/image/mobile/icon/icon-gps-pickup-store-select.svg") center no-repeat;
                        }

                        & .icon.star {
                            width: 20px;
                            height: 20px;
                            background: url("/shop/common/image/mobile/icon/icon-star-favorite-empty.svg") center no-repeat;

                            &.active {
                                background: url("/shop/common/image/mobile/icon/icon-star-favorite-fill.svg") center no-repeat;
                                animation: popup 1s ease;
                            }
                        }
                    }


                }
            }
        }
    }
}
/* m_modal_pickup_store_select.html 끝 */

/* m_shop_cart_pickup_info_layer.html 시작 */
.m-shop-cart-pickup-info-layer {
    & .pickup-step {
        display: flex;
        justify-content: space-around;
        padding: 20px 5px;
    }

    & .pickup-step__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    & .pickup-step__header {
        width: 60px;
        height: 60px;
        border-radius: 50%;

        &.cart {
            background: #f0f1f4 url("/shop/common/image/mobile/icon/icon-pickup-step-cart.svg") center no-repeat;
        }

        &.store {
            background: #f0f1f4 url("/shop/common/image/mobile/icon/icon-pickup-step-store.svg") center no-repeat;
        }

        &.bag {
            background: #f0f1f4 url("/shop/common/image/mobile/icon/icon-pickup-step-bag.svg") center no-repeat;
        }
    }

    & .angle.right {
        position: relative;
        top: 23px;
    }

    .notice__list--order-list {
        padding: 0;
    }
}
/* m_shop_cart_pickup_info_layer.html 끝 */

/* m_my_page_address_account.html 시작 */

.main-contents.m-my-page-address-account {
    margin-top: 65px;
}

.main-contents.mypage-shipping.m-my-page-address-account section.shipping {
    margin-top: 0;
}

/* m_my_page_address_account.html 끝 */

/* mypage_shipping 설정 시작 */
.main-contents.mypage-shipping section.header {
    width: 100%;
    position: fixed;
    top: 0;
    margin: 0;
    border-bottom: 1px solid #e5e7ea;
    background-color: #fff;
    z-index: 3;
}

.main-contents.mypage-shipping .header-inner.top {
    padding: 0;
    border: none;
}

.main-contents.mypage-shipping section.shipping {
    margin-top: 130px;
}

.main-contents.mypage-shipping section.shipping .shipping-place {
    width: 100%;
    min-height: 175px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-main);
    font-weight: 700;
    color: #3a3e45;
    padding: 18px 15px;
    background: #f6f7f9;
    border: 1px solid #c9cdd2;
}

.main-contents.mypage-shipping section.shipping .shipping-place.active {
    background-color: #fff;
    border-color: var(--color-highlight);
}

.main-contents.mypage-shipping section.shipping .address-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.main-contents.mypage-shipping section.shipping .address-container .name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    color: var(--color-highlight);
}

.main-contents.mypage-shipping section.shipping .address-container .name .flag {
    width: 70px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    padding: 0;
    border-radius: 15px;
}

.main-contents.mypage-shipping section.shipping .address-container .btn-container {
    justify-content: flex-end;
}

.main-contents.mypage-shipping section.shipping .address-container .btn-container button {
    width: 44px;
    height: 23px;
    font-size: 11px;
    font-weight: 700;
    color: #99a1a8;
    line-height: 23px;
}

.main-contents.mypage-shipping section.shipping .address-container .address-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 20px;
}


.main-contents.mypage-shipping section.shipping .address-container .address-info .phone {
    margin-top: 8px;
}

.main-contents.mypage-shipping section.shipping .entrance-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    margin-top: 15px;
}

.main-contents.mypage-shipping section.shipping .entrance-container li {
    font-size: 13px;
}

.main-contents.mypage-shipping section.shipping .btn-container.add button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #f6f7f9;
    border: 1px solid #dadde0;
    font-size: 16px;
    color: #303030;

    & .icon.plus.green {
        width: 10px;
        height: 10px;
        background-image: url("/shop/common/image/mobile/icon/icon-plus-black-10x10.svg");
    }
}

.main-contents.mypage-shipping section.shipping .bottom-notice {
    font-size: 13px;
}

.main-contents.mypage-shipping section.shipping .additional-address {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #e5e7ea;
    border-bottom: 1px solid #e5e7ea;
    padding: 15px 0;
}

.main-contents.mypage-shipping section.shipping .additional-address > li:not(:first-child) {
    padding-top: 15px;
    border-top: 1px solid #e5e7ea;
}

.main-contents.mypage-shipping section.shipping .additional-address .address-container .name {
    color: #3a3e45;
    margin-bottom: 20px;
}

.main-contents.mypage-shipping section.shipping .additional-address .address-container .btn-container {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-contents.mypage-shipping section.shipping .additional-address .address-container .btn-container .inner-container {
    display: flex;
    gap: 5px;
}

.main-contents.mypage-shipping section.shipping .additional-address .address-container .btn-container .inner-container button {
    width: 100%;
}
/* mypage_shipping 설정 끝 */

/* mypage_shipping_register.html 설정 시작 */

.main-contents.mypage-shipping.register {
    padding-bottom: 20px;
    margin-top: 70px;
}

.main-contents.mypage-shipping.register section.header .header-inner.top {
    justify-content: center;
}

.main-contents.mypage-shipping.register section.header .header-inner.top .btn-container {
    position: absolute;
    left: 15px;
}

.main-contents.mypage-shipping.register section.register {
    border-bottom: 8px solid #e5e7ea;
    padding-bottom: 20px;
}

.main-contents.mypage-shipping.register section.register .info-container {
    display: flex;
    color: #292c33;
}

.main-contents.mypage-shipping.register section.register .info-container .title-container {
    width: 20%;
    min-width: 80px;
    display: flex;
    gap: 5px;
    transform: translateY(5px);
}
.main-contents.mypage-shipping.register section.register .info-container .input-container {
    width: 100%;
    height: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background-color: #fff;
    border: none;
    padding: 0;
}

.main-contents.mypage-shipping.register section.register .info-container input {
    width: 100%;
    height: var(--height-form-element);
    line-height: var(--height-form-element);
    padding: 0 8px;
    border: 1px solid #c9cdd2;
    border-radius: var(--radius-main);

    &[type="checkbox"] {
        border: none;
    }
}

.main-contents.mypage-shipping.register section.register .info-container input:focus {
    border-color: var(--color-highlight);
}

.main-contents.mypage-shipping.register section.register .info-container input::placeholder {
    font-size: 13px;
    color: #98A0A7FF;
    vertical-align: middle;
}

.main-contents.mypage-shipping.register section.register .info-container select {
    width: 100%;
    height: var(--height-form-element);
    line-height: var(--height-form-element);
    padding: 0 8px;
    border: 1px solid #c9cdd2;
    border-radius: var(--radius-main);
    background: url("/shop/common/image/icon/icon-angle-down.svg") 95% center no-repeat;
    background-size: 15px;
}

.main-contents.mypage-shipping.register section.register .info-container select:focus {
    border-color: var(--color-highlight);
}

.main-contents.mypage-shipping.register section.register .info-container .input-container > span {
    font-size: 12px;
    color: #757d86;
}

.main-contents.mypage-shipping.register section.register .info-container .check-box-container {
    width: 100%;
    display: flex;
    gap: 4px;
    color: #292c33;

    & .text {
        display: inline-block;
        height: 20px;
        line-height: 20px;
    }
}

.main-contents.mypage-shipping.register section.register .info-container .check-box-container input {
    width: 20px;
    height: 20px;
    border-radius: unset;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.tel {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

/* 주소 */
.main-contents.mypage-shipping.register section.register .info-container .input-container.address {
    gap: 10px;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.address .post-number-container {
    width: 100%;
    display: flex;
    gap: 10px;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.address .post-number-container button {
    position: unset;
    width: 120px;
    height: var(--height-form-element);
    color: var(--color-highlight);
    background-color: #fff;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.address .address-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #99a1a8;
    border: 1px solid #c9cdd2;
    border-radius: var(--radius-main);
    padding: 10px;
    background-color: #f6f7f9;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.address .address-detail .text-container {
    display: flex;
    gap: 5px;
}

.main-contents.mypage-shipping.register section.register .info-container .input-container.address .address-detail .text-container .title {
    width: 40px;
    display: flex;
    justify-content: space-between;
}

/* 공동현관 출입방법 */
.main-contents.mypage-shipping.register section.entrance {
    margin-top: 20px;
}

.main-contents.mypage-shipping.register section.entrance .title-container {
    justify-content: unset;
    align-items: flex-start;
    gap: 5px;
    color: #50585f;
}

.main-contents.mypage-shipping.register section.entrance .entrance-method-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.main-contents.mypage-shipping.register section.entrance .entrance-method-container li label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #292c33;
}

.main-contents.mypage-shipping.register section.entrance .entrance-password-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: #f6f7f9;
}

.main-contents.mypage-shipping.register section.entrance .entrance-password-container .title-container {
    display: flex;
}

.main-contents.mypage-shipping.register section.entrance .entrance-password-container textarea {
    height: var(--height-form-element);
    color: #50585f;
    border-radius: var(--radius-main);
    background-color: #fff;
    padding: 10px 15px;
    border: none;
}

.main-contents.mypage-shipping.register section.entrance .notice-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-contents.mypage-shipping.register section.entrance .notice-container .notice-list li {
    font-size: 12px;
    color: #50585f;
}

.main-contents.mypage-shipping.register section.entrance .agree-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #50585f;
    margin: 5px 0;

}

.main-contents.mypage-shipping.register section.entrance .btn-container {
    display: flex;
    gap: 8px;
}

.main-contents.mypage-shipping.register section.entrance .btn-container button {
    width: 50%;
    font-size: 16px;
}
/* mypage_shipping_register.html 설정 끝 */

/* m_customer_service.html 시작 */
.main-contents.customer-service {
    margin-top: 65px;
}

.main-contents.customer-service section.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-bottom: 1px solid #e5e7ea;
    background-color: #fff;
    z-index: 1;
}

.main-contents.customer-service section.header .logo-container {
    justify-content: center;
}

.main-contents.customer-service section.header .logo-container .title-container h2 {
    font-size: 16px;
}


.main-contents.customer-service section.header .logo-container .btn.back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.main-contents.customer-service section.faq {
    padding: 0;
    margin: 0;
}

.main-contents.customer-service section.faq .title-container {
    align-items: center;
    padding: 0 15px;
}

.main-contents.customer-service section.faq .title-container button {
    top: unset;

    & .text {
        line-height: 40px;
    }
}

.main-contents.customer-service section.faq .input-container {
    position: relative;
    height: var(--height-form-element);
    padding: 0 15px;
    background: unset;
}

.main-contents.customer-service .input-container input {
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: #292c33;
    padding: 0 80px 0 20px;
    border: var(--border-form);
    border-radius: 22px;
    background-color: #fff;
}

.main-contents.customer-service .input-container input:focus {
    border-color: var(--color-highlight);
}

.main-contents.customer-service .button.magnifier  {
    position: absolute;
    right: 25px;
}

.main-contents.customer-service .btn.close {
    right: 55px;

    & .icon.close.circle.fill {
        height: 100%;
    }
}

.main-contents.customer-service section.faq .text-container.faq-link a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ff5753;
    padding: 0 15px;
}

.main-contents.customer-service section.faq .faq-category {
    display: flex;
    justify-content: space-between;
    padding: 0 45px;
}

.main-contents.customer-service section.faq .faq-category .btn.icon {
    width: unset;
    height: unset;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #757d86;
}

.main-contents.customer-service section.faq .faq-category .btn.icon.active {
    font-weight: 700;
    color: #000;
}

/* 버튼에 active 클래스 부여 시, 아이콘 변경 */
.main-contents.customer-service section.faq .faq-category .btn.icon.active .icon.faq.online {
    background: url("/shop/common/image/icon/icon-faq-online-active.png") center center no-repeat;
    background-size: contain;
}

.main-contents.customer-service section.faq .faq-category .btn.icon.active .icon.faq.today {
    background: url("/shop/common/image/icon/icon-faq-today-active.png") center center no-repeat;
    background-size: contain;
}

.main-contents.customer-service section.faq .faq-category .btn.icon.active .icon.faq.store {
    background: url("/shop/common/image/icon/icon-faq-store-active.png") center center no-repeat;
    background-size: contain;
}

.m-customer-service-faq .faq__search-result {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e6e6e6;
    padding: 15px 0;
    margin-bottom: -15px;
}

.m-customer-service-faq .faq__search-result span {
    line-height: 1.25;
}

.m-customer-service-faq .faq__search-result .text--number {
    font-size: 17px;
}

.m-customer-service-faq .faq__search-result--empty {
    height: 240px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #99a1a8;
}

/* ul 기본 레이아웃 설정 */
.main-contents.customer-service section.faq .faq-sub-category {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 8px solid #e5e7ea;
}

/* li 기본 레이아웃 설정 */
.main-contents.customer-service section.faq .faq-sub-category li {
    height: 50px;
    font-size: 13px;
    color: #292c33;
    border-top: 1px solid #e5e7ea;
    border-right: 1px solid #e5e7ea;
}

/* li > a 기본 레이아웃 설정 */
.main-contents.customer-service section.faq .faq-sub-category li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

/* 온라인몰 클릭했을 때 레이아웃 */
.main-contents.customer-service section.faq .faq-sub-category.online li {
    width: calc(100% / 3);
}

/* 오늘드림 클릭했을 때 레이아웃 */
.main-contents.customer-service section.faq .faq-sub-category.today li {
    width: 50%;
}

/* 매장 클릭했을 때 레이아웃 */
.main-contents.customer-service section.faq .faq-sub-category.store li {
    width: 50%;
}

.main-contents.customer-service section.faq .keyword-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-container.faq {
    padding: 0 15px;
}

.category-container.faq button {
    height: 38px;
    font-size: 13px;
    color: #3a3e45;
    background-color: #f6f7f9;
    border-radius: 20px;
    border: none;
}

.main-contents.customer-service section.faq .contact-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background-color: #f0f1f4;
}

.main-contents.customer-service section.faq .contact-container .contact {
    width: 100%;
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #292c33;
    border-radius: var(--radius-main);
    background-color: #fff;
    padding: 15px 20px;
}

.main-contents.customer-service section.faq .contact-container .contact a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.main-contents.customer-service section.faq .contact-container .contact a.column {
    flex-direction: column;
}

.main-contents.customer-service section.faq .contact-container .contact a.column .title {
    font-size: 12px;
    color: #21242a;
    margin-bottom: 13px;
}

.main-contents.customer-service section.faq .contact-container .contact a.column .number {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.main-contents.customer-service section.faq .contact-container .contact a.column .time {
    font-size: 11px;
    color: #757d86;
}

/* 공지사항 영역 */
.main-contents.customer-service section.notice {
    margin-top: 15px;
    padding: 0;
}

.main-contents.customer-service section.notice .notice-container {
    display: flex;
    flex-direction: column;
}

.main-contents.customer-service section.notice .notice-container .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.main-contents.customer-service section.notice .notice-container .title-container button {
    color: #50585f;
}

.main-contents.customer-service section.notice .notice-container .notice-list {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    border-top: 1px solid #e5e7ea;
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice {
    width: 100%;
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice:last-child {
    border: none;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice a {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice a .date-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice a .date-container .date {
    font-size: 12px;
    color: #757d86;
}

.main-contents.customer-service section.notice .notice-container .notice-list .notice a .title {
    font-size: 15px;
    color: #292c33;
}
/* m_customer_service.html 끝 */

/* m_customer_service_faq.html 시작 */
.main-contents.m-customer-service-faq {
    margin-top: 15px;
}

.main-contents.faq-list .input-container {
    height: var(--height-form-element);
    background-color: unset;
    padding: 0;
}

.main-contents.faq-list section.faq-list-container .input-container .btn.magnifier {
    position: absolute;
    right: 15px;
}

.main-contents.faq-list section.faq-list-container .input-container .btn.close {
    right: 45px;

    & .icon.close {
        height: 100%;
    }
}

.main-contents.faq-list section.faq-list-container .category-container {
    position: relative;
    padding-left: 70px;
    overflow-x: unset;
}

.main-contents.faq-list section.faq-list-container .category-container .text-container {
    position: absolute;
    top: 50%;
    left: 0;
    font-weight: 700;
    transform: translateY(-50%);
}

.main-contents.faq-list section.faq-list-container .category-container .btn-container {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
}

.main-contents.faq-list section.faq-list-container .category-container .btn-container::-webkit-scrollbar {
    display: none;
}

.main-contents.faq-list section.faq-list-container .category-container .btn-container button {
    height: 38px;
    font-size: 13px;
    color: #3a3e45;
    border: none;
    background-color: #f6f7f9;
}

.main-contents.faq-list section.faq-list-container .select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;

    & .filter__list {
        width: 100%;
        gap: 10px;

        @media (max-width: 674px) {
            flex-direction: column;
        }
    }

    & select {
        width: 100%;
        height: var(--height-form-element);
        color: #292c33;
        padding: 0 20px;
        border: var(--border-form);
        border-radius: var(--radius-main);
        background: url("/shop/common/image/icon/icon-angle-down.svg") 98% center no-repeat;
        background-size: 20px;
        cursor: pointer;
    }

    & select:focus {
        border-color: var(--color-highlight);
    }
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-list li {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e6e6e6;
}

.faq-list li .title-container {
    position: relative;
    display: flex;
    gap: 15px;
    font-size: 15px;
    padding: 20px 0;
    cursor: pointer;
}

.faq-list li .title-container .mark {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-highlight);
}

.faq-list li .title-container .title {
    max-width: calc(100% - 60px);
    white-space: nowrap;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-list li .title-container .icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.faq-list li .title-container .icon.active {
    transform: translateY(-50%) rotate(180deg);
}

.faq-list li .contents-container {
    display: none;
    flex-direction: column;
    gap: 20px;
    background-color: #f6f7f9;
    padding: 15px;
}

.faq-list li .contents-container .text-container {
    font-size: 13px;
    color: #292c33;
    line-height: 20px;
}

.faq-list li .contents-container .bottom-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    margin-top: 20px;

    & .text {
        line-height: 22px;
    }
}

.faq-list li .contents-container .bottom-container .button--pill {
    width: 46px;
    height: 28px;

    &:has(.thumb-up.active) {
        border-color: var(--color-black-main);
    }

    & .thumb-up {
        width: 16px;
        height: 16px;
    }
}

.main-contents.faq-list section.bottom-container {
    align-items: center;
    font-size: 15px;
    margin-top: 20px;
}

.main-contents.faq-list section.bottom-container button {
    width: 300px;
    height: 40px;
}
/* m_customer_service_faq.html 끝 */

/* customer_service_inquiry.html 설정 시작 */

.main-contents.inquiry {
    margin-top: 115px;
}

.main-contents.inquiry section.header {
    gap: 0;
}

.main-contents.inquiry section.header .logo-container {
    justify-content: space-between;
}

.main-contents.inquiry section.header .logo-container .btn.back {
    position: unset;
}

.main-contents.inquiry section.select-container {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.inquiry section.select-container select {
    width: 100%;
    height: var(--height-form-element);
    color: #292c33;
    line-height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-main);
    background: url("/shop/common/image/icon/icon-angle-down.svg") 98% center no-repeat;
    background-size: 20px;
}

.main-contents.inquiry section.select-container select:disabled {
    color: #c9cdd2;
    background-color: #f0f1f4;
    border-color: #dadde0;
}

.main-contents.inquiry section.select-container .faq-container {
    display: flex;
    flex-direction: column;
}

.main-contents.inquiry section.select-container .faq-container .title-container h3 {
    font-size: 16px;
    margin: 10px 0;
}

.main-contents.inquiry section.select-container .faq-container .faq-list li {
    border-bottom: none;
}

.main-contents.inquiry section.select-container .faq-container .faq-list li .title-container {
    padding: 15px 0;
}

.main-contents.inquiry section.select-container .faq-container .faq-list li .title-container .mark {
    color: var(--color-highlight);
}

.main-contents.inquiry section.select-container .faq-container .faq-list li .title-container .title {
    width: calc(100% - 50px);
}

.main-contents.inquiry section.contents-container {
    padding-bottom: 20px;
    margin-top: 20px;
    border-bottom: 8px solid #f6f7f9;
}

.main-contents.inquiry section.contents-container .text-container {
    position: relative;
}

.main-contents.inquiry section.contents-container .text-container textarea {
    width: 100%;
    height: 220px;
    padding: 15px;
    border-radius: var(--radius-main);
    border: 1px solid #e5e7ea;
}

.main-contents.inquiry section.contents-container .text-container textarea:focus {
    border-color: var(--color-black-main);
}

.main-contents.inquiry section.contents-container .text-container textarea::placeholder {
    color: #c9cdd2;
}

.main-contents.inquiry section.contents-container .text-container textarea:disabled {
    color: #c9cdd2;
    background-color: #f0f1f4;
    border: 1px solid #dadde0;
}

.main-contents.inquiry section.contents-container .text-container .indicator {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 12px;
    color: #99a1a8;
}

/* 이미지 업로드 영역 */
.main-contents.inquiry section.contents-container .img-upload-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-contents.inquiry section.contents-container .img-upload-container .title-container {
    font-size: 12px;
    color: #757d86;
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* 이미지 업로드 버튼 */
.main-contents.inquiry section.contents-container .img-upload-container .img-container .btn-container button {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #dadde0;
    border: 1px solid #e5e7ea;
    border-radius: 6px;
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container .btn-container button .text.plus {
    font-size: 25px;
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container .img-list {
    display: flex;
    gap: 15px;
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container .img-list li {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-main);
    background-color: rgba(0, 0, 0, 0.03);
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container .img-list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-main);
}

.main-contents.inquiry section.contents-container .img-upload-container .img-container .img-list li .btn.icon {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.main-contents.inquiry section.answer-alarm {
    margin-top: 15px;
}

.main-contents.inquiry section.answer-alarm .title-container {
    flex-direction: column;
    gap: 5px;
}

.main-contents.inquiry section.answer-alarm .info-container {
    display: flex;
    align-items: center;
}

.main-contents.inquiry section.answer-alarm .info-container label {
    width: 100px;
    display: flex;
    gap: 10px;
}

.main-contents.inquiry section.answer-alarm .info-container .detail {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-contents.inquiry section.answer-alarm .info-container .detail .info {
    width: 50%;
    height: 34px;
    padding: 0 15px;
    border: 1px solid #e5e7ea;
    border-radius: var(--radius-main);

    @media (max-width: 428px) {
        padding: 0 8px;
    }
}

.main-contents.inquiry section.answer-alarm .info-container .detail select.info {
    background: url("/shop/common/image/icon/icon-angle-down.svg") 95% center no-repeat;
    background-size: 15px;
}

.main-contents.inquiry section.answer-alarm .text-container {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #757d86;
}

.main-contents.inquiry section.answer-alarm .btn-container button {
    width: 100%;
    height: unset;
    padding: 12px 0;
}
/* customer_service_inquiry.html 설정 끝 */

/* customer_service_inquiry_list.html 설정 시작 */

.main-contents.inquiry.list section.select-container {
    gap: 5px;
    border: none;
}

.main-contents.inquiry.list section.select-container .text-container {
    font-size: 12px;
    color: #50585f;
}

.main-contents.inquiry.list section.list {
    margin-top: 10px;
}

.main-contents.inquiry.list section.list .no-inquiry {
    width: 100%;
    height: 240px;
    display: none; /* 기본상태 none, active 클래스 추가 시 flex; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid #e5e7ea;
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.inquiry.list section.list .no-inquiry.active {
    display: flex;
}

.main-contents.inquiry.list section.list .no-inquiry .img-container .img {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url("/shop/common/image/mobile/icon/icon-exclamation.png") center center no-repeat;
    background-size: contain;
}

.main-contents.inquiry.list section.list .no-inquiry .text-container {
    font-size: 15px;
    color: #bbb;
}

/* 질문 리스트 영역 시작 */
.main-contents.inquiry.list section.list .inquiry-list-container {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e5e7ea;
}

.main-contents.inquiry.list section.list .inquiry-list-container li {
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 0;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container .top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container .title {
    max-width: calc(100% - 40px);
    font-size: 15px;
    color: #292c33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-contents.inquiry.list section.list .inquiry-list-container li.active .title-container .title {
    font-weight: 700;
    color: var(--color-highlight);
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container .icon.angle.down {
    position: absolute;
    top: 50%;
    right: 0;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container .icon.angle.down.active {
    transform: translateY(-50%) rotate(180deg);
}

/* 질문 리스트 영역 내 flag 레이아웃 설정 */
.main-contents.inquiry.list section.list .inquiry-list-container li .flag {
    /*height: 20px;*/
    /*font-size: 11px;*/
    /*font-weight: 400;*/
    /*line-height: 20px;*/
    /*padding: 3px 10px;*/
    /*background-color: #fff;*/
}

.main-contents.inquiry.list section.list .inquiry-list-container li .title-container .top .date {
    font-size: 12px;
    color: #99a1a8;
    line-height: 20px;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container {
    display: none; /* 기본적으로 none, li > .title-container 요소 클릭 시 보임 */
    flex-direction: column;
    background-color: #f0f1f4;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    font-size: 13px;
    color: #292c33;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data.inquiry {
    border-bottom: 1px solid #e5e7ea;

    /* 질문 내용 정렬방식 */
    & .text-container {
        max-height: 500px;
        white-space: pre-line;
        overflow-y: auto;
        word-break: break-all;
    }
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .top {
    display: flex;
    justify-content: space-between;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .top .text {
    font-weight: 700;
    color: #757d86;
    line-height: 20px;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .top .date {
    font-size: 13px;
    color: #99a1a8;
}

.main-contents.inquiry.list section.list .inquiry-list-container .text-container.order-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data.answer .top .text {
    color: var(--color-highlight);
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data.answer > .text-container {
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7ea;

    /* 답변에 이미지가 들어갈 시 최대 width 설정 */
    & img {
        width: 100%;
    }
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .bottom .text-container {
    font-size: 12px;
    color: #757d86;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .bottom .text-container span {
    color: var(--color-highlight);
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .bottom button {
    margin-left: auto;
}

.main-contents.inquiry.list section.list .inquiry-list-container li .contents-container .data .bottom .flag {
    height: 30px;
    color: var(--color-highlight);
    background-color: #fff;
    padding: 0 8px;
    border: 1px solid var(--color-highlight);
    border-radius: var(--radius-main);
}

/* customer_service_inquiry_list.html 설정 끝 */

/* log_in.html 설정 시작 */
.main-contents.log-in {
    margin: 0;
}

.main-contents.log-in section.log-in {
    margin: 0;
}

.main-contents.log-in section.log-in > .title-container {
    position: relative;
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-contents.log-in section.log-in > .title-container .btn-container {
    position: absolute;
    top: 20px;
    right: 0;
}

.main-contents.log-in section.log-in > .title-container .btn-container button.close {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.main-contents.log-in section.log-in > .title-container .btn-container .icon.close {
    width: 22px;
    height: 22px;
}

.main-contents.log-in section.log-in .input-container {
    height: unset;
    flex-direction: column;
    align-items: flex-start;
    background-color: #FFFFFF;
    padding: 0;
}

.main-contents.log-in section.log-in .input-container input {
    width: 100%;
    height: 50px;
    font-size: 13px;
    border: 1px solid #e5e7ea;
    padding: 0 15px;
}

.main-contents.log-in section.log-in .input-container input:focus {
    border-color: var(--color-black-main);
    z-index: 1;
}

.main-contents.log-in section.log-in .input-container.id-pw input.id {
    border-radius: 6px 6px 0 0;
}

.main-contents.log-in section.log-in .input-container.id-pw input.pw {
    border-radius: 0 0 6px 6px;
    margin-top: -1px;
}

.main-contents.log-in section.log-in .input-container.captcha {
    gap: 10px;
    color: #757d86;
}

.main-contents.log-in section.log-in .input-container.captcha .captcha-container {
    margin: 0 auto;
}

.main-contents.log-in section.log-in .input-container input.captcha {
    border-radius: 6px;
}

.main-contents.log-in section.log-in .input-container.checkbox {
    flex-direction: row;
    justify-content: unset;
    gap: 15px;
}

.main-contents.log-in section.log-in .input-container.checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-contents.log-in section.log-in .input-container.checkbox label input {
    width: 20px;
    height: 20px;
    padding: 0;
}

.main-contents.log-in section.log-in .input-container.checkbox label input:focus {
    border: unset;
}

.main-contents.log-in section.log-in .btn-container.log-in {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.main-contents.log-in section.log-in .btn-container.log-in button {
    width: 100%;
}

.main-contents.log-in section.log-in .btn-container.log-in .link-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-contents.log-in section.log-in .btn-container.log-in .link-container a {
    color: #757d86;
    padding: 10px 0;
}

.main-contents.log-in section.log-in .btn-container.fast-log-in {
    flex-direction: column;
    gap: 10px;
}

.main-contents.log-in section.log-in .btn-container.fast-log-in button .text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black-main);
}

.main-contents.log-in section.log-in .btn-container.fast-log-in button.white {
    border: 1px solid #e5e7ea;
}

.main-contents.log-in section.log-in .link-container.cs-notice {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-contents.log-in section.log-in .link-container.cs-notice a {
    font-size: 13px;
    font-weight: 400;
    color: #757d86;
    padding: 10px 0;
}
/* log_in.html 설정 끝 */

/* register_user.html 설정 시작 */

.main-contents.register-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f2f2f2;
    margin: 0;
}

.main-contents.register-user section.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 30px;
    margin: 0;
    background-color: #fff;
}

.main-contents.register-user section.header .text-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-contents.register-user section.header .text-container .text {
    font-size: 10px;
}

.main-contents.register-user section.header .logo-container {
    width: unset;
}

.main-contents.register-user section.register {
    width: 100%;
    padding: 0 0 30px;
    margin: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.main-contents.register-user section.register .step-container {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e90070;
    background-color: #f3eef4;
    padding: 0 30px;
}

.main-contents.register-user section.register .step-container .text {
    font-size: 16px;
}

.main-contents.register-user section.register .step-container .step {
    display: flex;
    gap: 7px;
}

.main-contents.register-user section.register .step-container .step li {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #909090;
    border-radius: 50%;
    background-color: #fff;
}

.main-contents.register-user section.register .step-container .step li.active {
    color: #fff;
    background-color: #ea3a87;
}

.main-contents.register-user section.register .auth-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-contents.register-user section.register .auth-container .text-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #3f3f3f;
    padding: 0 30px;
}

.main-contents.register-user section.register .auth-container .input-container {
    position: relative;
    height: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background-color: #fff;
    padding: 0 30px;
}

.main-contents.register-user section.register .auth-container .input-container input {
    width: 100%;
    height: 52px;
    color: #505050;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #f4f4f4;
    border-radius: 2px;
    background: #f4f4f4;
    padding: 16px;
}

.main-contents.register-user section.register .auth-container .input-container input:focus {
    border-color: #505050;
}

.main-contents.register-user section.register .auth-container .input-container input.error {
    border-color: #e90070;
}

.main-contents.register-user section.register .auth-container .input-container .text {
    display: none;
    color: #e90070;
}

.main-contents.register-user section.register .auth-container .input-container .text.error {
    display: inline-block;
}

.main-contents.register-user section.register .auth-container .input-container button {
    position: absolute;
    top: 7px;
    right: 35px;
}

.main-contents.register-user section.register .auth-container .input-container.id-number .number-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.register-user section.register .auth-container .input-container.id-number .number-container input.first {
    width: 60%;
}

.main-contents.register-user section.register .auth-container .input-container.id-number .number-container input.second {
    width: 30px;
    padding: 16px 9px;
}

.main-contents.register-user section.register .captcha-container {
    padding: 0 30px;
}

.main-contents.register-user section.register .phone-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 30px;
}

.main-contents.register-user section.register .phone-container .company-list {
    width: 100%;
    display: flex;
    border: 1px solid #303030;
}

.main-contents.register-user section.register .phone-container .company-list > li {
    width: 25%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #909090;
    border-right: 1px solid #303030;
    cursor: pointer;
}

.main-contents.register-user section.register .phone-container .company-list li:last-child {
    position: relative;
    border: none;
}

.main-contents.register-user section.register .phone-container .company-list li.active {
    color: #fff;
    background-color: #303030;
}

.main-contents.register-user section.register .phone-container .company-list li.mvno .mvno-list {
    position: absolute;
    top: 103%;
    right: 0;
    display: none;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #909090;
    border-radius: 4px;
    box-shadow: 0 2px 2px 1px rgba(50, 50, 50, 0.4);
    z-index: 1;
}

.main-contents.register-user section.register .phone-container .company-list li.mvno .mvno-list.active {
    display: flex;
}

.main-contents.register-user section.register .phone-container .company-list li.mvno .mvno-list li {
    color: #505050;
    padding: 10px 15px;
    border-bottom: 1px solid #909090;
}

.main-contents.register-user section.register .phone-container .company-list li.mvno .mvno-list li:last-child {
    border: none;
}

/* 인증 약관 동의 시작 */
.main-contents.register-user section.register .agreement-container {
    display: flex;
    flex-direction: column;
}

/* 체크박스 설정 시작 */
.main-contents.register-user section.register .agreement-container .agreement-item input[type="checkbox"] {
    display: none;
}

/* 커스텀 체크박스 스타일 */
.main-contents.register-user section.register .agreement-container .agreement-item .checkmark {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #eee;
    vertical-align: middle;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item .checkmark {
    scale: 0.8;
}

/* 체크 상태일 때 스타일 */
.main-contents.register-user section.register .agreement-container .agreement-item input[type="checkbox"]:checked + .checkmark {
    background-color: #e90070;
}

/* 체크마크 아이콘 */
.main-contents.register-user section.register .agreement-container .agreement-item .checkmark::after {
    content: "";
    position: absolute;
    display: block;
    left: 8px;
    top: 5px;
    width: 5px;
    height: 9px;
    border: solid #cecece;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 체크됐을 때 아이콘 표시 */
.main-contents.register-user section.register .agreement-container .agreement-item input[type="checkbox"]:checked + .checkmark::after {
    display: block;
    border-color: #fff;
}
/* 체크박스 설정 끝 */

.main-contents.register-user section.register .agreement-container .agreement-item.all {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #202020;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.main-contents.register-user section.register .agreement-container .agreement-item.all label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.register-user section.register .agreement-container .agreement-item.all button {
    width: 30px;
    height: 30px;
    justify-content: flex-end;
}

.main-contents.register-user section.register .agreement-container .agreement-item.all button .icon.angle.down {
    width: 25px;
    height: 25px;
}

.main-contents.register-user section.register .agreement-container .agreement-item.all button .icon.angle.down.rotate {
    transform: rotate(180deg);
}

.main-contents.register-user section.register .agreement-container .agreement-list {
    display: block;
    padding-left: 10px;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item:last-child {
    margin: 0;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item label {
    display: flex;
    gap: 5px;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item label .text {
    color: #505050;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item label .text.red {
    color: #e90070;
}

.main-contents.register-user section.register .agreement-container .agreement-list .agreement-item button {
    width: 30px;
    height: 30px;
    justify-content: flex-end;
}
/* 인증 약관 동의 끝 */

/* 전화번호 입력 영역 */
.main-contents.register-user section.register .input-container.phone-number {
    height: unset;
    border-radius: 0;
    background-color: #fff;
    padding: 0;
}

.main-contents.register-user section.register .input-container.phone-number input {
    width: calc(100% - 215px);
    height: 54px;
    background-color: #f4f4f4;
    padding: 0 16px;
}

.main-contents.register-user section.register .input-container.phone-number button.square {
    position: unset;
    width: 215px;
    height: 54px;
    font-size: 16px;
    border-radius: 0;
    background-color: #666;
}

.main-contents.register-user section.register .input-container.phone-number button.close {
    position: absolute;
    right: 220px;
}

/* 인증번호 입력 영역 */
.main-contents.register-user section.register .input-container.pass-number {
    height: unset;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 0;
    background-color: #fff;
    padding: 0;
}

.main-contents.register-user section.register .input-container.pass-number.active {
    display: flex;
}

.main-contents.register-user section.register .input-container.pass-number .inner-container {
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f4f4;
    padding: 0 16px;
}

.main-contents.register-user section.register .input-container.pass-number .timer {
    color: #e90070;
}

.main-contents.register-user section.register .input-container.pass-number .text-container {
    display: none;
    color: #008000;
}

.main-contents.register-user section.register .input-container.pass-number .text-container.active {
    display: unset;
}

.main-contents.register-user section.register .phone-container .btn-container button {
    width: 100%;
    height: 54px;
    font-size: 16px;
    border-radius: 0;
    background-color: #666;
}

.main-contents.register-user section.register .phone-container .btn-container button.active {
    background-color: #ea3a87 ;
}

/* register_user.html 설정 끝 */

/* register_user_second.html 설정 시작 */

.main-contents.register-user.second section.register.second {
    position: relative;
    padding: 70px 30px 30px;
}

.main-contents.register-user.second section.register .step-container {
    position: absolute;
    top: 0;
    left: 0;
}

.main-contents.register-user.second section.register .input-container {
    height: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: none;
    padding: 0;
}

.main-contents.register-user.second section.register .input-container .inner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-contents.register-user.second section.register .input-container .inner-container .text {
    display: none;
    color: #e90070;
}

.main-contents.register-user.second section.register .input-container .inner-container .text.error {
    display: inline-block;
}

.main-contents.register-user.second section.register .input-container .inner-container.password {
    margin-top: 10px;
}
.main-contents.register-user.second section.register .input-container .inner-container.verify {
    margin-bottom: 10px;
}


.main-contents.register-user.second section.register .input-container input {
    width: 100%;
    height: 52px;
    color: #505050;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #f3f3f3;
    border-radius: 2px;
    background: #f4f4f4;
    padding: 0 16px;
}

.main-contents.register-user.second section.register .input-container input:focus {
    border-color: #505050;
}

.main-contents.register-user.second section.register .input-container input.error {
    border-color: #e90070;
}

.main-contents.register-user.second section.register .input-container .btn.close {
    top: 8px;
    right: 5px;
}

.main-contents.register-user.second section.register .btn-container button {
    width: 100%;
    height: 54px;
    font-size: 16px;
    border-radius: 0;
    background-color: #666;
}

.main-contents.register-user.second section.register .btn-container button.active {
    background-color: #ea3a87;
}

/* register_user_second.html 설정 끝 */

/* m_shop_payment.html 설정 시작 */

.main-contents.payment-delivery {
    margin-top: 0;
}

.main-contents.payment-delivery .header {
    position: fixed;
    height: 50px;
    border-bottom: 1px solid #dadde0;
    z-index: 1;

    .header__button-container--left {
        transform: translateY(2px);
    }
}

.main-contents.payment-delivery section.delivery {
    gap: 0;
    padding: 0;
}

/* 주문/결제 정보 컨테이너 레이아웃 설정 시작 */
.main-contents.payment-delivery section.delivery > .info-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 15px;
}

.main-contents.payment-delivery section.delivery > .info-container:not(:last-child) {
    border-bottom: 8px solid #f0f1f4;
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container .left,
.main-contents.payment-delivery section.delivery > .info-container > .title-container .right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container .left .title {
    font-size: 16px;
    line-height: 23px;
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container .left span.text {
    font-weight: 500;
    color: var(--color-grey-main);
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container .right {
    position: relative;
    min-width: 18px;
    min-height: 40px;
    color: #757d86;
}

.main-contents.payment-delivery section.delivery > .info-container > .title-container .right button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--color-grey-main);
    transform: rotateX(0);
}

.main-contents.payment-delivery section.delivery > .info-container.active > .title-container .right button {
    transform: rotateX(180deg);
}

.main-contents.payment-delivery section.delivery > .info-container > .text-container.address {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.main-contents.payment-delivery section.delivery > .info-container > .text-container.summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* info-container에 active 클래스 추가 시, summary 요소 안보이게, detail 요소 보이게 */
.main-contents.payment-delivery section.delivery > .info-container.active > .text-container.summary {
    display: none;
}

.main-contents.payment-delivery section.delivery .info-container .detail {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.main-contents.payment-delivery section.delivery .info-container.active .detail {
    display: flex;
}

/* 주문/결제 정보 컨테이너 레이아웃 설정 끝 */

/* 배송 요청사항 영역 시작 */

/* 배송 요청사항 요약 */
.main-contents.payment-delivery section.delivery > div > .text-container.summary .text.notice {
    display: inline;
    font-size: 12px;
    color: #50585f;
    border: 1px solid #dadde0;
    border-radius: 4px;
    padding: 10px 12px;
}

.main-contents.payment-delivery section.delivery > div > .text-container.summary .text.notice .red {
    color: #f0726f;
}

/* 커스텀 셀렉트 */
.main-contents.payment-delivery section.delivery .request .detail.request .custom-select {

}

/* 배송 요청사항 영역 끝 */

/* 배송방법 - 픽업일 때 배송방법 섹션 시작 */
.m-shop-payment .section--info-pickup {
    border-bottom: 8px solid #f0f1f4;

    & .title-container--section {
        gap: 10px;

        & .button--info {
            position: relative;
            align-items: center;
            gap: 6px;
            font-size: 13px;

            &:before {
                content: '';
                position: absolute;
                top: -10px;
                bottom: -10px;
                left: -5px;
                right: -5px;
            }
        }

        & .icon.info {
            width: 12px;
            height: 12px;
        }
    }

    .store-select-container {
        height: var(--height-form-element);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f0f1f4;
        padding: 0 10px;
        margin: 0 16px 10px;

        & .title {
            font-size: 13px;
            font-weight: 700;
        }

        & .button--store-change {
            height: 24px;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            border-radius: 2px;
            background-color: #fff;
            padding: 0 5px;
        }
    }

    .store-info__map {
        width: calc(100% - 32px);
        height: 280px;
        margin: 0 16px;
    }

    & .store-info__body {
        background-color: unset;
        padding: 0;

        & .title-container--between {
            align-items: center;
            padding: 0 16px;
            margin-top: 10px;

            & .button--favorite {
                align-items: center;
            }
        }
    }

    & .store-info__list {
        gap: 4px;
    }

    .flag.square {
        width: max-content;
        margin-top: 4px;
    }

    & .store-info--sub {
        border-bottom: none;
        padding: 0 16px 4px;
    }

    .notice__list--order-list {
        padding: 0 16px 16px;
    }

    .notice__item--order-list {
        color: var(--color-grey);
    }
}
/* 배송방법 - 픽업일 때 배송방법 섹션 끝 */

/* 주문상품 영역 시작 */
.main-contents.payment-delivery section.delivery > .info-container.product > .title-container .left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.main-contents.payment-delivery section.delivery > .info-container.product > .title-container .left .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.main-contents.payment-delivery section.delivery > .info-container.product > .title-container .left .top {
    & .text-container {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--color-grey-main);
        line-height: 20px;

        & .product-name {
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            @media (max-width: 428px) {
                max-width: 100px;
            }
        }

        & .product-amount {
            display: inline-block;
        }
    }
}

.main-contents.payment-delivery section.delivery > .info-container.product > .title-container .left .bottom {
    color: var(--color-grey);
}

/* 주문상품 섹션 버튼 넓이 조정 */
.main-contents.payment-delivery section.delivery > .info-container.product > .title-container .right button {
    width: 220px;

    @media (max-width: 428px) {
        width: 120px;
    }
}

/* 다른 detail 요소들과는 다르게, 항상 보이되, info-container 상태에 따라 display 값만 다르게 */
.main-contents.payment-delivery section.delivery > .info-container.product {
    & .detail {
        display: flex;

        /* '배송상품' 텍스트 active 전에는 안보이게 */
        & .title-container {
            display: none;
        }
    }

    & .product-container--horizontal {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        & .product--horizontal {
            width: unset;
            gap: 16px;
            flex-shrink: 0;
        }

        & .img-container {
            --size-image: 70px;
        }

        & .info-container {
            display: none;
        }
    }


}

/* '주문상품' 토글 버튼 눌렀을 때 레이아웃 */
.main-contents.payment-delivery section.delivery > .info-container.product.active {
    & .detail {
        display: flex;

        /* '배송상품' 텍스트 active 후에는 보이게 */
        & .title-container {
            display: unset;
        }
    }

    & .product-container--horizontal {
        flex-direction: column;
        gap: 16px;

        & .product--horizontal {
            width: 100%;
            flex-shrink: 0;

        }

        /* 제품 이미지 사이즈 설정 */
        & .img-container {
            --size-image: 76px;
        }

        & .info-container {
            width: calc(100% - 91px);
            height: unset;
            display: flex;
            align-items: center;

            & .text-container {
                gap: 6px;

                & .option {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                    font-size: 13px;
                    color: var(--color-grey-main);
                }
            }
        }
    }
}

.main-contents.payment-delivery section.delivery > .info-container.product .detail .title-container {
    font-weight: 700;
}

/* 주문상품 영역 끝 */

/* 쿠폰할인 영역 시작 */
.main-contents.payment-delivery .info-container.coupon .flag.square {
    width: 90px;
    height: 23px;
    font-size: 12px;
    color: #50585f;
    border: 1px solid #b2b8be;
    border-radius: 4px;
    background-color: #fff;
}
.main-contents.payment-delivery .info-container.coupon .checkbox-container {
    display: flex;
}

.main-contents.payment-delivery .info-container.coupon .checkbox-container li {
    width: 50%;
}

.main-contents.payment-delivery .info-container.coupon .checkbox-container li label {
    display: flex;
    align-items: center;
}

.main-contents.payment-delivery .info-container.coupon .checkbox-container li label .text {
    margin-left: 15px;
}

.main-contents.payment-delivery .info-container.coupon .select-container {
    display: flex;
    flex-direction: column;
}

.main-contents.payment-delivery .info-container.coupon .select-container .title {
    width: 25%;
    color: #292c33;
}

.main-contents.payment-delivery .info-container.coupon .select-container li {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.main-contents.payment-delivery .info-container.coupon .select-container li:last-child {
    gap: 20px;
    padding-bottom: 0;
}

.main-contents.payment-delivery .info-container.coupon .select-container .contents-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 쿠폰할인 영역 끝 */

/* 이벤트카드 영역 시작 */
.main-contents.payment-delivery section.delivery > .info-container.event-card .title-container .left {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.main-contents.payment-delivery section.delivery > .info-container.event-card .title-container .left .title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.main-contents.payment-delivery section.delivery > .info-container.event-card .title-container .left .text {
    font-size: 13px;
    font-weight: 400;
    color: #757D86;;
}

.main-contents.payment-delivery section.delivery .info-container .detail.event-card {
    gap: 5px;
}

.main-contents.payment-delivery .detail.event-card .text-container span {
    font-size: 13px;
    font-weight: 700;
}

.main-contents.payment-delivery .detail.event-card .text-container span.value {
    color: #ff5753;
}

.main-contents.payment-delivery .detail.event-card .input-btn-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-contents.payment-delivery .detail.event-card .input-container {
    height: var(--height-form-element);
    justify-content: flex-end;
    background-color: unset;
    border: 1px solid #e5e7ea;
    border-radius: 6px;
    padding: 0 10px;
    color: #99a1a8;
}

.main-contents.payment-delivery .detail.event-card .input-container.active {
    border-color: #505050;
    color: var(--color-black-main);
}

.main-contents.payment-delivery .detail.event-card .input-container input {
    text-align: right;
    color: var(--color-black-main);
}

.main-contents.payment-delivery .detail.event-card .input-container button {
    position: unset;
}

.main-contents.payment-delivery .detail.event-card .btn-container .btn.square {
    width: 90px;
    height: 42px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-black-main);
    background-color: #f0f1f4;;
}
/* 이벤트카드 영역 끝 */

/* 포인트/기프트카드 영역 시작 */
:where(.m-shop-payment) {
    .info-container.point-gift {

        .text--point-own {
            font-size: 13px;
            color: #666;
        }

        .text--point-will-use {
            margin-right: 20px;
        }
    }

    .detail.point-gift {
        .text-container {
            span {
                font-size: 13px;
                font-weight: 700;
            }

            .value {
                color: #ff5753;
            }
        }

        .input-btn-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 6px;
        }

        .input-container {
            height: 42px;
            justify-content: flex-end;
            background-color: unset;
            border: 1px solid #e5e7ea;
            border-radius: 6px;
            color: #99a1a8;
            padding: 0 10px;

            &:has(input:disabled) {
                opacity: 0.3;
                background-color: #f0f1f4;
            }

            &.active {
                border-color: #505050;
                color: var(--color-black-main);
            }

            input {
                width: 100%;
                height: 100%;
                color: var(--color-black-main);
            }

            button {
                position: unset;
            }
        }

        .btn-container .btn.square {
            width: 90px;
            height: 42px;
            font-size: 13px;
            font-weight: 500;
            color: var(--color-black-main);
            background-color: #f0f1f4;;

            &:disabled {
                color: #a1a1a1;
            }
        }
    }
}


/* 포인트/기프트카드 영역 끝 */

/* 최종 결제금액 영역 시작 */
.main-contents.payment-delivery .info-container.payment-summary .title-container .left {
    width: 100%;
    justify-content: space-between;
}

.main-contents.payment-delivery .info-container.payment-summary .title-container .left span.text {
    font-size: 14px!important;
    color: #131518!important;
    font-weight: 700!important;
}

/* 쿠폰할인 영역 */
.main-contents.payment-delivery section.delivery .info-container.coupon .left {
    width: 100%;

    & .text {
        margin-left: auto;
    }
}

/* 쿠폰할인 영역 토글 버튼 넓이 설정 */
.main-contents.payment-delivery section.delivery .info-container.coupon .right button {
    width: 90px;
}

/* 토글 버튼 넓이 설정 */

.main-contents.payment-delivery section.delivery .info-container.payment-summary .title-container .right button {
    width: 90px;
}

.main-contents.payment-delivery .detail.payment-summary {
    display: flex;
    flex-direction: column;
}

.main-contents.payment-delivery .detail.payment-summary .payment-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7ea;

    &:last-child {
        border-bottom: none;
    }

    & .text-container {
        display: flex;
        justify-content: space-between;

        & span {
            display: flex;
            align-items: center;
            color: var(--color-grey-main);

            &.text {
                font-size: 14px;
                font-weight: 500;
                line-height: 23px;
            }

            &.value {
                color: var(--color-black-main);


            }

            &.red {
                color: #FB4E4A;
            }

            &.purple {
                color: #996DFF;
            }
        }
    }

    & .discount-detail {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: var(--radius-main);
        background-color: #f6f6f6;
        padding: 10px 14px;

        & span {
            color: #888;

            &.text {
                display: flex;
                align-items: center;
                gap: 2px;
                line-height: 18px;
            }

            &.value {
                color: #996DFF;
            }
        }

        & .coupon-payment {
            width: 18px;
            height: 18px;
            background: url("/shop/common/image/mobile/icon/icon-coupon-payment.svg") center no-repeat;
            background-size: contain;
        }
    }

    &.delivery-fee button {
        height: 23px;
        font-size: 12px;
        color: #50585f;
        border-color: #b2b8be;
        padding: 0 10px;
        margin-left: 5px;
    }
}

.m-shop-payment .payment-info.final-price {
    gap: 32px;
}

.main-contents.payment-delivery .detail.payment-summary .payment-info.point {
    border-bottom: 1px solid #e5e7ea;
}

.main-contents.payment-delivery .detail.payment-summary .payment-info.final-price .text {
    font-size: 15px;
    font-weight: 700;
}

.main-contents.payment-delivery .detail.payment-summary .payment-info.final-price .value {
    font-size: 28px;
    font-weight: 700;
}

/* 할인받은 혜택 요소 */
.m-shop-payment .button--discount-amount {
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    color: #996DFF;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid #9AB0FA;
    border-radius: var(--radius-main);
    background: linear-gradient(90deg, rgba(132, 181, 254, 0.40) 0%, rgba(207, 135, 255, 0.40) 100%);
    margin-top: 16px;
}

/* 최종 결제금액 영역 끝 */

/* 결제수단 영역 시작 */
.main-contents.payment-delivery .method {
    display: flex;
    flex-direction: column;
}

.main-contents.payment-delivery .method .input-container {
    height: unset;
    justify-content: unset;
    gap: 10px;
    background-color: unset;
    border-radius: 0;
}

.main-contents.payment-delivery .method .input-container input {
    width: 20px;
    height: 20px;
    border: 1px solid #dadde0;
    border-radius: 50%;
}

.main-contents.payment-delivery .method .input-container input:checked {
    background: #fff url("/shop/common/image/icon/icon-checkbox-active.svg") 0 0 no-repeat;
    background-size: contain;
}

.main-contents.payment-delivery .method .input-container button.info {
    width: 14px;
    height: 14px;
}

.main-contents.payment-delivery .method.fast .method-list {
    display: none;
}

.main-contents.payment-delivery .method.fast.active .method-list {
    display: flex;
}

.main-contents.payment-delivery .method.fast .method-list ul {
    width: 100%;
    display: flex;
    gap: 30px;
    overflow-x: auto;
}

.main-contents.payment-delivery .method.fast .method-list ul::-webkit-scrollbar {
    display: none;
}

.main-contents.payment-delivery .method.fast .method-list ul li {
    width: 250px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #dadde0;
    border-radius: 6px;
}

.main-contents.payment-delivery .method.fast .method-list ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.payment-delivery .method.fast .method-list ul li .btn.add {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.main-contents.payment-delivery .method.fast .method-list ul li .btn.add .icon {
    width: 50px;
    height: 50px;
    border: 1px solid #dadde0;
    border-radius: 50%;
    background-size: 15px;
}

.main-contents.payment-delivery .method.fast .method-list ul li .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #50585f;
}

.main-contents.payment-delivery .method.fast .method-list ul li .img-container {
    overflow: hidden;
}

.main-contents.payment-delivery .method.fast .method-list ul li .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-contents.payment-delivery .method.fast > ul.text-container {
    display: none;
    width: calc(100% + 30px);
    background-color: #f6f7f9;
    padding: 20px 15px;
    transform: translateX(-15px);
}

.main-contents.payment-delivery .method.fast.active > ul.text-container {
    display: block;
}

.main-contents.payment-delivery .method.fast > ul.text-container li {
    font-size: 12px;
    color: #7f8c8d;
}

.main-contents.payment-delivery .method.normal .method-list {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
}

.main-contents.payment-delivery .method.normal.active .method-list {
    display: flex;
}

.main-contents.payment-delivery .method.normal .method-list li {
    position: relative;
    width: calc(25% - 6px);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dadde0;
    border-radius: 4px;
}

.main-contents.payment-delivery .method.normal .method-list li.active {
    border-color: #82dc28;
    background-color: #82dc28;
}

.main-contents.payment-delivery .method.normal .method-list li .text {
    font-size: 13px;
    color: #3a3e45;
}

.main-contents.payment-delivery .method.normal .method-list li.active .text {
    font-weight: 700;
    color: #fff;
}

.main-contents.payment-delivery .method.normal .method-list li .flag {
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
}

.main-contents.payment-delivery .method.normal .text-container.info {
    width: calc(100% + 30px);
    display: none;
    background-color: #f6f7f9;
    padding: 20px 15px;
    transform: translateX(-15px);
}

.main-contents.payment-delivery .method.normal .text-container.info.active {
    display: block;
}

.main-contents.payment-delivery .method.normal .text-container.info li {
    display: none;
}

.main-contents.payment-delivery .method.normal .text-container.info li.active {
    display: flex;
}

.main-contents.payment-delivery .method.normal .text-container.info li.credit-card {
    flex-direction: column;
    gap: 10px;
}

.main-contents.payment-delivery .method.normal .text-container.info select {
    height: var(--height-form-element);
    color: #99a1a8;
    border-color: #dadde0;
    background-color: #fff;
    padding: 0 15px;
}

.main-contents.payment-delivery .method.normal .text-container.info select:focus {
    border-color: var(--color-black-main);
    color: var(--color-black-main);
}

.main-contents.payment-delivery .method.normal .text-container.info .notice-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.main-contents.payment-delivery .method.normal .text-container.info .notice-container .text {
    font-size: 12px;
    color: #757d86;
}

.main-contents.payment-delivery .method.normal .text-container.info li.transfer {
    flex-direction: column;
}

/* 결제수단 영역 끝 */

/* 배송지, 약관동의 시작 */

.main-contents.payment-delivery section.delivery > .info-container.agreement {
    border-bottom: none;
}

.main-contents.payment-delivery .info-container.agreement .delivery.destination {
    display: flex;
    gap: 8px;
}

.main-contents.payment-delivery section.delivery .info-container.agreement .title-container {
    align-items: flex-start;

    label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;

        & input {
            margin-bottom: 2px;
        }
    }

    & .left {
        flex-direction: column;
        align-items: flex-start;
    }

    & .right {
        position: absolute;
        right: 15px;
        transform: translateY(-10px);
    }
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container {
    display: none;
    flex-direction: column;
    gap: 10px;
    border-radius: 4px;
    padding: 20px 15px;
    background-color: #f6f7f9;
}

.main-contents.payment-delivery .info-container.agreement.active .detail.agreement .contents-container {
    display: flex;
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container .title {
    font-size: 15px;
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container .label-container {
    display: flex;
    justify-content: space-between;
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container label {
    display: flex;
    gap: 8px;
    color: #757D86;

    & input {
        transform: translateY(-1px);
    }

    & .text {
        font-size: 13px;
        line-height: 20px;
    }
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container label input {
    flex-shrink: 0;
}

.main-contents.payment-delivery .info-container.agreement .detail.agreement .contents-container .label-container a {
    font-size: 11px;
    color: #99a1a8;
    line-height: 20px;
    text-decoration: underline;
}
/* 배송지, 약관동의 끝 */

/* 하단 버튼 영역 시작 */
.main-contents.payment-delivery .btn-container.bottom {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding:0 15px;
}

.main-contents.payment-delivery .btn-container.bottom button {
    width: 100%;
    font-size: 18px;
}

.main-contents.payment-delivery .btn-container.bottom .notice {
    font-size: 12px;
    color: #f4c212;
}
/* 하단 버튼 영역 끝 */
/* m_shop_payment.html 설정 끝 */

/* m_shop_payment_coupon_layer.html 시작 */
.m-shop-payment-coupon-layer {

    & .coupon__list {
        max-height: 500px;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* m_shop_payment_coupon_layer.html 끝 */

/* m_shop_payment_point_layer.html 시작 */
.m-shop-payment-point-layer {
    & .notice__list--order-list {
        padding: 0;
        gap: 4px;
    }

    & .notice__item--order-list {
        font-size: 14px;
    }


}
/* m_shop_payment_point_layer.html 끝 */

/* m_shop_payment_delivery_fee_layer.html 시작 */
.m-shop-payment-delivery-fee-layer {
    gap: 0;
    padding: 0;

    & .modal__header {
        border-bottom: 1px solid #f0f1f4;
        padding: 16px;
    }

    & .modal__body {
        padding: 16px;

        & .text--delivery-method {
            font-size: 15px;
            padding-bottom: 10px;
        }
    }

    & .modal__footer {
        padding: 0 16px;
    }

    & .delivery-fee {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;

        & .delivery-fee__header {
            font-weight: 400;
        }

        & .delivery-fee__body {
            font-weight: 600;
        }

        &.top {
            border-top: 1px solid #f0f1f4;
            padding-top: 10px;
        }

        &.detail {
            position: relative;
            font-size: 12px;
            color: var(--color-light-grey);
            padding-left: 25px;
            margin-top: 4px;

            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 13px;
                width: 2px;
                height: 2px;
                border-radius: 50%;
                background-color: var(--color-light-grey);
                transform: translateY(-50%);
            }
        }

        &.condition {
            justify-content: flex-end;
            font-size: 11px;
            color: var(--color-light-grey);
            margin-top: 30px;
        }

        &.summary {
            font-weight: 700;
            border-top: 1px solid #f0f1f4;
            padding-top: 10px;
            margin-top: 10px;

            & .delivery-fee__header,
            & .delivery-fee__body {
                font-weight: 700;
            }
        }
    }

    & .delivery-fee.bottom {
        padding: 10px 0 16px 0;
        border-top: 1px solid #99a1a8;

        & .delivery-fee__header {
            font-size: 15px;
            font-weight: 700;
        }

        & .delivery-fee__body {
            font-size: 18px;
            font-weight: 700;
            color: #ff5753;
        }
    }
}
/* m_shop_payment_delivery_fee_layer.html 끝 */

/* m_modal_popup_shop_payment_delivery_method.html 시작 */
/* 주문/결제 페이지에서 배송지 변경 모달창 */
.modal__contents--shop-payment-delivery-method {
    gap: 0;
    padding: 0;
}
.modal__contents--shop-payment-delivery-method .modal__header {
    padding: 16px;
}

.modal__contents--shop-payment-delivery-method .modal__body {
    max-height: 400px;
    border-top: 1px solid #ddd;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__contents--shop-payment-delivery-method .modal__body::-webkit-scrollbar {
    display: none;
}

.card__list--delivery-method {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card__item--delivery-method {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card__header--delivery-method {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 35px;
}

.card__header--delivery-method .title-container {
    align-items: flex-start;
}

.modal__contents--shop-payment-delivery-method .button--edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.card__body--delivery-method {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    padding: 0 35px 0 26px;
}

.modal__contents--shop-payment-delivery-method .button-container--bottom {
    padding: 16px;
}
/* m_modal_popup_shop_payment_delivery_method.html 끝 */

/* m_product_view.html 시작 */
.m-product-view {
    margin-top: 50px;

    .product-delivery-info-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .benefit-badge-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .badge--benefit {
        width: 100%;

        .badge__list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .badge__item {
            width: 100%;
            height: 42px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 6px;
            border-radius: 5px;
            background: #F0F1FF;
            padding: 0 16px;
        }

        .badge__icon {
            width: 16px;
            aspect-ratio: 1;
            background: url("/shop/common/image/mobile/icon/icon-sparkle-active.svg") center no-repeat;
            background-size: contain;
            animation: couponSparkle 4s ease-in-out infinite;
        }

        .badge__text {
            font-size: 14px;
            font-weight: 600;
            color: #6442DB;
        }
    }

    .badge--coupon-benefit {
        width: 100%;

        .badge__list {
            width: 100%;
        }

        .badge__item {
            width: 100%;
            height: 42px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 6px;
            border-radius: 5px;
            background: #FCF8FF;
            padding: 0 16px;
        }

        .badge__icon {
            width: 21px;
            aspect-ratio: 1;
            background: url("/shop/common/image/mobile/icon/icon-coupon-product-view.svg") center no-repeat;
            background-size: cover;
            will-change: transform;
            animation: couponSpin 2.5s infinite;
        }

        .badge__text {
            font-size: 14px;
            font-weight: 600;
            color: #A24BFF;
        }
    }

    .tab--delivery-method {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .tab__list {
            position: relative;
            width: calc(100% - 30px);
            display: flex;
            align-items: center;
            border-radius: 100px;
            background: #F3F3F3;
            margin-bottom: -18px;
            z-index: 1;
        }

        .tab__item {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #F3F3F3;
            border: 1px solid transparent;
            border-radius: 100px;

            &.is-active {
                border-color: #ddd;
                background-color: #fff;
            }
        }

        .tab__panel {
            width: 100%;
            display: none;
            border: 1px solid #E5E7EA;
            border-radius: 5px;
            padding: 40px 16px 24px;

            &.is-active {
                display: block;
            }
        }

        .delivery-lifo__list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .delivery-info__item {
            display: flex;
            gap: 20px;
        }

        .delivery-info__header {
            width: 70px;
            flex-shrink: 0;
            color: #757d86;
        }

        .delivery-info__body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            color: #303030;
        }

        .text--highlight {
            font-weight: 600;
            color: #6442DB;
            line-height: 1.3;
        }
    }

    /* 유통사 구매 가격 안내 stat */
    .stat--distributor-price {
        border-radius: 5px;
        background-color: #F6F6F6;
        padding: 10px 14px;

        .stat__list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .stat__item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #888;
        }

        .stat__header {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .badge--purchase-price {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            border-radius: 100px;
            background: #F27370;
        }

        .stat__body {
            display :flex;
        }
    }
}

.m-product-view .banner__slide--main {
    container-type: inline-size;
    container-name: product-image-container;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;

    &.banner__slide--video {
        aspect-ratio: 16/9;
    }

    /* 이미지 소스가 없을 때 opacity: 0; */
    img[src=""], img:not([src]) {
        opacity: 0;
    }

    /* 이미지 소스가 없을 때 background에 기본 이미지 출력 */
    &:has(img[src=""]), &:has(img:not([src])) {
        background: url("/shop/common/image/mobile/image-empty-state-product-rectangle.svg") center no-repeat;
        background-size: cover;
    }
}

.m-product-view .banner__image--main {
    height: 400px;
    aspect-ratio: 1;
    object-fit: cover;

}

/* 메인 스와이퍼 커스텀 nav 버튼 설정 시작 */
.swiper__custom-nav--banner-main {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 75px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: rgba(19,21,24,.6);
    border-radius: 10px;
    transform: translateX(-50%);
    z-index: 10;
}

.swiper__custom-nav--banner-main button {
    width: 50%;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.swiper__custom-nav--banner-main .swiper__custom-prev-button--banner-main {
    justify-content: flex-end;
    color: #fff;
}

.swiper__custom-nav--banner-main .swiper__custom-next-button--banner-main {
    justify-content: flex-start;
    color: #c9cdd2;
}

.swiper__custom-nav--banner-main .icon.angle.right {
    width: 12px;
    height: 12px;
}

.swiper__custom-prev-button--banner-main .icon.angle {
    transform: rotateY(180deg);
}
/* 메인 스와이퍼 커스텀 nav 버튼 설정 끝 */

.card--product-view .button--find-store-nearby {
    width: 100%;
    height: 42px;
    justify-content: center;
    align-items: center;

    & .angle.right {
        margin-bottom: 2px;
    }
}

.m-product-view .section--product-recommend {
    gap: 10px;
}

.product-explanation {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    scroll-margin-top: 50px;

    .product-explanation__header {
        width: 100%;
    }

    .title-container--section {
        min-height: unset;
        padding: 16px 16px 2px;
    }
}

.product-explanation__image-container {
    max-height: 780px;
    overflow: hidden;

    /* 제품 상세 이미지 width 꽉 차게 */
    & .mce-content-body {
        img {
            width: 100%;
            object-fit: cover;
        }
    }
}

.product-explanation:has(input:checked) .product-explanation__image-container {
    max-height: unset;
}

.product-explanation__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-explanation__notice {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-grey);
    text-align: center;
    padding: 15px;
}

.product-explanation__shadow {
    position: absolute;
    bottom: 42px; /* label 높이 만큼 아래에서 띄워줍니다. */
    width: 100%;
    height: 160px;
    background: linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}

.product-explanation:has(input:checked) .product-explanation__shadow {
    display: none;
}

.label--product-explanation {
    position: relative;
    width: calc(100% - 30px);
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #50585f;
}

.label--product-explanation:has(input:checked) .angle.down {
    transform: rotateX(180deg);
}

.m-product-view .product-container--wrap .product {
    width: calc((100% - 20px) / 3);
    min-width: unset;
}

.m-product-view .product-container--wrap .product .img-container {
    width: 100%;
}

/* 연관상품 설정 시작 */
.m-product-view .section--related-product {
    gap: 16px;
    padding: 25px 0 15px;

    & .title-container--main {
        padding: 0 15px;
    }

    & .product-container {
        padding: 0 15px;
    }
}

/* swiper--product-horizon 시작 */
.swiper--product-horizon {
    width: 100%;
}

.swiper__button-container--product-horizon {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.swiper__custom-next-button--product-horizon {
    height: 41px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #50585f;
    border-radius: 43px;
    padding: 0 18px;
}

.swiper__text-container--slide-number {
    display: flex;
    align-items: center;
    gap: 4px;
}

.swiper__total-slide--product-horizon {
    color: #b2b8be;
}
/* swiper--product-horizon 끝 */
/* 연관상품 스와이퍼 설정 끝 */

/* product_view 내 리뷰 탭 시작 */
:where(.m-product-view) {
    :where(.section--product-info) {
        .qa--product-view {
            scroll-margin-top: 50px;
        }

        .tab--underline {
            &.is-sticky {
                position: sticky;
                top: 0;
                left: 0;
                width: 100%;
                background-color: #fff;
                transition: top 0.3s ease-out;
                z-index: 10;
            }
        }

        .title--section-sub {
            font-weight: 700;
        }

        /* 사진 전체보기, 상품 Q&A 작성 버튼 등 */
        .button--title-action {
            font-weight: 500;
            color: #999;
        }

        .button--bottom-main {
            height: 42px;
            font-size: 14px;
        }
    }

    /* 리뷰 탭 */
    :where(.review--product-view) {
        scroll-margin-top: 100px;

        .section--sub {
            padding: 0 16px;
        }


        .rating__body {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .rating__distribution {
            gap: 2px;
        }

        .rating__distribution-item {
            gap: 8px;
        }

        .rating__distribution-percent {
            color: unset;
        }

        .title-container--section {
            border-width: 1px;
            padding: 0;
        }

        :where(.section--review-photo-list) {
            .attachment__list--image {
                width: 100%;
                gap: 8px;
                padding: 0 0 16px;
            }

            .attachment__item--image {
                width: calc((100% - 24px) / 4);
                height: unset;
                aspect-ratio: 1;
            }

            .button--view-more-review {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                font-weight: 600;
                color: #fff;
                border-radius: var(--radius-main);
                background-color: rgba(0, 0, 0, 0.5);
            }
        }

        /* 리뷰 탭 */
        .review--compact {
            .review__item {
                display: flex;
                flex-direction: column;
                gap: 8px;
                border-top: 1px solid #eee;
                padding: 16px 0;
            }

            .review__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .review__header-left {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .review__rating {
                display: flex;
                align-items: center;
                gap: 2px;
            }

            .review__rating-image {
                width: 14px;
                aspect-ratio: 1;
            }

            .review__rating-text {
                line-height: 1;
            }

            .review__author {
                position: relative;
                display: flex;
                align-items: center;
                gap: 6px;

                &:before {
                    content: '';
                    display: inline-block;
                    width: 1px;
                    height: 10px;
                    background-color: #aaa;
                }
            }

            .review__date {
                color: #888;
            }

            .review__body {
                display: flex;
                justify-content: space-between;
                gap: 16px;
            }

            .review__contents-text {
                height: 58px;
                line-height: 1.4;
            }

            .review__image-container {
                width: 70px;
                aspect-ratio: 1;
                flex-shrink: 0;
            }

            .review__image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }
        }

        .button-container--bottom {
            padding: 0;
        }

        .button--see-all-review {
            height: 42px;
            gap: 4px;
            color: #50585f;
        }

    }

}
/* 리뷰 사진 전체보기 모달창 */
.review-all-photo.modal__contents {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
    padding-top: env(safe-area-inset-top);
}

.modal__header--review-all-photo {
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;

    .modal__button--close {
        position: absolute;
        top: 50%;
        left: 16px;
        translate: 0 -50%;
    }

    .modal__header-title {
        font-size: 16px;
    }
}

.modal__body--review-all-photo {
    height: 100%;
    padding: 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__body--review-all-photo .attachment__list--image {
    gap: 5px;
    flex-wrap:  wrap;
    overflow-x: unset;
}

.modal__body--review-all-photo .attachment__item--image {
    width: calc((100% - 10px) / 3);
    height: unset;
    aspect-ratio: 1;
}
/* product_view 내 리뷰 탭 끝 */

/* 제품상세 내 하단 버튼 컨테이너 시작 */
.m-product-view .button-container--bottom-fixed {
    flex-direction: column;
    gap: 24px;
    border-radius: 18px 18px 0 0;
    padding-bottom: 12px;
    box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.10);
}

.m-product-view .button-container--bottom-fixed .button-container--bottom-fixed {
    flex-direction: column;
    padding-top: 0;
}

.m-product-view .button-container--bottom-fixed .accordion__item--product-view {
    align-items: center;
    gap: 24px;

    &.first {
        gap: 12px;
    }
}

.m-product-view .button-container--bottom-fixed .accordion__header--product-view {
    width: 100px;
    height: 21px;
    justify-content: center;
    align-items: flex-end;
}

.m-product-view .button-container--bottom-fixed .accordion__header--product-view .angle.down {
    transform: rotateX(180deg);
}

.m-product-view .button-container--bottom-fixed .accordion__header--product-view:has(input:checked) .angle.down {
    transform: unset;
}

.m-product-view .button-container--bottom-fixed .accordion__body--product-view {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.m-product-view .button-container--bottom-fixe.m-product-view .button-container--bottom-fixed .accordion__item.second .accordion__headerd .accordion__item--product-view.first .accordion__body--product-view {
    border-bottom: 1px solid #ddd;
    padding-bottom: 24px;
}

.m-product-view .button-container--bottom-fixed .accordion__item.second .accordion__header {
    width: 100%;

    .input--checkbox-accordion-toggle {
        margin-bottom: 4px;
    }
}

.m-product-view .button-container--bottom-fixed .accordion__item.second .accordion__body {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #ddd;
}

.m-product-view .button-container--bottom-fixed .accordion__item--product-view .text--address-new {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 제품상세 내 하단 버튼 컨테이너 끝 */

/* 사용법 보러가기 버튼 시작 */
.button-container--product-usage-guide {
    position: fixed;
    bottom: 220px;
    right: calc(50% - 384px + 15px);
    z-index: 10;

    @media (width <= 768px) {
        right: 20px;
    }

    .button--product-usage-guide {
        width: 60px;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        line-height: 1.2;
        border-radius: 50%;
        background: #FFC000;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    }
}
/* 사용법 보러가기 버튼 끝 */

/* 제품 다른 옵션 리스트 시작 */
.m-product-view {
    .product-container--other-option {
        .product {
            width: 100px;
            min-width: unset;
            flex-shrink: 0;
            gap: 8px;

            /* 현재 선택한 옵션인 경우 border-color 변경 */
            &.is-active {
                .img-container {
                    border-color: #B4C6FF;
                }
            }

            &:hover {
                .img-container {
                    border-color: #B4C6FF;
                }
            }
        }

        .badge--promotion {
            left: unset;
            right: 0;

            .badge__item {
                min-width: unset;
                border-radius: 0 3px 0 0;
                background: rgba(132, 134, 255, 0.80);
                padding: 0 4px;
            }

            .badge__text {
                font-size: 10px;
                color: #fff;
            }
        }

        .badge--today-deliver {
            top: unset;
            bottom: 0;
            left: 0;
            height: unset;
            padding: 0;

            .badge__item {
                border-radius: 0 0 0 3px;
                background: rgba(251, 78, 74, 0.80);
            }

            .badge__text {
                color: #fff;
            }
        }


        .img-container {
            border: 1px solid #f8f8f8;
            border-radius: 3px;
            transition: border-color 0.2s ease-in-out;
        }


        .info-container {
            height: unset;
        }

        .name {
            font-size: 12px;
        }
    }
}
/* 제품 다른 옵션 리스트 끝 */

/* 제품상세 띠배너 시작 */
.m-product-view {
    .section--banner-thin-solid-2 {
        padding: 0 15px;
    }
}
/* 제품상세 하단 띠배너 끝 */
/* m_product_view.html 끝 */

/* m_product_view_layer.html 시작 */
.tooltip-container[data-tooltip-theme="m-product-view-layer"] {
    position: absolute;
    top: 0;
    left: 50%;
}

.tooltip[data-tooltip-theme="m-product-view-layer"] {
    max-width: unset;
    height: 30px;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    background-color: #4059FF;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    padding: 0 30px 0 10px;
    transform-origin: unset;
    animation: tooltip-bounce 1.5s alternate;


    &::before {
        content: "";
        position: absolute;
        left: 35px; /* 1px 정도 안으로 */
        bottom: -11px; /* 1px 정도 위로 */
        width: 0;
        height: 0;

        border-left: 6px solid transparent;
        border-right: 2px solid transparent;
        border-top: 11px solid #4059FF;

        transform: skewX(-12deg);
    }

    .tooltip__text {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        margin-left: 4px;
    }

    .tooltip__button--close {
        top: 50%;
        right: 10px;
        width: unset;
        height: unset;
        translate: 0 -50%;
        &:before {
            content: '';
            position: absolute;
            inset: -10px;
        }


        .icon {
            width: 10px;
            height: 10px;
        }
    }

    .tooltip__arrow {
        display: none;
    }
}

.m-product-view-layer {
    gap: 16px;

    .modal__header {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .title-container {
            display: flex;
            justify-content: center;
        }

        .icon {
            width: 36px;
            height: 4px;
            background-color: #ddd;
            border-radius: 100px;
        }
    }

    .tab--delivery-type {
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
    }

    .tab__item--pill {
        height: 37px;
        line-height: 37px;
        border-color: #E4E4E4;
        padding: 0 20px;

        &:has(input:checked) {
            font-weight: 600;
            color: #fff;
        }
    }

    .modal__body {
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
    }

    .modal__body--out-of-delivery-time {
        display: flex;
        flex-direction: column;
        border: none;
        padding-bottom: 0;

        .text--caution {
            font-size: 14px;
            color: #FB7272;
            line-height: 1.3;
        }
    }

    .delivery-notice {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #eee;
        padding-top: 12px;
        margin-top: 12px;

        .text--caution {
            color: #5783C5;
            line-height: 1.3;
        }
    }

    .modal__footer {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .amount-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }

    .delivery-destination {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .delivery-destination__header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.6;
        }

        .badge--outline {
            height: 21px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #666;
            font-size: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 0 4px;
        }
    }

    .delivery-destination__body {
        position: relative;
    }

    /* 택배 당일 발송 안내 요소 시작 */
    .parcel-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
        background: #F9F9F9;
        padding: 13px 12px;
    }

    .parcel-notice__header {
        width: 44px;
        aspect-ratio: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: linear-gradient(126deg, #4BE4FF 18.29%, #9A6DF4 80.5%);
    }

    .parcel-notice__body {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .parcel-notice__text {
        font-size: 13px;
        color: #888;

        .text--highlight {
            font-size: 14px;
            font-weight: 600;
        }

        .text--today-ship {
            color: #202020;
        }

        .text--remain-time {
            display: inline-block;
            width: 62px;
            color: #22A3FF;
        }

        .text--will-ship-date {
            color: #22A3FF;
        }
    }

    /* 택배 당일 발송 안내 요소 끝 */

    .progress--purchase-proceed {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .progress__track {
            position: relative;
            width: 100%;
            height: 10px;
            border-radius: 100px;
            background-color: #EFEFFF;
        }

        .progress__bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 40%;
            max-width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: #E1DEFF;
            transition: width 0.3s ease-in-out;
        }

        .progress__condition-container {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 600;
        }

        .progress__text-container {
            display: flex;
            align-items: center;
        }

        .progress__text {
            color: #8486FF;
        }

        &.is-parcel {
            .progress__track {
                background-color: #E8F1FF;
            }

            .progress__bar {
                background-color: #BDD7FF;
            }

            .progress__text {
                color: #4F91F4;
            }
        }
    }

    .button--change-destination {
        color: #666;
        font-size: 14px;
    }

    .pickup-store {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pickup-store__name {
        font-size: 16px;
        font-weight: 700;
    }

    .button--change-pickup-store {
        height: 29px;
        padding: 0 16px;
    }

    /* N+N 기준 충족했을 때 텍스트 */
    .promotion__text {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #4059FF;

        .promotion__icon {
            width: 18px;
            aspect-ratio: 1;
        }

        /* N+N 기준 미달할 때 텍스트 */
        &.is-multi {
            color: #47A1FF;
        }
    }

    /* 옵션 선택 영역 */
    .modal__body--option-select {
        max-height: 300px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border: none;
        overflow: auto;

        .option-overview {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .option-overview__button--chane-option {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            color: #ccc;
            line-height: 40px;
            border: 1px solid #E1E1E1;
            border-radius: 8px;
            background: url("/shop/common/image/mobile/icon/icon-angle-down.svg") calc(100% - 16px) center no-repeat;
            padding: 0 16px;
        }

        .option-overview__body {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .selected-option {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-radius: 8px;
            background: #F3F3F3;
            padding: 12px 16px;
        }

        .selected-option__button--delete {
            position: absolute;
            top: 12px;
            right: 13px;
            display: flex;

            &:before {
                content: '';
                position: absolute;
                inset: -12px;
            }
        }

        .selected-option__list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .selected-option__item {
            width: 100%;

            .option__product-name {
                max-width: calc(100% - 20px);
                display: inline-block;
            }
        }

        .quantity-control {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text--total-price {

            }
        }


    }

    .text--set-product-amount {

    }
}
/* m_product_view_layer.html 끝 */

/* m_product_view_coupon_layer.html 시작 */
.m-product-view-coupon-layer {
    font-size: unset;

    & .coupon__list {
        max-height: 50vh;
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* m_product_view_coupon_layer.html 끝 */

/* m_my_page_delivery.html 시작 */
.m-my-page-delivery {
    margin-top: 50px;
}
/* m_my_page_delivery.html 끝 */

/* m_my_page_delivery_view.html 시작 */
.m-my-page-delivery-view {
    margin-top: 50px;
}

.delivery-status--delivery-view {
    width: 100%;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    background: rgba(90, 149, 239, 0.20);
    padding: 0 16px;
}

.delivery-progress__list {
    width: 100%;
    height: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.delivery-progress__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #666;
}

/* __item 요소에 active 클래스 추가 시, 컬러 변경 */
.delivery-progress__item.active {
    font-weight: 700;
    color: #4884e0;

}

/* __item 요소에 active 클래스 추가 시 배송상태 아이콘 색 변경 */
.delivery-progress__item.active .icon.package {
    background: url("/shop/common/image/mobile/icon/icon-package-active.svg") center center no-repeat;
}

.delivery-progress__item.active .icon.delivery-car {
    background: url("/shop/common/image/mobile/icon/icon-delivery-car-active.svg") center center no-repeat;
}

.delivery-progress__item.active + .icon.angle.delivery-progress {
    background: url("/shop/common/image/mobile/icon/icon-angle-right-delivery-progress-active.svg") center center no-repeat;
}

.m-my-page-delivery-view .card__product-info--order-list {
    padding: 20px 16px;
}

.delivery-tracking__header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.delivery-tracking__header-title {
    font-weight: 600;
}

.delivery-tracking__header .title-container--main {
    width: 100%;
}

.delivery-tracking__body {
    border-top: 1px solid #ddd;
    padding: 16px;
}

.delivery-tracking__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delivery-tracking__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-black-main);
}

.delivery-tracking__item-title {
    width: 76px;
    color: #666;
}

/* 배송 상세 현황 시작 */
.delivery-tracking__item--detail {
    gap: 20px;
    align-items: center;
}

.delivery-tracking__date-container--detail {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #666;
}
/* m_my_page_delivery_view.html 끝 */

/* m_my_page_delivery_photo.html 시작 */
.m-my-page-delivery-photo {
    margin-top: 50px;
    padding: 20px 16px;
}

.m-my-page-delivery-photo .delivery-photo-container {
    width: 100%;

}

.m-my-page-delivery-photo .delivery-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-main);
}

.m-my-page-delivery-photo .button-container--bottom {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
}

.m-my-page-delivery-photo .button-container--bottom button {
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}
/* m_my_page_delivery_photo.html 끝 */

/* m_my_page_delivery_reject_list.html 시작 */
.m-my-page-delivery-reject-list {
    margin-top: 50px;
}
.m-my-page-delivery-reject-list .filter__item--no-border {
    background-position-x: calc(100% - 16px);
}
.m-my-page-delivery-reject-list .card__list--order-list {
    border-top: 5px solid #eee;
}

.m-my-page-delivery-reject-list .card__item--order-list:first-child {
    padding-bottom: 8px;
}

.m-my-page-delivery-reject-list .card__item--order-list:not(:first-child) {
    padding: 8px 20px;
}
/* m_my_page_delivery_reject_list.html 끝 */

/* m_my_page_delivery_reject_edit.html 시작 */

.m-my-page-delivery-reject-edit {
    margin-top: 50px;
}

.product-select__header {
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding: 0 16px;
}

.product-select__body {
    padding: 16px;
}

.product-select__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-select__item {
    display: flex;
    gap: 16px;
}

.product-select__item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-select__amount-price-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-select__amount-price-container .filter__item {
    width: 76px;
}

.product-select__price {
    color: #fb4e4a;
    font-weight: 600;
}
/* m_my_page_delivery_reject_edit.html 끝 */

/* m_my_page_delivery_cancel_view.html 시작 */
.m-my-page-delivery-cancel-view {
    margin-top: 50px;

    /* 컴포넌트화 되버려서, 해당 페이지 내에서만 레이아웃 설정 */
    .order-info-container--cancel-view {
        padding: 16px;
    }

    .order-info--cancel-view {
        align-items: unset;
    }
}

/* 다른 페이지에서도 많이 쓰는중. 컴포넌트로 승격시켜야함 -clover */
.order-info-container--cancel-view {
    min-height: 59px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid #ddd;
    padding: 0 16px;

    .button--delivery-search {
        margin-left: auto;
    }
}

/* 다른 페이지에서도 많이 쓰는중. 컴포넌트로 승격시켜야함 -clover */
.order-info--cancel-view {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-info__text-grey {
    max-width: calc(100% - 100px);
    color: var(--color-grey-main);
}

.order-info-container--cancel-view .button--light-grey {
    height: 27px;
    color: #666;
    line-height: 27px;
    border-color: #ddd;
}

.modal__contents.cancel-view {
    gap: 24px;
}
/* m_my_page_delivery_cancel_view.html 끝 */

/* m_my_page_delivery_refund_edit.html 시작 */
.m-my-page-delivery-refund-edit {

    & .radio__list {
        width: 100%;
        height: 58px;
        gap: 16px;
        padding: 0 16px;
    }

    & .radio__item {
        width: 50%;
        align-items: center;
    }

    & .textarea--address {
        min-height: unset;
    }
}
/* m_my_page_delivery_refund_edit.html 끝 */

/* m_my_page_delivery_refund_complete.html 시작 */
.m-my-page-delivery-refund-complete {
    margin-top: 50px;


}

.m-my-page-delivery-refund-complete .confirmation-screen {
    height: 374px;
}
/* m_my_page_delivery_refund_complete.html 끝 */

/* m_shop_payment_complete.html 시작 */
.m-my-page-delivery-order-complete {
    margin-top: 100px;
}

.m-my-page-delivery-order-complete .confirmation-screen {
    /*height: 270px;*/
    padding: 16px 0;
}

.m-shop-payment-complete {
    margin-bottom: 30px;

    .notice__item--order-list {
        line-height: 19px;
    }

    .order-info__item-header {
        min-width: 80px;
    }

    .confirmation-screen__pickup-guide {
        width: 100%;
        font-size: 12px;
        font-weight: 700;
        color: #3679dd;
        border-top: 1px solid #dfdfdf;
        padding-top: 10px;
        margin-top: 10px;
    }
}
/* m_shop_payment_complete.html 끝 */

/* m_my_page_delivery_order_view.html 시작 */
.m-my-page-delivery-order-view {
    margin-top: 50px;

    & .button-container--bottom-fixed {
        box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.10);
    }
}

.m-my-page-delivery-order-view .card__item--order-list {
    line-height: 17px;
    border-top: 1px solid #ddd;
}

.m-my-page-delivery-order-view .order-info__item-header {
    width: 80px;
}

.m-my-page-delivery-order-view .order-info__item-header--between {
    width: unset;
}
/* m_my_page_delivery_order_view.html 끝 */

/* m_my_page_review_edit.html 시작 */
/* column 형태 아닐 시 패딩 설정 */
.m-my-page-review-edit {
    margin-top: 50px;
    margin-bottom: 100px;
}

.m-my-page-review-edit .card__product-info--order-list {
    padding: 16px;
    transition: all 0.3s ease;
}

.m-my-page-review-edit .card__product-info--order-list.column {
    /*height: 400px;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.m-my-page-review-edit .card__product-info--order-list .card__product-image-container--order-list {
    transition: all 0.3s ease;
}

.m-my-page-review-edit .card__product-info--order-list.column .card__product-image-container--order-list {
    width: 162px;
    height: 162px;
}


.card__product-info--order-list.column .card__product-info-text-list {
    width: 280px;
    align-items: center;
}

.card__product-info--order-list.column .card__product-info-text-item {
    text-align: center;
}

.m-my-page-review-edit .rating-container {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 20px;
    font-weight: 600;
    border-color: transparent;
    border-bottom: none;
    /*padding-top: 20px;*/
}

.m-my-page-review-edit .rating-container:has(input:checked) {
    border-top: 5px solid #eee;
}

.m-my-page-review-edit .rating__list {
    gap: 22px;
}

.accordion__header--review-edit {
    border-radius: var(--radius-main);
    background-color: #F6F7F9;
    padding: 10px;
}

.accordion__header--review-edit:has(input:checked) {
    border-radius: 5px 5px 0 0;
}

.accordion__header--review-edit:has(input:checked) .angle.down {
    transform: rotateX(180deg);
}

.accordion__body--review-edit {
    flex-direction: column;
    border-radius: 0 0 5px 5px;
    background-color: #F6F7F9;
    padding: 10px;
}

.modal__contents.review-edit {
    gap: 24px;
}

.modal__contents.review-edit .modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: #666;
}
/* m_my_page_review_edit.html 끝 */

/* m_address_search_result.html 시작 */
.modal--address-search-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 4;
}

.modal--address-search-layer .address-search__container {
    position: relative;
    width: calc(100% - 32px);
    max-width: var(--max-width-all-contents);
    height: 500px;
}

.modal__contents--address-search {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0;
    opacity: 1;
}

.modal--address-search-layer .button--close {
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 2;
}
/* m_address_search_result.html 끝 */

/* m_shop_payment_today_deliver.html 시작 */
.m-shop-payment-today-deliver .table-container--delivery-time-selection {
    padding: 0 16px;
}
.m-shop-payment-today-deliver .table--delivery-time-selection tr {
    border: none;
}

.m-shop-payment-today-deliver .table--delivery-time-selection .table__cell {
    font-weight: 500;
    font-size: 13px;
}

.m-shop-payment-today-deliver .table--delivery-time-selection .table__cel--th {
    color: #666;
    background-color: #F3F3F3;
}

.m-shop-payment-today-deliver .table--delivery-time-selection .radio__item {
    width: 100%;
    height: 44px;
    justify-content: center;
}

/* check 시, angle down 이미지 반전 */
.m-shop-payment-today-deliver .accordion__header:has(.input--checkbox-accordion-toggle:checked) .angle.down {
    transform: rotateX(180deg);
}

/* form__list--column 요소 gap 설정 */
.m-shop-payment-today-deliver .form__list--column {
    gap: 24px;
}

/* 공동현관 출입방법 */
.m-shop-payment-today-deliver .section--entrance-method .form__item-body {
    gap: 8px;
}

.m-shop-payment-today-deliver .section--entrance-method .filter__item--input {
    display: none;
}

.m-shop-payment-today-deliver .section--entrance-method .radio__item:has(input:checked) ~ .filter__item--input {
    display: flex;
}

/* 최종 결제금액 */
.m-shop-payment-today-deliver .order-info__list {
    padding: 16px 0;
}

/* 약관 모두 동의 체크박스 체크되어도 accordion__body display: flex; 안되게 설정 */
.m-shop-payment-today-deliver .section--agree-terms .accordion__header:has(.input--checkbox-agree-all:checked) ~ .accordion__body {
    display: none;
}

/* 기존 accordion__header ~ accordion__body 동작 복원. 삭제시 header에 input 있어도 body가 안보이므로, 삭제 금지 -clover */
.m-shop-payment-today-deliver .section--agree-terms .accordion__header:has(.input--checkbox-accordion-toggle:checked) ~ .accordion__body {
    display: flex;
}

.m-shop-payment-today-deliver .section--agree-terms .form__list--column {
    gap: 8px;
}

.m-shop-payment-today-deliver .section--agree-terms .form__item-header {
    font-size: 16px;
    font-weight: 600;
}

/* m_shop_payment_today_deliver.html 끝 */

/* m_modal_terms_view.html 시작 */
.modal__contents--terms-view {
    gap: 16px;
}

.modal__body--terms-view {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;

    & span {
        white-space: pre-line;
    }
}
/* m_modal_terms_view.html 끝 */

/* m_modal_terms_view_full.html 시작 */
.m-modal-terms-view-full {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;

    & .title-container--main {
        position: relative;
        width: 100%;
        height: 50px;
        padding: 16px;
        justify-content: center;
        border-bottom: 1px solid #e5e7ea;
    }

    & .modal__button--close {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);

        &:before {
            content: '';
            position: absolute;
            top: -12px;
            bottom: -12px;
            left: -12px;
            right: -12px;
        }
    }

    & .modal__body {
        max-height: calc(100% - 50px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px;
    }
}
/* m_modal_terms_view_full.html 끝 */

/* m_product_view_review_view.html 시작 */
.m-product-view-review-view {
    margin-top: 50px;
}

.m-product-view-review-view header:after {
    content: none;
}

.m-product-view-review-view .card__item--review {
    gap: 16px;
}

.m-product-view-review-view .card__body--review {
    gap: 6px;
}

.m-product-view-review-view .card--review-image-swiper .swiper-slide {
    height: 340px;
    display: flex;
    justify-content: center;
}

.m-product-view-review-view .card--review-image-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-main);
}

.m-product-view-review-view .card--review-image-swiper .swiper-pagination-bullet {
    background-color: #888888;
    opacity: 1;

}

.m-product-view-review-view .card--review-image-swiper .swiper-pagination-bullet-active {
    background-color: #eee;
}
/* m_product_view_review_view.html 끝 */

/* m_modal_review_photo.html 시작 */
.review-photo.modal__contents {
    width: 100%;
    height: 100%;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    overscroll-behavior: contain;
}

.modal__header--review-photo {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 16px;
}

.review-photo.modal__contents .swiper-slide {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
}

.review-photo.modal__contents .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.review-photo.modal__contents .swiper-pagination-bullet {
    background-color: #888;
    opacity: 1;
}

.review-photo.modal__contents .swiper-pagination-bullet-active {
    background-color: #eee;
}
/* m_modal_review_photo.html 끝 */

/* m_store_search.html 시작 */ /* m_product_search_store_list.html 시작 */
.m-store-search {
    margin-top: 50px;
}

.store-marker {
    line-height: 28px;
    border: 1px solid var(--color-highlight);
    border-radius: 100px;
    background-color: #fff;
    padding: 0 14px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
}

.m-store-search .section--selected-product {
    padding: 16px;

    & .product {
        width: unset;

        & .info-container {
            width: 100%;
        }

        & .img-container {
            width: 76px;
            height: 76px;
        }

        & .name {
            font-size: 13px;
        }

        & .price {
            flex-direction: row-reverse;
            align-items: center;

            & .original {
                color: #999;
            }

            .rate {
                color: #FB4E4A;
            }
        }
    }
}

.m-store-search .section--store-search {
    gap: 8px;
    padding: 16px;
    border-top: 5px solid #eee;

    & .filter__item--input {
        border-radius: 100px;
        padding-right: 80px;
    }

    & .input__adornment {
        right: 7px;
        width: 36px;
        justify-content: center;
        align-items: center;

        &.button--delete-text {
            right: 44px;
            display: none;
        }
    }
}

.m-store-search .section--store-list {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* 즐겨찾기 섹션 */
.m-store-search .section--store-favorite {
    border-bottom: none;
}

.m-store-search .accordion__header--m-store-search {
    height: 53px;
    padding: 0 16px;
}

.m-store-search .accordion__body--m-store-search .card__list--order-list {
    padding: 0 16px 16px 16px;
}

.m-store-search .section--store-list .card__list--order-list {
    width: 100%;
    gap: 16px;
}

.m-store-search .section--store-list .card__item--order-list {
    position: relative;
    padding: 0;
}

.m-store-search .section--store-list .card__product-image-container--order-list {
    width: 86px;
    height: 86px;
}

/* 지점명 길어질 경우 대비 max-width 제한 */
.m-store-search .section--store-list .card__product-info-text-list {
    position: relative;
    width: calc(100% - 102px);

    & li {
        position: relative;
    }
}

.m-store-search .section--store-list .card__store-name {
    font-size: 14px;
    font-weight: 700;
}

.m-store-search .section--store-list .card__distance {
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;

    & .text--grey {
        color: #777;
    }
}

.m-store-search .section--store-list .button--favorite {
    position: absolute;
    right: 0;
    justify-content: flex-end; /* 아이콘이 우측 상단에 위치하도록 */
}

/* 판매 매장 섹션 */
.m-store-search .section--store-list:not(.section--store-favorite) .accordion__body--m-store-search {
    flex-direction: column;
    gap: 16px;
}

.modal__contents--m-search-store {
    padding: 0 16px 22px;
}

.modal__contents--m-search-store .radio__item {
    justify-content: space-between;
}

.modal__contents--m-search-store .radio__item .icon.check {
    display: none;
}

.modal__contents--m-search-store .radio__item:has(input:checked) .icon.check {
    display: inline-block;
}
/* m_store_search.html 끝 */ /* m_product_search_store_list.html 끝 */

/* m-store-search로 클래스명 변경 금지. m_store_search_store_list.html 이랑 클래스명 재조정 해야함 -clover */
/* m_my_page_store_search.html 시작 */
.m-my-page-store-search {
    position: relative;
    margin-top: 0;
}

.m-my-page-store-search header {
    top: 16px;
    background: transparent;

    & .header-inner.bottom {
        align-items: flex-start;
    }

    & .filter__list {
        width: 100%;
    }

    & .filter__item-container--search {
        height: 42px;
        line-height: unset;
        background-color: #fff;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10);

        & .icon.g {
            left: 18px;
            width: 16px;
            height: 16px;
            background: url("/shop/common/image/mobile/icon/icon-g-store-search.svg") center no-repeat;
        }

        & .filter__item--input {
            width: 100%;
            height: 100%;
            padding-left: 42px;
            padding-right: 80px;
        }
    }
}

.m-my-page-store-search header .button.input__adornment {
    right: 0;
    width: 44px;
    height: 100%;
    justify-content: center;
    align-items: center;

    &.button--delete-text {
        display: none;
    }
}

.m-my-page-store-search header .button--filter {
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.m-my-page-store-search .button--search-nearby-store {
    position: fixed;
    top: 128px;
    left: 50%;
    height: 38px;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    background: #FFF;
    padding: 0 20px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    transform: translateX(-50%);

    & span:not(.icon) {
        line-height: 38px;
    }
}

.m-my-page-store-search {

    .section--map {
        max-width: var(--max-width-all-contents);
    }

    & .section--popup-store-list {
        max-width: var(--max-width-all-contents);

        /* 상태 설정 */
        &[data-state="expand"] {
            top: 78px;
            /* 검색창 높이, 하단 dock 뺀 값 설정 */
            height: calc(100vh - 78px - 50px);
        }

        &[data-state="normal"] {
            /* 모바일 기기 safe-padding값 추가 */
            top: calc(50% - 50px - env(safe-area-inset-bottom));
            /* 하단 dock 높이 뺀 값으로 설정 */
            height: calc(50vh);
        }

        &[data-state="minimal"] {
            /* 헤더 높이, dock 컨테이너 높이 제외, 모바일기기 safe-padding값 보정 */
            top: calc(100% - 60px - 50px - env(safe-area-inset-bottom));
            /* 사용자가 지도 스크롤 시 방해 안될 높이 설정 */
            height: 60px;
        }

        position: fixed;
        top: 50%;
        width: 100%;
        height: calc(50vh);/* 기본 상태 */
        border-radius: 10px 10px 0 0;
        background-color: #fff;
        box-shadow: 0 -4px 5px 0 rgba(0, 0, 0, 0.10);
        transition: top 0.3s ease, height 0.3s ease;
        will-change: top;
        /* 스크롤 체이닝 방지 */
        overscroll-behavior: contain;
        z-index: 2;

    }

    & .section__header {
        position: relative;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: flex-end;
        padding: 12px 16px;

        & .handle {
            position: absolute;
            top: -6px;
            left: 50%;
            width: 60px;
            height: 40px;
            transform: translateX(-50%);

            & .icon.horizontal-bar {
                width: 100%;
                height: 100%;
                background: url("/shop/common/image/mobile/icon/icon-horizontal-bar-store-search.svg") center no-repeat;
            }
        }

        & .title-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & .left {
                & .text--grey {
                    font-size: 16px;
                }
            }

            & .button--more {
                position: relative;
                align-items: center;
                gap: 4px;
                line-height: 20px;

                &:before {
                    content: '';
                    position: absolute;
                    top: -10px;
                    bottom: -10px;
                    left: -5px;
                    right: -5px;
                }
            }
        }
    }

    & .section__body {
        /* section__header, 하단 dock 높이 (+약간의 여유분) 뺀 값으로 설정 - 매장 리스트 전부 다 나오게 하기 위함 -clover */
        height: calc(100% - 60px - 16px);
        padding: 0 16px 50px;
        overflow-y: auto;


        &::-webkit-scrollbar {
            display: none;
        }

        & .card__list--order-list {
            gap: 16px;
        }

        & .card__item {
            position: relative;
            padding: 0;
        }

        & .card__product-image-container--order-list {
            width: 102px;
            height: 102px;
        }

        & .card__product-info-text-list {
            position: relative;
            width: 100%;
            gap: 4px;

            /* onclick 이벤트 터치영역 확장을 위해 설정 25.12.16. -clover */
            & li {
                position: relative;
            }
        }

        & .card__store-name {
            font-size: 14px;
        }

        & .text--store-name {
            font-weight: 600;

            /* onclick 이벤트 터치영역 확장을 위해 설정 25.12.16. -clover */
            &:before {
                content: '';
                position: absolute;
                top: -2px;
                bottom: -2px;
                left: 0;
                width: 100%;
            }
        }

        & .text--store-address {
            /* onclick 이벤트 터치영역 확장을 위해 설정 25.12.16. -clover */
            &:before {
                content: '';
                position: absolute;
                top: -2px;
                bottom: -2px;
                left: 0;
                width: 100%;
            }
        }

        & .text--store-open-time {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #555;
            line-height: 16px;

            & .alarm-clock {
                margin-top: 1px;

                &:before {
                    content: '';
                    position: absolute;
                    top: -2px;
                    bottom: -2px;
                    left: 0;
                    width: 100%;
                }
            }
        }

        & .button--favorite {
            position: absolute;
            top: -1px;
            right: 0;
            justify-content: flex-end;

        }
    }
}

/* html 주석처리 시작 25.11.26. -clover */
.m-my-page-store-search .section--store-list {
    position: fixed;
    bottom: 80px;
    right: 0;
    width: 100%;
    align-items: flex-end;
    z-index: 3;
}

.m-my-page-store-search .button--store-list {
    width: max-content;
    border-radius: 6px;
    background: #FFF;
    padding: 10px 16px;
    margin-right: 16px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
}

.m-my-page-store-search .card--map .button--favorite {
    position: absolute;
    top: 16px;
    right: 16px;
    justify-content: flex-end;
}
/* html 주석처리 끝 25.11.26. -clover */

.m-my-page-store-search .button-container--position-control {
    position: absolute;
    top: 166px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;

    & .button {
        --size-button: 38px;
        width: var(--size-button);
        height: var(--size-button);
        justify-content: center;
        align-items: center;
        border: 1px solid #bbb;
        border-radius: var(--radius-main);
        background-color: #fff;
    }

    & .button--to-current-position {
        & .steering-wheel {
            width: 18px;
            height: 18px;
            background: url("/shop/common/image/mobile/icon/icon-steering-wheel.svg") center no-repeat;
        }
    }

    & .button-container--scale-control{
        flex-direction: column;

        & .button--scale-minus {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: -1px;

            & .icon.minus {
                width: 14px;
                height: 14px;
                background: url("/shop/common/image/mobile/icon/icon-minus-14x1.svg") center no-repeat;
            }
        }

        & .button--scale-plus {
            border-top-left-radius: 0;
            border-top-right-radius: 0;

            & .icon.plus {
                width: 14px;
                height: 14px;
                background: url("/shop/common/image/mobile/icon/icon-plus-grey-666.svg") center no-repeat;
            }
        }
    }
}
/* m_my_page_store_search.html 끝 */

/* m_store_view.html 시작 */
.main-contents.m-store-view {
    margin-top: 50px;
}

.store-info {
    display: flex;
    flex-direction: column;

    & .store-info__store-image-container {
        width: 100%;
        aspect-ratio: 1;
    }

    & .store-info__store-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .store-info__body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 22px 16px 0;

        & .title-container--between {
            position: relative;
            align-items: flex-start;
        }
    }

    & .title-container__left {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    & .title-flag-container {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    & .store-info__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    & .store-info__item {
        display: flex;
        justify-content: space-between;
    }

    & .store__info-text-container {
        max-width: calc(100% - 30px);
    }

    .store__info--text {
        line-height: 24px;
    }

    .store__info--title {
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 4px;
    }
}

.store-info--sub {
    border-bottom: var(--border-section-seperator);
    padding: 16px;

    & .store-info__body {
        border-radius: var(--radius-main);
        background-color: #f9f9f9;
        padding: 16px;
    }

    & .store-info__list {
        gap: 12px;
    }

    & .store-info__item-body {
        width: calc(100% - 10px);
        display: flex;
        gap: 8px;
    }

}

.m-store-view .section--product-list {

    & .title-container--main {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 16px;
        background-color: #fff;
        transition: box-shadow 0.3s ease-in-out, top 0.3s ease-in-out;
        z-index: 2;

        /* 상단에 붙을 때 box-shadow 부여 */
        &.is-sticky {
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10);
        }
    }

    & .button--search {
        width: 28px;
        height: 28px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #f0f0f0;

        .icon.magnifier {
            width: 12px;
            height: 12px;
        }
    }

    & .tab--underline {
        /* 패딩, 버튼, 갭 넓이 빼준 값 */
        width: calc(100% - 16px - 28px - 14px);
    }

    & .tab__list--underline {
        /* 패딩, 버튼, 갭 넓이 빼준 값 */
        width: 100%;
        gap: 14px;
        border: none;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    & .tab__item--underline {
        width: unset;
        height: 46px;
        flex-shrink: 0;
        font-size: 14px;
        color: var(--color-grey-main);
    }

    & .tab__item-text--underline {
        margin-bottom: 0;
    }

    & .title-container--sub {
        height: 42px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        padding: 0 16px 10px;

        & .button--sort {
            position: relative;
            gap: 2px;

            /* 클릭 영역 확대 */
            &:before {
                content: '';
                position: absolute;
                top: -10px;
                bottom: -10px;
                left: -5px;
                right: -5px;
            }

            & .icon {
                margin-top: 1px;
            }
        }
    }

    & .product-container {
        flex-wrap: wrap;
        padding: 0 16px;
        gap: 32px 10px;
    }

    & .product {
        & .info-container {
            gap: 0;
        }

    }

    /* 350 이하 viewport에서 제품 레이아웃 설정 */
    @media (max-width: 350px) {
        .product-container {

            &.product-container--grid-horizon-list {

                & .button--stock-indicator {
                    height: unset;
                    flex-direction: row;
                    gap: 4px;
                }
            }
        }
    }
}

.m-store-view .section--product-list .title-container--main.is-header-locked {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10);
}
/* m_store_view.html 끝 */

/* m_store_view_product_search.html 시작 */
.m-store-view-product-search {
    margin-top: 50px;

    & .title-container--section {
        height: unset;
        padding: 16px 16px 8px;
    }

    .filter__item-container--search {
        border-radius: 100px;
        border-color: #f0f0f0;
        background-color: #f0f0f0;
    }

    & .filter__item--form {
        line-height: 100%;
        border-radius: 100px;
        padding-right: 80px;

        &::placeholder {
            color: var(--color-grey);
        }
    }

    & .input__adornment {
        right: 7px;
        width: 36px;
        height: 40px;
        justify-content: center;
        align-items: center;

        /* 검색어 텍스트 삭제 버튼 */
        &.button--delete-text {
            right: 44px;
            display: none;
        }
    }

    & .counter {
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: #666;

        & strong {
            font-weight: 600;
            color: var(--color-black-main);
        }
    }

    & .section--product-list {

        /* 처음 진입했을 때, 검색결과 없을 때 grid-controller display: none; */
        .grid-controller__list {
            display: none;
            padding: 0 15px;
        }

        /* 검색 결과 섹션 내 .product 요소 하나라도 있을 때 grid-controller__list 보이게 */
        &:has(.product) .grid-controller__list {
            display: flex;
        }

        .product-container {
            flex-wrap: wrap;
            gap: 32px 10px;
            padding: 16px;
        }
    }

    /* 350 이하 viewport에서 제품 레이아웃 설정 */
    @media (max-width: 350px) {
        .product-container {
            & .text-container {
                height: 148px;
            }

            &.product-container--grid-horizon-list {

                & .text-container {
                    height: unset;
                }

                & .button--stock-indicator {
                    height: unset;
                    flex-direction: row;
                    gap: 4px;
                }
            }
        }
    }
}
/* m_store_view_product_search.html 끝 */

/* m_my_page_point.html 시작 */
.m-my-page-point {
    margin-top: 50px;

    header {
        .title-container {
            display: flex;
            gap: 6px;
        }

        .button--info {
            position: relative;

            &:before {
                content: '';
                position: absolute;
                inset: -10px;
            }
        }

        .icon.info {
            width: 16px;
            height: 16px;
            background-image: url("/shop/common/image/mobile/icon/icon-info-my-page-point.svg");
        }
    }


    .section--filter {
        align-items: flex-end;
        padding: 0 16px;

        .button--sort {
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            color: #666;
            padding: 15px 0;

            .button__inner-container {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .text-container {
                gap: 2px;

                .text {
                    line-height: 17px;
                }

                .icon {
                    height: 17px;
                }
            }

            .icon.dot {
                width: 2px;
                height: 2px;
                border-radius: 50%;
                background-color: #666;
            }

            .icon.calendar {
                margin-left: 2px;
                margin-bottom: 2px;
            }
        }
    }

    .section--point-history {
        border-top: var(--border-section-seperator);
        padding: 0 16px;
    }
}
/* m_my_page_point.html 끝 */

/* m_my_page_point_layer.html 시작 */
.m-my-page-point-layer {
    .modal__header {
        padding: 16px;
    }

    .modal__body {
        padding: 0 16px 16px 16px;
    }

    .modal__section--sub {
        gap: 8px;
    }

    .select--store-list {
        border-color: #e5e7ea;
    }

    .radio__list {
        gap: 8px;
    }

    .radio__item {
        width: 100%;
        height: 45px;
        padding: 0 5px;

        &:has(input:checked) {
            border-color: var(--color-black-main);
        }
    }

    .button-container--bottom {
        gap: 8px;
        padding: 0;
    }
}
/* m_my_page_point_layer.html 끝 */

/* m_my_page_point_guide_layer.html 시작 */
.m-my-page-point-guide-layer {
    gap: 24px;

    .notice__list--point {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .notice__item {
        position: relative;
        font-size: 14px;
        line-height: 1.6;
        padding-left: 20px;

        &:before {
            content: '';
            position: absolute;
            top: 10px;
            left: 9px;
            width: 2px;
            aspect-ratio: 1;
            border-radius: 50%;
            background-color: #303030;
        }
    }

    .button-container--bottom {
        padding: 0;
    }
}
/* m_my_page_point_guide_layer.html 끝 */

/* m_my_page_coupon.html 시작 */
.m-my-page-coupon {
    margin-top: 50px;
}

.m-my-page-coupon .tab__list--pill {
    font-weight: 500;
    padding: 16px;
}

.m-my-page-coupon .tab__item--pill {
    height: 36px;
}


.coupon-manage__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #f9f9f9;
    padding: 28px 16px 16px;
}

.coupon-manage__section-title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coupon-manage__section-title {
    display: flex;
    flex-wrap: wrap;
    font-size: 22px;
    font-weight: 600;
}

.coupon-manage__body {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.coupon__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
}

.coupon__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 20px 16px;
}

.coupon__item-body {
    display: flex;
    justify-content: space-between;
}

.coupon__item--left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.coupon__text--name {

}

.coupon__text--benefit {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
}

.coupon__text--usage-period {
    color: #888;
}


.coupon__item-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    & .button--usage-info {
        position: relative;
        display: flex;
        align-items: center;
        gap: 2px;
        color: #888;
        line-height: 17px;

        &:before {
            content: '';
            position: absolute;
            top: -13px;
            bottom: -13px;
            left: -5px;
            right: -5px;
        }

        & .icon {
            width: 14px;
            height: 14px;
        }
    }
}
/* m_my_page_coupon.html 끝 */

/* m_my_page_coupon_layer.html 시작 */
.m-my-page-coupon-layer {
    & .notice__list--order-list {
        gap: 8px;
        padding: 0;
    }

    & .notice__item--order-list {
        font-size: 14px;
        color: var(--color-black-main);

        &.semi-bold {
            font-weight: 600;
        }
    }
}
/* m_my_page_coupon_layer.html 끝 */

/* m_my_page_coupon_use_history.html 시작 */
.m-my-page-coupon-use-history {
    margin-top: 50px;
}

.m-my-page-coupon-use-history .filter__item-container {
    width: 100%;
    height: 100%;
}

.m-my-page-coupon-use-history .input--calendar {
    width: 100%;
    height: 100%;
}

.m-my-page-coupon-use-history .input__adornment {
    right: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.m-my-page-coupon-use-history .filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab__item--point-use-history {
    position: relative;
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
}

.tab__item--point-use-history:has(input:checked) {
    font-weight: 600;
    color: #303030;
}

.tab__item--point-use-history ~ .tab__item--point-use-history:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 18px;
    background-color: #ccc;
    transform: translateY(-50%);
}

.m-my-page-coupon-use-history .text--valid-date {
    color: #888;
}
/* m_my_page_coupon_use_history.html 끝 */

/* m_store_search_product_list.html 시작 */
/* 페이지 내 섹션 padding, margin 관리 */
.m-store-search-product-list {

    & header {
        & .tab--pill {
            background-color: #f0f1f4;
            border-radius: 100px;
        }

        .tab__list--pill {
            gap: 0;
        }

        .tab__item--pill {
            background-color: #f0f1f4;
            border-color: #f0f1f4;

            &:has(input:checked) {
                border-color: var(--color-black-main);
                background-color: var(--color-black-main);
            }
        }
    }

    & .header-inner.bottom {
        align-items: flex-start;

        & .input__adornment {
            right: 7px;
            width: 36px;
            height: var(--height-form-element);
            justify-content: center;
            align-items: center;

            &.button--delete-text {
                display: none;
                right: 44px;
            }
        }
    }

    & .section--category {
        padding-left: 16px;
        border-bottom: var(--border-section-seperator);
    }
}

.m-store-search-product-list .section--category .tab--pill {
    height: 44px;
    display: flex;
    align-items: center;
}

.tab--store-search {
    --height-tab: 44px;
    display: flex;

    .tab__title {
        width: 80px;
        font-weight: 700;
        line-height: var(--height-tab);
        flex-shrink: 0;
    }

    & .tab__list {
        display: flex;
        gap: 15px;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    & .tab__item {
        height: var(--height-tab);
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--color-grey-main);
        white-space: nowrap;

        & .tab__item-text {
            line-height: var(--height-tab);
        }

        &:has(input:checked) {
            font-weight: 700;
            color: var(--color-highlight);
        }

        & .icon.close {
            display: none;
            background: url("/shop/common/image/mobile/icon/icon-close-blue.svg") center no-repeat;
        }

        &:has(input:checked) .icon.close {
            display: inline-block;
        }
    }

    .button--action {
        height: var(--height-tab);
        aspect-ratio: 1;
        justify-content: center;
        align-items: center;

        & .angle.down {
            width: 20px;
            height: 20px;
        }
    }

}

/* 서브카테고리 */
.tab--store-search.sub-category {
    display: none;
}

.tab--store-search.main-category:has(input:checked) ~ .sub-category {
    display: flex;
}

.m-store-search-product-list {

    & .product-container {

        & .product {
            /* 컨테이너 선언 */
            container-type: inline-size;
        }

        /* 상품 하단 액션 버튼 */
        & .button--light-grey {
            flex-shrink: 0;
            width: 100%;
            min-height: 40px;
            gap: 4px;
            color: #50585F;
            padding: 2px 10px;

            /* 컨테이너 사이즈가 작아져서 구매가능 매장 찾기 버튼이 개행될 때 flex-direction 조정 */
            @container (max-width: 137px) {
                flex-direction: column;
            }
        }


        &.product-container--grid-horizon-list {
            /* 가로형 배열일 때 액션 버튼 레이아웃 조절 */
            & .product{
                & .info-container {
                    gap: 0;
                }

                & .button--light-grey {
                    max-width: 240px;
                    height: 27px;
                    min-height: unset;
                    font-size: 12px;
                }
            }
        }
    }
}

/* m_store_search_product_list.html 끝 */

/* m_modal_popup_store_search_product_list.html 시작 */
.m-modal-popup-store-search-product-list {
    gap: 0;
    padding: 0;

    & .modal__header {
        padding: 16px;
    }

    & .radio__list {
        max-height: 300px;
        flex-direction: column;
        padding: 0 16px;
        overflow-y: auto;
        overscroll-behavior: contain;

        &::-webkit-scrollbar {
            display: none;
        }


        & .radio__item {
            height: 55px;
            flex-shrink: 0;
            gap: 10px;
            font-size: 16px;
        }
    }
}
/* m_modal_popup_store_search_product_list.html 끝 */

/* m_my_page_review.html 시작 */
.m-my-page-review {
    & .header-inner.bottom .tap {
        width: 50%;
    }
}

.m-my-page-review .L-history__item--review {
    padding: 16px;
}

.m-my-page-review .L-history__item--review:not(:first-child) {
    border-top: 1px solid #ddd;
}

.m-my-page-review .button-container--review button {
    flex: 1;
    height: 40px;
}
/* m_my_page_review.html 끝 */

/* m_my_page_review_my_review.html 시작 */
.m-my-page-review-my-review {
    & .header-inner.bottom .tap {
        width: 50%;
    }
}

.m-my-page-review-my-review .L-history__list--review {
    border-top: 5px solid #eee;
}

.m-my-page-review-my-review .L-history__item--review {
    padding: 16px;
}

.m-my-page-review-my-review .L-history__item--review:not(:first-child) {
    border-top: 1px solid #ddd;
}

.m-my-page-review-my-review .card__product-info-text-list {
    justify-content: center;
}

.m-my-page-review-my-review .review-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    & .review__contents {
        width: 100%;
        max-height: 300px;
        white-space: pre-line;
        word-break: break-all;
        overflow-y: auto;
    }
}

.m-my-page-review-my-review .review-header__info-group {
    flex-direction: row;
    align-items: center;
}

.m-my-page-review-my-review .review-header__info-group .review-header__date {
    font-size: 13px;
}

.m-my-page-review-my-review .button-container--review {
    width: 100%;
    gap: 10px;
}

.m-my-page-review-my-review .button-container--review button {
    width: 100%;
    height: 40px;
}
/* m_my_page_review_my_review.html 끝 */

/* m_my_page_review_view.html 시작 */
.m-my-page-review-view {
    margin-top: 50px;
}

.m-my-page-review-view .profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
}

.m-my-page-review-view .profile__image-container {
    width: 65px;
    aspect-ratio: 1;
}

.m-my-page-review-view .profile__image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.m-my-page-review-view .profile__user-id {
    font-size: 16px;
    font-weight: 700;
}

.m-my-page-review-view .section--review {
    gap: 16px;
    border-top: 5px solid #eee;
    border-bottom: 5px solid #eee;
    padding: 16px;
}

.m-my-page-review-view .card__product-info-text-list {
    justify-content: center;
    gap: 4px;
}

.m-my-page-review-view .section--review .brand-name {
    font-weight: 700;
}

.m-my-page-review-view .review-header__info-group {
    flex-direction: row;
    align-items: center;
}

.m-my-page-review-view .review__contents {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-my-page-review-view .attachment__item--image {
    width: 100px;
    height: 100px;
}

.m-my-page-review-view .button-container--thumb-up {
    justify-content: flex-end;
    & .button--pill {
        width: 46px;
        height: 28px;
        gap: 4px;
        font-size: 12px;
        color: var(--color-light-grey);

        &:has(.thumb-up.active) {
            color: var(--color-black-main);
            border-color: var(--color-black-main);
        }

        & .icon.thumb-up {
            width: 12px;
            height: 12px;
        }
    }
}
/* m_my_page_review_view.html 끝 */

/* m_my_page_event.html 시작 */
.m-my-page-event {
    margin-top: 50px;
}
/* m_my_page_event.html 끝 */

/* m_my_page_qna.html 시작 */
.m-my-page-qna {
    margin-top: 50px;

}

.m-my-page-qna .qa__item-header--product-view {
    flex-direction: row;
    justify-content: space-between;

    & .card__product-info-text-item {
        flex-wrap: wrap;
    }
}

.m-my-page-qna .qna__inquiry-title {
    font-size: 15px;

    /* u-ellipsis-1 클래스가 안먹혀서 -2 클래스 부여 */
    &.u-ellipsis-2 {
        -webkit-line-clamp: 1;
    }

    & br {
        display: none;
    }

}

/* m_my_page_qna.html 끝 */

/* m_my_page_qna_edit.html 시작 */
.m-my-page-qna-edit {
    margin-top: 50px;
}

.m-my-page-qna-edit .radio__list {
    gap: 30px;
    padding: 0 16px;
}

.m-my-page-qna-edit .section--qna-category .notice__item--order-list {
    padding-left: 0;
}

.m-my-page-qna-edit .section--qna-category .notice__item--order-list:before {
    content: none;
}

.m-my-page-qna-edit .section--qna-contents {
    gap: 10px;
    border-top: 1px solid #e5e7ea;
    padding: 16px;
}

.m-my-page-qna-edit .section--qna-contents .product-name-container {
    font-size: 13px;
}

.m-my-page-qna-edit .section--qna-contents .text-container {
    position: relative;
    border-radius: var(--radius-main);
    border: 1px solid #e5e7ea;
}

.m-my-page-qna-edit .section--qna-contents .text-container:has(textarea:focus) {
    border-color: var(--color-black-main);
}

.m-my-page-qna-edit .section--qna-contents .textarea--form {
    border: none;
    border-radius: inherit;
    padding: 16px;
}

.m-my-page-qna-edit .section--qna-contents .indicator {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 12px;
    color: #99a1a8;
}
/* m_my_page_qna_edit.html 끝 */

/* m_modal_my_page_qna_edit.html 시작 */
.m-modal-my-page-qna-edit .modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-modal-my-page-qna-edit .modal__body span {
    line-height: 21px;
}
/* m_modal_my_page_qna_edit.html 끝 */

/* m_shop_membership.html 시작 */
.main-contents.m-shop-membership {
    margin-top: 50px;
}

.m-shop-membership {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 지역변수 설정 */
.membership-status {
    --size-tier-image: 64px;
    /* 등급별 배경화면 색 추가 예정 -clover */
    --background-color-bronze: #CD7F32;
    --background-color-silver: #DDDDDD;
    --background-color-gold: #FFD700;
}

.membership-status {
    height: 128px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: #38393d;
}

/* 등급별 배경색 설정 */
.membership-status.membership-status--bronze {
    background-color: var(--background-color-bronze);
}

.membership-status.membership-status--silver {
    background-color: var(--background-color-silver);
}

.membership-status.membership-status--gold {
    background-color: var(--background-color-gold);
}

.membership-status__text-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.membership-status__text--tier {
    font-size: 22px;
}

.membership-status__rank-container {
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    border-radius: 50%;
    background-color: #CD7F32; /* 기본적으로 브론즈 등급 */

    &.bronze {
        background-color: #CD7F32;
    }

    &.silver {
        background-color: #DDDDDD;
    }

    &.gold {
        background-color: #FFD700;
    }
}

.membership-forecast {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-main);
    background-color: #f0f1f4;
    padding: 16px;
    box-sizing: border-box;
}

.membership-forecast__text {
    display: flex;
    align-items: center;
}

.membership-forecast__text--notice {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

.membership-progress {
    --background-progress: #f0f1f4;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.membership-progress__track {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-main);
    background-color: var(--background-progress);
}

.membership-progress__bar {
    width: 10%;
    max-width: calc(100% - 18px);
    background-color: #757d86;
}

.membership-progress__thumb {
    right: -18px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    transform: translateY(-50%);
    z-index: 1;
}

.membership-progress__thumb:after {
    content:"";
    position:absolute;
    bottom: calc(100% + 3px);
    left:50%;
    width:0;
    height:0;
    border-top: 8px solid var(--background-progress);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: translateX(-50%);
    pointer-events:none;
}

.membership-progress__label-list {
    display: flex;
    justify-content: space-between;
}

.section--membership-benefit {
    gap: 16px;
}

.m-shop-membership .section--membership-benefit .title-container--section {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
    margin-top: 20px;
}

.m-shop-membership .tab__list--membership {
    padding: 0 16px;
}

.card__list--membership-event {
    width: 100%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.card__list--membership-event::-webkit-scrollbar {
    display: none;
}

.card__item--membership-event {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card__item--membership-event:first-child {
    margin-left: 10px;
}

.card__header--membership-event {
    width: 186px;
    height: 248px;
}

.card__image--membership-event {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.card__text-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card__text-item {

}

.card__text-item--title {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 700;
}

.card__text-item--period {
    font-size: 13px;
    color: #99a1a8;
}

.m-shop-membership .section--notice .accordion__item {
    border-bottom: var(--border-accordion);
}

.m-shop-membership .notice__list--order-list {
    width: 100%;
}
/* m_shop_membership.html 끝 */

/* m_shop_membership_rank_layer.html 시작 */
.m-shop-membership-rank-layer {
    gap: 0;
    padding: 0;

    & .modal__header {
        padding: 16px;
    }

    & .modal__body {
        & .title-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 16px;
        }

        .title--main {
            font-weight: 600;
        }

        & .text--purchase-amount {
            font-size: 24px;
            font-weight: 600;
            line-height: 29px;
        }
    }

    .notice-middle {
        width: calc(100% - 32px);
        height: 74px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        color: var(--color-grey);
        line-height: 20px;
        border: 1px solid #f0f1f4;
        border-radius: var(--radius-main);
        margin: 0 16px;
    }

    .notice__list--order-list {
        gap: 8px;
        padding: 0 13px 16px;

        & .title {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-black-main);
            padding-left: 7px;
            margin-bottom: 8px;
        }
    }

    & .notice__item--order-list {
        font-size: 14px;
    }
}
/* m_shop_membership_rank_layer.html 끝 */

/* m_shop_membership_benefit_layer.html 시작 */
.m-shop-membership-benefit-layer {
    width: 100%;
    height: 100%;
    border-radius: unset;
    padding: 0;

    & .modal__header {
        border-bottom: 1px solid #e5e7ea;
    }

    & .title-container--main {
        position: relative;
        height: 50px;
        justify-content: center;
        align-items: center;
    }

    & .modal__button--close {
        position: absolute;
        right: 16px;
    }

    & .modal__body {
        width: 100%;
        max-height: calc(100% - 55px);
        padding: 30px 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    & .modal__section {
        gap: 20px;
    }

    & .modal__section--sub {
        gap: 0;

        &:not(:first-child) {
            padding-top: 20px;
            border-top: 1px solid #f0f1f4;
        }
    }

    & .notice__list--order-list {
        gap: 8px;
        padding: 0;
        margin-top: 20px;
    }

    & .notice__item--title {
        font-weight: 400;
        color: var(--color-black-main);
    }

    & .notice__item--order-list {
        font-size: 14px;
        font-weight: 400;
    }
}
/* m_shop_membership_benefit_layer.html 끝 */

/* m_modal_product_recent_list_more.html 시작 */
.m-modal-product-recent-list-more {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
}

.m-modal-product-recent-list-more .title-container--main {
    position: relative;
    height: 48px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 16px 0;
}

.m-modal-product-recent-list-more .modal__button--close {
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
}

.m-modal-product-recent-list-more .modal__body {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.m-modal-product-recent-list-more .modal__body::-webkit-scrollbar {
    display: none;
}

.m-modal-product-recent-list-more .original-product-info-container {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-main);
    background-color: #f6f7f9;
    padding: 5px;
}

.m-modal-product-recent-list-more .image-container--original-product {
    width: 25px;
    height: 25px;
}

.m-modal-product-recent-list-more .image--original-product {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-main);
}

.m-modal-product-recent-list-more .text--original-product-name {
    max-width: calc(100% - 35px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-modal-product-recent-list-more .product--horizontal {
    & .img-container {
        width: 125px;
        height: 125px;
    }
}
/* m_modal_product_recent_list_more.html 끝 */

/* m_modal_inquiry_product_select.html 시작 */
.m-modal-inquiry-product-select {
    width: 100%;
    height: 100%;
    border-radius:  unset;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);

    & .modal__header {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 16px;
    }

    & .modal__body {
        height: calc(100% - 128px - 82px);
    }
}

.m-modal-inquiry-product-select .input--checkbox:disabled {
    background: #ddd;
}

.L-history__list--product-select {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.L-history__item--product-select {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

.L-history__item--product-select:not(:first-child) {
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

.L-history-item__header--product-select {
    padding: 16px;
}

/* 헤더에 input이 checked가 되면, item__body 요소 display: none; */
.L-history-item__header--product-select:has(input:checked) ~ .L-history-item__body--product-select {
    display: none;
}

/* 헤더에 input이 unchecked일 때는, item__body 요소 display; */
.L-history-item:not(:has(.L-history-item__header--product-select input:checked)) .L-history-item__body--product-select {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.L-history-item__body--product-select {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m-modal-inquiry-product-select .card__product-info--order-list {
    padding: 0 16px;
}

.m-modal-inquiry-product-select .modal__footer {
    padding: 16px;
}
/* m_modal_inquiry_product_select.html 끝 */

/* m_modal_payment_fail.html 시작 */
.m-modal-payment-fail {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
}

.m-modal-payment-fail .title-container--section {
    justify-content: center;
}

.m-modal-payment-fail .modal__button--close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.m-modal-payment-fail .modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 90px 16px;
    margin: 20px 16px;
}

.m-modal-payment-fail .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-modal-payment-fail .text-container--notice-top {
    font-size: 20px;
    gap: 8px;
}

.m-modal-payment-fail .text-container--error-code {
    font-size: 16px;
    font-weight: 600;
    color: #aaa;
    text-align: center;
    padding: 0 16px;
    word-break: break-all;
}

.m-modal-payment-fail .text-container--notice-bottom {
    font-weight: 600;
    color: #666;
}
/* m_modal_payment_fail.html 끝 */

/* m_my_page_profile_edit.html 시작 */
.m-my-page-profile-edit {
    margin-top: 50px;

    & .section--delete-account {
        margin-top: 16px;
    }
}

.m-my-page-profile-edit .section--profile-image-edit {
    align-items: center;
    padding: 16px 0;

    & .profile-image-container {
        --size-image: 92px;
        position: relative;
        width: var(--size-image);
        height: var(--size-image);

        & .profile-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        & .button--edit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 25px;
            height: 25px;
            justify-content: center;
            align-items: center;

            /* 첨부파일 display: none 안해주면, x축 스크롤 생김 */
            & .hidden_file {
                display: none;
            }
        }
    }
}

.m-my-page-profile-edit header:after {
    content: none;
}

.m-my-page-profile-edit .item--agree-all {
    color: #555;
}

.m-my-page-profile-edit .item--agree-individual {
    gap: 10px;
    color: #666;
    background-color: #f4f4f4;
    border-radius: var(--radius-main);
    padding: 16px;
}

.m-my-page-profile-edit .section--form-list {
    & .notice__list--order-list {
        gap: 6px;
        padding: 0;
    }

    & .notice__item--order-list {
        font-size: 13px;
        color: #888;
    }
}

/* 체크박스 텍스트 수직 위치 조정 */
.m-my-page-profile-edit label.u-flex-4 {
    & span {
        margin-top: 1px;
    }
}
/* m_my_page_profile_edit.html 끝 */

/* m_modal_delivery_cancel_view.html 시작 */
.m-modal-delivery-cancel-view {
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
}

.m-modal-delivery-cancel-view .title-container--main {
    height: 48px;
    padding: 16px 0;
}

.m-modal-delivery-cancel-view .modal__button--close {
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
}

.m-modal-delivery-cancel-view .modal__body {
    border-top: 5px solid #eee;
}

.m-modal-delivery-cancel-view .L-cancel-data__list {
    display: flex;
    flex-direction: column;
}
/* m_modal_delivery_cancel_view.html 끝 */

/* m_store_search_store_list.html 시작 */
.m-store-search-store-list {
    margin-top: 100px;
}

.m-store-search-store-list header .tab__list--pill {
    gap: 0;
    border-radius: 100px;
    background-color: #f0f1f4;
}

.m-store-search-store-list header .tab__item--pill {
    border-color: #f0f1f4;
    background-color: #f0f1f4;
}

.m-store-search-store-list header .tab__item--pill:has(input:checked) {
    border-color: var(--color-black-main);
    background-color: var(--color-black-main);
}

.m-store-search-store-list {
    & .header-inner.bottom {
        padding-bottom: 4px;

        & .filter__item-container {
            width: 100%;
        }

        & .input__adornment {
            right: 7px;
            width: 36px;
            height: var(--height-form-element);
            justify-content: center;
            align-items: center;

            &.button--delete-text {
                display: none;
                right: 44px;
            }
        }
    }
}

.m-store-search-store-list .section--store-favorite {
    border-top: none;
}

/* 매장 정보 텍스트 컨테이너 */
.m-store-search-store-list .card__product-info-text-list {
    justify-content: center;

    /* li 요소의 자식요소에 onclick 이벤트가 걸려있어서 아래와 같이 터치영역 확장 property 설정 */
    & li > span {
        &:before {
            content: '';
            position: absolute;
            top: -3px;
            bottom: -3px;
            width: calc(100% - 30px);
        }
    }
}

.m-store-search-store-list .button--show-map {
    position: fixed;
    bottom: 90px;
    right: 15px;
    height: 40px;
    align-items: center;
    border-radius: 6px;
    background-color: #fff;
    padding: 0 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .25);
}
/* m_store_search_store_list.html 끝 */

/* m_store_product_list.html 시작 */
.m-store-product-list {
    margin-bottom: 50px;
}

/* 서브 카테고리 기본상태: display: none; */
.m-store-product-list .section--category {
    padding-left: 16px;
    border-bottom: var(--border-section-seperator);
}

.m-store-product-list .card__footer--product .button {
    width: 100%;
    height: 40px;
    color: #628ddf;
    /* 추후 픽업 기능 구현 시 background 주석 해제 예정 -clover */
    /*background: url("/shop/common/image/mobile/icon/icon-angle-down.svg") calc(100% - 10px) center no-repeat;*/
    padding: 0 20px 0 5px;
}
/* m_store_product_list.html 끝 */

/* m_my_page_profile_edit_auth.html 시작 */
.m-my-page-profile-edit-auth {
    margin-top: 50px;
}

.m-my-page-profile-edit-auth .title-container--section {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 16px 10px;
}

.m-my-page-profile-edit-auth .section--input {
    padding: 16px;
}

.m-my-page-profile-edit-auth .section--input .filter__item {
    height: 50px;
}

.m-my-page-profile-edit-auth .section--find-password {
    height: 162px;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.m-my-page-profile-edit-auth .section--find-password .button--change-password {
    width: 126px;
    color: unset;
}
/* m_my_page_profile_edit_auth.html 끝 */

/* m_shop_promotion.html 시작 */
.main-contents.m-shop-promotion {
    margin-top: 160px;
}

.m-shop-promotion .section--promotion-swiper {
    --radius-slide: 16px;
    width: 100%;
    padding: 15px 0;
    margin-bottom: 15px;

    & .swiper--promotion {
        width: 100%;

        &.is-ready {
            /* is-ready 클래스가 있을 때(스와이퍼 초기화 완료 후 일정시간 뒤), slide에 transition 추가 */
            & .swiper-slide {
                transition: transform 0.3s ease;
            }
        }

        .swiper-slide {
        }
    }

    & .swiper-slide {
        position: relative;
        width: calc((100vw - 50px) * .9230769231);
        height: calc((100vw - 50px) * 1.2307692308);
        max-width: 600px; /* 모바일 페이지 데스크탑 대응용으로 추가 -clover */
        max-height: 900px; /* 모바일 페이지 데스크탑 대응용으로 추가 -clover */
        transform: scale(0.89, 0.792);
        transform-origin: center;
        transition: none;
        will-change: transform, opacity;
    }

    & .swiper-slide-active {
        transform: scale(1);
    }

    & .promotion-image-container {
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--radius-slide);
        }

        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-top: 80.247%;
            border-radius: var(--radius-slide);
            background: linear-gradient(180deg, rgba(19, 21, 24, 0), rgba(19, 21, 24, .4));
            pointer-events: none;
        }
    }

    & .badge-container {
        position: absolute;
        top: 15px;
        right: 11px;
        display: flex;
        align-items: center;
        gap: 4px;

        .badge {
            background-color: rgba(0,0,0,.6);
        }
    }

    & .promotion-title {
        position: absolute;
        bottom: 15vw;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: min(50px, 5vw);
        line-height: 1.2;
        font-weight: 700;
        color: #fff;
    }

    & .promotion-description {
        position: absolute;
        bottom: 10vw;
        width: 100%;
        text-align: center;
        font-size: min(30px, 3vw);
        line-height: 1.2;
        color: #fff;
    }

    & .index-container--promotion-swiper {
        position: absolute;
        bottom: 5vw;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: clamp(10px, 3.2vw, 20px);
        line-height: 3.5vw;
        color: #fff;
        z-index: 1;
    }
}

.m-shop-promotion .section--promotion-list {
    gap: 16px;
    padding: 0 16px;
}

.m-shop-promotion .card--promotion {
    --gap-list: 28px;

    & .card__list {
        display: flex;
        flex-direction: column;
        gap: var(--gap-list);
    }

    & .card__item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    & .card__image-container {
        width: 140px;
        height: 186px;
    }

    & .card__image {
        border-radius: var(--radius-main);
    }

    & .card__body {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    & .promotion-title-container {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-weight: 700;
    }

    & .promotion-description-container {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
        color: var(--color-grey-main)
    }

    & .flag-container {
        margin-top: 12px;
    }
}

/* m_shop_promotion.html 끝 */

/* m_modal_popup_shop_promotion.html 시작 */
.m-modal-popup-shop-promotion {
    padding-bottom: 0;
}
/* m_modal_popup_shop_promotion.html 끝 */

/* m_shop_promotion_view.html 시작 */
.m-shop-promotion-view {
    margin-top: 50px;
    margin-bottom: 0;

    & .promotion-image-container {
        width: 100%;

        & .promotion-image {
            width: 100%;
        }
    }

    & .button-container--coupon-receive {
        padding: 16px;
    }

    .promotion__link {
        width: calc(100% - 30px);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #515151;
        border-radius: 5px;
        background-color: #ddd;
        padding: 15px;
        margin: 24px auto;
    }
}

.m-shop-promotion-view .section--coupon-list {
    gap: 0;
    padding: 0 30px;

    & .title-container--main {
        flex-direction: column;
        justify-content: unset;
        gap: 10px;

        & .title--main {
            font-size: 24px;
        }

        & .title--section-sub {
            font-weight: 500;
        }
    }

    & .notice__list--order-list {
        border-radius: var(--radius-main);
        background-color: #F4F4F4;
        margin-top: 32px;
    }

    & .notice__item--order-list {
        font-size: 14px;
        font-weight: 500;
        color: #515151;
        text-align: center;
        line-height: 1.4;
    }
}

& .coupon__list--promotion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;

    & .coupon__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        border: none;
        border-radius: unset;
        padding: 0;
    }

    & .coupon__body {
        position: relative;
        width: 297px;
        aspect-ratio: 297/146;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        /*background: url("/shop/common/image/mobile/image-coupon-promotion.svg") center no-repeat;*/
        /*background-size: contain;*/
        background-color: #424242;
        mask: url("/shop/common/image/mobile/image-coupon-promotion.svg") center/contain no-repeat;
        -webkit-mask: url("/shop/common/image/mobile/image-coupon-promotion.svg") center/contain no-repeat;
        padding: 3px 6px 10px;
        filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
        
        @media (max-width: 674px) {
            width: 225px;
            aspect-ratio: 225/112;
        }
    }

    & .coupon__text {
        color: #fff;

        &.coupon__text--benefit {
            font-size: 24px;
            font-weight: 700;
        }

        & .unit {
            font-size: 14px;
            font-weight: 500;
        }
    }

    & .coupon__footer {
        font-size: 12px;
        color: #999;
    }
}

.m-shop-promotion-view .section--notice-bottom {
    gap: 8px;
    border-radius: var(--radius-main);
    background-color: #F6F7F9;
    padding: 20px 40px;
    margin-top: 72px;

    & .title-container--sub {
        display: flex;
        align-items: center;
        gap: 2px;
        color: #666;
    }

    & .icon.exclamation {
        width: 14px;
        height: 14px;
        background: url("/shop/common/image/mobile/icon/icon-exclamation-666.svg") center no-repeat;
        margin-bottom: 2px;
    }

    & .notice__list--order-list {
        gap: 8px;
        padding: 0;
    }

    & .notice__item--order-list {
        color: #999;
        line-height: 18px;

        &:before {
            background-color: #999;
        }
    }
}

.m-shop-promotion-view .section--product-list {
    margin-top: 22px;

    & .title-container--main {
        padding: 16px;
    }

    & .product-container {
        gap: 20px;
        padding: 0 16px;
    }

    & .product {
        width: calc((100% - 40px) / 3);
        
        & .info-container {
            height: 100px;
        }

        /* 674 미만 해상도에서 상품 2개씩 나오게 */
        @media (max-width: 674px) {
            width: calc((100% - 20px) / 2);
        }
    }
}
/* m_shop_promotion_view.html 끝 */

/* m_shop_store_join.html 시작 */
.m-shop-store-join {
    margin: 150px auto 0;

    & .store-join-image-container {
        width: 100%;
    }

    & .store-join-image {
        width: 100%;
    }
}


/* m_shop_store_join.html 끝 */

/* m_customer_service_personal_inquiry.html 시작 */
.m-customer-service-personal-inquiry {
    & .order-info {
        color: #888;
    }

    & .attachment__item-header--view span {
        color: #888;
    }
}
/* m_customer_service_personal_inquiry.html 끝 */

/* m_report_edit.html 시작 */
.main-contents.m-report-edit {
    margin-top: 50px;
}

.m-report-edit {

    & .title-container--section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
    }

    & .section--sub {
        gap: 10px;
    }

    & .radio--report {
        & .radio__list {
            flex-direction: column;
            gap: 20px;
            padding: 0 16px;
        }

        & .radio__indicator {
            width: 16px;
            height: 16px;
        }

        & .radio__text {
            /*line-height: 16px;*/
        }
    }

    & .form__item--textarea {
        gap: 8px;
        padding: 16px;

        & .textarea--form {
            min-height: 96px;
            border-color: #ddd;
            border-radius: var(--radius-main);
            padding: 12px 8px;
        }
    }
}
/* m_report_edit.html 끝 */

/* m_editor_pick_list.html 시작 */
.m-editor-pick-list {
    margin-top: 80px;

    .header__button-container--right {
        display: flex;
        transform: translateY(-2px);

        & button {
            width: 40px;
        }
    }

    .video-list--editor-pick {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 clamp(16px, 0.74vw, 32px);
    }

    .video__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .video-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 5px;
        overflow: hidden;
    }

    .editor-comment {
        display: flex;
        flex-direction: row;
        gap: 6px;
        border: none;
        padding: 0;

        .editor-comment__header {
            width: 30px;
            aspect-ratio: 1;
            flex-shrink: 0;
        }

        .editor-comment__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .editor-comment__body {
            line-height: 20px;
            padding: 0;
        }
    }

    .button--purchase-link {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #fff;
        border-radius: 5px;
        background: rgba(91, 88, 78, 0.60);
        padding: 0 10px;
    }
}
/* m_editor_pick_list.html 끝 */

/* m_editor_pick_view.html 시작 */
.m-editor-pick-view {
    margin-top: 50px;

    & .video-container {
        width: 100%;
        aspect-ratio: 16/9;

        iframe {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    & .section--sub {
        gap: 16px;
        padding: 24px 0;
    }

    & .title-container--main {
        padding: 0 16px;
    }

    /* 에디터픽 - 브랜드 설정일 때 레이아웃 시작 */
    & .tab--pill {
        position: sticky;
        top: 49px;
        background-color: #fff;
        transition: box-shadow 0.3s ease-in-out;
        z-index: 1;

        &.is-sticky {
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10);
        }
    }

    & .tab__list--pill {
        font-weight: 500;
        height: 50px;
        align-items: center;
        padding: 0 15px;
    }

    & .tab__item--pill {
        height: 32px;
        padding: 0 16px;
    }


    & .product-container {
        gap: 16px 10px;
        flex-wrap: wrap;
        padding: 0 16px;
    }

    .grid-controller {
        padding: 0 16px;
    }

    & .product {
        width: calc((100% - 20px) / 3);

        & .info-container {
            height: 100px;
        }

        @media (max-width: 674px) {
            width: calc((100% - 10px) / 2);
        }
    }

    /* 에디터픽 - 제품설정일 때 레이아웃 시작 */
    & .section--related-product {
        gap: 16px;
        border-top: 8px solid #f6f7f9;
        padding: 24px 0;

        & .title-container--main {
            padding: 0 16px;
        }

        & .product-container.double {
            height: 658px;
            padding: 0 16px;
        }
    }
    /* 에디터픽 - 제품설정일 때 레이아웃 끝 */

}
/* m_editor_pick_view.html 끝 */

/* m_grid_controller_layer.html 시작 */
.m-shop-gird-select-layer {
    gap: 0;
    padding: 0;
    padding-bottom: 20px;

    & .grid-controller__list {
        flex-direction: column;
        justify-content: unset;
        align-items: center;
        gap: 24px;
    }

    & .grid-controller__item {
        width: 100%;
    }
}
/* m_grid_controller_layer.html 끝 */

/* m_my_page_withdrawal.html 시작 */
.m-my-page-withdrawal {
    margin-top: 50px;
    margin-bottom: 50px;

    & .section--sub {
        width: 100%;
        align-items: center;
        gap: 30px;
        padding: 0 32px;
        margin: 0 auto;
        
        @media (width <= 590px) {
            padding: 0 16px;
        }
    }

    & .section__header {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 16px;

        & .checkbox__label {
            display: flex;
            gap: 8px;
            font-size: 13px;
        }

        & .checkbox__text {
            line-height: 18px;
        }
    }

    & .section__body {
        width: 100%;
    }

    & .form__list--column {
        gap: 28px;
    }

    & .form__item--textarea {
        gap: 6px;

        & .form__item-header {
            font-weight: 600;
        }

        & .textarea--form {
            border: 1px solid #ccc;
            border-radius: var(--radius-main);
        }
    }

    & .section__footer {
        width: 100%;
    }
}
/* m_my_page_withdrawal.html 끝 */

/* m_shop_delivery_service_layer.html 시작 */
.m-shop-delivery-service-layer {
    max-width: 641px;
    gap: 14px;
    background-color: transparent;
    padding: 0;

    .modal__button--close {
        position: relative;

        &:before {
            content: '';
            position: absolute;
            inset: -14px;
        }
    }

    .modal__body {
        width: 100%;
        aspect-ratio: 641/568;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        line-height: 1.4;
        background: url("/shop/common/image/mobile/image-border-delivery-service-layer.png") center no-repeat;
        background-size: 100% 100%;
        padding: 53px 0;
    }

    .image--delivery-order-complete {
        width: 256px;
        aspect-ratio: 256/184;
    }

    /* 폰트 설정 */
    .delivery-notice__title {
        font-family: 'SEBANG_Gothic_Bold', sans-serif;
    }

    .delivery-notice__sub-title,
    .delivery-notice__text {
        font-family: 'SEBANG_Gothic_Regular', sans-serif;
    }

    .delivery-notice__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .delivery-notice__sub-title {
        font-size: 20px;
        font-weight: 400;
        color: #1C2A4A;
    }

    .delivery-notice__title {
        font-size: 46px;
        font-weight: 700;
        color: #1C2A4A;
    }

    .delivery-notice__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .delivery-notice__text {
        font-size: 13px;
        font-weight: 400;
        color: #000;
    }

    .button--bottom-main {
        width: 211px;
        height: 42px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        line-height: 50px;
        border-radius: 100px;
        background-color: #1C2A4A;
        margin-top: 10px;
    }

    @media (width <= 674px) {
        max-width: 395px;

        .modal__body {
            aspect-ratio: unset;
            height: 629px;
            background-image: url("/shop/common/image/mobile/image-border-vertical-delivery-service-layer.svg");
        }


        .delivery-notice__sub-title-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .delivery-notice__sub-title {
            font-size: 19px;
        }

        .delivery-notice__title {
            font-size: 26px;
        }

        .image--delivery-order-complete {
            width: 196px;
        }

        .delivery-notice__text-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

    }

    @media (width <= 390px) {
        .modal__body {
            background-image: url("/shop/common/image/mobile/image-border-vertical-small-delivery-service-layer.png");
        }
    }

}
/* m_shop_delivery_service_layer.html 끝 */

/* m_shop_pickup_guide.html 시작 */
.m-shop-pickup-guide {
    margin-top: 50px;
    margin-bottom: 0;

    .section__header {
        position: fixed;
        top: 0;
        left: 50%;
        width: var(--max-width-all-contents);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        translate: -50% 0;

        .title {
            font-size: 16px;
            font-weight: 600;
        }

        .button--close {
            position: absolute;
            right: 16px;

            &:before {
                content: '';
                position: absolute;
                inset: -16px;
            }

            .icon.close {
                width: 16px;
                height: 16px;
            }
        }
    }

    .section__body {
        padding: 24px 16px;
    }

    .pickup-guide__list {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .pickup-guide__item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pickup-guide__item-header {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        border-radius: 5px;
        background: #F3F3F3;
        padding: 0 16px;
    }

    .pickup-guide__item-body {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 3px;
        overflow: hidden;
    }

    .pickup-guide__image {
        width: 100%;
    }

    .section__footer {
        padding: 0 16px;
        margin-top: 8px;
    }

    .button--share-friend {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        color: #fff;
        border: 1px solid #303030;
        border-radius: 5px;
        background: #303030;
        padding: 0 24px;
    }
}
/* m_shop_pickup_guide.html 끝 */

/* m_shop_product_promotion.html 시작 */
.m-shop-product-promotion {
    margin-top: 120px;
}
/* m_shop_product_promotion.html 끝 */

/* m_product_review_all_list.html 시작 */
.m-product-review-all-list {
    margin-top: 50px;

    .button--header {
        position: relative;
        width: unset;
        height: unset;

        &:before {
            content: '';
            position: absolute;
            inset: -8px;
        }
    }

    .section--review-photo-list {
        gap: 8px;
        padding: 0 16px 16px;

        .title-container {
            border-top: 1px solid #ddd;
            padding-top: 16px;
        }

        .attachment__list--image {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .attachment__item--image {
            width: 100%;
            height: unset;
            aspect-ratio: 1;
        }

        .button--view-more-review {
            position: absolute;
            inset: 0;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            color: #fff;
            border-radius: var(--radius-main);
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}
/* m_product_review_all_list.html 끝 */

/* m_product_qna_all_list.html 시작 */
.m-product-qna-all-list {
    margin-top: 50px;

    .button--header {
        position: relative;
        width: unset;
        height: unset;

        &:before {
            content: '';
            position: absolute;
            inset: -8px;
        }
    }

    .section--review-list {
        margin: 0;
    }

    .qa__body--product-view {
        padding: 0;
    }
}
/* m_product_qna_all_list.html 끝 */

/* m_shop_popup_layer.html 시작 */
.m-shop-popup-layer {
    gap: 0;
    background-color: unset;
    box-shadow: none;

    .modal__body {
        position: relative;
        overflow: hidden;
    }

    .button--dismiss-today {
        color: #f2f2f2;
        padding: 10px 12px;
    }

    .banner__link {
        display: block;
    }

    .banner__image {
        width: 100%;
        aspect-ratio: 17/10;
        border-radius: 8px 8px 0 0;
    }

    .swiper-pagination-bullet {
        background-color: #fff;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 3px;
        opacity: 1;
    }

    .button--bottom-main {
        font-size: 14px;
        border-radius: 0;
        background-color: #fff;
    }
}
/* m_shop_popup_layer.html 끝 */

@media all and (max-width:1098px) {}

@media all and (max-width:1024px) {}

@media all and (max-width:991px) {}

@media all and (max-width:834px) {}

@media all and (max-width:736px) {
    /* today_special.html */
    .main-contents.today-special .wrapper.today-special .product-container .product {width: calc(33% - 5px);}

    /* search_result.html */
}

@media all and (max-width:674px) {
    /* search_result.html */

    /* shop_ranking */
}

@media all and (max-width:590px) {
    /* today_special.html */
    .main-contents.today-special .wrapper.today-special .product-container .product {width: calc(50% - 5px); min-width: unset;}

    /* shop_ranking */
}

@media all and (max-width:428px) {
    /* m_product_view.html */
    .m-product-view .product-container--wrap .product {width: calc((100% - 10px) / 2);}

}

@media all and (max-width:412px) {}

@media all and (max-width:390px) {
    .ranking .product-container .product {min-width: unset;}

    .m-product-view-review-view .card--review-image-swiper .swiper-slide {height: 270px;}

    .delivery-progress__list {gap: 4px;}

    .order-info--cancel-view {gap: 4px;}

    .modal--address-search-layer .address-search__container {width: 300px;}

    footer .info-container.regulation {gap: 6px;}
}

@media all and (max-width:350px) {
    footer .info-container.cs li {padding: 0 5px;}
}