@import url(common.css);

/*********************************************************************  
* :root 변수 설정 + 공통
*********************************************************************/
:root {

    /* btn-transparent 공통 설정 */
    --btn-transparent-height: clamp(50px, 9.375vw, 60px);

    /* HERO 섹션 */
    --hero-section-height: calc(100dvh - var(--header-total-height));
    --hero-txt-box-gap: 15px;
    --hero-main-title-line-height: 1.3;

    /* INFO 섹션 */
    --info-section-height: 240px;
    --info-section-inner-gap: clamp(30px, 3.03vw, 40px);
    --info-txt-box-dd-grid-01: clamp(70px, 11.875vw, 76px);
    --info-txt-box-dd-grid-02: 10px;

    /* CLINIC 섹션 */
    --clinic-box-height: 565px;
    --clinic-menu-item-before-size: 42px;
    --clinic-menu-item-anchor-padding-base: clamp(1px, 0.333vw, 5px);

    /* DOCTOR 섹션 */
    --doctor-section-height: 150vh;
    --doctor-img-box-pos: clamp(10px, 2vw, 30px);

    /* TV 섹션 */
    --tv-inner-second-width-w1500: clamp(320px, 57.467vw, 862px);
    --tv-section-height: 53vh;
    --tv-section-border-radius: clamp(9px, 2.8125vw, 18px);
    --tv-list-box-gap: 12px;

    /* NEWS 섹션 */
    --news-inner-gap: 20px;
    --news-inner-width-w1500: clamp(500px, 53.333vw, 800px);
    --news-list-title-box-h3-max-width-w1500: clamp(200px, 26.667vw, 400px);
    --news-list-thumbnail-box-width: 24.038vh;
}

@media screen and (max-width: 1320px) {
    :root {
        --info-section-height: auto;
        --doctor-section-height: auto;
    }
}
@media screen and (max-width: 1100px) {
    :root {
        --clinic-box-height: auto;
    }
}
@media screen and (max-width: 1020px) {
    :root {
        --news-inner-gap: 40px;
    }
}


/*********************************************************************  
* 메인 섹션 타이틀 박스 (공통)
*********************************************************************/
.main-section-title-box {
    & {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    &.center {align-items: center;}
    
    & .main-section-sub-title {
        font-size: var(--font-main-sub-title-size);
        font-weight: var(--font-weight-bold);
        color: var(--color-main-03);
        letter-spacing: 3px;
    }
    & h2 {
        font-size: var(--font-main-h2-size);
        font-weight: var(--font-weight-extra-bold);
        line-height: var(--hero-main-title-line-height);
    }
    & strong {color: var(--color-main-03);}
    & .main-section-text {
        font-size: var(--font-size-18);
        color: var(--color-text-03);
        line-height: 1.5;
        word-break: keep-all;
    }
    &.white, 
    &.white .main-section-sub-title, 
    &.white .main-section-text {color: var(--color-main-white);}
}
@media screen and (max-width: 640px) {
    .main-section-title-box {
        align-items: center;
        text-align: center;
    }
}


/*********************************************************************  
* HERO 이미지 섹션 (#hero)
*********************************************************************/
#hero {
    & {
        /* height: var(--hero-section-height); */
        height: 
            calc(var(--hero-section-height) 
            - var(--info-section-height) 
            - var(--simple-reservation-height))
        ;
        margin-top: var(--header-total-height);
        /* background-color: #062132; */
        background-color: #000;
        color: var(--color-main-white);

        @media screen and (max-width: 1320px) {
            & {height: calc(var(--hero-section-height) / 2)}
        }

        & .swiper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0 auto;

            & .all-box {
                z-index: 10;
                position: absolute;
                /* left: 225px; */
                left: calc(calc(100vw - 1440px) / 2);
                bottom: 100px;
                /* width: clamp(220px, 22.72vw, 300px); */
                height: 30px;

                @media screen and (max-width: 1500px) {
                    & {left: var(--content-inner-padding);}
                }

                @media screen and (max-width: 1320px) {
                    & {bottom: var(--content-inner-padding);}
                }

                & .progress-box {
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    font-family: 'Arial', sans-serif;
                    font-size: 14px;
                    color: #fff;

                    & .autoplay-progress {
                        display: flex;
                        align-items: center;
                    }

                    & svg {
                        width: 120px;
                        height: 2px;
                    }
                    
                    & line {
                        stroke: rgba(255,255,255,0.3);
                        stroke-width: 2;
                        stroke-linecap: round;
                    }
                    & .progress-line {
                        stroke: #fff;
                        stroke-width: 2;
                        stroke-linecap: round;
                        transition: stroke-dashoffset 0.1s linear;
                    }
                }

                & :where(.hero-swiper-btn-prev, .hero-swiper-btn-next) {
                    top: 105%;
                    width: 11px;
                    height: 10px;
                    color: #fff;
                    &::after {
                        font-size: 10px;
                    }
                }
                & .hero-swiper-btn-prev {left: 0;}
                & .hero-swiper-btn-next {right: 0;}

                & .swiper-button-lock {display: block;}
            }
        }
    
        & .swiper-slide {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 100%;

            @media screen and (max-width: 1320px) {
                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.7) 100%);
                    pointer-events: none; /* 클릭 방해 방지 */
                }
            }
        }
    
        & a {
            width: 100%;
            height: 100%;
        }
        & .inner {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    }
}
@media screen and (max-width: 1320px) {
    #hero {margin-top: var(--header-bottom-height);}
}


