@charset "utf-8";
/* ==========================================================================
   골든디아망 메인 — 신규 디자인 (pc_메인.png / m_메인.png 기준)
   이 파일은 index.html 전용이다. 1_1.html 은 기존 style.css 를 그대로 쓴다.

   블록
   01 TOKENS      02 BASE        03 A11Y        04 LAYOUT     05 TYPO
   06 BUTTONS     07 HEADER      08 DRAWER      09 HERO       10 SURGERY
   11 SIGNATURE   12 SKINSPA     13 BRAND       14 DRSONG     15 SHORTS
   16 TOUR        17 CONTACT     18 FOOTER      19 RESPONSIVE 20 MOTION
   ========================================================================== */

/* --- 01. TOKENS ---------------------------------------------------------- */
:root{
  /* 색 — 시안 PNG 픽셀 실측값 */
  --gd-ink:#0f1420;
  --gd-ink-2:#2b3140;
  --gd-muted:#6b7280;
  --gd-brown:#1e4fd8;          /* 이탤릭 타이틀·라벨 액센트 */
  --gd-brown-dp:#173fae;
  --gd-cream:#f5f7fb;
  --gd-cream-2:#eef2f8;
  --gd-beige:#e9eef6;
  --gd-navy:#0b1220;
  --gd-icon-bg:#eaf1ff;
  --gd-icon-line:#4c86f0;
  --gd-line:#dde3ec;
  --gd-hero-italic:#a9d8ff;

  /* 골드 그라디언트 (히어로 CTA · 빠른상담) */
  --gd-gold:linear-gradient(100deg,#6fb4ff 0%,#4f97f5 18%,#2f6fe8 55%,#1a46c2 100%);

  /* 타이포 */
  --gd-ff:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic","맑은 고딕",sans-serif;
  --gd-serif:"Playfair Display","Times New Roman",serif;

  /* 레이아웃 */
  --gd-wrap:1440px;
  --gd-gut:clamp(20px,4vw,40px);
  --gd-pad:clamp(72px,7.8vw,150px);   /* 시안 150px @1920 */
  --gd-hdr:88px;   /* 시안: 로고·Menu 세로 중심 44.5px @1920 */

  /* 모션 */
  --gd-dur:.5s;
  --gd-ease:cubic-bezier(.22,.61,.36,1);
}

/* --- 02. BASE ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* 고정 헤더 높이만큼 앵커 도착 지점을 내린다(#signature 등) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--gd-hdr) + 16px)}
body{
  margin:0;background:#fff;color:var(--gd-ink);
  font-family:var(--gd-ff);font-size:16px;line-height:1.7;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* 한글은 어절 단위로 끊어야 한다. 없으면 '메디컬'이 '메디/컬'로 잘린다. */
  word-break:keep-all;overflow-wrap:break-word;
}
img,picture,video,svg{display:block;max-width:100%}
img,video{height:auto}
/* <picture>는 인라인 래퍼라 자식 img 의 height:100% 가 풀린다.
   비율 고정 박스 안에서는 picture 가 박스를 그대로 채우게 한다. */
