/* ============================================================
   about-doctors.css — 의료진 소개 페이지

   ★ 정본 about-doctors-full.html <style> 에서 기계 추출. 다시 쓰지 않았다(체크리스트 §0-1).
   ⚠ 정본과 다른 점은 진입 연출의 시작 조건뿐 — `.is-js` 뒤로 옮겼다(§0-5).
      지속시간·딜레이·이징은 정본 값 그대로.
   ============================================================ */

.wf-34 { aspect-ratio:3/4; }
.d2-pad { padding-top:clamp(88px,70px + 3vw,140px);padding-bottom:clamp(72px,56px + 2vw,110px); }
.d2-grid { display:grid;grid-template-columns:minmax(280px,4.5fr) 7fr;gap:clamp(48px,3vw + 24px,88px);align-items:start; }
.d2-sticky { position:sticky;top:104px; }
.d2-portrait { max-width:360px;aspect-ratio:2/3;position:relative;overflow:hidden; }
.d2-portrait > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(135deg,#000 28%,transparent 72%);mask-image:linear-gradient(135deg,#000 28%,transparent 72%);-webkit-mask-size:400% 400%;mask-size:400% 400%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0% 0%;mask-position:0% 0%; }
.d2-dots { display:flex;gap:12px;justify-content:center;margin-top:18px; }
.d2-dots .d2-dot { width:26px;height:14px;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center; }
.d2-dots .d2-dot::before { content:'';display:block;width:100%;height:1px;background:rgba(0,0,0,0.22);transition:background .3s; }
.d2-dots .d2-dot.on::before { background:#111; }
.d2-name { margin-top:4px;font-size:clamp(26px,23px + 0.8vw,34px);font-weight:700;color:#111;letter-spacing:-0.01em; }
.d2-title { font-size:clamp(34px,26px + 2vw,54px);line-height:1.18;letter-spacing:-0.02em;color:#111;font-weight:400;margin-bottom:clamp(32px,26px + 1.2vw,48px); }
.d2-title strong { font-weight:700; }
.d2-blk .bd { margin-top:0; }

/* 뒤에 오는 정본 규칙이 앞을 덮는다 — 순서 그대로 유지 */
.d2-grid { grid-template-columns:minmax(360px,5.6fr) 6.4fr; }
.d2-portrait { max-width:none; }
.d2-blk { border-top:none;padding:0;margin-top:clamp(22px,18px + 1vw,32px); }
.d2-blk:first-of-type { margin-top:0; }
.d2-sign { font-family:'Qwitcher Grypen',cursive;font-size:clamp(30px,26px + 1vw,40px);font-weight:400;color:#767676;margin-left:12px;line-height:0.8;vertical-align:baseline; }
.d2-sig-role { font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#8a8a8a;font-weight:500; }

/* 서명 블록 (2안 — 레터형) */
.ds2 { text-align:right;margin-top:clamp(44px,36px + 1.5vw,64px);padding-top:clamp(26px,22px + 0.8vw,36px);border-top:1px solid #E3E3E3; }
.ds2 .d2-name { margin-top:6px; }
.ds2-career { margin-top:18px; }
.ds2-career ul li { font-size:12.5px;font-weight:300;line-height:1.85;color:#111; }

@media (max-width:768px) {
  /* 정본은 flex 다(2026-08-19 수정). grid 1열로 바꿔 놨었는데 둘 다 세로 1열로
     보여도 행 높이 계산이 달라 실측이 어긋났다. 원본 그대로 둔다(§0-1). */
  .d2-grid { display:flex;flex-direction:column;gap:0;align-items:stretch; }
  .d2-title { order:1; }
  .d2-sticky { position:static;order:2;margin-bottom:40px; }
  .d2-portrait { max-width:none; }
}

/* ── 진입 연출 — 시작 조건만 .is-js (§0-5). 값은 정본 그대로 ── */
.d2-grid.is-js .d2-portrait { animation:rvFade 1.05s ease 0.35s both; }
/* ⚠ 예전에는 nth-of-type(1)~(4) 로 딜레이를 박아 두어, 문단이 5개가 되면
   다섯 번째부터 연출 없이 그냥 떠 있었다. 장비 페이지에서 같은 일을 겪고
   계산식으로 고친 전례가 about-equipment.css 에 있다 — 같은 방식으로 통일한다.
   0.56s 에서 0.21s 씩 (기존 0.56·0.77·0.98·1.19 와 같은 리듬). */
.d2-grid.is-js .d2-right .d2-blk {
  animation: rvFade 1.05s ease both;
  animation-delay: calc(0.56s + var(--i, 0) * 0.21s);
}
.d2-grid.is-js .ds2 { animation:rvFade 1.05s ease 1.4s both; }
.d2-grid.is-js .d2-title { animation:aboutRise 1.1s cubic-bezier(0.22,0.61,0.36,1) .25s both; }

@media (prefers-reduced-motion: reduce) {
  .d2-grid.is-js .d2-portrait,
  .d2-grid.is-js .d2-blk,
  .d2-grid.is-js .ds2,
  .d2-grid.is-js .d2-title { animation:none;opacity:1; }
}