/* ========================================================
   GWANGJU HOSPITAL
   Department Detail V3
   ======================================================== */

.dept-detail{
    max-width:1000px !important;
    margin:0 auto !important;
    padding:70px 0 100px !important;

    display:grid !important;
    grid-template-columns:190px 1fr !important;
    gap:70px !important;
}


/* LEFT */

.dept-detail > aside{
    position:relative;
    padding:4px 0 0 20px !important;

    border-left:2px solid #1699e8 !important;
}

.dept-detail > aside small{
    color:#0589dc !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.16em !important;
}

.dept-detail > aside h2{
    margin:9px 0 14px !important;

    font-size:24px !important;
    letter-spacing:-.04em !important;

    color:#0c324d !important;
}

.dept-detail > aside p{
    margin:0 0 23px !important;

    color:#7b8f9e !important;

    font-size:12px !important;
    line-height:1.75 !important;
}

.dept-back-link{
    color:#087dcc !important;

    font-size:11px !important;
    font-weight:800 !important;

    text-decoration:none !important;
}


/* RIGHT HEADINGS */

.detail-body{
    min-width:0;
}

.detail-title{
    position:relative;
    margin-bottom:20px !important;
}

.detail-title small{
    color:#078bdb !important;

    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.15em !important;
}

.detail-title h2{
    margin:8px 0 0 !important;

    font-size:26px !important;
    line-height:1.25 !important;

    letter-spacing:-.045em !important;

    color:#0b3049 !important;
}


/* CLINICAL FIELDS */

.field-grid{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:8px !important;

    margin-bottom:62px !important;
}

.field-grid span{
    display:flex !important;
    align-items:center !important;

    min-height:40px !important;

    padding:9px 14px !important;

    box-sizing:border-box !important;

    border:1px solid #dceaf3 !important;
    border-radius:10px !important;

    background:#f5fafd !important;

    color:#4f7086 !important;

    font-size:11px !important;
    line-height:1.5 !important;
}


/* MEDICAL STAFF TITLE */

.doctors-title{
    display:grid !important;
    grid-template-columns:1fr auto !important;

    align-items:end !important;

    margin-top:55px !important;
    margin-bottom:25px !important;
}

.doctors-title small,
.doctors-title h2{
    grid-column:1;
}

.doctors-title p{
    grid-column:2;
    grid-row:1 / span 2;

    align-self:end;

    margin:0 0 3px !important;

    color:#8195a4 !important;

    font-size:11px !important;
}


/* DOCTOR GRID */

.sub-doctor-grid{
    display:grid !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:20px !important;
}


/* CARD */