.gd-offset figure picture,.gd-song-portrait picture,.gd-short picture,
.gd-tour-thumbs picture,.gd-map picture{display:block;width:100%;height:100%}
.gd-offset figure picture>img,.gd-song-portrait picture>img,.gd-short picture>img,
.gd-tour-thumbs picture>img{width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
table{border-collapse:collapse}
::selection{background:#6fb4ff;color:#0f1420}

/* 포커스 링 — 밝은 배경/어두운 배경 양쪽에서 3:1 이상 */
:focus-visible{outline:3px solid #1a46c2;outline-offset:3px;border-radius:2px}
.gd-sec--dark :focus-visible,.gd-hero :focus-visible,.gd-footer :focus-visible,
.gd-header:not(.is-solid) :focus-visible{outline-color:#8ec5ff}

/* --- 03. A11Y ------------------------------------------------------------ */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.gd-skip{
  position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-200%);
  padding:12px 20px;background:#fff;color:#0f1420;border:2px solid #1a46c2;border-radius:8px;
  font-weight:700;transition:transform .18s;
}
.gd-skip:focus{transform:none}
main:focus{outline:none}

/* 스크롤 진행바 */
.gd-progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;pointer-events:none}
.gd-progress>i{display:block;height:100%;width:0;background:var(--gd-gold)}

/* --- 04. LAYOUT ---------------------------------------------------------- */
.gd-sec{position:relative;padding:var(--gd-pad) 0}
.gd-sec--cream{background:var(--gd-cream)}
.gd-sec--cream2{background:linear-gradient(180deg,#fff 0%,var(--gd-cream) 22%,var(--gd-cream-2) 100%)}
.gd-sec--beige{background:var(--gd-beige)}
.gd-sec--dark{background:var(--gd-navy);color:#fff}
/* 시안 콘텐츠 폭은 1920 기준 240~1680 = 정확히 1440.
   max-width 에 거터를 더해야 콘텐츠가 1440 이 된다(더하지 않으면 1360 으로 좁아진다). */
.gd-wrap{width:100%;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;padding-inline:var(--gd-gut)}

/* 시안은 모든 섹션 경계에 150px 를 쓰지 않는다. 실측:
   Surgery 이미지 하단 → Signature 타이틀 = 16px,  DrSong 사진 하단 → Shorts 타이틀 = 167px.
   데스크톱에서만 적용하고 모바일은 기본 여백을 유지한다. */
@media (min-width:1025px){
  .gd-sec--mb0{padding-bottom:8px}
  .gd-sec--mt0{padding-top:8px}
  .gd-sec--mt-sm{padding-top:17px}
}

/* 스크롤 등장 — JS 없으면 .gd-no-js 규칙이 전부 보이게 만든다 */
.gd-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--gd-ease),transform .8s var(--gd-ease)}
.gd-reveal.is-in{opacity:1;transform:none}
.gd-no-js .gd-reveal{opacity:1;transform:none}
.gd-stagger>*:nth-child(2){transition-delay:.09s}
.gd-stagger>*:nth-child(3){transition-delay:.18s}
.gd-stagger>*:nth-child(4){transition-delay:.27s}

/* --- 05. TYPO ------------------------------------------------------------ */
/* 라틴 디스플레이: "Golden" 로만 + "Surgery" 이탤릭 브라운 */
.gd-disp{
  /* 시안 실측: 1920 에서 61px, 360 에서 40px → 두 점을 잇는 선형식 */
  font-family:var(--gd-serif);font-weight:500;line-height:1.06;
  letter-spacing:-.015em;font-size:clamp(40px,calc(35.3px + 1.35vw),61px);color:var(--gd-ink);
}
.gd-disp i{font-style:italic;color:var(--gd-brown);font-weight:400}
/* 2줄로 쓰이는 대제목. 시안 줄 피치 78px @61px → line-height 1.28 (모바일은 49px @40px = 1.22) */
.gd-disp--lg{font-size:clamp(40px,calc(35.3px + 1.35vw),61px);line-height:1.28}
.gd-disp--center{text-align:center}
.gd-sec--dark .gd-disp{color:#fff}
.gd-sec--dark .gd-disp i{color:var(--gd-hero-italic)}

/* 국문 헤드 */
.gd-head{font-size:clamp(18px,1.65vw,24px);font-weight:700;line-height:1.5;letter-spacing:-.025em;margin-top:18px}
.gd-sec--dark .gd-head{color:#fff}
.gd-sub{margin-top:16px;font-size:clamp(14.5px,1.05vw,16px);line-height:1.5;color:var(--gd-muted)}
.gd-sec--dark .gd-sub{color:#b6bfd0}

/* 본문 */
/* 시안 실측: 본문 줄 피치 24px @16.5px → line-height 1.5 */
.gd-body{font-size:clamp(14px,.81vw,15.6px);line-height:1.54;color:#3d4352}
.gd-head+.gd-body,.gd-sub+.gd-body{margin-top:clamp(20px,2.2vw,34px)}
.gd-body p+p{margin-top:12px}
.gd-body b,.gd-body strong{font-weight:700;color:var(--gd-ink)}
.gd-sec--dark .gd-body{color:#bfc7d6}
.gd-sec--dark .gd-body b{color:#fff}
/* 시안: 본문 안 'Diamant' 만 Playfair 이탤릭 */
.gd-serif-em{font-family:var(--gd-serif);font-style:italic;font-weight:500}

/* 더보기 링크 — 텍스트 + 화살표 */
.gd-more{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--gd-ink);
}
.gd-more svg{width:22px;height:8px;overflow:visible;transition:transform .35s var(--gd-ease)}
.gd-more svg path{stroke:currentColor;stroke-width:1.1;fill:none}
.gd-more:hover svg,.gd-more:focus-visible svg{transform:translateX(7px)}
.gd-sec--dark .gd-more{color:#fff}

/* --- 06. BUTTONS --------------------------------------------------------- */
.gd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 28px;border-radius:999px;
  font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  transition:transform .25s var(--gd-ease),box-shadow .25s var(--gd-ease),background .25s;
}
.gd-btn:hover{transform:translateY(-2px)}

/* 골드 필 — 시안 그대로(흰 텍스트). 시안 대비는 약 2.1:1 로 WCAG 4.5:1 미달.
   접근성을 우선하려면 아래 한 줄로 교체하면 5:1 이상이 된다:
   background:linear-gradient(100deg,#2f6fe8 0%,#1e4fd8 55%,#173fae 100%); */
.gd-btn--gold{background:var(--gd-gold);color:#fff;box-shadow:0 6px 20px rgba(30,79,216,.28)}
.gd-btn--gold:hover{box-shadow:0 10px 26px rgba(30,79,216,.4)}

.gd-btn--ring{border:1.4px solid rgba(255,255,255,.85);color:#fff}
.gd-btn--ring:hover{background:rgba(255,255,255,.12)}
.gd-btn--lg{min-height:44px;padding:0 30px;font-size:15px}

/* --- 06b. LOGO ----------------------------------------------------------- */
/* 시안 실측(1920 헤더 기준): 엠블럼 28 · 간격 14 · 워드마크 캡높이 23(폭 270)
   · 태그라인 캡높이 9(폭 129, 워드마크 아래 13) · 전체 311x44.
   전체 높이 44 를 1em 으로 잡고 전부 비율로 파생시킨다. */
.gd-logo{
  display:inline-flex;align-items:center;gap:.318em;
  font-size:44px;line-height:1;color:currentColor;white-space:nowrap;
}
.gd-logo-gem{width:.820em;height:.560em;flex:none;overflow:visible}
.gd-logo-txt{display:flex;flex-direction:column;align-items:center;gap:.29em}
.gd-logo-nm{
  /* Playfair 가 시안 서체보다 넓어(자연폭 293 vs 시안 270) 자간으로 footprint 를 맞춘다 */
  font-family:var(--gd-serif);font-weight:400;font-size:.747em;line-height:.72;
  letter-spacing:-.050em;text-indent:-.050em;
}
.gd-logo-sub{
  font-family:var(--gd-ff);font-weight:500;font-size:.245em;line-height:.75;
  letter-spacing:.195em;text-indent:.195em;color:inherit;opacity:.82;
}
/* 푸터는 시안에서 태그라인이 좌측 정렬 */
.gd-logo--footer .gd-logo-txt{align-items:flex-start}

/* --- 07. HEADER ---------------------------------------------------------- */
.gd-header{
  position:fixed;inset:0 0 auto;z-index:110;height:var(--gd-hdr);color:#fff;
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,height .35s;
}
.gd-header-in{
  width:100%;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;padding-inline:var(--gd-gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.gd-brand{grid-column:2;justify-self:center;display:block}
.gd-brand .gd-logo{font-size:clamp(30px,2.3vw,44px);transition:color .35s}
/* --- 07b. 언어 스위처 ---------------------------------------------------- */
/* 참고 사이트는 국기 이미지 위젯이지만, 여기는 타이포 기반 디자인이라
   글로브 아이콘 + 언어 코드로 맞췄다(국기는 언어가 아니라 국가를 뜻해 오해 소지도 있다). */
.gd-header-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.4vw,26px)}

/* ── 팝업 ─────────────────────────────────────────────────────────────────────
   마크업은 main.js 가 /popup/list.php 응답으로 만든다. HTML 원문에는 없다 —
   팝업은 예약 시각이 있어서 캐시된 HTML 에 심으면 제때 안 뜬다.
   RTL 을 위해 물리 속성(left/right) 대신 논리 속성을 쓴다. */
.gd-pop-dim{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gd-gut);
  background:rgba(23,26,34,.62);
  opacity:0;transition:opacity .3s var(--gd-ease);
}
.gd-pop-dim.is-on{opacity:1}
.gd-pop{
  position:relative;width:min(420px,100%);max-height:86vh;overflow:auto;
  background:var(--gd-cream);color:var(--gd-ink);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.34);
  transform:translateY(14px);transition:transform .35s var(--gd-ease);
}
.gd-pop-dim.is-on .gd-pop{transform:none}
.gd-pop-img{display:block;width:100%;height:auto;border-radius:18px 18px 0 0}
.gd-pop-in{padding:26px 26px 20px}
.gd-pop-h{margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.gd-pop-b{margin:0;font-size:14.5px;line-height:1.75;color:var(--gd-ink-2);white-space:pre-line}
.gd-pop-cta{margin-top:18px}
.gd-pop-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 26px 16px;border-top:1px solid var(--gd-line);margin-top:18px;
  font-size:13px;color:var(--gd-muted);
}
.gd-pop-hide{display:inline-flex;align-items:center;gap:7px;cursor:pointer;min-height:32px}
.gd-pop-close{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 10px;border-radius:999px;
  color:var(--gd-ink);font-weight:600;
}
.gd-pop-close:hover{background:var(--gd-cream-2)}
.gd-pop-x{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;
  width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.86);color:var(--gd-ink);font-size:18px;line-height:1;
}
.gd-pop-x:hover{background:#fff}
@media (max-width:768px){
  .gd-pop{width:100%;max-height:88vh}
  .gd-pop-in{padding:22px 20px 16px}
  .gd-pop-foot{padding:12px 20px 14px}
}
@media (prefers-reduced-motion:reduce){
  .gd-pop-dim,.gd-pop{transition:none}
}

/* 회원 버튼 묶음 */
/* #contact 의 두 번째 버튼(상담 문의) — render.php 가 카카오 버튼 옆에 넣는다 */
.gd-inq-btn{margin-inline-start:10px}
@media (max-width:520px){ .gd-inq-btn{margin-inline-start:0;margin-block-start:10px} }

/* 푸터 표기값(의료광고 심의번호 등) — render.php 가 사업자정보 줄 뒤에 넣는다 */
.gd-biz-notice{margin-block-start:4px;opacity:.78}

/* 봇 거르기용 칸 — 화면에서 완전히 빼되 display:none 은 피한다(일부 봇이 그걸 보고 건너뛴다) */
.gd-mb-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gd-mb-opt{font-weight:400;opacity:.6}

/* 가입 폼의 개인정보 동의 안내 — 수집 항목을 폼 안에서 바로 밝힌다 */
.gd-mb-agree-note{
  margin:6px 0 0;font-size:12.5px;line-height:1.6;opacity:.72;
}
.gd-mb-agree-note a{text-decoration:underline;text-underline-offset:2px}

.gd-member{display:inline-flex;align-items:center;gap:clamp(10px,1vw,16px)}
.gd-member-btn[hidden]{display:none}

/* 회원 버튼 — 헤더의 언어 스위처 옆. 마크업은 render.php 가 주입한다(73장 HTML 무수정).
   로그인 여부는 gd_m 힌트 쿠키를 보고 main.js 가 라벨을 바꾼다 — 캐시된 HTML 은
   누가 보는지 모르기 때문이다. RTL 을 위해 물리 속성(left/right) 대신 논리 속성을 쓴다. */
.gd-member-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 4px;color:inherit;
  font-size:14px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
}
.gd-member-btn svg{flex:none;width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.gd-member-btn:hover{opacity:.75}
@media (max-width:768px){
  .gd-member-btn{font-size:13.5px;letter-spacing:.06em;padding:0 8px}
  .gd-member-btn .gd-member-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* 2026-09-04 — 좁은 화면에서 「회원가입」을 헤더에서 뺀다.
     이 버튼만 아이콘이 없어서(로그인·로그아웃은 있다) 글자를 숨기면 남는 게 패딩뿐이었다.
     실측 8x44 — 눈에 안 보이는데 탭은 먹는 «유령 버튼»이라 오탭만 났다.
     아이콘을 하나 더 붙이는 안은 자리가 없어서 접었다: 360px 에서 로고 212 + 나머지 126 으로
     헤더가 이미 꽉 찬다. 사람 아이콘 두 개가 나란히 서면 구분도 안 된다.
     막다른 길이 아니다 — 사람 아이콘(로그인)이 가리키는 member-login.html 본문에
     「회원가입」 링크가 로그인 버튼 바로 아래 있다. 모바일에서 흔한 동선이다.
     ⚠ 가입 전환이 중요해 헤더에 꼭 노출해야 한다면, 이 한 줄을 지우는 대신
       render.php gd_i18n_member_btn() 에서 이 버튼에도 아이콘을 주고 로고를 줄여야 한다. */
  .gd-member-btn[data-gd-member-join]{display:none}
}
.gd-lang{position:relative}
.gd-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 4px;color:inherit;
  font-size:14px;font-weight:500;letter-spacing:.04em;
}
.gd-lang-globe{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}
.gd-lang-chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.gd-lang-btn[aria-expanded="true"] .gd-lang-chev{transform:rotate(180deg)}
.gd-lang-cur{font-variant-numeric:tabular-nums}

/* 11개(한국어 + 10개국어)라 단일 컬럼이면 470px 로 너무 길다 → 2열 그리드 */
/* 물리 right:0 을 쓰면 아랍어(dir=rtl)에서 버튼이 화면 왼쪽으로 가는데 메뉴는 계속
   왼쪽으로 펼쳐져 360px 중 149px 이 뷰포트 밖으로 잘렸다(1512·1280·1024 실측).
   논리 속성으로 바꾸면 LTR 은 right:0 그대로고 RTL 만 left:0 이 되어 오른쪽으로 펼쳐진다. */
.gd-lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:5;
  display:grid;grid-template-columns:repeat(2,minmax(172px,1fr));gap:2px;
  padding:6px;border-radius:12px;
  background:#fff;box-shadow:0 14px 38px rgba(10,20,40,.18);
  border:1px solid var(--gd-line);
  /* 태국어·아랍어는 Pretendard 에 없어 OS 폰트로 떨어뜨린다 */
  font-family:var(--gd-ff),"Noto Sans Thai","Noto Sans Arabic",system-ui,sans-serif;
}
.gd-lang-menu[hidden]{display:none}
.gd-lang-menu a{
  display:flex;align-items:center;gap:9px;
  min-height:40px;padding:0 10px;border-radius:8px;
  font-size:13.5px;color:#3a3630;white-space:nowrap;
}
.gd-lang-menu a>span{overflow:hidden;text-overflow:ellipsis}
/* 아랍어는 글자 방향만 뒤집는다(행 전체를 뒤집으면 코드·배지 위치가 흐트러진다) */
.gd-lang-menu a>span[dir="rtl"]{direction:rtl;unicode-bidi:isolate}
.gd-lang-menu a b{
  font-family:var(--gd-serif);font-weight:500;font-size:12.5px;letter-spacing:.06em;
  color:var(--gd-brown);min-width:24px;
}
.gd-lang-menu a:hover,.gd-lang-menu a:focus-visible{background:var(--gd-icon-bg)}
.gd-lang-menu a.is-current{background:var(--gd-icon-bg);font-weight:700;color:var(--gd-ink)}
/* 아직 준비되지 않은 언어는 흐리게 + 준비중 표시 */
.gd-lang-menu a[data-pending]{opacity:.45;pointer-events:none}
.gd-lang-menu a[data-pending]::after{content:"준비중";margin-left:auto;padding-left:6px;font-size:11px;color:var(--gd-muted);flex:none}

/* 미제작 메뉴 — 페이지 완성 전까지 비활성 (요청 ②-①, 확인 D-6).
   href 를 떼어 링크 자체를 없애고 라벨만 남긴다. 페이지가 나오면 href 만 되돌리면 된다. */
.rb-acc-list a[data-pending],.rb-acc-sub a[data-pending],
.gd-footer-list a[data-pending],.gd-footer-bottom a[data-pending]{
  opacity:.45;pointer-events:none;cursor:default;
}
.rb-acc-list a[data-pending]::after,.rb-acc-sub a[data-pending]::after,
.gd-footer-list a[data-pending]::after,.gd-footer-bottom a[data-pending]::after{
  content:"준비중";margin-left:6px;font-size:11px;font-weight:400;color:var(--gd-muted);
}
/* 미제작 메뉴 «숨김» — 2026-09-04 병원 2차 요청 ③-① (26항목 × 73장, HTML 무수정).
   위 ②-① 배지 규칙은 그대로 둔다 — 페이지가 나오면 이 블록만 지우면 배지 상태로 되돌아간다.
   범위를 .rb-acc-* 로 좁힌 이유: 언어 선택기(.gd-lang-menu)에도 data-pending 이 10건 있어
   [data-pending] 전체에 걸면 언어 메뉴에서 언어가 사라진다(요청서 함정 1). */
.rb-acc-list li:has(> a[data-pending]),
.rb-acc-sub li:has(> a[data-pending]){display:none}
/* :has() 폴백 — 2026-09-08 병원 3차 요청 ③-① 로 같은 항목이 «아직 보인다»고 다시 올라왔다.
   위 규칙은 :has() 를 쓰는데 카카오톡·네이버 인앱 브라우저처럼 웹뷰가 낡은 환경에서는
   통째로 무시된다(Chrome<105 · Safari<15.4). 그 환경에서 26항목이 그대로 보였을 것이다.
   li 는 자기 높이가 없고(padding·min-height 가 전부 > a 에 있다) 목록에 gap 도 없어서,
   a 만 숨겨도 li 가 0 높이로 접힌다 — HTML 은 여전히 한 글자도 안 고친다.
   ⚠ 페이지가 나오면 이 두 블록을 «같이» 지운다(위 블록만 지우면 여기가 계속 숨긴다). */
.rb-acc-list>li>a[data-pending],
.rb-acc-sub>li>a[data-pending]{display:none}
/* 흉터클리닉 — 하위 2개(SCP·MCT줄기세포 스카케어)가 모두 숨김 대상이라 빈 목록이 된다.
   그 <ul> 도 함께 숨겨야 빈 여백·세로선이 남지 않는다(요청서 함정 2). */
.rb-acc-list ul.rb-acc-sub:not(:has(> li > a:not([data-pending]))){display:none}

.gd-burger{
  justify-self:end;
  display:inline-flex;align-items:center;gap:12px;
  min-height:44px;padding:0 2px;color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em;
}
.gd-burger{gap:8px}
/* 시안 실측: PC 3줄 32/20/32 · 두께 2 · 간격 6 (모바일 24/15/24 · 간격 4) */
.gd-burger-bars{display:inline-flex;flex-direction:column;gap:6px;width:32px}
.gd-burger-bars>i{display:block;height:2px;background:currentColor;border-radius:1px;transition:width .3s}
.gd-burger-bars>i:nth-child(2){width:62.5%}
/* 시안은 산세리프. 캡높이 12px → font-size 17px */
.gd-burger-label{font-family:var(--gd-ff);font-weight:400;font-size:17px;letter-spacing:0}

/* 스크롤하면 솔리드 — 배경 위에서도 4.5:1 확보 */
.gd-header.is-solid{height:66px;background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(0,0,0,.07);backdrop-filter:blur(10px)}
.gd-header.is-solid .gd-burger{color:#0f1420}
.gd-header.is-solid .gd-brand .gd-logo{color:#0f1420}

/* --- 08. DRAWER (rb-* 마크업을 그대로 재사용) ----------------------------- */
body.rb-drawer-open{overflow:hidden}
.rb-drawer{
  position:fixed;inset:0;z-index:180;background:var(--gd-cream);color:var(--gd-ink);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  /* visibility 를 '보간'시키면 첫 프레임이 아직 hidden 이라 focus() 가 먹지 않는다.
     열 때는 0s 로 즉시 visible, 닫을 때만 트랜지션 뒤에 hidden 이 되도록 지연시킨다. */
  transition:opacity .35s var(--gd-ease),transform .35s var(--gd-ease),visibility 0s .35s;
}
body.rb-drawer-open .rb-drawer{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--gd-ease),transform .35s var(--gd-ease),visibility 0s 0s;
}
.rb-drawer-top{
  position:sticky;top:0;z-index:2;background:var(--gd-cream);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px var(--gd-gut);border-bottom:1px solid var(--gd-line);
}
.gd-logo--drawer{font-size:34px;color:#0f1420}
.rb-drawer-close{min-height:44px;padding:0 14px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.rb-drawer-nav{
  flex:1;width:100%;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;padding:22px var(--gd-gut) 8px;
  columns:1;
}
.rb-acc-top{
  display:flex;align-items:center;gap:10px;
  font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--gd-ink);
}
.rb-acc-en{font-family:var(--gd-serif);font-style:italic;font-size:14px;font-weight:400;color:var(--gd-brown)}
a.rb-acc-top{min-height:52px;padding:4px 0;border-bottom:1px solid var(--gd-line)}
a.rb-acc-top.is-active{color:var(--gd-brown)}
a.rb-acc-top.is-active .rb-acc-en{color:var(--gd-brown-dp)}
.rb-acc{display:block;width:100%;min-height:52px;padding:4px 0;text-align:left;border-bottom:1px solid var(--gd-line)}
.rb-acc .rb-acc-top{width:100%}
.rb-chev{width:18px;height:18px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .3s}
.rb-acc[aria-expanded="true"] .rb-chev{transform:rotate(180deg)}
.rb-acc-panel{max-height:0;overflow:hidden;transition:max-height .38s var(--gd-ease)}
.gd-no-js .rb-acc-panel{max-height:none}
.rb-acc-list{padding:10px 0 18px}
.rb-acc-list>li>a{display:block;min-height:40px;padding:8px 2px;font-size:15px;color:#3d4352}
.rb-acc-list>li>a:hover{color:var(--gd-brown)}
/* href 가 없는 항목 = 하위를 묶는 «그룹 머리글»이다(코성형·레이저 시술 등 7개).
   링크와 똑같이 보이면 눌러 보게 된다. 색을 낮추는 방식은 쓰지 않았다 —
   하위(.rb-acc-sub, #6b7280)보다 흐려져 위아래가 뒤집혀 보인다.
   대신 «머리글답게» 굵기를 올리고 hover 반응과 손가락 커서를 뺀다. 라벨 글자는 그대로다. */
.rb-acc-list>li>a:not([href]):not([data-pending]){font-weight:600;cursor:default}
.rb-acc-list>li>a:not([href]):not([data-pending]):hover{color:#3d4352}
.rb-acc-sub{padding:0 0 6px 14px;border-left:1px solid var(--gd-line);margin:2px 0 8px}
.rb-acc-sub>li>a{display:block;min-height:38px;padding:7px 2px;font-size:14px;color:#6b7280}
.rb-acc-sub>li>a:hover{color:var(--gd-brown)}
.rb-drawer-cta{display:flex;flex-wrap:wrap;gap:10px;padding:8px var(--gd-gut) 16px;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;width:100%}
.rb-drawer-cta .rb-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;
  border-radius:999px;font-size:15px;font-weight:700;
}
.rb-drawer-cta .rb-btn--gold{background:var(--gd-gold);color:#fff}
.rb-drawer-cta .rb-btn--ring{border:1.4px solid #0f1420;color:#0f1420}
.rb-drawer-foot{
  display:flex;flex-wrap:wrap;gap:6px 20px;padding:0 var(--gd-gut) 32px;
  max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;width:100%;font-size:13.5px;color:var(--gd-muted);
}

/* PC 드로어는 3열로 펼쳐 스크롤을 줄인다 */
@media (min-width:1025px){
  .rb-drawer-nav{columns:3;column-gap:56px;padding-top:40px}
  .rb-acc,a.rb-acc-top{break-inside:avoid}
  .rb-acc-panel{max-height:none!important;overflow:visible}
  .rb-chev{display:none}
  .rb-acc{cursor:default;pointer-events:none}
  .rb-acc-list{padding:8px 0 26px}
}

/* --- 09. HERO ------------------------------------------------------------ */
.gd-hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  color:#fff;overflow:hidden;isolation:isolate;
}
.gd-hero-bg{position:absolute;inset:0;z-index:-2}
.gd-hero-bg video,.gd-hero-bg img{width:100%;height:100%;object-fit:cover}
.gd-hero-bg::after{
  content:"";position:absolute;inset:0;
  /* 2026-09-04 — 히어로 문구가 sr-only 에서 화면으로 나오면서 밝은 영상 컷 위에 흰 글자가
     얹혔다. 옛 스크림(60% .30 / 100% .58)으로는 head 2.87:1 · lead 2.04:1 로 WCAG 1.4.3 에
     한참 못 미쳤다(65.8초 전 프레임 실측).
     ⚠ 어두운 램프의 위치는 **캡션이 어디 앉는지**에 딱 붙어 있다. 배치를 다시 잡아
       캡션이 52~76% 에서 38~70% 로 올라오자 앞서 맞춰 둔 값이 그대로 빗나갔다
       (lead 4.61:1 → 2.73:1). 캡션 세로 위치를 건드리면 여기도 같이 재야 한다.
     지금 값(42% 에서 .58 로 올려붙임)이면 캡션 영역 배경이 0.105 로 내려가
     kicker 6.04:1 · head 6.77:1 · lead 4.82:1 로 전부 통과한다.
     ⚠ 워드마크 자리(17~30%)는 흰 글자 대비 2.10:1 로 3:1 에 못 미친다. 다만 이것은
       **브랜드 워드마크(로고타입)**라 WCAG 1.4.3 대상이 아니고, 교체 전에도 1.84:1 이었다
       (옛 영상+옛 스크림 실측) — 새 영상 때문에 나빠진 것이 아니라 원래 그랬다.
       여기를 더 누르면 시안의 «밝은 띠 위 워드마크» 구성이 무너진다. */
  background:linear-gradient(180deg,rgba(5,9,18,.42) 0%,rgba(5,9,18,.16) 22%,rgba(5,9,18,.58) 42%,rgba(5,9,18,.78) 70%,rgba(5,9,18,.82) 100%);
}
.gd-hero-in{
  /* 시안 실측(1080 기준): 워드마크 캡 상단 215 · 버튼 하단 829 · SCROLL 텍스트 981 · 세로선 끝 1053 */
  width:100%;max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;
  padding:clamp(calc(var(--gd-hdr) + 20px),18.4vh,200px) var(--gd-gut) 27px;
  display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;justify-content:flex-start;
}
.gd-hero-wordmark{
  /* 시안 서체가 Playfair 보다 좁다(1920 기준 같은 캡높이에서 폭 709px vs 850px).
     크기를 낮추고 자간을 조여 시안의 footprint 에 맞춘다. */
  /* 시안: 1920 폭 709(fs≈111) · 360 폭 303(fs≈47) */
  font-family:var(--gd-serif);font-weight:500;font-size:clamp(47px,calc(33.2px + 3.83vw),111px);
  line-height:1;letter-spacing:-.05em;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.gd-hero-wordmark i{font-style:italic;color:var(--gd-hero-italic);font-weight:400}
/* 2026-09-04 배치 재조정 — margin-top:auto 하나였을 때는 남는 세로 공간이 전부
   워드마크와 캡션 «사이»로 몰려 1920 에서 298px · 390 에서 368px 이 비었다.
   위아래 auto 로 나눠 가지면 캡션이 광학 중앙 아래에 앉고 빈칸이 절반으로 준다.
   SCROLL 은 아래 자기 margin 으로 하단에 남는다(시안 981 유지). */
.gd-hero-cap{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;align-items:center}
/* 히어로 키커 — about.html §1 의 .gd-ab-kicker 와 같은 처리다(라틴 이탤릭 세리프, 골드).
   두 페이지가 같은 원문 3줄을 쓰므로 서체 취급을 맞춘다. 크기는 워드마크(clamp 47~111px)
   보다 확실히 작게 잡아 「Golden Diamant」가 계속 히어로의 중심으로 읽히게 한다. */
.gd-hero-kicker{
  margin-bottom:clamp(14px,1.5vw,24px);
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  /* 하한 19→23px. 1.98vw 는 960px 아래에서 바로 바닥을 쳐서 862px 에서 키커 19 · 헤드 17 로
     거의 같은 크기가 됐다(위계가 안 보인다). 2.2vw·23px 하한이면 좁은 폭에서도 1.24배는 벌어진다. */
  font-size:clamp(23px,2.2vw,38px);line-height:1;letter-spacing:.01em;
  color:var(--gd-hero-italic);text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.gd-hero-head{
  /* 시안 실측: 줄 피치 36px, 글자 29px → line-height 1.24 */
  /* 1.25vw 는 1360px 에서 이미 하한 17px 이라 그 아래로는 워드마크만 커지고 문구는 안 자랐다.
     1.5vw·18.5px 하한으로 늦춘다 — 390px 에서도 「오랜 경험에서…노하우」가 한 줄에 들어간다(실측 314px). */
  font-size:clamp(18.5px,1.5vw,26px);font-weight:700;line-height:1.5;letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
/* 시안 픽셀 실측: 흰 글자 + 어두운 판(#111 계열). 좌우 패딩을 0 으로 둬야 '원장과'가 벌어지지 않는다 */
.gd-hero-head em{font-style:normal;background:rgba(12,12,12,.62);box-shadow:0 0 0 4px rgba(12,12,12,.62);border-radius:2px}
.gd-hero-lead{margin-top:clamp(12px,1.1vw,18px);font-size:clamp(14.5px,1.15vw,17.5px);color:#d4dcea;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.gd-hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(30px,3vw,48px)}
.gd-hero-scroll{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  /* 14.1vh 는 캡션이 아래로 몰려 있을 때의 값이다. 캡션이 위로 올라온 지금 그대로 두면
     SCROLL 이 화면 밖으로 밀린다 — 남는 공간은 이제 .gd-hero-cap 의 auto 가 가져간다. */
  margin:clamp(28px,5vh,56px) auto 0;font-size:12.5px;letter-spacing:.18em;color:#e6edf7;
}
/* 시안: 텍스트 981~991, 선 1000~1053(54px) */
.gd-hero-scroll::after{content:"";width:1px;height:54px;background:linear-gradient(180deg,#e6edf7,rgba(239,233,224,0))}
@media (prefers-reduced-motion:no-preference){
  .gd-hero-scroll::after{animation:gd-drop 2.1s var(--gd-ease) infinite}
  /* 히어로 모션 토글로 배경영상과 함께 멈춘다(반복 애니메이션 정지 수단, WCAG 2.2.2) */
  .gd-hero.is-motion-off .gd-hero-scroll::after{animation-play-state:paused}
}
@keyframes gd-drop{0%{transform:scaleY(.25);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 배경영상 재생/정지 (WCAG 2.2.2) */
.gd-motion{
  position:absolute;right:var(--gd-gut);bottom:24px;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.5);color:#fff;
}
.gd-motion svg{width:17px;height:17px;fill:currentColor}
.gd-motion .gd-ico-play{display:none}
.gd-motion[aria-pressed="true"] .gd-ico-play{display:block}
.gd-motion[aria-pressed="true"] .gd-ico-pause{display:none}

/* --- 10. SURGERY --------------------------------------------------------- */
/* 시안 실측: 좌 500 / gap 40 / 우 900. 두 컬럼이 각자 이미지까지 흐름을 이어간다. */
/* 좌 500 / gap 40 / 우 900. 좌컬럼을 460 으로 잡으면 국문 서브(468px 필요)가 2줄로 깨진다. */
.gd-split{display:grid;grid-template-columns:minmax(0,500fr) minmax(0,900fr);gap:clamp(26px,4.2vw,40px);align-items:start}
.gd-surgery-more{margin-top:clamp(28px,3.4vw,58px)}

.gd-stats{
  margin-top:clamp(26px,2.3vw,45px);padding-top:clamp(22px,2.24vw,43px);border-top:1px solid #0f1420;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
}
.gd-stat-k{font-size:clamp(13px,.85vw,16.2px);font-weight:700;color:var(--gd-brown);letter-spacing:-.02em}
.gd-stat-v{
  margin-top:8px;font-family:var(--gd-serif);font-weight:700;line-height:1;
  font-size:clamp(34px,3.55vw,68px);letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.gd-stat-v small{font-family:var(--gd-ff);font-size:.42em;font-weight:700;margin-left:2px}
.gd-stat-c{margin-top:12px;font-size:clamp(11.5px,.66vw,12.7px);line-height:1.57;color:var(--gd-muted)}

/* 오프셋 이미지 — 시안: 좌 330(컬럼의 66%) / 우 565(컬럼의 63%, 우측 정렬) */
.gd-surg-l>figure,.gd-surg-r>figure{margin:0;border-radius:18px;overflow:hidden;background:#e9eef6}
.gd-surg-l picture,.gd-surg-r picture{display:block;width:100%;height:100%}
.gd-surg-l img,.gd-surg-r img{width:100%;height:100%;object-fit:cover}
.gd-offset-a{width:66%;aspect-ratio:330/440;margin-top:clamp(40px,4.2vw,80px)}
/* `.gd-surg-r>figure{margin:0}`(0,1,1) 가 이기므로 자식 선택자로 명시도를 맞춘다 */
.gd-surg-r>.gd-offset-b{width:63%;margin-left:auto;aspect-ratio:565/348;margin-top:clamp(40px,10.6vw,204px)}

/* --- 11. SIGNATURE ------------------------------------------------------- */
/* 시안: 스트립 x 240~1680(=1440), 높이 378px */
.gd-sig-strip{
  margin-top:clamp(30px,3.1vw,60px);
  display:flex;gap:10px;height:clamp(290px,19.8vw,380px);
}
.gd-sig-item{
  position:relative;flex:1 1 0;min-width:0;border-radius:14px;overflow:hidden;
  background:#0f1a2e;color:#fff;isolation:isolate;
  transition:flex-grow .55s var(--gd-ease);
}
/* flex-basis/shrink 까지 바꾸면 그 둘은 전환 대상이 아니라 즉시 적용돼
   '한 프레임 만에 튀었다가 0.55초 동안 오므라드는' 모션이 된다. grow 만 바꾼다.
   8장·gap10·컨테이너 1440 기준 grow 4.46 → 활성 533px / 나머지 119px (시안값) */
.gd-sig-item.is-on{flex-grow:4.46}
/* 앵커가 카드 전체를 덮어야 한다. 자식이 전부 absolute 라 그냥 두면 <a> 박스가 0x0 이 되어
   ① 포커스 링이 안 그려지고 ② 확대된 사진을 눌러도 이동하지 않는다.
   z-index 는 주지 않는다 — 주면 스택 컨텍스트가 생겨 ::after 스크림이 사진 뒤로 숨는다. */
.gd-sig-item>a{position:absolute;inset:0;display:block;border-radius:inherit}
/* overflow:hidden 에 잘리지 않도록 링을 안쪽으로 그린다 */
.gd-sig-item>a:focus-visible{outline:3px solid #8ec5ff;outline-offset:-5px;border-radius:14px}
.gd-sig-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gd-sig-item::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,10,20,.14) 0%,rgba(6,10,20,.52) 62%,rgba(6,10,20,.8) 100%);
  transition:opacity .55s;
}
.gd-sig-item.is-on::after{background:linear-gradient(180deg,rgba(6,10,20,0) 34%,rgba(6,10,20,.62) 100%)}

/* 접힌 상태 — 세로쓰기 라벨 */
/* 시안은 한글을 세워 쌓지 않고 문자열 전체를 90° 회전시킨다 */
.gd-sig-vert{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);
  white-space:nowrap;
  font-size:clamp(12.5px,1.02vw,14.5px);font-weight:700;letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.8);transition:opacity .3s;
}
.gd-sig-item.is-on .gd-sig-vert{opacity:0;pointer-events:none}

/* 펼친 상태 — 하단 이름 + 자세히 보기 */
.gd-sig-open{
  position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px clamp(16px,1.6vw,26px);opacity:0;transition:opacity .45s .12s;
}
.gd-sig-item.is-on .gd-sig-open{opacity:1}
.gd-sig-nm{font-size:clamp(13px,.82vw,15.8px);font-weight:700;letter-spacing:-.03em;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.gd-sig-go{display:inline-flex;align-items:center;gap:11px;font-size:clamp(13px,.82vw,15.8px);font-weight:700;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.75)}
.gd-sig-go svg{width:21px;height:8px;overflow:visible}
.gd-sig-go svg path{stroke:currentColor;stroke-width:1.1;fill:none}

/* --- 12. SKINSPA --------------------------------------------------------- */
.gd-spa{position:relative;padding:0;overflow:hidden}
.gd-spa-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
/* 좌측 절반 칼럼 안에서 오른쪽 끝에 붙이고 폭을 '컨테이너 절반 - 거터'로 잡으면
   왼쪽 모서리가 정확히 .gd-wrap 의 콘텐츠 좌측선과 맞는다. */
.gd-spa-body{
  justify-self:end;width:min(calc(100% - var(--gd-gut)),calc(var(--gd-wrap)/2));
  padding:clamp(64px,8vw,154px) clamp(24px,4vw,60px) clamp(64px,8vw,154px) 0;
}
/* 시안: 다크 섹션 높이 920px @1920, 좌우 정확히 반반(전환 x=960) */
.gd-spa-media{position:relative;min-height:clamp(360px,48vw,920px);overflow:hidden}
.gd-spa-media picture{position:absolute;inset:0}
/* 패럴랙스 여유분(위아래 각 4%). JS 가 ±28px 안에서만 움직이므로 가장자리가 드러나지 않는다 */
.gd-spa-media img{width:100%;height:108%;top:-4%;position:relative;object-fit:cover;will-change:transform}
.gd-spa-body .gd-head+.gd-body{margin-top:clamp(26px,3.2vw,62px)}
.gd-spa-note{margin-top:clamp(26px,3.3vw,64px);font-size:clamp(13.5px,.85vw,15.6px);line-height:1.55;color:#98a2b8}
.gd-spa .gd-more{margin-top:clamp(18px,1.2vw,23px)}

/* --- 13. BRAND ----------------------------------------------------------- */
/* 시안: 좌 380 / gap 40 / 카드열 1020 (카드 330 × 3, 간격 15) */
.gd-brand-grid{display:grid;grid-template-columns:minmax(0,380fr) minmax(0,1020fr);gap:clamp(26px,2.6vw,40px);align-items:start}
.gd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,15px)}
.gd-card{
  background:#fff;border-radius:18px;padding:clamp(20px,1.56vw,30px);
  display:flex;flex-direction:column;min-height:100%;
}
/* 시안: 원 지름 120px, 카드 상단에서 40px, 글리프는 원의 61% */
.gd-card-ico{
  width:clamp(80px,6.25vw,120px);aspect-ratio:1;border-radius:50%;background:#eef4ff;
  display:grid;place-items:center;margin:10px auto clamp(20px,2.1vw,40px);
}
/* 시안 실측: 원 지름 104px, 아이콘 폭 ≈58px(56%), 선 굵기 ≈1px @58px */
/* 시안 원본에서 추출한 아이콘(투명 배경 2x). 원은 CSS 로 그려 항상 선명하게 유지한다. */
.gd-card-ico picture{display:block;width:100%;height:100%}
.gd-card-ico img{width:100%;height:100%;object-fit:contain}
.gd-card-no{font-size:14px;font-weight:700;color:var(--gd-brown);letter-spacing:.02em}
.gd-card-t{margin-top:0;font-family:var(--gd-serif);font-weight:700;font-size:clamp(17px,1.25vw,24px);letter-spacing:-.01em}
.gd-card-l{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.gd-card-l li{position:relative;padding-left:10px;font-size:clamp(12.5px,.71vw,13.6px);line-height:1.55;color:#3d4352}
.gd-card-l li::before{content:"";position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:50%;background:var(--gd-brown)}

/* --- 14. DRSONG ---------------------------------------------------------- */
/* 시안: 컬럼 439 / 480 / 439, 간격 41, 타원 480x680 */
.gd-song{display:grid;grid-template-columns:minmax(0,439fr) minmax(0,480fr) minmax(0,439fr);gap:clamp(24px,2.7vw,41px);align-items:start}
.gd-song-portrait{border-radius:50%/34%;overflow:hidden;background:#0f1a2e;aspect-ratio:480/680}
/* 원본이 1600x767 가로 컷이고 인물이 우측에 있어 타원 안에 들어오도록 맞춘다 */
.gd-song-portrait img{width:100%;height:100%;object-fit:cover;object-position:72% 34%}
.gd-song-list{display:flex;flex-direction:column;gap:0;align-self:center}
/* 시안: 행 피치 29px, 번호 좌측→본문 좌측 36px, 본문 ≈13.7px */
.gd-song-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:3px 0}
.gd-song-list b{font-family:var(--gd-serif);font-weight:700;font-size:13.5px;color:var(--gd-brown);font-variant-numeric:lining-nums tabular-nums}
.gd-song-list span{font-size:clamp(12.5px,.72vw,13.7px);line-height:1.5;color:#3d4352}
.gd-song .gd-more{margin-top:clamp(28px,3.4vw,56px)}

/* --- 15. SHORTS ---------------------------------------------------------- */
.gd-shorts-wrap{margin-top:clamp(30px,3.6vw,56px);position:relative}
.gd-shorts-track{
  /* 축소 카드는 좌우로 30px 씩 안쪽으로 들어온다. 시안의 '중앙 카드 ↔ 옆 카드' 간격 40px 을
     맞추려면 레이아웃 gap 은 10px 이어야 한다(40 − 30). */
  display:flex;gap:clamp(6px,.52vw,10px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* 시안: 활성 카드가 화면 정중앙, 좌우로 카드가 화면 끝까지 잘려 나간다.
     양쪽을 대칭으로 padding 하고 초기 스크롤을 main.js 가 잡는다. */
  padding:6px calc(50% - min(180px,26vw));
  scrollbar-width:none;-ms-overflow-style:none;
}
.gd-shorts-track::-webkit-scrollbar{display:none}
/* 드래그 중에는 스냅을 꺼야 scrollLeft 가 포인터를 따라온다(켜두면 매 프레임 되돌아간다) */
.gd-shorts-track.is-drag{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
/* 순환 되돌림 중에는 스냅·부드러운 스크롤을 꺼야 위치가 확정된다 (요청 ②-③) */
.gd-shorts-track.is-warp{scroll-behavior:auto;scroll-snap-type:none}
/* 복제 카드는 원본과 동일하게 보여야 순환 이음매가 드러나지 않는다 */
.gd-short[data-clone]{pointer-events:auto}
/* 카드 안 <img> 의 네이티브 드래그가 pointercancel 을 일으켜 드래그가 즉시 끊긴다 */
.gd-shorts-track img,.gd-sig-strip img{-webkit-user-drag:none;user-drag:none}
.gd-shorts-track{user-select:none}
.gd-short{
  flex:0 0 min(360px,52vw);scroll-snap-align:center;
  border-radius:16px;overflow:hidden;background:#e9eef6;aspect-ratio:9/16;position:relative;
  opacity:.3;transform:scale(.8333);transform-origin:center;
  transition:opacity .45s var(--gd-ease),transform .45s var(--gd-ease),box-shadow .45s var(--gd-ease);
}
.gd-short.is-on{opacity:1;transform:none}
.gd-short img{width:100%;height:100%;object-fit:cover}

/* 포인터가 올라간 카드는 확실히 도드라져야 한다.
   중앙 카드보다는 조금 작게(.95) 두어 '현재 카드' 위계는 유지한다.
   터치 기기에서는 hover 가 고착되므로 (hover:hover) 로 막는다. */
@media (hover:hover){
  .gd-short:hover,.gd-short:focus-within{
    opacity:1;transform:scale(.95);
    box-shadow:0 18px 44px rgba(10,20,40,.28);
  }
  .gd-short.is-on:hover,.gd-short.is-on:focus-within{
    transform:scale(1.02);
    box-shadow:0 22px 52px rgba(10,20,40,.32);
  }
}
/* 키보드 포커스는 hover 미디어와 무관하게 항상 도드라지게 */
.gd-short:focus-within{opacity:1}
/* 쇼츠 제목 — 시그니처 카드(`.gd-sig-open`)와 같은 규격: 하단 스크림 + 흰 700 + 그림자.
   z-index 를 주지 않는다. 주면 뒤에 오는 `.gd-short-play`(inset:0) 위로 올라가
   제목 영역 클릭이 재생으로 안 간다. 버튼 배경은 투명이라 가려지지 않는다.
   긴 제목이 카드를 덮지 않도록 2줄에서 자른다. */
.gd-short-tt{
  position:absolute;inset:auto 0 0;margin:0;
  padding:46px clamp(11px,.95vw,16px) clamp(11px,.95vw,15px);
  background:linear-gradient(180deg,rgba(6,10,20,0) 0%,rgba(6,10,20,.62) 56%,rgba(6,10,20,.86) 100%);
  color:#fff;font-size:clamp(12.5px,.8vw,15px);font-weight:700;line-height:1.4;
  letter-spacing:-.03em;text-shadow:0 1px 8px rgba(0,0,0,.75);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gd-short-play{position:absolute;inset:0;display:grid;place-items:center}
.gd-short-play span{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,14,28,.5);border:1px solid rgba(255,255,255,.6);
  opacity:0;transition:opacity .35s;
}
.gd-short.is-on .gd-short-play span,
.gd-short:hover .gd-short-play span,
.gd-short:focus-within .gd-short-play span{opacity:1}
.gd-short-play:hover span{background:rgba(8,14,28,.72);transform:scale(1.06)}
.gd-short-play span{transition:opacity .35s,background .25s,transform .25s}
.gd-short-play svg{width:18px;height:18px;fill:#fff}
.gd-short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.gd-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(20px,2.2vw,32px);flex-wrap:wrap}
/* 시안 PC 에는 도트가 없다. 시그니처는 아코디언, 쇼츠는 카드 링크 Tab 으로 이동 가능하므로
   두 캐러셀 모두 도트는 모바일에서만 노출한다. */
.gd-dots--sig,.gd-shorts-wrap .gd-dots{display:none}
.gd-dots button{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.gd-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:#c9d2e0;transition:background .3s,transform .3s}
.gd-dots button[aria-current="true"]::before{background:var(--gd-brown);transform:scale(1.15)}

/* 쇼츠 화살표 — 위 규칙대로 도트는 모바일 전용이라 PC 에는 이동 수단이 없었다.
   화살표는 그 반대(PC 전용)로 걸어 두 폭 모두 컨트롤이 정확히 하나씩 보이게 한다.
   원형 44px·1.4px 테두리·hover 반전은 상세페이지 `.gd-ba-nav` 와 같은 규격이다. */
.gd-shorts-nav{display:flex;justify-content:center;align-items:center;gap:14px}
.gd-no-js .gd-shorts-arw{display:none}
.gd-shorts-arw{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  margin-top:clamp(20px,2.2vw,32px);
  border:1.4px solid var(--gd-ink);color:var(--gd-ink);background:transparent;
  transition:background .25s,color .25s,opacity .25s;
}
.gd-shorts-arw:hover:not([aria-disabled="true"]){background:var(--gd-ink);color:#fff}
.gd-shorts-arw[aria-disabled="true"]{opacity:.32;cursor:default}
.gd-shorts-arw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* --- 16. TOUR ------------------------------------------------------------ */
.gd-tour-head{max-width:calc(var(--gd-wrap) + var(--gd-gut)*2);margin-inline:auto;padding-inline:var(--gd-gut)}
/* 시안: 메인 1540 · 간격 40 · 썸네일 100 (스트립 7장 + 간격 10 = 760 = 메인 높이) */
.gd-tour-grid{
  margin-top:clamp(30px,3.6vw,56px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(80px,5.2vw,100px);
  gap:clamp(16px,2.1vw,40px);align-items:start;
  /* 뷰포트가 컨테이너보다 넓어도 우측선이 .gd-wrap 과 맞아야 한다 */
  padding-right:max(var(--gd-gut),calc((100vw - var(--gd-wrap))/2));   /* 우측선을 .gd-wrap 과 일치 */
}
.gd-tour-main{position:relative;border-radius:0 18px 18px 0;overflow:hidden;background:#0f1a2e;aspect-ratio:1540/760}
.gd-tour-main>*{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s var(--gd-ease),visibility 0s .55s;overflow:hidden}
.gd-tour-main img{will-change:transform}
.gd-tour-main>.is-on{opacity:1;visibility:visible;transition:opacity .55s var(--gd-ease),visibility 0s 0s}
.gd-tour-main img{width:100%;height:100%;object-fit:cover}
.gd-tour-thumbs{display:flex;flex-direction:column;gap:10px}
.gd-tour-thumbs button{
  border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:#e9eef6;
  opacity:.5;transition:opacity .3s,box-shadow .3s;
}
.gd-tour-thumbs button.is-on{opacity:1}
.gd-tour-thumbs button:focus-visible,.gd-tour-thumbs button:hover{opacity:1}
.gd-tour-thumbs img{width:100%;height:100%;object-fit:cover}

/* --- 17. CONTACT --------------------------------------------------------- */
/* 시안: 좌 500 / gap 40 / 우 900 */
.gd-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:clamp(26px,2.6vw,40px);align-items:start}
.gd-tel-k{margin-top:clamp(40px,5vw,92px);font-size:15px;font-weight:700;color:var(--gd-brown)}
.gd-tel{
  /* Playfair 기본이 올드스타일 숫자라 0 이 작고 7 에 디센더가 생긴다 → 라이닝으로 고정 */
  display:inline-block;margin-top:6px;font-family:var(--gd-serif);font-weight:500;
  font-size:clamp(30px,3.1vw,47px);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
}
.gd-contact .gd-btn{margin-top:clamp(20px,2.2vw,32px)}

/* 시안: 행 간격 48px, 라벨 캡높이 13px(≈15.5px), 값 색 #111 */
.gd-dl{display:grid;grid-template-columns:clamp(96px,8vw,140px) minmax(0,1fr);gap:clamp(18px,1.6vw,26px) 20px}
.gd-dl dt{font-size:clamp(13px,.85vw,15.5px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gd-ink)}
.gd-dl dd{margin:0;font-size:clamp(14px,1.02vw,16px);line-height:1.55;color:var(--gd-ink)}
.gd-hours{display:grid;grid-template-columns:auto 1fr;gap:9px 30px}
.gd-hours dt{font-size:14.5px;font-weight:700;letter-spacing:.05em}
.gd-hours dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:480px){
  /* 좁은 폭에서 값이 x205 에서 끝나 오른쪽 41%가 빈다. 위 ADDRESS 문단과 오른쪽 선을 맞춘다 */
  .gd-hours dd{text-align:right}
}
/* dl 바깥으로 뺀 휴무 안내 */
.gd-hours-note{margin-top:10px;color:var(--gd-ink);font-size:clamp(14px,1.02vw,16px)}
.gd-social{display:flex;gap:8px;flex-wrap:wrap}
/* 시안 실측: 40x40 타일(반경 12), 크림 채움·테두리 없음, 글리프 ≈22px, 간격 10 */
.gd-social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:var(--gd-icon-bg);color:var(--gd-brown);transition:background .25s,color .25s;
}
.gd-social a:hover,.gd-social a:focus-visible{background:var(--gd-brown);color:#fff}
.gd-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 약도는 세로 비율(814x1144)이라 우측 컬럼 폭을 다 채우면 과하게 길어진다 */
/* 시안에서 추출한 가로형 약도. PC 900x460 / 모바일 320x227 */
.gd-map{margin-top:clamp(24px,2.6vw,40px);max-width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--gd-line)}
.gd-map a{display:block}
/* 2026-09-04 약도 교체 — 옛 map-design-* 는 시안에서 그대로 뜬 네이버 캡처였고
   핀 라벨이 「오가나셀 피부과의원 청담본점」, 즉 남의 병원이었다(72장 전부).
   location.html 이 쓰던 자체 제작 약도(assets/location/location-map)로 통일했다.
   그쪽이 정본이다 — GD 로고·청담스퀘어 A동 3F·학동사거리·압구정로데오 4번·강남구청 4번이
   전부 들어 있고 2026-08-15 판으로 더 새롭다.
   세로(941/1347)라 우측 컬럼 폭(≈771px)을 그대로 주면 1,100px 높이가 된다 → 폭을 묶는다. */
.gd-map{max-width:360px}
.gd-map img{width:100%;height:auto;aspect-ratio:941/1347}
@media (max-width:768px){.gd-map{max-width:300px}}

/* --- 18. FOOTER ---------------------------------------------------------- */
/* 시안: 푸터 텍스트가 전부 따뜻한 베이지 #aab4c8 한 가지 */
.gd-footer{background:var(--gd-navy);color:#aab4c8;padding:clamp(56px,5.5vw,96px) 0 clamp(40px,4vw,64px);font-size:14.5px}
/* 시안 3열 x = 919 / 1112 / 1289, 마지막 열 뒤 191px 여백 */
.gd-footer-grid{display:grid;grid-template-columns:minmax(0,679fr) minmax(0,193fr) minmax(0,177fr) minmax(0,391fr);gap:0}
.gd-logo--footer{font-size:clamp(27px,2.1vw,36px);color:#fff;opacity:.95}
.gd-footer-info{margin-top:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:5px;line-height:1.62}
.gd-footer-info .gd-biz{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.gd-footer-info .gd-biz i{font-style:normal;opacity:.72;margin-right:5px}
.gd-footer-info .gd-biz b{font-weight:400;opacity:.45}
/* 문장 안 인라인 링크지만 24px 타깃(WCAG 2.5.8)을 채우도록 패딩을 준다 */
.gd-footer-info a{display:inline-block;padding:4px 0}
.gd-footer-info a:hover{color:#fff;text-decoration:underline}
.gd-footer-copy{font-size:13.5px;display:inline-flex;align-items:center;min-height:36px}  /* 하단 바에서 약관 링크와 baseline 을 맞춘다 */
/* 시안: 캡높이 11px · 레귤러 · 본문과 같은 베이지 */
.gd-footer h2{font-size:15px;font-weight:400;letter-spacing:.13em;color:inherit;margin-bottom:18px}
/* 시안: 항목 pitch 36px */
.gd-footer-list{display:flex;flex-direction:column;gap:0}
.gd-footer-list a{display:inline-flex;align-items:center;gap:11px;min-height:36px;color:inherit}
.gd-footer-list a:hover{color:#fff}
.gd-footer-list svg{width:17px;height:17px;flex:none;fill:currentColor;opacity:.85}
/* 시안에는 하단 구분선이 없다 */
.gd-footer-bottom{
  margin-top:clamp(38px,4vw,64px);
  display:flex;flex-wrap:wrap;gap:10px 28px;
}
.gd-footer-bottom a{min-height:36px;display:inline-flex;align-items:center;color:inherit}
.gd-footer-bottom a:hover{color:#fff}

/* TOP 버튼 */
.gd-top{
  position:fixed;right:var(--gd-gut);bottom:24px;z-index:100;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(23,26,34,.86);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.gd-top svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gd-top[hidden]{display:none}

/* --- 19. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1024px){
  :root{--gd-hdr:70px}
  .gd-brand-grid,.gd-contact{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,42px)}
  /* 시안 모바일 순서: 제목 → 서브 → 본문 → 사진 → 약력 → 자세히보기(중앙) */
  .gd-song{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px)}
  .gd-song>*:nth-child(1){display:contents}
  .gd-song .gd-disp{order:1}
  .gd-song .gd-head{order:2}
  .gd-song .gd-body{order:3}
  .gd-song-portrait{order:4}
  .gd-song-list{order:5}
  .gd-song .gd-more{order:6;align-self:center;margin-top:clamp(20px,4vw,32px)}
  .gd-song-portrait{max-width:460px;margin-inline:auto;width:100%}
  .gd-cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .gd-card{flex-direction:column}
  .gd-spa-grid{grid-template-columns:minmax(0,1fr)}
  .gd-spa-body{padding:clamp(56px,9vw,90px) var(--gd-gut);width:auto;max-width:none;justify-self:stretch}
  .gd-spa-media{min-height:clamp(260px,60vw,440px)}
  /* 4열이 세로로 쌓이면 gap:0 탓에 블록끼리 맞붙는다 — 주소 블록 끝과 SURGERY 제목이 0px 였다 */
  .gd-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:clamp(38px,6vw,56px)}
  /* 1열이 되면 그룹 제목(15px)과 링크(14.5px)가 같은 색·같은 크기라 목록이 죽 이어져 보인다.
     색은 그대로 두고 라벨 규격으로만 낮춘다 */
  .gd-footer h2{font-size:12.5px;letter-spacing:.22em;margin-bottom:12px}
  .gd-footer-grid>*:first-child{grid-column:1/-1}
  /* 단일 컬럼: 시안 모바일 순서 = 타이틀 → 서브 → 본문 → 지표 → 자세히보기 → 이미지 */
  .gd-split{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,40px)}
  .gd-surg-l,.gd-surg-r{display:contents}
  .gd-split .gd-disp{order:1}
  .gd-split .gd-head{order:2}
  .gd-split .gd-body{order:3}
  .gd-split .gd-stats{order:4;margin-top:0}
  .gd-split .gd-surgery-more{order:5;margin-top:0}
  .gd-offset-a{order:6}
  .gd-offset-b{order:7}
  /* base 규칙이 `.gd-surg-r>.gd-offset-b`(0,2,0) 라 여기도 같은 명시도여야 이긴다 */
  .gd-surg-l>.gd-offset-a,.gd-surg-r>.gd-offset-b{width:100%;margin-left:0;margin-top:0}
  .gd-tour-grid{grid-template-columns:minmax(0,1fr);padding-inline:var(--gd-gut)}
  .gd-tour-main{border-radius:18px}
  /* flex-grow 로 두면 마지막 줄 1개가 폭 100% 로 부푼다. 시안의 4+3 균등 그리드는 grid 로 잡는다 */
  .gd-tour-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:768px){
  :root{--gd-pad:clamp(56px,11vw,84px)}
  .gd-header-in{grid-template-columns:auto 1fr auto}
  .gd-brand{grid-column:1;justify-self:start}
  /* 시안 모바일 실측: 로고 총폭 214px @360 (엠블럼 좌측 x=20) */
  .gd-brand .gd-logo{font-size:clamp(26px,8.4vw,32px)}
  .gd-burger-label{display:none}
  .gd-burger{gap:0}
  .gd-header-right{gap:12px}
  /* 좁은 화면에서는 버튼 기준 우측정렬이면 왼쪽이 화면 밖으로 나간다.
     뷰포트 기준으로 고정해 거터 안에 정확히 들어오게 한다. */
  .gd-lang-menu{
    position:fixed;top:calc(var(--gd-hdr) + 6px);
    left:var(--gd-gut);right:var(--gd-gut);
    grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;max-width:none;
  }
  .gd-lang-menu a{font-size:13px;padding:0 8px;gap:7px}
  .gd-lang-globe{display:none}
  .gd-lang-btn{font-size:13.5px;letter-spacing:.06em}
  .gd-burger-bars{width:24px;gap:4px}

  .gd-hero-in{padding-top:calc(var(--gd-hdr) + 12px)}
  .gd-hero-wordmark{margin-top:clamp(24px,7vw,60px)}
  .gd-hero-cap{margin-top:auto}
  .gd-hero-scroll{margin-top:34px}

  .gd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .gd-offset-a{display:none}
  .gd-surg-r>.gd-offset-b{aspect-ratio:16/10}

  /* 시그니처 — 아코디언 대신 스냅 캐러셀 1장 */
  .gd-sig-strip{
    height:auto;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    /* 퍼센트 패딩은 '자신의 폭'이 아니라 '포함 블록 폭' 기준이라 중앙정렬 계산이 어긋난다.
       카드를 섹션 좌측 거터에 맞춰 start 스냅시키고 다음 카드가 살짝 보이게 한다(시안과 동일). */
    margin-inline:calc(var(--gd-gut) * -1);
    padding-inline:var(--gd-gut);
  }
  .gd-sig-item{scroll-snap-align:start}
  .gd-sig-strip::-webkit-scrollbar{display:none}
  /* 시안 모바일: 카드 320x240 (=거터 20 안쪽 꽉), 다음 카드 peek 없음 */
  /* 스트립이 padding-inline 으로 이미 거터를 만든다. 여기서 또 빼면 40px 좁아지고 peek 이 생긴다 */
  .gd-sig-item,.gd-sig-item.is-on{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:320/240}
  .gd-sig-item::after,.gd-sig-item.is-on::after{background:linear-gradient(180deg,rgba(6,10,20,0) 38%,rgba(6,10,20,.66) 100%)}
  .gd-sig-vert{display:none}
  .gd-sig-open{opacity:1}
  .gd-dots--sig,.gd-shorts-wrap .gd-dots{display:flex}
  /* 도트가 나오는 폭에서는 화살표를 뺀다 — 360px 에서 44px 화살표 2개 + 도트 11개는
     한 줄에 안 들어가고, 여기서는 손가락 스와이프가 기본 조작이다 */
  .gd-shorts-arw{display:none}
  /* 시안 도트 피치는 22.9px 이지만 터치 타깃 24px(WCAG 2.5.8) 이 우선이라 24px 로 둔다 */
  /* 시안 도트 총폭 120px(시그니처)/168px(쇼츠) 이지만 터치타깃 24px(WCAG 2.5.8)이 우선 */
  .gd-dots{gap:0;margin-top:clamp(13px,3.4vw,16px)}
  .gd-dots button{width:24px;height:24px}
  .gd-dots button::before{width:6px;height:6px}

  .gd-split .gd-surgery-more{align-self:center}
  /* 시안 모바일: 둘러보기 메인 사진은 좌우 풀블리드, 썸네일만 안쪽 여백 */
  .gd-tour-grid{padding-inline:0;gap:clamp(16px,4vw,22px)}
  .gd-tour-main{border-radius:0}
  .gd-tour-thumbs{padding-inline:var(--gd-gut)}
  .gd-song-list{gap:2px}
  .gd-song-list li{grid-template-columns:32px 1fr;gap:8px;padding:7px 0}

  /* 자식 선택자여야 한다 — .gd-hours 안쪽 dt 까지 밀면 시간표가 어긋난다 */
  .gd-dl{grid-template-columns:minmax(0,1fr);gap:8px}
  .gd-dl>dt{margin-top:16px}
  .gd-dl>dt:first-child{margin-top:0}
  .gd-hours{grid-template-columns:auto 1fr;gap:8px 24px}
  .gd-footer-grid{grid-template-columns:minmax(0,1fr)}
  .gd-shorts-track{padding-inline:calc(50% - 44.5vw)}  /* 시안: 카드 320/360 = 88.9vw 중앙 정렬 */
  .gd-short{flex:0 0 88.9vw}
  /* 시안 모바일 실측: 둘러보기 메인 360x220, §4 하단 이미지 높이 280, 국문 헤드 20px */
  .gd-tour-main{aspect-ratio:360/220}
  .gd-spa-media{min-height:clamp(220px,77.8vw,300px)}
  .gd-spa-body .gd-head{font-size:clamp(18px,5.6vw,20px)}
  .gd-logo--footer{font-size:clamp(30px,8.6vw,34px)}   /* 시안 푸터 로고 락업 215px @360 */

}

@media (max-width:480px){
  .gd-hero-actions{gap:10px}
  .gd-btn{padding:0 22px;font-size:14.5px}

}

/* --- 20. MOTION / PRINT -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gd-shorts-track,.gd-sig-strip{scroll-behavior:auto}
  .gd-spa-media img,.gd-tour-main img{transform:none!important;will-change:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .gd-reveal{opacity:1;transform:none}
}
@media print{
  .gd-header,.gd-drawer,.rb-drawer,.gd-top,.gd-motion,.gd-progress,.gd-hero-scroll{display:none!important}
  .gd-hero{min-height:auto}
  body{color:#000}
}

/* --- 21. MOTION-3D — 입체 모션 레이어 (전 67장 공통) ----------------------
   설계 원칙
   1) **HTML 을 한 글자도 고치지 않는다.** 이미 전 페이지에 깔린 .gd-reveal(2,970개)과
      기존 컴포넌트 클래스에만 건다. 의료광고 대상이라 마크업/문안을 못 건드린다.
   2) **레이아웃 0px 변화.** transform · opacity 만 쓴다. 밴드 높이·이미지 수·문서 높이가
      1px 이라도 변하면 실패다(.audit/3d/base.json 대조).
   3) **블록 전체가 `prefers-reduced-motion:no-preference` 안에 있다.** !important 로
      되돌리는 대신 «감속 요청 시엔 이 규칙이 아예 존재하지 않게» 만든다. 그래야
      tools/verify.py 의 --force-prefers-reduced-motion 캡처가 오늘과 픽셀 동일하게 남는다.
   4) **`main` 안쪽에만 건다.** body 직계는 .gd-skip / .gd-progress / .gd-header /
      .rb-drawer / main / .gd-footer / .gd-top 이고 **고정·스티키 요소가 전부 main 바깥**이다
      (65장 전수 확인). 그래서 perspective 가 position:fixed 의 containing block 을
      가로챌 수 없다 — 휴리스틱이 아니라 구조적 증명이다.
   5) perspective 는 **섹션이 아니라 요소 자신의 transform 함수**로 준다. 8,000px 짜리
      문서에 조상 perspective 를 걸면 위아래 끝 요소가 극단적인 각도로 찌그러진다.
      요소 자신에게 주면 소실점이 그 요소 중심이라 스크롤 위치와 무관하게 일정하다.

   강도 조절: --gd-3d 하나만 바꾸면 전 사이트가 같이 움직인다(0 = 기존 2D 와 동일).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  :root{
    --gd-3d:1;                                  /* 0~1 전역 강도. 0 이면 오늘과 픽셀 동일 */
    --gd-persp:1200px;                          /* 기본 소실 거리 */
    --gd-ease3:cubic-bezier(.16,.74,.26,1);     /* 착지가 부드러운 감속 */
    --gd-dur3:.95s;
  }

  /* ---- 21a. 3D 리빌 — .gd-reveal 을 입체로 승격 --------------------------
     기존 규칙(main.css 113)의 translateY(26px) 는 --r3-y 로 그대로 남는다.
     --gd-3d:0 이면 아래 식은 정확히 translate3d(0,26px,0) 로 환원된다. */
  main .gd-reveal{
    --r3-p:var(--gd-persp);
    --r3-x:0px; --r3-y:26px; --r3-z:0px;
    --r3-rx:6deg; --r3-ry:0deg; --r3-rz:0deg;
    transform:
      perspective(var(--r3-p))
      translate3d(calc(var(--r3-x) * var(--gd-3d)),var(--r3-y),calc(var(--r3-z) * var(--gd-3d)))
      rotateX(calc(var(--r3-rx) * var(--gd-3d)))
      rotateY(calc(var(--r3-ry) * var(--gd-3d)))
      rotateZ(calc(var(--r3-rz) * var(--gd-3d)));
    transform-origin:50% 100%;
    /* 도착 상태는 main.css 114 의 `.gd-reveal.is-in{transform:none}` 이 그대로 맡는다.
       (0,2,0) 이라 여기(0,1,0)보다 항상 세다 — 도착 후엔 transform 이 사라져
       2,970개 요소에 합성 레이어가 남지 않는다. --gd-no-js 폴백도 같은 이유로 안전하다. */
    transition:opacity .8s var(--gd-ease),transform var(--gd-dur3) var(--gd-ease3);
  }

  /* ---- 21b. 컴포넌트별 변주 — 셀렉터는 전부 «이미 존재하는» 클래스다 ------
     :where() 로 명시도를 0 으로 유지해 페이지 CSS 가 언제든 덮을 수 있게 둔다. */

  /* 히어로 좌측 블리드 사진 — 오른쪽 모서리를 경첩 삼아 열린다(52장) */
  main .gd-reveal:where(.gd-shero-media){
    --r3-p:1600px; --r3-ry:-7deg; --r3-z:-90px; --r3-rx:0deg; --r3-y:0px;
    transform-origin:100% 50%;
  }
  /* 히어로 텍스트 — 사진보다 얕게 따라온다 */
  main .gd-reveal:where(.gd-shero-body){--r3-rx:5deg; --r3-z:-40px; --r3-y:30px}

  /* §2 어긋난 흰 카드 4 — 눕혀 둔 카드를 세워 내려놓는 딜(deal) */
  main .gd-reveal:where(.gd-numcard,.gd-card,.gd-optcard){
    --r3-rx:13deg; --r3-rz:-1.4deg; --r3-z:-70px; --r3-y:18px;
    transform-origin:50% 118%;
  }
  /* 짝수 카드는 반대로 기울여 «한 벌을 흩뿌린» 느낌을 준다 */
  main .gd-numgrid>li:nth-child(even) .gd-reveal:where(.gd-numcard),
  main .gd-numgrid>li:nth-child(even).gd-reveal:where(.gd-numcard){--r3-rz:1.4deg}

  /* §4 알약 CHECK — 왼쪽 끝을 경첩 삼아 열린다(273개/50장) */
  main .gd-reveal:where(.gd-check){
    --r3-ry:9deg; --r3-x:14px; --r3-rx:0deg; --r3-y:16px; --r3-z:-40px;
    transform-origin:0% 50%;
  }

  /* 도해·사진 상자 — 깊이에서 앞으로 다가온다.
     상자만 움직이고 **안쪽 이미지는 건드리지 않는다** — .gd-medfig img 는 상자를 꽉 채우는
     의료 도해라, 확대하면 지시선·라벨이 잘린다(sub.css 903 참조). */
  main .gd-reveal:where(.gd-medfig,.gd-figbox,.gd-duo-media,.gd-branch-fig,.gd-map){
    --r3-p:1500px; --r3-rx:7deg; --r3-z:-130px; --r3-y:14px;
  }

  /* §7 수술방법 STEP — 좌우 교대로 비스듬히 들어온다(111개/20장) */
  main .gd-reveal:where(.gd-step){--r3-p:1400px; --r3-ry:8deg; --r3-x:10px; --r3-rx:3deg; transform-origin:0% 50%}
  main .gd-steps>*:nth-child(even) .gd-reveal:where(.gd-step),
  main .gd-steps>*:nth-child(even).gd-reveal:where(.gd-step){--r3-ry:-8deg; --r3-x:-10px; transform-origin:100% 50%}

  /* §3 PRS 딥네이비 밴드 — 네 줄을 서로 다른 z 평면에 놓아 밴드 자체가 깊어 보이게 한다.
     밴드에 overflow:hidden 이 있어(sub.css 306) 밖으로 새지 않는다. */
  main .gd-reveal:where(.gd-prs-mark){--r3-p:1800px; --r3-z:-190px; --r3-rx:5deg}
  main .gd-reveal:where(.gd-prs-h)   {--r3-p:1800px; --r3-z:-140px; --r3-rx:4deg}
  main .gd-reveal:where(.gd-prs-lead){--r3-p:1800px; --r3-z:-95px;  --r3-rx:3deg}
  main .gd-reveal:where(.gd-prs-cap) {--r3-p:1800px; --r3-z:-60px;  --r3-rx:2deg}

  /* 제목류 — 아래를 경첩으로 세워진다 */
  main .gd-reveal:where(.gd-shead,.gd-skicker,.gd-disp,.gd-head,.dr-head,.gd-mb-h,.ev-hero-h){
    --r3-rx:8deg; --r3-y:22px; --r3-z:-50px;
  }
  /* 본문·주석류 — 제목보다 훨씬 얕게(글은 많이 기울이면 읽기 전에 멀미가 난다) */
  main .gd-reveal:where(.gd-sbody,.gd-snote,.gd-body,.gd-numlist,.gd-callout,.gd-notes,.gd-scarlist,.dr-body){
    --r3-rx:4deg; --r3-y:22px; --r3-z:-30px;
  }

  /* ---- 21c. 전용 페이지군 — 공유 어휘가 없는 14장에도 같은 문법을 건다 ----- */
  /* tour — 객실 사진(14장 리빌) */
  main .gd-reveal:where(.tr-ph){--r3-p:1500px; --r3-ry:6deg; --r3-z:-120px; --r3-rx:4deg; transform-origin:0% 50%}
  main .tr-room>*:nth-child(even) .gd-reveal:where(.tr-ph),
  main .tr-room>*:nth-child(even).gd-reveal:where(.tr-ph){--r3-ry:-6deg; transform-origin:100% 50%}
  /* about — 큰 사진·패널. 번호(.gd-ab-no)는 건드리지 않는다: about.css 146 이
     «번호가 본문을 연다»는 뜻으로 왼쪽 슬라이드를 (0,3,0) 으로 이미 걸어 뒀다. */
  main .gd-reveal:where(.gd-ab-dark,.gd-ab-wide,.gd-ab-figbg-bg,.gd-ab-lap-t){--r3-p:1600px; --r3-rx:6deg; --r3-z:-110px}
  /* events — 포스터·히어로 */
  main .gd-reveal:where(.ev-poster){--r3-p:1500px; --r3-rx:7deg; --r3-z:-140px}
  main .gd-reveal:where(.ev-hero-body,.gd-mb-kicker,.gd-mb-lead,.gd-mb-empty,.gd-mb-cats){--r3-rx:5deg; --r3-z:-45px}
  /* doctors — 인용 */
  main .gd-reveal:where(.dr-quote){--r3-p:1500px; --r3-rx:6deg; --r3-z:-90px}

  /* ---- 21d. 임상 사진은 건드리지 않는다 -----------------------------------
     전후사진 캐러셀(.gd-ba)은 진료 결과를 보여 주는 증거물이다. 기울이거나 밀면
     «보정했다»는 인상을 준다. 상자째 얕게만 올리고 회전은 0 으로 둔다. */
  main .gd-reveal:where(.gd-ba){--r3-rx:0deg; --r3-ry:0deg; --r3-rz:0deg; --r3-z:-40px; --r3-y:22px}

  /* ---- 21e. 스태거 — 5~8번째 자식까지 연장 -------------------------------
     기존 규칙(main.css 116)은 4번째에서 끊긴다. .gd-checks 처럼 5개 이상인 묶음에서
     뒷줄이 한꺼번에 튀어 들어와 3D 계단이 무너진다. */
  main .gd-stagger>*:nth-child(5){transition-delay:.36s}
  main .gd-stagger>*:nth-child(6){transition-delay:.45s}
  main .gd-stagger>*:nth-child(7){transition-delay:.54s}
  main .gd-stagger>*:nth-child(8){transition-delay:.63s}
}

/* --- 21f. 포인터 틸트 — 카드형 표면 ---------------------------------------
   main.js 11번 모듈이 --tx/--ty 와 .is-tilt 만 넘긴다. 그리기는 여기서 한다.
   hover 가 되는 기기에서만 켠다(터치에서는 기운 채로 달라붙는다).
   명시도 (0,2,1) 로 `.gd-reveal.is-in{transform:none}`(0,2,0) 을 이긴다 —
   도착한 카드만 기울고, 아직 등장 전인 카드는 main.js 가 걸러 낸다. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  main :is(.gd-numcard,.gd-check,.gd-spec>div,.gd-step,.gd-optcard,.gd-card,
           .ev-card,.ev-nav-a,.dr-shots figure,.dr-cert,.gd-mb-panel,.gd-mb-empty,.gd-mb-field,
           .gd-chain li,.gd-compare>li,.gd-branch li,.tr-ph,.lc-map-fig,.gd-ab-zig-thumb,.gd-map){
    /* 손을 떼면 천천히 제자리로. 기울일 때는 main.js 가 매 프레임 값을 바꾸므로
       아래 .is-tilt 규칙에서 전이를 짧게 바꿔 포인터를 따라붙게 한다. */
    transition:transform .5s var(--gd-ease3),box-shadow .5s var(--gd-ease3);
  }
  main :is(.gd-numcard,.gd-check,.gd-spec>div,.gd-step,.gd-optcard,.gd-card,
           .ev-card,.ev-nav-a,.dr-shots figure,.dr-cert,.gd-mb-panel,.gd-mb-empty,.gd-mb-field,
           .gd-chain li,.gd-compare>li,.gd-branch li,.tr-ph,.lc-map-fig,.gd-ab-zig-thumb,.gd-map).is-tilt{
    transform:
      perspective(760px)
      rotateX(var(--tx,0deg))
      rotateY(var(--ty,0deg))
      translateZ(calc(10px * var(--gd-3d)));
    transition:transform .1s linear,box-shadow .3s var(--gd-ease3);
    /* 들린 만큼 그림자가 깊어져야 «떠 있다»로 읽힌다 */
    box-shadow:0 26px 48px -26px rgba(23,26,34,.42);
  }
}

/* --- 21g. 공유 어휘가 얇은 페이지 보강 -------------------------------------
   .gd-reveal 기본값 덕에 «3D 가 아예 없는 페이지»는 이미 0장이다. 여기서는
   실측(.audit/3d/v3d.json)으로 가장 얇게 나온 페이지군에 그 페이지다운 변주를 준다.
     event-* 4장 = 리빌 5개  ·  scar-clinic 7  ·  before-after 8  ·  location 11
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* location — 지도가 주인공이다. 종이 지도를 책상에 내려놓듯 눕혔다 편다 */
  main .gd-reveal:where(.lc-map-fig){--r3-p:1500px; --r3-rx:10deg; --r3-z:-150px; --r3-y:16px}
  main .gd-reveal:where(.lc-info,.lc-block,.lc-addr,.lc-route,.lc-hours){--r3-rx:5deg; --r3-z:-55px}
  main .gd-reveal:where(.lc-hero-body,.ev-crumb){--r3-rx:6deg; --r3-z:-60px}

  /* before-after · scar-clinic · member-login — 준비중/폼 패널 */
  main .gd-reveal:where(.gd-mb-panel,.gd-mb-empty){--r3-p:1300px; --r3-rx:9deg; --r3-z:-90px; transform-origin:50% 115%}
  main .gd-reveal:where(.gd-mb-cats){--r3-ry:7deg; --r3-x:12px; --r3-rx:0deg; transform-origin:0% 50%}

  /* doctors — 인증서·촬영컷 */
  main .gd-reveal:where(.dr-cred,.dr-shots,.dr-fig){--r3-p:1500px; --r3-rx:7deg; --r3-z:-110px}
}

/* --- 21h. index 시그니처 스트립 — 접힌 판이 안쪽으로 접힌다 -----------------
   8칸 중 활성 칸만 flex-grow 로 펼쳐지는 구조(main.css 11번 블록)라, 접힌 칸을
   살짝 뒤로 접으면 «펼쳐진 한 칸이 앞으로 나온다»가 깊이로 읽힌다.

   두 가지 제약을 지킨다.
   1) **자유단이 뒤로만 간다.** 회전축(transform-origin)을 스트립 «안쪽» 모서리에 두고
      바깥 모서리를 뒤로 보낸다. 앞으로 오면 원근 투영이 바깥으로 자라 1440·390 두 폭에서
      가로 오버플로가 난다(body{overflow-x:hidden} 이 잘라 주지만 그만큼 조판이 어긋난다).
   2) **6deg 를 넘지 않는다.** 칸 안의 세로 라벨(.gd-sig-vert)은 rotate(90deg) 로 세운
      한글이라, 더 기울이면 소실점을 지나며 사다리꼴로 번져 읽기 어려워진다.
      라벨 자신에게는 3D 를 걸지 않는다 — 펼쳐지면 어차피 opacity:0 으로 사라진다. */
@media (prefers-reduced-motion:no-preference){
  .gd-sig-item{
    transition:flex-grow .55s var(--gd-ease),transform .55s var(--gd-ease);
  }
  /* 왼쪽 네 칸 — 축은 오른쪽(안쪽), 왼쪽 자유단이 뒤로 */
  .gd-sig-item:nth-child(-n+4){
    transform:perspective(1900px) rotateY(calc(-6deg * var(--gd-3d)));
    transform-origin:100% 50%;
  }
  /* 오른쪽 네 칸 — 축은 왼쪽(안쪽), 오른쪽 자유단이 뒤로 */
  .gd-sig-item:nth-child(n+5){
    transform:perspective(1900px) rotateY(calc(6deg * var(--gd-3d)));
    transform-origin:0% 50%;
  }
  /* 펼쳐진 칸은 정면으로 선다 — 이 대비가 «앞으로 나왔다»를 만든다 */
  .gd-sig-item.is-on{transform:none}
  /* 단컬럼(세로로 쌓이는 폭)에서는 좌우 개념이 없어 접을 이유도 없다 */
  @media (max-width:768px){
    .gd-sig-item:nth-child(-n+4),.gd-sig-item:nth-child(n+5){transform:none}
  }
}

/* ======================================================================
   22. 메인 재구성 (2026-09-07 병원 4차 수정요청 ①~⑤)
   HERO 아래 주력 분야 한 줄 · WHY GOLDEN DIAMANT 4카드 · 회원전용 전·후 밴드 ·
   After Care · 영상 두 구획(Doctor's Insight / Golden Shorts).
   기존 클래스로 되는 것은 전부 재사용했고(.gd-sec .gd-wrap .gd-disp .gd-sub
   .gd-cards .gd-card* .gd-brand-grid .gd-btn .gd-shorts-*), 여기 있는 것은
   «없어서 새로 만든 것»뿐이다. 물리 속성(left/right)은 쓰지 않는다 — 아랍어 RTL.
   ====================================================================== */
/* ① HERO 주력 분야 — 리드 아래 한 줄. 리드보다 작고 밝기를 낮춰 위계를 지킨다 */
.gd-hero-focus{
  margin-top:clamp(10px,.9vw,14px);
  font-size:clamp(13px,1vw,15.5px);line-height:1.65;letter-spacing:-.01em;
  color:#c3cddd;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
/* ② WHY — Brand Story 와 같은 좌 제목 / 우 카드 그리드인데 카드가 4장이다.
   아이콘이 없으므로 번호를 카드 위쪽에 띄우고 그만큼 여백을 준다. */
.gd-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-cards--4 .gd-card{padding-top:clamp(18px,1.4vw,26px)}
.gd-cards--4 .gd-card-no{
  display:block;margin-bottom:10px;font-family:var(--gd-serif);font-style:italic;
  font-size:clamp(15px,1.15vw,19px);color:var(--gd-brown)
}
.gd-cards--4 .gd-card-t{font-size:clamp(15px,1.05vw,19px);line-height:1.35}
/* ④ 회원전용 전·후 안내 밴드 — 사진은 싣지 않는다(의료법·회원전용 규칙) */
.gd-case{max-width:760px;margin-inline:auto;text-align:center}
.gd-case-kicker{
  font-family:var(--gd-serif);font-style:italic;font-size:clamp(14px,1.1vw,18px);
  color:var(--gd-brown);margin-bottom:10px
}
.gd-case-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(22px,2.2vw,34px)}
/* ⑥ After Care — 좌 본문 / 우 장비 사진 + 관리 4단계 */
.gd-care{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,2.6vw,48px);align-items:start}
.gd-care-body{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.gd-care-body p{font-size:clamp(13.5px,.95vw,15.5px);line-height:1.7;color:#3d4352}
.gd-care-media{margin:0 0 clamp(18px,1.8vw,26px)}
.gd-care-media img{display:block;width:100%;height:auto;border-radius:16px}
.gd-care-list{display:flex;flex-direction:column;gap:10px}
.gd-care-list li{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:14px;
  padding:clamp(12px,1vw,18px) clamp(14px,1.2vw,22px)
}
.gd-care-list b{flex:none;font-family:var(--gd-serif);font-style:italic;color:var(--gd-brown);font-size:15px;line-height:1.6}
.gd-care-list span{font-size:clamp(12.5px,.85vw,14px);line-height:1.6;color:#3d4352}
/* ⑤ 영상 두 구획 — 가운데 제목 아래 한 줄, 그리고 전체 목록으로 나가는 링크 */
.gd-vidlead{
  margin-top:14px;text-align:center;font-size:clamp(13.5px,.95vw,15.5px);
  line-height:1.7;color:var(--gd-muted)
}
.gd-vidlinks{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(26px,2.6vw,40px)}
@media (max-width:1024px){
  .gd-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .gd-cards--4{grid-template-columns:minmax(0,1fr)}
  .gd-care{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,32px)}
  .gd-case-actions,.gd-vidlinks{gap:10px}
}

/* ==========================================================================
   모바일 하단 고정 CTA 바 — 카카오 상담 / 전화 / 상담 문의
   2026-09-08 병원 UX 수정요청 ③. 마크업은 _i18n/render.php 3-h 가 넣는다
   (원문 73장에 박으면 새 키가 생겨 10개 언어가 noindex 되기 때문 — 그 주석 참조).
   PC 는 헤더·본문·푸터에 이미 상담 동선이 있어 띄우지 않는다.
   ========================================================================== */
.gd-cta-bar{display:none}
@media (max-width:768px){
  .gd-cta-bar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--gd-line);
    box-shadow:0 -2px 14px rgba(17,17,17,.08);
    padding-bottom:env(safe-area-inset-bottom,0)
  }
  .gd-cta-bar-i{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:58px;padding:8px 4px;text-decoration:none;color:var(--gd-ink);
    font-size:12px;line-height:1.3;letter-spacing:-.01em;text-align:center
  }
  .gd-cta-bar-i + .gd-cta-bar-i{border-left:1px solid var(--gd-line)}
  .gd-cta-bar-i svg{width:20px;height:20px;fill:var(--gd-icon-line);flex:none}
  .gd-cta-bar-i[data-cta="kakao"] svg{fill:var(--gd-brown-dp)}
  .gd-cta-bar-i[data-cta="kakao"]{font-weight:600}
  .gd-cta-bar-i:active{background:var(--gd-cream)}
  /* 바가 푸터 마지막 줄을 가리지 않게 본문 아래에 자리를 만든다 */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
  /* TOP 버튼(.gd-top: fixed·bottom:24px·z-index:100)이 바보다 위에 그려져
     「상담 문의」칸을 덮는다. 바 높이만큼 올려 비켜 세운다. */
  .gd-top{bottom:calc(58px + 16px + env(safe-area-inset-bottom,0))}
}
@media print{.gd-cta-bar{display:none}}

/* 택시 기사용 한국어 주소 — 외국어 페이지에서만 render.php(3-i)가 Address 값 뒤에 한 줄 더 넣는다.
   .gd-dl 은 «라벨 | 값» 2열 그리드라, 그냥 두면 이 dd 가 라벨 칸으로 떨어진다 → grid-column 고정. */
.gd-addr-ko{grid-column:2;margin-top:-8px}
/* ⚠ 768px 아래에서 .gd-dl 이 1열이 된다(위 @media 참조). 거기서도 grid-column:2 를 두면
   없는 열을 암시적으로 만들어 목록 전체가 어긋난다 → 모바일에서는 되돌린다. */
@media (max-width:768px){.gd-addr-ko{grid-column:auto;margin-top:0}}
.gd-addr-ko span{display:block;font-size:12px;letter-spacing:.04em;color:var(--gd-brown);opacity:.85}
.gd-addr-ko b{display:inline-block;margin-top:5px;padding:6px 10px;font-weight:600;font-size:15px;
  color:var(--gd-ink);background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:6px;user-select:all}

/* 영문 페이지에서만 메뉴의 영문 부제를 숨긴다.
   라벨이 이미 영어라 «Skin & Laser / Skin & Laser» 처럼 8개 구획이 의미 없이 겹친다.
   한국어·일본어·중국어 등은 «한글/현지어 라벨 + 영문 부제» 로 설계대로 작동하므로 그대로 둔다.
   ⚠ HTML 은 건드리지 않는다 — 이 span 은 lib.php:314 가 구획명을 ko/en 으로 «가르는 기준»이라
     지우면 llms.txt 목록과 스키마 브레드크럼의 구획 정보가 같이 사라진다(2026-09-04 사고 기록).
   레이아웃: .rb-acc-top 은 flex 이고 .rb-chev 가 margin-left:auto 라 항목 하나가 빠져도
     화살표 위치·행 높이(min-height:52px)는 그대로다. */
html[lang="en"] .rb-acc-en{display:none}

/* 외국어 페이지에서 카카오 버튼에 붙는 «(Korea)» 단서 — render.php 3-c 가 넣는다.
   카카오톡은 한국 메신저라 외국인이 누르면 계정이 없어 막힌다. 누르기 «전에» 알 수 있게 한다. */
.gd-cta-note{margin-left:6px;font-size:.82em;font-weight:400;opacity:.72}

/* ── 사이드 퀵바 ────────────────────────────────────────────────────────────
   마크업은 각 페이지 </body> 앞에 있다(2026-09-08).
   ⚠ 라벨은 이미 번역돼 있는 문자열(카카오톡·전화·상담 문의·오시는 길)만 쓴다.
     새 한글 문자열을 넣으면 gd_i18n_page_covered() 가 깨져 그 언어 전 페이지가
     noindex 로 떨어진다(_i18n/lib.php:233).
   ⚠ z-index 는 팝업 딤(.gd-pop-dim, 900) 보다 낮게 둔다 — 팝업이 퀵바를 덮어야 한다.
   RTL(ar) 을 위해 물리 속성 대신 논리 속성을 쓴다. */
.gd-qb{
  position:fixed; inset-inline-end:0; top:50%; transform:translateY(-50%);
  z-index:880; display:flex; flex-direction:column; gap:1px;
  background:var(--gd-line);
  border:1px solid var(--gd-line); border-inline-end:0;
  border-start-start-radius:12px; border-end-start-radius:12px;
  overflow:hidden; box-shadow:0 6px 22px rgba(23,26,34,.12);
}
.gd-qb-i{
  --gd-qb-fg:var(--gd-ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  inline-size:78px; min-block-size:66px; padding:9px 6px;
  background:#fff; color:var(--gd-qb-fg);
  font:600 11.5px/1.25 var(--gd-ff); text-align:center; text-decoration:none;
  border:0; cursor:pointer; letter-spacing:-.2px;
  transition:background .16s ease, color .16s ease;
}
.gd-qb-i svg{inline-size:22px; block-size:22px; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.gd-qb-i span{display:block; word-break:keep-all}

/* 마우스를 올리거나 누를 때 — 브랜드 브라운으로 채운다.
   임의의 갈색 대신 :root 의 팔레트 토큰을 쓴다 — 브랜드 색이 바뀌면 같이 따라간다.
   흰 글자 대비: #1e4fd8 = 4.5:1, #173fae = 6.0:1 (둘 다 WCAG AA 통과). */
.gd-qb-i:hover,
.gd-qb-i:focus-visible{background:var(--gd-brown); color:#fff; text-decoration:none}
.gd-qb-i:active{background:var(--gd-brown-dp); color:#fff}
.gd-qb-i:focus-visible{outline:2px solid var(--gd-icon-bg); outline-offset:-2px}

.gd-qb-top{font-size:11px; letter-spacing:.06em; min-block-size:52px}

/* 모바일 — 오른쪽 세로바는 본문을 가린다. 하단 가로바로 바꾼다. */
@media (max-width:768px){
  .gd-qb{
    inset-inline:0; inset-block-end:0; top:auto; transform:none;
    flex-direction:row; border-radius:0; border:0; border-block-start:1px solid var(--gd-line);
    box-shadow:0 -4px 16px rgba(23,26,34,.10);
  }
  .gd-qb-i{flex:1; inline-size:auto; min-block-size:56px; padding:7px 4px; gap:3px; font-size:10.5px}
  .gd-qb-i svg{inline-size:19px; block-size:19px}
}

@media print{ .gd-qb{display:none !important} }