/* ==========================================================================
   94 · 의료진 소개 — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-94 스코프. 색은 --fs-* 토큰만 사용한다(새 hex 0개).
   전용 컴포넌트
     1) .fs-doctors-hero    풀블리드 수술실 히어로 (사진 위 가운데 카피)
     2) .fs-doctors-idx     의료진 인덱스 카드 (A19 확장 · 약력 앵커)
     3) .fs-doctors-block   원장 약력 블록 (A20 확장 · 좌 인물 / 우 약력 2열)
     4) .fs-doctors-strip   진료 장면 스트립 ★ 시그니처 (블록 전폭)
   ========================================================================== */

/* --- 1. 풀블리드 수술실 히어로 (138 «다크 사진 + 가운데 카피» 결) ---------
   에셋 hero-or.jpg 는 x1150 까지가 실사진이고 그 오른쪽은 사진 자신의 어두운
   벽을 이어 붙인 면이다. 카피는 그 면 위에 앉는다(흰 글자 대비 18:1).
   1024px 아래에서는 사진이 가로로 잘리므로 인물을 왼쪽에 고정한다. */
.fs-p-94 .fs-doctors-hero {
  min-height: clamp(420px, 372.3px + 13.2vw, 626px);
  background: var(--fs-ink-band);
}
.fs-p-94 .fs-doctors-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-94 .fs-doctors-hero .fs-hero__bg img { object-position: 0% 50%; }
@media (max-width: 599px) {
  .fs-p-94 .fs-doctors-hero .fs-hero__bg img { object-position: 50% 22%; }
}
.fs-p-94 .fs-doctors-hero .fs-hero__copy { gap: clamp(12px, 8.2px + 1.06vw, 28px); }
.fs-p-94 .fs-doctors-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  letter-spacing: 0.26em;
  color: var(--fs-on-dark);
  opacity: .82;
}
.fs-p-94 .fs-doctors-hero .fs-hero__title {
  position: relative;
  color: var(--fs-on-dark);
  padding-block-start: clamp(12px, 9.8px + 0.61vw, 22px);
}
.fs-p-94 .fs-doctors-hero .fs-hero__title::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: clamp(56px, 47.4px + 2.4vw, 94px);
  height: 1px;
  background: var(--fs-on-dark);
  opacity: .55;
  transform: translateX(-50%);
}
/* 모바일은 사진이 세로로 꽉 차 카피가 밝은 멸균가운 위에 올라온다 —
   글자 띠 구간만 어둡게 깔아 흰 글자 대비를 확보한다(사진 노출은 그대로). */
@media (max-width: 1023px) {
  .fs-p-94 .fs-doctors-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(0,0,0,.14) 0%, rgba(0,0,0,.60) 30%,
      rgba(0,0,0,.60) 76%, rgba(0,0,0,.14) 100%);
  }
  .fs-p-94 .fs-doctors-hero .fs-hero__inner { position: relative; z-index: 1; }
}
.fs-p-94 .fs-doctors-hero__lead {
  font-size: var(--fs-t-lead);
  line-height: var(--fs-lh-body);
  color: var(--fs-on-dark);
  opacity: .84;
}

/* --- 2. 의료진 인덱스 카드 ---------------------------------------------- */
.fs-p-94 .fs-doctors-idx__card {
  display: grid;
  gap: 0;
  color: inherit;
  text-decoration: none;
  background: var(--fs-white);
}
.fs-p-94 .fs-doctors-idx__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 1400 / 900;
}
.fs-p-94 .fs-doctors-idx__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 32% 26%;
}
.fs-p-94 .fs-doctors-idx__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-sp-3);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-94 .fs-doctors-idx__name {
  font-size: var(--fs-t-sub);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fs-muted);
}
.fs-p-94 .fs-doctors-idx__go {
  flex: 0 0 auto;
  font-size: var(--fs-t-sm);
  font-weight: 600;
  color: var(--fs-teal-dk);
}
.fs-p-94 .fs-doctors-idx__card:hover .fs-doctors-idx__go,
.fs-p-94 .fs-doctors-idx__card:focus-visible .fs-doctors-idx__go { text-decoration: underline; }

/* --- 3. 원장 약력 블록 (1mm 의료진 페이지 결 — 좌 인물 / 우 약력) --------
   원본은 진료 스트립이 우측 정보 컬럼 안에 있어 약력이 짧은 원장(고인석 2줄,
   김다빈 3줄)에서 «본문 끝 ~ 스트립» 사이에 200px 넘는 구멍이 생겼다.
   스트립을 블록 전폭으로 빼서 세 블록의 리듬을 같게 만든다. */
