@charset "utf-8";
/* ==========================================================================
   수아네일 — P12 젤 살롱 · 액센트 셸핑크 #C9A0A6
   ★ 아키타입 C — 가로 스크롤 주도형 (핀 + containerAnimation)

   .palette > .palette-stage(핀 대상 = 트리거) 안에
     .pal-head    : 원형 컬러칩 팔레트 (조작 장치)
     .pal-body    : Flip 대상 사진 + ScrambleText 정보
     .pal-viewport / .pal-rail : 세로 스크롤이 가로로 흐르는 톤 트랙

   ★ P12 모티프 — 광택과 곡선
     · 라운드 코너 20px 이상 (--r-lg 28px / --r-md 22px / --r-sm 20px)
     · 크롬 그라데이션 하이라이트 (.chrome / .ps-gloss / .chip-disc::after)
     · 원형 컬러칩 팔레트 (.chip-disc — 완전한 원)
     · 얇은 세리프 넘버링 (Playfair Display 400)
     · 소프트 드롭섀도 0 8px 30px rgba(...)

   ★ 명암 리듬 — 셸 기조 + 서피스 스트립 교차 + 다크 챕터 1개(.care 위생 관리)
     hero(다크 스크림) → statement(셸) → palette(서피스) → menu(셸)
     → care(★다크) → gallery(셸) → space(서피스) → visit(셸) → faq(서피스) → place(셸)

   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리에만
   ⚠ .hero-media{overflow:hidden} — 패럴랙스 scale 확대분이 문서 폭을 밀지 않게
   ⚠ 초기 숨김은 html.js-anim 하위에만 (GSAP 실패 시 콘텐츠가 살아나야 한다)
   ⚠ 핀(시그니처) 의존 요소는 모바일에서 overflow-x:auto 로 반드시 살린다
   ⚠ 형광색 금지 — 채도 높은 원색을 어디에도 쓰지 않는다 (P12 금지 규칙)
   ========================================================================== */

:root{
  --shell:#FBF4F2;         /* 기조 — 셸 */
  --surface:#F3E7E4;       /* 서피스 스트립 */
  --surface-2:#EBDBD8;
  --ink:#241E1F;           /* 최암부 */
  --ink-2:#3C3234;
  --accent:#C9A0A6;        /* ★ 액센트 — 셸핑크 */
  --accent-dk:#A87C84;
  --accent-lt:#E3C6C9;
  --chrome:#8E9196;        /* 크롬 그레이 */
  --chrome-lt:#BEC1C5;
  --chrome-dk:#6B6E73;

  --ink-76:rgba(36,30,31,.76);
  --ink-58:rgba(36,30,31,.58);
  --ink-40:rgba(36,30,31,.40);
  --ink-22:rgba(36,30,31,.22);
  --line:rgba(36,30,31,.13);
  --line-2:rgba(36,30,31,.07);

  --sh-76:rgba(251,244,242,.76);
  --sh-54:rgba(251,244,242,.54);
  --sh-34:rgba(251,244,242,.34);
  --sh-line:rgba(251,244,242,.16);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;

  --gut:clamp(20px,4vw,54px);
  --sec-pad:clamp(90px,13vw,190px);

  /* ★ P12 — 라운드 코너 20px 이상 */
  --r-lg:28px;
  --r-md:22px;
  --r-sm:20px;

  /* ★ P12 — 소프트 드롭섀도 */
  --sh-soft:0 8px 30px rgba(36,30,31,.09);
  --sh-lift:0 14px 44px rgba(36,30,31,.13);
  --sh-dark:0 8px 30px rgba(0,0,0,.34);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--shell);color:var(--ink);
  font-size:16px;font-weight:350;line-height:1.76;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--shell)}

.wrap{max-width:1420px;margin:0 auto;padding:0 var(--gut);width:100%}
.pc-br{display:none}
@media(min-width:768px){.pc-br{display:inline}}

/* 얇은 세리프 넘버링 / 영문 이탤릭 액센트 (P12 타이포) */
.en{font-family:var(--serif);font-weight:400;font-variant-numeric:lining-nums}
.en-it{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:.01em}

/* ★ 사진 통일 처리 (P12) — brightness 1.05 / saturate 1.02 + 셸핑크 6% screen
   overlay 레이어는 각 figure 의 ::after 로 얹는다 */
.hero-media img,.ps-slot img,.mc-fig img,.care-fig img,.g-item img,
.space-fig img,.place-fig img{
  filter:brightness(1.05) saturate(1.02);
}
.hero-media::after,.ps-slot::after,.mc-fig::after,.care-fig::after,
.g-item::after,.space-fig::after,.place-fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:#C9A0A6;opacity:.06;mix-blend-mode:screen;
}

