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

   왜 파일을 따로 뒀나
     about 은 시술 상세가 아니라 병원 소개다. sub.css 의 컴포넌트
     (.gd-shero / .gd-2col / .gd-steps)를 그대로 입으면 시술 페이지 52장과
     조판이 똑같아져 '시술 설명서'로 읽힌다. 그렇다고 sub.css 를 고치면
     그 52장이 함께 흔들린다(2026-08-10 에 main.css/sub.css 를 가른 것과 같은 이유).
     그래서 이 페이지 전용 블록만 여기 모으고, 셀렉터는 **전부 .gd-about 안으로**
     스코프한다. 이 파일을 지우면 about.html 만 sub.css 판으로 돌아간다.

   유지되는 것(= vibe)
     색 토큰 / Pretendard·Playfair 조합 / 이탤릭 라틴 액센트 / 골드 CTA /
     18px 라운드 / .gd-reveal 등장 / 헤더·드로어·Contact·푸터.
   바뀌는 것(= layout)
     히어로가 전면폭 · 본문이 좌측 스티키 인덱스 + 우측 단일 컬럼 ·
     밴드마다 폭이 달라지는 비대칭 배치 · Signature 가 그리드가 아니라 목록.

   블록
   01 HERO      02 DOC / INDEX   03 ARTICLE   04 LAP    05 DARK
   06 DEFS      07 SIG           08 SPLIT     09 CRED   10 WIDE
   11 RESPONSIVE
   ========================================================================== */

/* --- 01. HERO — 전면폭 사인보드 ------------------------------------------- */
/* 원문 /main 히어로가 배경영상 위 검정 0.7 오버레이 + 흰 글자였다. 시술
   페이지의 흰 배경 히어로(.gd-shero)보다 이쪽이 원문에 가깝다. */
.gd-about .gd-ab-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:min(86vh,760px);
  display:flex;align-items:flex-end;
}
.gd-about .gd-ab-hero-bg{position:absolute;inset:0;z-index:-2;background:#0a1118}
.gd-about .gd-ab-hero-bg video{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* 사인보드(원본 x 290~800)는 화면 중앙에 남기고 글자는 왼쪽 커튼 위에 얹는다.
   그래서 스크림도 좌→우 방향이다. 우측 끝만 다시 어둡게 하는 건 창문 하이라이트
   때문에 헤더 워드마크가 흰 배경 위에 놓이는 자리가 생겨서다. */
.gd-about .gd-ab-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,10,15,.90) 0%,rgba(6,10,15,.72) 30%,rgba(6,10,15,.16) 62%,rgba(6,10,15,.46) 100%),
    linear-gradient(180deg,rgba(6,10,15,.52) 0%,rgba(6,10,15,0) 34%);
}
.gd-about .gd-ab-hero-in{
  width:100%;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;
  padding:calc(var(--gd-hdr) + clamp(60px,10vw,180px)) var(--gd-gut) clamp(52px,6.5vw,120px);
}
/* 640 이면 1810px 부터 제목이 3줄로 깨진다 — 글자가 60px 로 커지면서 둘째 줄
   「골든뷰 성형 클리닉만의 노하우」에 679px 이 필요해진다(브라우저 실측).
   원문 줄바꿈(<br> 2줄)이 모든 폭에서 그대로 서도록 720 으로 잡는다. */
.gd-about .gd-ab-hero-body{max-width:min(100%,720px)}
/* 히어로 카피는 .gd-reveal 을 쓰지 않는다 — main.js 를 기다리는 동안 opacity:0 이라
   LCP 가 그만큼 밀린다. CSS 키프레임은 파싱 즉시 시작하고 JS 와 무관하다.
   reduced-motion 이면 main.css 20번 블록이 duration 을 .001ms 로 눌러 끝 상태만 남는다. */
@keyframes gd-ab-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gd-about .gd-ab-rise>*{animation:gd-ab-rise .7s var(--gd-ease) both}
.gd-about .gd-ab-rise>*:nth-child(2){animation-delay:.09s}
.gd-about .gd-ab-rise>*:nth-child(3){animation-delay:.18s}
.gd-about .gd-ab-rise>*:nth-child(4){animation-delay:.27s}
/* 히어로 키커만 라틴 이탤릭이다 — 페이지에서 유일하게 문장 전체가 이탤릭인 자리라
   .gd-skicker(고딕 볼드) 대신 따로 잡는다. */
