@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   청담 라플라스 — 디자인 시스템
   토큰·원자클래스 구조는 리뷰티 디자인센터 템플릿(26071160s1v)을 계승,
   팔레트/타이포는 라플라스 브랜드(네이비 + 샴페인골드)로 전면 교체.
   대비: gold-text 6.05:1 / champagne-on-navy 9.75:1 / muted 5.95:1 (WCAG AA)
   ══════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  /* color */
  --navy:#002548;         --navy-deep:#06101d;    --navy-soft:#0e2e4e;
  --gold:#b3a36c;         --gold-text:#6f6234;    --champagne:#e5ca99;
  --paper:#ffffff;        --paper-warm:#faf8f4;   --paper-warm-2:#f3eee5;
  --line:#e7e2d8;         --line-on-dark:rgba(229,202,153,.22);
  --ink:#0b1420;          --ink-mute:#5a6570;
  --on-dark:#ffffff;      --on-dark-mute:#a9b2bc;
  --kakao:#fee500;        --kakao-ink:#191600;
  --naver:#03c75a;

  /* type */
  --ff-display:'Noto Serif KR',Georgia,'Apple SD Gothic Neo',serif;
  --ff-body:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
            'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --fs-body:1rem;
  --fs-sm:.8125rem;
  --fs-xs:.75rem;
  --fs-h4:clamp(1rem,.94rem + .3vw,1.1875rem);
  --fs-h3:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
  --fs-h2:clamp(1.625rem,1.25rem + 1.7vw,2.75rem);
  --fs-h1:clamp(2rem,1.4rem + 2.6vw,3.75rem);
  --lh-tight:1.3;  --lh-body:1.78;
  --ls-wide:.22em;

  /* space / layout */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;  --sp-9:6rem;
  --container:75rem;
  --container-narrow:52rem;
  --gutter:clamp(1.25rem,.85rem + 1.9vw,2.5rem);
  --sec-pad:clamp(3.5rem,2.25rem + 4.2vw,7rem);
  --grid-gap:clamp(1rem,.7rem + 1.1vw,1.75rem);
  --header-h:5.5rem;
  --ctabar-h:3.5rem;

  /* motion */
  --dur-1:.25s; --dur-2:.7s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-rise:cubic-bezier(.16,1,.3,1);   /* expo-out — 큰 글자용 */
  --dur-rise:1.25s;
  --stagger:130ms;
}

/* ── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ol,ul,table{margin:0;padding:0}
ol,ul{list-style:none}
body{
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:var(--lh-tight)}
img,svg,video{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  /* .lp-anim 은 제외한다. 여기에 !important 로 duration 을 걸면 transition-property 가
     기본값 all 이라 JS 가 넣는 '시작값'까지 서서히 이동해 연출이 상쇄된다. */
  *:not(.lp-anim),*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important}
  html{scroll-behavior:auto}
  .lp-reveal,.lp-stagger>*{opacity:1!important;transform:none!important}
  /* 동작 줄이기에서도 참조 사이트 수준의 작은 세로 이동(14px)+페이드는 남긴다.
     좌우 큰 이동·확대·와이프·글자 분할은 JS 쪽에서 축소판으로 대체된다. */
  /* .lp-anim 자신의 translateY 는 허용하고, 분할 조각과 골드 룰의 변형만 무력화한다 */
  /* .lp-anim 계열은 동작 줄이기에서도 같은 연출을 쓴다(클라이언트 요청).
     되돌리려면 아래 두 줄의 주석을 풀면 조각 변형이 전부 무력화된다.
     .lp-anim .lp-l,.lp-anim .lp-c{transform:none!important;opacity:1!important;clip-path:none!important}
     .lp-rule{transform:none!important} */
}

/* ── atoms ──────────────────────────────────────────────────── */
.lp-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.lp-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.lp-sec{padding-block:var(--sec-pad)}
.lp-sec--warm{background:var(--paper-warm)}
.lp-frame{position:relative;display:block;overflow:hidden;background:var(--paper-warm-2)}
.lp-frame>img{width:100%;height:100%;object-fit:cover}

.lp-kicker{display:inline-block;font-family:var(--ff-display);font-size:var(--fs-xs);
  font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--gold-text)}
.lp-band .lp-kicker{color:var(--champagne)}
.lp-rule{width:2.5rem;height:1px;background:var(--gold);margin-block:var(--sp-4)}