/* ---------- 로딩 커튼 (JS 가 반드시 제거한다) ---------- */
.curtain{position:fixed;inset:0;z-index:220;background:var(--shell);display:grid;place-items:center}
.curtain-inner{text-align:center;padding:0 24px}
.curtain-chips{display:flex;gap:14px;justify-content:center;margin-bottom:26px}
.curtain-chips .cc{
  width:clamp(24px,5vw,38px);height:clamp(24px,5vw,38px);border-radius:50%;
  background:var(--cc);display:block;transform:scale(.2);opacity:0;
  box-shadow:0 8px 30px rgba(36,30,31,.14);
}
html:not(.js-anim) .curtain{display:none}
.curtain-txt{font-family:var(--serif);font-size:11px;letter-spacing:.44em;
  color:var(--accent-dk);padding-left:.44em}
html.loaded .curtain{pointer-events:none}

/* ---------- 타이포 ---------- */
.label{font-size:10px;letter-spacing:.32em;color:var(--accent-dk);font-weight:500}
em{font-style:normal;font-weight:500;color:var(--accent-dk)}
b{font-weight:600}
.ac{color:var(--accent-dk);font-style:italic;font-family:var(--serif);font-weight:500}

/* ---------- 버튼 — 라운드(캡슐) + 크롬 하이라이트 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:17px 32px;border-radius:999px;font-size:14px;font-weight:600;
  letter-spacing:-.012em;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,background .3s,color .3s;
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 46%);
}
.btn-primary{background:var(--ink);color:var(--shell);box-shadow:var(--sh-soft)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn-line{border:1px solid var(--ink-22);color:var(--ink);background:rgba(251,244,242,.5)}
.btn-line:hover{border-color:var(--accent);background:var(--accent-lt);transform:translateY(-2px)}
.btn-mini{padding:11px 21px;font-size:12.5px;background:var(--accent);color:#fff;
  box-shadow:0 8px 30px rgba(201,160,166,.34)}
.btn-mini:hover{background:var(--accent-dk)}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:120;transition:background .45s,box-shadow .45s,backdrop-filter .45s}
.site-head.is-stuck{background:rgba(251,244,242,.9);backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(36,30,31,.06)}
.head-inner{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:74px}
.logo{display:flex;align-items:baseline;gap:9px;margin-right:auto}
.logo-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;align-self:center;
  background:radial-gradient(circle at 32% 28%,#F0DDDD 0%,var(--accent) 52%,var(--accent-dk) 100%);
  box-shadow:0 2px 8px rgba(201,160,166,.5)}
.logo-txt{font-size:19px;font-weight:600;letter-spacing:-.03em}
.logo-en{font-family:var(--serif);font-style:italic;font-size:11.5px;color:var(--ink-40);letter-spacing:.05em}
@media(max-width:900px){.logo-en{display:none}}
.gnb{display:none;gap:clamp(16px,2.3vw,32px)}
@media(min-width:1024px){.gnb{display:flex}}
.gnb a{font-size:13.5px;font-weight:450;color:var(--ink-76);position:relative;padding-bottom:3px}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .42s cubic-bezier(.16,1,.3,1)}
.gnb a:hover{color:var(--ink)}
.gnb a:hover::after{right:0}
@media(max-width:640px){.site-head .btn-mini{display:none}}

/* ==========================================================================
   01 히어로 — 풀블리드 + 2중 그라데이션 스크림
   ⚠ .hero-media{overflow:hidden} — 패럴랙스 scale 확대분이 문서 폭을 밀지 않게
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:130px 0 clamp(80px,9vw,116px);overflow:hidden;
  background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* ⚠ 스크림은 "텍스트 가독성 최소치"까지만. 너무 어두우면 P12 셸핑크 팔레트가
   히어로에서 통째로 죽어 페이지가 갈색으로 읽힌다 (실측으로 잡은 문제).
   좌측은 잉크가 아니라 **딥 모브(#3A2B2E)** 로 눌러 핑크 기를 남긴다. */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(36,30,31,.46) 0%,rgba(36,30,31,.06) 36%,rgba(36,30,31,.6) 90%)}
.hero-scrim-2{position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(58,43,46,.72) 0%,rgba(58,43,46,.3) 44%,rgba(58,43,46,0) 76%)}
.hero-inner{position:relative;z-index:3;color:var(--shell);max-width:1120px}
.eyebrow{display:flex;align-items:center;gap:13px;font-size:10.5px;letter-spacing:.28em;
  color:var(--sh-76);font-weight:500;margin-bottom:clamp(20px,3vw,32px)}
.eyebrow .rule{width:clamp(28px,5vw,58px);height:1px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(201,160,166,.1) 100%);display:block;flex-shrink:0}

/* ★ 히어로 헤드라인 — Playfair Display · clamp 최대 118px */
.hero-h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,8.6vw,118px);line-height:1.02;letter-spacing:-.035em;
  margin-bottom:clamp(22px,3vw,34px)}
.h1-line{display:block}
.hero-h1 .ac{color:var(--accent-lt)}

.hero-lead{font-size:clamp(15px,1.5vw,19px);line-height:1.82;color:var(--sh-76);
  max-width:640px;margin-bottom:clamp(26px,3.4vw,40px);font-weight:300}