.hero-txt-box {
    & {
        z-index: 1;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--hero-txt-box-gap);
        word-break: keep-all;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

        & .hero-sub-title {
            font-size: var(--font-hero-sub-title-size);
            font-weight: var(--font-weight-light);
            line-height: 1.5;
        }
        & .hero-main-title {
            font-size: var(--font-hero-h2-size);
            line-height: var(--hero-main-title-line-height);
        }
        
        @media screen and (max-width: 1320px) {
            & {
                justify-content: flex-end;
                padding-bottom: calc(var(--content-inner-padding) * 3);
            }
        }
    }
    
}


/*********************************************************************  
* 병원정보 + 주요 메뉴 섹션 (#info)
*********************************************************************/
#info {
    & {
        height: var(--info-section-height);
        border-bottom: 1px solid var(--color-line-02);
        background-color: var(--color-main-white);

        & .inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }
    }
    
}
@media screen and (max-width: 1320px) {
    #info {
        & .inner {
            flex-direction: column;
            gap: var(--info-section-inner-gap);
            padding: 
                var(--mobile-content-vertical-gap-sm) 
                var(--content-inner-padding)
            ;
        }
    }
}

.info-detail {
    & {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: clamp(15px, 3.90625vw, 25px);
    }
}
@media screen and (max-width: 1320px) {
    .info-detail {
        & {
            order: 2;
            width: 100%;
            padding: var(--content-inner-padding);
            border: 1px solid var(--color-line-01);
            border-radius: var(--main-border-radius-default);
        }
        & .info-symbol-box {
            width: clamp(65px, 14.84375vw, 95px);
            margin-left: auto;
            max-width: 85px;

            @media screen and (max-width: 360px) {
                & {width: 50px}
            }
        }
        & .info-symbol-box img {
            width: 100%;
            object-fit: contain;
        }
    }
    
}

.info-txt-box {
    & {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: clamp(7px, 1.5625vw, 10px);

        & strong {
            font-size: var(--font-info-strong-size);
            font-weight: var(--font-weight-bold);
        }
        & dl {
            display: grid;
            grid-template-columns: clamp(36px, 6.875vw, 44px) auto;
            align-items: center;
            gap: clamp(8px, 1.875vw, 12px);
            font-size: var(--font-size-16);
            font-weight: var(--font-weight-bold);
        }
        & dd {
            display: grid;
            grid-template-columns: 
                var(--info-txt-box-dd-grid-01)
                var(--info-txt-box-dd-grid-02)
                var(--info-txt-box-dd-grid-01)
            ;
        }
        & .note {
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-semi-bold);
            color: var(--color-text-03);
            line-height: 1.5;
            word-break: keep-all;
        }
    }
}

