/* ===========================================================
 * gh-detail-styles.css — G Clinic site-wide hover/focus + hero + stories + z-index
 * Fork of the 홍대 upstream detail-styles sheet, FULLY converted to CSS LOGICAL
 * PROPERTIES for single-stylesheet LTR/RTL (ar) support. Physical coordinates that cannot be
 * expressed logically (symmetric transforms / centered translate) are RTL-safe
 * as-is; any genuinely direction-dependent physical rule is collected in the
 * [dir="rtl"] override block at the END of this file.
 *
 * ns: gh-  ·  classes: .gh-story-card / .gh-stories / .gh-cta-informational
 * G24 (blue-strip strip) · G25 (hero home-pattern) · G26 (z-index) · G27 (mobile accordion)
 * NO inline blue hex anywhere (Judge HARD FAIL). NO clinic identity tokens.
 * =========================================================== */

/* ===========================================================
 * (0) TREATMENT-CLUSTER ACCENT TOKENS  (design-refresh 2차, 0822)
 * RB Gangnam운용 관찰: 골드는 사이트와이드 브랜드축으로 유지하되, 시술 클러스터마다
 * 저채도 포인트 컬러를 배지/보더/언더라인/카운터/틴트에 얹어 색상 리듬을 만든다.
 * 여기 토큰은 기존 크림/스톤/골드와 조화되는 낮은 채도만 — 파란 원색(primary-blue) 금지.
 * 각 토큰: base(선/텍스트), soft(6~12% 틴트 배경), glow(다크밴드 위 밝은 변형).
 *   G-fat / Body   = 웜 테라코타·코랄     (바디 활력)
 *   Lifting        = 딥 골드(브랜드 골드 심화)
 *   Petit          = 로즈
 *   Skin booster   = 세이지/민트
 *   Stem cell      = 차분한 블루그레이(저채도, primary-blue 아님)
 * =========================================================== */
:root {
  --c-gfat: #BF6443;        --c-gfat-soft: rgba(191,100,67,.12);   --c-gfat-glow: #E19679;
  --c-lift: #A47E37;        --c-lift-soft: rgba(164,126,55,.13);   --c-lift-glow: #DCBC72;
  --c-petit: #B86274;       --c-petit-soft: rgba(184,98,116,.12);  --c-petit-glow: #DD99A8;
  --c-boost: #679466;       --c-boost-soft: rgba(103,148,102,.14); --c-boost-glow: #A1C79B;
  --c-stem: #64768E;        --c-stem-soft: rgba(100,118,142,.13);  --c-stem-glow: #9FADC1;
}

/* ----- Language font stacks (html[lang] branch — ar/th/mn) ----- */
html[lang="ar"] {
  font-family: "Noto Sans Arabic", var(--font-body, system-ui), sans-serif;
}
html[lang="th"] {
  font-family: "Noto Sans Thai", var(--font-body, system-ui), sans-serif;
}
html[lang="mn"] {
  /* Cyrillic-inclusive Noto Sans */
  font-family: "Noto Sans", var(--font-body, system-ui), sans-serif;
}