.hero-lead b{color:var(--shell);font-weight:500}

.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(26px,3.4vw,38px)}
.hero-facts li{
  display:flex;flex-direction:column;gap:3px;padding:14px 22px;border-radius:var(--r-sm);
  background:rgba(251,244,242,.1);border:1px solid var(--sh-line);backdrop-filter:blur(9px);
  box-shadow:var(--sh-dark);
}
.hero-facts b{font-size:13.5px;font-weight:600;color:var(--shell);letter-spacing:-.01em}
.hero-facts span{font-size:11.5px;color:var(--sh-54);letter-spacing:-.008em}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px}
.hero .btn-primary{background:var(--shell);color:var(--ink)}
.hero .btn-line{border-color:var(--sh-line);color:var(--shell);background:rgba(251,244,242,.07)}
.hero .btn-line:hover{background:rgba(251,244,242,.16);border-color:var(--sh-34)}

.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;
  align-items:center;gap:16px;margin-top:clamp(38px,6vw,72px);color:var(--sh-34);font-size:10.5px;
  letter-spacing:.2em}
.hero-scroll{display:flex;align-items:center;gap:9px}
.hero-scroll i{width:34px;height:1px;background:var(--sh-34);display:block;position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent-lt);
  animation:scrollLine 2.3s cubic-bezier(.65,0,.35,1) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ==========================================================================
   02 선언 — 초대형 타이포 (페이지당 정확히 1곳)
   ========================================================================== */
.statement{background:var(--shell);padding:var(--sec-pad) 0;position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;top:-14%;right:-8%;width:min(46vw,540px);
  height:min(46vw,540px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(227,198,201,.42) 0%,rgba(243,231,228,0) 66%)}
.st-grid{display:grid;gap:clamp(28px,4vw,60px);position:relative}
@media(min-width:1024px){.st-grid{grid-template-columns:minmax(140px,17%) 1fr}}
.st-side{display:flex;flex-direction:column;gap:12px}
@media(min-width:1024px){.st-side{position:sticky;top:112px;align-self:start}}
.st-num{font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--accent-lt);letter-spacing:-.04em}
.statement-h{font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7.4vw,106px);line-height:1.05;letter-spacing:-.036em;
  margin-bottom:clamp(28px,3.6vw,48px)}
.st-line{display:block}
.statement-sub{max-width:820px;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.statement-lead{font-size:clamp(15px,1.42vw,18.5px);line-height:1.86;color:var(--ink-76);font-weight:300}
.pain-list{display:grid;gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-soft);margin-top:clamp(6px,1vw,12px)}
.pain-list li{background:var(--shell);padding:17px clamp(18px,2vw,26px);font-size:14.5px;
  color:var(--ink-76);display:flex;gap:13px;align-items:flex-start;line-height:1.7}
.pain-list li::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:9px;
  background:radial-gradient(circle at 32% 30%,#F0DDDD 0%,var(--accent) 60%,var(--accent-dk) 100%)}
.st-note{display:flex;gap:13px;align-items:flex-start;font-size:13.5px;color:var(--ink-58);
  line-height:1.8;padding:20px clamp(18px,2vw,26px);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-2)}
.note-mark{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:9px;
  background:linear-gradient(150deg,var(--chrome-lt) 0%,var(--chrome) 52%,var(--chrome-dk) 100%)}

/* 공용 섹션 헤더 */
.sec-head{margin-bottom:clamp(36px,5vw,72px);max-width:900px}
.sec-h{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,64px);
  line-height:1.12;letter-spacing:-.032em;margin:14px 0 0}
.sec-lead{font-size:clamp(14.5px,1.32vw,17px);line-height:1.84;color:var(--ink-76);
  margin-top:clamp(14px,1.8vw,22px);font-weight:300;max-width:720px}

/* ==========================================================================
   ★ 03 시그니처 — 컬러칩 팔레트 / 아키타입 C 가로 스크롤
   ⚠ 핀 트리거 = 핀 대상 동일 요소(.palette-stage). 이 페이지의 핀은 이것 하나뿐.
   ========================================================================== */
.palette{background:var(--surface);position:relative}
/* ⚠ 핀 대상은 반드시 뷰포트 안에 다 들어와야 한다.
   min-height 만 주면 내용이 넘쳐 가로 트랙이 화면 아래로 밀려나고,
   핀 상태에서 "가로로 흐르는 것"이 아예 안 보인다 (아키타입 C 실패).
   → height:100svh 로 고정하고 내부를 3단(헤드/본문/트랙)으로 분배한다. */
.palette-stage{position:relative;overflow:hidden;
  height:100svh;min-height:640px;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.4vw,20px);
  padding:clamp(76px,8vw,104px) 0 clamp(22px,3vw,40px)}
.palette-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62% 52% at 16% 22%,rgba(227,198,201,.5) 0%,transparent 64%),
             radial-gradient(56% 48% at 88% 82%,rgba(190,193,197,.3) 0%,transparent 62%)}