.quick-service-info-wrap {
    & h2 {
        display: none;
        justify-content: center;
        align-items: center;
        font-size: var(--font-info-strong-size);
    }
}
@media screen and (max-width: 1320px) {
    .quick-service-info-wrap {
        & {
            display: flex;
            flex-direction: column;
            gap: var(--info-section-inner-gap);
            width: 100%;
        }
        & h2 {display: flex;}
    }
    
}

.info-menu {
    & {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 52vw;
        max-width: 800px;

        @media screen and (max-width: 1320px) {
            & {
                width: 100%;
                max-width: unset;
                padding: var(--content-inner-padding) 0;
                border: 1px solid var(--color-line-01);
                border-radius: var(--main-border-radius-default);
            }
        }
    }
}
@media screen and (max-width: 900px) {
    .info-menu {
        & {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            row-gap: var(--content-inner-padding);
        }
    }
}

.info-menu-item {
    & {
        & a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(10px, 3.125vw, 20px);
            font-size: var(--font-size-16);
            font-weight: var(--font-weight-semi-bold);
        }
        & .info-menu-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background-color: var(--color-main-04);

            & img {max-height: 50px;}

            @media screen and (max-width: 640px) {
                & {
                    width: 60px;
                
                    & img {transform: scale(0.6);}
                }
            }
        }

        @media screen and (max-width: 1320px) {
            & {width: 100%;}
            &:not(:last-child) {border-right: 1px solid var(--color-line-01);}
        }
        @media screen and (max-width: 900px) {
            &:nth-child(3n) {border-right: 0;}
        }
    }
}


/*********************************************************************  
* 클리닉 섹션 (#clinic)
*********************************************************************/
/* #clinic {
    & {padding-top: var(--content-vertical-gap-big);}

    @media screen and (max-width: 640px) {
        & {padding-top: var(--mobile-content-vertical-gap-big);}
    }
} */

.clinic-box {
    & {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: var(--clinic-box-height);
        /* margin-top: var(--content-vertical-gap-sm); */

        @media screen and (max-width: 640px) {
            & {
                display: flex;
                flex-direction: column;
            }
        }
    }
}

