@charset "utf-8";
/* ==========================================================================
   신촌 라플라스의원 — ko/ 디자인 시스템
   셸 = REBEAUTY 템플릿 260728a2lp0 (rb-* 토큰·아톰·헤더·드로어·푸터·캐러셀·리빌)
   팔레트/타이포 = 기존 라플라스 사이트(m.esbeauty.kr · pc_9411.css) 실측 전사
     · #B34E5D  브랜드 로즈  (--rdx-main)      흰 위 5.04:1 → 본문급 사용 가능
     · #873744  딥 로즈      (--rdx-main-dark) 흰 위 7.89:1
     · #191613  텍스트 잉크  (--rdx-text)
     · #766D65  보조 텍스트  (--rdx-sub)       흰 위 5.34:1
     · #7C7065  브라운       (--rdx-brown)
     · #FBF7F3  아이보리     (--rdx-ivory)
     · #F5F3F2  그레이       (--rdx-gray)
     · #F8F0E7  크림 밴드    (시그니처 슬라이더 실측)
     · #DEE9EE  페일 블루    (보조 서피스 실측)
   타이포 = Pretendard/Noto Sans KR 본문 + Cormorant Garamond 라틴 디스플레이
            letter-spacing:-.04em · line-height:1.7 (기존 사이트 body 실측)
   ========================================================================== */
:root{
  /* ---- palette ---- */
  --rb-paper:#FFFFFF;
  --rb-paper-2:#FBF7F3;          /* 아이보리 서피스 */
  --rb-mist:#F8F0E7;             /* 크림 밴드 */
  --rb-haze:#F5F3F2;             /* 그레이 서피스 */
  --rb-blue:#DEE9EE;             /* 페일 블루 보조 */
  --rb-line:#EFEBE7;
  --rb-line-2:#E5DFD9;
  --rb-line-3:#D8D0C8;
  --rb-line-4:#C6BCB3;
  --rb-ink-900:#191613;          /* 흰 17.7:1 */
  --rb-ink-800:#2B2521;          /* 흰 14.5:1 */
  --rb-ink-700:#4A423C;          /* 흰 9.0:1 */
  --rb-ink-600:#7C7065;          /* 브라운 — 흰 4.90:1 */
  --rb-ink-500:#766D65;          /* 보조 텍스트 — 흰 5.34:1 */
  --rb-ink-400:#A0968E;          /* 장식 전용 — 흰 2.9:1 */
  --rb-cyan-400:#E0A9B1;         /* 어두운 지면 위 로즈 하이라이트 */
  --rb-cyan-500:#B34E5D;         /* 브랜드 로즈 필 */
  --rb-cyan-600:#A84654;         /* 마크·보더 */
  --rb-cyan-800:#B34E5D;         /* 텍스트급 액센트 — 흰 5.04:1 */
  --rb-cyan-900:#873744;         /* 딥 액센트 — 흰 7.89:1 */
  --rb-gold:rgba(212,196,156,.74);

  /* ---- semantic ---- */
  --rb-bg:var(--rb-paper);
  --rb-fg:var(--rb-ink-800);
  --rb-heading:var(--rb-ink-900);
  --rb-heading-soft:var(--rb-ink-800);
  --rb-muted:var(--rb-ink-500);
  --rb-accent:var(--rb-cyan-800);
  --rb-accent-deep:var(--rb-cyan-900);
  --rb-accent-fill:var(--rb-cyan-500);
  --rb-accent-mark:var(--rb-cyan-600);
  --rb-on-accent:#FFFFFF;
  --rb-on-fill:#FFFFFF;
  --rb-on-dark:#FFFFFF;
  --rb-muted-inv:#E7DED8;
  --rb-line-inv:rgba(255,255,255,.24);
  --rb-scrim:rgba(0,0,0,.55);
  --rb-scrim-soft:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 100%);
  --rb-veil:rgba(255,255,255,.94);
  --rb-grad-mist:linear-gradient(180deg,#FFFFFF 0%,#FBF7F3 100%);
  --rb-grad-mark:linear-gradient(135deg,#B34E5D 0%,#873744 100%);

  /* ---- type ---- */
  --rb-font-body:"Pretendard","Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --rb-font-display:"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --rb-font-serif:"Cormorant Garamond","Pretendard",Georgia,serif;
  --rb-fs-cap:0.8125rem;         /* 13 */
  --rb-fs-sm:0.875rem;           /* 14 */
  --rb-fs-body:1rem;             /* 16 */
  --rb-fs-body-lg:1.0625rem;     /* 17 */
  --rb-fs-lead:clamp(1rem,.9rem + .4vw,1.25rem);            /* 16 → 20 */
  --rb-fs-h3:clamp(1.125rem,1rem + .5vw,1.375rem);          /* 18 → 22 */
  --rb-fs-h2:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);       /* 22 → 30 */
  --rb-fs-h1:clamp(1.625rem,1.2rem + 1.7vw,2.25rem);        /* 26 → 36 */
  --rb-fs-display:clamp(1.75rem,1rem + 3.2vw,3.125rem);     /* 28 → 50 (기존 h2 실측) */
  --rb-fs-hero:clamp(1.875rem,1rem + 3.8vw,3.125rem);       /* 30 → 50 (히어로 실측) */
  --rb-lh-tight:1.32;
  --rb-lh-snug:1.5;
  --rb-lh-body:1.7;
  --rb-track-tight:-0.04em;      /* 기존 body letter-spacing 실측 */
  --rb-track-wide:0.22em;
  --rb-track-kicker:0.2em;       /* .rdx-label 실측 */
  --rb-w-light:300; --rb-w-reg:400; --rb-w-med:500; --rb-w-bold:700;

  /* ---- spacing / metrics ---- */
  --rb-s1:0.5rem; --rb-s2:0.75rem; --rb-s3:1rem; --rb-s4:1.5rem;
  --rb-s5:2rem; --rb-s6:3rem; --rb-s7:4.5rem; --rb-s8:6.25rem;
  --rb-container:75rem;          /* 1200 */
  --rb-container-wide:90rem;     /* 1440 — .rdx-inner 실측 */
  --rb-container-mid:60rem;
  --rb-container-narrow:44rem;
  --rb-container-copy:34rem;
  --rb-gutter:clamp(1.25rem,.5rem + 2.4vw,2.5rem);
  --rb-slide-h:min(100svh,50rem);
  --rb-slide-h-sm:min(80svh,37.5rem);
  --rb-sec-pad:clamp(3.75rem,2rem + 5.5vw,6.25rem);   /* 60 → 100 (기존 섹션 패딩 실측) */
  --rb-sec-pad-lg:clamp(5rem,2.5rem + 7vw,8rem);
  --rb-gap:clamp(.75rem,.45rem + .95vw,1.25rem);
  --rb-gap-lg:clamp(1.25rem,.7rem + 1.7vw,2.25rem);
  --rb-header-h:5.5rem;   /* 상단 메뉴바 — 영문+국문 2단 라벨 */
  --rb-radius-sm:0.25rem;
  --rb-radius:0.5rem;
  --rb-radius-lg:1.5rem;
  --rb-radius-pill:999px;
  --rb-shadow-sm:0 2px 10px rgba(25,22,19,.05);
  --rb-shadow-md:0 12px 32px rgba(25,22,19,.08);
  --rb-shadow-lg:0 24px 60px rgba(25,22,19,.12);

  /* ---- motion ---- */
  --rb-dur-micro:140ms; --rb-dur-1:220ms; --rb-dur-2:480ms; --rb-dur-3:720ms;
  --rb-ease:cubic-bezier(0.22,0.61,0.36,1);
  --rb-ease-io:cubic-bezier(0.4,0,0.2,1);
  --rb-stagger-step:var(--rb-dur-micro);
  --rb-carousel-interval:6000ms;
}
/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;margin:0;background:var(--rb-bg);color:var(--rb-fg);
  font-family:var(--rb-font-body);font-size:var(--rb-fs-body);line-height:var(--rb-lh-body);
  word-break:keep-all;-webkit-font-smoothing:antialiased}
body.rb-lock{overflow:hidden}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--rb-heading);line-height:var(--rb-lh-tight);
  font-weight:var(--rb-w-bold);letter-spacing:var(--rb-track-tight)}
h1{font-size:var(--rb-fs-h1)}
h2{font-size:var(--rb-fs-h2)}
h3{font-size:var(--rb-fs-h3)}
p{margin:0}
figure{margin:0}          /* UA 기본 margin:1em 40px 이 미디어 프레임 폭을 깎는 함정 차단 */
ul,ol{margin:0}
img,svg,video,iframe{max-width:100%}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--rb-cyan-800);outline-offset:3px}
.rb-sr{position:absolute;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}
.rb-skip{position:absolute;left:0;top:0;z-index:200}
.rb-skip:focus{position:fixed;width:auto;height:auto;margin:0;clip:auto;clip-path:none;
  padding:0.75rem 1.25rem;background:var(--rb-ink-900);color:var(--rb-on-dark);text-decoration:none}

/* ===== atoms (작게 — 섹션 워커는 파라미터화만 한다) ===== */
.rb-container{width:100%;max-width:var(--rb-container);margin-inline:auto;
  padding-inline:var(--rb-gutter)}
.rb-container--wide{max-width:var(--rb-container-wide)}
.rb-container--mid{max-width:var(--rb-container-mid)}
.rb-container--narrow{max-width:var(--rb-container-narrow)}
.rb-container--copy{max-width:var(--rb-container-copy)}

/* pad_block/pad_inline 실측 0 — 기본은 무패딩이고, 높이는 슬라이드 변형이 만든다 */
.rb-sec{position:relative;padding-block:var(--rb-sec-pad);padding-inline:0}
.rb-sec--slide{min-block-size:var(--rb-slide-h);display:flex;flex-direction:column;
  justify-content:center}
.rb-sec--slide-sm{min-block-size:var(--rb-slide-h-sm)}
.rb-sec--pad{padding-block:var(--rb-sec-pad-lg)}
.rb-sec--mist{background:var(--rb-mist)}
.rb-sec--haze{background:var(--rb-haze)}
.rb-sec--paper2{background:var(--rb-paper-2)}
.rb-sec--grad{background:var(--rb-grad-mist)}
.rb-sec--dark{background:var(--rb-ink-900);color:var(--rb-on-dark)}
.rb-sec--dark h1,.rb-sec--dark h2,.rb-sec--dark h3{color:var(--rb-on-dark)}
.rb-sec--dark p{color:var(--rb-muted-inv)}
.rb-sec--dark .rb-kicker{color:var(--rb-cyan-400)}

.rb-display{font-family:var(--rb-font-display);font-size:var(--rb-fs-display);
  font-weight:var(--rb-w-bold);line-height:var(--rb-lh-tight);
  letter-spacing:var(--rb-track-tight);color:var(--rb-heading)}
.rb-display--hero{font-size:var(--rb-fs-hero)}
.rb-display--light{font-weight:var(--rb-w-light)}
.rb-display em{font-style:normal;color:var(--rb-accent)}   /* s13 강조어 전사 — 텍스트급 시안 */
.rb-lead{font-size:var(--rb-fs-lead);line-height:var(--rb-lh-snug);color:var(--rb-muted)}
.rb-body-lg{font-size:var(--rb-fs-body-lg)}
.rb-cap{font-size:var(--rb-fs-cap);color:var(--rb-muted)}
.rb-sec--dark .rb-lead,.rb-sec--dark .rb-cap{color:var(--rb-muted-inv)}

.rb-kicker{display:inline-block;font-size:var(--rb-fs-cap);font-weight:var(--rb-w-med);
  letter-spacing:var(--rb-track-kicker);text-transform:uppercase;color:var(--rb-accent)}
.rb-kicker--mark::before{content:"+";margin-inline-end:0.4em;color:var(--rb-accent-mark);
  font-weight:var(--rb-w-bold)}

/* AA 가드 — --rb-ink-400(#858585 3.2:1) · --rb-cyan-500(2.20:1) · --rb-cyan-600(2.56:1)
   · --rb-cyan-400 은 라이트 지면에서 **텍스트 색 금지**(필·보더·아이콘·큰장식 전용).
   텍스트급 시안은 --rb-accent(cyan-800) / --rb-accent-deep(cyan-900) 만 쓴다.
   시안 필 위 글자는 --rb-on-fill(ink-900), 흰 글자는 --rb-cyan-800 배경에서만. */
.rb-on-photo{color:var(--rb-on-dark)}
.rb-on-photo .rb-kicker{color:var(--rb-on-dark)}
.rb-on-photo .rb-lead{color:var(--rb-muted-inv)}

/* 미디어 아톰 — aspect-ratio + object-fit:cover 잠금(v21 §S-5).
   refine 이 이미지 생성과 겹치므로 jpg 부재(404) 시에도 박스가 붕괴하면 안 된다:
   높이는 aspect-ratio 가, 바탕은 mist 그라데이션이 유지한다. */
.rb-frame{position:relative;display:block;overflow:hidden;border-radius:var(--rb-radius);
  aspect-ratio:var(--rb-ar, 1 / 1);background:var(--rb-grad-mist)}
