/* =================================================
// ~ 란?
================================================== */
#procedure-intro {
    position: relative;
    padding: var(--content-vertical-gap-big);
    /* overflow: hidden; 템플릿 wellness care html 에 직접 넣음. */ 
    --circle-w: 500px;
    @media screen and (max-width: 1080px) {
        padding: var(--mobile-content-vertical-gap-big) var(--content-inner-padding);
    }

    &.well {      
        & svg.circle-shape {
            position: absolute;
            bottom: -180px;
            left: clamp(-160px, -10vw, -60px);
            width:  clamp(360px, 42vw, 500px); /* svg 크기도 같이 */
            height: auto;
            pointer-events: none;

            @media screen and (max-width: 1080px) {
                left: clamp(-160px, -10vw, -150px);
            }
            @media screen and (max-width: 640px) {
                left: clamp(-160px, -10vw, -150px);
            }
        }
    }

    & .inner {
        display: grid;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        gap: calc(var(--gap-base) * 12);
        max-width: 1200px;

        &.well {
            display: flex;
            justify-content:center;
            margin: 0;
            margin-left: clamp(0px, calc((100vw - 1250px) * 0.5), 400px);
            align-items: center;
        }        

        & .intro-txt-layer {
            & .sub-section-title-bx {
                & p {
                    word-break: keep-all;
                    width: 100%;
                    max-width: 945px;

                    @media screen and (max-width:1400px) {
                        & br {
                            display: none;
                        }
                    }
                    & .w-900 {
                        display: none;
                    }
                }
            }
        }

    }
}

/* ================================================== 
// 반응형 - ~ 란? 
================================================== */
/* <= 1250 */
@media (max-width: 1250px) {
    #procedure-intro {
        & .inner {
        display: flex;
        flex-direction: column;

        & .intro-txt-layer {
            & .sub-section-title-bx {
            justify-content: center;
            align-items: center;
            text-align: center;
            word-break: keep-all;
            }
        }
        }
    }
}

/* <= 900 */
@media (max-width: 900px) {
    #procedure-intro {
        
        & .inner {

            & .intro-txt-layer {
                & .sub-section-title-bx {
                    & p {
                        & br {
                            display: none;
                        }
                        & .w-900 {
                            display: block;
                        }
                    }
                }
            }

        }
    }
}

/* <= 500 */
@media (max-width: 500px) {
    #procedure-intro {
        & .inner {
            padding-left: 0;
            padding-right: 0;

            & .intro-img-layer {
                text-align: center;

                & img {
                    width: 100%;
                    height: 100%;
                }
            }
            & .intro-txt-layer {
                & .sub-section-title-bx {
                    & p { 
                        & .w-900 {
                            display: none;
                        }
                    }
                } 
            } 
        }
    }
}

/* =================================================
// Body Slimming Intro
================================================== */
#procedure-intro.body-intro {
    position: relative;
    margin-bottom: clamp(0px,3.149vw,60px);
    overflow-x: cilp;

    & .inner {
        grid-template-columns: repeat(2, auto);

        & .body-layer {
            position: relative;
            width: clamp(220px, 33.6vw + 6em, 420px);
            aspect-ratio: 1/1.35;

            @media screen and (max-width: 500px) {
                /* width: 100%; */
            }

            & img {
                z-index: 1;
                position: absolute;
                inset: 0;              /* top/right/bottom/left: 0 */
                width: 100%;
                object-fit: contain;     /* 꽉 채우기 */
                opacity: 0;
                transition: opacity 0.8s ease;

                &.active {opacity: 1;}
            }
        }

        & .body-txt-layer {
            & .sub-section-title-bx {
                & p {
                    width: clamp(220px,54.285vw,760px);
                }
            }
        }
    }

    & .intro-sub-img {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%);
        width: 100vw;
        max-width: none;

        /* 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴 */
        /* 테스트 끝나면 주석 해제. */
        /* pointer-events: none; */
        /* 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴 */

        & picture,
        & img {
            display: block;
            width: 100%;
        }

        & picture {
          display: grid;
          & img {
            grid-area: 1 / 1;
            width: 100%;
            display: block;
              &:first-child {
                min-height: 180px;
                object-fit: cover;
            }
              &:last-child {
                justify-self: end;     /* 오른쪽 정렬 */
                align-self:flex-end;    /* 세로 가운데(배경 기준) */
                width: clamp(160px,18.897vw,360px);
                transform: translateX(-25%); /* 필요하면 조정 */
              }
          }
        }
    }

    @media screen and (max-width: 1250px) {
        margin-bottom: 0;
        padding-bottom: 0;

        & .intro-sub-img {
            position: relative;
            padding-top: calc(var(--gap-base) * 12);

        }
    }
}