/* ----- (1) UNIVERSAL BUTTON/LINK FOCUS STRIP — Kadence override ----- */
button:hover,
button:focus,
button:active,
button:focus-visible,
.button:hover,
.button:focus,
.button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a:hover,
a:focus,
a:active {
  background-color: transparent !important;
}
button:focus-visible,
a:focus-visible,
.gh-story-card:focus-visible,
.lang-btn:focus-visible {
  outline: 2px solid var(--gold, #C9A96E) !important;
  outline-offset: 2px !important;
}

/* ----- (2) Lang switcher (both -er / singular) ----- */
.lang-switcher a,
.lang-switcher a:link,
.lang-switcher a:visited,
.lang-switch a,
.lang-switch a:link,
.lang-switch a:visited {
  color: inherit !important;
  text-decoration: none !important;
}
.lang-switcher a:hover,
.lang-switcher a:focus,
.lang-switcher a:active,
.lang-switch .lang-dropdown a:hover,
.lang-switch .lang-dropdown a:focus,
.lang-switch .lang-dropdown a:active,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:active {
  color: var(--gold-deep, #8A6F3F) !important;
  background-color: var(--bg-pure, #EFEADF) !important;
  background: var(--bg-pure, #EFEADF) !important;
  text-decoration: none !important;
  outline: none !important;
}
.lang-switcher a.active,
.lang-switch a.active,
.lang-switch .lang-dropdown a.active {
  color: var(--gold-deep, #8A6F3F) !important;
  background-color: var(--bg-pure, #EFEADF) !important;
  background: var(--bg-pure, #EFEADF) !important;
}
.lang-btn:hover,
.lang-btn:focus,
.lang-btn:active {
  border-color: var(--gold, #C9A96E) !important;
  color: var(--gold-deep, #8A6F3F) !important;
  background-color: transparent !important;
  outline: none !important;
}

/* ----- (3) Stories video cards — gold tone, NO BLUE EVER ----- */
.gh-stories,
.gh-stories *,
#stories,
#stories * {
  color: inherit;
}
.gh-stories a,
.gh-stories a:link,
.gh-stories a:visited,
#stories a,
#stories a:link,
#stories a:visited,
.video-card,
.video-card:link,
.video-card:visited,
.gh-story-card,
button.gh-story-card {
  color: inherit !important;
  text-decoration: none !important;
  background-color: transparent !important;
}
.gh-story-card:hover,
.gh-story-card:focus,
.gh-story-card:active,
.gh-story-card:focus-within,
button.gh-story-card:hover,
button.gh-story-card:focus,
button.gh-story-card:focus-visible,
button.gh-story-card:active,
.gh-stories a:hover,
.gh-stories a:focus,
.gh-stories a:active,
.gh-stories button:hover,
.gh-stories button:focus,
.gh-stories button:active,
.gh-stories button:focus-visible,
#stories a:hover,
#stories a:focus,
#stories a:active,
#stories button:hover,
#stories button:focus,
#stories button:active,
#stories button:focus-visible,
.video-card:hover,
.video-card:focus,
.video-card:active {
  color: var(--gold-deep, #8A6F3F) !important;
  background-color: transparent !important;
  background: transparent !important;
  text-decoration: none !important;
  outline: none !important;
  border-color: var(--gold, #C9A96E) !important;
  box-shadow: 0 20px 56px rgba(34,32,29,.16) !important;
}
.gh-story-card .gh-story-caption,
.gh-story-card:hover .gh-story-caption,
.gh-story-card:focus .gh-story-caption,
.gh-story-card:focus-within .gh-story-caption,
.gh-story-card:focus-visible .gh-story-caption {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--ink, #22201D) !important;
}

/* Video card overlay / play button — gold tone */
.video-card .play-icon,
.video-card .play-btn,
.video-card .video-play,
#stories .play-icon,
#stories .play-btn,
.gh-stories .play-icon,
.gh-stories .play-btn,
.gh-story-card .gh-story-play,
.gh-story-card .play-icon {
  color: var(--gold-glow, #D4B97A) !important;
}
.video-card:hover .play-icon,
.video-card:hover .play-btn,
.video-card:hover .video-play,
.gh-story-card:hover .gh-story-play,
.gh-story-card:focus .gh-story-play {
  color: var(--gold, #B89968) !important;
}

/* ----- (4) Belt-and-suspenders: descendant blue COLOR strip ----- */
.lang-switcher *:hover,
.lang-switcher *:focus,
.lang-switch *:hover,
.lang-switch *:focus,
.gh-stories *:hover,
.gh-stories *:focus,
.gh-stories *:focus-visible,
.gh-story-card *:hover,
.gh-story-card *:focus,
.gh-story-card *:focus-visible,
#stories *:hover,
#stories *:focus,
#stories *:focus-visible {
  color: var(--gold-deep, #8A6F3F) !important;
}

/* ===========================================================
 * G25 — Hero HOME-PATTERN unified (immersive full-bleed dark, centered)
 * text-align: center is direction-neutral. margins use logical auto.
 * =========================================================== */
.tx-hero .hero-img::before,
.tx-hero .hero-img::after,
.tx-hero::before,
.tx-hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.tx-hero {
  position: relative !important;
  background: var(--bg-stone, #22201D) !important;
  display: block !important;
  text-align: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 640px !important;
  max-width: none !important;
}
.tx-hero .hero-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  flex: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  overflow: hidden !important;
}
.tx-hero .hero-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.35 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.tx-hero .hero-img > img + ::after,
.tx-hero .hero-img::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(34,32,29,.55) 0%, rgba(34,32,29,.35) 50%, rgba(34,32,29,.85) 100%) !important;
  pointer-events: none !important;
}
.tx-hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  max-width: 880px !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
  padding: 120px 32px !important;
  flex: none !important;
  order: 0 !important;
  color: var(--pure, #FFFFFF) !important;
}
.tx-hero .hero-content .hero-badge,
.tx-hero .hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  font-size: 11px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: var(--gold-glow, #D4B97A) !important;
  font-weight: 500 !important;
  margin: 0 0 36px 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.tx-hero .hero-badge .dot { display: none !important; }
.tx-hero .hero-badge::before,
.tx-hero .hero-badge::after {
  content: '' !important;
  display: inline-block !important;
  width: 32px !important;
  height: 1px !important;
  background: var(--gold, #B89968) !important;
}
.tx-hero .hero-content h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 56px !important;
  line-height: 1.12 !important;
  letter-spacing: -.8px !important;
  margin: 0 0 24px 0 !important;
  color: var(--pure, #FFFFFF) !important;
  text-align: center !important;
}
.tx-hero .hero-content h1 em,
.tx-hero .hero-content h1 .em {
  color: var(--gold-glow, #D4B97A) !important;
  font-style: italic !important;
}
.tx-hero .hero-content .hero-sub,
.tx-hero .hero-sub {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.80) !important;
  max-width: 620px !important;
  margin-inline: auto !important;
  margin-block: 0 48px !important;
  font-weight: 300 !important;
  text-align: center !important;
}
.tx-hero .hero-ctas {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 56px 0 !important;
}
.tx-hero .hero-ctas .btn-hp,
.tx-hero .hero-ctas a.btn-primary,
.tx-hero .hero-ctas > a:first-child {
  background: var(--pure, #fff) !important;
  color: var(--ink, #1A1611) !important;
  padding: 16px 36px !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background .25s !important;
  text-decoration: none !important;
}
.tx-hero .hero-ctas .btn-hp:hover,
.tx-hero .hero-ctas a.btn-primary:hover {
  background: var(--gold-glow, #D4B97A) !important;
}
.tx-hero .hero-ctas .btn-hs,
.tx-hero .hero-ctas a.btn-secondary,
.tx-hero .hero-ctas > a:nth-child(2) {
  background: transparent !important;
  color: var(--pure, #fff) !important;
  padding: 16px 36px !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 0 !important;
  transition: border .25s, background .25s !important;
  text-decoration: none !important;
}
.tx-hero .hero-ctas .btn-hs:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--gold-glow) !important;
}
.tx-hero .hero-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 680px !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(255,255,255,.18) !important;
  justify-content: center !important;
}
.tx-hero .hero-stat {
  text-align: center !important;
}
.tx-hero .hero-stat .num,
.tx-hero .hero-stat strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 46px !important;
  color: var(--gold-glow, #D4B97A) !important;
  letter-spacing: -.8px !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  white-space: nowrap !important;
}
.tx-hero .hero-stat .num small,
.tx-hero .hero-stat strong small {
  font-size: 18px !important;
  color: var(--gold-glow) !important;
  font-weight: 400 !important;
  vertical-align: baseline !important;
  margin-inline-start: 4px !important;
  letter-spacing: -.5px !important;
  font-style: normal !important;
  line-height: 1 !important;
}
.tx-hero .hero-stat .label,
.tx-hero .hero-stat span {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,.65) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
/* Hero-stat cycling cluster color (design-refresh 3차 color-pop) — glow variants for dark-band legibility */
.tx-hero .hero-stat.cl-gfat .num,
.tx-hero .hero-stat.cl-gfat .num small { color: var(--c-gfat-glow, #E19679) !important; }
.tx-hero .hero-stat.cl-lift .num,
.tx-hero .hero-stat.cl-lift .num small { color: var(--c-lift-glow, #DCBC72) !important; }
.tx-hero .hero-stat.cl-boost .num,
.tx-hero .hero-stat.cl-boost .num small { color: var(--c-boost-glow, #A1C79B) !important; }
@media (max-width: 768px) {
  .tx-hero { min-height: 540px !important; }
  .tx-hero .hero-content { padding: 80px 24px !important; }
  .tx-hero .hero-content h1 { font-size: 36px !important; line-height: 1.18 !important; }
  .tx-hero .hero-content .hero-sub { font-size: 15px !important; margin-bottom: 36px !important; }
  .tx-hero .hero-stats { gap: 16px !important; padding-top: 28px !important; }
  .tx-hero .hero-stat .num,
  .tx-hero .hero-stat strong { font-size: 32px !important; }
}

/* ===========================================================
 * G26 — Booking form z-index hierarchy (calendar / dropdown overlap block)
 * =========================================================== */
section.booking,
section.booking-cta,
#booking-form,
.booking-form,
form#consultationForm {
  position: relative !important;
  z-index: 50 !important;
}
.rb-cal-panel,
.rb-cal-panel.rb-cal-open,
#rb-cal-panel {
  position: absolute !important;
  z-index: 9999 !important;
  background: var(--pure, #fff) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
  border-radius: 12px !important;
}
.cc-drop.open,
.cf-cc-drop.open,
.msg-drop.open,
#ccDrop.open,
#msgDrop.open {
  position: absolute !important;
  z-index: 9999 !important;
  background: var(--pure, #fff) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
}
section.doctors,
section.promotions,
section.gh-stories,
section.visit-map,
section.location {
  position: relative !important;
  z-index: 1 !important;
}
iframe[src*="openstreetmap"],
iframe[src*="google.com/maps"],
iframe[src*="map"] {
  position: relative !important;
  z-index: 0 !important;
}

/* ===========================================================
 * gh-stories sitewide — grid + card (text-align:start for RTL)
 * =========================================================== */
.gh-stories { background: var(--bg, #EFEADF) !important; padding: 120px 40px !important; }
.gh-stories .section-head { text-align: center !important; max-width: var(--max, 1200px) !important; margin-inline: auto !important; margin-block: 0 56px !important; }
.gh-stories-grid {
  max-width: var(--max, 1200px) !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}
.gh-story-card {
  background: var(--bg-pure, #F6F1E6) !important;
  border: 1px solid var(--line, #DAD2BF) !important;
  padding: 0 !important;
  text-align: start !important;
  cursor: pointer !important;
  font: inherit !important;
  color: inherit !important;
  transition: transform .25s, border-color .25s, box-shadow .25s !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.gh-story-thumb { position: relative !important; aspect-ratio: 9/16 !important; overflow: hidden !important; background: #000 !important; }
.gh-story-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .6s !important; }
.gh-story-card:hover .gh-story-thumb img { transform: scale(1.05) !important; }
.gh-story-thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 55%, rgba(22,20,15,.55) 100%) !important;
  pointer-events: none !important;
}
/* Play button — centered via inset-inline-start:50% + translate; symmetric, RTL-safe */
.gh-story-play {
  position: absolute !important;
  inset-inline-start: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(34,32,29,.78) !important;
  color: var(--gold-glow, #D4B97A) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(2px) !important;
  transition: transform .25s, background .25s !important;
}
.gh-story-card:hover .gh-story-play {
  transform: translate(-50%, -50%) scale(1.08) !important;
  background: rgba(184,153,104,.85) !important;
  color: #fff !important;
}
.gh-story-play svg { margin-inline-start: 3px !important; }
.gh-story-duration {
  position: absolute !important;
  bottom: 12px !important;
  inset-inline-end: 14px !important;
  background: rgba(34,32,29,.7) !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  z-index: 2 !important;
}
.gh-story-meta { padding: 28px 28px 30px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.gh-story-meta h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  color: var(--ink, #1A1611) !important;
  letter-spacing: -.4px !important;
  line-height: 1.28 !important;
  margin-bottom: 12px !important;
}
.gh-story-meta p { font-size: 13.5px !important; color: var(--ink-soft, #5C564D) !important; line-height: 1.68 !important; margin: 0 !important; }
@media (max-width: 768px) {
  .gh-stories { padding: 80px 0 !important; }
  .gh-stories .section-head { padding: 0 24px !important; }
  .gh-stories-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    max-width: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 24px 16px !important;
    scrollbar-width: none !important;
  }
  .gh-stories-grid::-webkit-scrollbar { display: none !important; }
  .gh-story-card { flex: 0 0 280px !important; scroll-snap-align: start !important; }
}

/* ===========================================================
 * G11 — Comparison table mobile (sticky first column, logical inset)
 * =========================================================== */
.compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.compare-table { min-width: 720px !important; }
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky !important;
  inset-inline-start: 0 !important;
  z-index: 2 !important;
  background: var(--bg-pure, #F6F1E6) !important;
  min-width: 120px !important;
  font-size: 11px !important;
}

/* ===========================================================
 * G27 Mobile menu — Treatments accordion (text-align neutral; caret rotate symmetric)
 * =========================================================== */
.mobile-menu .mm-treatments {
  border-bottom: 1px solid rgba(34,32,29,.08);
}
.mobile-menu .mm-treatments summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  color: var(--ink, #22201D);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu .mm-treatments summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-treatments .mm-tcaret {
  transition: transform .25s ease;
  font-size: 14px;
}
.mobile-menu .mm-treatments[open] .mm-tcaret { transform: rotate(180deg); }
.mobile-menu .mm-treatments a {
  padding-block: 11px !important;
  padding-inline: 16px !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid rgba(34,32,29,.04) !important;
}

/* ===========================================================
 * CTA strength 2-tier (STRUCTURE-CANON §3-b)
 * body.gh-cta-informational (postmeta gh_cta_mode=informational, e.g. stem cell):
 *   soften booking CTA visual weight — no guarantee framing, informational tone.
 * =========================================================== */
body.gh-cta-informational .tx-hero .hero-ctas .btn-hp,
body.gh-cta-informational .tx-hero .hero-ctas a.btn-primary,
body.gh-cta-informational section.booking-cta .btn-primary,
body.gh-cta-informational .cta-strong .btn-primary {
  background: transparent !important;
  color: var(--gold-deep, #8A6F3F) !important;
  border: 1px solid var(--gold, #C9A96E) !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  box-shadow: none !important;
}
body.gh-cta-informational .tx-hero .hero-ctas .btn-hp:hover,
body.gh-cta-informational section.booking-cta .btn-primary:hover {
  background: rgba(201,169,110,.10) !important;
}
/* Informational: demote pulsing / high-emphasis booking affordances */
body.gh-cta-informational .cta-pulse,
body.gh-cta-informational .cta-urgent {
  animation: none !important;
  background: transparent !important;
  color: var(--ink-soft, #5C564D) !important;
}

/* ===========================================================
 * Inline pricing block (#pricing-inline) — P2: dedicated class so it is NOT
 * counted among the plain content-blocks. Neutral background, same rhythm.
 * =========================================================== */
.content-block.gh-pricing { background: var(--bg, #EFEADF); }

/* ===========================================================
 * Progressive FAQ (G47) — home + detail share one hook.
 * Hidden items collapse by default; the .faq-more toggle reveals them by
 * adding .faq-expanded on the enclosing .faq-section (gh-consult.js delegation).
 * =========================================================== */
.faq-section .faq-hidden { display: none; }
.faq-section.faq-expanded .faq-hidden { display: block; }
.faq-more {
  display: block;
  margin-inline: auto;
  margin-block: 32px 0;
  padding-block: 13px;
  padding-inline: 30px;
  background: transparent;
  border: 1px solid var(--gold-deep, #8A6F3F);
  color: var(--gold-deep, #8A6F3F);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.faq-more:hover,
.faq-more:focus-visible {
  background: var(--gold-deep, #8A6F3F) !important;
  color: var(--pure, #fff) !important;
}
.faq-section.faq-expanded .faq-more { display: none; }

/* ===========================================================
 * Mobile-only B/A duplicate (§7-α-3) — #m-before-after
 * Desktop gallery (.ba-section) hides < 900px; the mobile clone shows only there.
 * =========================================================== */
.m-before-after { display: none; }
.m-before-after .mba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 560px;
  margin-inline: auto;
  margin-block: 0;
}
.m-before-after .ba-pair-card {
  background: var(--bg-marble, #2E2A26);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.m-before-after .ba-pair-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.08);
}
.m-before-after .ba-pair-imgs figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: #000;
}
.m-before-after .ba-pair-imgs img { width: 100%; height: 100%; object-fit: cover; }
.m-before-after .ba-pair-imgs figcaption {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 3px 8px;
  font-weight: 600;
  text-transform: uppercase;
}
.m-before-after .ba-pair-cap {
  padding: 12px 14px;
  font-size: 11.5px;
  color: rgba(255,255,255,.75);
  text-align: center;
  letter-spacing: .4px;
}
.m-before-after .ba-disclaimer {
  max-width: 560px;
  margin-inline: auto;
  margin-block: 24px 0;
  padding: 16px 20px;
  background: rgba(255,255,255,.05);
  border-inline-start: 3px solid var(--gold, #B89968);
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}
@media (max-width: 900px) {
  .ba-section.d-only { display: none !important; }
  .m-before-after { display: block !important; }
}

/* ===========================================================
 * DETAIL BODY CONTENT — canary fragment (gfat-hub-sections-en.html)
 * All rules below style the writer body that renders at {{SECTIONS}} inside
 * shell-ghealing-detail-en.html. Shells self-style chrome via inline <style>;
 * the body fragment has NO inline CSS and relies entirely on this sheet.
 * Visual language mirrors the shell tokens exactly (Spectral display / Geist body,
 * gold-deep accents, --bg cream / --bg-pure card, --line borders, --max 1340px).
 * Fully logical properties. No blue hex. No !important spam.
 * =========================================================== */

/* ----- Shared section-head / kicker / lead (generic base — matches home shell) ----- */
.da-section .section-head,
.protocol .section-head,
.content-block .section-head,
.ba-section .section-head,
.faq-section .section-head,
.content-cta .section-head {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  margin-block: 0 48px;
}
.section-head .kicker,
.content-cta .kicker,
.faq-section .kicker {
  display: inline-block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold-deep, #8A6F3F);
  font-weight: 600;
  margin-block-end: 18px;
}
.section-head h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 50px);
  color: var(--ink, #1A1611);
  letter-spacing: -1px;
  line-height: 1.12;
  margin: 0;
}
.section-head h2 .em,
.content-cta h2 .em,
.faq-q .em {
  font-style: italic;
  color: var(--gold-deep, #8A6F3F);
  font-weight: 400;
}
.section-head .lead {
  margin-block-start: 20px;
  color: var(--ink-soft, #5C564D);
  font-size: 15px;
  line-height: 1.8;
  max-width: 640px;
  margin-inline: auto;
}

/* ----- Generic buttons (body primary / ghost — standalone base) ----- */
a.btn-primary,
.cb-cta-inline .btn-primary,
.content-cta a.btn-primary {
  display: inline-block;
  background: var(--ink, #1A1611);
  color: var(--pure, #fff);
  padding-block: 16px;
  padding-inline: 36px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink, #1A1611);
  transition: background .25s, color .25s, border-color .25s;
}
a.btn-primary:hover,
.cb-cta-inline .btn-primary:hover,
.content-cta a.btn-primary:hover {
  background: var(--gold-deep, #8A6F3F);
  border-color: var(--gold-deep, #8A6F3F);
  color: var(--pure, #fff);
}
a.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--ink, #1A1611);
  padding-block: 16px;
  padding-inline: 34px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line, #DAD2BF);
  transition: border-color .25s, color .25s;
}
a.btn-ghost:hover {
  border-color: var(--gold, #B89968);
  color: var(--gold-deep, #8A6F3F);
}

/* ===========================================================
 * (A) TX-HERO body markup (.tx-hero-inner/.tx-hero-copy/...) — the writer
 * fragment uses a different sub-structure than the G25 home hero. Reuse the
 * dark full-bleed hero shell (already styled) and lay out the inner copy here.
 * =========================================================== */
.tx-hero .tx-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin-inline: auto;
  margin-block: 0;
  padding-block: 120px;
  padding-inline: 32px;
}
.tx-hero .tx-hero-copy { text-align: center; }
.tx-hero .tx-hero-copy .eyebrow {
  display: inline-block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold-glow, #D4B97A);
  font-weight: 500;
  margin-block-end: 28px;
}
.tx-hero .tx-hero-copy h1 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -.8px;
  color: var(--pure, #fff);
  margin-block: 0 24px;
}
.tx-hero .tx-hero-copy h1 .em {
  font-style: italic;
  color: var(--gold-glow, #D4B97A);
  font-weight: 400;
}
.tx-hero .tx-hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,.80);
  max-width: 640px;
  margin-inline: auto;
  margin-block: 0 32px;
  font-weight: 300;
}
.tx-hero .tx-hero-anchors {
  list-style: none;
  padding: 0;
  margin-inline: auto;
  margin-block: 0 40px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: start;
}
.tx-hero .tx-hero-anchors li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
}
.tx-hero .tx-hero-anchors .ha-tick {
  color: var(--gold-glow, #D4B97A);
  font-weight: 400;
  flex: 0 0 auto;
  line-height: 1.55;
}
.tx-hero .tx-hero-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Hero-scoped button skins override the generic body button base */
.tx-hero .tx-hero-cta .btn-primary {
  background: var(--pure, #fff);
  color: var(--ink, #1A1611);
  border-color: var(--pure, #fff);
}
.tx-hero .tx-hero-cta .btn-primary:hover {
  background: var(--gold-glow, #D4B97A);
  border-color: var(--gold-glow, #D4B97A);
  color: var(--ink, #1A1611);
}
.tx-hero .tx-hero-cta .btn-ghost {
  color: var(--pure, #fff);
  border-color: rgba(255,255,255,.4);
}
.tx-hero .tx-hero-cta .btn-ghost:hover {
  border-color: var(--gold-glow, #D4B97A);
  color: var(--pure, #fff);
}

/* ===========================================================
 * (B) DA-SECTION — AI-Overviews direct-answer highlight block (hero-adjacent).
 * Cream band, large readable lead type, gold logical start-border capsule.
 * =========================================================== */
.da-section {
  background: var(--bg, #EFEADF);
  padding-block: 88px;
  padding-inline: 40px;
}
.da-section .da-inner {
  max-width: 820px;
  margin-inline: auto;
  margin-block: 0;
  background: var(--bg-pure, #F6F1E6);
  border: 1px solid var(--line, #DAD2BF);
  border-inline-start: 3px solid var(--gold, #B89968);
  padding-block: 40px;
  padding-inline: 44px;
}
.da-section .da-q {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  letter-spacing: -.4px;
  color: var(--ink, #1A1611);
  margin: 0 0 18px;
}
.da-section .da-a {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink, #1A1611);
  font-weight: 400;
  margin: 0;
}

/* ===========================================================
 * (C) BA-SECTION desktop gallery — dark band, per-area groups, scroll-snap tracks.
 * (.d-only hide < 900px already handled; .m-before-after mobile clone already styled.)
 * =========================================================== */
.ba-section {
  background: var(--bg-stone, #22201D);
  padding-block: 110px;
  padding-inline: 40px;
}
.ba-section .section-head { max-width: 780px; }
.ba-section .section-head h2 { color: var(--pure, #fff); }
.ba-section .section-head h2 .em { color: var(--gold-glow, #D4B97A); }
.ba-section .section-head .lead { color: rgba(255,255,255,.72); }
.ba-group {
  max-width: var(--max, 1340px);
  margin-inline: auto;
  margin-block: 0 44px;
}
.ba-group:last-of-type { margin-block-end: 0; }
.ba-group-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.3px;
  margin: 0 0 20px;
  padding-inline-start: 2px;
}
.ba-group-title a {
  color: var(--gold-glow, #D4B97A);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color .2s;
}
.ba-group-title a:hover,
.ba-group-title a:focus-visible {
  border-block-end-color: var(--gold-glow, #D4B97A);
}
/* Horizontal scroll-snap track (swipe on touch, wraps on wide desktop) */
.ba-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold, #B89968) transparent;
}
.ba-track::-webkit-scrollbar { height: 6px; }
.ba-track::-webkit-scrollbar-thumb {
  background: var(--gold, #B89968);
  border-radius: 3px;
}
.ba-track::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.ba-pair {
  flex: 0 0 300px;
  scroll-snap-align: start;
  margin: 0;
  background: var(--bg-marble, #2E2A26);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.ba-pair .ba-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.08);
}
.ba-pair .ba-imgs img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #000;
  display: block;
}
.ba-pair figcaption {
  padding-block: 12px 14px;
  padding-inline: 14px;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: .3px;
  color: rgba(255,255,255,.72);
}
.ba-section .ba-disclaimer {
  max-width: var(--max, 1340px);
  margin-inline: auto;
  margin-block: 32px 0;
  padding-block: 16px;
  padding-inline: 20px;
  background: rgba(255,255,255,.05);
  border-inline-start: 3px solid var(--gold, #B89968);
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}

/* ===========================================================
 * (D) PROTOCOL / HOW IT WORKS — 4 numbered step cards (HowTo).
 * .protocol carries .bg-cream in the fragment; band bg handled in (F).
 * =========================================================== */
.protocol {
  padding-block: 100px;
  padding-inline: 40px;
}
.protocol-steps {
  list-style: none;
  padding: 0;
  max-width: var(--max, 1340px);
  margin-inline: auto;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.protocol-step {
  position: relative;
  background: var(--bg-pure, #F6F1E6);
  border: 1px solid var(--line, #DAD2BF);
  padding-block: 32px 28px;
  padding-inline: 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.protocol-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(34,32,29,.10);
  border-color: var(--gold, #B89968);
}
.protocol-step .ps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink, #1A1611);
  color: var(--gold-glow, #D4B97A);
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .5px;
  margin-block-end: 20px;
}
.protocol-step .ps-title {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -.3px;
  color: var(--ink, #1A1611);
  margin: 0 0 12px;
}
.protocol-step .ps-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft, #5C564D);
  margin: 0;
}

/* ===========================================================
 * (E) CONTENT-BLOCK — prose rhythm (definition/process/candidacy/effect/
 * precautions/recovery/comparison/pricing). bg-cream = cream band, plain = white.
 * =========================================================== */
.content-block {
  padding-block: 96px;
  padding-inline: 40px;
}
.content-block .cb-inner {
  max-width: 820px;
  margin-inline: auto;
  margin-block: 0;
}
.content-block .section-head {
  text-align: center;
  max-width: 780px;
  margin-block: 0 36px;
}
.content-block .cb-prose > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft, #5C564D);
  margin: 0 0 20px;
}
.content-block .cb-prose > p:last-child { margin-block-end: 0; }
.content-block .cb-prose a {
  color: var(--gold-deep, #8A6F3F);
  text-decoration: none;
  border-block-end: 1px solid rgba(138,111,63,.35);
  transition: border-color .2s, color .2s;
}
.content-block .cb-prose a:hover,
.content-block .cb-prose a:focus-visible {
  color: var(--ink, #1A1611);
  border-block-end-color: var(--gold-deep, #8A6F3F);
}
.content-block .cb-prose ul,
.content-block .cb-prose ol {
  margin: 0 0 20px;
  padding-inline-start: 22px;
}
.content-block .cb-prose li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft, #5C564D);
  margin-block-end: 8px;
}
/* Band backgrounds — cream vs white (works standalone or on .content-block/.protocol) */
.bg-cream { background: var(--bg, #EFEADF); }
.plain { background: var(--pure, #fff); }

/* Comparison table (G11 sticky first col already handled via .compare-*; this styles .cb-table) */
.cb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block-start: 8px;
  border: 1px solid var(--line, #DAD2BF);
}
.cb-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--font-body, system-ui, sans-serif);
  background: var(--pure, #fff);
}
.cb-table thead th {
  background: var(--bg-stone, #22201D);
  color: var(--pure, #fff);
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .2px;
  text-align: start;
  padding-block: 15px;
  padding-inline: 18px;
  vertical-align: top;
}
.cb-table tbody th[scope="row"] {
  text-align: start;
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-deep, #8A6F3F);
  background: var(--bg-pure, #F6F1E6);
  padding-block: 14px;
  padding-inline: 18px;
  white-space: nowrap;
  vertical-align: top;
}
.cb-table td {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft, #5C564D);
  padding-block: 14px;
  padding-inline: 18px;
  border-block-start: 1px solid var(--line-soft, #E3DCCB);
  vertical-align: top;
}
.cb-table tbody th[scope="row"] { border-block-start: 1px solid var(--line-soft, #E3DCCB); }
/* Swipe hint on narrow viewports */
.cb-table-wrap[data-swipe-hint="true"]::after {
  content: "\2190  swipe  \2192";
  display: none;
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute, #8A8378);
  padding-block: 8px;
}
.cb-note {
  margin-block: 18px 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-mute, #8A8378);
  font-style: italic;
}
.cb-cta-inline {
  margin-block: 28px 0;
  text-align: center;
}

/* ===========================================================
 * (F) FAQ — native <details>/<summary> base (works with .faq-hidden / .faq-more).
 * =========================================================== */
.faq-section {
  padding-block: 96px;
  padding-inline: 40px;
  background: var(--bg, #EFEADF);
}
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
details.faq-item {
  background: var(--bg-pure, #F6F1E6);
  border: 1px solid var(--line, #DAD2BF);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
details.faq-item:hover { border-color: var(--gold, #B89968); }
details.faq-item[open] {
  border-color: var(--gold, #B89968);
  box-shadow: 0 10px 30px rgba(34,32,29,.06);
}
.faq-item summary.faq-q,
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-block: 20px;
  padding-inline: 24px;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--ink, #1A1611);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
/* Chevron affordance (symmetric glyph; rotates open) */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--gold, #B89968);
  border-block-end: 2px solid var(--gold, #B89968);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .25s ease;
  margin-block-start: -4px;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-block-start: 4px;
}
.faq-item .faq-answer {
  padding-block: 0 22px;
  padding-inline: 24px;
}
.faq-item .faq-answer p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft, #5C564D);
  margin: 0;
}
.faq-item .faq-answer a {
  color: var(--gold-deep, #8A6F3F);
  text-decoration: none;
  border-block-end: 1px solid rgba(138,111,63,.35);
  transition: border-color .2s, color .2s;
}
.faq-item .faq-answer a:hover,
.faq-item .faq-answer a:focus-visible {
  color: var(--ink, #1A1611);
  border-block-end-color: var(--gold-deep, #8A6F3F);
}

/* ===========================================================
 * (G) CLOSING CTA — .content-cta (standard mode) dark centered band.
 * =========================================================== */
.content-cta {
  background: var(--bg-stone, #22201D);
  color: var(--pure, #fff);
  padding-block: 110px;
  padding-inline: 40px;
  text-align: center;
}
.content-cta .cc-inner {
  max-width: 720px;
  margin-inline: auto;
  margin-block: 0;
}
.content-cta .kicker { color: var(--gold-glow, #D4B97A); }
.content-cta h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.6px;
  color: var(--pure, #fff);
  margin: 0 0 20px;
}
.content-cta h2 .em { color: var(--gold-glow, #D4B97A); }
.content-cta p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin-inline: auto;
  margin-block: 0 32px;
}
.content-cta a.btn-primary {
  background: var(--pure, #fff);
  color: var(--ink, #1A1611);
  border-color: var(--pure, #fff);
}
.content-cta a.btn-primary:hover {
  background: var(--gold-glow, #D4B97A);
  border-color: var(--gold-glow, #D4B97A);
  color: var(--ink, #1A1611);
}

/* ===========================================================
 * (H) DETAIL BODY — mobile ≤ 900px (follows existing 900px breakpoint system)
 * =========================================================== */
@media (max-width: 900px) {
  .tx-hero .tx-hero-inner { padding-block: 80px; padding-inline: 24px; }
  .da-section { padding-block: 64px; padding-inline: 24px; }
  .da-section .da-inner { padding-block: 30px; padding-inline: 26px; }
  .ba-section { padding-block: 72px; padding-inline: 24px; }
  .protocol,
  .content-block,
  .faq-section { padding-block: 68px; padding-inline: 24px; }
  .content-cta { padding-block: 76px; padding-inline: 24px; }
  .protocol-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .content-block .cb-prose > p { font-size: 15px; }
  .cb-table-wrap[data-swipe-hint="true"]::after { display: block; }
}
@media (max-width: 560px) {
  .protocol-steps { grid-template-columns: 1fr; }
  .ba-pair { flex-basis: 240px; }
}

/* ===========================================================
 * (J) TX-HERO BA-SPLIT VARIANT — 유저 컨펌 0822: 상세 히어로=글좌/전후사진우
 * (G25 split 정합 · replaces .has-photo treatment-photo hero on detail pages).
 * Logical properties only.
 * =========================================================== */
.tx-hero.ba-split .tx-hero-inner {
  max-width: var(--max, 1340px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding-block: 96px;
}
.tx-hero.ba-split .tx-hero-copy { text-align: start; }
.tx-hero.ba-split .tx-hero-copy .eyebrow { margin-inline-start: 0; }
.tx-hero.ba-split .tx-hero-anchors { justify-content: flex-start; }
.tx-hero.ba-split .tx-hero-cta { justify-content: flex-start; }
.tx-hero-ba { margin: 0; min-width: 0; }
.tx-hero-ba .hba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(184, 153, 104, 0.35);
  border-radius: 16px;
}
.tx-hero-ba .hba-side { position: relative; min-width: 0; }
.tx-hero-ba .hba-side img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.tx-hero-ba .hba-label {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-start: 8px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 22, 17, 0.72);
  color: #EFEADF;
}
.tx-hero-ba .hba-label-after {
  background: var(--gold-deep, #8A6F3F);
  color: #FFF;
}
.tx-hero-ba .hba-caption {
  margin-block-start: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(239, 234, 223, 0.62);
  text-align: center;
}
@media (max-width: 900px) {
  .tx-hero.ba-split .tx-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 72px;
  }
  .tx-hero.ba-split .tx-hero-copy { text-align: center; }
  .tx-hero.ba-split .tx-hero-anchors,
  .tx-hero.ba-split .tx-hero-cta { justify-content: center; }
  .tx-hero-ba { max-width: 440px; margin-inline: auto; }
}


/* ===========================================================
 * (K) LANG SWITCHER STRUCTURE — pill button + dropdown card (G18 click-toggle).
 * Markup built by gh-consult.js ghBuildLangSwitcher(). Logical props only.
 * =========================================================== */
.lang-switch { position: relative; }
.lang-switch .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 9px 14px;
  border: 1px solid var(--line, #DDD5C4);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #1A1611);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lang-switch .lang-caret {
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s;
}
.lang-switch.open .lang-caret { transform: rotate(225deg) translateY(1px); }
.lang-switch .lang-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-inline-size: 88px;
  background: #FFF;
  border: 1px solid var(--line, #DDD5C4);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(26, 22, 17, .12);
  padding: 6px;
  display: none;
  z-index: 70;
}
.lang-switch.open .lang-dropdown { display: block; }
.lang-switch .lang-dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-align: center;
}


/* ===========================================================
 * (O) MOBILE MENU DRAWER — body.gh-menu-open reveal (G27).
 * Shell base rule keeps .mobile-menu/.mobile-menu-overlay display:none.
 * Logical properties only.
 * =========================================================== */
body.gh-menu-open { overflow: hidden; }
body.gh-menu-open .mobile-menu-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 17, .5);
  z-index: 90;
}
body.gh-menu-open .mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(84vw, 360px);
  background: #FFF;
  z-index: 95;
  padding: 64px 26px 32px;
  overflow-y: auto;
  box-shadow: -24px 0 48px rgba(26, 22, 17, .18);
}
.mobile-menu .close-menu {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink, #1A1611);
  cursor: pointer;
  padding: 6px;
}
.mobile-menu > a {
  padding: 13px 4px;
  font-family: var(--font-display, serif);
  font-size: 17px;
  color: var(--ink, #1A1611);
  border-block-end: 1px solid var(--line, #DDD5C4);
}
.mobile-menu .mm-treatments { border-block-end: 1px solid var(--line, #DDD5C4); }
.mobile-menu .mm-treatments summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 4px;
  font-family: var(--font-display, serif);
  font-size: 17px;
  color: var(--ink, #1A1611);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu .mm-treatments summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-treatments .mm-tcaret { font-size: 12px; color: var(--gold-deep, #8A6F3F); transition: transform .2s; }
.mobile-menu .mm-treatments[open] .mm-tcaret { transform: rotate(180deg); }
.mobile-menu .mm-treatments > a {
  display: block;
  padding-block: 10px;
  padding-inline: 18px 4px;
  font-size: 14.5px;
  color: var(--ink-soft, #5C564D);
}
.mobile-menu .mm-cta {
  margin-block-start: 18px;
  text-align: center;
  background: var(--gold-deep, #8A6F3F);
  color: #FFF !important;
  padding: 14px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-block-end: 0;
}


/* (N-2) GBP aggregate row + G badge glyph + card source line (0823 연동 강화) */
.gh-gmark::before {
  content: "G";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 50%;
  background: var(--gold-deep, #8A6F3F);
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body, system-ui, sans-serif);
}
.gh-review-src { font-size: 11.5px; color: var(--ink-mute, #8A8378); letter-spacing: .3px; }
.gh-review-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 22px;
  padding-block: 12px;
  padding-inline: 24px;
  background: var(--bg-pure, #F6F1E6);
  border: 1px solid var(--line, #DAD2BF);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.gh-review-aggregate:hover { border-color: var(--gold, #B89968); box-shadow: 0 10px 26px rgba(34,32,29,.08); }
.gh-review-agg-num { font-family: var(--font-display, serif); font-size: 26px; line-height: 1; color: var(--ink, #1A1611); }
.gh-review-agg-stars { color: var(--gold, #B89968); letter-spacing: 2px; font-size: 15px; }
.gh-review-agg-count { font-size: 12.5px; font-weight: 600; color: var(--gold-deep, #8A6F3F); letter-spacing: .4px; }


/* (N-3) RB 미러 화려화 (0824): 인용 장식·실사진 아바타·실명 링크·aggregate 배지 */
.gh-review-text::before {
  content: "\201C";
  color: var(--gold, #B89968);
  font-size: 26px;
  font-weight: 600;
  line-height: 0;
  vertical-align: -6px;
  margin-inline-end: 3px;
}
.gh-review-avatar-img {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(184, 153, 104, .35);
}
.gh-review-name-link { color: var(--ink, #1A1611); text-decoration: none; }
.gh-review-name-link:hover { text-decoration: underline; color: var(--gold-deep, #8A6F3F); }
.gh-review-aggregate {
  flex-direction: column;
  gap: 6px;
  padding-block: 20px;
  padding-inline: 40px;
  background: #FFF;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(34, 32, 29, .08);
}
.gh-review-agg-num {
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -2px;
}
.gh-review-agg-stars {
  color: #FBBC05;
  font-size: 20px;
  letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(251, 188, 5, .3);
}
.gh-review-agg-count { color: #1A73E8; }
.gh-review-aggregate:hover .gh-review-agg-count { text-decoration: underline; }

/* ===========================================================
 * [dir="rtl"] OVERRIDE BLOCK (file end)
 * Collects direction-dependent physical rules that cannot be expressed with
 * logical properties alone. Kept minimal — the bulk of the sheet is already
 * logical. ar carries dir="rtl" (set by gh-shell.php language_attributes).
 * =========================================================== */
[dir="rtl"] .tx-hero .hero-badge { direction: rtl !important; }
/* Accordion caret: mirror the summary chevron space-between layout is symmetric,
   but if any caret uses a directional glyph, flip horizontally in RTL. */
[dir="rtl"] .mobile-menu .mm-treatments .mm-tcaret { transform: scaleX(-1); }
[dir="rtl"] .mobile-menu .mm-treatments[open] .mm-tcaret { transform: scaleX(-1) rotate(180deg); }
/* Comparison swipe hint arrow (::after "← swipe →") — mirror glyph direction. */
[dir="rtl"] .compare-wrap::after { transform: scaleX(-1); }
/* Detail body: cb-table swipe-hint arrows use ←/→ glyphs — mirror in RTL. */
[dir="rtl"] .cb-table-wrap[data-swipe-hint="true"]::after { transform: scaleX(-1); }
/* FAQ chevron is a symmetric CSS-border caret (rotate only) — no flip needed. */
/* Story duration / play remain logical (inset-inline-*) — no override needed. */

/* ===========================================================
 * (I) CANARY WARMTH PASS — real photography + softer rhythm
 * User directive: hero needs a real photo to hook; warm the formal dark/gold look.
 * Adds real-photo fills (doctor cutouts, interior gallery, section photo bands),
 * softened card geometry (radius + soft shadow), and an OPTIONAL background-photo
 * variant for the detail tx-hero. Extends existing tokens only — no new palette,
 * no blue hex, logical properties throughout. Single source (G14).
 * =========================================================== */

/* ---- (I-1) DOCTOR CARDS — real cutout portraits on a warm plinth ---- */
.doctors .dr-img {
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  margin-block-end: 24px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(184,153,104,.16), transparent 62%),
    var(--bg-marble, #2E2A26) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.doctors .dr-img .dr-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  display: block !important;
}
/* Legacy diamond placeholder still sizes correctly if a photo is absent */
.doctors .dr-img .diamond { width: 52px; height: 52px; margin-block-end: 30%; }
.doctors .dr-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px 20px 26px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.doctors .dr-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184,153,104,.4);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
}

/* ---- (I-2) INTERIOR GALLERY — real photo tiles, soft rounded ---- */
.interior-grid .interior-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, #DAD2BF);
  background: var(--bg-pure, #F6F1E6);
}
.interior-grid .interior-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.interior-grid .interior-tile:hover img { transform: scale(1.04); }
/* Let a hero-scale tile span two columns for editorial rhythm */
.interior-grid .interior-tile.span-2 { grid-column: span 2; }
@media (max-width: 900px) {
  .interior-grid .interior-tile.span-2 { grid-column: span 1; }
}

/* ---- (I-3) PHOTO BAND — full-width warm image break between sections ---- */
.photo-band {
  position: relative;
  min-height: 560px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-stone, #22201D);
}
.photo-band .pb-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.photo-band .pb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .62;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(34,32,29,.55), rgba(34,32,29,.72));
  pointer-events: none;
}
.photo-band .pb-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  padding-block: 110px;
  padding-inline: 32px;
  text-align: center;
  color: var(--pure, #fff);
}
.photo-band .pb-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-glow, #D4B97A);
  font-weight: 600;
  margin-block-end: 18px;
}
.photo-band .pb-copy h2 {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.16;
  letter-spacing: -.6px;
  margin: 0;
  color: var(--pure, #fff);
}
.photo-band .pb-copy h2 .em { font-style: italic; color: var(--gold-glow, #D4B97A); }
.photo-band .pb-copy p {
  margin-block: 18px 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  font-weight: 300;
  max-width: 560px;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .photo-band { min-height: 340px; }
  .photo-band .pb-copy { padding: 48px 24px; }
}

/* ---- (I-4) SOFTER CARD GEOMETRY — warm up formal grids ---- */
/* Treatments, awards, process gain gentle radius + soft shadow on hover.
   Interior-strip / promotions keep their existing skins. Tokens only. */
.treatments .tx-card {
  border-radius: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.treatments .tx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(34,32,29,.12);
  border-color: var(--gold, #B89968);
}
/* The tx-grid uses a 1px gap "hairline table" look; soften the outer frame only. */
.treatments .tx-grid {
  border-radius: 16px;
  overflow: hidden;
}
/* awards = badge cards (gapped, bordered, year pill) — no contiguous frame clip */
.academic .award-item { border-radius: 14px; }
.intl-process .process-step {
  border-radius: 14px;
  padding: 28px 26px;
  background: var(--bg-pure, #F6F1E6);
  border: 1px solid var(--line, #DAD2BF);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.intl-process .process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(34,32,29,.10);
  border-color: var(--gold, #B89968);
}

/* ---- (I-5) DETAIL tx-hero — OPTIONAL background photo variant ---- */
/* Writer/shell adds .has-photo + a .tx-hero-bg > img sibling ahead of .tx-hero-inner.
   Reuses the dark full-bleed treatment already defined; just paints + dims the photo. */
.tx-hero.has-photo { background: var(--bg-stone, #22201D) !important; }
.tx-hero .tx-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.tx-hero .tx-hero-bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: .32 !important;
  display: block !important;
}
.tx-hero.has-photo .tx-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(34,32,29,.55) 0%, rgba(34,32,29,.35) 50%, rgba(34,32,29,.85) 100%) !important;
  pointer-events: none !important;
}

/* ===========================================================
 * (L) CLUSTER ACCENT APPLICATION  (design-refresh 2차, 0822)
 * Detail pages carry a cluster class on <body> (gh-cluster-gfat / -lift / -petit /
 * -boost / -stem) OR the detail body root can be scoped by .tx-hero variant class.
 * We expose one local --accent / --accent-soft / --accent-glow per cluster and let
 * the section rules below consume them. Fallback = brand gold, so a page with no
 * cluster class looks exactly as before (backward-compatible, single source G14).
 * =========================================================== */
.gh-cluster-gfat  { --accent: var(--c-gfat);  --accent-soft: var(--c-gfat-soft);  --accent-glow: var(--c-gfat-glow); }
.gh-cluster-lift  { --accent: var(--c-lift);  --accent-soft: var(--c-lift-soft);  --accent-glow: var(--c-lift-glow); }
.gh-cluster-petit { --accent: var(--c-petit); --accent-soft: var(--c-petit-soft); --accent-glow: var(--c-petit-glow); }
.gh-cluster-boost { --accent: var(--c-boost); --accent-soft: var(--c-boost-soft); --accent-glow: var(--c-boost-glow); }
.gh-cluster-stem  { --accent: var(--c-stem);  --accent-soft: var(--c-stem-soft);  --accent-glow: var(--c-stem-glow); }

/* tx-hero eyebrow gains an accent underline; ba-split After label + hero ticks tint */
.gh-cluster-gfat .tx-hero .tx-hero-copy .eyebrow,
.gh-cluster-lift .tx-hero .tx-hero-copy .eyebrow,
.gh-cluster-petit .tx-hero .tx-hero-copy .eyebrow,
.gh-cluster-boost .tx-hero .tx-hero-copy .eyebrow,
.gh-cluster-stem .tx-hero .tx-hero-copy .eyebrow {
  color: var(--accent-glow, var(--gold-glow, #D4B97A)) !important;
  padding-block-end: 10px;
  border-block-end: 2px solid var(--accent, var(--gold, #B89968));
}
.gh-cluster-gfat .tx-hero-ba .hba-label-after,
.gh-cluster-lift .tx-hero-ba .hba-label-after,
.gh-cluster-petit .tx-hero-ba .hba-label-after,
.gh-cluster-boost .tx-hero-ba .hba-label-after,
.gh-cluster-stem .tx-hero-ba .hba-label-after {
  background: var(--accent, var(--gold-deep, #8A6F3F));
  color: #fff;
}
.gh-cluster-gfat .tx-hero .tx-hero-anchors .ha-tick,
.gh-cluster-lift .tx-hero .tx-hero-anchors .ha-tick,
.gh-cluster-petit .tx-hero .tx-hero-anchors .ha-tick,
.gh-cluster-boost .tx-hero .tx-hero-anchors .ha-tick,
.gh-cluster-stem .tx-hero .tx-hero-anchors .ha-tick {
  color: var(--accent-glow, var(--gold-glow, #D4B97A));
}

/* da-section start-border + counters number tint to the cluster accent */
.gh-cluster-gfat .da-section .da-inner,
.gh-cluster-lift .da-section .da-inner,
.gh-cluster-petit .da-section .da-inner,
.gh-cluster-boost .da-section .da-inner,
.gh-cluster-stem .da-section .da-inner {
  border-inline-start-color: var(--accent, var(--gold, #B89968));
}
.gh-cluster-gfat .counters .counter-num,
.gh-cluster-lift .counters .counter-num,
.gh-cluster-petit .counters .counter-num,
.gh-cluster-boost .counters .counter-num,
.gh-cluster-stem .counters .counter-num {
  color: var(--accent, var(--gold-deep, #8A6F3F));
}

/* FAQ open-state chevron + open border pick up the accent; da/faq section-head kicker tint */
.gh-cluster-gfat .faq-item[open] summary::after,
.gh-cluster-lift .faq-item[open] summary::after,
.gh-cluster-petit .faq-item[open] summary::after,
.gh-cluster-boost .faq-item[open] summary::after,
.gh-cluster-stem .faq-item[open] summary::after {
  border-color: var(--accent, var(--gold, #B89968));
}

/* photo-band overlay picks up a faint cluster tint over the dark scrim */
.gh-cluster-gfat .photo-band::after {
  background: linear-gradient(180deg, rgba(34,32,29,.50), rgba(34,32,29,.68)), rgba(191,100,67,.20);
}
.gh-cluster-lift .photo-band::after {
  background: linear-gradient(180deg, rgba(34,32,29,.50), rgba(34,32,29,.68)), rgba(164,126,55,.20);
}
.gh-cluster-petit .photo-band::after {
  background: linear-gradient(180deg, rgba(34,32,29,.50), rgba(34,32,29,.68)), rgba(184,98,116,.20);
}
.gh-cluster-boost .photo-band::after {
  background: linear-gradient(180deg, rgba(34,32,29,.50), rgba(34,32,29,.68)), rgba(103,148,102,.22);
}
.gh-cluster-stem .photo-band::after {
  background: linear-gradient(180deg, rgba(34,32,29,.50), rgba(34,32,29,.68)), rgba(100,118,142,.21);
}

/* ===========================================================
 * (M) BODY-VARIANT PROMOTIONS — G-fat / body-contouring affinity cards.
 * Renders the promotions-body-en.html partial. Warm terracotta accent (body
 * cluster) instead of the generic gold; still consultation-based, price 0.
 * =========================================================== */
.promotions.promo-body .promo-card.promo-fallback .promo-fallback-inner .pf-kicker {
  color: var(--c-gfat-glow, #D89A82);
}
.promotions.promo-body .promo-card.promo-fallback {
  background: linear-gradient(135deg, #241C18, #33261F);
}
.promotions.promo-body .promo-card.promo-fallback .pf-cta {
  border-color: var(--c-gfat-glow, #D89A82);
  color: var(--c-gfat-glow, #D89A82);
}

/* ===========================================================
 * (N) GBP REVIEWS SECTION — real Google review cards (data injected by
 * gh-gbp-reviews.php via [[GH_REVIEWS]] / the_content filter). No fabricated
 * reviews here: the track is empty until injection, and an empty track hides
 * the whole section (:empty guard + pre-injection display:none fallback).
 * Card chrome: star row (gold), name initial avatar, plain text, Google badge.
 * National flags intentionally omitted (privacy + i18n neutrality). Logical props.
 * =========================================================== */
.gh-reviews {
  background: linear-gradient(180deg, #FFF6E4 0%, var(--bg, #EFEADF) 100%);
  padding-block: 110px;
  padding-inline: 40px;
}
/* Empty-state guard: hide the section entirely until real cards are injected. */
.gh-reviews .gh-review-track:empty { display: none; }
.gh-reviews:has(.gh-review-track:empty) { display: none; }
.gh-reviews .section-head {
  text-align: center;
  max-width: var(--max, 1200px);
  margin-inline: auto;
  margin-block: 0 48px;
}
.gh-review-track {
  max-width: var(--max, 1340px);
  margin-inline: auto;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gh-review-card {
  background: #FFF;
  border: 1px solid var(--line, #DAD2BF);
  border-radius: 14px;
  padding-block: 26px 24px;
  padding-inline: 26px;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.gh-review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(34,32,29,.10);
  border-color: var(--gold, #B89968);
}
.gh-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 14px;
}
.gh-review-stars {
  display: inline-flex;
  gap: 2px;
  color: #FBBC05;
  font-size: 17px;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(251, 188, 5, .3);
}
.gh-review-gbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute, #8A8378);
}
.gh-review-gbadge .gh-gmark {
  inline-size: 15px;
  block-size: 15px;
  display: inline-block;
}
.gh-review-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft, #5C564D);
  margin: 0 0 20px;
  flex: 1;
}
.gh-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  border: 0;
  padding: 0;
}
.gh-review-avatar {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--gold-deep, #8A6F3F);
  color: var(--pure, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 400;
  flex: 0 0 auto;
}
.gh-review-meta { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.gh-review-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #1A1611);
  letter-spacing: .2px;
}
.gh-review-date {
  font-size: 11.5px;
  color: var(--ink-mute, #8A8378);
  letter-spacing: .3px;
}
@media (max-width: 900px) {
  .gh-reviews { padding-block: 72px; padding-inline: 24px; }
  .gh-review-track { grid-template-columns: 1fr; gap: 16px; }
}