#doctor-container {
    margin-bottom: var(--content-vertical-gap-big);

    @media screen and (max-width: 1300px) {
        margin-bottom: var(--mobile-content-vertical-gap-sm);
    }
    
    /* 의료진 소개 섹션 인트로 타이틀 */
    & h2.doctor-intro-title-wrap {
        --span-min-size: clamp(18px, 4.58333333vw, 22px);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: var(--content-vertical-gap-mid);
        padding-inline: calc(var(--gap-base) * 3);

        & span {
            font-size: clamp(var(--span-min-size), 3vw, var(--font-size-38));
            line-height: 1.37;
            text-align: center;
        }
        & span:first-child {font-weight: var(--font-weight-light);}
    }

    /* 의료진 소개 */
    & .doctor-wrap {

        & .doctor-item {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: center;

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

            & .doctor-img-bx {
                --mx-w: 795px;

                max-height: var(--mx-w);

                @media screen and (max-width: 1300px) {
                    --mx-w: 700px;
                    max-width: var(--mx-w);
                    padding-inline: var(--content-inner-padding);
                }

                & img {
                    width: 100%;
                }
            }
            & .doctor-txt-bx {
                --doctor-text-p-size: clamp(14px, 2.5vw, var(--font-size-18));
                --row-gap: calc(var(--gap-base) * 4);
                --doctor-item-padding: 
                    calc(var(--gap-base) * 10)
                    calc(var(--gap-base) * 12)
                ;

                @media screen and (max-width: 1300px) {
                    width: 100%;
                    padding-inline: var(--content-inner-padding);
                }

                & .doctor-title-group {
                    z-index: 1;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: var(--row-gap);
                    padding: var(--doctor-item-padding);
                    border-bottom: 1px solid var(--color-line-01);

                    @media screen and (max-width: 1300px) {
                        align-items: center;
                    }

                    &::after {
                        z-index: -1;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        width: 281px;
                        aspect-ratio: 1/0.6476;
                        background: url('/img/sub/about/doctor/img-doctor-logo.webp') no-repeat center/contain;
                        content: '';

                        @media screen and (max-width: 1300px) {
                            max-width: clamp(80px, 13.8461538vw + 40px, 180px);
                            left: auto;
                            right: 0;
                        }
                    }

                    & .doctor-name {
                        display: flex;
                        align-items: flex-end;
                        gap: calc(var(--gap-base) * 2);
                        font-weight: var(--font-weight-bold);
                        line-height: 1;

                        & h3 {
                            font-size: clamp(24px, 6vw, var(--font-size-38));
                        }
                        & p {font-size: var(--doctor-text-p-size);}

                        @media screen and (max-width: 1300px) {
                            flex-direction: column;
                            align-items: center;
                        }
                    }
                }
                & .doctor-profile-list {
                    display: grid;
                    grid-auto-flow: column;
                    grid-template-rows: repeat(7, auto);
                    column-gap: var(--row-gap);
                    row-gap: var(--row-gap);

                    max-width: calc(100% - calc(var(--quick-item-width) + var(--side-quick-bar-pos)));

                    padding: var(--doctor-item-padding);

                    @media screen and (max-width: 1300px) {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        max-width: unset;
                    }
                    
                    & p {
                        font-size: var(--doctor-text-p-size);
                        color: var(--color-text-03);
                        line-height: 1.2;
                        word-break: keep-all;
                    }
                }
            }
        }
    }
}