/* =================================================
// 배너
================================================== */
#procedure-banner {
    --mx-h-banner: 360px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-base) * 6);

    width: 100%;
    /* --mx-h-banner 438px 일 때 */
    /* min-height: clamp(200px,48.666vw,var(--mx-h-banner)); */

    min-height: clamp(200px,40vw,var(--mx-h-banner));
    padding-block: calc(var(--content-inner-padding) * 2);
    padding-inline: var(--content-inner-padding);
    background: url('/img/sub/common/img-procedure-banner.webp') no-repeat center/cover;

    font-family: var(--font-family-gowoondodum);
    font-size: clamp(14px,3.2vw,var(--font-size-18));
    color: var(--color-text-procedure-banner);
    text-align: center;
    line-height: var(--line-height-mid);

    & p {word-break: keep-all;}

    /* Wellness Care 용 배너 */
    &.no-text {
        background-image: url('/img/sub/common/img-procedure-banner-no-text.webp');

        & .banner-logo-bx {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: calc(var(--gap-base) * 4);

            & img {
                /* height: fit-content;
                object-fit: contain; */
                width: clamp(90px, 16.927vw, 130px);
                object-fit: contain;
                @media screen and (max-width: 640px) {
                    width: 80px;
                }

                &:last-child {
                    /* max-width: 139px; */
                    width: 60%;
                    @media screen and (max-width: 640px) {
                        width: 40%;
                    }
                }
            }
        }
    }

    & .banner-bottom {
        margin-top: calc(var(--gap-base) * 4);
    }

    @media screen and (max-width:600px) {
        padding-inline: var(--content-inner-padding);
        background: url('/img/sub/common/img-procedure-banner-mb.webp') no-repeat center/cover;
    }
}


/* =================================================
// 장비
================================================== */
#procedure-equipment {
    padding: var(--mobile-content-vertical-gap-sm) 0 var(--mobile-content-vertical-gap-big);

    & .equipment-layer {
        --equipment-layer-mx-w: 1460px;

        margin: var(--mobile-content-vertical-gap-sm) auto 0;
        max-width: var(--equipment-layer-mx-w);
        padding-inline: var(--content-inner-padding);

        &.layout-grid {
            display: grid;
            justify-content: center;

            &.col-2 {
                --col-2-gap-multifly: 20;
                grid-template-columns: repeat(2, 1fr);
                gap: calc(var(--gap-base) * var(--col-2-gap-multifly));
                width: fit-content;
                padding: 0;

                @media screen and (max-width: 640px) {
                    --col-2-gap-multifly: 6;
                }
            
                & .equipment-item {
                    place-self: center;

                    /* 820px 기준 */
                    --grid-col-2-item-w: clamp(160px, 48.78vw, 400px);

                    max-width: var(--grid-col-2-item-w);
                    height: 100%;

                    & img.long {
                        width: unset;
                        margin-bottom: 20px;
                    }

                    @media screen and (max-width: 640px) {
                        width: 100%;
                    }

                    & .equipment-img-bx {
                        --equipment-img-bx-h: 308px;
                        max-height: var(--equipment-img-bx-h);
                        text-align: center;

                        @media screen and (max-width: 640px) {
                            width: 80%;
                        }
                    }
                }
            }
            &.col-3 {
                grid-template-columns: repeat(3, auto);
            }
        }

        & .equipment-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            & .equipment-img-bx {
                text-align: center;

                & img { 
                    width: 100%;

                    &.long {margin-bottom: clamp(20px, 6.25vw, 40px);}
                }
            }

            & .equipment-title-bx {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: calc(var(--gap-base) * 2);
                margin-bottom: calc(var(--gap-base) * 4);

                @media screen and (max-width: 640px) {
                    gap: calc(var(--gap-base) * 4);
                }

                & h3 {
                    font-size: clamp(18px, 4.0625vw, var(--font-size-28));
                    text-align: center;

                    & strong {
                        color: var(--color-sub-01);
                    }
                }
            }
            & .equipment-spec-bx {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: calc(var(--gap-base) * 3);

                & p {
                    font-size: clamp(14px, 2.5vw, var(--font-size-18));
                    letter-spacing: -0.04rem;

                    &:where(.part, .effect) {
                        font-size: clamp(14px, 2.5vw, var(--font-size-18)) !important;
                        font-weight: var(--font-weight-bold);
                        color: var(--color-text-08) !important;
                        word-break: keep-all;
                        text-align: center;
                        line-height: 1.4;
                    }
                }
            }
        }

        & .equipment-swiper {
            --slide-vertical-gap: calc(var(--gap-base) * 8);

            margin-top: var(--slide-vertical-gap);
            user-select: none;
            
            @media screen and (max-width:1024px) {
                padding: 0 10px;
            }

            & .swiper-wrapper {

                & .swiper-slide {

                    & .equipment-item {
        
                        & .equipment-img-bx {

                            & img {
                                width: 100%;
                            }
                        }
                        & .equipment-spec-bx {
                            padding: 
                                var(--slide-vertical-gap)
                                0;

                            & h3 {
                                font-size: var(--font-size-22);
                                color: var(--color-sub-01);

                                & span.reg {
                                    font-size: 0.5em;
                                    position: relative;
                                    top: -0.7em;
                                    margin-left: 0px;
                                }
                            }
                            & p {
                                font-size: var(--font-size-16);
                                color: var(--color-text-03);

                                &.content {
                                    font-size: var(--font-size-22);
                                    font-weight: var(--font-weight-semi-bold);
                                    color: var(--color-text-08);
                                    text-align: center;
                                    line-height: var(--line-height-mid);
                                }
                            }
                        }
                    }
                }
            }

            & .swiper-pagination {
                position: static;
                padding-bottom: var(--slide-vertical-gap);

                & .swiper-pagination-bullet {
                    --bullet-w: 11px;

                    opacity: 1;
                    width: var(--bullet-w);
                    height: var(--bullet-w);
                    background-color: var(--color-sub-02);

                    &.swiper-pagination-bullet-active {background-color: var(--color-sub-01);}
                }
            }
        }

        & .text {
            font-size: clamp(var(--font-size-16), 2.5vw, var(--font-size-18));
            line-height: var(--line-height-default);
            word-break: keep-all;
            text-align: center;

            & span {font-weight: var(--font-weight-bold);}

            @media screen and (max-width: 800px) {
                & br {display: none;}
            }
        }
    }
}


