@charset "utf-8";
/* ==========================================================================
   골든디아망 의료진 소개(doctors.html) — 이력서 조판
   main.css → sub.css → 이 파일 순으로 로드한다. 토큰·헤더·드로어·버튼·
   Contact·푸터·리빌은 전부 앞의 두 파일 것을 그대로 쓴다.

   왜 파일을 따로 뒀나
     doctors 는 시술 상세가 아니라 **이력서**다. 자격 4 · 연혁 5 · 미디어 5 ·
     학술 사진 10 · 약력 16줄이 전부인데, sub.css 의 `.gd-steps` 카드 행을
     반복해 담으면 이력이 '시술 카드'처럼 읽힌다. 그렇다고 sub.css 를 고치면
     시술 페이지 52장이 함께 흔들린다(about.css 를 가른 것과 같은 이유).
     셀렉터는 **전부 .gd-doctors 안으로** 스코프한다.

   ⚠ 색은 사이트 기조 그대로다 — 크림·베이지·흰 바탕 + 브라운 골드 액센트,
     어두운 면은 **페이지당 한 밴드**(§7 프로필)뿐이다(서브페이지 디자인 규칙).
     2026-08-19 에 한 번 페이지 전체를 딥네이비로 깔았다가 팔레트가 너무
     달라져 되돌렸다. **바뀌는 것은 조판뿐이다.**
     밴드 리듬: 흰(히어로) → 크림(자격) → 흰(연혁) → 베이지(미디어)
              → 흰(글로벌) → 크림(학술) → 딥(프로필) → 흰(Contact)

   블록
   01 BASE   02 TYPO   03 HERO    04 CERT   05 TIME
   06 SHOTS  07 SPLIT  08 PROFILE 09 RESPONSIVE
   ========================================================================== */

/* --- 01. BASE ------------------------------------------------------------ */
.gd-doctors{
  /* 이 페이지 전용 토큰. 값은 전부 main.css / sub.css 것을 가리킨다 —
     새 색을 만들지 않는다. */
  --dr-line:var(--gd-hair);          /* 행 구분 헤어라인 #cdcdcd */
  --dr-line-2:var(--gd-ink);         /* 목록 최상단 강조선 */
  --dr-txt:#4a4741;                  /* 본문 — sub.css .gd-sbody 와 같은 값 */
  --dr-dim:var(--gd-muted);          /* 캡션 #6d6a66 */
  --dr-accent:var(--gd-brown);       /* 연도·번호 액센트 #a36a33 */
  --dr-kick:var(--gd-muted);         /* 킥커 */
}
.gd-doctors .dr-sec{position:relative;padding:var(--gd-pad) 0}
.gd-doctors .dr-sec--cream{background:var(--gd-cream)}
.gd-doctors .dr-sec--beige{background:var(--gd-beige)}
/* 베이지 밴드 위에서는 킥커가 한 단계 진해야 읽힌다(sub.css 와 같은 처리) */
.gd-doctors .dr-sec--beige .dr-kicker{color:#574f43}

/* --- 02. TYPO ------------------------------------------------------------ */
.gd-doctors .dr-head{
  font-size:clamp(21px,2.29vw,44px);font-weight:700;line-height:1.4;
  letter-spacing:-.028em;color:var(--gd-ink);text-align:center;
}
.gd-doctors .dr-head--left{text-align:left}
.gd-doctors .dr-kicker{
  font-size:clamp(11px,.83vw,15px);font-weight:700;line-height:1.5;
  letter-spacing:.14em;color:var(--dr-kick);
}
.gd-doctors .dr-kicker+.dr-head{margin-top:clamp(10px,1.04vw,20px)}
.gd-doctors .dr-kicker--sub{margin-top:clamp(24px,2.8vw,54px)}
.gd-doctors .dr-body{
  margin-top:clamp(16px,1.87vw,36px);
  font-size:clamp(13.5px,.94vw,18px);line-height:1.65;letter-spacing:-.02em;color:var(--dr-txt);
}
/* 원문에서 위아래에 금색 가는 선을 두른 금색 라벨. 개편 전에는 그냥 본문이었다 —
   서식 자체는 밝은 면에서도 성립한다(선·글자를 브라운으로). */
.gd-doctors .dr-label{
  display:inline-block;margin-top:clamp(18px,2.08vw,40px);
  padding:clamp(7px,.73vw,14px) 0;
  border-top:1px solid var(--dr-accent);border-bottom:1px solid var(--dr-accent);
  font-size:clamp(11px,.78vw,15px);letter-spacing:.1em;color:var(--gd-brown-dp);
}
.gd-doctors .dr-cap{
  margin-top:clamp(12px,1.25vw,24px);
  font-size:clamp(11.5px,.78vw,15px);line-height:1.55;letter-spacing:-.01em;
  color:var(--dr-dim);text-align:center;
}
.gd-doctors .dr-cap--left{text-align:left}
.gd-doctors .dr-quote{
  margin-top:clamp(40px,4.8vw,92px);text-align:center;
  font-size:clamp(15px,1.35vw,26px);line-height:1.6;letter-spacing:-.03em;color:var(--gd-ink);
}

/* --- 03. HERO — 좌 카피 / 우 인물 ---------------------------------------- */
/* 개편 전은 좌 인물 / 우 카피였다(.gd-shero). 좌우를 바꿔 이름이 먼저 오게 하고,
   사진은 오른쪽으로 화면 끝까지 뺀다 — 시술 페이지 히어로와 정확히 반대 짜임이다. */
.gd-doctors .dr-hero{padding:calc(var(--gd-hdr) + clamp(24px,7.81vw,150px)) 0 clamp(56px,7.8vw,150px)}
.gd-doctors .dr-hero-in{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,52%);
  column-gap:clamp(20px,3.1vw,60px);
}
.gd-doctors .dr-hero-fig{
  margin:0;margin-right:calc(-1 * var(--gd-bleed));
  border-radius:var(--gd-r) 0 0 var(--gd-r);overflow:hidden;background:#141b23;
}
.gd-doctors .dr-hero-fig img{width:100%;height:auto}
.gd-doctors .dr-hero-h{
  margin-top:clamp(10px,1.15vw,22px);
  font-size:clamp(28px,3.34vw,64px);font-weight:800;line-height:1.2;
  letter-spacing:-.035em;color:var(--gd-ink);
}
.gd-doctors .dr-hero-lead{
  margin-top:clamp(18px,2.19vw,42px);
  font-size:clamp(14px,1.05vw,20px);line-height:1.6;letter-spacing:-.025em;color:var(--dr-txt);
}
.gd-doctors .dr-hero .gd-actions{margin-top:clamp(24px,2.8vw,54px)}