.rb-frame > img,.rb-frame > video,.rb-frame > picture,.rb-frame > picture > img,
.rb-frame > iframe{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;border:0}
.rb-frame--sq{--rb-ar:1 / 1}                  /* 1.00 실측 45회(최빈) */
.rb-frame--wide{--rb-ar:16 / 9}               /* 1.78 실측 14회 */
.rb-frame--photo{--rb-ar:7 / 4}               /* 1.75 실측 5회 */
.rb-frame--card{--rb-ar:6 / 5}                /* 1.20 실측 4회 */
.rb-frame--tall{--rb-ar:2 / 3}                /* 0.66 실측 4회 */
.rb-frame--cinema{--rb-ar:17 / 9}             /* 1.89 실측 2회 */
.rb-frame--slide{--rb-ar:36 / 25;border-radius:0}   /* 1440x1000 슬라이드 전면 */
.rb-frame--round{--rb-ar:1 / 1;border-radius:50%}   /* about s1 원형 인물 모티프 전사 */
.rb-frame--flat{border-radius:0}
.rb-frame--soft{border-radius:0 var(--rb-radius-lg) 0 var(--rb-radius-lg)}  /* 웰니스 카드 실측 */
.rb-frame__scrim{position:absolute;inset:0;background:var(--rb-scrim-soft)}
.rb-media{display:block;width:100%;height:auto;aspect-ratio:var(--rb-ar, 1 / 1);
  object-fit:cover;object-position:center;background:var(--rb-grad-mist)}

.rb-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  min-height:2.75rem;padding:0.6875rem 1.375rem;border-radius:var(--rb-radius-pill);
  border:1px solid var(--rb-line-3);background:transparent;color:var(--rb-ink-800);
  text-decoration:none;font-size:var(--rb-fs-body);font-weight:var(--rb-w-med);
  letter-spacing:0.01em;cursor:pointer;
  transition:background-color var(--rb-dur-1) var(--rb-ease),
             color var(--rb-dur-1) var(--rb-ease),
             border-color var(--rb-dur-1) var(--rb-ease)}
.rb-btn:hover{border-color:var(--rb-ink-800);background:var(--rb-ink-800);color:var(--rb-on-dark)}
.rb-btn__plus{font-weight:var(--rb-w-bold);color:var(--rb-accent)}
.rb-btn:hover .rb-btn__plus{color:var(--rb-cyan-400)}
.rb-btn--solid{background:var(--rb-cyan-800);border-color:var(--rb-cyan-800);
  color:var(--rb-on-accent);min-height:3rem;padding-inline:1.625rem}
.rb-btn--solid .rb-btn__plus{color:var(--rb-on-accent)}
.rb-btn--solid:hover{background:var(--rb-cyan-900);border-color:var(--rb-cyan-900);
  color:var(--rb-on-accent)}
.rb-btn--ink{background:var(--rb-ink-900);border-color:var(--rb-ink-900);color:var(--rb-on-dark);
  min-height:3rem;padding-inline:1.625rem}
.rb-btn--ink:hover{background:var(--rb-ink-800);border-color:var(--rb-ink-800)}
.rb-btn--ghost{border-color:var(--rb-line-3);color:var(--rb-ink-800)}
.rb-btn--paper{background:var(--rb-paper);border-color:var(--rb-paper);color:var(--rb-ink-800)}
.rb-btn--paper:hover{background:var(--rb-mist);border-color:var(--rb-mist);color:var(--rb-ink-900)}
.rb-sec--dark .rb-btn,.rb-on-photo .rb-btn{color:var(--rb-on-dark);border-color:var(--rb-line-inv)}
.rb-sec--dark .rb-btn:hover,.rb-on-photo .rb-btn:hover{background:var(--rb-on-dark);
  border-color:var(--rb-on-dark);color:var(--rb-ink-900)}

.rb-grid{display:grid;grid-template-columns:repeat(var(--rb-cols, 3), minmax(0, 1fr));
  gap:var(--rb-gap-lg)}
/* 폴백은 롱핸드를 직접 덮는다 — 섹션/인라인 --rb-cols 가 이기지 못하도록 */
@media (max-width:60rem){.rb-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:34rem){.rb-grid{grid-template-columns:repeat(1, minmax(0, 1fr))}}

/* ===== 캐러셀 마크업 계약(§MOTION-3/4/7) — 런타임은 셸이 소유, 워커는 마크업만 =====
   루트 [data-rb-carousel] · 트랙 [data-rb-track] · 슬라이드 .rb-slide(첫 장에 .is-active)
   · 컨트롤 .rb-ctrl[data-rb-prev|data-rb-next] · 도트 [data-rb-dots]
   ★ .rb-arrow 금지 — 'row' 부분문자열이 colsOf branch b 의 그물에 걸린다.
   ★ 겹쳐쌓기 필수 — 가로 나열은 대기 슬라이드가 섹션 잉크를 밀어 align skew FAIL 을 낸다.
   ★ visibility 로 상태를 만든다(슬라이드 기본 opacity:0 금지 — 리빌 관례 검사와 충돌) */
.rb-carousel{position:relative}
.rb-carousel__viewport{overflow:hidden}
.rb-track{display:flex;align-items:stretch}
.rb-slide{flex:0 0 100%;min-width:0;visibility:hidden;
  transition:opacity var(--rb-dur-2) var(--rb-ease)}
.rb-slide + .rb-slide{margin-inline-start:-100%}
.rb-slide.is-active{visibility:visible;position:relative;z-index:2}
.rb-carousel__ctrls{display:flex;align-items:center;gap:var(--rb-s2)}
.rb-ctrl{display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.75rem;block-size:2.75rem;padding:0;border:1px solid var(--rb-line-3);
  border-radius:50%;background:var(--rb-paper);color:var(--rb-ink-800);cursor:pointer;
  transition:background-color var(--rb-dur-1) var(--rb-ease),
             color var(--rb-dur-1) var(--rb-ease),
             border-color var(--rb-dur-1) var(--rb-ease)}
.rb-ctrl:hover{background:var(--rb-cyan-800);border-color:var(--rb-cyan-800);
  color:var(--rb-on-accent)}
.rb-ctrl svg{inline-size:1rem;block-size:1rem}
.rb-dots{display:flex;align-items:center;gap:0.5rem}
.rb-dots button{inline-size:0.5rem;block-size:0.5rem;padding:0;border:0;border-radius:50%;
  background:var(--rb-line-4);cursor:pointer;
  transition:background-color var(--rb-dur-1) var(--rb-ease),
             transform var(--rb-dur-1) var(--rb-ease)}
.rb-dots button[aria-current="true"]{background:var(--rb-cyan-800);transform:scale(1.4)}

/* ===== 리빌 — 허용 관례(.rb-reveal → .is-in)만. html.js 게이팅으로 no-JS 폴백 보장 ===== */
html.js .rb-reveal{opacity:0;transform:translate3d(0, 22px, 0)}
.rb-reveal{transition:opacity var(--rb-dur-3) var(--rb-ease),
                     transform var(--rb-dur-3) var(--rb-ease)}
html.js .rb-reveal.is-in{opacity:1;transform:translate3d(0, 0, 0)}
.rb-reveal[data-rb-step="1"]{transition-delay:var(--rb-stagger-step)}
.rb-reveal[data-rb-step="2"]{transition-delay:calc(var(--rb-stagger-step) * 2)}
.rb-reveal[data-rb-step="3"]{transition-delay:calc(var(--rb-stagger-step) * 3)}
.rb-reveal[data-rb-step="4"]{transition-delay:calc(var(--rb-stagger-step) * 4)}
.rb-reveal[data-rb-step="5"]{transition-delay:calc(var(--rb-stagger-step) * 5)}
.rb-reveal[data-rb-step="6"]{transition-delay:calc(var(--rb-stagger-step) * 6)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:var(--rb-dur-micro) !important;
    animation-iteration-count:1 !important;
    transition-duration:var(--rb-dur-micro) !important;
    transition-delay:var(--rb-dur-micro) !important;
    scroll-behavior:auto !important}
  html.js .rb-reveal{opacity:1;transform:none}
  .rb-slide{transition:none}
}

/* ==========================================================================
   chrome — 260728a2lp0  (H-CHROME · v22 §CHROME)

   ★ DUPLICATE-HEADER 판정 = **중복 없음 → 셸이 헤더의 단독 소유자다**(§CHROME-2-1).
     근거(실측, 전 15장 blueprint):
       · chrome.header_h = **0** — 레퍼런스 헤더는 흐름 높이가 0 인 오버레이다.
       · §0 이 헤더 밴드인 문서가 **0개**다. 전 문서의 §0 은 히어로 슬라이드
         (home/plastic/wellface/wellbody = F.B.1.d h1000 · about/derma/ophthal/… = F.N.*.l h1000
          · doctors = W.N.4.l h65 필터바 · notice/contact = h950 타이틀).
       · 즉 "섹션이 헤더를 재현하므로 셸이 비켜선다"의 **전제가 성립하지 않는다**.
     ⇒ `.rb-header--slim{display:none}` @≥60.06rem 을 걸면 전 15장의 데스크톱 내비가
       **0** 이 된다(메모리 '데스크톱 GNB 증발 함정' 과 동일 사고). 그래서 이 셸의 헤더는
       **전 폭에서 렌더**한다. 대신 오버레이 계약은 그대로 지킨다:
         position:absolute · top:0 · pointer-events:none(자식만 auto) · 흐름 높이 0
       → 섹션 박스 y/높이가 변하지 않으므로 자(§10) 지문은 불변이다.
     ⇒ 레퍼런스 자체가 **데스크톱에서도 햄버거 드로어**다(가로 GNB 없음: 중앙 로고 +
       우측 KOR/버거). 따라서 전 폭 드로어는 회피가 아니라 **충실 재현**이다.

   ★ 헤더 바에 --rb-veil(alpha .93) 을 깐다: AA 파서는 alpha<.5 를 투명으로 보고 부모를
     타고 올라가는데, 헤더는 <section> 밖이라 이미지-오버레이 면제도 못 받는다. 히어로
     사진 위에서 잉크 대비를 실측 가능하게 만드는 확실한 길이 불투명 서피스다.
   ========================================================================== */

/* ---- 오버레이 헤더 (흐름 높이 0) ---- */
.rb-header--slim{position:absolute;inset-inline:0;top:0;z-index:60;background:none;
  pointer-events:none}
.rb-header--slim > *{pointer-events:auto}

.rb-header__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:var(--rb-s3);min-block-size:var(--rb-header-h);
  padding-inline:var(--rb-gutter);background:var(--rb-veil);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--rb-line)}

.rb-header__side{display:flex;align-items:center;gap:var(--rb-s2);min-width:0}
.rb-header__side--end{justify-content:flex-end}

/* ---- 워드마크 — REBEAUTY 신규 저작(레퍼런스 로고 패스 복사 0) ---- */
.rb-mark{display:inline-flex;align-items:center;gap:0.625rem;text-decoration:none;
  color:var(--rb-ink-900)}
.rb-mark__glyph{flex:0 0 auto;inline-size:1.75rem;block-size:1.75rem}
.rb-mark__name{display:flex;flex-direction:column;line-height:1.1}
.rb-mark__word{font-size:var(--rb-fs-body-lg);font-weight:var(--rb-w-bold);
  letter-spacing:var(--rb-track-wide);white-space:nowrap}
.rb-mark__sub{font-style:normal;font-size:0.625rem;font-weight:var(--rb-w-med);
  letter-spacing:0.18em;color:var(--rb-ink-700);white-space:nowrap}

/* ---- 유틸(전화 칩 · 상담 링크) ---- */
.rb-tel-chip{display:inline-flex;align-items:center;gap:0.4375rem;min-block-size:2.75rem;
  padding-inline:0.625rem;border-radius:var(--rb-radius-pill);text-decoration:none;
  color:var(--rb-ink-800);font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);
  white-space:nowrap;transition:color var(--rb-dur-1) var(--rb-ease)}
.rb-tel-chip:hover{color:var(--rb-accent-deep)}
.rb-tel-chip svg{flex:0 0 auto;inline-size:1.125rem;block-size:1.125rem}
.rb-head-cta{display:none;align-items:center;gap:0.375rem;min-block-size:2.5rem;
  padding-inline:1rem;border-radius:var(--rb-radius-pill);
  background:var(--rb-cyan-800);color:var(--rb-on-accent);text-decoration:none;
  font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);white-space:nowrap;
  transition:background-color var(--rb-dur-1) var(--rb-ease)}
.rb-head-cta:hover{background:var(--rb-cyan-900)}

/* ---- 버거 ---- */
.rb-burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.3125rem;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--rb-ink-900);cursor:pointer}
.rb-burger span{display:block;inline-size:1.25rem;block-size:2px;border-radius:1px;
  background:currentColor;transition:transform var(--rb-dur-1) var(--rb-ease),
                                     opacity var(--rb-dur-1) var(--rb-ease)}
.rb-burger:hover span{background:var(--rb-cyan-800)}
.rb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.rb-burger[aria-expanded="true"] span:nth-child(2){}
.rb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- 드로어 (전 폭에서 이것이 GNB 다 — 레퍼런스 동형) ---- */
.rb-drawer{position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end}
.rb-drawer[hidden]{display:none}
.rb-drawer__scrim{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;
  border:0;background:var(--rb-scrim);cursor:pointer;opacity:0;
  transition:opacity var(--rb-dur-1) var(--rb-ease)}
.rb-drawer.is-open .rb-drawer__scrim{opacity:1}
.rb-drawer__panel{position:relative;inline-size:min(100%, 27.5rem);block-size:100%;
  overflow-y:auto;overscroll-behavior:contain;background:var(--rb-paper);
  padding:var(--rb-s4) var(--rb-s5) var(--rb-s6);
  transform:translate3d(12%, 0, 0);opacity:0;
  transition:transform var(--rb-dur-2) var(--rb-ease), opacity var(--rb-dur-2) var(--rb-ease)}
