/* ── pages / about-doctor — 김형택 원장 소개 ────────────────────────
   아키타입 article: 히어로 → 본문(프로필·아카이브·원칙·상담실 문답) →
   형제 페이지 → 상담 CTA.
   .page-hero / .numbered / .gallery / .qlist / .siblings / .cta-band
   (subpage.css) 와 .sec-head / .sub-label / .btn / .actions / .stack
   (layout.css) 를 그대로 쓴다. 이 파일은 거기에 없는 것만 만든다. */

/* ── 히어로 ────────────────────────────────────────────────── */

/* .page-hero 기본 오버레이는 검정 68%. 이 페이지 사진(hero.jpg)은
   수술등이 켜진 밝은 수술실이라 68% 로는 핑크 eyebrow 가 읽히지 않는다.
   about / blog / signature 와 같게 80% 로 올린다. */
.doc-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),
    var(--hero-img,none);
}

/* 긴 리드는 .page-hero__lead 의 900 제한 안에서 두 줄로 앉는다 */

/* ── 도입 — 인물 사진 + 원장의 말 ─────────────────────────── */

.doc-intro__inner{
  display:grid;grid-template-columns:420px 1fr;
  gap:var(--sp-block);align-items:center;
}
.doc-intro__figure{margin:0}
.doc-intro__figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-card);
  background:var(--surface-muted);
}

/* 인용 — .prose blockquote 의 분홍 판 대신 왼쪽 막대만. 사진 옆이라
   판을 깔면 사진과 두 덩어리가 서로 밀린다. */