/* =================================================
// 시술 효과 - skin_booster
================================================== */
#procedure-effects {
    --effects-line: 1px solid var(--color-line-01);

    padding: var(--mobile-content-vertical-gap-big) 0;

    & .inner {

        & .effects-layer {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: clamp(20px, 3.33vw, 60px);
            margin-top: calc(var(--gap-base) * 8);

            & .effects-txt-bx {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                width: 100%;

                & .effects-txt-item {
                    --before-w: clamp(10px, 2.34375vw, 15px);
                    --before-border-w: clamp(2.5px, 0.46875vw, 3px);
                    --effect-txt-item-padding-block-multifly: 8;
                    --effect-txt-item-padding-inline-multifly: 4.5;
                    --effect-txt-item-font-size: var(--font-size-18);

                    padding: 
                        calc(var(--gap-base) * var(--effect-txt-item-padding-block-multifly))
                        calc(var(--gap-base) * var(--effect-txt-item-padding-inline-multifly))
                    ;
                    font-size: var(--effect-txt-item-font-size);
                    line-height: var(--line-height-mid);
                    word-break: keep-all;

                    &:nth-child(-n + 2) {border-bottom: var(--effects-line);}
                    &:nth-child(odd) {border-right: var(--effects-line);}

                    & p {
                        position: relative;
                        padding-left: clamp(20px, 4.6875vw, 30px);
                        font-size: clamp(14px, 3.33vw, var(--font-size-18));

                        &::before {
                            --gap: 4px;
    
                            position: absolute;
                            top: calc(var(--effect-txt-item-font-size) / 4);
                            left: 0;
                            width: var(--before-w);
                            height: calc(var(--before-w) * 0.47);
                            border-width: 
                                0 
                                0 
                                var(--before-border-w) 
                                var(--before-border-w)
                            ;
                            border-color: var(--color-main-03);
                            border-style: solid;
                            transform: rotate(-45deg);
                            content: '';
                        }
                    }
                }
            }
            @media screen and (max-width: 900px) {
                flex-direction: column;

                & .effects-txt-bx {
                    order: 2;

                    & .effects-txt-item {
                        --effect-txt-item-padding-block-multifly: 4;
                    }
                }
                & .effects-img-bx {
                    max-width: clamp(240px, 62.5vw, 400px);

                    & img {width: 100%;}
                }
            }

        }
    }
}