.clinic-item {
    & {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        color: var(--color-main-white);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    &:nth-child(1) {background-image: url('/img/main/bg-clinic-01.webp')}
    &:nth-child(2) {background-image: url('/img/main/bg-clinic-02.webp')}

    @media screen and (max-width: 1100px) {
        & {
            justify-content: flex-start;
            padding: 
                var(--mobile-content-vertical-gap-big) 
                var(--content-inner-padding)
            ;
        }
        
    }
    @media screen and (max-width: 640px) {
        &:nth-child(2) .clinic-menu-box {grid-template-columns: repeat(4, 1fr);}
    }
    @media screen and (max-width: 450px) {
        & {
            padding: 
                var(--mobile-content-vertical-gap-big) 
                10px
            ;
    
            &:nth-child(1) .clinic-menu-box {width: 50%;}
            &:nth-child(2) .clinic-menu-box {width: 100%;}
        }
    }
}
.clinic-title-box {
    & {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;

        & h3 {font-size: var(--font-main-h3-size);}
        & p {
            font-size: var(--font-size-16);
            word-break: keep-all;
            line-height: 1.3;
            text-align: center;
        }
    }
}
.clinic-menu-box {
    & {
        display: flex;
        align-items: center;

        @media screen and (max-width: 1100px) {
            & {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                row-gap: var(--content-inner-padding);
            }
        }
    }
}

.clinic-menu-item {
    & {
        z-index: 1;
        position: relative;
        text-align: center;


        &:before,
        &:after {
            z-index: -1;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            content: '';
        }
        &:before {
            bottom: 0;
            width: var(--clinic-menu-item-before-size);
            aspect-ratio: 1/1;
            border: 2px solid var(--color-main-white);
            border-radius: 50%;
        }
        &:after {
            bottom: calc(var(--clinic-menu-item-before-size) / 3);
            font-size: 20px;
            content: '+'
        }

        & a {
            display: grid;
            grid-template-rows: 42px auto;
            gap: 15px;
            padding: 
                    0 
                    calc(var(--clinic-menu-item-anchor-padding-base) * 10) 
                    65px
            ;
            font-size: var(--font-clinic-menu-item-size);
            
        }
        &:not(:last-child) a {border-right: 1px solid var(--color-line-03);}

        @media screen and (max-width: 1100px) {
            &:nth-child(2) a {border-right: 0;}
        }
        @media screen and (max-width: 640px) {
            &:not(:last-child) a {border-right: 1px solid var(--color-line-03);}
        }

        & .clinic-menu-icon {
            display: flex;
            justify-content: center;
        }
    }
}


/*********************************************************************  
* 의료진 섹션 (#doctor)
*********************************************************************/
#doctor {
    & {
        overflow: hidden;
        /* min-height: var(--doctor-section-height); */
        padding-top: var(--content-vertical-gap-big);

        @media screen and (max-width: 1320px) {
            & {padding-bottom: var(--mobile-content-vertical-gap-big);}
        }
        @media screen and (max-width: 640px) {
            & {padding-top: var(--mobile-content-vertical-gap-big);}
        }

        & .inner {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 20px;

            & #doctor-top-detail-btn {
                & {display: flex;}
                
                @media screen and (max-width: 640px) {
                    & {display: none;}
                }
            }
        }
        
    }
}