.fs-p-94 .fs-doctors-list { display: grid; gap: clamp(48px, 39.5px + 2.36vw, 85px); }
.fs-p-94 .fs-doctors-block { scroll-margin-block-start: var(--fs-sp-11); }
.fs-p-94 .fs-doctors-block__top {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .fs-p-94 .fs-doctors-block__top {
    grid-template-columns: minmax(0, 420fr) minmax(0, 980fr);
    column-gap: var(--fs-gap-col);
  }
}
.fs-p-94 .fs-doctors-block__frame { display: block; overflow: hidden; aspect-ratio: 900 / 1020; }
.fs-p-94 .fs-doctors-block__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.fs-p-94 .fs-doctors-block__info { display: flex; flex-direction: column; }
.fs-p-94 .fs-doctors-block__name { margin-block-start: var(--fs-sp-2); }
/* 이름 아래 짧은 틸 선 — 1mm 의 이름/본문 분리를 이 시스템의 어휘로 옮긴 것 */
.fs-p-94 .fs-doctors-block__name::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
}
.fs-p-94 .fs-doctors-block__bio {
  display: grid;
  gap: var(--fs-sp-7);
  margin-block-start: var(--fs-sp-6);
}
@media (min-width: 700px) {
  .fs-p-94 .fs-doctors-block__bio {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    column-gap: var(--fs-gap-col);
  }
}
.fs-p-94 .fs-doctors-block__group { display: grid; gap: var(--fs-sp-3); align-content: start; }
.fs-p-94 .fs-doctors-block__grouptitle {
  font-size: var(--fs-t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fs-teal-dk);
}
.fs-p-94 .fs-doctors-block__list {
  display: grid;
  gap: 4px;
  padding-inline-start: var(--fs-sp-5);
  border-inline-start: 2px solid var(--fs-teal);
}
.fs-p-94 .fs-doctors-block__list li {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}

/* --- 4. 진료 장면 스트립 ★ 시그니처 — 블록 전폭 갤러리 밴드 -------------- */
.fs-p-94 .fs-doctors-strip {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-block-start: auto;
  padding-block-start: var(--fs-sp-8);
}
.fs-p-94 .fs-doctors-strip__cell { display: grid; gap: 0; }
.fs-p-94 .fs-doctors-strip__box {
  display: block;
  overflow: hidden;
  height: clamp(148px, 124.6px + 6.5vw, 250px);
}
.fs-p-94 .fs-doctors-strip__box img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--fs-strip-pos, 50% 28%);
}
.fs-p-94 .fs-doctors-strip--solo { grid-template-columns: minmax(0, 1fr); }
.fs-p-94 .fs-doctors-strip--solo .fs-doctors-strip__box { height: clamp(190px, 155.6px + 9.6vw, 340px); }
@media (min-width: 1024px) {
  .fs-p-94 .fs-doctors-strip {
    grid-template-columns: repeat(var(--fs-strip-n, 4), minmax(0, 1fr));
  }
  .fs-p-94 .fs-doctors-strip--solo { grid-template-columns: minmax(0, 1fr); }
}


/* --- 5. 태블릿 보정 (600~1023px) ---------------------------------------
   fs.css:334 의 .fs-grid--3 은 600px 부터 2열이라 카드 3장이면 마지막 1장이
   왼쪽에 홀로 남고 오른쪽에 «카드 한 장 크기의 구멍»이 생긴다.
   4열에 2칸씩 태우면 카드 폭이 2열 때와 정확히 같고 3번째만 가운데에 선다. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .fs-p-94 .fs-doctors-idx { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-p-94 .fs-doctors-idx > li { grid-column: span 2; }
  .fs-p-94 .fs-doctors-idx > li:nth-child(3) { grid-column: 2 / span 2; }
}

/* .fs-split 은 1024px 부터 2열이라 그 아래에서는 900x1243 세로 인물컷이
   컬럼 전폭을 먹는다 — 1023px 에서 951x1313px, 뷰포트보다 큰 얼굴이 되고
   약력이 통째로 화면 밖으로 밀린다. 확정 시안 91 의 1023px 최대 이미지는
   636px 다. 460px 로 묶으면 어느 폭에서도 635px 안쪽으로 들어온다. */
@media (min-width: 520px) and (max-width: 1023.98px) {
  .fs-p-94 .fs-doctors-block__photo { max-inline-size: 460px; }
}

/* --- 6. 제목 뒤 70px 틸 선 (48 승격분) ----------------------------------
   index.html 전제: 이 블록은 #staff-title 을 감싼 .fs-sec-head 에 걸린
   data-fs-reveal 을 전제한다.
   그 속성을 지우면 선은 «항상 그어진 채» 굳는다(진입 모션만 죽는다).
   ★ 초기 은닉을 .is-in 으로 걸면 안 된다 — fs.js 는 첫 화면 안에 있던 대상에는
     .fs-reveal 클래스 자체를 붙이지 않아 첫 화면 제목의 선이 영원히 안 그어진다.
     기본을 「그어진 상태」로 두고 .fs-reveal 에만 초기 은닉을 건다. */