.lp-h2{font-size:var(--fs-h2);letter-spacing:-.01em}
.lp-h3{font-size:var(--fs-h3)}
.lp-lead{font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.85;color:var(--ink-mute)}
.lp-note{font-size:var(--fs-xs);line-height:1.7;color:var(--ink-mute)}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:2.875rem;padding:.6875rem 1.875rem;border:1px solid currentColor;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out)}
.lp-btn:hover,.lp-btn:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.lp-btn--solid{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.lp-btn--solid:hover,.lp-btn--solid:focus-visible{background:var(--gold-text);border-color:var(--gold-text)}
.lp-btn--light{color:var(--on-dark);border-color:rgba(255,255,255,.62)}
.lp-btn--light:hover,.lp-btn--light:focus-visible{background:var(--on-dark);border-color:var(--on-dark);color:var(--navy)}

/* 리빌 — 숨김 상태는 html.js 아래에서만 적용한다.
   JS 가 없거나 실패해도 본문이 사라지지 않는다(점진적 향상). */
.lp-reveal{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
html.js .lp-reveal:not(.is-in){opacity:0;transform:translateY(1.5rem)}
.lp-stagger>*{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
html.js .lp-stagger:not(.is-in)>*{opacity:0;transform:translateY(1.25rem)}

/* 주요 문구 — anime.js splitText 로 런타임에 줄 단위로 쪼개 애니메이션한다.
   라이브러리가 뜨기 전/실패 시 글자가 보이지 않으면 안 되므로, 숨김은 html.js 아래에서만.
   <head> 의 워치독이 1.2초 안에 부팅되지 않으면 js 클래스를 떼어 전부 노출한다. */
html.js .lp-anim:not(.is-in){opacity:0}
.lp-anim.is-in{opacity:1}
/* splitText 가 만드는 줄 래퍼(overflow:clip)에서 받침·디센더가 잘리지 않도록 여유 */
/* 줄 마스크(clip-path)에서 받침·디센더가 잘리지 않게 여유 */
.lp-anim .lp-l{padding-block:.1em;margin-block:-.1em}

/* 골드 룰 — 왼쪽(가운데 정렬 헤드는 가운데)에서 자라난다 */
.lp-rule{transform-origin:left}
.lp-head--c .lp-rule{transform-origin:center}

/* 히어로 — 스크롤이 아니라 로드 직후 순차 재생 */
.lp-hero__mark{transition-delay:.04s}
.lp-hero__meta{transition-delay:.66s}

/* 섹션 헤드 — 블록을 통째로 밀지 않고 kicker → 룰 → 제목 → 리드 순으로 푼다.
   스크롤하는 내내 같은 리듬이 반복돼 페이지가 살아 있는 느낌을 준다. */
.lp-stagger.is-in>*:nth-child(2){transition-delay:calc(var(--stagger)*1)}
.lp-stagger.is-in>*:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.lp-stagger.is-in>*:nth-child(4){transition-delay:calc(var(--stagger)*3)}
.lp-stagger.is-in>*:nth-child(5){transition-delay:calc(var(--stagger)*4)}
.lp-stagger.is-in>*:nth-child(6){transition-delay:calc(var(--stagger)*5)}

/* ── header ─────────────────────────────────────────────────── */
.lp-header{position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid var(--line);transition:background-color var(--dur-1) var(--ease-out),
  border-color var(--dur-1) var(--ease-out)}
.lp-header__in{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--header-h);display:flex;align-items:center;gap:var(--sp-5)}
.lp-logo{display:inline-flex;align-items:center;flex:none}
.lp-logo img{width:auto;height:2.125rem}

.lp-gnb{margin-inline-start:auto}
.lp-gnb__list{display:flex;gap:clamp(1rem,.2rem + 2.1vw,2.75rem)}
.lp-gnb__item{position:relative}
.lp-gnb__item>a{display:flex;align-items:center;height:var(--header-h);
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:color var(--dur-1) var(--ease-out)}
.lp-gnb__item>a:hover,.lp-gnb__item>a:focus-visible,.lp-gnb__item.is-cur>a{color:var(--gold-text)}
.lp-header__tel{flex:none;display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.lp-header__tel-l{font-size:var(--fs-xs);letter-spacing:.14em;color:var(--ink-mute)}
.lp-header__tel-n{font-family:var(--ff-display);font-size:1.25rem;font-weight:700;color:var(--navy)}

.lp-navtoggle{display:none;flex-direction:column;justify-content:center;gap:.3125rem;
  width:2.75rem;height:2.75rem;margin-inline-start:auto;flex:none}
.lp-navtoggle span{display:block;width:1.375rem;height:1.5px;background:var(--navy);
  transition:transform var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out)}
.lp-navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(.40625rem) rotate(45deg)}
.lp-navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.lp-navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-.40625rem) rotate(-45deg)}

.lp-drawer{position:fixed;inset-inline:0;top:var(--header-h);bottom:0;z-index:70;
  background:var(--paper);overflow-y:auto;
  padding:var(--sp-6) var(--gutter) calc(var(--ctabar-h) + var(--sp-8))}
