:root {
    --width-size-1280: 1280px;
    --width-size-240: 240px;
    --height-size-140: 140px;
    --margin-center: 0 auto;
    --padding-clamp-top: clamp(30px,3.674vw,70px);
}


.sub-tour-box {
    width: 100%;

    & .sub-tour-inner {
        position: relative;

        & .swiper-button-next,
        & .swiper-button-prev {
            z-index: 2;
            position: absolute;
            color: var(--color-line-01);
            top: 30%;
            transform: translate(-50%, -50%);
        }
        & .swiper-button-next {
            left: 99%;
        }
        & .swiper-button-prev {
            left: 1%;
        }
    }

    @media screen and (max-width: 1440px) {
        & .swiper-button-next,
        & .swiper-button-prev {
            display: none;
        }
    }
}

/* ******************************************* */
/* ******** 둘러보기, 층별안내 (공통) ******** */
/* ******************************************* */
.sub-tour-title {
    max-width: var(--width-size-1280);
    padding-top: var(--padding-clamp-top);
    margin: 0 auto;
    border-bottom: 1px solid var(--color-line-01);

    & h3 {
    display: inline-block;
    padding: 0 5px 10px 5px;
    font-size: var(--font-size-28);
    border-bottom: 3px solid var(--color-main-03);
    }
}

/* ************************************ */
/* ************ swiper css ************ */ 
/* ************************************ */

/* ************ #tour-swiper-container ************ */
:root {
    --tour-swiper-container-gap: clamp(10px, 2.272vw, 30px);
    --slide-caption-content-height: 102px;
}

#tour-swiper-container {
    display: flex;
    flex-direction: column;
    gap: var(--tour-swiper-container-gap);
    width: 100%;
}

.tour-main {
    width: 100%;

    & .swiper-wrapper {
        width: 100%;
        height: clamp(300px, 51.515vw, 670px);
    }

    & .swiper-slide {
        position: relative; /* caption을 겹쳐 배치하려면 필요 */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;

        /* 캡션 스타일 */
        & .slide-caption {
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            max-width: var(--width-size-1280);
            border: 1px solid var(--color-line-02);
            border-radius: var(--simple-input-border-radius);
    
            & .slide-caption-img-box {
                width: 100%;
                height: calc(100% - var(--slide-caption-content-height));
                background: url('/img/common/logo-color.webp') no-repeat center/20%;
    
                & img {
                    width: 100%;   
                    height: 100%;
                    object-fit: cover;
                }
            }

            & .slide-caption-content {
                display: flex;
                align-items: center;
                padding: 0 var(--tour-swiper-container-gap);
                height: var(--slide-caption-content-height);
                border-top: 1px solid var(--color-line-02);
                
                & img { 
                    width: clamp(30px,5.468vw,35px);  /* 비율 계산 640px */
                    height: 60px;
                }
    
                & .slide-caption-content-inner {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    padding-left: var(--tour-swiper-container-gap); /* 비율 계산 640px */
    
                    & h4 {
                        font-size: clamp(18px,1.666vw,22px); /* 비율 계산 1320px */
                        font-weight: 700;
                        margin-bottom: 6px;

                        @media screen and (max-width: 640px) {
                            & {font-size: var(--font-size-18);}
                        }
    
                        & span {color: var(--color-main-03);}
                    }
                    & p {
                        font-size: clamp(14px,1.363vw,18px); /* 비율 계산 1320px */
                        line-height: 1.4;
                        word-break: keep-all;
                    }
                }
            }
        }
    }
}

/* ************ tour-thumbs 클래스 ************ */
.tour-thumbs { 
    width: 100%;
    max-width: var(--width-size-1280);
    margin: 0 auto;
    
    & .swiper-wrapper {
        width: 100%;
    
    & .swiper-slide {
        flex: 0 0 auto;              /* 슬라이드 고정폭 */
        width: clamp(72px, 22vw, 160px);  /* 모바일에서 더 작은 최소값 */
        aspect-ratio: 4 / 3;         /* 가로:세로 비율 고정 */
        opacity: .4;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid var(--color-line-02);
        border-radius: var(--sub-border-radius-default);
        background: url('/img/common/logo-color.webp') no-repeat center/50%;
        overflow: hidden;
        
        &.swiper-slide-thumb-active {
        opacity: 1;
        border: 3px solid var(--color-main-03);
        }
        & img { 
        object-fit: cover; 
        width: 100%;
        height: 100%;
        }
        
    }
    }
}

@media (min-width: 768px) {
    .tour-thumbs .swiper-wrapper .swiper-slide {
        border-radius: 18px;
    }
}
/* ******************************************** */
/* ***************** 층별안내 ***************** */
/* ******************************************** */
:root {
    --floor-list-padding-base: clamp(15px, 2.272vw, 30px);
}

.floor-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: var(--width-size-1280);
    margin: 0 auto;
    padding-bottom: var(--mobile-content-vertical-gap-big);

    & .row {
        display: grid;
        grid-template-columns: clamp(60px,19.531vw,200px) 1fr; /* 왼쪽 배지, 오른쪽 내용 */
        gap: 10px;
        align-items: center;
        height: clamp(60px,8.30vw,85px); /* 비율 계산 1024px */

        & .floor {
            margin: 0;
            display: grid;
            place-items: center;
            height: 100%;
            border-radius: var(--sub-border-radius-default);
            background: #1e74c6;
            color: #fff;
            font-size: clamp(18px, 3.4375vw, 22px);
            font-weight: 700;
        }
        
        & .desc {
            margin: 0;
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 clamp(15px,2.929vw,30px);
            background: #f7f7f7;
            border-radius: var(--sub-border-radius-default);
            color: #222;
            font-size: clamp(14px,1.757vw,18px); /* 비율 계산 1024px */
            font-weight: 700;

            @media screen and (max-width: 370px) {
                & {font-size: clamp(12px, 3.5135vw, 13px);}
            }
    
            & p:not(:first-of-type) {
                position: relative;
                padding-left: var(--floor-list-padding-base);
    
                &::before {
                    position: absolute;
                    top: 50%;
                    left: calc(var(--floor-list-padding-base) / 2);
                    width: clamp(2px, 0.46875vw, 3px);
                    height: 90%;
                    background-color: var(--color-text-02);
                    transform: translateY(-50%);
                    content: '';
                }
            }
        }
    }

    & .row:last-child .desc {
        @media screen and (max-width: 730px) {
            & {
                display: grid;
                grid-template-columns: repeat(3, auto);
                padding: 10px clamp(15px,2.929vw,30px);

                & p:nth-of-type(4) {
                    padding-left: 0;

                    &::before {
                        display: none;
                    }
                }
            }
        }
    }

}