.rb-drawer.is-open .rb-drawer__panel{transform:translate3d(0, 0, 0);opacity:1}
.rb-drawer__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--rb-s3);padding-block-end:var(--rb-s3);
  border-block-end:1px solid var(--rb-line)}
.rb-drawer__close{inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--rb-ink-800);font-size:1.125rem;cursor:pointer}
.rb-drawer__close:hover{color:var(--rb-accent-deep)}
.rb-drawer__nav{list-style:none;margin:0;padding:0}
.rb-drawer__group{margin-block:var(--rb-s4) var(--rb-s1);font-size:var(--rb-fs-cap);
  font-weight:var(--rb-w-med);letter-spacing:var(--rb-track-kicker);text-transform:uppercase;
  color:var(--rb-accent)}
.rb-drawer__nav a{display:flex;align-items:center;gap:0.1875rem;min-block-size:2.75rem;
  padding-block:0.375rem;color:var(--rb-ink-900);text-decoration:none;
  font-size:var(--rb-fs-body-lg);font-weight:var(--rb-w-med);
  transition:color var(--rb-dur-1) var(--rb-ease)}
.rb-drawer__nav a:hover{color:var(--rb-accent-deep)}
.rb-drawer__nav a[aria-current="page"]{color:var(--rb-accent-deep)}
.rb-drawer__nav a[aria-current="page"]::after{content:"";margin-inline-start:0.375rem;
  inline-size:0.375rem;block-size:0.375rem;border-radius:50%;background:var(--rb-cyan-500)}
.rb-drawer__sub{padding-inline-start:0.875rem;font-size:var(--rb-fs-body) !important;
  font-weight:var(--rb-w-reg) !important;color:var(--rb-ink-700) !important;
  min-block-size:2.5rem !important;border-inline-start:1px solid var(--rb-line)}
.rb-drawer__sub:hover{color:var(--rb-accent-deep) !important}
.rb-drawer__cta{display:flex;flex-direction:column;gap:var(--rb-s2);
  margin-block-start:var(--rb-s5);padding-block-start:var(--rb-s4);
  border-block-start:1px solid var(--rb-line)}
.rb-drawer__note{margin-block-start:var(--rb-s3);font-size:var(--rb-fs-cap);
  color:var(--rb-muted);line-height:var(--rb-lh-snug)}

/* ---- 우측 플로팅 상담 레일 (레퍼런스 세로 '빠른상담' 필 전사) ---- */
.rb-quick{position:fixed;inset-inline-end:0;top:50%;transform:translateY(-50%);z-index:55;
  display:none;flex-direction:column;gap:1px}
.rb-quick a{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  writing-mode:vertical-rl;white-space:nowrap;padding-block:1.125rem;padding-inline:0.75rem;
  background:var(--rb-cyan-800);color:var(--rb-on-accent);text-decoration:none;
  font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);letter-spacing:0.04em;
  transition:background-color var(--rb-dur-1) var(--rb-ease)}
.rb-quick a:first-child{border-start-start-radius:var(--rb-radius-lg)}
.rb-quick a:last-child{border-end-start-radius:var(--rb-radius-lg);
  background:var(--rb-ink-900)}
.rb-quick a:hover{background:var(--rb-cyan-900)}
.rb-quick a:last-child:hover{background:var(--rb-ink-800)}
/* .rb-quick 세로 레일은 원본 플로트 퀵바(.clinic-quickbar)로 대체 — 노출하지 않는다 */

/* ---- 반응형 헤더 ---- */
@media (max-width:60rem){
  .rb-header__bar{min-block-size:3.5rem}
  .rb-tel-chip span{display:none}
  .rb-mark__sub{display:none}
  .rb-drawer__panel{inline-size:100%;padding-inline:var(--rb-s4)}
}
@media (min-width:60.06rem){
  .rb-head-cta{display:inline-flex}
}

/* ==========================================================================
   footer — 셸 푸터. §CHROME-2-1: 마지막 섹션이 푸터를 재현한 문서에서는
   `v21_footerparity` 가 shell_footer:false 로 이 블록을 끈다(끌 쪽은 언제나 셸).
   실측 home §14 = F.N.1.l 사업자정보 밴드 → home 은 중복 대상이다.
   seam 5종(대표·사업자번호·주소·전화·이메일)은 REBEAUTY 표준값 그대로 싣는다.
   레퍼런스 푸터 실측: 라이트 지면(#FBFBFB/#FFFFFF) · 사업자정보 #494646 ·
   카피라이트 #858585(3.2:1) → AA 를 위해 --rb-ink-500(4.95:1) 로 승격.
   ========================================================================== */
.rb-footer{background:var(--rb-paper-2);border-block-start:1px solid var(--rb-line);
  padding-block:var(--rb-s5) var(--rb-s4);color:var(--rb-ink-700);
  font-size:var(--rb-fs-sm);line-height:var(--rb-lh-snug)}
.rb-footer__inner{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:var(--rb-s4)}
.rb-footer__brand{display:flex;align-items:center;gap:0.5rem;margin-block-end:var(--rb-s2);
  color:var(--rb-ink-900);font-weight:var(--rb-w-bold);letter-spacing:var(--rb-track-wide);
  font-size:var(--rb-fs-body)}
.rb-footer__brand svg{inline-size:1.25rem;block-size:1.25rem}
.rb-footer__info{min-inline-size:min(100%, 26rem);flex:1 1 26rem}
.rb-footer__biz{color:var(--rb-ink-700)}
.rb-footer__biz a{color:var(--rb-ink-700);text-decoration:none}
.rb-footer__biz a:hover{color:var(--rb-accent-deep);text-decoration:underline}
.rb-footer__sep{margin-inline:0.5rem;color:var(--rb-line-4)}
.rb-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem var(--rb-s3)}
.rb-footer__links a{display:inline-flex;align-items:center;min-block-size:2.25rem;
  color:var(--rb-ink-800);text-decoration:none;font-weight:var(--rb-w-med);
  transition:color var(--rb-dur-1) var(--rb-ease)}
.rb-footer__links a:hover{color:var(--rb-accent-deep)}
.rb-footer__disc{margin-block-start:var(--rb-s3);color:var(--rb-ink-500);
  font-size:var(--rb-fs-cap)}
.rb-footer__copy{margin-block-start:var(--rb-s4);padding-block-start:var(--rb-s3);
  border-block-start:1px solid var(--rb-line);color:var(--rb-ink-500);
  font-size:var(--rb-fs-cap);letter-spacing:0.02em}
@media (max-width:48rem){
  .rb-footer__inner{flex-direction:column;gap:var(--rb-s3)}
}

/* ==========================================================================
   §L  라플라스 섹션 컴포넌트 (lp-*)
   기존 사이트 m.esbeauty.kr 의 rdx-* 섹션 구성을 셸 토큰 위에 재구축한다.
   ========================================================================== */

/* ---- L0. 공통 헤드 ---- */
.lp-eyebrow{display:inline-block;margin:0 0 1.125rem;color:var(--rb-accent);
  font-family:var(--rb-font-serif);font-size:var(--rb-fs-sm);font-weight:var(--rb-w-bold);
  letter-spacing:var(--rb-track-kicker);text-transform:uppercase;line-height:1}
.rb-sec--dark .lp-eyebrow,.lp-on-photo .lp-eyebrow{color:var(--rb-cyan-400)}
.lp-title{font-size:var(--rb-fs-display);font-weight:var(--rb-w-bold);
  line-height:1.3;letter-spacing:var(--rb-track-tight);color:var(--rb-heading)}
.lp-title em{font-style:normal;color:var(--rb-accent)}
.lp-title .lp-en{font-family:var(--rb-font-serif);font-weight:var(--rb-w-bold);letter-spacing:0}
.rb-sec--dark .lp-title{color:var(--rb-on-dark)}
.lp-lede{margin-block-start:var(--rb-s3);font-size:var(--rb-fs-lead);color:var(--rb-muted);
  line-height:var(--rb-lh-body)}
.rb-sec--dark .lp-lede{color:var(--rb-muted-inv)}
.lp-head{margin-block-end:var(--rb-s6)}
.lp-head--center{text-align:center}
.lp-head--center .lp-lede{margin-inline:auto;max-width:44rem}
.lp-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--rb-s4)}
.lp-head--split .lp-lede{margin-block-start:var(--rb-s2);max-width:40rem}
.lp-note{margin-block-start:var(--rb-s3);color:var(--rb-muted);font-size:var(--rb-fs-cap);
  line-height:var(--rb-lh-snug)}
.rb-sec--dark .lp-note{color:var(--rb-muted-inv)}

/* 밑줄 텍스트 링크 (기존 .rdx-essence-head .btn a 전사) */
.lp-underline{position:relative;display:inline-block;font-family:var(--rb-font-serif);
  font-size:var(--rb-fs-h3);font-weight:var(--rb-w-med);color:var(--rb-ink-900);
  text-decoration:none;white-space:nowrap}
.lp-underline::after{content:"";position:absolute;inset-inline:0;bottom:-2px;block-size:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform var(--rb-dur-2) var(--rb-ease)}
.lp-underline:hover::after{transform:scaleX(0)}

/* ---- L1. 히어로 (영상/이미지 + 스크림 + 중앙 카피) ---- */
.lp-hero{position:relative;isolation:isolate;overflow:hidden;
  min-block-size:var(--rb-slide-h);display:flex;align-items:center;justify-content:center;
  background:var(--rb-ink-900);text-align:center;color:var(--rb-on-dark)}
.lp-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.lp-hero__media img,.lp-hero__media video,.lp-hero__media iframe{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;border:0}
.lp-hero__media iframe{
  /* 16:9 유튜브를 화면 전체로 커버 */
  inline-size:max(100%,177.78vh);block-size:max(100%,56.25vw);
  inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);
  pointer-events:none}
.lp-hero__veil{position:absolute;inset:0;z-index:1;
  /* 배경 영상은 프레임마다 밝기가 달라지므로 카피 대역을 더 눌러 흰 텍스트 대비를 지킨다 */
  background:linear-gradient(180deg,rgba(25,22,19,.52) 0%,rgba(25,22,19,.44) 30%,
    rgba(25,22,19,.52) 62%,rgba(25,22,19,.70) 100%)}
.lp-hero__inner{position:relative;z-index:2;inline-size:100%;
  max-inline-size:var(--rb-container);margin-inline:auto;padding-inline:var(--rb-gutter);
  padding-block:calc(var(--rb-header-h) + var(--rb-s6)) var(--rb-s6)}
.lp-hero__kick{margin:0 0 1.125rem;font-family:var(--rb-font-serif);
  font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);letter-spacing:.28em;
  color:var(--rb-on-dark)}
.lp-hero__title{font-size:var(--rb-fs-hero);font-weight:var(--rb-w-bold);line-height:1.35;
  letter-spacing:var(--rb-track-tight);color:var(--rb-on-dark)}
.lp-hero__sub{margin-block-start:var(--rb-s3);color:var(--rb-muted-inv);
  font-size:var(--rb-fs-lead)}
.lp-hero__acts{display:flex;flex-wrap:wrap;gap:var(--rb-s2);justify-content:center;
  margin-block-start:var(--rb-s5)}
.lp-hero__scroll{position:absolute;inset-inline:0;bottom:var(--rb-s4);z-index:2;
  display:flex;justify-content:center;color:var(--rb-on-dark);font-size:var(--rb-fs-cap);
  letter-spacing:.2em;font-family:var(--rb-font-serif)}
.lp-hero__scroll span{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem}
.lp-hero__scroll i{display:block;inline-size:1px;block-size:2.5rem;
  background:linear-gradient(180deg,var(--rb-on-dark),transparent)}

/* ---- L2. 서브페이지 히어로 (배너 이미지 + 브레드크럼) ---- */
.lp-phero{position:relative;isolation:isolate;overflow:hidden;background:var(--rb-ink-900);
  color:var(--rb-on-dark);min-block-size:22rem;display:flex;align-items:flex-end}
.lp-phero__bg{position:absolute;inset:0;z-index:0;inline-size:100%;block-size:100%;
  object-fit:cover;opacity:.62}
.lp-phero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(25,22,19,.42) 0%,rgba(25,22,19,.78) 100%)}
.lp-phero__inner{position:relative;z-index:2;inline-size:100%;
  max-inline-size:var(--rb-container);margin-inline:auto;padding-inline:var(--rb-gutter);
  padding-block:calc(var(--rb-header-h) + var(--rb-s6)) var(--rb-s6)}
.lp-phero__title{font-size:var(--rb-fs-h1);font-weight:var(--rb-w-bold);
  letter-spacing:var(--rb-track-tight);color:var(--rb-on-dark)}
.lp-phero__lede{margin-block-start:var(--rb-s2);color:var(--rb-muted-inv);
  font-size:var(--rb-fs-body-lg);max-inline-size:48rem}
.lp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 var(--rb-s2);
  padding:0;list-style:none;font-size:var(--rb-fs-cap);color:var(--rb-muted-inv)}