.pal-head{position:relative;z-index:2;display:flex;flex-wrap:wrap;flex:0 0 auto;
  gap:clamp(16px,2.4vw,40px);align-items:flex-end;justify-content:space-between}
.ph-copy{max-width:560px}
.pal-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,58px);
  line-height:1.08;letter-spacing:-.034em;margin:8px 0 8px}
.pal-desc{font-size:14px;line-height:1.72;color:var(--ink-76);font-weight:300}
/* 기기별 조작 안내 — 데스크톱은 드래그, 모바일은 스와이프 */
.hint-pc{display:none}
.hint-mo{display:inline}
@media(min-width:1024px){.hint-pc{display:inline}.hint-mo{display:none}}
/* 낮은 화면에서는 안내문을 접는다 (칩 자체가 조작을 설명한다) */
@media(min-width:1024px) and (max-height:780px){
  .pal-desc{display:none}
}
.pal-desc b{color:var(--ink);font-weight:600}

/* ★ 원형 컬러칩 팔레트 — P12 핵심 모티프 */
.chip-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px);align-items:flex-start}
.chip{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:6px 4px;border-radius:var(--r-sm);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.chip-disc{
  width:clamp(42px,4.6vw,60px);height:clamp(42px,4.6vw,60px);border-radius:50%;
  background:var(--chip);display:block;position:relative;flex:0 0 auto;  /* 정원 보장 */
  box-shadow:0 8px 30px rgba(36,30,31,.14),inset 0 -3px 8px rgba(36,30,31,.14);
  transition:transform .48s cubic-bezier(.16,1,.3,1),box-shadow .48s;
}
/* 크롬 그라데이션 하이라이트 — 젤 광택 */
.chip-disc::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(152deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.14) 32%,
    rgba(255,255,255,0) 54%,rgba(36,30,31,.1) 100%)}
.chip-disc::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid transparent;transition:border-color .4s,transform .48s cubic-bezier(.16,1,.3,1)}
.chip-name{font-size:11.5px;letter-spacing:-.01em;color:var(--ink-58);white-space:nowrap;
  transition:color .34s,font-weight .2s}
.chip:hover .chip-disc{transform:translateY(-3px) scale(1.05)}
.chip.is-on .chip-disc{transform:translateY(-4px) scale(1.09);
  box-shadow:0 14px 44px rgba(36,30,31,.2),inset 0 -3px 8px rgba(36,30,31,.16)}
.chip.is-on .chip-disc::before{border-color:var(--ink-22);transform:scale(1.02)}
.chip.is-on .chip-name{color:var(--ink);font-weight:600}
.chip:focus-visible{outline:2px solid var(--accent-dk);outline-offset:3px}

/* Flip 대상 사진 + 정보
   ⚠ 핀 안에서는 세로 공간이 유한하다. .pal-body 를 flex:1 로 두고
      사진은 aspect-ratio 가 아니라 "남은 높이"를 채우게 한다.
      그래야 뷰포트가 낮아도 가로 트랙이 화면 밖으로 밀리지 않는다. */
.pal-body{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(8px,1.2vw,16px);overflow:hidden}
.pal-panel{display:grid;gap:clamp(16px,2.2vw,34px);align-items:center;min-height:0;overflow:hidden}
@media(min-width:1024px){
  /* ⚠ 정보 칼럼이 행 밖으로 흘러 아래 가로 트랙을 덮는 문제(실측 60~70px)를
     막되, 스펙 표를 잘라 먹으면 안 된다 → 사진 쪽을 줄여 정보에 자리를 준다. */
  .pal-panel{grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:center}
  .pal-panel > *{min-height:0}
}
.pal-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;max-height:min(30svh,272px);background:var(--surface-2);
  box-shadow:var(--sh-lift);width:100%;flex-shrink:0;margin-inline:auto}
.ps-slot{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.ps-slot.is-on{opacity:1}
.ps-slot img{width:100%;height:100%;object-fit:cover}
.ps-gloss{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 38%,
    rgba(36,30,31,.16) 100%)}

/* ⚠ 핀 안에서는 이 칼럼이 세로 예산을 초과하면 아래 가로 트랙을 덮는다.
   실측으로 겹침이 확인돼 간격·크기를 뷰포트 높이(svh)에 연동했다. */
.pal-info{display:flex;flex-direction:column;gap:clamp(5px,.9svh,12px);min-width:0}
.pi-idx{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--ink-40)}
.pi-idx b{font-size:clamp(26px,3.4svh,40px);color:var(--accent-dk);font-weight:400;letter-spacing:-.03em}
.pi-name{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4.2svh,44px);
  line-height:1.1;letter-spacing:-.03em}
