@charset "utf-8";

/*
    강남점 의료진 소개 CSS

    유지보수 기준:
    - 이 파일은 /Barog/branch-B/gangnam/doctor/doctor.html 전용입니다.
    - 모든 선택자는 .branchDoctorIntro 하위로만 작성합니다.
    - 배너매니저와 Cafe24 상품 모듈 문법을 사용하지 않습니다.
    - 여러 지점에서 완전히 동일할 때만 나중에 common CSS로 이동합니다.

    수정 가능:
    - 섹션 배경색, 이미지 비율, 텍스트 크기, 더보기 버튼 스타일, 카드 간격

    수정 금지:
    - section, h1, .ons_inner, #contents 같은 전역 선택자
    - branchDoctorIntro__* 클래스명
    - 원본 /ons/main/main_brand.css
*/

.branchDoctorIntro {
    margin-top: 80px;
    padding: 60px 16px;
    margin-bottom: 0;
    background: var(--mono-5-f6);
    text-align: center;
    box-sizing: border-box;
    scroll-margin-top: 120px;
}

.branchDoctorIntro .branchDoctorIntro__inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.branchDoctorIntro .branchDoctorIntro__title {
    margin: 0;
}

.branchDoctorIntro .branchDoctorIntro__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branchDoctorIntro .branchDoctorIntro__image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-8);
    background: var(--mono-ff);
}

.branchDoctorIntro .branchDoctorIntro__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center top;
}

.branchDoctorIntro .branchDoctorIntro__content {
    width: 100%;
    margin-top: 22px;
}

.branchDoctorIntro .branchDoctorIntro__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--point-color-primary);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0;
}

.branchDoctorIntro .branchDoctorIntro__name {
    display: block;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

.branchDoctorIntro .branchDoctorIntro__position {
    margin: 8px 0 0;
    color: var(--font-color-base);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}

.branchDoctorIntro .branchDoctorIntro__desc {
    margin: 12px 0 0;
    color: var(--mono-2-95);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    word-break: keep-all;
}

/* 대표 의료진 Boostify clone: 사진 + 텍스트를 세로로 쌓음 (기존 __profile 레이아웃 유지) */
.branchDoctorIntro .branchDoctorIntro__profileItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 48px;
}

.branchDoctorIntro .branchDoctorIntro__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    margin-top: 20px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-12);
    background: var(--point-color-primary);
    color: var(--font-color-base, #000);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    word-break: keep-all;
    transition: background-color .25s ease, color .25s ease;
}

/* 더보기 버튼 기본 숨김: Boostify에 의료진이 채워지면 doctor.js가 hidden을 제거해 노출 */
.branchDoctorIntro .branchDoctorIntro__toggle[hidden] {
    display: none;
}

.branchDoctorIntro .branchDoctorIntro__toggleIcon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--font-color-base, #000);
    border-bottom: 2px solid var(--font-color-base, #000);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
}

.branchDoctorIntro .branchDoctorIntro__toggle[aria-expanded="true"] .branchDoctorIntro__toggleIcon {
    transform: rotate(-135deg) translateY(-2px);
}

.branchDoctorIntro .branchDoctorIntro__more {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
}

.branchDoctorIntro .branchDoctorIntro__cardList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
}

/*
    사진은 항상 위(이름 옆)에 붙입니다.
    예전에는 center 였는데, 학회 활동처럼 여러 줄이 들어간 카드에서는 사진이
    글 한가운데에 떠서 누구 사진인지 연결이 안 보입니다.
    좁은 화면에서만 flex-start 로 바꾸던 예외도 이 규칙으로 합쳤습니다.
*/
.branchDoctorIntro .branchDoctorIntro__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-8);
    background: var(--mono-ff);
    box-sizing: border-box;
}

.branchDoctorIntro .branchDoctorIntro__cardImage {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mono-5-f6);
}