.sub-doctor-card{
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border:1px solid #dce7ef !important;
    border-radius:19px !important;

    background:#fff !important;

    box-shadow:
        0 8px 28px rgba(18,65,98,.055) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

.sub-doctor-card:hover{
    transform:translateY(-6px) !important;

    border-color:#9ed5f4 !important;

    box-shadow:
        0 20px 48px rgba(10,88,143,.13) !important;
}


/* PHOTO */

.sub-doctor-card .photo{
    position:relative !important;

    width:100% !important;
    height:265px !important;

    overflow:hidden !important;

    background:
        linear-gradient(180deg,#f3f7f9,#e8eff3) !important;
}

.sub-doctor-card .photo img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center top !important;

    transition:transform .45s ease !important;
}

.sub-doctor-card:hover .photo img{
    transform:scale(1.025) !important;
}

.doctor-fallback{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#72a9c9;

    font-size:48px;
    font-weight:700;
}


/* DOCTOR INFO */

.sub-doctor-card .doctor-info{
    display:flex !important;
    flex-direction:column !important;

    flex:1 !important;

    padding:19px 19px 0 !important;
}

.sub-doctor-card .doctor-info > em{
    margin-bottom:5px !important;

    color:#087dcc !important;

    font-size:10px !important;
    font-weight:800 !important;

    font-style:normal !important;
    letter-spacing:.04em !important;
}

.sub-doctor-card .doctor-info h3{
    margin:0 !important;

    color:#10364f !important;

    font-size:19px !important;
    line-height:1.3 !important;
}

.sub-doctor-card .doctor-info h3 small{
    margin-left:3px !important;

    color:#8a9ba8 !important;

    font-size:10px !important;
    font-weight:500 !important;
}


/* SPECIALTY */

.doctor-specialties{
    display:flex !important;
    flex-direction:column !important;

    gap:6px !important;

    min-height:68px !important;

    margin-top:15px !important;
}

.doctor-specialties span{
    position:relative !important;

    display:block !important;

    padding-left:12px !important;

    overflow:hidden !important;

    color:#637d90 !important;

    font-size:10px !important;
    line-height:1.5 !important;
}

.doctor-specialties span:before{
    content:"" !important;

    position:absolute !important;

    left:0 !important;
    top:6px !important;

    width:5px !important;
    height:5px !important;

    border-radius:50% !important;

    background:#159be7 !important;
}


/* CARD FOOTER */

.doctor-card-footer{
    min-height:45px !important;

    display:flex !important;
    align-items:center !important;

    margin:auto -19px 0 !important;
    padding:0 19px !important;

    border-top:1px solid #e9eff3 !important;

    background:#fbfdff !important;

    color:#7890a1 !important;

    font-size:9px !important;
}


/* EMPTY */

.doctor-empty{
    grid-column:1/-1;

    padding:28px !important;

    border-radius:12px !important;

    background:#f6fafc !important;

    color:#7c909f !important;
}


/* MOBILE */

@media(max-width:900px){

    .dept-detail{
        padding:45px 22px 80px !important;

        grid-template-columns:1fr !important;

        gap:42px !important;
    }

    .sub-doctor-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:600px){

    .sub-doctor-grid{
        grid-template-columns:1fr !important;
    }

    .sub-doctor-card .photo{
        height:360px !important;
    }

    .doctors-title{
        grid-template-columns:1fr auto !important;
    }
}


/* ========================================================
   DEPARTMENT DETAIL FINAL 3.1
   ======================================================== */

/* 전문진료 분야가 긴 경우에도 깨지지 않도록 */
.field-grid span{
    max-width:100% !important;
    word-break:keep-all !important;
}

/* 의료진 카드 높이 정렬 */
.sub-doctor-card{
    height:100% !important;
}

.sub-doctor-card .doctor-info{
    min-height:170px !important;
}

/* 전문분야 */
.doctor-specialties{
    min-height:76px !important;
}

.doctor-specialties span{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;

    overflow:hidden !important;

    word-break:keep-all !important;
}

/* position 값 자체에 원장님이 들어 있으므로 자연스럽게 표시 */
.sub-doctor-card .doctor-info h3 small{
    white-space:nowrap !important;
}

/* 개별 의사 AI 버튼이 혹시 구 CSS에서 남아도 숨김 */
.sub-doctor-card .ai-open{
    display:none !important;
}

/* 진료과 전체 보기 */
.dept-back-link{
    display:inline-flex !important;
    align-items:center !important;

    margin-top:4px !important;

    color:#087dcc !important;

    font-size:11px !important;
    font-weight:800 !important;

    text-decoration:none !important;
}

.dept-back-link:hover{
    text-decoration:underline !important;
}


/* desktop doctor image */
@media(min-width:901px){

    .sub-doctor-card .photo{
        height:280px !important;
    }

}


/* mobile */
@media(max-width:600px){

    .dept-detail{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .sub-doctor-card .photo{
        height:390px !important;
    }

    .sub-doctor-card .doctor-info{
        min-height:155px !important;
    }

    .doctor-specialties{
        min-height:auto !important;
        margin-bottom:18px !important;
    }

}



/* =========================================================
   GJH DEPARTMENT DETAIL
   MOBILE LAYOUT FIX
   2026-09-26
   ========================================================= */

@media (max-width: 767px) {

    /* =========================================
       상세페이지 전체
       ========================================= */

    .department-detail,
    .department-page,
    .dept-detail-page,
    .dept-detail,
    .dept-detail-wrap,
    .dept-detail-container {
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }


    /* =========================================
       진료과 소개 영역
       absolute / 고정높이 제거
       ========================================= */

    .dept-overview,
    .dept-summary,
    .dept-intro,
    .department-overview,
    .department-summary {
        position:relative !important;
        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        overflow:visible !important;
    }


    .dept-overview *,
    .dept-summary *,
    .dept-intro * {
        max-width:100%;
    }


    /* =========================================
       DEPARTMENT / 내과
       ========================================= */

    .dept-overview-head,
    .dept-summary-head,
    .dept-intro-head {
        position:relative !important;
        inset:auto !important;

        display:block !important;

        width:100% !important;
        height:auto !important;

        margin:0 0 28px !important;
    }


    /* =========================================
       주요 전문진료 분야

       위 영역과 겹치지 않게 완전히
       normal flow로 복귀
       ========================================= */

    .dept-fields,
    .dept-clinical,
    .clinical-fields,
    .department-fields {
        position:relative !important;
        inset:auto !important;
        transform:none !important;
        float:none !important;

        display:block !important;
        clear:both !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        margin:34px 0 0 !important;
        padding:0 !important;

        overflow:visible !important;
    }


    .dept-fields > small,
    .dept-clinical > small,
    .clinical-fields > small {
        display:block !important;

        position:relative !important;
        inset:auto !important;

        margin:0 0 10px !important;

        line-height:1.3 !important;
    }


    .dept-fields h2,
    .dept-fields h3,
    .dept-clinical h2,
    .dept-clinical h3,
    .clinical-fields h2,
    .clinical-fields h3 {
        position:relative !important;
        inset:auto !important;

        display:block !important;

        margin:0 0 22px !important;

        line-height:1.25 !important;

        white-space:normal !important;
    }


    /* =========================================
       전문진료 태그
       ========================================= */

    .dept-field-list,
    .dept-field-tags,
    .clinical-tags,
    .specialty-tags {
        position:relative !important;
        inset:auto !important;

        display:flex !important;
        flex-wrap:wrap !important;

        gap:8px !important;

        width:100% !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }


    .dept-field-list > *,
    .dept-field-tags > *,
    .clinical-tags > *,
    .specialty-tags > * {
        position:relative !important;
        inset:auto !important;

        width:auto !important;
        max-width:100% !important;

        white-space:normal !important;
        word-break:keep-all !important;

        line-height:1.45 !important;
    }


    /* =========================================
       의료진 숫자
       "10명의 의료진" 세로 깨짐 방지
       ========================================= */

    .dept-doctor-count,
    .dept-staff-count,
    .doctor-count,
    .medical-count {
        position:relative !important;
        inset:auto !important;

        display:flex !important;
        align-items:center !important;
        gap:5px !important;

        width:auto !important;
        max-width:100% !important;

        margin:28px 0 0 !important;

        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;

        white-space:nowrap !important;
        word-break:keep-all !important;
    }


    .dept-doctor-count *,
    .dept-staff-count *,
    .doctor-count *,
    .medical-count * {
        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;
        white-space:nowrap !important;
    }


    /* =========================================
       의료진 섹션
       ========================================= */

    .dept-doctors,
    .department-doctors,
    .medical-staff-section {
        position:relative !important;
        clear:both !important;

        width:100% !important;
        height:auto !important;

        margin-top:44px !important;
    }


    /* 모바일 하단 메뉴 공간 */
    main {
        padding-bottom:
            calc(90px + env(safe-area-inset-bottom, 0px));
    }

}



/* =========================================================
   GJH DEPARTMENT DETAIL
   REAL MOBILE FIX
   actual DOM:
   .dept-detail
     aside
     .detail-body
       .detail-title
       .field-grid
       .detail-title.doctors-title
   ========================================================= */

@media (max-width:767px){

    /* -----------------------------------------
       전체 상세영역
       ----------------------------------------- */

    .dept-detail{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:56px 20px 100px !important;

        box-sizing:border-box !important;
        overflow:hidden !important;
    }


    /* -----------------------------------------
       왼쪽 진료과 소개
       데스크톱 column/grid 배치 완전 해제
       ----------------------------------------- */

    .dept-detail > aside{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:100% !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:12px 0 34px 20px !important;

        box-sizing:border-box !important;

        border-left:2px solid #1689eb !important;

        transform:none !important;
        overflow:visible !important;
    }


    .dept-detail > aside small{
        display:block !important;

        margin:0 0 13px !important;

        color:#0784e7 !important;
        font-size:10px !important;
        font-weight:800 !important;
        letter-spacing:.18em !important;
        line-height:1.3 !important;
    }


    .dept-detail > aside h2{
        display:block !important;

        margin:0 0 14px !important;

        font-size:24px !important;
        line-height:1.25 !important;
    }


    .dept-detail > aside p{
        display:block !important;

        margin:0 !important;

        font-size:12px !important;
        line-height:1.7 !important;
    }


    /*
     * 모바일에서는 이 버튼이 전문진료 제목과
     * 겹치던 원인 중 하나이므로 숨김.
     * 글로벌 AI 상담 버튼은 그대로 유지.
     */
    .dept-detail > aside .ai-open{
        display:none !important;
    }


    /* -----------------------------------------
       오른쪽 본문
       ----------------------------------------- */

    .dept-detail > .detail-body{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:100% !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
        overflow:visible !important;
    }


    /* -----------------------------------------
       CLINICAL FIELDS
       ----------------------------------------- */

    .detail-body > .detail-title{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 0 22px !important;
        padding:0 !important;

        transform:none !important;
        overflow:visible !important;
    }


    .detail-body > .detail-title > small{
        position:relative !important;

        display:block !important;

        margin:0 0 10px !important;
        padding:0 !important;

        color:#0784e7 !important;
        font-size:10px !important;
        font-weight:800 !important;
        letter-spacing:.17em !important;
        line-height:1.3 !important;
    }


    .detail-body > .detail-title > h2{
        position:relative !important;

        display:block !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;

        font-size:25px !important;
        line-height:1.3 !important;
        letter-spacing:-.045em !important;

        white-space:normal !important;

        transform:none !important;
    }


    /* -----------------------------------------
       전문진료 태그
       ----------------------------------------- */

    .detail-body > .field-grid{
        position:relative !important;

        display:flex !important;
        flex-wrap:wrap !important;

        width:100% !important;
        height:auto !important;

        gap:8px !important;

        margin:0 0 58px !important;
        padding:0 !important;

        overflow:visible !important;
    }


    .detail-body > .field-grid > span{
        position:relative !important;

        display:inline-flex !important;
        align-items:center !important;

        width:auto !important;
        max-width:100% !important;
        min-height:40px !important;

        margin:0 !important;
        padding:9px 12px !important;

        box-sizing:border-box !important;

        white-space:normal !important;
        word-break:keep-all !important;

        font-size:11px !important;
        line-height:1.45 !important;
    }


    /* -----------------------------------------
       MEDICAL STAFF 제목
       ----------------------------------------- */

    .detail-body > .doctors-title{
        position:relative !important;

        display:block !important;

        width:100% !important;
        height:auto !important;

        margin:0 0 26px !important;
        padding:0 !important;

        overflow:visible !important;
    }


    .detail-body > .doctors-title > small{
        display:block !important;
        margin:0 0 9px !important;
    }


    .detail-body > .doctors-title > h2{
        display:block !important;

        margin:0 0 8px !important;

        font-size:24px !important;
        line-height:1.3 !important;
    }


    /*
     * 현재 문제:
     * desktop grid 때문에 p가 좁은 column에 들어가
     * 10
     * 명
     * 의
     * 의
     * 료
     * 진
     * 으로 표시됨.
     */

    .detail-body > .doctors-title > p{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;

        color:#7893a6 !important;

        font-size:12px !important;
        line-height:1.5 !important;

        text-align:left !important;

        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;

        white-space:nowrap !important;
        word-break:keep-all !important;

        transform:none !important;
    }


    /* -----------------------------------------
       의료진 카드
       ----------------------------------------- */

    .detail-body > .sub-doctor-grid{
        position:relative !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

}


/* 작은 모바일 */
@media (max-width:390px){

    .dept-detail{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .detail-body > .detail-title > h2{
        font-size:23px !important;
    }

}