.pi-en{font-size:clamp(13px,1.7svh,18px);color:var(--accent-dk)}
.pi-spec{display:grid;gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);margin-top:2px;box-shadow:var(--sh-soft);flex:0 0 auto}
.pi-spec>div{background:var(--shell);padding:clamp(8px,1.1svh,13px) clamp(14px,1.6vw,20px);
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.pi-spec dt{color:var(--ink-40);flex-shrink:0}
.pi-spec dd{font-weight:600;text-align:right;letter-spacing:-.01em}
.pi-note{font-size:13px;line-height:1.7;color:var(--ink-76);font-weight:300}
/* ⚠ 규제 고지 — 어떤 분기에서도 숨기지 않는다 */
.pi-warn{font-size:11.5px;line-height:1.66;color:var(--ink-40);padding-top:7px;
  border-top:1px solid var(--line-2)}
/* 세로 여유가 적은 화면에서는 설명 문장을 접고 고지·스펙만 남긴다.
   ⚠ .pi-warn(개인차 고지)은 규제 문구이므로 절대 숨기지 않는다.
   ⚠ 영문 이탤릭명도 이 구간에서는 접는다 (컬러명 한글로 충분히 식별된다). */
@media(min-width:1024px) and (max-height:940px){
  .pi-note{display:none}          /* 설명 문장만 접는다. 스펙 3행은 유지 */
}
@media(min-width:1024px) and (max-height:760px){
  .pi-en{display:none}            /* 영문 이탤릭명 (한글명으로 식별 가능) */
}

.pal-gauge{position:relative;z-index:2;display:flex;align-items:center;gap:16px;flex:0 0 auto}
.pg-bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pg-bar span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-lt) 0%,var(--accent) 60%,var(--accent-dk) 100%)}
.pal-hint{font-size:10.5px;letter-spacing:.2em;color:var(--ink-40);white-space:nowrap}

/* ★ 가로 톤 트랙 — 핀 안에서 반드시 보여야 하는 요소 (아키타입 C 의 본체) */
.pal-viewport{position:relative;z-index:2;overflow:hidden;cursor:grab;
  flex:0 0 auto;max-height:min(34svh,300px)}
.pal-viewport.is-drag{cursor:grabbing}
.pal-rail{display:flex;gap:clamp(12px,1.6vw,22px);align-items:stretch;width:max-content;
  padding-left:var(--gut);will-change:transform}
.tone{flex:0 0 clamp(248px,78vw,326px);display:flex;flex-direction:column;gap:7px;
  background:rgba(251,244,242,.72);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:clamp(16px,1.9vw,24px);position:relative;box-shadow:var(--sh-soft);overflow:hidden;
  transition:box-shadow .5s,border-color .5s,transform .5s cubic-bezier(.16,1,.3,1)}
/* ⚠ 핀 안의 트랙은 높이가 유한하다. 카드가 트랙보다 크면 아래가 잘려
   "잘린 카드가 흐르는" 싸구려 화면이 된다 (실측 123px 초과) → 트랙 높이에 맞춘다. */
@media(min-width:1024px){
  .pal-rail{height:100%}
  .tone{height:100%;justify-content:flex-start}
}
@media(min-width:1024px){.tone{flex:0 0 clamp(292px,23vw,352px)}}
.tone.is-on{border-color:var(--accent);box-shadow:var(--sh-lift);transform:translateY(-4px)}
.tone-no{font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--accent-lt);letter-spacing:-.03em}
/* ⚠ flex 자식이라 flex-shrink 로 눌리면 원이 타원이 된다 (P12 원형칩 모티프 위반).
   width/height 고정 + flex:0 0 auto 로 정원을 보장한다. */
.tone-disc{width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);border-radius:50%;
  background:var(--chip);display:block;position:relative;margin:2px 0 4px;flex:0 0 auto;
  box-shadow:0 8px 30px rgba(36,30,31,.12),inset 0 -3px 7px rgba(36,30,31,.13)}
.tone-disc::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(152deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 56%)}
.tone-h{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.028em;line-height:1.24}
.tone-en{font-size:13.5px;color:var(--accent-dk)}
.tone-spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;margin-top:5px}
.tone-spec>div{background:var(--shell);padding:9px 13px;display:flex;justify-content:space-between;
  gap:9px;font-size:12.5px}
.tone-spec dt{color:var(--ink-40);flex-shrink:0}
.tone-spec dd{font-weight:600;text-align:right}
.tone-note{font-size:12.5px;line-height:1.72;color:var(--ink-58);font-weight:300;margin-top:3px}
/* 핀 안에서 카드가 잘리지 않도록 낮은 화면에서는 설명문을 줄인다 */
@media(min-width:1024px) and (max-height:900px){
  .tone-note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tone-end .tone-note{-webkit-line-clamp:4}
}
.tone-end{background:var(--ink);border-color:transparent;color:var(--shell)}
.tone-end .tone-no{color:var(--accent)}
.tone-end .tone-en{color:var(--accent-lt)}
.tone-end .tone-note{color:var(--sh-54)}
.btn-tone{margin-top:auto;align-self:flex-start;border-color:var(--sh-line);color:var(--shell);
  background:rgba(251,244,242,.08)}
.btn-tone:hover{background:rgba(251,244,242,.18);border-color:var(--sh-34)}