/* =================================================
// 슬라이드
================================================== */
#procedure-slides {
    --bg-color: #fcf8f6;
    --slide-txt-layer-w: 52%;
    --slide-layer-w: 48%;

    padding: var(--content-vertical-gap-big) 0;
    background-color: var(--bg-color);

    & .inner {
        display: flex;
        align-items: center;
        gap: calc(var(--gap-base) * 8);

        & .slide-txt-layer {
            /* width: var(--slide-txt-layer-w); */
            flex-grow: 1;

            & .slide-desc {
                display: flex;
                flex-direction: column;
                gap: calc(var(--gap-base) * 3);

                & strong {
                    font-size: clamp(15px, 3.125vw, var(--font-size-22));
                    font-weight: var(--font-weight-bold);
                    word-break: keep-all;

                    @media screen and (max-width: 1460px) {
                        line-height: var(--line-height-mid);
                    }

                    & span {
                        display: inline-block;
                        margin-right: 3px;
                        font-family: var(--font-family-granville);
                        color: var(--color-sub-01);
                        letter-spacing: 0.5px;
                        transform: scaleY(0.92);
                    }

                    & span.reg {
                        font-size: 1em;
                        position: relative;
                        top: -0.1em;
                        margin-left: -2px;
                        color: #333;
                    }
                    
                }
                & p {
                    font-size: clamp(14px, 3.33vw, var(--font-size-18));
                    word-break: keep-all;

                    @media screen and (max-width: 1460px) {
                        & br {display: none;}
                    }
                }
            }

            & .slide-nav {
                display: flex;
                align-items: center;
                gap: calc(var(--gap-base) * 8);

                & button {
                    font-size: 20px;
                }
            }
        }

        & .slide-layer {
            width: var(--slide-layer-w);

            &.rejuran {max-width: 500px;}
            &.juvelook {max-width: 600px;}

            & .imgSwiper {
                & .swiper-pagination {display: none;}
                & .swiper-wrapper {
                    & .swiper-slide {
                        height: auto;

                        & img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            max-height: 370px;
                            object-fit: contain;
                            filter: contrast(1.1) brightness(1.02);

                            &.elravie {
                                max-width: 400px;
                                max-height: 100%;
                                margin: 0 auto;
                            }
                        }
                    }
                }
            }
        }
        
    }

    @media screen and (max-width:1024px) {
        & .inner {
            flex-direction: column;

            & .slide-txt-layer {
                & .sub-section-title-bx {
                text-align: center;
                & h2 {
                    justify-content: center;
                }
                & .slide-nav {
                    display: none;
                }
            }
            }
            
            & .slide-layer {
            position: relative;
            width: 100%;
            & .imgSwiper {
                & .swiper-pagination {
                    position: static;
                    display: block;
                    padding-bottom: var(--slide-vertical-gap);

                    & .swiper-pagination-bullet {
                        --bullet-w: 11px;

                        opacity: 1;
                        width: var(--bullet-w);
                        height: var(--bullet-w);
                        background-color: var(--color-sub-02);

                        &.swiper-pagination-bullet-active { background-color: var(--color-sub-01);
                        }
                    }
                }



                }
            }

        }
    }

}