.lp-drawer__in{display:grid;gap:var(--sp-5);max-width:var(--container-narrow);margin-inline:auto}
.lp-drawer__label{font-family:var(--ff-display);font-size:1.0625rem;font-weight:700;color:var(--navy);
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.lp-drawer__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--sp-4)}
.lp-drawer__links a{display:block;padding-block:.4375rem;font-size:.9375rem;color:var(--ink-mute)}
.lp-drawer__links a:hover{color:var(--gold-text)}
html.is-drawer-open{overflow:hidden}

@media (max-width:64rem){
  :root{--header-h:4rem}
  .lp-gnb,.lp-header__tel{display:none}
  .lp-navtoggle{display:flex}
  .lp-logo img{height:1.75rem}
}
@media (min-width:64.0625rem){.lp-navtoggle,.lp-drawer{display:none}}

/* 홈 히어로 위 투명 헤더 */
.lp-header--over{position:fixed;inset-inline:0;top:0;background:transparent;border-bottom-color:transparent}
.lp-header--over .lp-gnb__item>a,.lp-header--over .lp-header__tel-n{color:var(--on-dark)}
.lp-header--over .lp-header__tel-l{color:rgba(255,255,255,.72)}
.lp-header--over .lp-navtoggle span{background:var(--on-dark)}
.lp-header--over.is-mega,.lp-header--over.is-stuck{position:fixed;background:var(--paper);border-bottom-color:var(--line);
  box-shadow:0 .5rem 1.75rem rgba(0,37,72,.08)}
.lp-header--over.is-mega .lp-gnb__item>a,.lp-header--over.is-mega .lp-header__tel-n,.lp-header--over.is-stuck .lp-gnb__item>a,.lp-header--over.is-stuck .lp-header__tel-n{color:var(--ink)}
.lp-header--over.is-mega .lp-header__tel-n,.lp-header--over.is-stuck .lp-header__tel-n{color:var(--navy)}
.lp-header--over.is-mega .lp-header__tel-l,.lp-header--over.is-stuck .lp-header__tel-l{color:var(--ink-mute)}
.lp-header--over.is-mega .lp-navtoggle span,.lp-header--over.is-stuck .lp-navtoggle span{background:var(--navy)}


/* ── 메가 메뉴 (PC) ─────────────────────────────────────────────
   상단 메뉴에 올리면 전 섹션이 한 패널에 펼쳐진다. JS 없이 hover/focus 로 동작하고,
   JS 는 히어로 위 투명 헤더를 흰 배경으로 바꾸는 용도로만 is-mega 를 붙인다. */
.lp-mega{position:absolute;top:100%;left:0;right:0;z-index:79;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 1.5rem 3rem rgba(0,37,72,.14);
  opacity:0;visibility:hidden;transform:translateY(-.5rem);
  transition:opacity var(--dur-1) var(--ease-out),visibility var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out)}
.lp-gnb:hover~.lp-mega,.lp-gnb:focus-within~.lp-mega,
.lp-mega:hover,.lp-mega:focus-within{opacity:1;visibility:visible;transform:none}
.lp-mega__in{max-width:var(--container);margin-inline:auto;
  padding:clamp(1.75rem,1.25rem + 1.6vw,2.75rem) var(--gutter) clamp(2rem,1.5rem + 1.8vw,3rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,1rem + 1.6vw,2.75rem) clamp(1.5rem,1rem + 2vw,3.5rem)}