/* ==========================================================================
   04 시술 메뉴
   ========================================================================== */
.menu{background:var(--shell);padding:var(--sec-pad) 0}
.menu-grid{display:grid;gap:clamp(16px,2.2vw,28px)}
@media(min-width:760px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-soft);border:1px solid var(--line-2);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.mc-top{padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) 0;display:flex;
  flex-direction:column;gap:2px}
.mc-no{font-size:clamp(24px,2.6vw,34px);line-height:1;color:var(--accent-lt);letter-spacing:-.03em}
.mc-h{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.03em;margin-top:6px}
.mc-en{font-size:13px;color:var(--accent-dk)}
.mc-fig{position:relative;margin:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px) 0;
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-soft)}
.mc-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.mcard:hover .mc-fig img{transform:scale(1.05)}
.mc-list{display:grid;gap:1px;background:var(--line);margin:clamp(18px,2vw,24px) 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mc-list li{background:var(--surface);padding:12px clamp(20px,2.2vw,28px);
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px;align-items:baseline}
.mc-list b{font-weight:500;color:var(--ink)}
.mc-list span{color:var(--ink-40);font-size:12.5px;white-space:nowrap;
  font-family:var(--serif);font-style:italic}
.mc-note{font-size:12.5px;line-height:1.76;color:var(--ink-58);font-weight:300;
  padding:clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px);margin-top:auto}
.menu-price{margin-top:clamp(22px,3vw,38px);padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-md);background:var(--surface-2);font-size:14px;line-height:1.82;
  color:var(--ink-76);border:1px solid var(--line-2)}
.menu-price b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px;font-size:15px}
.price-flag{display:block;margin-top:9px;font-size:11.5px;color:var(--accent-dk);letter-spacing:-.01em}

/* ==========================================================================
   05 위생 관리 — ★ 다크 챕터 (페이지에서 유일한 어두운 구간)
   ========================================================================== */
.care{background:var(--ink);color:var(--shell);padding:var(--sec-pad) 0;position:relative;overflow:hidden}
.care::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 82% 14%,rgba(201,160,166,.2) 0%,transparent 62%),
             radial-gradient(52% 44% at 8% 88%,rgba(142,145,150,.16) 0%,transparent 60%)}
.care .wrap{position:relative;z-index:1}
.care .label{color:var(--accent)}
.care-head .sec-h{color:var(--shell)}
.care .sec-lead{color:var(--sh-54)}
.care-grid{display:grid;gap:clamp(24px,3.4vw,52px);align-items:start}
@media(min-width:1024px){.care-grid{grid-template-columns:minmax(0,1fr) minmax(0,40%)}}
.care-steps{display:flex;flex-direction:column;gap:1px;background:var(--sh-line);
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--sh-line)}
.care-steps li{background:#2C2526;padding:clamp(20px,2.4vw,30px);display:flex;
  gap:clamp(14px,1.8vw,22px);align-items:flex-start}
.cs-no{font-size:clamp(22px,2.4vw,32px);line-height:1;color:var(--accent);flex-shrink:0;
  letter-spacing:-.03em;min-width:1.7em}
.care-steps h3{font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:-.024em;
  margin-bottom:7px;color:var(--shell)}
.care-steps p{font-size:13.5px;line-height:1.82;color:var(--sh-54);font-weight:300}
.care-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-dark)}
.care-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.care-fig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,2vw,24px);font-size:12px;color:var(--sh-76);line-height:1.7;
  background:linear-gradient(180deg,rgba(36,30,31,0) 0%,rgba(36,30,31,.86) 62%)}
.care-warn{margin-top:clamp(26px,3.4vw,48px);padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-md);border:1px solid var(--sh-line);background:rgba(251,244,242,.05);
  font-size:13px;line-height:1.84;color:var(--sh-54);font-weight:300}
.care-warn b{color:var(--shell);font-weight:600}

/* ==========================================================================
   06 디자인 기록 — 비대칭 갤러리
   ========================================================================== */
.gallery{background:var(--shell);padding:var(--sec-pad) 0}
.g-head{margin-left:auto;text-align:left}
@media(min-width:1024px){.g-head{max-width:640px;margin-left:auto;margin-right:0;text-align:right}}
.g-grid{display:grid;gap:clamp(12px,1.8vw,22px)}
@media(min-width:760px){
  .g-grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto)}
  .g-a{grid-column:1/span 7}
  .g-b{grid-column:8/span 5;align-self:end}
  .g-c{grid-column:1/span 5;align-self:start}
  .g-d{grid-column:6/span 7}
}
.g-item{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-soft);
  transition:box-shadow .55s,transform .55s cubic-bezier(.16,1,.3,1)}
.g-item:hover{box-shadow:var(--sh-lift);transform:translateY(-4px)}
.g-item img{width:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.g-a img,.g-b img{aspect-ratio:1/1}
.g-c img{aspect-ratio:3/2}
.g-d img{aspect-ratio:16/9}
.g-item:hover img{transform:scale(1.045)}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:2px;color:var(--shell);
  background:linear-gradient(180deg,rgba(36,30,31,0) 0%,rgba(36,30,31,.78) 66%)}