.doctor-list {
    & {
        width: 90%;
        margin: clamp(30px, 9.375vw, 60px) auto 0;

        & .swiper {
            overflow: visible;

            & :where(.doctor-swiper-button-prev, .doctor-swiper-button-next) {
                top: 200px;
                color: var(--color-main-03);
            }

            & .swiper-slide {
                display: flex;
                flex-direction: column;
                user-select: none;

                & .doctor-img-layer {
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    width: 100%;
                    height: 100%;
                }

                & .doctor-img-box {
                    overflow: hidden;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    aspect-ratio: 1/1.217;
                    border-radius: var(--tv-section-border-radius);
                    background-color: var(--color-main-04);
                    transition: background 0.8s ease;

                    & img {
                        width: 100%;
                        height: 95%;
                        object-fit: contain;
                    }
                    & .doctor-category {
                        position: absolute;
                        bottom: var(--doctor-img-box-pos);
                        left: var(--doctor-img-box-pos);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: fit-content;
                        height: clamp(32px, 2.878vw, 38px);
                        padding: 0 clamp(15px, 1.515vw, 20px);
                        border-radius: 19px;
                        background-color: var(--color-main-03);
                        font-size: var(--font-size-18);
                        font-weight: var(--font-weight-bold);
                        color: var(--color-main-white);
                        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
                        transition: background 1s ease;
                    }
                    &.class-1 .doctor-category {background-color: var(--color-main-03);}
                    &.class-2 .doctor-category {background-color: var(--color-main-02);}
                    &.class-3 .doctor-category {background-color: var(--color-main-01);}
                    &.class-5 .doctor-category {background-color: var(--color-main-08);}

                    & .btn-transparent {
                        position: absolute;
                        top: var(--doctor-img-box-pos);
                        right: var(--doctor-img-box-pos);
                        width: clamp(70px, 6.82vw, 90px);
                        aspect-ratio: 1/0.467;
                        background-color: var(--color-main-04);
                        font-size: var(--font-size-16);
                        transition: background 0.5s ease, color 0.5s ease;
                    }
                
                    @media screen and (max-width: 1320px) {
                        & .doctor-category {
                            bottom: unset;
                            top: var(--doctor-img-box-pos);
                            font-size: var(--font-size-16);
                        }
                    }
                }
                & .doctor-text-group {
                    padding: 30px;

                    & .doctor-title-box {
                        & {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;

                            & .doctor-sub-title {
                                font-size: var(--font-doctor-sub-title-size);
                                font-weight: var(--font-weight-bold);
                                color: var(--color-main-03);
                            }
                            & h3 {
                                font-size: var(--font-doctor-h3-size);
                            }
                        }
                    }

                    & .doctor-career-list {
                        & {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            margin-top: 20px;

                            & li {
                                position: relative;
                                padding-left: 8px;
                                font-size: var(--font-size-16);
                                color: var(--color-text-03);
                                line-height: 1.3;
                            }
                            & li::before {
                                position: absolute;
                                top: 8px;
                                left: 0;
                                width: 3px;
                                aspect-ratio: 1/1;
                                border-radius: 50%;
                                background-color: var(--color-text-03);
                                content: '';
                            }
                        }
                    }
                }
        
                &:hover .doctor-img-box {
                    background-image: url('/img/common/bg-symbol-transparent.webp');
                    background-repeat: no-repeat;
                    background-size: 220px;
                    background-position: 112% 70%;
                    
                    & .doctor-category {background-color: var(--color-main-white);}
        
                    & .btn-transparent {
                        background-color: transparent;
                        
                        &.black {color: var(--color-main-white);}
                    }
                }
                &:hover .doctor-img-box.class-1 {
                    background-color: var(--color-main-03);

                    & .doctor-category {color: var(--color-main-03);}
                }
                &:hover .doctor-img-box.class-2 {
                    background-color: var(--color-main-02);

                    & .doctor-category {color: var(--color-main-02);}
                }
                &:hover .doctor-img-box.class-3 {
                    background-color: var(--color-main-01);

                    & .doctor-category {color: var(--color-main-01);}
                }
                &:hover .doctor-img-box.class-5 {
                    background-color: var(--color-main-08);

                    & .doctor-category {color: var(--color-main-08);}
                }
            }
        }
    }
    
}


/* 전체보기 + 버튼 설정 */
#doctor-bottom-detail-btn {
    & {display: none;}
    @media screen and (max-width: 640px) {
        & {
            display: flex;
            width: calc(100% - calc(var(--content-inner-padding) * 2));
            max-height: var(--btn-transparent-height);
            margin: 
                var(--mobile-content-vertical-gap-sm) 
                auto
                0
            ;
        }
    }
}


