/* =========================================================
   의료진소개 (doctors.php) — page.css 와 함께 로드
   ========================================================= */

/* 상단 의사 탭 */
.doc-tabs { display: flex; gap: 24px; }
.doc-tab {
    background: none; border: 0; cursor: pointer; padding: 4px 0;
    font-size: 18px; font-weight: 700; color: #b0b8c1; transition: color .15s;
}
.doc-tab:hover { color: #6b7684; }
.doc-tab.is-active { color: #191f28; }

/* 패널 */
.doc-sec { padding-top: 48px; padding-bottom: 72px; }
.doc-panel { display: none; }
.doc-panel.is-active { display: block; animation: pageFadeIn .35s ease both; }

.doc-profile {
    display: grid; grid-template-columns: 300px 1fr; gap: 52px;
    position: relative;
}

/* 사진 */
.doc-photo {
    align-self: start; border-radius: 10px; overflow: hidden;
    background: linear-gradient(180deg, #eef2f7, #fbfcfd);
}
.doc-photo img { width: 100%; height: auto; display: block; }
.doc-photo.is-empty {
    aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
    color: #97a2af; font-size: 14px;
}

/* 정보 */
.doc-info { position: relative; z-index: 1; }
.doc-eyebrow { margin: 0 0 12px; font-size: 16px; color: #8b95a1; font-weight: 500; }
.doc-eyebrow strong { color: #3182f6; font-weight: 700; }
.doc-name { margin: 0 0 30px; font-size: 30px; font-weight: 800; color: #191f28; letter-spacing: -.02em; }
.doc-name span { color: #b0b8c1; font-weight: 700; }

/* 한 줄 소개(태그라인) */
.doc-lead {
    margin: -14px 0 28px; font-size: 17px; font-weight: 600;
    color: #3182f6; letter-spacing: -.01em;
}

/* 이력 타임라인 표 */
.doc-history-wrap { margin-bottom: 24px; overflow-x: auto; }
.doc-history { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-history th, .doc-history td {
    text-align: left; vertical-align: top; padding: 13px 16px;
    border-bottom: 1px solid #eef1f5; line-height: 1.6;
}
.doc-history thead th {
    background: #f5f7fa; color: #333d4b; font-weight: 700;
    border-top: 1px solid #e1e6ec; border-bottom: 1px solid #e1e6ec;
    white-space: nowrap;
}
.doc-history tbody th {
    width: 200px; white-space: nowrap; color: #191f28; font-weight: 700;
}
.doc-history__note { width: 92px; color: #6b7684; white-space: nowrap; }
.doc-history .hist-sub { display: block; color: #4e5968; }
.doc-history .hist-sub + .hist-sub { margin-top: 4px; }

.doc-cred { margin-bottom: 20px; }
.doc-cred__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #333d4b; }
.doc-cred__list { margin: 0; padding: 0; list-style: none; }
.doc-cred__list li {
    position: relative; padding-left: 14px; font-size: 15px; color: #4e5968; line-height: 1.85;
}
.doc-cred__list li::before {
    content: ""; position: absolute; left: 2px; top: 12px;
    width: 3px; height: 3px; border-radius: 50%; background: #c2c8d0;
}

/* 워터마크 (브랜드 로고, 옅게) */
.doc-watermark {
    position: absolute; right: -10px; bottom: 0; width: 360px; max-width: 38%;
    opacity: .05; pointer-events: none; z-index: 0;
}
.doc-watermark img { width: 100%; display: block; }

@media (max-width: 768px) {
    .doc-profile { grid-template-columns: 1fr; gap: 26px; }
    .doc-photo { max-width: 260px; }
    .doc-tabs { gap: 16px; }
    .doc-tab { font-size: 16px; }
    .doc-name { font-size: 24px; }
    .doc-lead { font-size: 15px; margin-bottom: 22px; }
    .doc-history { font-size: 13px; }
    .doc-history th, .doc-history td { padding: 10px 12px; }
    .doc-history tbody th { width: auto; }
    .doc-watermark { width: 220px; opacity: .04; }
}