/* ===================================
   030 연구진 소개 — 페이지 전용 CSS
   연구진 상세 모달 스크롤바 항상 표시
   (공용 CSS는 hover 시에만 노출하도록 되어 있음)
   =================================== */

.modal__body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-400) var(--color-gray-100);
}
.modal__body::-webkit-scrollbar {
    width: 8px;
}
.modal__body::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
}
.modal__body::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400);
    border-radius: var(--radius-full);
}
.modal__body::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
}

/* ===================================
   인라인 style 토큰화 (2026-05-15)
   기존 인라인 style → 페이지 전용 모디파이어 클래스
   =================================== */

/* 모달 내 리스트 날짜 칸 폭 (서울대 블로그/Elsevierpure/Lab/ORCID/Scopus 등) */
.director-modal__list-date--w200 {
    width: 200px;
}

/* 교수 카드: 정보 영역 세로 가운데 정렬 */
.director-card__info--center {
    align-self: center;
}

/* 교수 카드: 사진과 정보를 상단 정렬 */
.director-card--top {
    align-items: flex-start;
}

/* 모달 프로필 사진 박스 사이즈 (140 x 180) */
.director-modal__photo--140x180 {
    width: 140px;
    height: 180px;
}

@media (max-width: 767px) {
  /* 모바일: 프로필 사진 크기 축소 및 자동 비율 유지 */
  .director-modal__photo--140x180 {
    width: 100px;
    height: auto;
  }
  /* 모바일: 날짜 칸 고정폭 해제 (좁은 모달에서 자동 조정) */
  .director-modal__list-date--w200 {
    width: auto;
    min-width: 80px;
  }
}

/* 모달 컨테이너 상단 패딩 — 헤더와 충분한 거리 확보 */
.modal--pt-136 {
    padding-top: 136px;
}

/* 모달 다이얼로그 최대 높이 — 뷰포트 - 160px */
.modal__dialog--max-screen {
    max-height: calc(100vh - 160px);
}

/* 모달 내 섹션 구분선 — 브라우저 기본 hr 대신 디자인 토큰 적용 */
.modal__body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    margin-bottom: var(--space-6);
}

/* 모달 내 강조 회색 박스 (background + padding + radius)
 * white-space: pre-line을 p에만 적용 — div에 두면 태그 사이 줄바꿈 문자가 빈 줄로 렌더링됨 */
.director-modal__highlight-box {
    background-color: var(--color-gray-100);
    padding: var(--space-6);
    border-radius: var(--radius-md);
}
.director-modal__highlight-box p {
    white-space: pre-line;
    margin-top: 0;
    margin-bottom: 0;
}
.director-modal__highlight-box p + p {
    margin-top: var(--space-3);
}

/* 클릭 가능 인포 카드 (탭 토글 트리거) */
.info-card--clickable {
    cursor: pointer;
}

/* pill 탭 margin-bottom 제거 — panel padding-top 24px 단독 적용 */
.tabs--pill {
    margin-bottom: 0;
}



/* ===================================
   분야 선택 패널 — 설명 텍스트 + 카드 중앙 정렬
   5개 카드: 3+2 배치, 하단 2개 행 센터
   =================================== */
#panel-home .content-block__text {
    text-align: center;
}
#panel-home .info-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#panel-home .info-cards .info-card {
    width: calc((100% - var(--space-5) * 2) / 3);
    flex-shrink: 0;
}

@media (max-width: 1023px) {
  #panel-home .info-cards .info-card {
    width: calc((100% - var(--space-5)) / 2);
  }
}

@media (max-width: 767px) {
  #panel-home .info-cards .info-card {
    width: 100%;
  }
}

/* ===================================
   카테고리별 아이콘 배경 컬러
   Extended & Semantic Colors 기준
   =================================== */
.info-card--cat-all .info-card__icon {
    background: var(--color-primary-900);
}
.info-card--cat-clinic .info-card__icon {
    background: var(--color-primary-500);
}
.info-card--cat-pediatric .info-card__icon {
    background: var(--color-teal-500);
}
.info-card--cat-research .info-card__icon {
    background: var(--color-purple-500);
}
.info-card--cat-gangnam .info-card__icon {
    background: var(--color-sky-500);
}

/* 모달 연구분야 태그: sm → md 사이즈 */
.director-modal__section .tag--sm {
    font-size: var(--fs-small);
    padding: 5px 10px;
}

/* 영문 모달 연구분야 텍스트 (tag-group 대신 단순 문단으로 나열) */
.director-modal__research-en {
    font-size: var(--fs-small);
    line-height: var(--lh-base);
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 0;
}