/* ===========================================================================
   의료진소개 (/about/doctors) 전용 스타일
   공통(헤더/퀵메뉴/푸터/.person/.career/.mark/토큰)은 main.css 에 있다.
   =========================================================================== */

/* 대표원장 -------------------------------------------------------------------
   시안: 섹션 932px. 인물 사진은 top 153 / h 841 이라 섹션 아래로 넘쳐 잘린다.
   ---------------------------------------------------------------------------- */
.doctor {
    position: relative;
    height: 932px;
    overflow: hidden;
    background: url('/static/images/doctors/bg.webp') no-repeat center top / cover;
}

.doctor .inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 인물은 누끼(배경 투명)라 글이 사진 위로 겹쳐 지나가도 읽힌다 — 시안도 같은 구성 */
.doctor__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.doctor__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-title);
}

.doctor__title em {
    font-style: normal;
    color: var(--c-brown);
}

/* 학력 2열 (시안 좌 10개 / 우 9개, 열 간격 24) */
.doctor__career {
    display: flex;
    gap: 24px;
}

.doctor__career .career {
    white-space: nowrap;
}

.doctor__photo {
    position: absolute;
    left: 846px;
    top: 153px;
    width: 458px;
    height: 841px;
    max-width: none;
}

/* 물리치료사 ------------------------------------------------------------------
   시안: 섹션 860px, 컨테이너 top 114. 타이틀 → 사진(570x350) + 소개 2단.
   ---------------------------------------------------------------------------- */
.staff {
    padding: 114px 0 76px;
    background-color: #f6f6f6;
}

.staff__title {
    margin-bottom: 51px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-title);
}

.staff__title em {
    font-style: normal;
    color: var(--c-brown);
}

.staff__body {
    display: flex;
    gap: 70px;
}

.staff__photo {
    flex: 0 0 570px;
    width: 570px;
    height: 350px;
    object-fit: cover;
}

.staff__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.staff__desc {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.9px;
    color: var(--c-body);
}

.staff__desc p + p {
    margin-top: 32px;
}

.staff__closing {
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #553b26;
}

/* 반응형 — 모바일 시안이 없어 PC 시안을 축소 해석한 값이다 --------------------- */
@media (max-width: 1450px) {
    /* 학력 2열이 사진을 파고들기 시작하는 구간: 줄바꿈을 허용하고 사진을 물린다 */
    .doctor__career .career {
        white-space: normal;
    }

    .doctor__photo {
        left: auto;
        right: -80px;
    }
}

@media (max-width: 1230px) {
    .doctor {
        height: auto;
        padding: 90px 0;
    }

    /* 사진 기준을 .inner 가 아니라 섹션으로 옮겨야 섹션 padding 아래,
       즉 실제 바닥에 붙는다 (.inner 기준이면 padding 위에 떠 있다) */
    .doctor .inner {
        position: static;
        display: block;
    }

    /* 인물을 흐름에서 빼 글 뒤에 깔아둔다.
       흐름 안에 두면 약력이 눌리거나 사진이 맨 아래에 따로 떨어진다. */
    .doctor__photo {
        left: auto;
        top: auto;
        right: -40px;
        bottom: 0;
        z-index: 0;
        width: auto;
        height: 85%;
    }

    .staff {
        padding: 90px 0;
    }

    .staff__body {
        gap: 40px;
    }

    .staff__photo {
        flex: 0 1 460px;
        width: 460px;
        height: auto;
        aspect-ratio: 570 / 350;
    }
}

@media (max-width: 900px) {
    .staff__body {
        flex-direction: column;
    }

    .staff__photo {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doctor {
        padding: 60px 0;
    }

    .doctor__copy {
        gap: 16px;
    }

    .doctor__title,
    .staff__title {
        font-size: 28px;
    }

    .doctor__career {
        flex-direction: column;
        gap: 0;
    }

    /* 대표원장 약력은 19개라 물리치료사(공통 14px)보다 한 단계 더 조인다.
       line-height 는 배수라 폰트만 줄여도 따라온다. */
    .doctor__career .career {
        padding-left: 16px;
        font-size: 12px;
        letter-spacing: -0.3px;
    }

    .doctor__photo {
        right: -30px;
        height: 70%;
    }

    .staff {
        padding: 60px 0;
    }

    .staff__title {
        margin-bottom: 30px;
    }

    .staff__info {
        gap: 16px;
    }

    .staff__desc {
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: -0.5px;
    }

    .staff__desc p + p {
        margin-top: 22px;
    }
}