.g-item figcaption b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.g-item figcaption .en-it{font-size:12px;color:var(--sh-54)}
.g-note{margin-top:clamp(20px,2.6vw,34px);font-size:13px;color:var(--ink-58);line-height:1.8;
  max-width:640px}

/* ==========================================================================
   07 살롱
   ========================================================================== */
.space{background:var(--surface);padding:var(--sec-pad) 0}
.space-grid{display:grid;gap:clamp(24px,3.4vw,56px);align-items:center}
@media(min-width:1024px){.space-grid{grid-template-columns:minmax(0,52%) minmax(0,1fr)}}
.space-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lift)}
.space-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.space-copy{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.space-copy>p{font-size:clamp(14.5px,1.32vw,17px);line-height:1.84;color:var(--ink-76);font-weight:300}
.space-list{display:grid;gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);margin-top:6px;box-shadow:var(--sh-soft)}
.space-list li{background:var(--shell);padding:15px clamp(16px,1.8vw,24px);
  display:flex;flex-direction:column;gap:3px}
.space-list b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.space-list span{font-size:12.5px;color:var(--ink-58);line-height:1.7}

/* ==========================================================================
   08 예약 안내
   ========================================================================== */
.visit{background:var(--shell);padding:var(--sec-pad) 0}
.visit-grid{display:grid;gap:clamp(18px,2.4vw,32px)}
@media(min-width:760px){.visit-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.visit-grid{grid-template-columns:repeat(3,1fr)}}
.v-col{background:var(--surface);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line-2);box-shadow:var(--sh-soft);display:flex;flex-direction:column;gap:16px}
.v-h{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2vw,25px);letter-spacing:-.028em}
.v-list{display:flex;flex-direction:column;gap:14px}
.v-list li{display:flex;flex-direction:column;gap:3px;padding-left:15px;position:relative}
.v-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#F0DDDD 0%,var(--accent) 60%,var(--accent-dk) 100%)}
.v-list b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.v-list span{font-size:12.5px;color:var(--ink-58);line-height:1.72}
.hours{display:grid;gap:1px;background:var(--line);border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line)}
.hours>div{background:var(--shell);padding:12px 16px;display:flex;justify-content:space-between;
  gap:12px;font-size:13.5px}
.hours dt{color:var(--ink-40)}
.hours dd{font-weight:600;font-family:var(--serif);letter-spacing:.01em}
.hours .off{color:var(--accent-dk);font-style:italic}
.v-note{font-size:12.5px;color:var(--ink-58);line-height:1.76}
.v-cta{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.v-cta .btn{width:100%}

/* ==========================================================================
   09 FAQ
   ========================================================================== */
.faq{background:var(--surface);padding:var(--sec-pad) 0}
.qa-list{display:grid;gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-soft)}
@media(min-width:900px){.qa-list{grid-template-columns:repeat(2,1fr)}}
.qa{background:var(--shell);padding:clamp(22px,2.6vw,34px)}
.qa-q{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.8vw,22px);
  letter-spacing:-.026em;margin-bottom:11px;display:flex;gap:11px;align-items:flex-start}
.qa-q::before{content:"Q";font-family:var(--serif);font-style:italic;color:var(--accent);
  font-size:.86em;flex-shrink:0}
.qa-a{font-size:13.5px;line-height:1.84;color:var(--ink-76);font-weight:300;padding-left:23px}

/* ==========================================================================
   10 오시는 길
   ========================================================================== */
.place{background:var(--shell);padding:var(--sec-pad) 0 clamp(96px,12vw,150px)}
.place-grid{display:grid;gap:clamp(24px,3.4vw,56px);align-items:center}
@media(min-width:1024px){.place-grid{grid-template-columns:minmax(0,1fr) minmax(0,48%)}}
.place-h{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,50px);
  line-height:1.14;letter-spacing:-.032em;margin:12px 0 clamp(18px,2.2vw,28px)}
.place-list{display:grid;gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-soft)}
.place-list li{background:var(--shell);padding:15px clamp(16px,1.8vw,24px);display:flex;
  gap:14px;font-size:13.5px;align-items:baseline}
.place-list b{color:var(--ink-40);font-weight:450;min-width:56px;flex-shrink:0;font-size:12.5px}
.place-list span{color:var(--ink-76)}
.place-list a{border-bottom:1px solid var(--accent);padding-bottom:1px}
.place-note{margin-top:16px;font-size:12.5px;color:var(--ink-58);line-height:1.76}
.place-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lift)}
.place-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ==========================================================================
   푸터 / 모바일 바
   ========================================================================== */
