/* ===== 지점별 의료진 (/doctors, /doctors/{지점}) =====
 * 시안: 의료진소개목록.png (1440 폭). 본문 래퍼가 .branches-page.doctors-page 라 branches.css 의 색 변수(--bp-*)·
 * 히어로(.bp-hero · .bp-search)·마무리 행동(.bp-cta)을 그대로 쓰고, 여기서는 칩 · 지점 패널만 .doctors-page 로 스코핑한다.
 */
.doctors-page .dc-list {
    padding: 100px 0 120px;
    background: #fff;
}

/* ---------- 지점 칩 ---------- */
.doctors-page .dc-areas { display: none; }   /* 지역 탭은 모바일 전용 (아래 767 이하) */
/* 현재 지점 바 · 선택 창 머리 · 배경도 모바일 전용. 데스크톱에서 .dc-picker 는 칩을 감싼 일반 블록 */
.doctors-page .dc-bar,
.doctors-page .dc-picker__head,
.doctors-page .dc-backdrop { display: none; }
.doctors-page .dc-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.doctors-page .dc-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #fff;
    color: var(--bp-ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}
.doctors-page .dc-chip:hover { border-color: var(--bp-accent); color: var(--bp-accent); }
.doctors-page .dc-chip.is-active {
    border-color: var(--bp-accent);
    background: var(--bp-accent);
    color: #fff;
    font-weight: 700;
}
.doctors-page .dc-empty {
    margin: 24px 0 0;
    padding: 60px 0;
    border-top: 1px solid var(--bp-line);
    color: var(--bp-mute);
    font-size: 15px;
    text-align: center;
}

/* ---------- 지점 패널 ---------- */
.doctors-page .dc-panel {
    margin-top: 28px;
    padding: 48px 48px 44px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #fff;
}
.doctors-page .dc-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--bp-line);
}
.doctors-page .dc-panel__name {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.doctors-page .dc-panel__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    color: var(--bp-mute);
    font-size: 13px;
}
.doctors-page .dc-tag {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bp-beige);
    color: var(--bp-sub);
    font-size: 11px;
}
.doctors-page .dc-panel__link {
    flex: none;
    color: var(--bp-accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.doctors-page .dc-panel__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.doctors-page .dc-panel__label {
    margin: 32px 0 0;
    font-size: 14px;
    font-weight: 700;
}
/* 의료진 스와이퍼 (Swiper, slidesPerView: 'auto' — 카드 폭은 여기서 정한다) */
.doctors-page .dc-doctors { margin: 16px 0 0; }
.doctors-page .dc-doctors .swiper-wrapper { margin: 0; padding: 0; list-style: none; }
.doctors-page .dc-doctor { width: 240px; }
.doctors-page .dc-doctor__photo {
    aspect-ratio: 240 / 285;
    overflow: hidden;
    border-radius: 8px;
}
.doctors-page .dc-doctor__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;   /* 프로필 사진: 얼굴이 잘리지 않게 위 기준 */
}
.doctors-page .dc-doctor__name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 0;
}
.doctors-page .dc-doctor__name strong { font-size: 17px; font-weight: 700; }
.doctors-page .dc-doctor__name span { color: var(--bp-mute); font-size: 12px; }
/* 이전/다음 버튼 — 모바일에서만 (아래 767 이하). 층은 사진과 같은 비율이라 버튼이 사진 세로 가운데에 온다 */
.doctors-page .dc-nav { display: none; }
.doctors-page .dc-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    color: var(--bp-ink);
    font-size: 18px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .2s;
}
.doctors-page .dc-nav__btn.swiper-button-disabled { opacity: .35; cursor: default; }
.doctors-page .dc-nav__btn.swiper-button-lock { display: none; }   /* 한 명뿐이면 넘길 것이 없다 */
.doctors-page .dc-doctors-empty {
    margin: 16px 0 0;
    color: var(--bp-mute);
    font-size: 15px;
}

