/*===========================================================
//  의료진 - 프로필
============================================================*/
:root {
    --profile-container-gap: clamp(20px, 3.33vw, 40px);
    --profile-img-box-width: 480px;

    --profile-video-item-padding-base: 10px;
    --video-swiper-btn-box-swiper-button-width: 34px;
}

#profile-container {
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--profile-img-box-width) auto;
    gap: var(--profile-container-gap);

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

    & .profile-img-box {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        height: calc(100vh - var(--sub-visual-img-height));
        max-height: var(--profile-container-div-max-height);

        @media screen and (max-width: 1200px) {
            & {
                height: var(--doctor-profile-img-box-height-mobile);
                padding-top: 20px;
                border-radius: var(--border-radius-default);
                background-color: var(--color-main-04);
            }
        }

        & img {
            width: 100%;
            /* height: 100%; */
            object-fit: contain;

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

    & .profile-info-box {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* height: calc(100vh - var(--sub-visual-img-height)); */
        /* max-height: var(--profile-container-div-max-height); */

        @media screen and (max-width: 1200px) {
            & {
                overflow-y: unset;
                height: auto;
                max-height: unset;
            }
        }

        & h4 {
            font-size: var(--font-size-18);
            color: var(--color-main-03);
        }

        & a.btn-reservation {
            display: flex;
            justify-content: center;
            align-items: center;
            width: clamp(120px, 12.916vw, 155px);
            aspect-ratio: 1/0.3;
            margin-left: auto;
            background-color: var(--color-profile-01);
            border-radius: var(--main-border-radius-default);
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-03);

            @media screen and (max-width: 1200px) {
                & {font-size: var(--font-size-16);}
            }
        }

        & .profile-title-group {
            display: flex;
            flex-direction: column;
            gap: 15px;

            & .department {
                font-size: var(--font-size-20);
                font-weight: var(--font-weight-bold);
                color: var(--color-main-03);

                @media screen and (max-width: 1200px) {
                    & {font-size: var(--font-size-18);}
                }
            }

            & .sub-under-bar-title {
                display: flex;
                align-items: flex-end;
                margin: 0;
                margin-bottom: 20px;
                padding-top: 0;

                & p {
                    padding-bottom: 10px;
                    border-bottom: 3px solid var(--color-main-03);
                    font-size: var(--font-size-20);
                }
            }
        }

        & :where(
            .doctor-specialty-list, 
            .doctor-career-list, 
            .doctor-academic-list, 
            .doctor-academic_award-list
        ) {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 
                var(--doctor-profile-margin-top) 
                0 
            ;
            padding-top: 15px;
            border-top: 1px solid var(--color-line-02);

            &:not(.doctor-specialty-list) {
                margin-bottom: calc(var(--doctor-profile-margin-top) * 2);
            }
            &.doctor-academic-list {
                @media screen and (max-width: 1200px) {
                    & {padding-bottom: var(--mobile-content-vertical-gap-sm);}
                }
            }
            
            & li {
                position: relative;
                padding-left: 10px;
                font-size: var(--font-size-20);
                font-weight: var(--font-weight-regular);
                color: var(--color-profile-02);

                @media screen and (max-width: 1200px) {
                    & {font-size: var(--font-size-18);}
                }
                @media screen and (max-width: 640px) {
                    & {font-size: var(--font-size-16);}
                }

                &::before {
                    position: absolute;
                    top: calc(var(--font-size-20) / 2.5);
                    left: 0;
                    width: 3px;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background-color: var(--color-profile-02);
                    content: '';
                }
            }
        }

        & .VideoSwiper {
            margin-bottom: var(--mobile-content-vertical-gap-big);

            & .video-title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 50px;

                & .video-swiper-btn-box {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    height: 100%;

                    & .swiper-button-next, 
                    & .swiper-button-prev {
                        position: relative;
                        top: 10px;
                        right: unset;
                        bottom: unset;
                        left: unset;
                        width: var(--video-swiper-btn-box-swiper-button-width);
                        height: var(--video-swiper-btn-box-swiper-button-width);
                        border: 1px solid var(--color-line-02);
                        border-radius: 50%;

                        &:after {
                            font-size: calc(var(--video-swiper-btn-box-swiper-button-width) / 2);
                            color: var(--color-text-02);
                        }
                    }
                }
            }

            & .swiper-wrapper {

                & .video-item {
                    display: flex;
                    flex-direction: column;
                    gap: var(--profile-video-item-padding-base);
                    padding: 
                        var(--profile-video-item-padding-base)
                        var(--profile-video-item-padding-base)
                        calc(var(--profile-video-item-padding-base) * 2)
                    ;
                    border: 1px solid var(--color-line-02);
                    border-radius: var(--profile-video-item-padding-base);

                    & .video-item-thumbnail-box {
                        overflow: hidden;
                        width: 100%;
                        aspect-ratio: 16/9;
                        border-radius: var(--profile-video-item-padding-base);
                        /* background-color: var(--color-main-03); */
                        background: var(--color-main-03) url('/img/common/logo-white.webp') no-repeat center/30%;

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

                    & .video-item-info-wrap {
                        display: flex;
                        flex-direction: column;
                        gap: var(--profile-video-item-padding-base);
                        padding: 0 var(--profile-video-item-padding-base);

                        & .video-item-meta-box {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: var(--profile-video-item-padding-base);

                            & p {color: var(--color-text-03);}
                        }
    
                        & h6 {
                            height: calc(var(--font-size-18) * 1.3 * 2);
                            font-size: var(--font-size-18);
                            color: var(--color-main-03);
                            line-height: 1.3;
                        }
                    }
                }
            }
        }
    }
}