.lp-mega__t{margin:0 0 var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.lp-mega__t a{font-family:var(--ff-display);font-size:1.0625rem;font-weight:700;color:var(--navy)}
.lp-mega__t a:hover,.lp-mega__t a:focus-visible{color:var(--gold-text)}
.lp-mega__col ul{display:grid;gap:.125rem}
.lp-mega__col li a{display:block;padding:.4375rem 0;font-size:.9375rem;color:var(--ink-mute);
  transition:color var(--dur-1) var(--ease-out),padding-inline-start var(--dur-1) var(--ease-out)}
.lp-mega__col li a:hover,.lp-mega__col li a:focus-visible{color:var(--gold-text);padding-inline-start:.375rem}
@media (max-width:80rem){.lp-mega__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:64rem){.lp-mega{display:none}}

/* ── 언어 스위처 ───────────────────────────────────────────────── */
.lp-lang{flex:none;margin-inline-start:auto}
.lp-lang ul{display:flex;align-items:center;gap:.125rem}
.lp-lang a{display:block;padding:.25rem .4375rem;font-size:.75rem;font-weight:600;
  letter-spacing:.06em;color:var(--ink-mute);transition:color var(--dur-1) var(--ease-out)}
.lp-lang a:hover,.lp-lang a:focus-visible{color:var(--gold-text)}
.lp-lang a[aria-current]{color:var(--navy);border-bottom:1.5px solid var(--gold-text)}
/* 투명 헤더용 흰 글자 규칙은 헤더 바 안의 스위처에만 적용한다.
   드로어(.lp-lang--drawer)는 흰 패널 위에 있어 이 규칙이 새면 글자가 안 보인다. */
.lp-header--over .lp-lang:not(.lp-lang--drawer) a{color:rgba(255,255,255,.78)}
.lp-header--over .lp-lang:not(.lp-lang--drawer) a:hover{color:var(--champagne)}
.lp-header--over .lp-lang:not(.lp-lang--drawer) a[aria-current]{color:#fff;border-bottom-color:var(--champagne)}
.lp-header--over.is-mega .lp-lang:not(.lp-lang--drawer) a,
.lp-header--over.is-stuck .lp-lang:not(.lp-lang--drawer) a{color:var(--ink-mute)}
.lp-header--over.is-mega .lp-lang:not(.lp-lang--drawer) a:hover,
.lp-header--over.is-stuck .lp-lang:not(.lp-lang--drawer) a:hover{color:var(--gold-text)}
.lp-header--over.is-mega .lp-lang:not(.lp-lang--drawer) a[aria-current],
.lp-header--over.is-stuck .lp-lang:not(.lp-lang--drawer) a[aria-current]{color:var(--navy);border-bottom-color:var(--gold-text)}

/* 모바일 드로어 스위처 — 색을 스스로 확정한다(상속에 기대지 않는다) */
.lp-lang--drawer{margin-bottom:var(--sp-4)}
.lp-lang--drawer ul{gap:.375rem;flex-wrap:wrap}
.lp-lang--drawer a{min-width:3.25rem;padding:.625rem .75rem;text-align:center;
  border:1px solid var(--line);font-size:.8125rem;letter-spacing:.08em;
  color:var(--navy);background:var(--paper)}
.lp-lang--drawer a:hover,.lp-lang--drawer a:focus-visible{
  border-color:var(--gold-text);color:var(--gold-text);background:var(--paper-warm)}
.lp-lang--drawer a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:64rem){.lp-header .lp-lang:not(.lp-lang--drawer){display:none}}

/* ── quick rail (PC) ────────────────────────────────────────── */
.lp-quick{position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:75;
  display:flex;flex-direction:column;gap:.5rem}
.lp-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;
  width:4.25rem;height:4.25rem;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  color:var(--navy);font-size:.6875rem;font-weight:600;line-height:1.3;text-align:center;
  box-shadow:0 .25rem 1rem rgba(0,37,72,.12);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out)}
.lp-quick a:hover,.lp-quick a:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--champagne)}
.lp-quick a.is-kakao{background:var(--kakao);border-color:var(--kakao);color:var(--kakao-ink)}
.lp-quick a.is-kakao:hover{background:var(--kakao-ink);border-color:var(--kakao-ink);color:var(--kakao)}
@media (max-width:64rem){.lp-quick{display:none}}

/* ── mobile bottom CTA ──────────────────────────────────────── */
.lp-ctabar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;
  padding-bottom:env(safe-area-inset-bottom,0)}
.lp-ctabar__in{display:grid;grid-template-columns:1fr 1.35fr}
.lp-ctabar a{display:flex;align-items:center;justify-content:center;gap:.375rem;
  height:var(--ctabar-h);font-size:.9375rem;font-weight:700;letter-spacing:.01em}
.lp-ctabar__tel{background:var(--navy);color:var(--on-dark)}
.lp-ctabar__kakao{background:var(--kakao);color:var(--kakao-ink)}
@media (max-width:64rem){
  .lp-ctabar{display:block}
  body{padding-bottom:calc(var(--ctabar-h) + env(safe-area-inset-bottom,0))}
}

/* ── footer ─────────────────────────────────────────────────── */
.lp-foot{background:var(--navy-deep);color:var(--on-dark-mute);font-size:.875rem}
.lp-foot__in{max-width:var(--container);margin-inline:auto;padding:var(--sp-7) var(--gutter) var(--sp-8);
  display:grid;gap:var(--sp-6)}
.lp-foot__policy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--line-on-dark)}
.lp-foot__policy a{color:#d8d3c9;font-size:.875rem}
.lp-foot__policy a:hover,.lp-foot__policy a:focus-visible{color:var(--on-dark);text-decoration:underline}
.lp-foot__policy .lp-foot__bar{width:1px;height:.75rem;background:var(--line-on-dark)}
.lp-foot__policy strong{color:var(--champagne);font-weight:700}
.lp-foot__main{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-6)}
.lp-foot__brand{min-width:0;max-width:44rem}
.lp-foot__logo{height:2.25rem;width:auto;margin-bottom:var(--sp-4)}
.lp-foot__biz{display:flex;flex-wrap:wrap;gap:.25rem 1rem;line-height:1.9}
/* 라벨+값 쌍이 줄 중간에서 갈라지지 않게 nowrap.
   단 주소는 언어에 따라 뷰포트보다 길어져(ja/tw 360px) 잘리므로 줄바꿈을 허용한다. */
