/**
 * Doctors Module CSS
 * 의료진 목록 및 상세 모달 스타일
 */

/* Doctor List Section */
.doctor {
    padding: 0 14.7% 120px;
}

/* MOMO 워터마크 + 상단공간 — 정적 6.css(#content .doctor{padding-top:0})보다 높은 특정성(#content section.doctor)으로 덮어씀 */
#content section.doctor {
    position: relative;
    padding-top: 160px;
}

/* MOMO 워터마크 (원본 doctor .container::before 동일) */
#content section.doctor::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 14.7%;
    width: 40%;
    padding-top: 260px;
    background: url('https://www-momo.tlabs.team/images/momo/location/img_momo_txt.png') no-repeat top center;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

#content section.doctor > ul {
    position: relative;
    z-index: 1;
}

.doctor > ul {
    display: grid;
    grid-template-columns: repeat(4, 3fr);
    column-gap: 40px;
    row-gap: 28px;
}

.doctor > ul > li {
    position: relative;
    border: 1px solid #c4c4c48c;
    min-width: 0;
}

.doctor > ul > li .hover_box {
    width: 100%;
    height: 100%;
    padding: 20px 5% 38px;
    box-sizing: border-box;
    border: 1px solid #D4C4F5;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all .2s;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px) saturate(2);
    -webkit-backdrop-filter: blur(15px);
}

.doctor > ul > li:hover .hover_box.on {
    z-index: 10;
    opacity: 1;
}

/* hover */
@media (hover: hover) {
    .doctor > ul > li:hover .hover_box {
        z-index: 10;
        opacity: 1;
    }
}

.doctor > ul > li .hover_box dl {
    border-bottom: 1px solid #DFDFDF;
}

.doctor > ul > li .hover_box dl dt {
    font-size: 28px;
    line-height: 36px;
}