/*********************************************************************  
* TV 섹션 (#tv)
*********************************************************************/
#tv {
    & {
        height: 100vh;
        padding-top: var(--content-vertical-gap-big);
        background: url('/img/main/bg-tv.webp') no-repeat center/cover;

        & .inner:nth-child(1) {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        & .inner:nth-child(2) {
            display: grid;
            grid-template-columns: var(--tv-inner-second-width-w1500) auto;
            gap: 25px;
            height: var(--tv-section-height);
            margin-top: 20px;

            & .tv-main-section {
                & {
                    position: relative;
                    height: 100%;
                    border-radius: var(--tv-section-border-radius);
                }
                & iframe {
                    width: 100%;
                    height: 100%;
                    border-radius: var(--tv-section-border-radius);
                }
            }
            & .tv-list-section {
                
                & ul {
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: var(--tv-list-box-gap);
                    height: var(--tv-section-height);

                    &::-webkit-scrollbar {width: 3px;}
                    &::-webkit-scrollbar-track {border-radius: 10px;}
                    &::-webkit-scrollbar-thumb {background-color: var(--color-main-white);}

                    & li {
                        display: grid;
                        grid-template-columns: calc(var(--tv-inner-second-width-w1500) * 0.2181) auto;
                        align-items: center;
                        gap: 20px;
                        padding-right: 30px;
                        word-break: keep-all;
                        cursor: pointer;

                        @media screen and (max-width: 1020px) {
                            & {
                                grid-template-columns: 
                                    calc(var(--tv-inner-second-width-w1500) * 0.5) 
                                    auto
                                ;
                                gap: var(--content-inner-padding);
                            }
                        }
                        @media screen and (max-width: 450px) {
                            & {
                                grid-template-columns: 
                                    calc(var(--tv-inner-second-width-w1500) * 0.35) 
                                    auto
                                ;
                            }
                        }
                    }
                }

                & .tv-list-thumbnail-box {
                    height: calc(var(--tv-section-height) / 4 - 9px);
                    border-radius: var(--tv-section-border-radius);
                    background-color: var(--color-main-white);
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;

                    @media screen and (max-width: 1020px) {
                        & {
                            height: unset;
                            aspect-ratio: 1/0.612;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 1020px) {
            & {
                height: auto;
                padding-bottom: var(--mobile-content-vertical-gap-big);
            }
            & .inner:nth-child(2) {
                display: flex;
                flex-direction: column;
                gap: 100px;
                width: 100%;
                height: unset;
                aspect-ratio: 1/0.603;
            }
        }
        @media screen and (max-width: 640px) {
            & {padding-top: var(--mobile-content-vertical-gap-big);}
            & .inner:nth-child(1) {
                justify-content: center;
            }
        }
    }

}

@scope (.tv-section-title-box) {
    &.vid {margin-top: 10px;}
    .tv-section-hash-tag {color: var(--color-text-03);}
    h3 {
        color: var(--color-main-white);
        line-height: 1.4;

        display: -webkit-box;      /* 필수: flexbox 기반 박스 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;     /* 최대 2줄 */
        overflow: hidden;           /* 넘치는 텍스트 숨김 */
        text-overflow: ellipsis;   
    }
    &.vid h3 {
        -webkit-line-clamp: 1; 
        font-size: var(--font-tv-vid-h3-size);
    }
    & h3 {font-size: var(--font-tv-list-h3-size);}
}

/* 전체보기 + 버튼 설정 */
@scope (#tv-top-detail-btn) {
    & {display: flex;}
    @media screen and (max-width: 640px) {
        & {display: none;}
    }
}
@scope (#tv-bottom-detail-btn) {
    & {display: none;}
    @media screen and (max-width: 640px) {
        & {
            display: flex;
            width: calc(100% - calc(var(--content-inner-padding) * 2));
            height: var(--btn-transparent-height);
            margin: 
                var(--mobile-content-vertical-gap-sm) 
                auto
                0
            ;
        }
    }
}


/*********************************************************************  
* NEWS 섹션 (#news)
*********************************************************************/
#news {
    & {
        overflow: hidden;
        height: 100vh;
        padding: var(--content-vertical-gap-big) 0;

        & .inner {
            display: grid;
            grid-template-columns: auto var(--news-inner-width-w1500);
            align-items: center;
            gap: var(--news-inner-gap);
            height: 100%;

            & .main-section-title-box {
                padding-bottom: var(--content-vertical-gap-big);

                @media screen and (max-width: 1020px) {
                    & {
                        align-items: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    & .main-section-title {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    }
                }
                @media screen and (max-width: 640px) {
                    & {padding: 0 var(--content-inner-padding);}
                }
                
                & .news-section-btn-box {
                    & {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        width: 250px;
                        padding: 8px;
                        border-radius: 28px;
                        background-color: var(--color-main-04);
    
                        & li {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 12px;
                            border-radius: 21px;
                            cursor: pointer;
    
                            &.active {
                                background-color: var(--color-main-03);
                                color: var(--color-main-white);
                            }
                        }
                        
                        @media screen and (max-width: 1020px) {
                            & {margin-top: calc(var(--news-inner-gap) / 2);}
                        }
                    }

                }
            }

            & .news-list-section {
                & {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    gap: var(--content-vertical-gap-sm);
                    height: 100%;

                    & .news-swiper {
                        & {
                            height: 100%;

                            & .news-list-box {
                                display: grid;
                                grid-template-rows: repeat(3, 1fr);
                                width: 100%;
                                height: 100%;
                            }
                        }
                        @media screen and (max-width: 1020px) {
                            
                            /* 스와이퍼 컨테이너 */
                            & {
                                width: 80vw !important;
                            }
                            & .swiper-wrapper {
                                display: flex;
                                width: 100%;
                                height: auto;
                            }
                    
                            /* 슬라이드 설정 */
                            & .swiper-slide {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100% !important;
                            }
                            & .swiper-slide a {
                                display: flex;
                                flex-direction: column;
                                gap: var(--content-inner-padding);
                                width: 100%;
                            }
                            & .swiper-slide:not(:last-child) a {border-bottom: 0;}
                    
                            /* 본문 + 썸네일 공통 */
                            & .swiper-slide a > div {width: 100%;}
                    
                            /* 본문 */
                            & .news-list-text {
                                order: 2;
                                justify-content: center;
                            }
                            & .news-list-text .news-list-title-box {width: 65vw;}
                            & .news-list-text .news-list-title-box h3 {max-width: 55vw;}
                    
                            /* 썸네일 */
                            & .news-list-thumbnail-box {
                                width: 100%;
                                aspect-ratio: 1/0.566;
                                border-radius: var(--tv-section-border-radius);
                            }
                            & .news-list-thumbnail-box img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }
                @media screen and (max-width: 1020px) {
                    & {width: 100%;}
                    & .btn-transparent {
                        width: calc(100% - calc(var(--content-inner-padding) * 2));
                        height: var(--btn-transparent-height);
                        margin: 0 auto;
                    }
                }
            }
        }

        @media screen and (max-width: 1020px) {
            & .br-rm-w1020 {display: none;}
            & {height: auto;}
            & .inner {
                display: flex;
                flex-direction: column;
                gap: calc(var(--news-inner-gap) + 8px);
                width: 100%;
                padding: 0;
            }
            
        }
        
        @media screen and (max-width: 640px) {
            & {padding: var(--mobile-content-vertical-gap-big) 0;}
        }
    }
}

.news-list-item {
    & a {
        display: grid;
        grid-template-columns: auto var(--news-list-thumbnail-box-width);
        align-items: center;
        column-gap: 50px;
        height: 100%;
    }
    &:not(:last-child) a {
        border-bottom: 1px solid var(--color-line-01);
    }
    & .news-list-num {
        font-size: var(--font-news-list-num-size);
        font-weight: var(--font-weight-bold);
        color: var(--color-main-03);
    }
    & .news-list-text {
        display: flex;
        align-items: center;
        gap: 25px;
    }
}


.news-list-title-box {
    & {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    & .news-list-sub-title {
        font-size: var(--font-size-16);
        color: var(--color-text-03);
    }
    & h3 {
        max-width: var(--news-list-title-box-h3-max-width-w1500);
        font-size: var(--font-news-list-h3-size);
        white-space: nowrap;       /* 줄바꿈 방지 */
        overflow: hidden;          /* 넘치는 글자 숨김 */
        text-overflow: ellipsis;   /* 말줄임표(...) 처리 */
    }
    & .news-list-detail-btn {
        margin-top: 5px;
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-bold);
    }
}

.news-list-thumbnail-box {
    & {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--news-list-thumbnail-box-width);
        aspect-ratio: 1/0.6;
        border-radius: 7px;
        background-color: var(--color-main-04);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }
        & img.no-thumbnail {
            width: 130px;
            height: fit-content;
            object-fit: contain;
        }
    }
}





/************************************************************** 
* 팝업 슬라이드
**************************************************************/
:root {
    --popup-main-top-pos: 8vh;
    --popup-width: clamp(40vw, 70vw, 1000px);
    --slide-btn-height: 70px;
}
@media screen and (max-height: 700px) {
    :root {
        --popup-width: clamp(30vw, 55vw, 800px);
    }
}

.hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* 팝업 틀 */
.popup-container {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.popup-main {
    position: absolute;
    /* top: var(--popup-main-top-pos); */
    top: 50%;
    left: 50%;
    width: var(--popup-width);
    background-color: transparent;
    transform: translate(-50%, -50%);

    @media screen and (max-width: 940px) {
        & {
            top: auto;
            bottom: 0;
            transform: translateX(-50%);
        }
    }

    & .swiper-container {
        overflow: hidden;
        background-color: var(--color-main-black);
    }
}
.popup-slide a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.popup-slide a img {
    width: var(--popup-width);
    height: 100%;
}
.popup-main, .popup-slide a img {aspect-ratio: 16 / 9;}
.popup-close-btn {
    position: absolute;
    top: 10px;
    right: -40px;
    width: 24px;
    height: 24px;
    background: url("/img/main/icon-close-w.webp") no-repeat center;
    background-size: cover;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: 0.3s ease;
}
.popup-close-btn:hover {transform: rotate(180deg);}

/* 슬라이드 버튼 */
.slide-btn-box {
    display: flex;
    width: 100%;
    height: var(--slide-btn-height);

    &.style-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: calc(var(--slide-btn-height) * 2);
        background-color: #fff;

        & button {
            width: 100%;

            &:nth-child(-n+5) {
                border-bottom: 1px solid #ccc;
            }
        }
    }
}
.slide-btn-box button {
    flex: 1;
    opacity: 1;
    height: 100%;
    margin: 0 !important;
    padding: 0px 5px;
    border-radius: 0;
    border-right: 1px solid #ccc !important;
    background-color: #fff;
    font-size: clamp(12.5px, 1.14vw, 16px);
    color: #333;
    word-break: keep-all;
}
.slide-btn-box button:last-child {border-right: 0;}
.slide-btn-box button.swiper-pagination-bullet-active {
    background-color: #36ba98;
    font-weight: 500;
    color: #fff;
}
.slide-close-allday {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    padding: 10px 50px;
    background-color: #000;
    font-size: 14px;
    color: #fff;
    letter-spacing: -0.05em;
}
.slide-close-allday .close-allday-chkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.slide-close-allday label {cursor: pointer;}

@media screen and (max-width: 941px) {
    .popup-container {
        background-color: rgba(0, 0, 0, 0.4);
    }
    .popup-main {
        top: auto;
        /* bottom: -100%; */
        bottom: 0;

        & .swiper-container {background-color: transparent;}
    }
    @keyframes popupMove {
        0% {bottom: -100%;}
        100% {bottom: 0}
    }
    .popup-main, .popup-slide a img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        /* aspect-ratio: 1 / 0.8; */
    }
    .slide-btn-box.swiper-pagination-fraction {
        z-index: 1;
        position: absolute;
        top: 15px;
        left: auto;
        right: 15px;
        display: flex;
        align-items: center;
        width: fit-content;
        height: 24px;
        padding: 0 12px;
        border-radius: 12px;
        background-color: #333;
        color: #fff;
    }
    .fraction-div {
        position: relative;
        padding: 0 5px;
    }
    .fraction-div::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 12px;
        background-color: #ccc;
        transform: translate(-50%, -50%);
        content: '';
    }
    .slide-close-allday {
        justify-content: flex-start;
        padding: 15px 20px 30px;
    }
    .popup-close-btn {
        top: auto;
        right: 20px;
        bottom: calc(20px + 15px);
        width: 18px;
        height: 18px;
    }
}
@media screen and (max-width: 500px) {
    .popup-main, .popup-slide a img {width: 100%;}
}