.lp-foot__biz span{white-space:nowrap;min-width:0}
.lp-foot__biz span.is-wrap{white-space:normal}
.lp-foot__biz span.is-wrap b{white-space:nowrap}
.lp-foot__biz b{font-weight:600;color:#cfd5db}
.lp-foot__biz a{color:#d8d3c9}
.lp-foot__biz a:hover{color:var(--on-dark);text-decoration:underline}
.lp-foot__copy{margin-top:var(--sp-4);font-size:var(--fs-xs);letter-spacing:.04em;color:#7f8894}
.lp-foot__disc{margin-top:var(--sp-3);font-size:var(--fs-xs);line-height:1.75;color:#7f8894}
.lp-foot__sns{display:flex;gap:var(--sp-3);flex:none}
.lp-foot__sns a{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--line-on-dark);border-radius:50%;color:var(--champagne);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.lp-foot__sns a:hover,.lp-foot__sns a:focus-visible{background:var(--champagne);color:var(--navy-deep)}

/* ── home hero ──────────────────────────────────────────────── */
.lp-hero{position:relative;isolation:isolate;min-height:min(100svh,52rem);
  display:flex;align-items:center;padding-block:calc(var(--header-h) + var(--sp-8)) var(--sp-9);
  padding-inline:var(--gutter);overflow:hidden;background:var(--navy-deep)}
.lp-hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.lp-hero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,14,26,.62) 0%,rgba(3,14,26,.42) 42%,rgba(3,14,26,.82) 100%)}
.lp-hero__in{max-width:var(--container);margin-inline:auto;width:100%;color:var(--on-dark)}
.lp-hero__mark{font-family:var(--ff-display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--champagne)}
.lp-hero__en{margin-top:var(--sp-5);font-family:var(--ff-display);font-weight:400;
  font-size:var(--fs-h1);line-height:1.22;letter-spacing:.005em;
  text-shadow:0 .125rem 1.5rem rgba(0,10,20,.55)}
.lp-hero__ko{margin-top:var(--sp-4);font-size:clamp(1rem,.9rem + .55vw,1.375rem);
  line-height:1.7;color:#e7eaee;text-shadow:0 .125rem 1rem rgba(0,10,20,.6)}
.lp-hero__meta{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-5)}
.lp-hero__open{display:inline-flex;align-items:baseline;gap:.625rem;padding:.5rem 1.125rem;
  border:1px solid var(--line-on-dark);background:rgba(0,37,72,.35);backdrop-filter:blur(6px)}
.lp-hero__open span{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--champagne)}
.lp-hero__open b{font-family:var(--ff-display);font-size:1.0625rem;font-weight:600;color:var(--on-dark)}
.lp-hero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:rgba(255,255,255,.8)}
.lp-hero__mouse{width:1.125rem;height:1.75rem;border:1px solid rgba(255,255,255,.75);border-radius:.625rem;position:relative}
.lp-hero__mouse::after{content:"";position:absolute;left:50%;top:.3125rem;width:.125rem;height:.375rem;
  margin-left:-.0625rem;background:#fff;border-radius:1px;animation:lp-dot 1.6s var(--ease-out) infinite}
@keyframes lp-dot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(.5rem)}}
@media (max-width:48rem){
  .lp-hero{min-height:38rem}
  .lp-hero__scroll{display:none}
}

/* ── subpage hero ───────────────────────────────────────────── */
.lp-phero{position:relative;isolation:isolate;min-height:18rem;display:flex;align-items:center;
  padding-block:var(--sp-8);padding-inline:var(--gutter);overflow:hidden;background:var(--navy)}
.lp-phero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55}
.lp-phero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,20,40,.9) 0%,rgba(0,20,40,.66) 45%,rgba(0,20,40,.42) 100%)}
.lp-phero__in{max-width:var(--container);margin-inline:auto;width:100%;color:var(--on-dark)}
.lp-phero__en{font-family:var(--ff-display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--champagne)}
.lp-phero__t{margin-top:var(--sp-3);font-size:clamp(1.75rem,1.3rem + 2vw,2.875rem);color:var(--on-dark)}
.lp-phero__d{margin-top:var(--sp-3);font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);
  line-height:1.8;color:#cfd8e0;max-width:44rem}
@media (max-width:48rem){.lp-phero{min-height:13rem}}

/* ── breadcrumb ─────────────────────────────────────────────── */
.lp-crumb{border-bottom:1px solid var(--line);background:var(--paper)}
.lp-crumb ol{max-width:var(--container);margin-inline:auto;padding:var(--sp-3) var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--ink-mute)}
.lp-crumb li{display:flex;align-items:center;gap:.5rem}
.lp-crumb li+li::before{content:"";width:.3125rem;height:.3125rem;border-top:1px solid currentColor;
  border-right:1px solid currentColor;transform:rotate(45deg);opacity:.6}