.doctors-page .dc-reserve {
    display: inline-flex;
    align-items: center;
    height: 52px;
    margin-top: 80px;
    padding: 0 32px;
    border-radius: 4px;
    background: var(--bp-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.doctors-page .dc-reserve:hover { background: #651226; }

/* 의료진 카드 → 상세 링크 */
.doctors-page .dc-doctor__link { display: block; color: inherit; text-decoration: none; }
.doctors-page .dc-doctor__link img { transition: transform .4s ease; }
.doctors-page .dc-doctor__link:hover img { transform: scale(1.03); }
.doctors-page .dc-doctor__link:hover strong { color: var(--bp-accent); }

/* ---------- 의료진 상세 (/doctors/{지점}/{doctor_key}, 시안: 의료진상세.png) ---------- */
.doctors-page .dc-detail {
    padding: 40px 0 120px;
    background: #fff;
}
.doctors-page .dc-detail__back {
    display: inline-block;
    color: var(--bp-sub);
    font-size: 14px;
    text-decoration: none;
}
.doctors-page .dc-detail__back:hover { color: var(--bp-accent); }
.doctors-page .dc-detail__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;   /* 사진 칸 높이 = 오른쪽 정보 높이 */
    margin-top: 36px;
}
/* 사진은 칸 높이에 맞춰 잘리지 않게(contain) 넣는다. 오른쪽이 짧아도 너무 작아지지 않게 최소 높이 */
.doctors-page .dc-detail__photo {
    position: relative;
    min-height: 480px;
}
.doctors-page .dc-detail__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}
.doctors-page .dc-detail__branch {
    margin: 0;
    color: var(--bp-accent);
    font-size: 13px;
    font-weight: 500;
}
.doctors-page .dc-detail__name {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 6px 0 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--bp-line);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
}
.doctors-page .dc-detail__label {
    margin: 32px 0 0;
    font-size: 14px;
    font-weight: 700;
}
.doctors-page .dc-detail__profile {
    margin-top: 14px;
    padding: 28px 22px;
    border-radius: 2px;
    background: var(--bp-beige);
    color: var(--bp-sub);
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
}
.doctors-page .dc-detail__profile p { margin: 0; white-space: pre-line; }   /* 관리자 입력의 줄바꿈 유지 */
.doctors-page .dc-detail__profile p + p { margin-top: 14px; }
.doctors-page .dc-detail__profile .is-empty { color: var(--bp-mute); font-size: 14px; }