.doc-intro__quote{
  padding-left:24px;
  border-left:3px solid var(--brand);
  font-weight:700;font-size:var(--fs-32);line-height:1.45;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.doc-intro__text{
  margin-top:var(--sp-stack);
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.doc-intro__sign{
  margin-top:var(--sp-tight);
  font-weight:700;font-size:var(--fs-16);line-height:1.6;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
}

/* 숫자 두 칸 — 원문은 라벨(dt) + 값(dd) 쌍이다.
   값 안의 숫자와 단위는 원문에 붙어 있어("24yrs") 크기로만 나눈다. */
.doc-intro__stats{
  display:flex;flex-wrap:wrap;gap:var(--sp-gap);
  margin-top:var(--sp-stack);padding-top:var(--sp-stack);
  border-top:1px solid var(--line-soft);
}
.doc-intro__stat{flex:1 1 200px}
.doc-intro__stat-label{font-size:var(--fs-16);line-height:1.5;color:var(--text-tertiary)}
.doc-intro__stat-value{
  margin-top:10px;
  font-weight:700;font-size:var(--fs-20);line-height:1.2;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
}
.doc-intro__num{
  margin-right:4px;
  font-size:var(--fs-40);line-height:1.1;color:var(--brand);
}

/* ── 프로필 ────────────────────────────────────────────────── */

/* H2 는 이름만, 직함 줄은 리드 자리에 둔다(원문은 두 줄이 붙어 있다) */
.doc-profile__role{font-weight:500;color:var(--text-primary)}

.doc-profile__bio{
  max-width:900px;margin:var(--sp-stack) auto 0;
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}

.doc-profile__cols{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-gap);margin-top:var(--sp-block);
}
.doc-profile__card{
  padding:36px 32px;
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.doc-profile__list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.doc-profile__list li{
  position:relative;padding-left:16px;
  font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.doc-profile__list li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:4px;height:4px;border-radius:50%;background:var(--brand);
}

/* 학회 목록 끝에 붙는 안내 링크 — 원문도 <ul> 바로 다음이다 */
.doc-profile__more{margin-top:24px}

/* ── 학술 아카이브 ─────────────────────────────────────────── */

/* H2 원문은 "A career built over time,preserved in its records" —
   쉼표 뒤 줄바꿈이 없어진 채로 붙어 있다. <br> 이 그 자리를 되살리므로
   좁은 폭에서도 지우지 않는다(지우면 "time,preserved" 로 읽힌다). */

/* 현재 임용 — 원본 문서 한 장 + 설명. 문서가 세로로 길어 300 폭으로 세운다. */
.doc-appt{
  display:grid;grid-template-columns:300px 1fr;
  gap:var(--sp-block);align-items:center;
  margin-top:var(--sp-block);padding:var(--sp-stack);
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.doc-appt__figure{display:block}
.doc-appt__figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius-sm);
  background:var(--surface-muted);
}
.doc-appt__figure:hover img{box-shadow:0 8px 40px rgba(0,0,0,.14)}
/* 제목 위 상태 배지 — .tag 프리미티브 그대로, 간격만 준다 */
.doc-appt__badge{margin-bottom:16px}
.doc-appt__title{
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.doc-appt__term{
  margin-top:12px;
  font-weight:700;font-size:var(--fs-16);line-height:1.5;color:var(--brand);
}
.doc-appt__text{
  margin-top:16px;
  font-size:var(--fs-16);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
/* 원문은 임용장을 띄우는 <button> 이다. 이 빌드에는 라이트박스가 없으므로
   썸네일과 같은 원본 파일을 새 창에서 여는 링크로 둔다. */
.doc-appt__btn{margin-top:24px}

.doc-records{margin-top:var(--sp-block)}
.doc-records__title{
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
}
.doc-records__note{
  margin-top:10px;
  font-size:var(--fs-16);line-height:1.6;color:var(--text-tertiary);word-break:keep-all;
}
.doc-records__grid{margin-top:var(--sp-stack)}

/* 한 칸 = 원본 문서 썸네일 + 연도 + 학술행사 이름.
   썸네일을 눌러 원본 파일을 새 창에서 그대로 본다.

   원본 스캔 18장은 파일상 모두 1700×2346 이지만 15장에 EXIF
   Orientation 6 이 붙어 있어 브라우저는 가로(2346×1700)로 그린다.
   섞인 채로 두면 줄마다 높이가 달라 캡션이 어긋난다. 칸을 4:3 으로
   고정하고 contain 으로 앉혀 문서 전체를 자르지 않고 줄을 맞춘다. */
.doc-record__link{display:block}
.doc-record__link img{aspect-ratio:4/3;object-fit:contain;padding:8px}
.doc-record__link:hover img{box-shadow:0 8px 40px rgba(0,0,0,.14)}
.doc-record__cap{display:flex;flex-direction:column;gap:4px}
.doc-record__year{
  font-weight:700;font-size:var(--fs-16);line-height:1.3;
  letter-spacing:var(--ls-tight);color:var(--brand);
}
.doc-record__name{font-size:var(--fs-16);line-height:1.5;color:var(--text-secondary);word-break:keep-all}

/* ── 원칙 · 상담실 문답 · 지켜 온 것 ───────────────────────── */

/* .sec-head 바로 밑에 붙는 덩어리들의 간격 (프리미티브에는 없다) */
.doc-standards__list,
.doc-room__list,
.doc-keep__list{margin-top:var(--sp-block)}

/* 문답은 한 줄이 1280 까지 늘어나면 읽기 어렵다. 본문과 같은 900. */
.doc-room__list{max-width:900px;margin-inline:auto}

/* ── 지켜 온 것 — .numbered 카드에 숫자 대신 말 배지 ────────── */

.doc-keep__tag{
  display:inline-flex;align-items:center;
  min-height:36px;padding-inline:18px;
  border-radius:var(--radius-pill);
  background:var(--brand);color:var(--text-inverse);
  font-weight:700;font-size:var(--fs-16);line-height:1;letter-spacing:var(--ls-tight);
}

.doc-tense{
  margin-top:var(--sp-block);padding:var(--sp-stack);
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.doc-tense__title{
  font-weight:700;font-size:var(--fs-20);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.doc-tense__list{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px var(--sp-gap);margin-top:20px;
}
.doc-tense__list li{
  position:relative;padding-left:16px;
  font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all;
}
.doc-tense__list li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:4px;height:4px;border-radius:50%;background:var(--brand);
}
.doc-tense__note{
  margin-top:20px;padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-16);line-height:1.7;color:var(--text-tertiary);word-break:keep-all;
}

/* ── 주요 수술 ────────────────────────────────────────────── */

/* 원문은 가운데 정렬된 알약 여섯 개. .tag 는 28px 짜리 작은 칩이라
   본문 덩어리로 쓰기엔 낮다. 색은 프리미티브 그대로 두고 크기만 올린다. */
/* 칩 6개·링크 5개가 기본 줄바꿈으로는 5+1 / 4+1 로 갈려 둘째 줄에 하나만 남는다.
   3개씩 끊어 두 줄로 세운다(6=3+3, 5=3+2). 칸 폭은 글자에 맞춘다. */
.doc-surgeries__tags,
.doc-surgeries__links{
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:center;justify-items:center;gap:10px;
  margin-top:var(--sp-stack);
}
@media (max-width:767px){
  .doc-surgeries__tags,
  .doc-surgeries__links{grid-template-columns:repeat(2,auto)}
}
.doc-surgeries__tag{
  height:auto;min-height:40px;padding-block:8px;padding-inline:20px;
  font-size:var(--fs-16);line-height:1.4;text-align:center;
}

/* ── 리드 줄 길이 ──────────────────────────────────────────
   1280 폭에서 .sec-lead 한 줄이 너무 길어진다. 본문(.prose)과 같은 900. */
.doc-archive .sec-lead,
.doc-standards .sec-lead,
.doc-room .sec-lead,
.doc-keep .sec-lead,
.doc-surgeries .sec-lead,
.doc-writing__lead{max-width:900px}

/* ── 상담 CTA ─────────────────────────────────────────────── */

/* 이 페이지 콘텐츠에는 CTA 문구가 없다. 라벨 + 버튼만이라
   .cta-band 의 --sp-section 여백은 과하다. blog 와 같게 낮춘다. */
/* 다른 페이지 CTA 밴드와 같은 높이 — .cta-band 기본 --sp-section 을 그대로 쓴다.
   (로비 사진의 KOWON 사인이 버튼과 겹치지 않게 프레이밍만 41% 로 올린다) */
.doc-cta{background-position:0 0,center 41%}
.doc-cta__inner{display:flex;flex-direction:column;align-items:center}
.doc-cta__actions{margin-top:var(--sp-tight)}

/* ── 반응형 ───────────────────────────────────────────────── */

@media (max-width:1279px){
  .doc-intro__inner{grid-template-columns:360px 1fr;gap:var(--sp-stack)}
}

@media (max-width:1023px){
  /* 태블릿에서 2열로 두면 사진 칸이 300 을 먹어 인용문이 다섯 줄로 쪼개진다.
     세로로 쌓아 글줄을 되살린다. */
  .doc-intro__inner{grid-template-columns:1fr;gap:var(--sp-stack)}
  .doc-intro__figure{max-width:360px;margin-inline:auto}
  .doc-profile__card{padding:28px 24px}
  .doc-appt{grid-template-columns:240px 1fr;gap:var(--sp-stack);padding:28px}
}

@media (max-width:767px){
  .doc-intro__figure{max-width:320px}
  .doc-intro__quote{padding-left:16px}
  .doc-intro__stats{gap:var(--sp-tight)}
  .doc-intro__stat{flex:1 1 140px}

  .doc-profile__cols{grid-template-columns:1fr}
  .doc-profile__card{padding:24px 20px}

  /* 임용 문서도 세로로. 문서 한 장이 화면을 다 먹지 않게 폭을 잡는다. */
  .doc-appt{grid-template-columns:1fr;padding:24px 20px}
  .doc-appt__figure{max-width:240px}

  .doc-tense{padding:24px 20px}
  .doc-tense__list{grid-template-columns:1fr}
}