.lp-crumb a:hover{color:var(--gold-text)}
.lp-crumb [aria-current]{color:var(--navy);font-weight:600}

/* ── local nav (섹션 내 시술 탭) ─────────────────────────────── */
.lp-lnav{background:var(--paper-warm);border-bottom:1px solid var(--line)}
.lp-lnav ul{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:thin}
.lp-lnav a{display:block;padding:.9375rem 1.125rem;font-size:.875rem;font-weight:600;
  white-space:nowrap;color:var(--ink-mute);border-bottom:2px solid transparent;
  transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.lp-lnav a:hover{color:var(--gold-text)}
.lp-lnav a[aria-current]{color:var(--navy);border-bottom-color:var(--gold-text)}

/* ── sec head ───────────────────────────────────────────────── */
.lp-head{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  margin-bottom:var(--sp-7)}
.lp-head--c{text-align:center}
.lp-head--c .lp-rule{margin-inline:auto}
.lp-head p.lp-lead{margin-top:var(--sp-4);max-width:46rem}
.lp-head--c p.lp-lead{margin-inline:auto}

/* ── 3축 카드 (진료 축) ─────────────────────────────────────── */
.lp-axis{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.lp-axis__i{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);transition:border-color var(--dur-1) var(--ease-out),
  box-shadow var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.lp-axis__i:hover{border-color:var(--gold);box-shadow:0 1.25rem 2.5rem rgba(0,37,72,.10);transform:translateY(-.25rem)}
.lp-axis__pic{aspect-ratio:3/4}
.lp-axis__pic img{transition:transform var(--dur-2) var(--ease-out)}
.lp-axis__i:hover .lp-axis__pic img{transform:scale(1.05)}
.lp-axis__b{padding:var(--sp-5) var(--sp-5) var(--sp-6);display:flex;flex-direction:column;flex:1}
.lp-axis__n{font-family:var(--ff-display);font-size:.75rem;font-weight:700;letter-spacing:.2em;color:var(--gold-text)}
.lp-axis__t{margin-top:var(--sp-2);font-size:var(--fs-h3);color:var(--navy)}
.lp-axis__ko{margin-top:.25rem;font-size:.875rem;color:var(--ink-mute);letter-spacing:.02em}
.lp-axis__d{margin-top:var(--sp-4);font-size:.9375rem;line-height:1.8;color:var(--ink-mute)}
.lp-axis__more{margin-top:auto;padding-top:var(--sp-5);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;color:var(--navy);display:inline-flex;align-items:center;gap:.5rem}
.lp-axis__i:hover .lp-axis__more{color:var(--gold-text)}
@media (max-width:64rem){.lp-axis{grid-template-columns:1fr;max-width:34rem}}

/* ── 카테고리 그리드 (전체 진료) ─────────────────────────────── */
.lp-cats{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.lp-cat{display:flex;align-items:center;gap:var(--sp-4);background:var(--paper-warm);
  border:1px solid transparent;transition:background-color var(--dur-1) var(--ease-out),
  border-color var(--dur-1) var(--ease-out)}
.lp-cat:hover,.lp-cat:focus-visible{background:var(--paper);border-color:var(--gold)}
.lp-cat__pic{flex:none;width:7.5rem;align-self:stretch;min-height:6.75rem}
.lp-cat__t{padding-right:var(--sp-4);min-width:0}
.lp-cat__t b{display:block;font-family:var(--ff-display);font-size:1.0625rem;font-weight:600;color:var(--navy)}
.lp-cat__t span{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.6;color:var(--ink-mute)}
@media (max-width:64rem){.lp-cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:36rem){.lp-cats{grid-template-columns:1fr}.lp-cat__pic{width:6rem}}

/* ── 다크 밴드 (원장 / 인용) ─────────────────────────────────── */
.lp-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.lp-band__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.lp-band .lp-rule{background:var(--champagne)}
.lp-band__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(0,37,72,.94) 26%,rgba(0,37,72,.6) 48%,rgba(0,37,72,.12) 74%)}
.lp-band__in{max-width:var(--container);margin-inline:auto;padding:var(--sec-pad) var(--gutter);
  color:var(--on-dark)}
.lp-band__inner{max-width:34rem}
.lp-band__t{margin-top:var(--sp-3);font-size:var(--fs-h2)}
.lp-band__d{margin-top:var(--sp-4);line-height:1.9;color:#cfd8e0}
.lp-band__cta{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:64rem){
  .lp-band__shade{background:linear-gradient(180deg,rgba(0,37,72,.93),rgba(0,37,72,.78))}
  .lp-band__inner{max-width:none}
}

/* ── 인용 (인사말) ──────────────────────────────────────────── */
.lp-quote{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter);text-align:center}
.lp-quote__m{font-family:var(--ff-display);font-size:3rem;line-height:1;color:var(--gold);opacity:.5}
.lp-quote__p{margin-top:var(--sp-4);font-family:var(--ff-display);
  font-size:clamp(1.1875rem,1rem + 1.1vw,1.875rem);font-weight:500;line-height:1.65;color:var(--navy)}
.lp-quote__by{margin-top:var(--sp-5);font-size:.875rem;letter-spacing:.06em;color:var(--ink-mute)}
.lp-quote__by b{color:var(--navy);font-weight:700}

/* ── why (4블록) ────────────────────────────────────────────── */
.lp-why{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);
  border-left:1px solid var(--line)}