/* --- 04. CERT — 공식 자격 4 ---------------------------------------------- */
/* 개편 전에는 흰 카드 넉 장(.gd-steps--4)이었다. 원문은 배경 위에 글자만 놓인
   짜임이라 카드를 걷고 세로 헤어라인으로 칸만 가른다. */
.gd-doctors .dr-cert{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--dr-line-2);border-bottom:1px solid var(--dr-line);
}
.gd-doctors .dr-cert li{
  padding:clamp(24px,2.92vw,56px) clamp(12px,1.46vw,28px);
  text-align:center;
}
.gd-doctors .dr-cert li+li{border-left:1px solid var(--dr-line)}
.gd-doctors .dr-cert-t{
  font-size:clamp(13px,1.04vw,20px);font-weight:700;line-height:1.5;
  letter-spacing:-.02em;color:var(--gd-ink);
}
.gd-doctors .dr-cert-s{
  margin-top:clamp(8px,.83vw,16px);
  font-size:clamp(11px,.73vw,14px);line-height:1.55;color:var(--dr-dim);
}

/* --- 05. TIME — 주요 연혁 세로 타임라인 ---------------------------------- */
/* 원문이 점선 축을 그린 타임라인인데 개편 전 5칸 카드 행은 '나란한 항목'으로
   읽혔다. 축을 세워 되돌린다 — 연도가 축 왼쪽에 브라운 세리프로 선다. */
.gd-doctors .dr-time{
  margin-top:clamp(30px,3.65vw,70px);
  max-width:min(100%,860px);margin-inline:auto;
}
.gd-doctors .dr-time li{
  position:relative;display:grid;align-items:baseline;
  grid-template-columns:clamp(64px,7.3vw,140px) minmax(0,1fr);
  column-gap:clamp(20px,2.6vw,50px);
  padding:clamp(16px,1.77vw,34px) 0 clamp(16px,1.77vw,34px) clamp(18px,2.08vw,40px);
  border-bottom:1px solid var(--dr-line);
}
.gd-doctors .dr-time li:first-child{border-top:1px solid var(--dr-line-2)}
/* 축과 마디 — 축은 항목 사이에도 이어져야 하므로 li 를 가로지르게 둔다 */
.gd-doctors .dr-time li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--dr-line);
}
.gd-doctors .dr-time li::after{
  content:"";position:absolute;left:-3px;top:calc(clamp(16px,1.77vw,34px) + .5em);
  width:7px;height:7px;border-radius:50%;background:var(--dr-accent);
}
.gd-doctors .dr-time b{
  font-family:var(--gd-serif);font-weight:400;font-style:italic;
  font-size:clamp(20px,2.19vw,42px);line-height:1;letter-spacing:.01em;color:var(--dr-accent);
  font-variant-numeric:lining-nums;
}
.gd-doctors .dr-time span{
  font-size:clamp(13px,.94vw,18px);line-height:1.6;letter-spacing:-.02em;color:var(--dr-txt);
}