.gd-about .gd-ab-kicker{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.98vw,38px);line-height:1;letter-spacing:.01em;
  color:var(--gd-hero-italic);
}
.gd-about .gd-ab-hero-h{
  margin-top:clamp(16px,1.9vw,36px);
  font-size:clamp(27px,3.13vw,60px);font-weight:800;line-height:1.28;
  letter-spacing:-.038em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.gd-about .gd-ab-hero-lead{
  margin-top:clamp(14px,1.35vw,26px);
  font-size:clamp(14px,1.05vw,20px);line-height:1.5;color:#ded9d2;
}
.gd-about .gd-ab-hero .gd-actions{margin-top:clamp(24px,2.8vw,52px)}
/* 어두운 배경에서는 sub.css 의 먹색 아웃라인 버튼이 안 보인다 */
.gd-about .gd-ab-hero .gd-btn--line{border-color:rgba(255,255,255,.72);color:#fff}
.gd-about .gd-ab-hero .gd-btn--line:hover{background:#fff;color:var(--gd-ink)}

/* --- 02. DOC — 좌 스티키 인덱스 / 우 본문 --------------------------------- */
/* 시술 페이지는 밴드마다 배경색이 바뀌지만(cream→deep→beige→…) 이 페이지는
   본문 전체가 한 장의 지면이다. 배경은 크림 한 색으로 두고 리듬은 헤어라인과
   폭 변화로만 만든다. */
.gd-about .gd-ab-doc{background:var(--gd-cream);padding:clamp(48px,5.2vw,100px) 0 clamp(56px,6vw,116px)}
.gd-about .gd-ab-doc-in{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,214px) minmax(0,1fr);
  column-gap:clamp(30px,5vw,96px);
}
/* 인덱스는 스크롤을 따라 붙어 있다. 고정 헤더(88px)만큼 내려야 가려지지 않는다. */
.gd-about .gd-ab-index{position:sticky;top:calc(var(--gd-hdr) + 30px)}
.gd-about .gd-ab-index-t{
  font-family:var(--gd-serif);font-style:italic;font-size:clamp(15px,1.05vw,20px);
  line-height:1;color:var(--gd-brown);
}
.gd-about .gd-ab-index ol{margin-top:clamp(14px,1.3vw,25px);border-left:1px solid var(--gd-line)}
.gd-about .gd-ab-index a{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;column-gap:9px;padding:7px 0 7px clamp(12px,1.15vw,22px);
  font-size:clamp(12px,.83vw,15px);line-height:1.45;letter-spacing:-.02em;color:var(--gd-muted);
  transition:color .3s var(--gd-ease);
}
/* 좌측 골드 세그먼트 — 현재 섹션에서만 자란다(1px 레일 위에 겹쳐 그린다) */
.gd-about .gd-ab-index a::before{
  content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;
  background:var(--gd-brown);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .35s var(--gd-ease);
}
.gd-about .gd-ab-index a b{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  /* #b8b0a2 는 크림 바탕에서 대비 2.01:1 이라 11px 에서 읽히지 않았다 → 4.7:1 */
  font-size:.95em;letter-spacing:.02em;color:#776f5c;
  transition:color .3s var(--gd-ease);
}
.gd-about .gd-ab-index a:hover{color:var(--gd-ink)}
.gd-about .gd-ab-index a[aria-current]{color:var(--gd-ink);font-weight:700}
.gd-about .gd-ab-index a[aria-current]::before{transform:scaleY(1)}
.gd-about .gd-ab-index a[aria-current] b{color:var(--gd-brown)}
/* 인덱스 아래 CTA — 스티키로 따라다니는 상담 버튼 하나만 둔다 */
.gd-about .gd-ab-index .gd-btn{margin-top:clamp(18px,1.7vw,32px);width:100%;justify-content:center}

/* --- 03. ARTICLE — 번호 거터 + 본문 --------------------------------------- */
.gd-about .gd-ab-art{
  display:grid;align-items:start;
  grid-template-columns:clamp(52px,5vw,96px) minmax(0,1fr);
  column-gap:clamp(14px,2.1vw,40px);
}
.gd-about .gd-ab-art+.gd-ab-art{
  margin-top:clamp(52px,5.7vw,110px);padding-top:clamp(52px,5.7vw,110px);
  border-top:1px solid var(--gd-line);
}
/* 큰 이탤릭 번호. 원문에는 없는 표시다 — 긴 한 장짜리 지면에서 인덱스와 본문을
   잇는 표지라서 넣었다(같은 성격의 표시가 §6 약력 01–07 에도 이미 있다). */
.gd-about .gd-ab-no{
  grid-column:1;
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:clamp(30px,3.34vw,64px);line-height:.86;letter-spacing:0;
  color:#cbbda6;
}
.gd-about .gd-ab-body{grid-column:2;min-width:0}
/* 번호는 본문과 같은 방향(아래→위)으로 올라오면 둘이 한 덩어리로 보인다.
   왼쪽에서 밀려 들어오게 하고 본문보다 살짝 먼저 뜬다 — 번호가 본문을 '연다'. */
/* 2026-08-21 — 위 «번호가 본문을 연다»는 의도는 그대로 두고 문을 여는 방식만 입체로 바꿨다.
   main.css 21번 블록의 3D 리빌은 이 규칙(0,3,0)에 가려 여기까지 못 온다(그게 맞다 —
   여기는 세로가 아니라 «가로로 열리는» 자리다). 대신 같은 뜻을 rotateY 로 다시 쓴다:
   왼쪽 모서리를 경첩 삼아 열리면서 밀려 들어온다. 감속 요청 시엔 아래 블록이 통째로 없다. */
.gd-about .gd-ab-no.gd-reveal{transform:translateX(-16px)}
.gd-about .gd-ab-no.gd-reveal.is-in{transform:none}
@media (prefers-reduced-motion:no-preference){
  .gd-about .gd-ab-no.gd-reveal{
    transform:perspective(900px) translate3d(-16px,0,-60px) rotateY(calc(22deg * var(--gd-3d,1)));
    transform-origin:0% 50%;
  }
  .gd-about .gd-ab-no.gd-reveal.is-in{transform:none}
}

/* 행이 여럿인 목록(Signature 8 · 약력 7 · Brand Story 3)을 한 덩어리로 띄우면
   화면 절반이 한꺼번에 나타난다. main.css 의 .gd-stagger 는 4개까지라 여기서 8까지 잇는다. */
.gd-about .gd-ab-stagger>*:nth-child(2){transition-delay:.06s}
.gd-about .gd-ab-stagger>*:nth-child(3){transition-delay:.12s}
.gd-about .gd-ab-stagger>*:nth-child(4){transition-delay:.18s}
.gd-about .gd-ab-stagger>*:nth-child(5){transition-delay:.24s}
.gd-about .gd-ab-stagger>*:nth-child(6){transition-delay:.30s}
.gd-about .gd-ab-stagger>*:nth-child(7){transition-delay:.36s}
.gd-about .gd-ab-stagger>*:nth-child(8){transition-delay:.42s}
/* 인덱스가 이미 섹션을 세고 있으므로 제목 위 여백은 번호 캡높이에 맞춰 0 이다 */
.gd-about .gd-ab-body>.gd-shead:first-child,
.gd-about .gd-ab-body>.gd-skicker:first-child{margin-top:0}

/* --- 04. LAP — 이미지 위에 걸치는 텍스트 카드 ----------------------------- */
/* §1 인트로 전용. 12칸 그리드에 사진과 카드를 같은 행에 겹쳐 놓는다. */
.gd-about .gd-ab-lap{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:center;
}
.gd-about .gd-ab-lap figure{
  grid-area:1/4/2/13;margin:0;border-radius:var(--gd-r);overflow:hidden;background:#efe9e0;
  aspect-ratio:960/545;
}
.gd-about .gd-ab-lap figure picture{display:block;width:100%;height:100%}
.gd-about .gd-ab-lap figure img{width:100%;height:100%;object-fit:cover}
.gd-about .gd-ab-lap-t{
  grid-area:1/1/2/8;position:relative;z-index:1;
  background:#fff;border-radius:var(--gd-r);
  padding:clamp(22px,2.6vw,50px) clamp(22px,2.6vw,50px) clamp(24px,2.8vw,54px);
  box-shadow:0 26px 60px rgba(24,18,10,.13);
}
.gd-about .gd-ab-lap-t .gd-sbody{margin-top:clamp(14px,1.35vw,26px)}

/* --- 05. DARK — 유일한 악센트(원장 밴드) --------------------------------- */
/* 페이지에서 어두운 자리는 여기 하나뿐이다(서브페이지 디자인 규칙: 악센트 1개).
   시술 페이지의 .gd-prs 는 화면 전체를 먹는 밴드지만, 여기서는 인덱스가 계속
   옆에 붙어 있어야 하므로 본문 컬럼 안의 카드로 만들고 오른쪽만 화면 끝까지
   빼낸다. --gd-bleed 는 sub.css 가 정의한 '콘텐츠 우측선 → 화면 끝' 거리다. */
.gd-about .gd-ab-dark{
  position:relative;overflow:hidden;
  margin-right:calc(-1 * var(--gd-bleed));
  background:var(--gd-deep);color:#fff;
  border-radius:var(--gd-r) 0 0 var(--gd-r);
  display:grid;align-items:end;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(190px,23%,330px));
  column-gap:clamp(18px,2.6vw,50px);
  padding:clamp(34px,4.2vw,80px) clamp(28px,3.6vw,70px) 0 clamp(26px,3.1vw,60px);
}
/* .gd-prs 의 비네트를 같은 값으로 가져온다 — 같은 인물 사진을 쓰므로 배경 계조가
   맞아야 사진의 사각 테두리가 덜 드러난다. */
.gd-about .gd-ab-dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 44% 46%,rgba(38,58,82,.44) 0%,rgba(10,17,24,0) 100%);
}
.gd-about .gd-ab-dark>*{position:relative;z-index:1}
.gd-about .gd-ab-dark-body{padding-bottom:clamp(34px,4.2vw,80px)}
.gd-about .gd-ab-dark-h{
  font-size:clamp(20px,2.19vw,42px);font-weight:700;line-height:1.45;
  letter-spacing:-.028em;color:#fff;
}
.gd-about .gd-ab-dark-h i{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:1.3em;line-height:.9;letter-spacing:0;color:var(--gd-hero-italic);
}
.gd-about .gd-ab-dark .gd-ab-mark{
  font-family:var(--gd-serif);font-weight:400;font-style:normal;line-height:1;
  font-size:clamp(24px,2.4vw,46px);letter-spacing:.005em;color:#fff;
}
.gd-about .gd-ab-dark .gd-ab-mark i{font-style:italic;color:var(--gd-hero-italic)}
.gd-about .gd-ab-dark .gd-ab-mark+.gd-ab-dark-h{margin-top:clamp(18px,2.1vw,40px)}
.gd-about .gd-ab-dark-lead{
  margin-top:clamp(16px,1.7vw,32px);
  font-size:clamp(13.5px,1.05vw,20px);line-height:1.62;letter-spacing:-.025em;color:#a8adb2;
}
/* 서명 두 줄 — 본문보다 밝게 두면 리드와 구분이 안 된다(#0a1118 대비 6.4:1) */
.gd-about .gd-ab-sign{
  margin-top:clamp(22px,2.4vw,46px);padding-top:clamp(14px,1.35vw,26px);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(12px,.83vw,16px);line-height:1.7;letter-spacing:.01em;color:#8f959b;
}
.gd-about .gd-ab-sign b{display:block;font-weight:700;color:#e7e3dd}
/* 인물은 카드 바닥에 붙는다. 누끼가 아니라 어두운 배경의 사각 사진이라
   위쪽만 마스크로 흘려 상자의 윗변을 지운다(sub.css .gd-prs-media 와 같은 처리). */
.gd-about .gd-ab-dark figure{
  margin:0;align-self:end;aspect-ratio:620/760;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);
          mask-image:linear-gradient(180deg,transparent 0,#000 13%);
}
.gd-about .gd-ab-dark figure picture{display:block;width:100%;height:100%}
.gd-about .gd-ab-dark figure img{
  width:100%;height:100%;object-fit:cover;object-position:50% 8%;
  filter:contrast(1.06) brightness(1.03);
}

/* --- 05b. FIGBG — 사진이 바닥, 정보가 그 위 레이어 (06 의료진) ------------ */
/* 05 다크 카드가 '딥네이비 면 + 인물'이라면 여기는 **사진 자체가 바닥**이다.
   drsong-pc.jpg(1920x920)는 인물이 오른쪽 45% 에만 있어 왼쪽이 통째로 비어 있고,
   그 빈 자리에 패널을 얹는다. 05 와 같은 이유로 오른쪽만 화면 끝까지 뺀다. */
.gd-about .gd-ab-figbg{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(20px,2.4vw,46px);
  margin-right:calc(-1 * var(--gd-bleed));
  border-radius:var(--gd-r) 0 0 var(--gd-r);
  background:var(--gd-deep);color:#fff;
  padding:clamp(30px,3.6vw,68px) clamp(28px,3.6vw,70px) clamp(34px,4.2vw,76px) clamp(26px,3.1vw,60px);
}
.gd-about .gd-ab-figbg-bg{position:absolute;inset:0;z-index:-2;display:block}
/* 인물 얼굴 중심이 원본 x 64% · y 32% 다. 패널이 왼쪽을 먹으므로 인물을 더 오른쪽으로
   밀어 두 층이 겹치지 않게 한다. */
.gd-about .gd-ab-figbg-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 26%}
/* 원본 왼쪽이 이미 거의 검지만, 인물 쪽으로 갈수록 밝아진다. 패널 글자가 어떤
   폭에서도 같은 대비를 갖도록 좌→우 스크림을 한 겹 더 깐다. */