.branchDoctorIntro .branchDoctorIntro__cardImage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.branchDoctorIntro .branchDoctorIntro__cardContent {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.branchDoctorIntro .branchDoctorIntro__cardName {
    display: block;
    color: var(--font-color-base);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
}

.branchDoctorIntro .branchDoctorIntro__cardPosition {
    margin: 5px 0 0;
    color: var(--font-color-base);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.branchDoctorIntro .branchDoctorIntro__cardDesc {
    margin: 6px 0 0;
    color: var(--mono-2-95);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-line;
    word-break: keep-all;
}

@media (max-width: 767px) {
    .branchDoctorIntro {
        margin-top: 60px;
        padding: 48px 16px;
        margin-bottom: 0;
        scroll-margin-top: 150px;
    }

    .branchDoctorIntro .branchDoctorIntro__content {
        margin-top: 18px;
    }

    .branchDoctorIntro .branchDoctorIntro__name {
        font-size: 20px;
    }

    .branchDoctorIntro .branchDoctorIntro__position {
        font-size: 14px;
    }

    .branchDoctorIntro .branchDoctorIntro__desc {
        font-size: 13px;
    }

    .branchDoctorIntro .branchDoctorIntro__toggle {
        min-height: 54px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    /* align-items 는 위 기본 규칙에서 flex-start 로 통일했습니다. 여기서는 여백만 줄입니다. */
    .branchDoctorIntro .branchDoctorIntro__card {
        gap: 12px;
        padding: 14px;
    }

    .branchDoctorIntro .branchDoctorIntro__cardImage {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }
}

/* ---------------------------------------------------------------------------
   여러 명의 대표 의료진을 세로로 나열할 때의 간격 (하단점·진주점에서 쓰던 규칙)
   --------------------------------------------------------------------------- */
.branchDoctorIntro .branchDoctorIntro__profileItem + .branchDoctorIntro__profileItem {
    margin-top: 44px;
}

@media all and (max-width: 767px) {
    .branchDoctorIntro .branchDoctorIntro__profileItem + .branchDoctorIntro__profileItem {
        margin-top: 36px;
    }
}

/* ---------------------------------------------------------------------------
   이력 안의 소분류 — 자문 · 키닥터 / 학회 활동 / 수료

   __desc 는 줄바꿈만 있는 평문(white-space:pre-line)이라, 항목이 열 줄을 넘어가면
   어디까지가 한 묶음인지 구분이 안 됩니다. 그래서 묶음마다 작은 제목을 답니다.
   제목 앞의 짧은 선은 브랜드 포인트 색(--point-color-primary)을 씁니다.

   본문 글씨 크기는 __desc / __cardDesc 와 똑같이 맞춰 두었습니다.
   한 곳만 바꾸면 줄이 어긋나 보이므로 함께 고쳐야 합니다.
   --------------------------------------------------------------------------- */
.branchDoctorIntro .branchDoctorIntro__creds {
    margin-top: 20px;
}

.branchDoctorIntro .branchDoctorIntro__credsTitle {
    display: block;
    color: var(--font-color-base);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}

.branchDoctorIntro .branchDoctorIntro__credsTitle::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 0;
    margin-right: 7px;
    vertical-align: middle;
    /* 배경 대신 테두리로 그립니다. 테두리 두께는 위치와 상관없이 픽셀 단위로 맞춰져 막대마다 굵기가 달라 보이지 않습니다. */
    border-top: 2px solid var(--point-color-primary);
}

.branchDoctorIntro .branchDoctorIntro__credsList {
    margin: 8px 0 0;
    color: var(--mono-2-95);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
    word-break: keep-all;
}

/* 더보기 카드 안에서는 카드 본문(__cardDesc, 12px)에 맞춰 한 단계 작게 */
.branchDoctorIntro .branchDoctorIntro__card .branchDoctorIntro__creds {
    margin-top: 12px;
}

.branchDoctorIntro .branchDoctorIntro__card .branchDoctorIntro__credsTitle {
    font-size: 12px;
}

.branchDoctorIntro .branchDoctorIntro__card .branchDoctorIntro__credsTitle::before {
    width: 7px;
    margin-right: 6px;
}

.branchDoctorIntro .branchDoctorIntro__card .branchDoctorIntro__credsList {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

@media all and (max-width: 767px) {
    .branchDoctorIntro .branchDoctorIntro__credsTitle,
    .branchDoctorIntro .branchDoctorIntro__credsList {
        font-size: 13px;
    }
}