.doctor > ul > li .hover_box dl dd {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.doctor > ul > li .hover_box p {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #29203B;
}

.doctor > ul > li .hover_box ul li {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #29203B;
    padding-left: 10%;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doctor > ul > li .hover_box ul li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #29203B;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4%;
}

.doctor > ul > li .hover_box .more_btn {
    display: block;
    padding: 11px 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    color: #8556E3;
    background: #F2ECFF;
    border: 1px solid rgba(116, 53, 255, 0.15);
    border-radius: 100px;
}

.doctor > ul > li .hover_box .close_btn {
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 5%;
}

.doctor > ul > li .hover_box .close_btn span {
    display: block;
    width: 2px;
    height: 14px;
    background: rgba(116, 53, 255, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -1px;
}

.doctor > ul > li .hover_box .close_btn span:first-of-type {
    transform: rotate(45deg);
}

.doctor > ul > li .hover_box .close_btn span:last-of-type {
    transform: rotate(-45deg);
}

.doctor > ul > li .plus_btn {
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 5%;
}

.doctor > ul > li .plus_btn span {
    display: block;
    width: 2px;
    height: 16px;
    background: #29203B;
    position: absolute;
    top: 50%;
    left: 50%;
}

.doctor > ul > li .plus_btn span:first-of-type {
    width: 2px;
    height: 16px;
    margin-top: -8px;
    margin-left: -1px;
}

.doctor > ul > li .plus_btn span:last-of-type {
    height: 2px;
    width: 16px;
    margin-top: -1px;
    margin-left: -8px;
}

.doctor > ul > li dl {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px 12px;
    gap: 8px;
}

.doctor > ul > li dl dt {
    letter-spacing: -0.02em;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.doctor > ul > li dl dt .name {
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}

.doctor > ul > li dl dt .badge {
    font-size: 14px;
    color: #fff;
    letter-spacing: -0.02em;
    padding: 2px 8px;
    line-height: 1.2;
    border-radius: 24px;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    height: max-content;
}

.doctor > ul > li dl dd {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: #29203B;
}

.doctor > ul > li .img_box {
    padding-bottom: calc(339/300*100%);
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.doctor .pagination_box {
    text-align: center;
    margin-top: 100px;
    position: relative;
}

.doctor .pagination_box button {
    background: #8556E3;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 11px 32px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.02em;
    position: absolute;
    top: -80px;
    right: 0;
}

/* Doctor Detail Modal */
.doc_view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 35, 50, .75);
    z-index: 99999;
    overflow: hidden;
    display: none;
}

.doc_view.on {
    display: block;
}

.doc_info_con {
    position: relative;
    width: calc(1320/1920 * 100%);
    max-width: 1320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #fff 42%, #F2F4F7 20%);
    background-attachment: fixed;
    padding: 64px;
    gap: 60px;
    display: flex;
    justify-content: space-between;
    height: 660px;
}

.doc_back_bg {
    background-color: #F2F4F7;
    width: 100%;
    height: 465px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.doc_view_img {
    width: 49.5%;
    display: inline-block;
}

.doc_text_box {
    width: 100%;
    display: inline-block;
    overflow-x: scroll;
}

.doc_photo {
    flex: 1;
    top: 50px;
    left: 50px;
}

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

.doc_text {
    width: 50%;
    right: 50px;
    top: 50px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.doc_text .top_text {
    padding: 25px 0 0;
    height: 244px;
    flex-shrink: 0;
}

/* 하단(학력·약력 + 학술·수상)만 내부 세로 스크롤 — 상단 헤더/그라데이션 배경은 고정 유지 */
.doc_bottom_scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.doc_text .top_text .deco {
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
}

.doc_text .top_text .deco h1 {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: fit-content;
    font-size: 50px;
    color: #1B2332;
    display: inline-block;
}

.doc_text .top_text .deco .badge {
    grid-row: 1;
    grid-column: 2;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 4px 16px;
    border-radius: 16px;
    margin-bottom: 2px;
    display: inline-block;
    width: max-content;
}

.doc_text .top_text .deco p {
    grid-row: 2;
    grid-column: 2;
    color: #475467;
    line-height: 1.1em;
    font-size: 20px;
}

.doc_text .top_text h2 {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 20px;
    text-wrap: balance;
    word-break: keep-all;
}

.doc_text .top_text h3 {
    font-size: 28px;
    color: #667085;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.4em;
}

.doc_text .bottom_text {
    padding: 12px 0;
}

.doc_text .bottom_text h1 {
    font-size: 30px;
    font-weight: 600;
    color: #1B2332;
    margin-bottom: 6px;
}

.doc_text .bottom_text p {
    color: #667085;
    font-size: 22px;
    line-height: 1.5em;
    letter-spacing: -1.5px;
}

.view_close {
    position: absolute;
    top: 50px;
    right: 50px;
}

.doc_view .licence_box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .8);
    text-align: center;
    display: none;
}

.doc_view .licence_box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.doc_view .licence_box .licence_close {
    width: 69px;
    height: 70px;
    background: url('/theme/basic/img_web/sub/l_close.png');
    position: absolute;
    top: 100px;
    right: 100px;
    cursor: pointer;
}

/* Doctor List (legacy) */
.doctor_list ul li:last-child {
    margin-right: 0;
}

.doctor_list ul li .doc_img img {
    width: 100%;
}

.doctor_list ul li .doc_txt {
    text-align: center;
    letter-spacing: -1px;
    padding: 25px 0;
}

.doctor_list ul li .doc_txt h3 {
    font-size: 32px;
    color: #1c1c1c;
    font-weight: normal;
}

.doctor_list ul li .doc_txt h3 span {
    font-weight: 600;
}

.doctor_list ul li .doc_txt p {
    font-size: 18px;
    color: #667085;
    line-height: 35px;
}

.btn_write {
    position: absolute;
    right: 44px;
    bottom: 34px;
    line-height: 50px;
    height: 50px;
    padding: 0 30px;
    border: 1px solid #777C81;
    border-radius: 100px;
    background: #fff;
    font-size: 18px;
    letter-spacing: -1px;
    white-space: nowrap;
}

/* Body popup state */
body.popup-open {
    overflow: hidden;
}

/* Responsive - PC (1440px ~ 1540px) */
@media screen and (max-width: 1540px) {
    .doctor {
        padding: 0 12% 120px;
    }
}

/* Responsive - PC (1058px ~ 1440px) */
@media screen and (max-width: 1440px) {
    .doctor {
        padding: 0 8% 120px;
    }

    .doctor ul li dl dt {
        font-size: 16px;
    }

    .doctor ul li dl dd {
        font-size: 11px;
    }

    .doc_info_con {
        width: 84%;
        gap: 32px;
    }
}

/* Responsive - PC (1024px ~ 1058px) */
@media screen and (max-width: 1058px) {
    .doctor {
        padding: 0 6% 120px;
    }
}

/* Responsive - Tablet (769px ~ 1024px) */
@media screen and (max-width: 1024px) {
    .doctor {
        padding: 0 5% 80px;
    }

    .doctor > ul {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 16px;
        row-gap: 40px;
    }

    .doctor > ul > li .hover_box ul li {
        padding-left: 8%;
    }

    .doctor > ul > li .hover_box ul li::before {
        left: 2%;
    }

    .doctor > ul > li dl {
        padding-bottom: 10px;
    }

    .doctor > ul > li dl dt {
        font-size: 20px;
        line-height: 28px;
    }

    .doctor > ul > li dl dd {
        font-size: 14px;
        line-height: 20px;
    }

    .doc_info_con {
        flex-direction: column;
        padding: 0;
        width: 100%;
        top: 0;
        transform: translate(-50%, 0);
        height: 100%;
        overflow-y: scroll;
        background: #fff;
        padding-bottom: 100px;
    }

    .doc_text {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .doc_text .top_text .deco {
        border-bottom: none;
        justify-content: center;
        align-items: center;
        gap: 4px 6px;
    }

    .doc_text .top_text .deco h1 {
        grid-row: 1 / span 1;
        grid-column: 1;
    }

    .doc_text .top_text .deco .badge {
        grid-row: 1;
        grid-column: 2;
    }

    .doc_text .top_text .deco p {
        grid-row: 2 / span 1;
        grid-column: 1 / span 2;
    }

    .view_close {
        width: 20px;
        height: 20px;
        top: 20px;
        right: 20px;
    }

    .doc_text .top_text .deco h1 {
        font-size: 26px;
        text-align: right;
    }

    .doc_text .top_text h2 {
        font-size: 18px;
        line-height: 1.4;
        padding: 8px 24px;
        background: #f3f3f3;
        min-height: 62px;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .doc_text .top_text {
        width: 100%;
        height: auto;
    }

    .doc_text .bottom_text h1 {
        font-size: 14px;
        background: #0D1D3D;
        color: #fff;
        display: inline-block;
        padding: 4px 8px;
        margin-bottom: 24px;
    }

    .doc_text .bottom_text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .doc_text .top_text .deco .badge {
        font-size: 12px;
    }

    .doc_text .top_text .deco p {
        font-size: 16px;
    }

    .doc_text .bottom_text {
        max-height: max-content;
    }
    /* 모바일/태블릿: 모달 전체(.doc_info_con)가 스크롤하므로 하단 wrapper 내부 스크롤 비활성 */
    .doc_bottom_scroll {
        overflow: visible;
        flex: none;
        min-height: auto;
    }
}

/* Responsive - Mobile (375px ~ 768px) */
@media screen and (max-width: 768px) {
    .doctor {
        padding: 0 5% 60px;
    }

    .doctor > ul {
        gap: 8px;
        grid-template-columns: repeat(2, 1fr);
    }

    .doctor > ul > li dl {
        padding-bottom: 16px;
        gap: 0;
    }

    .doctor > ul > li dl dt .name {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 4px;
    }

    .doctor > ul > li dl dt .badge {
        font-size: 12px;
    }

    .doctor > ul > li dl dd {
        line-height: 16px;
    }

    .doctor > ul > li .hover_box {
        padding: 32px 5% 40px;
        border-radius: 8px;
    }

    .doctor > ul > li .hover_box dl dt {
        font-size: 24px;
        line-height: 32px;
    }

    .doctor > ul > li .hover_box .more_btn {
        width: 70%;
        margin: 0 auto;
    }

    .doctor > ul > li .hover_box .close_btn {
        top: 32px;
    }
}