/* --- 06. SHOTS — 사진 줄 (미디어 5 / 학술·글로벌 2x2) --------------------- */
.gd-doctors .dr-shots{
  margin-top:clamp(28px,3.44vw,66px);
  display:grid;gap:clamp(14px,1.87vw,36px);
}
.gd-doctors .dr-shots--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gd-doctors .dr-shots--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gd-doctors .dr-shots figure,
.gd-doctors .dr-fig{margin:0;border-radius:var(--gd-r);overflow:hidden;background:#efe9e0}
.gd-doctors .dr-shots img,
.gd-doctors .dr-fig img{width:100%;height:auto}
/* 원문도 단체컷과 현장컷 사이가 6px 뿐이다 — 띄우면 오히려 원문과 달라진다 */
.gd-doctors .dr-fig--stack{margin-top:6px}

/* --- 07. SPLIT — 좌 카피 / 우 사진 --------------------------------------- */
.gd-doctors .dr-split{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,50%);
  column-gap:clamp(24px,3.65vw,70px);row-gap:clamp(26px,3vw,44px);
}
/* 앞 밴드와 같은 짜임이 이어지지 않게 한 자리만 뒤집는다 */
.gd-doctors .dr-split--rev{grid-template-columns:minmax(0,50%) minmax(0,1fr)}
/* 좌 이미지 스택 978 / 우 본문 582 로 우하단이 396px 빈다. 열 순서는 그대로 두고
   짧은 쪽만 세로 가운데로 — 시술 페이지의 .gd-2col--vc 와 같은 처방이다 */
.gd-doctors .dr-split--rev{align-items:center}
.gd-doctors .dr-num{
  margin-top:clamp(24px,2.8vw,54px);border-top:1px solid var(--dr-line-2);
}
.gd-doctors .dr-num li{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  column-gap:clamp(14px,1.56vw,30px);
  padding:clamp(11px,1.15vw,22px) 0;border-bottom:1px solid var(--dr-line);
}
.gd-doctors .dr-num b{
  font-family:var(--gd-serif);font-weight:400;font-style:italic;
  font-size:clamp(13px,1.04vw,20px);letter-spacing:.02em;color:var(--dr-accent);
}
.gd-doctors .dr-num span{font-size:clamp(12.5px,.89vw,17px);line-height:1.55;letter-spacing:-.02em;color:var(--dr-txt)}

/* --- 08. PROFILE — 약력 16줄 · 페이지 유일 악센트 ------------------------- */
/* 서브페이지 디자인 규칙대로 어두운 밴드는 페이지에 하나뿐이다. 개편 전에도
   이 자리였다(.gd-sec--deep) — 바뀐 것은 안쪽 짜임뿐이다. */