/* =================================================
// 기준
================================================== */
#procedure-standard {
    padding: var(--mobile-content-vertical-gap-big) 0;

    & .inner {

        & .standard-layer {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;
            margin-top: var(--mobile-content-vertical-gap-sm);

            @media screen and (max-width: 1000px) {
                display: flex;
                flex-direction: column;
                margin-top: 0;
            }

            & .standard-intro-wrap {
                display: flex;
                flex-direction: column;
                align-items: center;

                & .standard-intro-img-bx {
                    width: 100%;
                    max-width: 316px;

                    & img {
                        width: 100%;
                    }
                }
                & h3 {
                    display: block;
                    margin-bottom: calc(var(--gap-base) * 3);
                    font-size: clamp(20px, 2.3vw + 0.8em, var(--font-size-38));
                }
                & p {
                    font-size: clamp(var(--font-size-16), 2.5vw, var(--font-size-18));
                    text-align: center;
                    line-height: var(--line-height-default);
                    word-break: keep-all;

                    @media screen and (max-width: 420px) {
                        & br {display: none;}
                    }
                }
            }
            & .standard-content-wrap {

                @media screen and (max-width: 1000px) {
                    --standard-content-wrap-padding-top: calc(var(--gap-base) * 20);

                    position: relative;
                    padding-top: var(--standard-content-wrap-padding-top);

                    &::before {
                        position: absolute;
                        top: calc(var(--standard-content-wrap-padding-top) / 2);
                        left: 50%;
                        transform: translateX(-50%);
                        width: 100%;
                        max-width: 240px;
                        height: 1px;
                        background-color: var(--color-line-01);
                        content: '';
                    }
                }

                & .swiper-pagination {
                    display: none;

                    @media screen and (max-width: 1000px) {
                        display: block;
                        position: static;
                        margin-top: calc(var(--gap-base) * 6);
                    }

                    & .swiper-pagination-bullet {
                        --bullet-w: 11px;
    
                        opacity: 1;
                        width: var(--bullet-w);
                        height: var(--bullet-w);
                        background-color: var(--color-sub-02);
    
                        &.swiper-pagination-bullet-active {background-color: var(--color-sub-01);}
                    }
                }
                
                & .swiper-wrapper {
                    display: flex;

                    /* PC 버전 (1001px 이상) */
                    @media screen and (min-width: 1001px) {
                        flex-direction: column; /* 다시 세로로 배치 */
                        gap: calc(var(--gap-base) * 14);
                        transform: none !important; /* 스와이퍼 움직임 강제 방지 */
                        height: auto !important;
                    }

                    /* 모바일 버전 (1000px 이하) */
                    @media screen and (max-width: 1000px) {
                        flex-direction: row; /* 가로 슬라이드를 위해 row로 변경 */
                        gap: 0; /* 스와이퍼 spaceBetween 옵션으로 조절하거나 0으로 초기화 */
                        align-items: stretch;
                    }

                    & .standard-content-item {
                        --standard-content-item-before-w: clamp(100px, 9.6vw, 126px);
                        --standard-content-item-after-w: calc(var(--standard-content-item-before-w) / 4.2);
                        
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--gap-base) * 4);

                        /* PC 버전 여백 */
                        @media screen and (min-width: 1001px) {
                            padding-left: calc((var(--standard-content-item-before-w) + var(--standard-content-item-after-w)) + (var(--gap-base) * 6));
                        }

                        /* 모바일 버전 (낱개 슬라이드 설정) */
                        @media screen and (max-width: 1000px) {
                            width: 100%;
                            flex-shrink: 0;
                            
                            &::before, &::after {
                                display: none;
                            }
                        }

                        &::before, &::after {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            content: '';
                        }
                        &::before {
                            left: 0;
                            width: var(--standard-content-item-before-w);
                            height: 1px;
                            background-color: var(--color-sub-01);
                        }
                        &::after {
                            left: var(--standard-content-item-before-w);
                            width: var(--standard-content-item-after-w);
                            aspect-ratio: 1/1;
                            border-radius: 50%;
                            background-color: var(--color-sub-01);
                        }
                        
                        & h4 {
                            font-size: clamp(18px, 1.8vw + 0.5em, var(--font-size-28));

                            @media screen and (max-width: 1200px) {
                                line-height: var(--line-height-mid);
                            }
                            
                            /* 모바일 버전 */
                            @media screen and (max-width: 1000px) {
                                color: var(--color-main-02);
                                text-align: center;
                            }
                        }
                        & p {
                            font-size: clamp(var(--font-size-16), 2.5vw, var(--font-size-18));
                            color: var(--color-text-08);
                            word-break: keep-all;
                            line-height: var(--line-height-default);

                            @media screen and (max-width: 1300px) {
                                & br {display: none;}
                            }

                            /* 모바일 버전 */
                            @media screen and (max-width: 1000px) {
                                text-align: center;

                                & br {display: block;}
                            }
                            @media screen and (max-width: 420px) {
                                & br {display: none;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* =================================================
// 추천 대상 - Wellness Care
================================================== */
#procedure-target {
    background-color: var(--color-sub-03);
    padding: 80px 0;
    & .sub-section-title-bx {
        & .target-text {
            & div {
                width: clamp(300px,89.4444vw,805px); /* w-900 기준 */
                text-align: center;
                padding: 25px 0;
                font-size: var(--font-size-16);
                border-bottom: 1px solid var(--color-sub-02);
                word-break: keep-all;
                line-height: 1.3;
            }
        }
    } /*  // .sub-section-title-bx */
} /*  // #procedure-target */