.lp-why__i{padding:var(--sp-6) var(--sp-6) var(--sp-7);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--paper)}
.lp-why__n{font-family:var(--ff-display);font-size:.8125rem;font-weight:700;letter-spacing:.18em;color:var(--gold-text)}
.lp-why__t{margin-top:var(--sp-3);font-size:var(--fs-h3);color:var(--navy);line-height:1.45}
.lp-why__d{margin-top:var(--sp-3);font-size:.9375rem;line-height:1.85;color:var(--ink-mute)}
@media (max-width:48rem){.lp-why{grid-template-columns:1fr}}


/* ── 갤러리 (둘러보기) ──────────────────────────────────────── */
.lp-gal{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.lp-gal figure{margin:0}
.lp-gal .lp-frame{aspect-ratio:4/3}
.lp-gal figcaption{margin-top:var(--sp-3);font-size:.875rem;color:var(--ink-mute)}
.lp-gal .lp-frame img{transition:transform var(--dur-2) var(--ease-out)}
.lp-gal figure:hover .lp-frame img{transform:scale(1.04)}
@media (max-width:64rem){.lp-gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:36rem){.lp-gal{grid-template-columns:1fr}}

/* ── 미디어 + 카피 2분할 ────────────────────────────────────── */
.lp-split{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.lp-split--rev .lp-split__pic{order:2}
.lp-split__pic{aspect-ratio:4/3}
.lp-split__b h3{font-size:var(--fs-h2);color:var(--navy)}
.lp-split__b p{margin-top:var(--sp-4);line-height:1.9;color:var(--ink-mute)}
@media (max-width:64rem){
  .lp-split{grid-template-columns:1fr}
  .lp-split--rev .lp-split__pic{order:0}
}

/* ── 체크리스트 (이런 분께) ─────────────────────────────────── */
.lp-check{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3) var(--sp-5)}
.lp-check li{position:relative;padding-left:1.75rem;line-height:1.8;color:var(--ink-mute)}
.lp-check li::before{content:"";position:absolute;left:0;top:.55em;width:.875rem;height:.5rem;
  border-left:1.5px solid var(--gold-text);border-bottom:1.5px solid var(--gold-text);
  transform:rotate(-45deg)}
@media (max-width:48rem){.lp-check{grid-template-columns:1fr}}

/* ── 포인트 3블록 ───────────────────────────────────────────── */
.lp-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.lp-pt{padding:var(--sp-5);background:var(--paper-warm);border-top:2px solid var(--gold)}
.lp-pt b{display:block;font-family:var(--ff-display);font-size:1.0625rem;color:var(--navy)}
.lp-pt span{display:block;margin-top:var(--sp-2);font-size:.9375rem;line-height:1.8;color:var(--ink-mute)}
.lp-pts--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:64rem){.lp-pts,.lp-pts--4{grid-template-columns:1fr}}
@media (min-width:64.0625rem) and (max-width:80rem){.lp-pts--4{grid-template-columns:repeat(2,1fr)}}

/* ── 표 ─────────────────────────────────────────────────────── */
.lp-tablewrap{overflow-x:auto;border:1px solid var(--line)}
.lp-tablewrap--fit{display:inline-block;max-width:100%;vertical-align:top}
.lp-table{min-width:34rem;font-size:.9375rem}
.lp-table caption{padding:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-mute);text-align:left}
.lp-table th,.lp-table td{padding:.875rem 1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.lp-table thead th{background:var(--navy);color:var(--on-dark);font-weight:600;font-size:.875rem;
  letter-spacing:.02em;border-bottom:0;white-space:nowrap}
.lp-table tbody th{width:9.5rem;background:var(--paper-warm);font-weight:600;color:var(--navy);white-space:nowrap}
.lp-table tbody tr:last-child th,.lp-table tbody tr:last-child td{border-bottom:0}
.lp-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-table--2col{min-width:0;max-width:26rem}
.lp-table--2col tbody th{width:auto}

/* ── FAQ ────────────────────────────────────────────────────── */
.lp-faq{border-top:1px solid var(--line)}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) 0;
  font-weight:600;color:var(--navy);cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::before{content:"Q";flex:none;font-family:var(--ff-display);font-weight:700;color:var(--gold-text)}