.fs-p-94 .fs-sec-head--center .fs-sec-head__title { position: relative; }

.fs-p-94 .fs-sec-head--center .fs-sec-head__title::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
/* 가운데정렬 섹션 헤드에서는 선도 가운데에서 자란다 */
.fs-p-94 .fs-sec-head--center .fs-sec-head__title::after {
  margin-inline: auto;
  transform-origin: center;
}
:root.fs-js .fs-p-94 .fs-reveal:not(.is-in) .fs-sec-head__title::after,
:root.fs-js .fs-p-94 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- 7. 호버 — 프레임은 고정, 사진만 움직인다 (48 승격분) ----------------
   그림자는 쓰지 않는다(2차 규칙). 원장 포트레이트는 <figure> + <figcaption>
   구조라 틸트 inner 로 감쌀 요소가 없다 — index.html 에서 data-fs-tilt* 를
   걷어내고 여기로 옮겼다. 인덱스 카드만 틸트를 유지하며, 그쪽은
   data-fs-tilt-inner 가 카드 <a> 전체에 있어 라벨바까지 함께 기운다. */
.fs-p-94 .fs-doctors-block__frame img,
.fs-p-94 .fs-doctors-strip__box img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-94 .fs-doctors-block__photo:hover .fs-doctors-block__frame img,
  .fs-p-94 .fs-doctors-strip__cell:hover .fs-doctors-strip__box img { transform: scale(1.045); }
}
/* 확대된 img 는 스택 컨텍스트를 만들어 «위치 지정 없는» 라벨바 위에 그려진다.
   사진 아래끝이 높이의 2.25% 만큼 내려와 바의 윗부분을 덮으므로 한 층 올린다. */
.fs-p-94 .fs-doctors-block__photo .fs-labelbar,
.fs-p-94 .fs-doctors-strip__cell .fs-labelbar { position: relative; z-index: 1; }

/* --- 8. reduced-motion — 전부 정지 상태로 확정 ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-94 .fs-doctors-strip__box img,
  .fs-p-94 .fs-doctors-block__frame img,
  .fs-p-94 .fs-doctors-hero__shot img { transition: none !important; transform: none !important; }

  .fs-p-94 .fs-sec-head--center .fs-sec-head__title::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-11 · 「원장 학력 및 약력을 4seasonsps.com/94 참고해서 추가」
   (PPT 9 「원장님들 학력 포함 약력 전체 다 넣어주세요」)
   라이브 페이지와 대조하면 경력·학력은 이미 전부 있고 «학회 정회원» 8·10·5건만 없었다.
   9/10 에 들어낸 것은 3인 «대조표»(PPT 10 「전체삭제」)이고, 약력 안에 넣는 것은 PPT 9 의
   지시이므로 서로 어긋나지 않는다. 각 원장 블록에 「학회 활동」 그룹을 셋째로 넣는다.
   목록이 8~10줄이라 경력·학력 옆 셋째 열로 두면 세로로 길어져 축이 흐트러진다 —
   전폭으로 내리고 700 이상에서 두 열로 나눈다(5+5 · 4+4 · 3+2).
   ========================================================================== */
.fs-p-94 .fs-doctors-block__group--wide { grid-column: 1 / -1; }
@media (min-width: 700px) {
  /* 셋째 그룹이 전폭을 차지하면 auto-fit 이 빈 트랙을 못 접어 경력·학력이 3열 중 2열로
     좁아진다(1920 에서 500 → 300px, 「부산경남지회 학술이사」가 두 줄로 접혔다).
     열을 2개로 못 박아 경력·학력 폭을 전과 같게 둔다. */
  .fs-p-94 .fs-doctors-block__bio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-94 .fs-doctors-block__list--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fs-gap-col);
  }
}

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「81·80·91·119 다음 94」). 문구·HTML 무변경. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-94-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 360 에서 약력 항목 「임상교수」「외래교수」「수료」 · 주소 「8층」 이 홀로 남는다 → balance(줄 수 불변, 줄 길이만 고르게) */
.fs-p-94 .fs-doctors-block__list li,
.fs-p-94 .fs-sec-head__sub,
.fs-p-94 .fs-address { text-wrap: balance; }

/* --- 진료 장면 스트립 — 1023 이하는 auto-fit 이 폭마다 2·3열로 흔들려 4장이 3+1, 3장이 2+1 로 끝난다(360·540 실측).
   2열로 못 박고, 3장(고인석)은 셋째를 전폭으로 펴서 빈칸을 없앤다. 1장(김다빈)은 기존 --solo 규칙 그대로. */
@media (max-width: 1023px) {
  .fs-p-94 .fs-doctors-strip:not(.fs-doctors-strip--solo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-94 .fs-doctors-strip > li:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
}