.lp-crumb a{color:var(--rb-muted-inv);text-decoration:none}
.lp-crumb a:hover{color:var(--rb-on-dark);text-decoration:underline}
.lp-crumb li + li::before{content:"›";margin-inline-end:.5rem;color:var(--rb-ink-400)}
.lp-crumb [aria-current="page"]{color:var(--rb-on-dark);font-weight:var(--rb-w-med)}

/* ---- L3. 섹션 내부 탭 내비 ---- */
.lp-subnav{border-block-end:1px solid var(--rb-line);background:var(--rb-paper);
  position:sticky;top:0;z-index:40}
.lp-subnav__inner{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;
  max-inline-size:var(--rb-container);margin-inline:auto;padding-inline:var(--rb-gutter)}
.lp-subnav__inner::-webkit-scrollbar{display:none}
.lp-subnav a{display:inline-flex;align-items:center;white-space:nowrap;min-block-size:3.25rem;
  padding-inline:var(--rb-s3);color:var(--rb-ink-500);text-decoration:none;
  font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);border-block-end:2px solid transparent;
  transition:color var(--rb-dur-1) var(--rb-ease),border-color var(--rb-dur-1) var(--rb-ease)}
.lp-subnav a:hover{color:var(--rb-accent)}
.lp-subnav a[aria-current="page"],.lp-subnav a.is-on{color:var(--rb-accent);
  border-block-end-color:var(--rb-accent)}

/* ---- L4. 카드 그리드 ---- */
.lp-cards{display:grid;gap:var(--rb-gap-lg);
  grid-template-columns:repeat(var(--lp-cols,3),minmax(0,1fr))}
@media (max-width:60rem){.lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:34rem){.lp-cards{grid-template-columns:minmax(0,1fr)}}
.lp-card{display:flex;flex-direction:column;background:var(--rb-paper);
  border:1px solid var(--rb-line);border-radius:var(--rb-radius);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--rb-dur-2) var(--rb-ease),box-shadow var(--rb-dur-2) var(--rb-ease),
    border-color var(--rb-dur-2) var(--rb-ease)}
a.lp-card:hover{transform:translateY(-4px);box-shadow:var(--rb-shadow-md);
  border-color:var(--rb-line-2)}
.lp-card__media{position:relative;display:block;overflow:hidden;background:var(--rb-haze);
  aspect-ratio:var(--lp-ar,1/1)}
.lp-card__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;transition:transform var(--rb-dur-3) var(--rb-ease)}
a.lp-card:hover .lp-card__media img{transform:scale(1.05)}
.lp-card__body{display:flex;flex-direction:column;gap:.5rem;padding:var(--rb-s4)}
.lp-card__num{font-family:var(--rb-font-serif);font-size:var(--rb-fs-h3);
  font-weight:var(--rb-w-bold);color:var(--rb-accent);line-height:1}
.lp-card__title{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);
  color:var(--rb-heading);line-height:1.4}
.lp-card__text{color:var(--rb-muted);font-size:var(--rb-fs-body);line-height:var(--rb-lh-body)}
.lp-card__meta{color:var(--rb-accent);font-size:var(--rb-fs-cap);font-weight:var(--rb-w-med)}
.lp-card--plain{border:0;background:transparent}
.lp-card--plain .lp-card__body{padding:var(--rb-s3) 0 0}
.lp-card--dark{background:var(--rb-ink-900);border-color:var(--rb-ink-800)}
.lp-card--dark .lp-card__title{color:var(--rb-on-dark)}
.lp-card--dark .lp-card__text{color:var(--rb-muted-inv)}

/* ---- L5. 시그니처 타일 (정사각 이미지 + 로즈 오버레이) ---- */
.lp-tiles{display:grid;gap:var(--rb-gap);
  grid-template-columns:repeat(var(--lp-cols,4),minmax(0,1fr))}
@media (max-width:64rem){.lp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.lp-tiles{grid-template-columns:minmax(0,1fr)}}
.lp-tile{position:relative;display:block;overflow:hidden;border-radius:var(--rb-radius);
  aspect-ratio:3/4;text-decoration:none;color:var(--rb-on-dark);background:var(--rb-ink-900)}
.lp-tile img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform var(--rb-dur-3) var(--rb-ease),opacity var(--rb-dur-2) var(--rb-ease)}
.lp-tile__wash{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(25,22,19,0) 28%,rgba(25,22,19,.42) 62%,rgba(25,22,19,.86) 100%);
  transition:background var(--rb-dur-2) var(--rb-ease)}
.lp-tile:hover .lp-tile__wash{background:linear-gradient(180deg,rgba(179,78,93,.55) 0%,rgba(135,55,68,.86) 100%)}
.lp-tile:hover img{transform:scale(1.06)}
.lp-tile__cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:var(--rb-s4);
  display:flex;flex-direction:column;gap:.25rem}
.lp-tile__en{font-family:var(--rb-font-serif);font-size:var(--rb-fs-h2);
  font-weight:var(--rb-w-bold);letter-spacing:.04em;line-height:1.1}
.lp-tile__ko{font-size:var(--rb-fs-body);color:var(--rb-muted-inv);font-weight:var(--rb-w-med)}

/* ---- L6. 가로 레일 (장비·이벤트 카드 스크롤) ---- */
.lp-rail{position:relative}
.lp-rail__track{display:flex;gap:var(--rb-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-block-end:var(--rb-s2);
  -webkit-overflow-scrolling:touch}
.lp-rail__track::-webkit-scrollbar{display:none}
.lp-rail__item{flex:0 0 clamp(13rem,32vw,17.5rem);scroll-snap-align:start}
.lp-rail__ctrls{display:flex;gap:var(--rb-s1);justify-content:flex-end;
  margin-block-start:var(--rb-s3)}
.lp-rail__btn{inline-size:2.75rem;block-size:2.75rem;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--rb-line-3);border-radius:50%;
  background:var(--rb-paper);color:var(--rb-accent);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background var(--rb-dur-1) var(--rb-ease),color var(--rb-dur-1) var(--rb-ease),
    border-color var(--rb-dur-1) var(--rb-ease)}
.lp-rail__btn:hover{background:var(--rb-accent);border-color:var(--rb-accent);
  color:var(--rb-on-accent)}
.lp-rail__btn[disabled]{opacity:.35;cursor:default}
.lp-rail__btn[disabled]:hover{background:var(--rb-paper);color:var(--rb-accent);
  border-color:var(--rb-line-3)}

/* ---- L7. 후기 카드 ---- */
.lp-reviews{display:grid;gap:var(--rb-gap-lg);
  grid-template-columns:repeat(var(--lp-cols,3),minmax(0,1fr))}
@media (max-width:64rem){.lp-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:44rem){.lp-reviews{grid-template-columns:minmax(0,1fr)}}
.lp-review{display:flex;flex-direction:column;gap:.75rem;padding:var(--rb-s5);
  background:var(--rb-paper);border:1px solid var(--rb-line);border-radius:var(--rb-radius);
  block-size:100%}
.lp-review__meta{color:var(--rb-accent);font-size:var(--rb-fs-cap);font-weight:var(--rb-w-med);
  letter-spacing:.02em}
.lp-review__title{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);line-height:1.45;
  color:var(--rb-heading)}
.lp-review__title mark{background:linear-gradient(transparent 62%,rgba(179,78,93,.18) 0);
  color:inherit;padding:0 .1em}
.lp-review__body{color:var(--rb-muted);line-height:var(--rb-lh-body);font-size:var(--rb-fs-body)}
.lp-review__src{margin-block-start:auto;padding-block-start:var(--rb-s2);
  border-block-start:1px solid var(--rb-line);color:var(--rb-muted);font-size:var(--rb-fs-cap)}
.lp-review--mist{background:var(--rb-mist);border-color:transparent}
.lp-review__shot{display:block;inline-size:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--rb-radius-sm);background:var(--rb-haze)}

/* ---- L8. 스티키 강점 (좌 카피 고정 / 우 카드 스크롤) ---- */
.lp-sticky{display:grid;gap:var(--rb-gap-lg);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
@media (max-width:64rem){.lp-sticky{grid-template-columns:minmax(0,1fr)}}
.lp-sticky__aside{position:sticky;top:calc(var(--rb-header-h) + var(--rb-s4))}
@media (max-width:64rem){.lp-sticky__aside{position:static}}
.lp-sticky__list{display:grid;gap:var(--rb-gap-lg)}
.lp-strength{display:grid;gap:var(--rb-s4);grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  align-items:center;padding:var(--rb-s4);background:var(--rb-paper);
  border:1px solid var(--rb-line);border-radius:var(--rb-radius)}
@media (max-width:34rem){.lp-strength{grid-template-columns:minmax(0,1fr)}}
.lp-strength img{inline-size:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--rb-radius-sm);background:var(--rb-haze)}
.lp-strength h3{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);line-height:1.4;
  margin-block-end:.5rem;color:var(--rb-heading)}
.lp-strength p{color:var(--rb-muted);line-height:var(--rb-lh-body);font-size:var(--rb-fs-body)}
.lp-strength--dark{background:var(--rb-ink-900);border-color:var(--rb-ink-800)}
.lp-strength--dark h3{color:var(--rb-on-dark)}
.lp-strength--dark p{color:var(--rb-muted-inv)}
.lp-strength--full{grid-template-columns:minmax(0,1fr)}
.lp-strength--full img{aspect-ratio:16/9}

/* ---- L9. 롱 이미지 콘텐츠 (원본 상세페이지 이미지) ---- */
.lp-long{max-inline-size:62.5rem;margin-inline:auto}
.lp-long img{display:block;inline-size:100%;block-size:auto;background:var(--rb-haze)}
.lp-long > * + *{margin-block-start:0}
.lp-long figure{margin:0}
.lp-long figcaption{padding:var(--rb-s3) var(--rb-gutter);color:var(--rb-muted);
  font-size:var(--rb-fs-cap);text-align:center}

/* ---- L10. 정보 밴드 ---- */
.lp-info{display:grid;gap:var(--rb-gap-lg);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start}
.lp-info__group b{display:block;font-family:var(--rb-font-serif);font-size:var(--rb-fs-h3);
  letter-spacing:.12em;color:var(--rb-cyan-400);margin-block-end:var(--rb-s2);
  font-weight:var(--rb-w-bold)}
.lp-info__group p{color:var(--rb-muted-inv);line-height:var(--rb-lh-body)}
.lp-info__tel{font-family:var(--rb-font-serif);font-size:var(--rb-fs-display);
  font-weight:var(--rb-w-bold);color:var(--rb-on-dark);letter-spacing:.02em;
  text-decoration:none;display:inline-block;line-height:1.2}
.lp-info__tel:hover{color:var(--rb-cyan-400)}
.lp-links{display:flex;flex-wrap:wrap;gap:var(--rb-s2)}
.lp-link{display:inline-flex;align-items:center;gap:.75rem;min-block-size:3.5rem;
  padding-inline:var(--rb-s4);border:1px solid var(--rb-line-inv);border-radius:var(--rb-radius);
  color:var(--rb-on-dark);text-decoration:none;
  transition:background var(--rb-dur-1) var(--rb-ease),border-color var(--rb-dur-1) var(--rb-ease)}
.lp-link:hover{background:rgba(255,255,255,.1);border-color:var(--rb-on-dark)}
.lp-link b{font-family:var(--rb-font-serif);font-size:var(--rb-fs-h3);letter-spacing:.06em}
.lp-link span{font-size:var(--rb-fs-cap);line-height:1.4;color:var(--rb-muted-inv)}

/* ---- L11. 표 (비급여 수가 · 진료시간) ---- */
.lp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rb-line);border-radius:var(--rb-radius)}
.lp-table{inline-size:100%;min-inline-size:36rem;border-collapse:collapse;
  font-size:var(--rb-fs-sm);background:var(--rb-paper)}
.lp-table caption{caption-side:top;padding:var(--rb-s3) var(--rb-s4);text-align:start;
  font-weight:var(--rb-w-bold);color:var(--rb-heading);background:var(--rb-mist);
  font-size:var(--rb-fs-body)}
.lp-table th,.lp-table td{padding:.875rem var(--rb-s3);text-align:start;
  border-block-end:1px solid var(--rb-line);vertical-align:middle}
.lp-table thead th{background:var(--rb-haze);color:var(--rb-ink-700);
  font-weight:var(--rb-w-bold);white-space:nowrap;font-size:var(--rb-fs-cap)}
.lp-table tbody th{font-weight:var(--rb-w-med);color:var(--rb-ink-800);white-space:nowrap}
.lp-table td.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-table tbody tr:last-child th,.lp-table tbody tr:last-child td{border-block-end:0}
.lp-table tbody tr:hover{background:var(--rb-paper-2)}

/* 진료시간 리스트 */
.lp-hours{display:grid;gap:0;border:1px solid var(--rb-line);border-radius:var(--rb-radius);
  overflow:hidden;background:var(--rb-paper)}
.lp-hours__row{display:grid;grid-template-columns:minmax(6rem,.5fr) minmax(0,1fr);
  gap:var(--rb-s3);padding:var(--rb-s3) var(--rb-s4);border-block-end:1px solid var(--rb-line);
  align-items:baseline}
.lp-hours__row:last-child{border-block-end:0}
.lp-hours__row dt{font-weight:var(--rb-w-bold);color:var(--rb-ink-800)}
.lp-hours__row dd{margin:0;color:var(--rb-ink-700);font-variant-numeric:tabular-nums}
.lp-hours__row--off dd{color:var(--rb-accent);font-weight:var(--rb-w-med)}
.lp-hours__row--hl{background:var(--rb-mist)}