.lp-faq summary::after{content:"";margin-left:auto;flex:none;width:.5rem;height:.5rem;margin-top:.45rem;
  border-right:1.5px solid var(--ink-mute);border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(45deg);transition:transform var(--dur-1) var(--ease-out)}
.lp-faq details[open] summary::after{transform:rotate(-135deg)}
.lp-faq__a{display:flex;gap:var(--sp-3);padding:0 0 var(--sp-5);color:var(--ink-mute);line-height:1.85}
.lp-faq__a::before{content:"A";flex:none;font-family:var(--ff-display);font-weight:700;color:var(--ink-mute)}

/* ── 고지 박스 ──────────────────────────────────────────────── */
.lp-notice{padding:var(--sp-5);background:var(--paper-warm);border-left:3px solid var(--gold)}
.lp-notice h3{font-size:1rem;color:var(--navy)}
.lp-notice ul{margin-top:var(--sp-3);display:grid;gap:.375rem}
.lp-notice li{position:relative;padding-left:.875rem;font-size:.875rem;line-height:1.8;color:var(--ink-mute)}
.lp-notice li::before{content:"";position:absolute;left:0;top:.75em;width:.25rem;height:.25rem;
  border-radius:50%;background:var(--gold-text)}

/* ── CTA 밴드 ───────────────────────────────────────────────── */
.lp-ctaband{background:var(--navy);color:var(--on-dark);text-align:center}
.lp-ctaband__in{max-width:var(--container-narrow);margin-inline:auto;padding:var(--sp-8) var(--gutter)}
.lp-ctaband h2{font-size:var(--fs-h2);color:var(--on-dark)}
.lp-ctaband p{margin-top:var(--sp-3);color:#cfd8e0}
.lp-ctaband__b{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3)}

/* ── 커스터머 센터 ──────────────────────────────────────────── */
.lp-cc{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:stretch}
.lp-cc__rule{background:var(--line)}
.lp-cc__tel-l{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--gold-text);font-weight:700}
.lp-cc__tel{display:inline-block;margin-top:var(--sp-2);font-family:var(--ff-display);
  font-size:clamp(1.75rem,1.35rem + 1.7vw,2.625rem);font-weight:700;color:var(--navy);white-space:nowrap}
.lp-cc__orbs{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.lp-cc__orb{width:7.5rem;height:7.5rem;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;text-align:center;font-size:.875rem;font-weight:600;
  transition:transform var(--dur-1) var(--ease-out)}
.lp-cc__orb:hover,.lp-cc__orb:focus-visible{transform:translateY(-.25rem)}
.lp-cc__orb--kakao{background:var(--kakao);color:var(--kakao-ink)}
.lp-cc__orb--naver{background:var(--naver);color:#fff}
.lp-cc__orb--navy{background:var(--navy);color:var(--champagne)}
.lp-cc__hours dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--sp-5);margin-top:var(--sp-3)}
.lp-cc__hours dt{font-weight:600;color:var(--navy);white-space:nowrap}
.lp-cc__hours dd{color:var(--ink-mute);font-variant-numeric:tabular-nums}
.lp-cc__hours .is-off{color:var(--gold-text);font-weight:600}
.lp-cc__addr{margin-top:var(--sp-6)}
.lp-cc__addr p{margin-top:var(--sp-2);color:var(--ink-mute);line-height:1.8}
@media (max-width:64rem){
  .lp-cc{grid-template-columns:1fr}
  .lp-cc__rule{height:1px;width:100%}
}

/* ── 약도 ───────────────────────────────────────────────────── */
.lp-map{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:start}
.lp-map__img{border:1px solid var(--line);background:var(--paper)}
.lp-map__way{display:grid;gap:var(--sp-5)}
.lp-map__way h3{font-size:1.0625rem;color:var(--navy)}
.lp-map__way p{margin-top:var(--sp-2);color:var(--ink-mute);line-height:1.8}
@media (max-width:64rem){.lp-map{grid-template-columns:1fr}}

/* ── 목록형(공지/이벤트) ────────────────────────────────────── */
.lp-list{border-top:2px solid var(--navy)}
.lp-list li{border-bottom:1px solid var(--line)}
.lp-list .lp-list__row{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) var(--sp-2)}
.lp-list__t{flex:1;min-width:0;font-weight:600;color:var(--navy)}
.lp-list__d{flex:none;font-size:var(--fs-xs);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.lp-list__x{margin-top:.375rem;font-size:.875rem;line-height:1.75;color:var(--ink-mute);font-weight:400}


/* ── 유틸 ───────────────────────────────────────────────────── */
.lp-mt-4{margin-top:var(--sp-4)}
.lp-mt-5{margin-top:var(--sp-5)}
.lp-mt-6{margin-top:var(--sp-6)}
.lp-mt-7{margin-top:var(--sp-7)}
.lp-stack{display:grid;gap:var(--sp-6)}