.doctors-page .dc-detail__actions {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);   /* 버튼 수(1~2개)만큼 같은 폭 */
    grid-auto-flow: column;
    gap: 14px;
    margin-top: 28px;
}
.doctors-page .dc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--bp-ink);
    border-radius: 4px;
    background: #fff;
    color: var(--bp-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.doctors-page .dc-btn:hover { border-color: var(--bp-accent); color: var(--bp-accent); }
.doctors-page .dc-btn--primary { border-color: var(--bp-accent); background: var(--bp-accent); color: #fff; }
.doctors-page .dc-btn--primary:hover { border-color: #651226; background: #651226; color: #fff; }

.doctors-page .dc-detail__columns {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--bp-line);
}
.doctors-page .dc-detail__columns-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.doctors-page .dc-detail__columns-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.doctors-page .dc-detail__columns-head a {
    flex: none;
    color: var(--bp-accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.doctors-page .dc-detail__columns-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doctors-page .dc-detail__columns ul { margin: 8px 0 0; padding: 0; list-style: none; }
.doctors-page .dc-detail__columns li { border-bottom: 1px solid var(--bp-line); }
.doctors-page .dc-detail__columns li a {
    display: block;
    padding: 18px 0;
    color: var(--bp-sub);
    font-size: 15px;
    text-decoration: none;
    word-break: keep-all;
}
.doctors-page .dc-detail__columns li a:hover { color: var(--bp-accent); }
.doctors-page .dc-detail__columns .is-empty {
    margin: 8px 0 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--bp-line);
    color: var(--bp-mute);
    font-size: 14px;
}

/* ---------- 태블릿 · 모바일 ---------- */
/* v2Container 는 768~1440 에서 좌우 여백이 0 — 패널이 화면 끝에 붙지 않게 이 페이지만 여백을 준다 (767 이하는 v2/common.css 16px) */
@media (min-width: 768px) and (max-width: 1439px) {
    .doctors-page .dc-list > .v2Container,
    .doctors-page .dc-detail > .v2Container { padding: 0 24px; }
}
@media (max-width: 1199px) {
    .doctors-page .dc-detail { padding-bottom: 90px; }
    .doctors-page .dc-detail__body { gap: 40px; }
    .doctors-page .dc-list { padding: 72px 0 90px; }
    .doctors-page .dc-panel { padding: 36px 32px; }
    .doctors-page .dc-reserve { margin-top: 56px; }
}
@media (max-width: 767px) {
    .doctors-page .dc-list { padding: 40px 0 56px; }
    /* 현재 지점 한 줄 — 누르면 선택 창 */
    .doctors-page .dc-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        height: 52px;
        padding: 0 16px;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        background: #fff;
        color: var(--bp-ink);
        text-align: left;
        cursor: pointer;
    }
    .doctors-page .dc-bar__name { font-size: 16px; font-weight: 700; }
    .doctors-page .dc-bar__change {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: none;
        color: var(--bp-accent);
        font-size: 14px;
        font-weight: 500;
    }

    /* 아래에서 올라오는 선택 창 (헤더 z-index 999~1000 보다 위) */
    .doctors-page .dc-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(0, 0, 0, .45);
    }
    .doctors-page .dc-backdrop[hidden] { display: none; }
    .doctors-page .dc-picker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1101;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        background: #fff;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    .doctors-page .dc-picker.is-open {
        transform: none;
        visibility: visible;
        transition: transform .3s ease;
    }
    .doctors-page .dc-picker__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -16px 14px;
        padding: 18px 16px 14px;
        background: #fff;
    }
    .doctors-page .dc-picker__head strong { font-size: 17px; font-weight: 700; }
    .doctors-page .dc-picker__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--bp-ink);
        font-size: 20px;
        cursor: pointer;
    }
    html.dc-picker-lock, html.dc-picker-lock body { overflow: hidden; }

    /* 지역 탭 → 그 지역 지점 칩 (GNB 의료진 메뉴와 같은 분류). 칩은 줄바꿈해 전부 보인다 */
    .doctors-page .dc-areas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--bp-line);
    }
    .doctors-page .dc-area {
        height: 40px;
        padding: 0 6px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: #fff;
        color: var(--bp-ink);
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }
    .doctors-page .dc-area.is-active {
        border-color: var(--bp-ink);
        background: var(--bp-ink);
        color: #fff;
        font-weight: 700;
    }
    .doctors-page .dc-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .doctors-page .dc-chips > li.is-off-area { display: none; }
    .doctors-page .dc-chip { height: 38px; padding: 0 6px; }
    .doctors-page .dc-panel { margin-top: 20px; padding: 24px 20px 28px; }
    .doctors-page .dc-panel__head { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 20px; }
    .doctors-page .dc-panel__name { font-size: 26px; }
    .doctors-page .dc-panel__label { margin-top: 24px; }
    .doctors-page .dc-doctor { width: 100%; }   /* 한 화면에 한 명 — 양쪽 버튼(.dc-nav)으로 넘긴다 */
    /* 전폭이면 세로 비율 사진이 너무 길어진다 — 낮은 칸에 사진을 잘리지 않게(contain) 넣고 이름도 가운데로 */
    .doctors-page .dc-doctor__photo { aspect-ratio: 4 / 3; border-radius: 0; }
    .doctors-page .dc-doctor__photo img { object-fit: contain; }
    .doctors-page .dc-doctor__link:hover img { transform: none; }
    .doctors-page .dc-doctor__name { justify-content: center; }
    .doctors-page .dc-nav {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        aspect-ratio: 4 / 3;       /* 모바일 .dc-doctor__photo 와 같은 비율 */
        pointer-events: none;      /* 버튼 외 영역은 스와이프 · 카드 링크에 넘긴다 */
    }
    .doctors-page .dc-doctor__name { flex-wrap: wrap; gap: 4px 6px; }
    .doctors-page .dc-doctor__name strong { font-size: 15px; }
    .doctors-page .dc-reserve { justify-content: center; width: 100%; margin-top: 36px; }

    /* 상세: 사진 위 · 정보 아래 한 줄로 */
    .doctors-page .dc-detail { padding: 24px 0 56px; }
    .doctors-page .dc-detail__body { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; }
    /* 한 줄로 쌓이면 오른쪽 높이 기준이 없으므로 비율로 되돌린다 */
    .doctors-page .dc-detail__photo { width: 100%; max-width: 420px; min-height: 0; margin: 0 auto; aspect-ratio: 575 / 640; }
    .doctors-page .dc-detail__name { font-size: 24px; padding-bottom: 20px; }
    .doctors-page .dc-detail__label { margin-top: 24px; }
    .doctors-page .dc-detail__profile { padding: 20px 18px; font-size: 14px; }
    .doctors-page .dc-detail__actions { grid-auto-flow: row; grid-template-columns: 1fr; gap: 10px; }
    .doctors-page .dc-detail__columns { margin-top: 28px; padding-top: 28px; }
    .doctors-page .dc-detail__columns li a { padding: 16px 0; font-size: 14px; }
}