/* ==========================================================================
   의료진 /doctors — 페이지 전용 스타일 (공용 컴포넌트: site.css · docs/front-components.md)
   의료진 한 명 = 에디토리얼 한 장. 4:5 인물 사진과 글이 좌우로 번갈아 놓인다.
   카드 · 상자 없이 사진 · 글자 · 여백 · 헤어라인으로만 나눈다.
   격자: 사진 | 글(이름 · 인용 · 소개) · 경력과 진료 분야 · 상담 링크
         넓은 화면은 오른쪽(또는 왼쪽) 한 칸에 차례로, 태블릿은 경력과 진료 분야가 사진 아래 전체 폭으로 내려온다.
   ========================================================================== */

/* ---------------------------------------------------------------- profile */
.doctor-profile { padding: clamp(64px, 7.5vw, 136px) 0; }
.doctor-profile + .doctor-profile { padding-top: 0; }
/* 두 번째부터: 헤어라인 한 줄로 장을 나눈다 */
.doctor-profile + .doctor-profile .doctor-profile__grid {
    padding-top: clamp(64px, 7.5vw, 136px);
    border-top: 1px solid var(--line);
}

.doctor-profile__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;   /* 사진이 더 길면 남는 높이는 마지막 줄(상담 링크 아래)로 */
    column-gap: var(--col-gap);
    align-items: start;
}
.doctor-profile__figure { grid-column: 1 / span 5; grid-row: 1 / span 3; }
.doctor-profile__body,
.doctor-profile__details,
.doctor-profile__cta { grid-column: 7 / span 6; }
.doctor-profile__body { grid-row: 1; }
.doctor-profile__details { grid-row: 2; }
.doctor-profile__cta { grid-row: 3; }

.doctor-profile--reverse .doctor-profile__figure { grid-column: 8 / span 5; }
.doctor-profile--reverse .doctor-profile__body,
.doctor-profile--reverse .doctor-profile__details,
.doctor-profile--reverse .doctor-profile__cta { grid-column: 1 / span 6; }

.doctor-profile--no-photo .doctor-profile__body,
.doctor-profile--no-photo .doctor-profile__details,
.doctor-profile--no-photo .doctor-profile__cta { grid-column: 1 / span 8; }

.doctor-profile__body.reveal { transition-delay: .12s; }
.doctor-profile__details.reveal { transition-delay: .18s; }

/* 이름 — 가벼운 굵기의 큰 글자, 직함은 아래 작은 회색 */
.doctor-profile__name {
    margin-top: 28px;
    font-size: clamp(32px, 3.2vw, 54px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.035em;
}
.doctor-profile__title {
    display: block;
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--ink-2);
}

.doctor-profile__quote p {
    max-width: 30em;
    margin-top: clamp(36px, 3.4vw, 56px);
    font-size: clamp(19px, 1.6vw, 26px);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -.025em;
}
.doctor-profile__bio { margin-top: 28px; }

/* 경력 · 주요 진료 분야 — 나란한 두 헤어라인 목록 */
.doctor-profile__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px var(--col-gap);
    margin-top: clamp(44px, 4.2vw, 68px);
}
.doctor-profile__label {
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ink-3);
}
.doctor-profile__career,
.doctor-profile__fields { border-top: 1px solid var(--line); }
.doctor-profile__career li {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}
.doctor-profile__fields a {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 13px 28px 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
    transition: color .3s var(--ease);
}
.doctor-profile__field-en {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.doctor-profile__fields .arrow {
    position: absolute;
    right: 0; top: 50%;
    opacity: .45;
    transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.doctor-profile__fields a:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
    .doctor-profile__fields a:hover { color: var(--ink-2); }
    .doctor-profile__fields a:hover .arrow { opacity: 1; transform: translateX(4px); }
}

.doctor-profile__cta { margin-top: clamp(40px, 4vw, 60px); }

/* 마무리 블록(pages.doctors) — 마지막 의료진 다음 */
.doctors-closing { padding-top: clamp(16px, 2vw, 32px); }

/* ---------------------------------------------------------------- tablet */
/* 사진과 글(이름 · 인용 · 소개)을 반씩, 경력 · 진료 분야는 그 아래 전체 폭 두 칸 */
@media (max-width: 1099px) {
    .doctor-profile__grid { grid-template-rows: none; }
    .doctor-profile__figure { grid-column: 1 / span 6; grid-row: 1; }
    .doctor-profile__body { grid-column: 7 / span 6; grid-row: 1; }
    .doctor-profile--reverse .doctor-profile__figure { grid-column: 7 / span 6; }
    .doctor-profile--reverse .doctor-profile__body { grid-column: 1 / span 6; }
    .doctor-profile__details,
    .doctor-profile__cta,
    .doctor-profile--reverse .doctor-profile__details,
    .doctor-profile--reverse .doctor-profile__cta { grid-column: 1 / -1; }
    .doctor-profile__details { grid-row: 2; margin-top: clamp(48px, 6vw, 72px); }
    .doctor-profile__cta { grid-row: 3; }
    .doctor-profile--no-photo .doctor-profile__body { grid-column: 1 / span 10; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
    .doctor-profile__figure,
    .doctor-profile--reverse .doctor-profile__figure { grid-column: 1 / -1; grid-row: 1; }
    /* 사진은 76% 폭으로 줄여 한 화면을 다 덮지 않게 하고, 넓은 화면처럼 좌우로 번갈아 놓는다 */
    .doctor-profile__figure { width: 76%; }
    .doctor-profile--reverse .doctor-profile__figure { justify-self: end; }
    .doctor-profile__body,
    .doctor-profile--reverse .doctor-profile__body,
    .doctor-profile--no-photo .doctor-profile__body { grid-column: 1 / -1; grid-row: 2; }
    .doctor-profile__details { grid-row: 3; grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
    .doctor-profile__cta { grid-row: 4; }
    .doctor-profile__figure + .doctor-profile__body { margin-top: 40px; }
    .doctor-profile__name { margin-top: 22px; }
}