/* ---- L12. 아코디언 (시술 후 주의사항 · FAQ) ---- */
.lp-acc{display:grid;gap:var(--rb-s2)}
.lp-acc details{border:1px solid var(--rb-line);border-radius:var(--rb-radius);
  background:var(--rb-paper);overflow:hidden}
.lp-acc details[open]{border-color:var(--rb-line-3)}
.lp-acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--rb-s3);
  min-block-size:3.5rem;padding:var(--rb-s3) var(--rb-s4);cursor:pointer;list-style:none;
  font-weight:var(--rb-w-bold);color:var(--rb-heading);font-size:var(--rb-fs-body-lg)}
.lp-acc summary::-webkit-details-marker{display:none}
.lp-acc summary::after{content:"+";flex:0 0 auto;color:var(--rb-accent);font-size:1.375rem;
  font-weight:var(--rb-w-light);line-height:1;transition:transform var(--rb-dur-1) var(--rb-ease)}
.lp-acc details[open] summary::after{transform:rotate(45deg)}
.lp-acc summary:hover{color:var(--rb-accent)}
.lp-acc__body{padding:0 var(--rb-s4) var(--rb-s4);color:var(--rb-muted);
  line-height:var(--rb-lh-body)}
.lp-acc__body ul{margin:0;padding-inline-start:1.125rem;display:grid;gap:.5rem}
.lp-acc__body li{list-style:disc}

/* ---- L13. 스텝 ---- */
.lp-steps{display:grid;gap:var(--rb-gap-lg);
  grid-template-columns:repeat(var(--lp-cols,4),minmax(0,1fr));counter-reset:lpstep}
@media (max-width:64rem){.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:34rem){.lp-steps{grid-template-columns:minmax(0,1fr)}}
.lp-step{position:relative;padding-block-start:var(--rb-s4);
  border-block-start:2px solid var(--rb-line-2)}
.lp-step__n{display:block;font-family:var(--rb-font-serif);font-size:var(--rb-fs-h2);
  font-weight:var(--rb-w-bold);color:var(--rb-accent);line-height:1;margin-block-end:.75rem}
.lp-step h3{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);margin-block-end:.5rem;
  color:var(--rb-heading)}
.lp-step p{color:var(--rb-muted);line-height:var(--rb-lh-body);font-size:var(--rb-fs-body)}

/* ---- L14. 갤러리 ---- */
.lp-gallery{display:grid;gap:var(--rb-gap);
  grid-template-columns:repeat(var(--lp-cols,4),minmax(0,1fr))}
@media (max-width:64rem){.lp-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:44rem){.lp-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-gallery figure{margin:0;display:flex;flex-direction:column;gap:.625rem}
.lp-gallery img{inline-size:100%;aspect-ratio:var(--lp-ar,1/1);object-fit:cover;
  background:var(--rb-haze);border-radius:var(--rb-radius-sm)}
/* 전·후사진처럼 원본이 정사각이 아닌 그리드는 --lp-ar 로 비율을 맞춰 잘림을 막는다.
   --lp-fit:contain 을 주면 여백을 두고 전체를 보여준다(세로 포스터용). */
.lp-gallery img{object-fit:var(--lp-fit,cover)}
.lp-gallery figcaption{font-size:var(--rb-fs-cap);color:var(--rb-ink-700);
  font-weight:var(--rb-w-med);line-height:1.45}

/* ---- L15. 공지 리스트 ---- */
.lp-list{display:grid;border-block-start:1px solid var(--rb-line-2)}
.lp-list__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--rb-s3);
  align-items:baseline;padding:var(--rb-s4) var(--rb-s1);
  border-block-end:1px solid var(--rb-line);text-decoration:none;color:inherit}
.lp-list__item:hover .lp-list__title{color:var(--rb-accent)}
.lp-list__title{font-size:var(--rb-fs-body-lg);font-weight:var(--rb-w-med);
  color:var(--rb-ink-800);line-height:1.5;
  transition:color var(--rb-dur-1) var(--rb-ease)}
.lp-list__date{color:var(--rb-muted);font-size:var(--rb-fs-cap);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-badge{display:inline-block;margin-inline-end:.5rem;padding:.15rem .5rem;
  border-radius:var(--rb-radius-pill);background:var(--rb-mist);color:var(--rb-accent-deep);
  font-size:var(--rb-fs-cap);font-weight:var(--rb-w-bold);vertical-align:.05em}
.lp-badge--fill{background:var(--rb-accent);color:var(--rb-on-accent)}
.lp-badge--mute{background:var(--rb-haze);color:var(--rb-ink-500)}

/* ---- L16. 특징 칩 ---- */
.lp-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.lp-chip{display:inline-flex;align-items:center;min-block-size:2.25rem;padding-inline:.875rem;
  border:1px solid var(--rb-line-2);border-radius:var(--rb-radius-pill);
  background:var(--rb-paper);color:var(--rb-ink-700);font-size:var(--rb-fs-cap);
  font-weight:var(--rb-w-med)}
.rb-sec--dark .lp-chip{background:transparent;border-color:var(--rb-line-inv);
  color:var(--rb-muted-inv)}

/* ---- L17. CTA 밴드 ---- */
.lp-cta{text-align:center}
.lp-cta__acts{display:flex;flex-wrap:wrap;gap:var(--rb-s2);justify-content:center;
  margin-block-start:var(--rb-s5)}

/* ---- L18. 지도 ---- */
.lp-map{position:relative;inline-size:100%;aspect-ratio:16/9;min-block-size:20rem;
  border-radius:var(--rb-radius);overflow:hidden;border:1px solid var(--rb-line);
  background:var(--rb-haze)}
.lp-map iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

/* ---- L19. 2단 미디어+카피 ---- */
.lp-split{display:grid;gap:var(--rb-gap-lg);grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center}
@media (max-width:64rem){.lp-split{grid-template-columns:minmax(0,1fr)}}
.lp-split--rev > :first-child{order:2}
@media (max-width:64rem){.lp-split--rev > :first-child{order:0}}
.lp-split__media{position:relative;overflow:hidden;border-radius:var(--rb-radius);
  background:var(--rb-haze)}
.lp-split__media img{display:block;inline-size:100%;block-size:auto}
.lp-split__media--sq img{aspect-ratio:1/1;object-fit:cover}
.lp-split__media--tall img{aspect-ratio:3/4;object-fit:cover}

/* L20 은 §ORIG 로 이동 — 원본 .clinic-quickbar 를 그대로 쓴다 */

/* ---- L21. 유틸 ---- */
.lp-stack > * + *{margin-block-start:var(--rb-s4)}
.lp-stack--lg > * + *{margin-block-start:var(--rb-s6)}
.lp-center{text-align:center}
.lp-muted{color:var(--rb-muted)}
.lp-serif{font-family:var(--rb-font-serif)}
.lp-divider{block-size:1px;background:var(--rb-line);border:0;margin-block:var(--rb-s6)}
.lp-anchor{scroll-margin-block-start:calc(var(--rb-header-h) + 3.5rem)}
.lp-prose{max-inline-size:var(--rb-container-narrow);color:var(--rb-fg);
  line-height:var(--rb-lh-body)}
.lp-prose p + p{margin-block-start:var(--rb-s3)}
.lp-prose h3{margin-block:var(--rb-s5) var(--rb-s2);font-size:var(--rb-fs-h3)}
.lp-quote{margin:0;padding-inline-start:var(--rb-s4);
  border-inline-start:3px solid var(--rb-accent);color:var(--rb-ink-700);
  font-size:var(--rb-fs-lead);line-height:var(--rb-lh-body)}
.lp-quote footer{margin-block-start:var(--rb-s2);color:var(--rb-muted);
  font-size:var(--rb-fs-cap)}
.lp-disc{padding:var(--rb-s4);background:var(--rb-haze);border-radius:var(--rb-radius);
  color:var(--rb-ink-700);font-size:var(--rb-fs-cap);line-height:var(--rb-lh-snug)}

/* ---- L22. 모달 (시술 후 주의사항) ---- */
.lp-modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;
  justify-content:center;padding:var(--rb-gutter);background:rgba(25,22,19,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lp-modal.is-open{display:flex}
.lp-modal__box{inline-size:min(100%,38rem);max-block-size:min(86svh,44rem);
  display:flex;flex-direction:column;background:var(--rb-paper);
  border-radius:var(--rb-radius-lg);overflow:hidden;box-shadow:var(--rb-shadow-lg)}
.lp-modal__top{position:relative;padding:var(--rb-s5) var(--rb-s5) var(--rb-s3);
  border-block-end:1px solid var(--rb-line)}
.lp-modal__label{display:block;font-family:var(--rb-font-serif);font-size:var(--rb-fs-cap);
  letter-spacing:var(--rb-track-kicker);color:var(--rb-accent);font-weight:var(--rb-w-bold);
  margin-block-end:.5rem}
.lp-modal__title{font-size:var(--rb-fs-h2);font-weight:var(--rb-w-bold);
  color:var(--rb-heading);padding-inline-end:2.5rem}
.lp-modal__close{position:absolute;inset-block-start:var(--rb-s3);inset-inline-end:var(--rb-s3);
  inline-size:2.75rem;block-size:2.75rem;border:0;border-radius:50%;background:transparent;
  color:var(--rb-ink-700);font-size:1.5rem;line-height:1;cursor:pointer}
.lp-modal__close:hover{background:var(--rb-haze);color:var(--rb-accent)}
.lp-modal__content{padding:var(--rb-s5);overflow-y:auto;-webkit-overflow-scrolling:touch}
.lp-modal__content ul{margin:0;padding-inline-start:1.125rem;display:grid;gap:.75rem;
  color:var(--rb-fg);line-height:var(--rb-lh-body)}
.lp-modal__content li{list-style:disc}
.lp-modal__note{margin-block-start:var(--rb-s4);padding-block-start:var(--rb-s3);
  border-block-start:1px solid var(--rb-line);color:var(--rb-muted);
  font-size:var(--rb-fs-cap);line-height:var(--rb-lh-snug)}

/* ---- L23. 라이트박스 ---- */
.lp-lightbox{position:fixed;inset:0;z-index:140;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--rb-s3);padding:var(--rb-gutter);
  background:rgba(25,22,19,.92)}
.lp-lightbox.is-open{display:flex}
.lp-lightbox img{max-inline-size:min(100%,60rem);max-block-size:78svh;object-fit:contain;
  border-radius:var(--rb-radius-sm);background:var(--rb-ink-900)}
.lp-lightbox figcaption{color:var(--rb-muted-inv);font-size:var(--rb-fs-cap);text-align:center}
.lp-lightbox__close{position:absolute;inset-block-start:var(--rb-s3);
  inset-inline-end:var(--rb-s3);inline-size:2.75rem;block-size:2.75rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:var(--rb-on-dark);font-size:1.5rem;line-height:1;
  cursor:pointer}
.lp-lightbox__close:hover{background:var(--rb-accent)}
[data-lp-zoom]{cursor:zoom-in}

/* ---- L24. 프린트 ---- */
@media print{
  .rb-header,.rb-quick,.lp-quickbar,.rb-footer__links,.lp-hero__scroll{display:none !important}
  body{padding-block-end:0}
  .rb-sec{padding-block:1rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#666}
}

/* ---- L25. 밝은 밴드 위 AA 보정 ------------------------------------------
   #B34E5D(4.47:1) · #766D65(4.49:1) 는 크림 밴드 #F8F0E7 위에서 본문급 AA 4.5:1 에
   미달한다. 크림/아이보리/그레이 서피스 안에서는 액센트를 --rb-cyan-900(#873744, 7.00:1),
   보조 텍스트를 --rb-ink-700(#4A423C, 8.71:1) 으로 승격한다. 색상 발명이 아니라
   같은 hue 의 명도 이동이다. */
.rb-sec--mist,.rb-sec--haze,.rb-sec--paper2,.lp-review--mist,.lp-disc,.lp-table caption{
  --rb-accent:var(--rb-cyan-900);
  --rb-muted:var(--rb-ink-700);
}

/* ---- L26. 이미지 기본 높이 --------------------------------------------------
   <img width height> 속성은 presentational hint 로 height:Npx 를 만든다. 그러면
   block-size 가 auto 가 아니게 되어 aspect-ratio 가 무시되고(.lp-strength/.lp-gallery/
   .lp-review__shot/.lp-split__media--sq 가 원본 픽셀 높이로 늘어남), 레이아웃이 깨진다.
   지연 로딩 CLS 를 위해 속성은 유지하고, 높이만 auto 로 되돌린다.
   block-size 를 명시하는 컴포넌트 규칙(클래스 특이도)은 그대로 이긴다. */
img{block-size:auto}

/* ---- L27. 어두운 지면 위 버튼 변형 복구 -------------------------------------
   셸의 `.rb-sec--dark .rb-btn{color:var(--rb-on-dark)}` 는 특이도(0,2,0)가
   `.rb-btn--paper`(0,1,0) 보다 높아, 어두운 섹션 안의 페이퍼 버튼이
   **흰 배경 위 흰 글자**가 된다(전 서브페이지 하단 CTA 밴드·홈 인포 섹션 해당).
   같은 특이도로 채워진 변형들을 되살린다. --ghost / 기본형은 흰 글자가 맞으므로 건드리지 않는다. */
.rb-sec--dark .rb-btn--paper,.rb-on-photo .rb-btn--paper{
  background:var(--rb-paper);border-color:var(--rb-paper);color:var(--rb-ink-900)}
.rb-sec--dark .rb-btn--paper:hover,.rb-on-photo .rb-btn--paper:hover{
  background:var(--rb-mist);border-color:var(--rb-mist);color:var(--rb-ink-900)}
.rb-sec--dark .rb-btn--solid,.rb-on-photo .rb-btn--solid{
  background:var(--rb-cyan-800);border-color:var(--rb-cyan-800);color:var(--rb-on-accent)}
.rb-sec--dark .rb-btn--solid:hover,.rb-on-photo .rb-btn--solid:hover{
  background:var(--rb-cyan-900);border-color:var(--rb-cyan-900);color:var(--rb-on-accent)}
.rb-sec--dark .rb-btn--ink,.rb-on-photo .rb-btn--ink{
  background:var(--rb-paper);border-color:var(--rb-paper);color:var(--rb-ink-900)}

/* ---- L28. 자동 대비 감사에서 나온 잔여 3건 ---------------------------------
   ① 어두운 섹션의 '+' 글리프: --rb-accent(#B34E5D) 는 잉크 위 3.4:1 → 로즈 하이라이트로.
   ② 푸터 구분자 'ㅣ': --rb-line-4(#C6BCB3) 는 1.75:1 로 텍스트 노드 기준 미달 → --rb-ink-500(4.75:1).
      순수 장식이지만 화면에 보이는 문자이므로 대비를 맞춘다.
   ③ 푸터 고지/카피라이트도 같은 이유로 --rb-ink-500 유지(아이보리 위 4.75:1 통과). */
.rb-sec--dark .rb-btn__plus,.rb-on-photo .rb-btn__plus{color:var(--rb-cyan-400)}
.rb-footer__sep,.s14-sep{color:var(--rb-ink-500)}

/* ==========================================================================
   §FP  풀페이지 랜딩 (landing.html 전용 — html.fp 로 스코프)
   한 화면 = 한 섹션. 스냅은 루트 스크롤러에 건다.
   ★ mandatory 스냅은 섹션이 뷰포트보다 길면 아래쪽 내용을 가둔다.
     그래서 좁은 화면·낮은 화면·모션 축소에서는 proximity 로 낮추고
     섹션 높이 고정도 푼다(인트로만 100svh 유지).
   ========================================================================== */
html.fp{scroll-snap-type:y mandatory;scroll-padding-block-start:0}
.fp-sec{position:relative;min-block-size:100svh;scroll-snap-align:start;
  scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--rb-header-h) + var(--rb-s5)) var(--rb-s6)}