.gd-doctors .dr-profile{
  background:var(--gd-deep);color:#fff;
  --dr-line:rgba(255,255,255,.14);
  --dr-line-2:rgba(255,255,255,.34);
  --dr-txt:#b9bec3;                  /* #0a1118 대비 9.0:1 */
  --dr-dim:#8f959b;                  /* 6.4:1 */
  --dr-accent:var(--gd-hero-italic); /* #fff2c2 — 어두운 면에서는 브라운이 4.7:1 로 모자란다 */
}
.gd-doctors .dr-profile .dr-head{color:#fff}
.gd-doctors .dr-profile-in{
  /* 좌 934 / 우 601 로 우하단이 333px 검은 공백이 된다 → 짧은 쪽을 세로 가운데로 */
  display:grid;align-items:center;
  grid-template-columns:minmax(0,40%) minmax(0,1fr);
  column-gap:clamp(28px,4.17vw,80px);row-gap:clamp(28px,3vw,44px);
}
.gd-doctors .dr-mark{
  font-family:var(--gd-serif);font-weight:400;line-height:1;
  font-size:clamp(24px,2.6vw,50px);letter-spacing:.005em;color:#fff;
}
.gd-doctors .dr-mark i{font-style:italic;color:var(--gd-hero-italic)}
.gd-doctors .dr-mark+.dr-head{margin-top:clamp(16px,1.87vw,36px)}
.gd-doctors .dr-profile-cap{
  margin-top:clamp(12px,1.25vw,24px);
  font-size:clamp(11px,.78vw,15px);letter-spacing:.02em;color:var(--dr-dim);
}
.gd-doctors .dr-profile-name{
  margin-top:clamp(4px,.42vw,8px);
  font-size:clamp(14px,1.25vw,24px);letter-spacing:-.035em;color:#e7e3dd;
}
.gd-doctors .dr-profile-fig{
  margin:clamp(24px,2.8vw,54px) 0 0;border-radius:var(--gd-r);overflow:hidden;background:#141b23;
}
.gd-doctors .dr-profile-fig img{width:100%;height:auto}
/* 약력은 원문이 5줄 / 빈 줄 / 11줄로 끊어 두어 목록을 두 벌로 나눈다. */
.gd-doctors .dr-cred{border-top:1px solid var(--dr-line-2)}
.gd-doctors .dr-cred li{
  position:relative;padding:clamp(10px,1.04vw,20px) 0 clamp(10px,1.04vw,20px) clamp(14px,1.15vw,22px);
  border-bottom:1px solid var(--dr-line);
  font-size:clamp(12.5px,.89vw,17px);line-height:1.55;letter-spacing:-.02em;color:var(--dr-txt);
}
.gd-doctors .dr-cred li::before{
  content:"";position:absolute;left:0;top:calc(clamp(10px,1.04vw,20px) + .68em);
  width:clamp(6px,.42vw,8px);height:1px;background:var(--dr-accent);
}
/* 11줄짜리는 한 컬럼으로 두면 혼자 지면을 다 먹는다 */
.gd-doctors .dr-cred--two{
  margin-top:clamp(24px,2.8vw,54px);
  columns:2;column-gap:clamp(20px,2.6vw,50px);
}
.gd-doctors .dr-cred--two li{break-inside:avoid}

/* --- 09. RESPONSIVE ------------------------------------------------------ */
@media (min-width:769px){
  /* 연혁 칸의 <br> 은 원문 줄바꿈이다. 한 줄로 서는 폭에서는 감춘다 —
     <br> 뒤에 공백을 하나 둔 마크업이라 낱말이 붙지 않는다. */
  .gd-doctors .dr-time span br{display:none}
}

@media (max-width:1024px){
  .gd-doctors .dr-hero{padding-top:calc(var(--gd-hdr) + clamp(18px,3vw,34px))}
  .gd-doctors .dr-hero-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,3.4vw,36px)}
  /* 1열이 되면 인물이 글 위로 올라가야 얼굴이 먼저 보인다.
     시술 페이지 히어로가 모바일에서 하는 것과 같은 처리다(sub.css 17번). */
  .gd-doctors .dr-hero-fig{
    order:-1;margin-right:calc(-1 * var(--gd-gut));border-radius:0;
  }
  .gd-doctors .dr-split,
  .gd-doctors .dr-split--rev{grid-template-columns:minmax(0,1fr)}
  /* 뒤집힌 판은 1열이 되면 사진이 먼저 와서 제목이 늦게 나온다 */
  .gd-doctors .dr-split--rev>*:first-child{order:2}
  .gd-doctors .dr-shots--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gd-doctors .dr-profile-in{grid-template-columns:minmax(0,1fr)}
  .gd-doctors .dr-profile-fig{width:min(100%,420px)}
}

@media (max-width:768px){
  /* 본문 <br> 은 1920 기준으로 끊은 줄바꿈이라 좁은 폭에서 누더기가 된다
     (sub.css .gd-sbody br 과 같은 처리). 전부 <br> 뒤에 공백이 있다. */
  .gd-doctors .dr-body br,
  .gd-doctors .dr-cap br,
  .gd-doctors .dr-quote br,
  .gd-doctors .dr-cert-t br,
  .gd-doctors .dr-cert-s br{display:none}
  .gd-doctors .dr-cert{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd-doctors .dr-cert li:nth-child(2n+1){border-left:0}
  .gd-doctors .dr-cert li:nth-child(n+3){border-top:1px solid var(--dr-line)}
  .gd-doctors .dr-shots--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd-doctors .dr-cred--two{columns:1}
}

@media (max-width:480px){
  .gd-doctors .dr-hero .gd-actions .gd-btn{flex:1 1 auto}
  /* --5 까지 1열로 접으면 스냅 사진이 350x593 이 되어 바로 아래 학술컷(350x197)보다
     3배 커진다 — 위계가 뒤집힌다. 5장짜리는 2열로 둔다 */
  .gd-doctors .dr-shots--2{grid-template-columns:minmax(0,1fr)}
  .gd-doctors .dr-time li{grid-template-columns:minmax(0,1fr);row-gap:6px}
}