.gd-about .gd-ab-figbg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,12,17,.86) 0%,rgba(8,12,17,.74) 40%,rgba(8,12,17,.24) 66%,rgba(8,12,17,0) 100%);
}
/* 패널 폭은 고정 px 이 아니라 카드 폭 대비 % 다 — 카드 폭이 뷰포트에 따라
   1012~1234 로 변하는데 600px 로 못 박으면 좁은 쪽에서 인물 얼굴까지 덮는다. */
.gd-about .gd-ab-figbg-panel{position:relative;max-width:min(100%,56%)}
/* 밝은 면을 전제로 잡힌 공용 타이포·버튼을 이 패널 안에서만 어두운 면용으로 바꾼다 */
.gd-about .gd-ab-figbg-panel .gd-skicker{color:#c9a468}
.gd-about .gd-ab-figbg-panel .gd-shead{color:#fff}
.gd-about .gd-ab-figbg-panel .gd-shead i{color:var(--gd-hero-italic)}
.gd-about .gd-ab-figbg-panel .gd-sbody{color:#c2c6ca}
/* 크림 지면에서는 행마다 밑줄이 리듬을 만들지만, 사진 위에서는 그 선이
   인물 얼굴을 가로질러 지나간다(1440 캡처 실측). 선을 걷고 번호와 간격만 남긴다.
   덤으로 패널이 175px 짧아져 카드 비율이 원본(2.09:1)에 가까워지고,
   그만큼 인물이 덜 확대된다 — cover 는 상자가 납작할수록 덜 자른다. */
.gd-about .gd-ab-figbg-panel .gd-ab-cred{margin-top:clamp(18px,1.9vw,36px);border-top:0}
.gd-about .gd-ab-figbg-panel .gd-ab-cred li{
  border-bottom:0;padding:clamp(4px,.42vw,8px) 0;
  column-gap:clamp(10px,1.15vw,22px);align-items:start;
}
.gd-about .gd-ab-figbg-panel .gd-ab-cred b{font-size:clamp(12px,.83vw,16px);line-height:1.7}
.gd-about .gd-ab-figbg-panel .gd-ab-cred span{font-size:clamp(12.5px,.89vw,17px);line-height:1.6}
.gd-about .gd-ab-figbg-panel .gd-ab-cred b{color:var(--gd-hero-italic)}
.gd-about .gd-ab-figbg-panel .gd-ab-cred span{color:#dcdfe2}
.gd-about .gd-ab-figbg-panel .gd-btn--line{border-color:rgba(255,255,255,.72);color:#fff}
.gd-about .gd-ab-figbg-panel .gd-btn--line:hover{background:#fff;color:var(--gd-ink)}

/* --- 06. DEFS — 하이라인 정의 목록(Brand Story) --------------------------- */
/* 원문 원형 PNG 3장에 구워져 있던 글자를 옮긴 자리다. 알약 카드 3장(.gd-checks)
   대신 라틴 제목을 왼쪽에 세운 헤어라인 행으로 받는다 — 카드가 아니라 '항목'이라
   이쪽이 원문의 나열에 가깝다. */
.gd-about .gd-ab-defs{margin-top:clamp(26px,3vw,58px);border-top:1px solid var(--gd-ink)}
.gd-about .gd-ab-defs>div{
  display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);
  column-gap:clamp(18px,2.6vw,50px);align-items:start;
  padding:clamp(20px,2.4vw,46px) 0;border-bottom:1px solid var(--gd-hair);
}
.gd-about .gd-ab-defs dt{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.19vw,42px);line-height:1.12;letter-spacing:0;color:var(--gd-brown);
}
.gd-about .gd-ab-defs dd{
  margin:0;font-size:clamp(13px,.89vw,17px);line-height:1.62;color:#4a4741;
}

/* --- 07. ZIG — Signature 지그재그 2단 (4-4clinic.com #inc06 참고) ---------- */
/* 참고본 실측: item 은 flex + gap 28, 컬럼 max 490, 썸네일 490x534(=0.917),
   2n 은 row-reverse + margin-top -90, 3·5 는 -45, 글 블록 padding-top 이
   100 / 165 / 170 로 저마다 달라 줄이 맞지 않는다. 그 어긋남이 이 배치의 핵심이라
   값을 그대로 옮기되, 우리 콘텐츠 폭(1440 에서 972)에 맞춰 vw 로 환산했다
   (100/1440 = 6.94vw 식 — 1440 에서 참고본 값과 같아지고 그 위로는 고정된다). */
.gd-about .gd-ab-zig{margin-top:clamp(22px,3.4vw,66px)}
.gd-about .gd-ab-zig>li{
  position:relative;display:flex;justify-content:center;
  gap:clamp(14px,1.94vw,28px);
}
.gd-about .gd-ab-zig>li>*{flex:1;min-width:0;max-width:490px}
.gd-about .gd-ab-zig-thumb{
  display:block;width:100%;aspect-ratio:490/534;
  border-radius:var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-about .gd-ab-zig-thumb picture{display:block;width:100%;height:100%}
.gd-about .gd-ab-zig-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--gd-ease)}
.gd-about .gd-ab-zig>li:hover .gd-ab-zig-thumb img,
.gd-about .gd-ab-zig>li:focus-within .gd-ab-zig-thumb img{transform:scale(1.045)}

.gd-about .gd-ab-zig-txt{padding-inline:clamp(0px,3.47vw,50px)}
/* 참고본의 원형 번호 배지. 이 사이트에서 유일하게 색을 채운 배지라 브라운을 쓴다 */
.gd-about .gd-ab-zig-no{
  display:flex;align-items:center;justify-content:center;
  width:clamp(32px,2.78vw,40px);height:clamp(32px,2.78vw,40px);border-radius:50%;
  background:var(--gd-brown);color:#fff;
  font-family:var(--gd-serif);font-style:italic;font-size:clamp(11px,.9vw,14px);
  letter-spacing:.02em;line-height:1;
}
/* 참고본은 이 자리에 설명 한 문단이 더 있어 글 블록이 사진과 균형을 이룬다.
   우리는 시술명 한 줄뿐이라 같은 크기(25px)로 두면 495px 짜리 사진 옆이 텅 빈다.
   문안을 지어 채울 수는 없으므로 **있는 글자를 키워** 블록을 세운다. */
.gd-about .gd-ab-zig-nm{
  margin:clamp(16px,2.43vw,35px) 0 clamp(14px,1.94vw,28px);
  font-size:clamp(19px,2.64vw,38px);font-weight:700;line-height:1.34;letter-spacing:-.035em;
  color:var(--gd-ink);
}
/* 링크 하나가 카드 전체를 덮는다 — li 가 position:relative 다 */
.gd-about .gd-ab-zig-nm a{transition:color .3s var(--gd-ease)}
.gd-about .gd-ab-zig-nm a::after{content:"";position:absolute;inset:0;z-index:2}
.gd-about .gd-ab-zig>li:hover .gd-ab-zig-nm a{color:var(--gd-brown)}
/* 참고본의 link-view — 점 하나 + 오른쪽 정렬 */
/* 이름과 링크 사이 헤어라인 — 설명 문단이 빠진 자리를 선 하나로 대신 잡아 준다 */
.gd-about .gd-ab-zig-more{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding-top:clamp(14px,1.66vw,24px);border-top:1px solid var(--gd-line);
  font-size:clamp(12px,.83vw,15px);letter-spacing:.01em;color:var(--gd-muted);
  transition:color .3s var(--gd-ease);
}
.gd-about .gd-ab-zig-more::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gd-brown);
  margin-right:2px;transition:transform .35s var(--gd-ease);
}
.gd-about .gd-ab-zig-more svg{width:22px;height:8px;overflow:visible;transition:transform .35s var(--gd-ease)}
.gd-about .gd-ab-zig-more svg path{stroke:currentColor;stroke-width:1.2;fill:none}
.gd-about .gd-ab-zig>li:hover .gd-ab-zig-more{color:var(--gd-ink)}
.gd-about .gd-ab-zig>li:hover .gd-ab-zig-more svg{transform:translateX(5px)}
.gd-about .gd-ab-zig>li:hover .gd-ab-zig-more::before{transform:scale(1.5)}

/* --- 08. SPLIT — 좌 본문 / 우 이미지(우측 블리드) ------------------------- */
.gd-about .gd-ab-split{
  margin-top:clamp(24px,2.8vw,54px);
  display:grid;align-items:start;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  column-gap:clamp(20px,3vw,58px);
}
.gd-about .gd-ab-split figure{
  margin:0;margin-right:calc(-1 * var(--gd-bleed));
  border-radius:var(--gd-r) 0 0 var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-about .gd-ab-split figure picture{display:block;width:100%}
.gd-about .gd-ab-split figure img{width:100%;height:auto}
/* 이미지가 먼저 오는 판(07 스파) — 앞뒤가 전부 오른쪽으로 빠져나가므로
   여기 한 자리만 뒤집어 리듬을 끊는다.
   ⚠ 왼쪽으로는 블리드하지 않는다. 본문 컬럼 왼쪽에는 인덱스 레일과 번호 거터가
     있어서 --gd-bleed 만큼 당겨도 화면 끝에 못 닿고 20~40px 만 삐져나온다
     (1440 캡처 실측). 어긋나 보이기만 하므로 본문 좌측선에 맞춰 세운다. */
.gd-about .gd-ab-split--rev{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
.gd-about .gd-ab-split--rev figure{margin-right:0;border-radius:var(--gd-r)}
.gd-about .gd-ab-split .gd-sbody{margin-top:0}
.gd-about .gd-ab-split .gd-sbody+.gd-sbody,
.gd-about .gd-ab-split .gd-actions{margin-top:clamp(20px,2.2vw,42px)}

/* --- 09. CRED — 번호 약력 ------------------------------------------------- */
/* sub.css 의 .gd-numlist 는 좌측 컬럼이 좁은 2단 배치를 전제로 한 값이라
   한 컬럼 지면에서는 번호가 붕 뜬다. 여기 전용으로 다시 잡는다. */
.gd-about .gd-ab-cred{margin-top:clamp(24px,2.8vw,54px);border-top:1px solid var(--gd-ink)}
.gd-about .gd-ab-cred li{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  column-gap:clamp(14px,1.6vw,30px);
  padding:clamp(11px,1.15vw,22px) 0;border-bottom:1px solid var(--gd-hair);
}
.gd-about .gd-ab-cred b{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:clamp(14px,1.05vw,20px);letter-spacing:.02em;color:var(--gd-brown);
}
.gd-about .gd-ab-cred span{font-size:clamp(13px,.94vw,18px);line-height:1.5;letter-spacing:-.02em}

/* --- 10. WIDE — 우측 블리드 대형 이미지 ---------------------------------- */
.gd-about .gd-ab-wide{
  margin:clamp(24px,2.8vw,54px) calc(-1 * var(--gd-bleed)) 0 0;
  border-radius:var(--gd-r) 0 0 var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-about .gd-ab-wide picture{display:block;width:100%}
.gd-about .gd-ab-wide img{width:100%;height:auto}

/* Contact 는 시술 페이지와 같은 판을 그대로 쓴다(사이트 공통 마감).
   본문이 크림이라 흰 배경으로 갈리도록 위쪽 선만 지운다. */
.gd-about #contact{background:#fff}

/* --- 11. RESPONSIVE ------------------------------------------------------ */
/* 프리뷰 스테이지는 마우스가 있는 폭에서만 켠다. 아래 1024 이하에서는
   썸네일이 각 행 안으로 되돌아간다. */
@media (min-width:1025px){
  /* 참고본의 어긋남 값. first-child / 2n / 2n+3 셋으로 8항목을 모두 덮는다
     (2n = 2·4·6·8, 2n+3 = 3·5·7). */
  .gd-about .gd-ab-zig>li:first-child .gd-ab-zig-txt{padding-top:clamp(40px,6.94vw,100px)}
  .gd-about .gd-ab-zig>li:nth-child(2n){
    flex-direction:row-reverse;
    margin-top:calc(-1 * clamp(40px,6.25vw,90px));
  }
  .gd-about .gd-ab-zig>li:nth-child(2n) .gd-ab-zig-txt{padding-top:clamp(60px,11.46vw,165px)}
  .gd-about .gd-ab-zig>li:nth-child(2n+3){margin-top:calc(-1 * clamp(20px,3.13vw,45px))}
  .gd-about .gd-ab-zig>li:nth-child(2n+3) .gd-ab-zig-txt{padding-top:clamp(60px,11.81vw,170px)}
}

@media (max-width:1024px){
  /* 인덱스는 스티키 레일에서 가로 스크롤 칩 줄로 바뀐다. 세로로 두면 8줄이
     본문 위에 그대로 쌓여 첫 화면이 목차만 남는다. */
  .gd-about .gd-ab-doc-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,3vw,34px)}
  /* 고정 헤더는 스크롤하면 66px 로 줄어든다(.gd-header.is-solid). 칩 줄이 붙는
     자리는 --gd-hdr(70px)이 아니라 그 66px 이다 — 4px 이 벌어지면 그 틈으로
     본문이 지나간다. */
  .gd-about .gd-ab-index{
    position:sticky;top:66px;z-index:5;
    margin-inline:calc(-1 * var(--gd-gut));padding:10px var(--gd-gut);
    background:var(--gd-cream);border-bottom:1px solid var(--gd-line);
  }
  .gd-about .gd-ab-index-t{display:none}
  .gd-about .gd-ab-index ol{
    margin-top:0;border-left:0;display:flex;gap:6px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .gd-about .gd-ab-index ol::-webkit-scrollbar{display:none}
  .gd-about .gd-ab-index li{flex:0 0 auto}
  .gd-about .gd-ab-index a{
    padding:6px 13px;border:1px solid var(--gd-line);border-radius:999px;
    white-space:nowrap;background:#fff;
  }
  .gd-about .gd-ab-index a::before{display:none}
  .gd-about .gd-ab-index a[aria-current]{border-color:var(--gd-brown);color:var(--gd-brown)}
  .gd-about .gd-ab-index a[aria-current] b{color:inherit}
  .gd-about .gd-ab-index .gd-btn{display:none}

  /* 목차 칩을 누르면 html 의 scroll-padding-top(86px)만큼만 내려온다. 그런데
     이 폭에서는 헤더(66) 위에 칩 줄(52)이 더 붙어 있어 제목이 칩 줄 뒤로 숨는다.
     도착 지점을 요소 쪽에서 더 내린다. */
  .gd-about .gd-ab-art{
    grid-template-columns:minmax(0,1fr);row-gap:clamp(10px,1.5vw,18px);
    scroll-margin-top:132px;
  }
  .gd-about .gd-ab-no{grid-column:1}
  .gd-about .gd-ab-body{grid-column:1}

  .gd-about .gd-ab-wide{margin-right:calc(-1 * var(--gd-gut))}

  /* 어긋남(min-width:1025px 블록)은 이미 꺼졌다. 두 단이 아직 나란하므로
     세로 가운데로 맞춰 세우기만 한다 — 참고본도 1024 에서 같은 처리를 한다. */
  .gd-about .gd-ab-zig>li{align-items:center}
  .gd-about .gd-ab-zig-txt{padding-inline:clamp(0px,1.5vw,15px)}
}

@media (max-width:768px){
  /* 아래 세 덩어리는 1024 가 아니라 여기서 접는다. 1024 에서는 인덱스가
     가로 칩 줄로 바뀌면서 본문이 화면 폭을 다 쓰기 때문에 2단이 오히려 여유롭다
     (1024 캡처 실측: 접었더니 다크 카드 좌우가 텅 비었다). */
  /* 겹침은 좁은 폭에서 카드가 사진을 거의 다 덮는다 → 위아래로 되돌린다 */
  .gd-about .gd-ab-lap{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,2.4vw,26px)}
  .gd-about .gd-ab-lap figure{grid-area:auto}
  .gd-about .gd-ab-lap-t{grid-area:auto;padding:0;background:none;box-shadow:none;border-radius:0}

  .gd-about .gd-ab-dark{
    grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,3vw,30px);
    margin-right:calc(-1 * var(--gd-gut));padding-inline:clamp(22px,4vw,34px);
  }
  .gd-about .gd-ab-dark-body{padding-bottom:0}
  .gd-about .gd-ab-dark figure{width:min(100%,420px);margin-inline:auto;aspect-ratio:620/700}  /* 420 은 sub.css .gd-prs-media 모바일 판과 같은 값 */

  /* 390 에서는 겹치기가 성립하지 않는다. 카드가 370x780 이라 세로로 길어서 cover 가
     인물을 1.45배로 키우고, 그러면 얼굴이 카드 한가운데(y 260~410)로 와서 약력 7줄과
     정면으로 부딪힌다(390 캡처 실측). 얼굴을 비켜 가려면 위쪽 여백이 420px 이나 필요해
     사진의 3분의 2가 빈 채로 남는다.
     그래서 사진을 위쪽 밴드로 내리고, 아래쪽을 마스크로 흘려 카드 바닥색(--gd-deep)에
     그대로 이어 붙인다 — 쌓여 있지만 여전히 사진 한 장 위에 얹힌 것처럼 읽힌다. */
  .gd-about .gd-ab-figbg{
    margin-right:calc(-1 * var(--gd-gut));
    padding:0 clamp(22px,4vw,34px) clamp(30px,5vw,42px);
  }
  /* 밴드는 가로다 — 이 폭에서는 아직 가로 원본(1920x920)을 쓴다.
     아래 480 블록에서만 세로 원본으로 갈아끼우며 비율도 함께 바꾼다. */
  .gd-about .gd-ab-figbg-bg{
    position:static;width:100%;aspect-ratio:16/10;
    margin-inline:calc(-1 * clamp(22px,4vw,34px));
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 99%);
            mask-image:linear-gradient(180deg,#000 58%,transparent 99%);
  }
  .gd-about .gd-ab-figbg-bg img{object-position:78% 22%}
  /* 좌→우 스크림은 겹칠 때만 필요하다 */
  .gd-about .gd-ab-figbg::before{display:none}
  .gd-about .gd-ab-figbg-panel{max-width:none;margin-top:calc(-1 * clamp(26px,7vw,44px))}

  .gd-about .gd-ab-split,
  .gd-about .gd-ab-split--rev{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,2.6vw,30px)}
  .gd-about .gd-ab-split figure{margin-right:calc(-1 * var(--gd-gut))}

  /* 본문 <br> 은 1920 기준으로 끊은 줄바꿈이라 좁은 폭에서 누더기가 된다
     (sub.css 의 .gd-sbody br 과 같은 처리).
     ⚠ 여기서 풀 수 있는 건 **<br> 뒤에 공백이 있는 문장뿐**이다. 원문 축자라
       줄바꿈 자리의 공백 유무가 문장마다 다르다 — 02 원장 리드와 03 Brand Story
       본문은 「…끝없는 투자<br>송상훈…」처럼 공백이 없어서, 풀면 낱말이
       「투자송상훈」으로 붙는다(390px 캡처에서 실제로 그랬다). 그 둘은 원문
       줄바꿈을 그대로 둔다 — 개편 전 판(.gd-prs-lead / .gd-check-s)도 같았다. */
  .gd-about .gd-ab-hero-lead br{display:none}
  .gd-about .gd-ab-hero{min-height:min(78vh,620px)}
  /* 정지 버튼이 히어로 CTA 위에 올라앉는다(390 실측: 「Signature 보기」와 겹침).
     좁은 폭에서는 카피가 아래로 내려오므로 버튼을 헤더 바로 밑 우측으로 올린다. */
  .gd-about .gd-ab-hero .gd-motion{top:calc(var(--gd-hdr) + 12px);bottom:auto}
  .gd-about .gd-ab-hero-bg::after{
    background:linear-gradient(180deg,rgba(6,10,15,.62) 0%,rgba(6,10,15,.2) 38%,rgba(6,10,15,.86) 100%);
  }
  .gd-about .gd-ab-defs>div{grid-template-columns:minmax(0,1fr);row-gap:10px}
  /* 두 단이 서지 않는 폭 — 사진 위, 글 아래, 가운데 정렬(참고본 768 과 같다) */
  .gd-about .gd-ab-zig{display:flex;flex-direction:column;gap:clamp(26px,5vw,40px)}
  .gd-about .gd-ab-zig>li{flex-direction:column;align-items:center;gap:0}
  .gd-about .gd-ab-zig>li>*{max-width:none;width:100%}
  .gd-about .gd-ab-zig-thumb{width:min(100%,85%);aspect-ratio:490/470}
  .gd-about .gd-ab-zig-txt{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(14px,3vw,20px) 0 0;
  }
  .gd-about .gd-ab-zig-nm{margin:clamp(10px,2.4vw,14px) 0 clamp(8px,1.8vw,12px)}
  .gd-about .gd-ab-zig-more{justify-content:center}
  .gd-about .gd-ab-cred li{column-gap:12px}
}

@media (max-width:480px){
  /* <source media="(max-width:480px)"> 가 세로 원본(360x540)으로 갈리는 폭.
     비율과 초점도 세로 판에 맞춰 함께 바꾼다 — 안 바꾸면 얼굴이 잘린다. */
  .gd-about .gd-ab-figbg-bg{aspect-ratio:360/450}
  .gd-about .gd-ab-figbg-bg img{object-position:50% 16%}

  .gd-about .gd-ab-hero .gd-actions .gd-btn{flex:1 1 auto}
  .gd-about .gd-ab-zig-thumb{width:100%;aspect-ratio:490/420}
}


@media print{
  .gd-about .gd-ab-index{display:none}
}