.fp-sec > .rb-container{inline-size:100%}
.fp-sec--flush{padding-block:0}

@media (max-width:60rem),(max-height:52rem){
  html.fp{scroll-snap-type:y proximity}
  .fp-sec{scroll-snap-stop:normal;min-block-size:auto;
    padding-block:var(--rb-sec-pad)}
  .fp-sec--intro{min-block-size:100svh;padding-block:0}
}
@media (prefers-reduced-motion:reduce){
  html.fp{scroll-snap-type:none}
  .fp-sec{scroll-snap-stop:normal}
}

/* ---- 인트로: 영상만 보여주는 첫 화면 ---- */
.fp-sec--intro{padding-block:0;overflow:hidden;isolation:isolate;
  background:var(--rb-ink-900);color:var(--rb-on-dark);text-align:center;
  align-items:center;justify-content:center}
.fp-intro__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.fp-intro__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover}
.fp-intro__media iframe{position:absolute;border:0;pointer-events:none;
  inline-size:max(100%,177.78svh);block-size:max(100%,56.25vw);
  inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}
.fp-intro__veil{position:absolute;inset:0;z-index:1;
  /* 배경 영상은 프레임마다 밝기가 바뀐다. 카피 대역(45~75%)을 특히 눌러
     흰 헤드라인과 --rb-muted-inv 부제의 대비를 어떤 프레임에서도 확보한다. */
  background:linear-gradient(180deg,rgba(25,22,19,.60) 0%,rgba(25,22,19,.42) 30%,
    rgba(25,22,19,.52) 46%,rgba(25,22,19,.56) 72%,rgba(25,22,19,.80) 100%)}
.fp-intro__inner{position:relative;z-index:2;inline-size:100%;
  max-inline-size:var(--rb-container);margin-inline:auto;
  padding-inline:var(--rb-gutter)}
.fp-intro__mark{display:block;margin:0 auto var(--rb-s4);font-family:var(--rb-font-serif);
  font-size:clamp(1.5rem,1rem + 2.2vw,2.5rem);font-weight:var(--rb-w-bold);
  letter-spacing:.34em;text-indent:.34em;line-height:1;color:var(--rb-on-dark)}
.fp-intro__title{font-size:var(--rb-fs-hero);font-weight:var(--rb-w-bold);
  line-height:1.34;letter-spacing:var(--rb-track-tight);color:var(--rb-on-dark)}
.fp-intro__sub{margin-block-start:var(--rb-s4);color:var(--rb-muted-inv);
  font-size:var(--rb-fs-lead)}
.fp-intro__cue{position:absolute;inset-inline:0;bottom:calc(var(--rb-s5) + env(safe-area-inset-bottom));
  z-index:2;display:flex;justify-content:center}
.fp-intro__cue a{display:inline-flex;flex-direction:column;align-items:center;gap:.625rem;
  min-block-size:2.75rem;color:var(--rb-on-dark);text-decoration:none;
  font-family:var(--rb-font-serif);font-size:var(--rb-fs-cap);letter-spacing:.24em}
.fp-intro__cue i{display:block;inline-size:1px;block-size:2.75rem;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:fp-cue 2.4s var(--rb-ease-io) infinite}
@keyframes fp-cue{0%{transform:scaleY(.25);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.fp-intro__cue i{animation:none;transform:none}}

/* ---- 좌측 섹션 도트 내비 (우측은 .rb-quick 이 쓴다) ---- */
.fp-nav{position:fixed;inset-inline-start:clamp(.75rem,1.4vw,1.5rem);top:50%;
  transform:translateY(-50%);z-index:56;display:none;flex-direction:column;gap:.875rem}
@media (min-width:64.06rem){.fp-nav{display:flex}}
.fp-nav a{position:relative;display:block;inline-size:.5rem;block-size:.5rem;
  border-radius:50%;background:var(--rb-line-4);text-decoration:none;
  transition:background var(--rb-dur-1) var(--rb-ease),transform var(--rb-dur-1) var(--rb-ease)}
.fp-nav a::after{content:attr(data-label);position:absolute;inset-inline-start:1.25rem;
  top:50%;transform:translateY(-50%);white-space:nowrap;font-size:var(--rb-fs-cap);
  font-weight:var(--rb-w-med);color:var(--rb-ink-700);opacity:0;pointer-events:none;
  transition:opacity var(--rb-dur-1) var(--rb-ease)}
.fp-nav a:hover::after,.fp-nav a:focus-visible::after{opacity:1}
.fp-nav a:hover,.fp-nav a:focus-visible{background:var(--rb-accent);transform:scale(1.3)}
.fp-nav a.is-on{background:var(--rb-accent);transform:scale(1.45)}
.fp-nav.is-inverse a{background:rgba(255,255,255,.42)}
.fp-nav.is-inverse a::after{color:var(--rb-on-dark)}
.fp-nav.is-inverse a.is-on,.fp-nav.is-inverse a:hover{background:var(--rb-on-dark)}

/* ---- 영상 카드 (클릭 시 iframe 교체 — 초기 로드에 유튜브 5개를 올리지 않는다) ---- */
.fp-films{display:grid;gap:var(--rb-gap);
  grid-template-columns:repeat(var(--lp-cols,3),minmax(0,1fr))}
@media (max-width:64rem){.fp-films{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.fp-films{grid-template-columns:minmax(0,1fr)}}
.fp-film{position:relative;display:block;inline-size:100%;padding:0;border:0;
  border-radius:var(--rb-radius);overflow:hidden;background:var(--rb-ink-900);
  cursor:pointer;text-align:start;font-family:inherit;color:var(--rb-on-dark)}
.fp-film > img{display:block;inline-size:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform var(--rb-dur-3) var(--rb-ease),opacity var(--rb-dur-2) var(--rb-ease)}
.fp-film:hover > img{transform:scale(1.04);opacity:.86}
.fp-film__play{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);inline-size:3.5rem;block-size:3.5rem;border-radius:50%;
  background:rgba(179,78,93,.92);display:grid;place-items:center;
  transition:background var(--rb-dur-1) var(--rb-ease),transform var(--rb-dur-1) var(--rb-ease)}
.fp-film__play::before{content:"";inline-size:0;block-size:0;margin-inline-start:.2rem;
  border-inline-start:.85rem solid var(--rb-on-dark);
  border-block-start:.55rem solid transparent;border-block-end:.55rem solid transparent}
.fp-film:hover .fp-film__play{background:var(--rb-cyan-900);transform:translate(-50%,-50%) scale(1.08)}
.fp-film__t{display:block;padding:var(--rb-s3) var(--rb-s4) var(--rb-s4);
  font-size:var(--rb-fs-body);font-weight:var(--rb-w-med);line-height:1.5;
  color:var(--rb-on-dark);background:var(--rb-ink-900)}
.fp-film__frame{position:relative;inline-size:100%;aspect-ratio:16/9;background:#000}
.fp-film__frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

/* ---- 풀페이지 안에서 쓰는 압축 카드 ---- */
.fp-lead{max-inline-size:46rem}
.fp-sec .lp-head{margin-block-end:var(--rb-s5)}
.fp-sec .lp-title{font-size:clamp(1.625rem,1rem + 2.6vw,2.625rem)}
/* 톤은 셸의 .rb-sec--dark / --mist / --paper2 를 그대로 쓴다.
   따로 만들면 어두운 지면 버튼 복구(L27)·AA 리매핑(L25) 같은 기존 규칙을 전부 놓친다. */

/* 풀페이지 섹션 안의 카드는 세로를 아낀다 — 1:1 미디어는 한 화면을 넘긴다 */
.fp-sec .lp-card__media{--lp-ar:16/9}
.fp-sec .lp-card__body{gap:.375rem;padding:var(--rb-s3) var(--rb-s4) var(--rb-s4)}
.fp-sec .lp-card__title{font-size:var(--rb-fs-body-lg)}
.fp-sec .lp-card__text{font-size:var(--rb-fs-sm);line-height:1.6}
.fp-sec .lp-tile{aspect-ratio:4/5}
.fp-sec .lp-review{padding:var(--rb-s4)}
.fp-sec .lp-review__title{font-size:var(--rb-fs-body-lg)}
.fp-sec .lp-review__body{font-size:var(--rb-fs-sm);line-height:1.65}
.fp-films .fp-film__t{padding:.625rem var(--rb-s3) .875rem;font-size:var(--rb-fs-sm);
  line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.fp-sec .lp-note{font-size:var(--rb-fs-cap)}
@media (min-height:52.06rem){
  .fp-sec .lp-head{margin-block-end:var(--rb-s4)}
  .fp-sec .lp-lede{margin-block-start:.625rem}
}

/* ---- L29. 배경 영상 커버 보정 -------------------------------------------
   셸 리셋의 `img,svg,video,iframe{max-width:100%}` 가 히어로/인트로의 커버용
   iframe 폭을 컨테이너 폭으로 잘라버린다. 그러면 계산된 max(100%,177.78svh) 가
   무시되고 세로 화면에서 유튜브가 레터박스(위아래 검은 띠)로 재생된다.
   커버 iframe 두 곳만 상한을 푼다. */
.lp-hero__media iframe,.fp-intro__media iframe{
  max-width:none;max-height:none;max-inline-size:none;max-block-size:none}
/* svh 미지원 브라우저 폴백 — vh 로 먼저 깔고 svh 로 덮는다 */
.lp-hero__media iframe,.fp-intro__media iframe{
  inline-size:max(100%,177.78vh);block-size:max(100%,56.25vw)}
@supports (height:100svh){
  .lp-hero__media iframe,.fp-intro__media iframe{inline-size:max(100%,177.78svh)}
}

/* ==========================================================================
   §TOP  상단 메뉴바 + 메뉴판(메가 패널)
   기존 우측 드로어를 대체한다. 셸의 흐름 높이 0 오버레이 계약은 유지 —
   header 는 absolute, 자식만 pointer-events:auto.
   ========================================================================== */
.lp-header{position:absolute;inset-inline:0;top:0;z-index:60;pointer-events:none}
.lp-header > *{pointer-events:auto}

.lp-header__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--rb-s3);min-block-size:var(--rb-header-h);
  padding-inline:var(--rb-gutter);background:var(--rb-veil);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end:1px solid var(--rb-line)}

/* ---- 로고 ---- */
.lp-header__start{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem);
  justify-self:start;min-width:0}
.lp-brand{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;
  color:var(--rb-ink-900);min-width:0}
.lp-brand img{inline-size:auto;block-size:2rem;flex:0 0 auto}
.lp-brand__sub{font-size:var(--rb-fs-cap);color:var(--rb-ink-500);letter-spacing:-.02em;
  white-space:nowrap}
@media (max-width:75rem){.lp-brand__sub{display:none}}