.site-foot{background:var(--ink);color:var(--shell);padding:clamp(56px,7vw,92px) 0 clamp(96px,10vw,72px)}
.foot-inner{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,32px)}
.foot-brand{display:flex;flex-direction:column;gap:5px}
.foot-brand .logo-txt{font-size:22px;font-weight:600;letter-spacing:-.03em}
.foot-brand .en-it{font-size:12.5px;color:var(--accent-lt)}
.foot-info p{font-size:12.5px;color:var(--sh-54);line-height:1.86}
.foot-warn{padding:clamp(18px,2.2vw,26px);border-radius:var(--r-md);
  border:1px solid var(--sh-line);background:rgba(251,244,242,.05);
  display:flex;flex-direction:column;gap:8px}
.foot-warn p{font-size:12px;color:var(--sh-54);line-height:1.82;font-weight:300}
.warn-strong{color:var(--accent-lt)!important;font-weight:600!important;font-size:13px!important}
.foot-note{display:flex;flex-direction:column;gap:8px;padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--sh-line)}
.foot-note p{font-size:12px;color:var(--sh-34);line-height:1.82}
.demo-badge{color:var(--sh-76)!important}
.demo-badge b{color:var(--accent-lt)}
.made-by{font-size:10px!important;letter-spacing:.2em;color:rgba(251,244,242,.22)!important}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;gap:8px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,244,242,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
@media(min-width:900px){.mobile-bar{display:none}}
.mobile-bar a{flex:1;text-align:center;padding:14px 10px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:-.014em}
.mb-call{background:var(--ink);color:var(--shell)}
.mb-naver{background:var(--accent);color:#fff}

/* ==========================================================================
   ★ 모바일 — 핀 해제 시 가로 트랙을 CSS 로 살린다 (⚠ 함정 3·4)
   ========================================================================== */
@media(max-width:1023px){
  html{scroll-behavior:smooth}          /* ⚠ 전역 금지 — 모바일에만 (Lenis 미사용 구간) */
  /* 핀이 없으므로 높이 고정을 풀고 내용대로 늘어나게 한다 */
  .palette-stage{height:auto;min-height:0;padding:clamp(76px,10vw,110px) 0 clamp(40px,6vw,60px)}
  .pal-shot{max-height:none}
  .pal-viewport{max-height:none}
  .pal-body{display:block}
  .pal-viewport{
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;cursor:auto;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
    padding-bottom:6px;
  }
  .pal-viewport::-webkit-scrollbar{display:none}
  .pal-rail{padding-right:var(--gut);transform:none!important}
  .tone{scroll-snap-align:start}
  .pal-hint{display:none}
}
@media(max-width:760px){
  .hero{min-height:92svh;padding-top:112px}
  .hero-facts li{flex:1 1 100%}
  .hero-cta .btn{flex:1 1 100%}
  .pal-panel{gap:16px}
  .pal-shot{aspect-ratio:4/3}
  .chip-row{gap:10px}
  .chip{flex:0 0 auto}
  .chip-name{font-size:10.5px}
  .care-steps li{flex-direction:column;gap:8px}
  .cs-no{min-width:0}
  .g-item figcaption{padding:14px}
  .qa-a{padding-left:0}
  .site-foot{padding-bottom:104px}
}
@media(max-width:420px){
  .chip-disc{width:38px;height:38px}
  .chip-name{font-size:10px}
}

/* ==========================================================================
   ★ 초기 숨김 — 반드시 html.js-anim 하위에만 (⚠ 함정 5)
   GSAP 로드 실패 시 클래스를 제거하면 전부 살아난다.
   ⚠ 기본 규칙(html 무관)에 opacity:0 을 걸면 클래스 제거로 살아나지 않는다.
   ========================================================================== */
html.js-anim .fade-up,
html.js-anim .tone,
html.js-anim .mcard,
html.js-anim .care-steps li,
html.js-anim .g-item,
html.js-anim .space-list li,
html.js-anim .v-col,
html.js-anim .qa,
html.js-anim .place-list li,
html.js-anim .pain-list li,
html.js-anim .hero-facts li,
html.js-anim .chip{opacity:0}

html.js-anim .anim-h,
html.js-anim .statement-h,
html.js-anim .hero-h1,
html.js-anim .place-h{visibility:hidden}

/* SplitText 마스크 라인 */
.sp-line{overflow:hidden;padding-bottom:.06em}

/* ==========================================================================
   접근성 — 모션 축소
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html.js-anim .fade-up,html.js-anim .tone,html.js-anim .mcard,html.js-anim .care-steps li,
  html.js-anim .g-item,html.js-anim .space-list li,html.js-anim .v-col,html.js-anim .qa,
  html.js-anim .place-list li,html.js-anim .pain-list li,html.js-anim .hero-facts li,
  html.js-anim .chip{opacity:1}
  html.js-anim .anim-h,html.js-anim .statement-h,html.js-anim .hero-h1,
  html.js-anim .place-h{visibility:visible}
  .curtain{display:none}
  .hero-scroll i::after{display:none}
}

:focus-visible{outline:2px solid var(--accent-dk);outline-offset:3px;border-radius:4px}