/* ---- 가운데 주요 메뉴 (영문 위 / 국문 아래) ---- */
.lp-gnb{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.75rem);justify-self:center}
.lp-gnb a{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding-block:.5rem;text-decoration:none;white-space:nowrap}
.lp-gnb b{font-family:var(--rb-font-serif);font-size:var(--rb-fs-sm);font-weight:var(--rb-w-bold);
  letter-spacing:.18em;color:var(--rb-accent);line-height:1;text-transform:uppercase}
.lp-gnb span{font-size:var(--rb-fs-body);font-weight:var(--rb-w-med);color:var(--rb-ink-800);
  letter-spacing:-.03em;line-height:1}
.lp-gnb a::after{content:"";position:absolute;inset-inline:0;bottom:0;block-size:2px;
  background:var(--rb-accent);transform:scaleX(0);transform-origin:center;
  transition:transform var(--rb-dur-1) var(--rb-ease)}
.lp-gnb a:hover::after,.lp-gnb a:focus-visible::after,
.lp-gnb a[aria-current="page"]::after{transform:scaleX(1)}
.lp-gnb a:hover span,.lp-gnb a[aria-current="page"] span{color:var(--rb-accent-deep)}
@media (max-width:64rem){.lp-gnb{display:none}}

/* ---- 우측: 언어 · 전화 · 메뉴판 ---- */
.lp-header__end{display:flex;align-items:center;gap:var(--rb-s2);justify-self:end;min-width:0}

.lp-lang{display:flex;align-items:center;gap:.5rem;font-family:var(--rb-font-serif);
  font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);letter-spacing:.08em}
.lp-lang > *{position:relative;color:var(--rb-ink-500);text-decoration:none;
  padding-inline:.125rem;transition:color var(--rb-dur-1) var(--rb-ease)}
.lp-lang > * + *::before{content:"";position:absolute;inset-inline-start:-.3125rem;top:.15em;
  bottom:.15em;inline-size:1px;background:var(--rb-line-3)}
.lp-lang a:hover{color:var(--rb-accent)}
.lp-lang [aria-current="true"]{color:var(--rb-ink-900);font-weight:var(--rb-w-bold)}
.lp-lang [aria-disabled="true"]{color:var(--rb-line-4);cursor:not-allowed}
@media (max-width:60rem){.lp-lang{display:none}}

.lp-tel{display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:1.125rem;
  border:1px solid var(--rb-accent);border-radius:var(--rb-radius-pill);
  color:var(--rb-accent-deep);text-decoration:none;font-family:var(--rb-font-serif);
  font-size:var(--rb-fs-body-lg);font-weight:var(--rb-w-bold);letter-spacing:.04em;
  white-space:nowrap;transition:background var(--rb-dur-1) var(--rb-ease),
    color var(--rb-dur-1) var(--rb-ease)}
.lp-tel:hover{background:var(--rb-accent);color:var(--rb-on-accent)}
@media (max-width:44rem){.lp-tel{padding-inline:.75rem;font-size:var(--rb-fs-sm)}}
@media (max-width:30rem){.lp-tel span{display:none}}

.lp-menu-btn{display:inline-flex;align-items:center;gap:.5rem;min-block-size:2.75rem;
  padding-inline:1rem;border:0;border-radius:var(--rb-radius-pill);
  background:var(--rb-ink-900);color:var(--rb-on-dark);cursor:pointer;
  font-family:inherit;font-size:var(--rb-fs-sm);font-weight:var(--rb-w-med);
  letter-spacing:-.02em;white-space:nowrap;
  transition:background var(--rb-dur-1) var(--rb-ease)}
.lp-menu-btn:hover{background:var(--rb-accent-deep)}
.lp-menu-btn__ico{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  inline-size:.875rem;block-size:.875rem;flex:0 0 auto}
.lp-menu-btn__ico i{display:block;background:currentColor;border-radius:1px}
.lp-menu-btn[aria-expanded="true"]{background:var(--rb-accent)}

/* ---- 메뉴판 패널 ---- */
.lp-mega{position:absolute;inset-inline:0;top:100%;z-index:2;
  background:var(--rb-ink-900);color:var(--rb-on-dark);
  border-block-end:1px solid rgba(255,255,255,.12);
  max-block-size:calc(100svh - var(--rb-header-h));overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;transform:translate3d(0,-.75rem,0);
  transition:opacity var(--rb-dur-2) var(--rb-ease),transform var(--rb-dur-2) var(--rb-ease)}
.lp-mega[hidden]{display:none}
.lp-mega.is-open{opacity:1;transform:none}
.lp-mega__inner{max-inline-size:var(--rb-container-wide);margin-inline:auto;
  padding:var(--rb-s6) var(--rb-gutter) var(--rb-s5)}
.lp-mega__grid{display:grid;gap:var(--rb-s6) var(--rb-gap-lg);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:75rem){.lp-mega__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:60rem){.lp-mega__grid{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--rb-s5) var(--rb-gap)}}
@media (max-width:34rem){.lp-mega__grid{grid-template-columns:minmax(0,1fr)}}

.lp-mega__group h3{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);
  color:var(--rb-on-dark);letter-spacing:-.03em;line-height:1.2}
.lp-mega__group em{display:block;margin-block:.375rem var(--rb-s2);font-style:normal;
  font-family:var(--rb-font-serif);font-size:var(--rb-fs-cap);font-weight:var(--rb-w-med);
  letter-spacing:.22em;color:var(--rb-cyan-400);text-transform:uppercase}
.lp-mega__group ul{list-style:none;margin:0;padding:0;
  border-block-start:1px solid rgba(255,255,255,.16);padding-block-start:var(--rb-s2)}
.lp-mega__group li a{display:block;padding-block:.5rem;color:var(--rb-muted-inv);
  text-decoration:none;font-size:var(--rb-fs-body);letter-spacing:-.02em;
  transition:color var(--rb-dur-1) var(--rb-ease),padding-inline-start var(--rb-dur-1) var(--rb-ease)}
.lp-mega__group li a:hover,.lp-mega__group li a:focus-visible{color:var(--rb-on-dark);
  padding-inline-start:.375rem}
.lp-mega__group li a[aria-current="page"]{color:var(--rb-cyan-400);font-weight:var(--rb-w-med)}

/* 예약·문의 카드 */
.lp-mega__visit{border:1px solid rgba(255,255,255,.18);border-radius:var(--rb-radius);
  padding:var(--rb-s5) var(--rb-s4);background:rgba(255,255,255,.035)}
.lp-mega__visit h3{font-size:var(--rb-fs-h3);font-weight:var(--rb-w-bold);color:var(--rb-on-dark)}
.lp-mega__visit em{display:block;margin-block:.375rem var(--rb-s3);font-style:normal;
  font-family:var(--rb-font-serif);font-size:var(--rb-fs-cap);letter-spacing:.22em;
  color:var(--rb-cyan-400)}
.lp-mega__tel{display:inline-block;font-family:var(--rb-font-serif);
  font-size:clamp(1.5rem,1rem + 1.6vw,2rem);font-weight:var(--rb-w-bold);letter-spacing:.03em;
  color:var(--rb-on-dark);text-decoration:none;line-height:1.2;
  padding-block-start:var(--rb-s3);border-block-start:1px solid rgba(255,255,255,.16);
  inline-size:100%}
.lp-mega__tel:hover{color:var(--rb-cyan-400)}
.lp-mega__visit p{margin-block-start:var(--rb-s2);color:var(--rb-muted-inv);
  font-size:var(--rb-fs-cap);line-height:1.7}
.lp-mega__visit .rb-btn{margin-block-start:var(--rb-s3);inline-size:100%}

/* 하단 요약 줄 */
.lp-mega__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--rb-s3);margin-block-start:var(--rb-s6);padding-block-start:var(--rb-s3);
  border-block-start:1px solid rgba(255,255,255,.16)}
.lp-mega__foot p{color:var(--rb-ink-400);font-size:var(--rb-fs-cap);letter-spacing:.02em}
.lp-mega__foot a{color:var(--rb-cyan-400);text-decoration:none;font-size:var(--rb-fs-cap);
  font-weight:var(--rb-w-med)}
.lp-mega__foot a:hover{color:var(--rb-on-dark)}

/* 모바일에서만 노출되는 언어 선택 (메뉴판 안) */
.lp-mega__lang{display:none;gap:.75rem;align-items:center;margin-block-end:var(--rb-s5);
  padding-block-end:var(--rb-s3);border-block-end:1px solid rgba(255,255,255,.16);
  font-family:var(--rb-font-serif);letter-spacing:.1em;font-size:var(--rb-fs-body)}
.lp-mega__lang > *{color:var(--rb-muted-inv);text-decoration:none}
.lp-mega__lang [aria-current="true"]{color:var(--rb-cyan-400);font-weight:var(--rb-w-bold)}
.lp-mega__lang [aria-disabled="true"]{color:rgba(255,255,255,.32)}
@media (max-width:60rem){.lp-mega__lang{display:flex}}

/* 스크림 */
.lp-mega-scrim{position:fixed;inset:0;z-index:59;border:0;padding:0;
  background:rgba(25,22,19,.5);opacity:0;
  transition:opacity var(--rb-dur-2) var(--rb-ease);cursor:pointer}
.lp-mega-scrim[hidden]{display:none}
.lp-mega-scrim.is-open{opacity:1}

@media (prefers-reduced-motion:reduce){
  .lp-mega,.lp-mega-scrim{transition:none}
}

/* ==========================================================================
   §ORIG  원본 사이트(m.esbeauty.kr) 컴포넌트 전사
   값은 원본 pc_skin_840_559.css · pc_9411.css 실측 그대로 옮긴다.
   ========================================================================== */

/* ---- 헤더 좌측 상담 아이콘 (원본 .top_baro_box) ---- */
.lp-baro{display:flex;align-items:center;gap:7px;margin:0;padding:0;list-style:none}
.lp-baro a{display:block;line-height:0;border-radius:50%}
.lp-baro img{inline-size:2.625rem;block-size:2.625rem;
  transition:transform var(--rb-dur-1) var(--rb-ease)}
.lp-baro a:hover img,.lp-baro a:focus-visible img{transform:translateY(-2px)}
@media (max-width:64rem){.lp-baro{display:none}}

/* ---- 우측 플로트 퀵바 (원본 .clinic-quickbar 전사) ---- */
.clinic-quickbar{box-sizing:border-box;position:fixed;right:20px;top:50%;
  transform:translateY(-50%);z-index:58;display:flex;flex-direction:column;gap:12px;
  font-family:var(--rb-font-body)}
.clinic-quickbar .quick-item{box-sizing:border-box;width:176px;min-height:45px;
  padding:15px 17px;border:1px solid rgba(35,35,35,.08);border-radius:22px;
  background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:13px;text-decoration:none;color:#222;
  cursor:pointer;transition:all .25s ease;appearance:none;text-align:start}
.clinic-quickbar .quick-item:hover{transform:translateX(-6px);
  border-color:rgba(179,78,93,.35);box-shadow:0 18px 40px rgba(0,0,0,.17)}
.clinic-quickbar .quick-reserve_naver{background:#03c75a;color:#fff;
  border-color:rgba(3,199,90,.4)}
.clinic-quickbar .quick-reserve_kakao{background:#fee500;color:#000;
  border-color:rgba(0,0,0,.08)}
.clinic-quickbar .quick-icon{flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:rgba(155,122,77,.10);display:flex;align-items:center;justify-content:center;
  font-size:21px;line-height:1}
.clinic-quickbar .quick-icon img{width:55%;height:auto}
.clinic-quickbar .quick-reserve_naver .quick-icon,
.clinic-quickbar .quick-reserve_kakao .quick-icon{background:rgba(255,255,255,.18)}
.clinic-quickbar .quick-text{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.clinic-quickbar .quick-text strong{font-size:18px;font-weight:700;letter-spacing:-.04em;
  white-space:nowrap}
.clinic-quickbar .quick-text em{font-style:normal;font-size:13px;font-weight:400;
  color:#777;letter-spacing:-.03em;white-space:nowrap}
.clinic-quickbar .quick-reserve_naver .quick-text em{color:rgba(255,255,255,.78)}
.clinic-quickbar button.quick-item{border:1px solid rgba(35,35,35,.08);font-family:inherit}

/* 모바일 퀵바 — 원본과 동일하게 하단 가로 배치 */
@media (max-width:48rem){
  .clinic-quickbar{left:12px;right:12px;top:auto;bottom:16px;transform:none;
    flex-direction:row;gap:9px;padding-block-end:env(safe-area-inset-bottom)}
  /* 항목이 4개든 5개든 한 줄을 균등 분할한다. width:25% 는 5개일 때 125% 가 되어 넘쳤다.
     번역 라벨(예: Phone Consultation)이 길어도 칸 안에서 줄바꿈된다. */
  .clinic-quickbar .quick-item{flex:1 1 0;min-width:0;min-height:45px;padding:11px 4px;
    border-radius:18px;flex-direction:column;justify-content:center;gap:7px}
  .clinic-quickbar .quick-text{min-width:0;inline-size:100%}
  .clinic-quickbar .quick-text strong{max-inline-size:100%;overflow-wrap:anywhere;hyphens:auto}
  .clinic-quickbar .quick-item:hover{transform:translateY(-3px)}
  .clinic-quickbar .quick-icon{width:34px;height:34px;flex:0 0 34px;font-size:18px}
  .clinic-quickbar .quick-text{align-items:center;text-align:center;gap:0}
  .clinic-quickbar .quick-text strong{font-size:14px;line-height:1.2}
  .clinic-quickbar .quick-text em{display:none}
  body{padding-block-end:6rem}
}
@media (max-width:22.5rem){
  .clinic-quickbar{left:8px;right:8px;bottom:10px;gap:6px}
  .clinic-quickbar .quick-item{min-height:45px;border-radius:15px}
  .clinic-quickbar .quick-icon{width:30px;height:30px;flex-basis:30px;font-size:16px}
  .clinic-quickbar .quick-text strong{font-size:12.5px}
  body{padding-block-end:6.5rem}
}

/* ---- 좌측 이벤트 팝업 배너 (원본 event_popup 전사 · 450×637) ---- */
.lp-pop{position:fixed;inset-block-start:auto;top:clamp(6rem,14vh,14.375rem);
  inset-inline-start:20px;z-index:57;inline-size:min(450px,calc(100vw - 40px))}
.lp-pop[hidden]{display:none}
.lp-pop__box{position:relative}
.lp-pop__viewport{overflow:hidden;border-radius:var(--rb-radius);
  box-shadow:0 24px 60px rgba(25,22,19,.34);background:var(--rb-ink-900)}
.lp-pop .rb-slide{display:block}
.lp-pop .rb-slide img{display:block;inline-size:100%;block-size:auto;aspect-ratio:450/637;
  object-fit:cover}
.lp-pop__close{position:absolute;inset-block-start:-2.375rem;inset-inline-start:0;
  z-index:3;inline-size:2.25rem;block-size:2.25rem;padding:0;border:0;border-radius:50%;
  background:rgba(25,22,19,.55);color:#fff;font-size:1.125rem;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lp-pop__close:hover{background:var(--rb-accent)}
.lp-pop__nav{position:absolute;inset-block-start:50%;z-index:3;transform:translateY(-50%);
  inline-size:2.25rem;block-size:2.25rem;border:0;border-radius:50%;
  background:rgba(25,22,19,.34);color:#fff;font-size:1.375rem;line-height:1;cursor:pointer;
  opacity:.85;transition:opacity var(--rb-dur-1) var(--rb-ease),
    background var(--rb-dur-1) var(--rb-ease)}
.lp-pop__nav:hover{opacity:1;background:var(--rb-accent)}
.lp-pop__nav--prev{inset-inline-start:.5rem}
.lp-pop__nav--next{inset-inline-end:.5rem}
.lp-pop__dots{justify-content:center;gap:.625rem;margin-block-start:.875rem}
.lp-pop__dots button{inline-size:.75rem;block-size:.75rem;background:#dee9ee;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lp-pop__dots button[aria-current="true"]{background:var(--rb-accent);transform:scale(1.25)}
.lp-pop__foot{display:flex;gap:.5rem;margin-block-start:.75rem}
.lp-pop__foot button{flex:1 1 auto;min-block-size:2.5rem;padding-inline:.75rem;border:0;
  border-radius:var(--rb-radius-pill);background:rgba(25,22,19,.72);color:#fff;
  font-family:inherit;font-size:var(--rb-fs-cap);font-weight:var(--rb-w-med);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:-.02em}
.lp-pop__foot button:hover{background:var(--rb-accent-deep)}
@media (max-width:64rem){
  .lp-pop{inset-inline:16px auto;inline-size:min(340px,calc(100vw - 32px));
    top:clamp(5.5rem,12vh,9rem)}
}
@media (max-width:48rem){
  .lp-pop{inset-inline:12px 12px;inline-size:auto;
    max-inline-size:min(380px,calc(100vw - 24px));margin-inline:auto}
}

/* 모바일: 팝업 닫기 ✕ 가 배너 위쪽(-2.375rem)에 있으면 헤더에 가린다 → 배너 안 우측 상단으로 */
@media (max-width:48rem){
  .lp-pop__close{inset-block-start:.5rem;inset-inline-start:auto;inset-inline-end:.5rem;
    background:rgba(25,22,19,.62)}
}

/* ---- L30. 배경 영상은 숨기지 않는다 -------------------------------------
   이전에는 iframe 을 opacity:0 으로 두고 JS 가 재생을 확인해야만 보여줬다.
   그러면 prefers-reduced-motion 이 켜져 있거나(=still) JS 가 한 번만 어긋나도
   **영영 포스터(썸네일)만** 남는다 — 원본 m.esbeauty.kr 에는 그런 게이트가 없다.
   iframe 은 항상 보이게 두고, 포스터 <img> 는 그 아래에서 로드 전까지만 비친다.
   자동재생이 막히면 유튜브가 자기 화면을 보여주므로 검은 화면도 아니다. */
.lp-hero__media img,.fp-intro__media img{z-index:0}
.lp-hero__media iframe,.fp-intro__media iframe{z-index:1}

/* ---- L31. 랜딩 전용 다국어 링크 --------------------------------------------
   랜딩에는 주요 메뉴도 메뉴판도 없다. 언어 선택이 유일한 내비이므로
   모든 폭에서 보이게 하고, 코드(KO) + 언어명(한국어) 2단으로 크게 둔다. */
.lp-lang--main{display:flex;align-items:center;gap:clamp(.5rem,1.2vw,1.125rem)}
.lp-lang--main a{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:.125rem;padding:.375rem .375rem;text-decoration:none;color:var(--rb-ink-500);
  transition:color var(--rb-dur-1) var(--rb-ease)}
.lp-lang--main b{font-family:var(--rb-font-serif);font-size:var(--rb-fs-body-lg);
  font-weight:var(--rb-w-bold);letter-spacing:.12em;line-height:1}
.lp-lang--main span{font-size:.6875rem;letter-spacing:-.02em;line-height:1;
  color:var(--rb-ink-400)}
.lp-lang--main a::after{content:"";position:absolute;inset-inline:.25rem;bottom:0;
  block-size:2px;background:var(--rb-accent);transform:scaleX(0);
  transition:transform var(--rb-dur-1) var(--rb-ease)}
.lp-lang--main a:hover,.lp-lang--main a:focus-visible{color:var(--rb-accent-deep)}
.lp-lang--main a:hover span,.lp-lang--main a:focus-visible span{color:var(--rb-accent)}
.lp-lang--main a:hover::after,.lp-lang--main a:focus-visible::after{transform:scaleX(1)}
.lp-lang--main a[aria-current="page"]{color:var(--rb-ink-900)}
.lp-lang--main a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:60rem){
  .lp-lang--main{display:flex;gap:.25rem}
  .lp-lang--main span{display:none}
  .lp-lang--main b{font-size:var(--rb-fs-sm)}
}
@media (max-width:30rem){
  .lp-lang--main a{padding-inline:.25rem}
  .lp-lang--main b{font-size:.8125rem;letter-spacing:.06em}
}

/* ---- L32. 랜딩: 콘텐츠 이미지를 자르지 않는다 -------------------------------
   랜딩(html.fp)에서만 적용. 카드/타일의 고정 비율 박스를 풀고 이미지를 원본
   비율 그대로 흘린다. 소스가 0.509~1.0 로 제각각이라 16/9·4/5 박스에 cover 로
   넣으면 세로 이미지가 가로 띠처럼 잘려 나왔다.
   그리드는 align-items:start 로 두어 각 항목이 제 이미지 높이만큼만 차지한다.
   ※ 배경 영상 포스터(.fp-intro__media img)와 16:9 로 딱 맞는 영상 썸네일,
      450:637 로 딱 맞는 팝업 배너는 그대로 둔다 — 잘리지 않는다. */
html.fp .lp-card__media{aspect-ratio:auto;background:transparent}
html.fp .lp-card__media img{position:static;inline-size:100%;block-size:auto;
  object-fit:fill}
html.fp .fp-sec .lp-tile,html.fp .lp-tile{aspect-ratio:auto}
html.fp .lp-tile img{position:static;inline-size:100%;block-size:auto;object-fit:fill}
html.fp .lp-tiles,html.fp .lp-cards{align-items:start}
html.fp .lp-split__media--sq img,html.fp .lp-split__media--tall img{
  aspect-ratio:auto;block-size:auto;object-fit:fill}
html.fp .lp-rail__item .lp-card{block-size:100%}

/* ---- L33. CJK 줄바꿈 -------------------------------------------------------
   셸 리셋의 body{word-break:keep-all} 는 한국어에 맞는 설정이다(어절 안에서 안 끊김).
   그런데 일본어·중국어는 글자 사이에서 끊겨야 하는데 keep-all 이 그걸 막아
   긴 문장이 줄바꿈되지 않고 가로로 넘쳤다(360px 에서 실측). 해당 언어만 되돌린다. */
html[lang="ja"] body,
html[lang^="zh"] body{word-break:normal;line-break:auto}


/* ---- L35 캔버스 임베드 위 여백 ----
   `.lp-cards` 는 margin-block-end 가 0 이고 `.lp-long.lp-v18` 도 margin 이 없어서
   카드 목록 바로 뒤에 캔버스가 붙었다(#september · #past 에서 여백 0px 실측).
   앞 요소가 이미 여백을 가진 경우(#detail 의 .lp-head)는 인접 형제 margin 이
   상쇄되므로 값이 겹쳐 커지지 않는다. */
.lp-long.lp-v18{margin-block-start:var(--rb-s6)}


/* ---- L36 데스크톱 세로 퀵바 라벨 2행 ----
   `.quick-item` 은 176px 고정폭이고 라벨은 `white-space:nowrap` 한 줄이라,
   번역 라벨(예: Naver Booking)이 초록 버튼 밖으로 삐져나왔다.
   한국어가 아닐 때만 두 줄을 허용한다(모바일 바는 48rem 이하 규칙에서 이미 처리). */
@media (min-width:48.0625rem){
  html:not([lang="ko"]) .clinic-quickbar .quick-text{min-inline-size:0}
  html:not([lang="ko"]) .clinic-quickbar .quick-text strong{white-space:normal;
    font-size:16px;line-height:1.2}
  html:not([lang="ko"]) .clinic-quickbar .quick-text em{white-space:normal}
}


/* ---- L37 v18-1804 캔버스 배경 이중 노출 수정 ----
   이 캔버스의 배경 이미지(hero_bg.jpg · lower_bg.jpg)에는 카드 본문이 이미 그려져 있다.
   HTML 로 같은 카드를 다시 그리므로, 배경이 통째로 보이면 글자가 이중으로 겹친다.
   원본에는 이를 막는 보정이 `@media (max-width:1024px)` 안에만 있어서 데스크톱에서만
   겹쳐 보였다(1920px 실측). 폭에 관계없이 적용한다.
   `body` 를 붙여 페이지 인라인 <style> 의 같은 선택자(0,3,0)를 이긴다. */
body .v18-1804 .pagebg{display:flex;flex-direction:column}
body .v18-1804 .pagebg .b1{flex:0 0 auto;aspect-ratio:1280/392;background-size:100% auto;
  background-position:top center;background-color:#efe4d4}
body .v18-1804 .pagebg .b2{flex:1 1 auto;aspect-ratio:auto;background-image:none;
  background:linear-gradient(180deg,#efd4b6 0%,#e6ceb4 20%,#ddc4a9 45%,
  #e2c4a4 70%,#ddaf7c 88%,#c28f5a 100%)}


/* ---- L38 캔버스 리빌 안전망(2차) ----
   1차 방어는 HTML 인라인 CSS 를 옵트인으로 바꾼 것이다(`html.v18anim` 아래에서만 숨김).
   여기는 그 뒤를 받치는 2차 안전망 — `.in` 이 끝내 붙지 않아도 3초 뒤 드러나게 한다.
   옛 JS 가 캐시된 브라우저에서 본문이 통째로 사라지던 사고가 실제로 있었다. */
.v18-embed .reveal{animation:v18-reveal-failsafe 0s linear 3s forwards}
.v18-embed .reveal.in{animation:none}
@keyframes v18-reveal-failsafe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .v18-embed .reveal{animation-delay:0s}
}


/* ---- L39 번역 캔버스 줄바꿈 허용 ----
   캔버스는 한국어 글자폭에 맞춰 `white-space:nowrap` 으로 한 줄에 고정한 칸이 많다.
   번역문은 그 폭을 넘어 잘리므로(모바일 ja 실측 54건·최대 331px) 줄바꿈을 허용한다.
   `overflow-wrap:anywhere` 는 넣지 않는다 — 좁은 칸에서 `F r i d a y` 처럼
   글자 단위로 분해되는 부작용이 있었다(hours 실측). 단어 단위 줄바꿈만 허용한다.
   `body` 로 특이성을 올려 페이지 인라인 <style> 의 같은 선택자를 이긴다. */
html:not([lang="ko"]) body .v18-embed *{white-space:normal}


/* ---- L40 번역 캔버스 모바일 가로 스크롤 ----
   캔버스 내부는 고정폭 그리드라, 번역문이 길어지면 칸이 뷰포트보다 넓어진다
   (ja 실측: 요소 588px vs 캔버스 350px). 폰트를 줄여도 컨테이너 단위라 효과가 없다.
   `overflow-x:hidden` 이면 넘친 글자가 그냥 사라지므로, 번역 사이트에서만
   캔버스 안쪽을 가로 스크롤할 수 있게 해 내용을 읽을 수 있도록 한다.
   페이지 전체는 여전히 가로 스크롤되지 않는다. */
@media (max-width:48rem){
  html:not([lang="ko"]) body .v18-embed{overflow-x:auto;-webkit-overflow-scrolling:touch}
}