/* ============================================================================
   BEAUTY VERA — sections
   ========================================================================== */

.wrap--narrow { max-width: 880px; }

/* ══════════════════════════ HEADER ══════════════════════════ */
.hdr {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  transition: background .5s var(--ease), box-shadow .5s var(--ease),
              backdrop-filter .5s var(--ease);
}

.hdr::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-soft);
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.hdr.is-stuck {
  background: rgba(252, 249, 245, .88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}

.hdr.is-stuck::after { opacity: 1; }

.hdr__in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  transition: min-height .5s var(--ease);
}

.hdr.is-stuck .hdr__in { min-height: 70px; }

.hdr__logo { display: grid; gap: 3px; margin-right: auto; }

.hdr__logo-en {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .24em;
  line-height: 1;
  color: var(--ink);
}

.hdr__logo-sub {
  font-family: var(--serif);
  font-size: 9px;
  letter-spacing: .34em;
  color: var(--rose-500);
}

.hdr__nav { display: flex; gap: 30px; }

.hdr__nav a {
  position: relative;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}

.hdr__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--rose-300);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}

.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 1023px) { .hdr__nav { display: none; } }
/* 560px 이하에서는 헤더 CTA 를 숨기고 메뉴 패널 안의 버튼으로 대신합니다.
   .hdr 를 앞에 붙인 이유 — JS 가 아이콘을 넣으면서 .has-ico 를 추가하는데
   그 규칙(display:inline-flex)이 이 파일 뒤쪽에 있어 선택자가 더 강해야 이깁니다. */
@media (max-width: 560px)  { .hdr .hdr__cta { display: none; } }

/* ── 모바일·태블릿 메뉴 ──────────────────────────────────────────────
   1023px 이하에서는 상단 메뉴가 사라지므로 버튼과 패널로 대신합니다.
   색·그림자·여백은 전부 기존 토큰을 그대로 씁니다. */

.hdr__burger {
  display: none;               /* 데스크톱에서는 숨김 */
  place-content: center;
  gap: 5px;
  flex: none;                  /* flex 컨테이너 안에서 눌리지 않게 — 터치 타깃 44px 보장 */
  width: 44px; height: 44px;
  margin-right: -10px;         /* 시각적 정렬 — 아이콘 여백 보정 */
  background: none;
  border: 0;
  cursor: pointer;
}

.hdr__burger span {
  display: block;
  width: 19px; height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

/* 열렸을 때 X 로 */
.hdr__burger[aria-expanded='true'] span:first-child { transform: translateY(3px) rotate(45deg); }
.hdr__burger[aria-expanded='true'] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

.hdr__panel {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: -1;                 /* 헤더 바 아래로 깔립니다 */
  padding-top: 84px;           /* 헤더 높이만큼 비웁니다 */
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(252, 249, 245, .97);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.hdr__panel-in {
  display: grid;
  padding-block: 18px calc(26px + env(safe-area-inset-bottom));
}

.hdr__panel-in .eyebrow { margin-bottom: 10px; }

.hdr__panel-in > a {
  display: flex;
  align-items: center;
  min-height: 52px;            /* 터치 타깃 */
  font-size: 17px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

.hdr__panel-in > a:last-of-type { border-bottom: 0; }

.hdr__panel-cta {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 1023px) {
  .hdr__burger { display: grid; }
}

/* 패널이 열려 있는 동안에는 하단 떠 있는 버튼을 숨겨 겹치지 않게 합니다 */
body.is-menu-open .fab { display: none; }


/* ══════════════════════════ 01 · HERO ══════════════════════════ */
.hero {
  position: relative;
  padding-top: clamp(124px, 15vw, 172px);
  padding-bottom: clamp(88px, 10vw, 130px);
  background:
    radial-gradient(120% 80% at 86% 8%, var(--rose-50) 0%, transparent 56%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-deep) 100%);
  /* 배경 그라데이션만 가로로 가두고, 세로는 글자 줄 수만큼 늘어나게 둡니다 */
  overflow-x: clip;
}

.hero__in {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 36%);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .48em;
  color: var(--rose-500);
  margin-bottom: 26px;
}

.hero__title {
  font-family: var(--serif);
  /* 1단 구간(~940px) 기준 크기. 941px 이상은 아래 미디어쿼리에서 다시 잡습니다. */
  font-size: clamp(42px, 8.2vw, 82px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--ink);
  margin-bottom: 26px;
  /* 한글이 한 글자씩 떨어지지 않게 */
  word-break: keep-all;
  text-wrap: balance;
}

/* 941px 이상에서는 사진과 2단으로 나뉘어 글자 열이 좁아집니다.
   같은 vw 계수를 쓰면 열을 넘치므로 이 구간만 따로 잡습니다. */
@media (min-width: 941px) {
  .hero__title { font-size: clamp(46px, 5.6vw, 80px); }
}

.hero__title b {
  font-weight: 500;
  font-style: italic;
  color: var(--rose-700);
}

.hero__sub {
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 34em;
}

/* 신뢰요소 3개 */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3.4vw, 46px);
  margin: clamp(34px, 4.2vw, 50px) 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero__trust li { display: grid; gap: 5px; }

/* 모바일 — 지표 4개를 2 × 2 로 떨어뜨립니다 (flex 자동 줄바꿈은 3+1 이 될 수 있음) */
@media (max-width: 760px) {
  .hero__trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }
}

.hero__trust .num {
  font-family: var(--serif);
  font-size: clamp(30px, 3.9vw, 46px);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  letter-spacing: .01em;
}

.hero__trust .num i {
  font-style: normal;
  font-size: .46em;
  margin-left: 2px;
  color: var(--muted);
}

/* 숫자가 아닌 항목(현재 자격)은 글자 크기를 낮춰 숫자와 위계를 맞춥니다 */
.hero__trust .num--txt {
  font-family: var(--sans);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rose-700);
  align-self: end;
  padding-bottom: 3px;
}

.hero__trust .num-lb {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__fig {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
}

.hero__fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(252,249,245,.10) 0%, transparent 42%);
  pointer-events: none;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 30px; height: 52px;
}

.hero__cue-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--sand));
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(-5px); opacity: .35; }
  50%      { transform: translateY(5px);  opacity: 1; }
}

@media (max-width: 940px) {
  .hero__in { grid-template-columns: 1fr; }
  /* 세로 인물 사진이 심하게 잘리지 않도록 1:1 로 둡니다 */
  .hero__fig { order: -1; aspect-ratio: 1 / 1; max-height: 48vh; }
  /* 한 열일 때 사진이 왼쪽으로 쏠리지 않게 가운데 정렬 (HOME · /academy 첫 화면) */
  .hero__fig { margin-inline: auto; }
  .hero__cue { display: none; }
}

@media (max-width: 560px) {
  .hero__fig { aspect-ratio: 4 / 5; max-height: 52vh; }
}


/* ══════════════════════════ 02 · DIFFERENCE ══════════════════════════ */
.diff {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}

.diff li {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: baseline;
  padding: clamp(30px, 3.6vw, 46px) clamp(12px, 2.6vw, 34px);
  background: var(--cream);
  position: relative;
  transition: background .5s var(--ease);
}

.diff li::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--rose-300);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--ease) .15s;
}

.diff li.is-in::before { transform: scaleY(1); }
.diff li:hover { background: var(--ivory); }

.diff__no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--rose-300);
  margin-bottom: 9px;
}

.diff__title {
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.024em;
  color: var(--ink);
  word-break: keep-all;
}

.diff__desc {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* 강조 한 줄 — 눈에 걸리되 배너처럼 보이지 않게 */
.diff__key {
  display: inline-block;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--rose-700);
}

/* ---------- 마무리 ---------- */
.diff__foot { margin-top: clamp(44px, 5vw, 70px); }

.diff__close {
  margin-top: clamp(30px, 3.4vw, 44px);
  text-align: center;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 2;
  color: var(--ink-soft);
  word-break: keep-all;
}

.diff__note {
  margin-top: clamp(22px, 2.4vw, 30px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  word-break: keep-all;
}

@media (max-width: 720px) {
  .diff li { grid-template-columns: 1fr; gap: 14px; }
  .diff__no { margin-bottom: 6px; }
}


/* ══════════════════════════ 03 · INSTRUCTOR ══════════════════════════ */
.ins {
  display: grid;
  grid-template-columns: minmax(300px, 480px) 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.ins__fig {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 108px;
}

.ins__head { margin-bottom: 22px; }

.ins__text p + p { margin-top: 13px; }

/* 강사소개 → 이력 연결 메시지 */
.ins__bridge {
  margin-top: 30px;
  padding-left: 20px;
  border-left: 2px solid var(--rose-200);
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.78;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* 이력 블록 */
.cred {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.cred__label {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .34em;
  color: var(--rose-500);
  margin-bottom: 16px;
}

.cred__label span {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--faint);
}

/* 이력 항목 — 핵심/전체 공통 */
.cred__key,
.cred__list { display: grid; gap: 7px; }

.cred__key li,
.cred__list li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 11px 16px 11px 30px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 15px;
  color: var(--ink-soft);
  /* 리빌(1s)과 별개로, hover 는 짧고 가볍게 */
  transition: opacity 1s var(--ease), transform .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease),
              background-color .45s var(--ease);
}

.cred__key li::before,
.cred__list li::before {
  content: '';
  position: absolute;
  left: 13px; top: 1.18em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rose-300);
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}

/* hover — 아주 미세한 이동 + soft rose line / shadow */
.cred__key li.is-in:hover,
.cred__list li.is-in:hover {
  transform: translateX(4px);
  background: var(--rose-50);
  border-color: var(--rose-200);
  box-shadow: 0 1px 2px rgba(181, 129, 117, .06),
              0 10px 26px -14px rgba(181, 129, 117, .38);
}

.cred__key li.is-in:hover::before,
.cred__list li.is-in:hover::before {
  background: var(--rose-500);
  transform: scale(1.25);
}

/* 핵심 이력은 한 단계 강조 */
.cred__key li {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--ivory-deep);
}

.cred__t { flex: 1 1 auto; }

/* 전체 이력 보기 버튼 */
.cred__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .45s var(--ease);
}

.cred__more:hover {
  transform: translateY(-2px);
  color: var(--rose-700);
  border-color: var(--rose-300);
  background: var(--rose-50);
  box-shadow: 0 10px 24px -14px rgba(181, 129, 117, .5);
}

.cred__more i {
  position: relative;
  width: 11px; height: 11px;
  flex: none;
}

.cred__more i::before,
.cred__more i::after {
  content: '';
  position: absolute;
  background: var(--rose-500);
  transition: transform .45s var(--ease);
}

.cred__more i::before { left: 0; top: 5px; width: 11px; height: 1px; }
.cred__more i::after  { left: 5px; top: 0; width: 1px; height: 11px; }
.cred__more[aria-expanded='true'] i::after { transform: rotate(90deg); }

/* 전체 이력 — 카테고리별 */
.cred__full {
  overflow: hidden;
  max-height: 0;
  transition: max-height .52s var(--ease);
}

.cred__grp {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.cred__no {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--rose-300);
}

.cred__en {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink);
}

.cred__kr {
  margin: 3px 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}

/* 인용 */
.quote {
  margin-top: clamp(56px, 7vw, 92px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.72;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  white-space: pre-line;
  max-width: 30em;
  margin-inline: auto;
}

.quote::before {
  content: '“';
  display: block;
  font-size: 2.2em;
  line-height: .6;
  color: var(--rose-200);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .ins { grid-template-columns: 1fr; }
  .ins__fig { position: static; max-width: 460px; margin-inline: auto; width: 100%; }   /* 한 열일 때 가운데 */
}


/* ══════════════════════════ 04~06 · CHAPTERS ══════════════════════════ */
.chapters { display: grid; gap: clamp(64px, 8vw, 118px); }

.chp {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.08fr);
  gap: clamp(28px, 4.6vw, 68px);
  align-items: center;
}

.chp:nth-child(even) .chp__fig { order: -1; }

.chp__no {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--rose-200);
  margin-bottom: 20px;
}

.chp__no em {
  font-style: normal;
  color: var(--rose-500);
}

.chp__title {
  font-size: clamp(21px, 2.6vw, 31px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin-bottom: 18px;
}

.chp__body {
  font-size: clamp(15px, 1.45vw, 16.5px);
  line-height: 1.95;
  color: var(--ink-soft);
  white-space: pre-line;
  margin-bottom: 26px;
}

.chp__fig {
  aspect-ratio: 5 / 4;
  border-radius: 4px;
  box-shadow: var(--shadow-md);
}

.teach__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: clamp(44px, 5vw, 62px);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 820px) {
  .chp { grid-template-columns: 1fr; }
  .chp:nth-child(even) .chp__fig { order: 0; }
  .chp__fig { order: -1; }
}


/* ══════════════════════════ 07 · CURRICULUM ══════════════════════════ */
/* 과정 카드는 읽을 내용이 많아 이 섹션만 조금 더 넓게 씁니다.
   .wrap 자체를 바꾸면 Hero·후기·FAQ 까지 전부 움직입니다. */
#curriculum .wrap {
  max-width: 1360px;
  padding-inline: clamp(24px, 4vw, 56px);
}

/* 네 과정을 한 줄에 둡니다. minmax(0,1fr) 로 두어야 긴 단어가 있어도
   칸이 밀려 네 칸 폭이 어긋나지 않습니다. */
.courses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}

/* 과정 카드 — 사진부터 버튼까지 한 테두리 안에 들어간 독립 카드 */
.crs {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  overflow: hidden;
  /* 평상시에도 아주 은은하게 떠 있어야 카드로 읽힙니다 */
  box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease),
              border-color .6s var(--ease);
}

.crs:hover {
  transform: translateY(-7px);
  border-color: var(--rose-200);
  box-shadow: var(--shadow-md);
}

/* MASTER — rose 계열의 미세한 강조만.
   배경을 아주 살짝 따뜻하게(#FBF2EF) 해서 다른 두 카드와 구분합니다. */
.crs--signature {
  /* rose-50 을 그대로 쓰면 분홍이 도드라져서 절반만 섞습니다 */
  background: var(--rose-50);
  background: color-mix(in srgb, var(--rose-50) 48%, var(--surface));
  border-color: var(--rose-200);
  box-shadow: var(--shadow-md);
}

.crs--signature:hover { box-shadow: var(--shadow-lg); }

.crs.is-flash {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 3px var(--rose-100), var(--shadow-lg);
}

.crs__fig {
  position: relative;
  /* 받은 사진이 2:3 세로라 4:5 로 담으면 세로의 17%만 잘립니다 */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-deep);
}

.crs__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 과정별 크롭 위치 — COURSES.*.thumbPos 에서 figure 의 --pos 로 들어옵니다 */
  object-position: var(--pos, 50% 50%);
  transition: transform .9s var(--ease);
}

.crs:hover .crs__fig img { transform: scale(1.055) rotate(-0.5deg); }

.crs__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(24px, 2.4vw, 32px);
}

.crs__en {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 400;
  letter-spacing: .13em;
  line-height: 1.3;
  color: var(--ink);
}

.crs__ko {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--rose-500);
  margin-top: 7px;
}

.crs__hours {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 7px 14px;
  align-self: flex-start;
  background: var(--ivory-deep);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.crs__hours svg { width: 13px; height: 13px; flex: none; opacity: .65; }

.crs__bar {
  height: 3px;
  margin-top: 14px;
  background: var(--cream-deep);
  border-radius: 999px;
  overflow: hidden;
}

.crs__bar i {
  display: block;
  height: 100%;
  background: var(--rose-300);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease) .2s;
}

.crs.is-in .crs__bar i { transform: scaleX(var(--w, 1)); }

.crs__sum {
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.crs__sub {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--faint);
  text-transform: uppercase;
  font-family: var(--serif);
}

.crs__target {
  margin-top: 11px;
  display: grid;
  gap: 8px;
}

.crs__target li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.crs__target li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--rose-300);
}

.crs .chips { margin-top: 18px; gap: 7px; }
.crs .chip { padding: 6px 12px; font-size: 12.5px; }

/* 디플로마 — 발급비가 수강료에 포함된 것처럼 보이면 안 됩니다.
   가격 영역과 떨어뜨리고, 비용 '별도' 를 바로 아래 작게 붙입니다. */
.crs__dip {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.crs__dipm {
  margin-left: 2px;
  color: var(--rose-500);
}

.crs__dipn {
  margin-top: 6px;
  display: grid;
  gap: 3px;
}

.crs__dipn li {
  position: relative;
  padding-left: 11px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  word-break: keep-all;
}

.crs__dipn li::before {
  content: '*';
  position: absolute;
  left: 0; top: 0;
  color: var(--faint);
}

/* 추천 대상 — 카드 하단의 작은 독립 영역 */
.crs__rec {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.crs__rec .crs__sub { margin-top: 0; }

.crs__btns {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 26px;
}

/* 네 과정이 되면서 2×2 가 데스크톱·태블릿 공통입니다.
   예전에 마지막 카드를 전폭 가로형으로 바꾸던 규칙은 카드가 홀수(3개)일 때
   쓰던 것이라 더 이상 필요하지 않습니다. */

/* ---------- 데스크톱 4열 전용 미세 조정 (1200px 이상) ----------
   카드 폭이 607px -> 290px 로 줄면서 제목이 두 줄로 깨지고 카드가 세로로
   길어집니다. 문구는 그대로 두고 활자 크기와 간격만 좁힙니다.
   1199px 이하(2×2 · 1열)에는 영향이 없습니다. */
@media (min-width: 1200px) {
  /* 본문 여백 — 가로 여유가 늘어 제목 한 줄 확보에도 도움이 됩니다 */
  .courses .crs__body { padding: 26px; }

  /* 제목 — 'PROFESSIONAL CLASS' 가 한 줄에 들어가는 최대 조합.
     자간은 에디토리얼 느낌이 남도록 .13em -> .105em 까지만 줄였습니다. */
  .courses .crs__en {
    font-size: 18.5px;
    letter-spacing: .105em;
    white-space: nowrap;
  }

  .courses .crs__ko { margin-top: 6px; }

  /* MASTER 650만원 보조문구 — 한 줄 강제는 하지 않습니다.
     글씨를 더 줄이면 읽기 어려워져서 여백만 좁혔습니다. */
  .courses .crs__pnote {
    margin-top: 11px;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0;
  }

  .courses .crs__price { margin-top: 8px; }
  .courses .crs__hours { margin-top: 13px; }
  .courses .crs__price + .crs__hours { margin-top: 6px; }
  .courses .crs__bar { margin-top: 11px; }

  .courses .crs__hook {
    margin-top: 14px;
    padding-top: 14px;
    line-height: 1.62;
  }

  .courses .crs__sum {
    margin-top: 15px;
    line-height: 1.66;
  }

  .courses .chips { margin-top: 14px; gap: 6px; }
  .courses .chip { padding: 5px 11px; }

  .courses .crs__dip { margin-top: 14px; }
  .courses .crs__dipn li { line-height: 1.45; }

  .courses .crs__sub { margin-top: 18px; }
  .courses .crs__target { gap: 5px; }
  .courses .crs__target li { line-height: 1.55; }

  .courses .crs__rec { margin-top: 17px; padding-top: 14px; }

  .courses .crs__btns { padding-top: 20px; }
}

/* 태블릿 가로부터는 2×2. 4열을 유지하면 카드가 너무 좁아집니다. */
@media (max-width: 1199px) {
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .courses { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
}

/* ---------- 카드 안 MASTER 전용 요소 ----------
   해당 필드가 있는 과정에만 나옵니다. BASIC / PROFESSIONAL 은 영향 없음. */

/* 작은 라벨 — SKILL-UP 의 SINGLE COURSE 처럼 과정 성격만 알리는 글씨.
   MASTER 의 배지(pill + rose 강조)와 달리 장식이 없습니다. */
.crs__kicker {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

/* 배지 — 사진과 본문 경계에 얹는 작은 pill (사진 파일은 그대로입니다) */
.crs__badge {
  position: absolute;
  left: clamp(18px, 1.8vw, 24px);
  bottom: -1px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--rose-200);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rose-700);
}

/* 650만원은 정상 판매가가 아니라 개별 준비 기준액이라 취소선을 쓰지 않습니다.
   369만원 바로 위에서 보조 정보로 읽히되, 묻히지 않을 정도로만 또렷하게. */
.crs__pnote {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--rose-700);
  word-break: keep-all;
}

.crs__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
}

/* 정상가 — 취소선. 현재가보다 작고 연하게 */
.crs__plist {
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--faint);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
}

/* 현재 수강가 — 카드에서 가장 명확한 가격 포인트 */
.crs__price b {
  font-family: var(--serif);
  font-size: clamp(29px, 2.9vw, 38px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--ink);
}

/* 가격이 있으면 바로 아래 붙는 시간 줄의 윗여백을 줄입니다 */
.crs__price + .crs__hours { margin-top: 6px; }

.crs__hook {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--rose-700);
  max-width: 24em;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--line-soft);
}

.crs__inc {
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 34em;
  word-break: keep-all;
}

/* 'MASTER 자세히 보기 →' 의 화살표 */
.btn__arw {
  margin-left: 7px;
  transition: transform .5s var(--ease);
}

.btn:hover .btn__arw { transform: translateX(3px); }

/* ---------- 비교표 ---------- */
.compare {
  margin-top: clamp(56px, 6.5vw, 86px);
  padding-top: clamp(40px, 4.6vw, 58px);
  border-top: 1px solid var(--line-soft);
}

.compare__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.compare__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.compare__note { font-size: 12.5px; color: var(--faint); }

.compare__scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 좁은 화면에서 가로로 더 볼 내용이 있음을 알리는 표시 */
.compare__hint {
  display: none;
  margin-top: 12px;
  font-size: 12px;
  color: var(--faint);
  text-align: right;
}

@media (max-width: 720px) {
  .compare__hint { display: block; }
  .compare { position: relative; }
  .compare__scroll::after {
    content: '';
    position: sticky;
    top: 0; right: 0;
    float: right;
    width: 44px; height: 100%;
    margin-left: -44px;
    background: linear-gradient(90deg, transparent, var(--ivory));
    pointer-events: none;
  }
}

.compare__table {
  min-width: 620px;
  font-size: 14px;
}

.compare__table th,
.compare__table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}

.compare__table thead th {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.compare__table thead th:first-child { border-bottom-color: transparent; }

.compare__table tbody th {
  text-align: left;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  width: 150px;
}

.compare__table td { color: var(--ink-soft); }

.compare__table tr:last-child th,
.compare__table tr:last-child td { border-bottom: 0; }

.compare__table .yes { color: var(--rose-500); font-size: 15px; }
.compare__table .no  { color: var(--faint); }
.compare__table .na  {
  color: var(--faint);
  font-size: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.compare__table .span {
  color: var(--ink-soft);
  background: var(--ivory-deep);
  border-radius: 3px;
  letter-spacing: .01em;
}


/* ══════════════════════════ 07-1 · MASTER 상세 ══════════════════════════ */
/* 섹션 위아래 여백을 기본값보다 약 13% 줄입니다 (여유는 남깁니다) */
#master { padding-block: clamp(76px, 9.6vw, 146px); }

#master .quote { margin-top: clamp(40px, 4.4vw, 58px); }

/* 한국어 본문만 1px 키웁니다. 제목·가격·영문 라벨은 그대로입니다. */
#master .h-lead { font-size: clamp(16px, 1.6vw, 18px); }

/* ---------- 6개 핵심 영역 ---------- */
.mst__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 내용이 적은 카드까지 같은 높이로 늘리면 아래가 크게 비어 보입니다.
     각 카드가 자기 내용만큼만 차지하게 둡니다. */
  align-items: start;
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(48px, 5.4vw, 72px);
}

.mst__area {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 5px;
  padding: clamp(22px, 2.2vw, 28px);
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease),
              transform .6s var(--ease);
}

.mst__area:hover {
  transform: translateY(-5px);
  border-color: var(--rose-200);
  box-shadow: var(--shadow-md);
}

.mst__no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--rose-300);
}

.mst__at {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin-top: 10px;
}

.mst__ai {
  margin-top: 15px;
  display: grid;
  gap: 7px;
}

.mst__ai li {
  position: relative;
  padding-left: 13px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
  word-break: keep-all;
}

.mst__ai li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--rose-300);
}

.mst__an {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.8;
  color: var(--rose-700);
  word-break: keep-all;
}

/* ---------- 배우기 전 → OWNER LAUNCH SYSTEM ---------- */
.mst__before {
  margin-top: clamp(56px, 6.4vw, 86px);
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 34px);
  background: var(--ivory);
  border: 1px solid var(--beige);
  border-radius: 10px;
}

.mst__bl {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

.mst__bt {
  margin-top: 12px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: keep-all;
}

.mst__launch {
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--rose-200);
  border-radius: 10px;
}

.mst__lhead {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  word-break: keep-all;
}

/* 7단계 레일 — 박스·화살표 아이콘 없이 선과 번호만 */
.mst__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0 clamp(6px, 0.8vw, 14px);
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: 26px;
}

/* 바탕선 */
.mst__rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: var(--beige);
}

/* 스크롤이 닿으면 차오르는 선 — .diff 와 같은 모션 어휘 */
.mst__rail::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: var(--rose-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease) .2s;
}

.mst__launch.is-in .mst__rail::after { transform: scaleX(1); }

.mst__rail li {
  position: relative;
  padding-right: 6px;
}

/* 각 단계의 점 */
.mst__rail li::before {
  content: '';
  position: absolute;
  left: 0; top: -26px;
  width: 7px; height: 7px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--sand);
  transform: translateY(-50%);
}

/* 마지막 단계만 rose 로 채워 '여기서 끝나지 않는다' 를 표시 */
.mst__rail li.is-last::before {
  background: var(--rose-500);
  border-color: var(--rose-500);
}

.mst__rno {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--rose-300);
}

.mst__rlb {
  display: block;
  margin-top: 7px;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
}

.mst__rail li.is-last .mst__rlb { color: var(--rose-700); }

.mst__bridge {
  margin-top: clamp(26px, 3vw, 38px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  word-break: keep-all;
}

/* ---------- 개인 피드백 리포트 · 원장 준비 체크 ---------- */
.mst__chks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(40px, 4.6vw, 60px);
}

.mst__chk {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
}

.mst__chkt {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}

/* 핵심 카피 — 제목 다음으로 먼저 읽히게 크기만 한 단계 올립니다.
   굵기·색은 기존 그대로 둡니다 (과한 bold·컬러 강조 금지). */
.mst__chkc {
  margin-top: 13px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--rose-700);
  word-break: keep-all;
}

.mst__chki { margin-top: 22px; gap: 7px; }
.mst__chki .chip { font-size: 12.5px; padding: 6px 12px; }

.mst__chkn {
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  word-break: keep-all;
}

/* ---------- BEAUTY VERA OWNER KIT ----------
   자료 제작 전이라 '제공 완료' 로 읽히지 않게 상태 문구를 함께 둡니다. */
.mst__kit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
  margin-top: clamp(40px, 4.6vw, 60px);
  padding: clamp(24px, 2.6vw, 32px) clamp(26px, 3vw, 38px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
}

.mst__kitt {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: .14em;
  color: var(--ink);
}

.mst__kitd {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

.mst__kitc { gap: 8px; }
.mst__kitc .chip { font-size: 12.5px; padding: 6px 13px; }

@media (max-width: 820px) {
  .mst__kit { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- MASTER VALUE ---------- */
.mst__value {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  align-items: center;
  gap: clamp(26px, 3.4vw, 50px);
  margin-top: clamp(56px, 6.4vw, 86px);
  padding: clamp(30px, 3.6vw, 50px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
}

.mst__vlead {
  margin-top: 16px;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.85;
  color: var(--ink);
  word-break: keep-all;
}

/* 650만원 — 보조 정보입니다. 취소선·할인율로 쓰지 마세요. */
.mst__vnote {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
}

.mst__vr {
  padding-left: clamp(26px, 3.4vw, 50px);
  border-left: 1px solid var(--line-soft);
}

.mst__vname {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .26em;
  color: var(--muted);
}

.mst__price {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 8px;
}

.mst__vmeta {
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* 디플로마 — 가격 바로 아래지만 '별도' 가 분명히 읽히게 */
.mst__vdip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  word-break: keep-all;
}

.mst__vdip span {
  font-size: 12.5px;
  color: var(--muted);
}

.mst__vr .btn { margin-top: 22px; }

.mst__closing {
  margin-top: clamp(56px, 6.4vw, 86px);
  padding-top: clamp(40px, 4.6vw, 58px);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 32px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  word-break: keep-all;
}

@media (max-width: 900px) {
  .mst__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  /* 레일을 두 줄로 */
  .mst__rail { grid-template-columns: repeat(4, 1fr); row-gap: 30px; }

  .mst__value { grid-template-columns: 1fr; }
  .mst__vr {
    padding-left: 0;
    padding-top: clamp(24px, 3vw, 34px);
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 560px) {
  .mst__grid { grid-template-columns: 1fr; }
  .mst__chks { grid-template-columns: 1fr; }

  /* 레일을 세로로 — .diff 와 같은 왼쪽 선 */
  .mst__rail {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding-top: 0;
    padding-left: 22px;
  }

  .mst__rail::before,
  .mst__rail::after {
    left: 3px; right: auto; top: 6px; bottom: 6px;
    width: 1px; height: auto;
  }

  .mst__rail::after {
    transform: scaleY(0);
    transform-origin: top;
  }

  .mst__launch.is-in .mst__rail::after { transform: scaleY(1); }

  .mst__rail li { padding-right: 0; }
  .mst__rail li::before { left: -22px; top: 10px; }
}

/* ══════════════════════════ 08 · GALLERY ══════════════════════════ */
/* 6컬럼 모자이크 — 사진과 영상이 크게 보이도록 */
.gal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 225px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.2vw, 16px);
}

.gal__i { grid-column: span 2; }

.gal__i {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-deep);
  cursor: zoom-in;
  transition: box-shadow .6s var(--ease);
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.gal__i:hover { box-shadow: var(--shadow-lg); }

.gal__i img,
.gal__i video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}

.gal__i:hover img,
.gal__i:hover video { transform: scale(1.06) rotate(-0.7deg); }

.gal__i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,37,33,.62) 0%, rgba(43,37,33,.14) 40%, transparent 68%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}

.gal__i:hover::after { opacity: 1; }

.gal__cap {
  position: absolute;
  left: 18px; right: 18px; bottom: 15px;
  z-index: 2;
  font-size: 13px;
  line-height: 1.5;
  color: #FFF9F6;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.gal__i:hover .gal__cap { opacity: 1; transform: none; }

.gal__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gal__play span {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(252,249,245,.9);
  box-shadow: var(--shadow-md);
}

.gal__play svg { width: 17px; height: 17px; margin-left: 3px; color: var(--rose-700); }

/* 크게 잡는 칸 */
.gal__i--wide  { grid-column: span 4; grid-row: span 2; }   /* 가장 큰 칸 */
.gal__i--tall  { grid-column: span 2; grid-row: span 2; }
.gal__i--wide2 { grid-column: span 4; grid-row: span 1; }

@media (max-width: 900px) {
  .gal {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 22vw, 210px);
  }
  .gal__i--wide  { grid-column: span 4; grid-row: span 2; }
  .gal__i--tall  { grid-column: span 2; grid-row: span 2; }
  .gal__i--wide2 { grid-column: span 4; grid-row: span 1; }
}

@media (max-width: 620px) {
  .gal {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 42vw;
  }
  .gal__i { grid-column: span 1; }
  .gal__i--wide  { grid-column: span 2; grid-row: span 2; }
  .gal__i--tall  { grid-column: span 1; grid-row: span 2; }
  .gal__i--wide2 { grid-column: span 2; grid-row: span 1; }
  .gal__cap { opacity: 1; transform: none; font-size: 12px; }
  .gal__i::after { opacity: 1; }
}


/* ══════════════════════════ 09 · AFTER CARE ══════════════════════════ */
.ac {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}

.ac li {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(26px, 2.8vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: border-color .5s var(--ease), transform .5s var(--ease),
              box-shadow .5s var(--ease);
}

.ac li:hover {
  border-color: var(--rose-200);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.ac li:nth-child(4) { grid-column: span 1; }
.ac li:last-child { grid-column: span 2; }

.ac__no {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--rose-300);
}

.ac__txt {
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.7;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.ac__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(32px, 3.6vw, 46px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line-soft);
}

.ac__note {
  font-size: 13.5px;
  color: var(--muted);
  position: relative;
  padding-left: 18px;
}

.ac__note::before {
  content: '※';
  position: absolute;
  left: 0; top: 0;
  color: var(--rose-300);
}

@media (max-width: 900px) {
  .ac { grid-template-columns: repeat(2, 1fr); }
  .ac li:last-child { grid-column: span 2; }
}

@media (max-width: 560px) {
  .ac { grid-template-columns: 1fr; }
  .ac li:last-child { grid-column: span 1; }
  .ac__foot { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════ 10 · REVIEW (왼쪽으로 계속 흐르는 후기) ══════════════════════════ */
.rv__view {
  position: relative;
  overflow: hidden;
  /* 양 끝을 서서히 사라지게 해 흐름이 자연스럽게 보이게 합니다 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.rv__track {
  display: flex;
  width: max-content;
  gap: clamp(14px, 1.8vw, 22px);
  animation: rvFlow var(--rv-dur, 60s) linear infinite;
  will-change: transform;
}

@keyframes rvFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(14px, 1.8vw, 22px) / 2)); }
}

/* 마우스를 올리거나 키보드 포커스가 들어오면 멈춥니다 */
.rv__view:hover .rv__track,
.rv__view:focus-within .rv__track,
.rv__view.is-held .rv__track { animation-play-state: paused; }

.rv__card {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 396px);
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(26px, 3vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.rv__card:hover {
  transform: translateY(-5px);
  border-color: var(--rose-200);
  box-shadow: 0 2px 8px rgba(181, 129, 116, .08),
              0 14px 34px rgba(181, 129, 116, .16);
}

.rv__stars {
  font-size: 13px;
  letter-spacing: .22em;
  line-height: 1;
  color: var(--rose-300);
}

.rv__body {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  white-space: pre-line;
}

.rv__fig {
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.rv__fig img { width: 100%; height: 100%; object-fit: cover; }

.rv__by {
  display: grid;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.rv__who {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.rv__course {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--rose-500);
}

.rv__hint {
  margin-top: 26px;
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

/* 모션을 줄이도록 설정한 기기에서는 흐르지 않고 직접 밀어서 보게 합니다 */
@media (prefers-reduced-motion: reduce) {
  .rv__view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rv__track { animation: none; }
  .rv__hint { display: none; }
}





/* ══════════════════════════ 11 · FAQ ══════════════════════════ */
.faq { border-top: 1px solid var(--line); }

.faq__i { border-bottom: 1px solid var(--line); }

/* 질문 줄 전체가 눌리는 영역입니다. 모바일 터치 높이 48px 이상을 확보합니다. */
.faq__q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: clamp(20px, 2.1vw, 26px) 2px;
  text-align: left;
  font-size: clamp(15.5px, 1.55vw, 17.5px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color .35s var(--ease);
}

/* hover 는 아주 미세하게만 — 글자와 + 기호가 함께 로즈 톤으로 */
.faq__q:hover { color: var(--rose-700); }
.faq__q:hover .faq__mark::before,
.faq__q:hover .faq__mark::after { background: var(--rose-700); }

.faq__q:focus-visible { outline-offset: -2px; }

.faq__i.is-open .faq__q { color: var(--rose-700); }

.faq__qt { flex: 1; line-height: 1.6; }

.faq__mark {
  position: relative;
  flex: none;
  width: 15px; height: 15px;
}

.faq__mark::before,
.faq__mark::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--rose-500);
  transition: transform .45s var(--ease), background .35s var(--ease);
}

.faq__mark::after { transform: rotate(90deg); }

.faq__i.is-open .faq__mark::after { transform: rotate(0deg); }

/* 답변 — 높이와 투명도가 함께 부드럽게 열립니다 */
.faq__a {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .5s var(--ease), opacity .35s var(--ease);
}

.faq__i.is-open .faq__a {
  opacity: 1;
  transition: height .5s var(--ease), opacity .45s var(--ease) .1s;
}

/* 읽기 좋은 폭으로 제한 */
.faq__inner {
  max-width: 760px;
  padding: 2px 46px 30px 2px;
}

.faq__a p {
  font-size: clamp(14.5px, 1.45vw, 15.5px);
  line-height: 1.95;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
}

.faq__a p + p { margin-top: 11px; }

.faq__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(40px, 4.6vw, 58px);
  font-size: 14.5px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .faq__q { gap: 14px; }
  .faq__inner { padding-right: 8px; padding-bottom: 26px; }
}

/* 모션을 줄이도록 설정한 기기에서는 즉시 열리고 닫힙니다 */
@media (prefers-reduced-motion: reduce) {
  .faq__a,
  .faq__i.is-open .faq__a { transition: none; }
  .faq__mark::before,
  .faq__mark::after { transition: none; }
}

/* ══════════════════════════ 12 · FINDER ══════════════════════════ */
.fnd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
}

.fnd button {
  width: 100%;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(26px, 3vw, 38px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 4px;
  text-align: left;
  transition: border-color .5s var(--ease), transform .5s var(--ease),
              box-shadow .5s var(--ease), background .5s var(--ease);
}

.fnd button:hover {
  border-color: var(--rose-300);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.fnd button[aria-pressed="true"] {
  border-color: var(--rose-500);
  background: var(--rose-50);
}

.fnd__no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--rose-300);
}

.fnd__txt {
  font-size: clamp(15.5px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.fnd__arrow {
  width: 26px; height: 1px;
  background: var(--rose-300);
  transition: width .5s var(--ease);
}

.fnd button:hover .fnd__arrow { width: 44px; }

.fnd__result {
  overflow: hidden;
  height: 0;
  transition: height .6s var(--ease);
}

.fnd__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: 18px;
  padding: clamp(28px, 3.2vw, 40px);
  background: var(--surface);
  border: 1px solid var(--rose-200);
  border-radius: 4px;
}

.fnd__info { flex: 1 1 280px; }

.fnd__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--rose-500);
  font-family: var(--serif);
  margin-bottom: 8px;
}

.fnd__name {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ink);
  margin-bottom: 9px;
}

.fnd__reason {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.fnd__btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 820px) { .fnd { grid-template-columns: 1fr; } }


/* ══════════════════════════ 13 · FINAL CTA ══════════════════════════ */
.fcta {
  position: relative;
  padding-block: clamp(90px, 11vw, 160px);
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}

.fcta__bg { position: absolute; inset: 0; }

.fcta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(.7);
}

.fcta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244,237,228,.80) 0%, rgba(252,249,245,.70) 100%);
}

.fcta__in { position: relative; z-index: 2; }

.fcta__head {
  font-family: var(--serif);
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .015em;
  color: var(--ink);
  white-space: pre-line;
  margin-bottom: clamp(34px, 4vw, 48px);
}

.fcta__btn { box-shadow: 0 10px 34px rgba(142, 93, 83, .22); }

.fcta__sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 32px;
}


/* ══════════════════════════ FOOTER ══════════════════════════ */
.ft {
  background: var(--ivory-deep);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(48px, 5.5vw, 72px);
}

.ft__in {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 56px);
  justify-content: space-between;
  padding-bottom: clamp(36px, 4vw, 52px);
}

.ft__logo {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .24em;
  color: var(--ink);
}

.ft__ko { font-size: 13px; color: var(--muted); margin-top: 6px; }

.ft__cred { display: grid; gap: 7px; }

.ft__cred li { font-size: 13px; color: var(--muted); }

.ft__links { display: grid; gap: 9px; }

.ft__links a {
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}

.ft__links a:hover { color: var(--rose-700); }

.ft__addr {
  padding: 0 var(--pad) 22px;
  font-size: 12.5px;
  color: var(--faint);
  text-align: center;
}

.ft__copy {
  padding: 20px var(--pad);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}


/* ══════════════════════════ FLOATING CTA ══════════════════════════ */
.fab {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(252,249,245,0) 0%, rgba(252,249,245,.96) 44%);
  transform: translateY(120%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}

.fab.is-on { transform: none; pointer-events: auto; }

.fab__btn { box-shadow: 0 8px 26px rgba(142, 93, 83, .26); }

@media (min-width: 861px) { .fab { display: none; } }


/* ══════════════════════════ MODAL ══════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(43, 37, 33, .42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}

.modal.is-on .modal__scrim { opacity: 1; }

.modal__box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  background: var(--ivory);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.965) translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  overflow: hidden;
}

.modal.is-on .modal__box { opacity: 1; transform: none; }

.modal__x {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(252,249,245,.9);
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}

.modal__x:hover { background: var(--rose-50); color: var(--rose-700); }
.modal__x svg { width: 17px; height: 17px; }

.modal__scroll {
  overflow-y: auto;
  padding: clamp(32px, 4vw, 48px);
  -webkit-overflow-scrolling: touch;
}

.modal__foot {
  padding: 18px clamp(22px, 3vw, 34px) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

/* 모달 내부 */
.md__en {
  font-family: var(--serif);
  font-size: clamp(23px, 2.7vw, 31px);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink);
  padding-right: 44px;
}

.md__ko { font-size: 13.5px; color: var(--rose-500); margin-top: 8px; letter-spacing: .04em; }

.md__hours {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 8px 15px;
  background: var(--ivory-deep);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.md__hours svg { width: 13px; height: 13px; flex: none; opacity: .65; }

.md__lead {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
}

.md__sec { margin-top: clamp(30px, 3.4vw, 40px); }

.md__label {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .28em;
  color: var(--rose-500);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.md__sch { display: grid; gap: 2px; }

.md__row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.md__row:last-child { border-bottom: 0; }

.md__rowlb {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.md__rowlb em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.md__rowli { display: grid; gap: 7px; }

.md__rowli li {
  position: relative;
  padding-left: 15px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.md__rowli li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--rose-300);
}

.md__out { display: grid; gap: 12px; }

/* 모달 안 작은 단서 — 디플로마 발급비가 수강료와 별도라는 안내 */
.md__note {
  margin-top: 10px;
  padding-left: 26px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
}

.md__out li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.md__out li::before {
  content: '';
  position: absolute;
  left: 2px; top: .52em;
  width: 11px; height: 6px;
  border-left: 1.4px solid var(--rose-500);
  border-bottom: 1.4px solid var(--rose-500);
  transform: rotate(-45deg);
}


/* ══════════════════════════ LIGHTBOX ══════════════════════════ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(46px, 6vw, 76px) clamp(12px, 5vw, 80px);
  background: rgba(30, 25, 22, .93);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.lb.is-on { opacity: 1; }

.lb__stage {
  max-width: 100%;
  max-height: 100%;
  display: grid;
  gap: 16px;
  justify-items: center;
  transform: scale(.95);
  transition: transform .45s var(--ease);
}

.lb.is-on .lb__stage { transform: none; }

.lb__stage img,
.lb__stage video {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

.lb__stage figcaption {
  font-size: 14px;
  color: rgba(252, 249, 245, .82);
  text-align: center;
}

.lb__x,
.lb__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(252, 249, 245, .85);
  background: rgba(252, 249, 245, .09);
  transition: background .35s var(--ease), color .35s var(--ease);
}

.lb__x:hover,
.lb__nav:hover { background: rgba(252, 249, 245, .2); color: #FFF; }

.lb__x { top: 20px; right: 20px; width: 42px; height: 42px; }
.lb__x svg { width: 18px; height: 18px; }

.lb__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lb__nav svg { width: 22px; height: 22px; }
.lb__nav--prev { left: clamp(8px, 2vw, 26px); }
.lb__nav--next { right: clamp(8px, 2vw, 26px); }

.lb__count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .18em;
  color: rgba(252, 249, 245, .6);
}

@media (max-width: 620px) {
  .lb__nav { width: 40px; height: 40px; }
  .lb__stage img, .lb__stage video { max-height: calc(100vh - 220px); }
}


/* ══════════════════════════ 본문 스크롤 잠금 ══════════════════════════ */
body.is-locked { overflow: hidden; }


/* ══════════════════════════ 누끼(배경 제거) 사진 ══════════════════════════
   배경이 지워진 인물 이미지는 액자에 넣어 자르면 어색해지므로
   배경 위에 그대로 올리고, 잘리지 않게 전체를 보여줍니다. */
.frame.is-cutout {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.frame.is-cutout::after { display: none; }

.frame.is-cutout img {
  object-fit: contain;
  object-position: bottom center;
  /* 누끼 이미지는 확대하면 가장자리가 잘려 보이므로 기본 배율을 유지합니다 */
  transform: none;
}

.frame--reveal.is-cutout img { transform: none; }
.frame--reveal.is-cutout.is-in img { transform: none; }
.tilt.is-cutout:hover img { transform: none; }

.hero__fig.is-cutout { aspect-ratio: 3 / 4; }

/* 누끼 인물 아래에 은은한 그림자를 깔아 떠 보이지 않게 합니다 */
.hero__fig.is-cutout::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 62%;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(139, 112, 96, .17) 0%, transparent 72%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero__fig.is-cutout { aspect-ratio: 4 / 5; max-height: 46vh; }
}

@media (max-width: 560px) {
  .hero__fig.is-cutout { aspect-ratio: 3 / 4; max-height: 44vh; }
}


/* ══════════════════════════ 채널 아이콘 · 링크 ══════════════════════════ */
/* 스프라이트 본체는 화면에 보이지 않습니다 */
.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 17px;
  height: 17px;
  flex: none;
  color: inherit;          /* 글자색을 그대로 따라갑니다 */
}

/* 아이콘이 붙은 링크 — 아이콘과 글자 간격 8px */
.has-ico {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── 푸터 채널 내비게이션 ── */
.ft__ch { display: grid; gap: 18px; }

.chnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.chnav__a {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}

/* 항목 사이 가운뎃점 — 첫 항목에는 넣지 않습니다 */
.chnav__a::before {
  content: '';
  width: 3px;
  height: 3px;
  margin-right: 16px;
  border-radius: 50%;
  background: var(--sand);
  flex: none;
}

.chnav__a.is-first::before { display: none; }

/* hover 는 사이트 전체와 같은 rose accent 로 통일합니다.
   브랜드 원색을 쓰면 아이보리 톤에서 아이콘만 튀기 때문입니다. */
.chnav__a:hover { color: var(--rose-700); }

.ft__links a.has-ico:hover { color: var(--rose-700); }

/* ── 모바일 터치 영역 ── */
@media (max-width: 620px) {
  .chnav { gap: 0 14px; }
  .chnav__a { min-height: 46px; }
  .chnav__a::before { margin-right: 14px; }
  .ft__links a { min-height: 46px; }
  .fcta__sub { gap: 18px 24px; }
  .fcta__sub .tlink { min-height: 46px; }
}

/* ══════════════════════════ 01-B · INTERNATIONAL CERTIFICATION ══════════════════════════ */
/* 메달·인증서 아이콘을 늘어놓지 않습니다.
   따뜻한 아이보리 바탕 + 얇은 rose 선 + 큰 타이포만으로 신뢰를 전달합니다. */
.intl {
  position: relative;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--rose-50) 0%, transparent 62%),
    var(--ivory);
  border-top: 1px solid var(--rose-100);
  border-bottom: 1px solid var(--rose-100);
  padding-block: clamp(100px, 13vw, 196px);
}

.intl__in {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.intl .eyebrow { margin-bottom: 30px; }

.intl__head {
  font-family: var(--serif);
  font-size: clamp(27px, 4.1vw, 54px);
  font-weight: 300;
  line-height: 1.38;
  letter-spacing: .005em;
  color: var(--ink);
  word-break: keep-all;
  text-wrap: balance;
}

.intl__note {
  margin-top: 20px;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--muted);
  letter-spacing: -0.01em;
}

/* 제목과 이력 사이를 가르는 얇은 세로선 */
.intl__rule {
  display: block;
  width: 1px;
  height: clamp(52px, 7vw, 104px);
  margin: clamp(40px, 5.4vw, 72px) auto;
  background: linear-gradient(180deg, var(--rose-300) 0%, rgba(219,176,165,0) 100%);
}

.intl__list {
  max-width: 580px;
  margin-inline: auto;
  text-align: left;
}

.intl__list li {
  padding: clamp(16px, 1.8vw, 22px) 2px;
  border-top: 1px solid var(--line-soft);
  font-size: clamp(14.5px, 1.45vw, 16.5px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  word-break: keep-all;
}

.intl__list li:last-child { border-bottom: 1px solid var(--line-soft); }

@media (max-width: 620px) {
  .intl__list { max-width: none; }
}

/* ── 강사 이력 → 국제 인증 섹션 링크 ── */
.cred__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13.5px;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}

.cred__link::after {
  content: '→';
  font-size: 13px;
  transition: transform .35s var(--ease);
}

.cred__link:hover {
  color: var(--rose-700);
  border-color: var(--rose-300);
}

.cred__link:hover::after { transform: translateX(3px); }

@media (max-width: 620px) {
  .cred__link { min-height: 46px; }
}

/* ══════════════════════════ CONNECT — 소셜 · 상담 채널 ══════════════════════════
   카카오 노란색은 브랜드 톤에 맞춰 크림 옐로로 눌러서 사용합니다.
   브랜드 컬러는 아이콘에만 쓰고, 카드 배경은 아이보리 계열을 유지합니다. */

#connect {
  --kakao-cream:  #F6E8B4;
  --kakao-cream2: #F1DE9A;
  --kakao-line:   #E3CE86;
  --kakao-ink:    #3B2D18;
}

/* ---------- 카카오톡 상담 CTA ---------- */
.kcta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 24px);
  width: 100%;
  max-width: 940px;
  margin: 0 auto clamp(28px, 3.4vw, 42px);
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px);
  background: linear-gradient(104deg, var(--kakao-cream) 0%, var(--kakao-cream2) 100%);
  border: 1px solid var(--kakao-line);
  border-radius: 16px;
  color: var(--kakao-ink);
  box-shadow: 0 1px 2px rgba(120, 95, 40, .05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}

.kcta__ico {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 246, .62);
  color: var(--kakao-ink);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}

.kcta__ico svg { width: 27px; height: 27px; display: block; }

.kcta__txt { display: grid; gap: 5px; min-width: 0; }

.kcta__t {
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.kcta__d {
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 1.7;
  color: rgba(59, 45, 24, .72);
}

.kcta__ar {
  flex: none;
  margin-left: auto;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: rgba(59, 45, 24, .62);
  transition: transform .4s var(--ease), color .4s var(--ease);
}

.kcta:hover {
  transform: translateY(-2px);
  border-color: #D9C072;
  box-shadow: 0 2px 6px rgba(120, 95, 40, .07), 0 14px 30px -18px rgba(120, 95, 40, .38);
}

.kcta:hover .kcta__ico { transform: scale(1.04); background: rgba(255, 253, 246, .85); }
.kcta:hover .kcta__ar  { transform: translateX(5px); color: var(--kakao-ink); }
.kcta:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }

/* ---------- 채널 카드 ---------- */
.soc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.3vw, 16px);
  list-style: none;
  max-width: 940px;
  margin-inline: auto;
}

.soc__c {
  height: 100%;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 2.3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  transition: transform .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease);
}

.soc__ico {
  width: 40px;
  height: 40px;
  display: block;
  transition: transform .4s var(--ease);
}

.soc__ico svg { width: 100%; height: 100%; display: block; }

.soc__n {
  font-size: clamp(14.5px, 1.4vw, 15.5px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.soc__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--rose-700);
}

.soc__go i {
  font-style: normal;
  font-family: var(--serif);
  font-size: 15px;
  transition: transform .4s var(--ease);
}

.soc__c:hover {
  transform: translateY(-3px);
  border-color: var(--rose-200);
  box-shadow: 0 1px 2px rgba(74, 58, 48, .04), 0 12px 26px -16px rgba(141, 93, 83, .32);
}

.soc__c:hover .soc__ico  { transform: scale(1.04); }
.soc__c:hover .soc__go i { transform: translateX(5px); }
.soc__c:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }

/* ---------- 태블릿 · 모바일 : 2 × 2 ---------- */
@media (max-width: 860px) {
  .soc { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .soc__c { min-height: 168px; }
}

@media (max-width: 560px) {
  .kcta {
    gap: 14px;
    padding: 18px 18px;
    border-radius: 14px;
  }
  .kcta__ico { width: 46px; height: 46px; }
  .kcta__ico svg { width: 23px; height: 23px; }
  .kcta__ar { font-size: 18px; }
  .soc__c { min-height: 156px; padding: 20px 18px; gap: 12px; }
  .soc__ico { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .kcta, .kcta__ico, .kcta__ar,
  .soc__c, .soc__ico, .soc__go i { transition: none; }
  .kcta:hover, .soc__c:hover { transform: none; }
}


/* ══════════════════════════ CONTACT / VISIT ══════════════════════════
   왼쪽 매장 정보 · 오른쪽 상담 카드.
   카드는 얇은 테두리 + 작은 라운드로, SaaS 카드처럼 보이지 않게 합니다. */

.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* Desktop 50 / 50 */
  gap: clamp(30px, 4.4vw, 64px);
  align-items: start;
}

.visit__lead { margin-top: 16px; }

/* ---------- 매장 정보 ---------- */
.vinfo {
  margin-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}

.vinfo__r {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.vinfo__r dt {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose-500);
}

.vinfo__r dd {
  margin: 0;                 /* dd 기본 들여쓰기 제거 */
  font-size: clamp(14.5px, 1.4vw, 15.5px);
  line-height: 1.75;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.vinfo__a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color .28s var(--ease), border-color .28s var(--ease);
}

.vinfo__a[href]:hover {
  color: var(--rose-700);
  border-bottom-color: var(--rose-200);
}

.vinfo__a[aria-disabled] { border-bottom: 0; }

/* ---------- 상담 카드 ---------- */
.vcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.vcard__h {
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.vcard__d {
  margin-top: 14px;
  font-size: clamp(13.5px, 1.3vw, 14.5px);
  line-height: 1.85;
  color: var(--ink-soft);
}

.vcard__k {
  margin-top: clamp(24px, 2.8vw, 32px);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  background: linear-gradient(104deg, #F6E8B4 0%, #F1DE9A 100%);
  border: 1px solid #E3CE86;
  border-radius: 8px;
  color: #3B2D18;
  font-size: clamp(14.5px, 1.4vw, 15.5px);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: transform .28s var(--ease), border-color .28s var(--ease),
              box-shadow .28s var(--ease);
}

.vcard__k svg {
  width: 21px;
  height: 21px;
  flex: none;
  transition: transform .28s var(--ease);
}

.vcard__k:hover {
  transform: translateY(-2px);
  border-color: #D9C072;
  box-shadow: 0 8px 20px -14px rgba(120, 95, 40, .5);
}

.vcard__k:hover svg { transform: scale(1.07); }

.vcard__s {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  font-size: 14px;
  color: var(--rose-700);
  transition: color .28s var(--ease);
}

.vcard__s i {
  font-style: normal;
  font-family: var(--serif);
  font-size: 15px;
  transition: transform .28s var(--ease);
}

.vcard__s:hover i { transform: translateX(5px); }

.vcard__t {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  font-size: 13.5px;
  color: var(--muted);
  transition: color .28s var(--ease);
}

.vcard__t strong { font-weight: 600; color: var(--ink-soft); }
.vcard__t:hover,
.vcard__t:hover strong { color: var(--rose-700); }

.vcard__k:focus-visible,
.vcard__s:focus-visible,
.vcard__t:focus-visible,
.vinfo__a:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }

/* ---------- 태블릿 55 / 45 ---------- */
@media (max-width: 1024px) {
  .visit { grid-template-columns: 55fr 45fr; gap: clamp(24px, 3.4vw, 40px); }
}

/* ---------- 모바일 : 매장 정보 → 상담 카드 ---------- */
@media (max-width: 760px) {
  .visit { grid-template-columns: 1fr; gap: 34px; }
  .vinfo__r { grid-template-columns: 82px 1fr; gap: 12px; padding: 15px 0; }
}

@media (max-width: 400px) {
  .vinfo__r { grid-template-columns: 1fr; gap: 5px; }
  .vinfo__r dt { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcard__k, .vcard__k svg, .vcard__s i { transition: none; }
  .vcard__k:hover { transform: none; }
  .vcard__k:hover svg, .vcard__s:hover i { transform: none; }
}


/* ══════════ 터치 환경 보정 (CONNECT · CONTACT) ══════════ */

/* 본문 안의 전화·주소 링크는 글자 높이가 낮아 탭하기 어렵습니다.
   레이아웃은 그대로 두고 터치 영역만 48px 로 넓힙니다. */
.vinfo__a { position: relative; }

/* 터치 기기, 그리고 태블릿 이하 폭에서는 항상 넓힙니다.
   (768px 은 대부분 터치 기기라 pointer 감지만 믿지 않습니다) */
@media (pointer: coarse), (max-width: 1024px) {
  .vinfo__a[href]::after {
    content: '';
    position: absolute;
    inset: -15px 0;        /* 18px 글자 + 위아래 15px = 48px */
  }
}

/* 마우스가 없는 기기에서는 hover 를 tap 피드백으로 대체합니다.
   (터치 후 hover 상태가 남아 카드가 들린 채로 보이는 것을 막습니다) */
@media (hover: none) {
  .soc__c:hover,
  .kcta:hover,
  .vcard__k:hover {
    transform: none;
    box-shadow: none;
  }

  .soc__c:hover  { border-color: var(--line-soft); }
  .kcta:hover    { border-color: var(--kakao-line); }
  .vcard__k:hover { border-color: #E3CE86; }

  .soc__c:hover .soc__ico,
  .kcta:hover .kcta__ico,
  .vcard__k:hover svg { transform: none; }

  .soc__c:hover .soc__go i,
  .kcta:hover .kcta__ar,
  .vcard__s:hover i { transform: none; }

  /* 눌렀을 때만 반응 */
  .soc__c:active,
  .kcta:active,
  .vcard__k:active {
    transform: scale(.99);
    transition-duration: .12s;
  }

  .vcard__s:active i,
  .soc__c:active .soc__go i { transform: translateX(4px); }
}


/* ══════════════════════════ WAXING 페이지 ══════════════════════════
   /waxing 전용. 색 · 그림자 · 서체 · 라운드는 전부 기존 토큰을 그대로 씁니다.
   index 에는 이 선택자에 해당하는 요소가 없어 영향이 없습니다. */

/* ── 사진 슬롯 ─────────────────────────────────────────────────────
   사진이 있으면 <img> 를 넣고, 아직 없으면 비워 둡니다.
   비어 있을 때는 크림 바탕에 브랜드 워터마크가 보이고,
   나중에 <img> 한 줄만 넣으면 그대로 사진 자리가 됩니다. */

.wx__shot {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--cream) 70%, var(--surface)) 0%,
      var(--cream-deep) 100%);
  border: 1px solid var(--beige);
  box-shadow: var(--shadow-sm);
}

/* 사진이 없을 때 보이는 브랜드 워터마크 */
.wx__shot::before {
  content: 'BEAUTY VERA';
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--serif);
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--sand);
  opacity: .55;
}

/* 사진이 들어오면 워터마크를 덮습니다 */
.wx__shot img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}

.wx__shot--11  { aspect-ratio: 1 / 1; }
.wx__shot--43  { aspect-ratio: 4 / 3; }
.wx__shot--34  { aspect-ratio: 3 / 4; }
.wx__shot--45  { aspect-ratio: 4 / 5; }
.wx__shot--169 { aspect-ratio: 16 / 9; }

.wx__shot-cap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: linear-gradient(180deg, transparent 0%, rgba(252, 249, 245, .92) 68%);
}

/* 사진이 들어간 슬롯은 캡션 글자를 밝게 */
.wx__shot:has(img) .wx__shot-cap {
  color: var(--surface);
  background: linear-gradient(180deg, transparent 0%, rgba(43, 37, 33, .52) 78%);
}

/* ── 스크롤 등장 — 한 덩어리 안에서 조금씩 늦게 ───────────────────── */
.wx__stagger > *:nth-child(2) { transition-delay: .08s; }
.wx__stagger > *:nth-child(3) { transition-delay: .16s; }
.wx__stagger > *:nth-child(4) { transition-delay: .24s; }

/* ── HERO ─────────────────────────────────────────────────────────── */
.wx__hero {
  padding-top: clamp(116px, 12vw, 172px);
  padding-bottom: clamp(60px, 7.5vw, 112px);
  background: linear-gradient(180deg, var(--ivory-deep) 0%, var(--ivory) 76%);
}

.wx__hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(34px, 5.5vw, 84px);
  align-items: center;
}

.wx__hero-t {
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: .004em;
  color: var(--ink);
  margin-top: 18px;
  word-break: keep-all;
}

.wx__hero-t b {
  font-weight: 500;
  font-style: italic;
  color: var(--rose-700);
}

.wx__hero-s {
  margin-top: 30px;
  font-size: clamp(16.5px, 1.7vw, 20px);
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* .rule 은 span 이라 기본이 inline 입니다. 선이 보이려면 블록이어야 합니다. */
.wx__hero-copy .rule,
.wx__brand-copy .rule { display: block; }

.wx__hero-copy .rule { margin: 28px 0; }

.wx__hero-m {
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: .01em;
  color: var(--muted);
  word-break: keep-all;
}

.wx__hero-fig { box-shadow: var(--shadow-lg); }
.wx__hero-fig img { object-position: 50% 44%; }

.wx__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}

.wx__cta--stack { display: grid; gap: 10px; margin-top: 0; }

/* ── 시술 안내 ─────────────────────────────────────────────────────── */
.wx__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 32px);
  margin-top: clamp(36px, 4.2vw, 58px);
}

.wx__item {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease),
              border-color .6s var(--ease);
}

.wx__item:hover {
  transform: translateY(-7px);
  border-color: var(--rose-200);
  box-shadow: var(--shadow-md);
}

.wx__item:hover .wx__shot img { transform: scale(1.055); }

/* 카드 안의 사진 슬롯은 카드 테두리와 겹치지 않게 모서리를 폅니다 */
.wx__item .wx__shot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line-soft);
}

.wx__item-b { padding: clamp(24px, 2.6vw, 34px); }

.wx__item-t {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}

.wx__item-d {
  margin-top: 13px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

.wx__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
}

/* ── 공간 ─────────────────────────────────────────────────────────── */
.wx__space {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 32px);
  margin-top: clamp(36px, 4.2vw, 58px);
}

/* ── 진행 과정 ─────────────────────────────────────────────────────── */
.wx__flow {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 4.6vw, 72px);
  align-items: start;
}

.wx__steps { margin-top: clamp(30px, 3.4vw, 44px); display: grid; gap: 0; }

.wx__step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}

.wx__step:last-child { border-bottom: 1px solid var(--line-soft); }

.wx__step-n {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--rose-300);
  padding-top: 2px;
}

.wx__step-t {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink);
}

.wx__step-d {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: keep-all;
}

.wx__flow-fig { position: sticky; top: 108px; }

/* ── 전 · 후 관리 ──────────────────────────────────────────────────── */
.wx__care {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .66fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(36px, 4.2vw, 58px);
}

.wx__care-h {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rose-500);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rose-200);
}

.wx__list { margin-top: 18px; display: grid; gap: 11px; }

.wx__list li {
  position: relative;
  padding-left: 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: keep-all;
}

.wx__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .78em;
  width: 5px; height: 1px;
  background: var(--rose-300);
}

.wx__care-fig { margin-top: 34px; }

/* ── 원장 · LYCON ──────────────────────────────────────────────────── */
.wx__brand {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 4.4vw, 68px);
  align-items: center;
}

.wx__brand-fig { box-shadow: var(--shadow-md); }
.wx__brand-fig img { object-position: 50% 26%; }
.wx__brand-fig:hover img { transform: scale(1.04); }
.wx__brand-copy .rule { margin: 22px 0; }
.wx__brand-sub { margin-top: 28px; }

/* ── FAQ — 데스크톱은 올리면 열리고, 모바일은 누르면 열립니다 ───────── */
.wx__faq-hint { font-size: 14px; color: var(--muted); }

.wx__faq {
  margin-top: clamp(30px, 3.4vw, 46px);
  display: grid;
  gap: 10px;
}

.wxq {
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}

.wxq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 62px;
  padding: 18px clamp(18px, 2vw, 26px);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: clamp(15.5px, 1.6vw, 17px);
  color: var(--ink);
  word-break: keep-all;
}

/* 여닫이 표시 — 선 두 개로 만든 + 기호 */
.wxq__i {
  position: relative;
  flex: none;
  width: 13px; height: 13px;
}

.wxq__i::before,
.wxq__i::after {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 1px;
  background: var(--rose-500);
  transition: transform .45s var(--ease);
}

.wxq__i::after { transform: rotate(90deg); }

/* 답변 — 높이를 재지 않고 grid 로 부드럽게 폅니다 */
.wxq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.wxq__in {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
  padding: 0 clamp(18px, 2vw, 26px);
}

/* 열린 상태 — 눌렀을 때(모든 기기) */
.wxq.is-open { border-color: var(--rose-200); box-shadow: var(--shadow-sm); }
.wxq.is-open .wxq__a { grid-template-rows: 1fr; }
.wxq.is-open .wxq__in { padding-bottom: clamp(18px, 2vw, 24px); }
.wxq.is-open .wxq__i::after { transform: rotate(0deg); }

/* 키보드로 들어오면 테두리만 강조합니다 */
.wxq:focus-within { border-color: var(--rose-200); }
/* 포커스만으로 펼치던 규칙은 뺐습니다 — 모바일에서 두 번째 탭에 닫히지 않고 aria-expanded 와 화면이 어긋났습니다.
   키보드는 Enter · Space(= click)로 열고 닫아 is-open · aria-expanded 가 함께 바뀝니다. */

/* 마우스가 있는 기기에서만 hover 로도 열립니다.
   터치 기기에서는 이 규칙이 적용되지 않아 탭 동작만 남습니다. */
@media (hover: hover) and (pointer: fine) {
  .wxq:hover { border-color: var(--rose-200); box-shadow: var(--shadow-sm); }
  .wxq:hover .wxq__a { grid-template-rows: 1fr; }
  .wxq:hover .wxq__in { padding-bottom: clamp(18px, 2vw, 24px); }
  .wxq:hover .wxq__i::after { transform: rotate(0deg); }
}

/* ── 오시는 길 ─────────────────────────────────────────────────────── */
.wx__visit {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(30px, 3.4vw, 46px);
}

.wx__info dt {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
}

.wx__info dd {
  margin: 8px 0 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .wx__hero-in { grid-template-columns: 1fr; }
  .wx__hero-fig { order: -1; aspect-ratio: 16 / 10; }
  .wx__brand { grid-template-columns: 1fr; }
  /* 원장 사진이 세로(2026-10-25 교체)라 좁은 화면에서도 세로 틀로, 가운데 정렬 */
  .wx__brand-fig { width: 100%; max-width: 380px; aspect-ratio: 4 / 5; margin-inline: auto; }
  .wx__flow { grid-template-columns: 1fr; }
  .wx__flow-fig { position: static; max-width: 420px; aspect-ratio: 4 / 3; }
  .wx__care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx__care-fig { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-top: 0; }
  .wx__visit { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wx__menu,
  .wx__space,
  .wx__care { grid-template-columns: 1fr; }
  .wx__step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .wx__cta .btn { width: 100%; }
}

/* ══════════════════════════ WAXING 허브 · 상세 ══════════════════════════
   /waxing (허브) 과 /waxing/* (상세 4) 에서만 쓰는 선택자입니다.
   기존 .wx__* 블록을 그대로 쓰고, 여기서는 모자란 것만 더합니다.
   교육 원페이지에는 이 선택자가 없어 영향이 없습니다. */

/* ── 허브: 짧은 소개 ──────────────────────────────────────────────── */
.wx__intro .h-lead + .h-lead { margin-top: 14px; }

/* ── 허브: 입구 카드 — 카드 전체가 링크 ─────────────────────────────
   .wx__item 은 grid 가 행 높이까지 늘려주지만 그 안의 <a> 는 늘지 않습니다.
   그대로 두면 카드 아래쪽이 눌리지 않는 영역으로 남아 flex 로 끝까지 채웁니다. */
.wx__item--link > .wx__item-a { flex: 1; }

.wx__item-a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.wx__item-a > .wx__item-b {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wx__item-go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--rose-700);
}

.wx__item-go::after {
  content: '';
  width: 14px; height: 1px;
  background: currentColor;
  transition: width .5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .wx__item-a:hover .wx__item-go::after { width: 26px; }
}

/* ── 허브: 신뢰 지표 — 첫 화면 .hero__trust 와 같은 언어 ──────────── */
.wx__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 26px 0 30px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wx__trust li { display: grid; gap: 5px; }

.wx__trust-n {
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  letter-spacing: .01em;
}

.wx__trust-n i {
  font-style: normal;
  font-size: .46em;
  margin-left: 2px;
  color: var(--muted);
}

.wx__trust-n--txt {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rose-700);
  align-self: end;
  padding-bottom: 2px;
}

.wx__trust-l {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ── 허브: FAQ 아래 안내 ──────────────────────────────────────────── */
.wx__faq-foot {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  word-break: keep-all;
}

.wx__faq-foot + .wx__faq-foot { margin-top: 10px; }

/* ── 상세: HERO — 허브보다 한 단계 낮춥니다 ───────────────────────── */
.wx__hero--sub { padding-bottom: clamp(50px, 6vw, 92px); }
.wx__hero--sub .wx__hero-t { font-size: clamp(36px, 4.8vw, 66px); }
.wx__hero--sub .wx__hero-s { margin-top: 24px; }

.wx__back {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.wx__back a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  text-decoration: none;
  transition: color .4s var(--ease);
}

.wx__back a::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .wx__back a:hover { color: var(--rose-700); }
}

/* ── 상세: 글 + 사진 2단 ──────────────────────────────────────────── */
.wx__two {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(30px, 4.6vw, 70px);
  align-items: start;
}

.wx__two-copy .h-lead + .h-lead { margin-top: 16px; }
.wx__two-copy .wx__list { margin-top: 24px; }
.wx__two-copy .wx__note { margin-top: 22px; }
.wx__two > .wx__shot { position: sticky; top: 108px; }
.wx__two--rev > .wx__shot { order: -1; }

/* ── 상세: 질문 · 답 묶음 (아코디언이 아닌 펼친 형태) ─────────────── */
.wx__qa {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}

.wx__qa-item {
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.wx__qa-q {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
}

.wx__qa-a {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* 질문·답 아래에 사진 2장이 이어질 때 간격 */
.wx__qa + .wx__space { margin-top: clamp(26px, 3vw, 40px); }

/* ── 공통 partial: 진행 과정의 부위별 한 줄 ───────────────────────── */
.wx__note--wide { margin-top: 26px; }

/* ── 상세: 다음 공간 ──────────────────────────────────────────────── */
.wx__next {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.wx__next-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}

.wx__next-card--hub { background: var(--cream); }

@media (hover: hover) and (pointer: fine) {
  .wx__next-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--rose-200);
  }
  .wx__next-card:hover .wx__next-go::after { width: 26px; }
}

.wx__next-en {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sand);
}

.wx__next-t {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

.wx__next-d {
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

.wx__next-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--rose-700);
}

.wx__next-go::after {
  content: '';
  width: 14px; height: 1px;
  background: currentColor;
  transition: width .5s var(--ease);
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .wx__next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .wx__two { grid-template-columns: 1fr; }
  .wx__two > .wx__shot {
    position: static;
    max-width: 460px;
    aspect-ratio: 4 / 3;
  }
  .wx__two--rev > .wx__shot { order: 0; }
  .wx__hero--sub .wx__hero-fig { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .wx__qa,
  .wx__next { grid-template-columns: 1fr; }
  .wx__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 왁싱 CTA 위계 ─────────────────────────────────────────────────
   고객의 첫 행동을 둘로만 보여줍니다.
     네이버 예약 = 메인 (채운 버튼)   카카오 상담 = 보조 (테두리 버튼)
   전화는 상단에 두지 않고 '오시는 길' 연락처 줄의 글자 링크로 둡니다. */

/* 네이버 예약 주소가 아직 없어 메인 버튼이 숨겨진 동안에는
   바로 뒤의 카카오 버튼이 메인 자리를 대신합니다.
   주소가 들어오면 자동으로 원래 위계로 돌아갑니다. */
.wx__cta > [data-contact="naverBooking"][hidden] + .btn--ghost {
  --btn-bg: var(--rose-700);
  --btn-fg: #FFF9F6;
  --btn-bd: transparent;
}

.wx__cta > [data-contact="naverBooking"][hidden] + .btn--ghost:hover {
  --btn-bg: var(--rose-700);
  --btn-bd: transparent;
  box-shadow: 0 10px 28px rgba(142, 93, 83, .26);
}

/* 오시는 길 — 버튼 아래 보조 링크 한 줄 */
.wx__cta-sub {
  margin-top: 6px;
  text-align: center;
  font-size: 14px;
}

/* 연락처 줄의 전화 링크 — 버튼이 아니라 글자 링크입니다 */
.wx__info dd .tlink { font-size: inherit; }

@media (max-width: 640px) {
  /* 모바일에서도 전화는 메인 버튼이 되지 않습니다.
     누르기 편하도록 높이만 확보하고 글자 링크 모양은 그대로 둡니다. */
  .wx__info dd .tlink,
  .wx__cta-sub .tlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ══════════════════════════ 전후사진 비교 ══════════════════════════
   /waxing/face 에서만 씁니다. 교육 페이지에는 이 선택자가 없어 영향이 없습니다.

   조작부는 <input type="range"> 입니다 — 화살표 키·스크린리더·터치가
   브라우저 기본으로 동작합니다. JS 는 --p 변수 하나만 갱신합니다.
   JS 가 꺼져도 50:50 상태로 두 장이 다 보입니다. */

.ba {
  --p: 50%;
  aspect-ratio: var(--ar, 4 / 3);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--beige);
  background: var(--cream-deep);
  box-shadow: var(--shadow-sm);
  /* 세로 스크롤은 살리고 가로 드래그만 가져갑니다 */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* 비율은 사례마다 다릅니다. tools/build.mjs 가 --ar 을 인라인으로 내려줍니다. */

.ba__layer {
  position: absolute;
  inset: 0;
}

/* 위에 덮인 AFTER 를 가운데 선 기준으로 잘라 BEFORE 가 드러나게 합니다.
   clip-path 와 transform 만 바뀌어 레이아웃 재계산이 없습니다. */
.ba__layer--a { clip-path: inset(0 0 0 var(--p)); }

.ba__layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 봐야 할 곳을 가운데로 당깁니다. 사례마다 다르게 줄 수 있습니다. */
.ba__layer--b img { object-position: var(--pos-b, 50% 50%); }
.ba__layer--a img { object-position: var(--pos-a, 50% 50%); }

/* 사진이 아직 없을 때 — 가짜 고객 사진을 넣지 않고 자리만 그립니다.
   --preview 빌드와, /waxing 의 empty="placeholder" 자리 표시에서 나옵니다. */
.ba__ph {
  display: block;
  width: 100%; height: 100%;
}

.ba__layer--b .ba__ph {
  background:
    repeating-linear-gradient(135deg,
      var(--cream) 0 18px, var(--cream-deep) 18px 36px);
}

.ba__layer--a .ba__ph {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--rose-200) 34%, var(--surface)) 0 18px,
      color-mix(in srgb, var(--rose-200) 52%, var(--surface)) 18px 36px);
}

.ba__soon {
  position: absolute;
  z-index: 3;
  left: 50%; top: 26%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(252, 249, 245, .88);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--muted);
  pointer-events: none;
}

/* ── BEFORE / AFTER 라벨 ──────────────────────────────────────────── */
.ba__tag {
  position: absolute;
  z-index: 3;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(43, 37, 33, .56);
  color: #FFF9F6;
  font-family: var(--serif);
  font-size: 10.5px;
  letter-spacing: .22em;
  pointer-events: none;
}

.ba__tag--b { left: 14px; }
.ba__tag--a { right: 14px; }

/* ── 가운데 세로선 + 손잡이 ───────────────────────────────────────── */
.ba__bar {
  position: absolute;
  z-index: 4;
  top: 0; bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: rgba(252, 249, 245, .92);
  box-shadow: 0 0 0 1px rgba(43, 37, 33, .14);
  pointer-events: none;
}

.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--beige);
  box-shadow: var(--shadow-md);
}

/* 손잡이 안의 ‹ › 화살표 */
.ba__grip::before,
.ba__grip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--rose-700);
  border-right: 1.5px solid var(--rose-700);
}

.ba__grip::before { left: 13px;  transform: translateY(-50%) rotate(-135deg); }
.ba__grip::after  { right: 13px; transform: translateY(-50%) rotate(45deg); }

/* ── 실제 조작부 — 영역 전체를 덮는 투명 range ────────────────────── */
.ba__r {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ba__r::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.ba__r::-moz-range-thumb     { width: 46px; height: 100%; border: 0; }

/* 키보드 포커스는 손잡이에 보이게 합니다 */
.ba__r:focus-visible { outline: none; }
.ba__r:focus-visible ~ .ba__bar .ba__grip {
  border-color: var(--rose-700);
  box-shadow: 0 0 0 3px var(--rose-200), var(--shadow-md);
}

/* ── 확대 버튼 ────────────────────────────────────────────────────── */
.ba__zoom {
  position: absolute;
  z-index: 6;
  right: 12px; bottom: 12px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--beige);
  background: rgba(252, 249, 245, .92);
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}

.ba__zoom::before,
.ba__zoom::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid var(--rose-700);
}

.ba__zoom::before { top: 13px;    left: 13px;  border-right: 0; border-bottom: 0; }
.ba__zoom::after  { bottom: 13px; right: 13px; border-left: 0;  border-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .ba__zoom:hover { background: var(--surface); border-color: var(--rose-300); }
}

/* ── 섹션 배치 ────────────────────────────────────────────────────── */
.ba__hero { margin-top: clamp(32px, 3.6vw, 48px); }

.ba__cases { margin-top: clamp(34px, 3.8vw, 52px); }

.ba__cases-h {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sand);
}

/* 사례 레일 — 768 이상에서는 그냥 2열 그리드입니다.
   한 칸을 크게 써야 전후 차이가 보입니다. 3열은 쓰지 않습니다. */
.ba__rail { margin-top: 16px; }

.ba__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}

/* align-content: start — 옆 사례가 더 길어(4:3 옆 3:4 등) 칸이 늘어나도
   남는 높이를 행 사이에 나누지 않고 아래로 보냅니다. 사례명이 사진 밑에 붙어 있습니다. */
.ba__case { display: grid; gap: 12px; align-content: start; }

.ba__case-t {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--ink);
}

.ba__case-c {
  margin-top: -4px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: keep-all;
}

/* ── 나란히 보기 — 각도·거리가 달라 겹치면 어긋나 보이는 사례 ──────
   768 이상은 좌 / 우, 640 이하는 위 / 아래. 모바일에서 좌우로 나누면
   한 장이 화면 폭의 절반도 안 돼 전후 차이가 보이지 않습니다. */
.ba__side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ba__half {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 4 / 3);
  border-radius: 10px;
  border: 1px solid var(--beige);
  background: var(--cream-deep);
  box-shadow: var(--shadow-sm);
}

.ba__half img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ba__side .ba__half:first-child img { object-position: var(--pos-b, 50% 50%); }
.ba__side .ba__half:last-child  img { object-position: var(--pos-a, 50% 50%); }

.ba__half .ba__tag { top: 10px; }
.ba__half .ba__tag--b { left: 10px; }
.ba__half .ba__tag--a { right: 10px; }

.ba__half.ba--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      var(--cream) 0 18px, var(--cream-deep) 18px 36px);
}

.ba__side .ba__half:last-child.ba--empty::after {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--rose-200) 34%, var(--surface)) 0 18px,
      color-mix(in srgb, var(--rose-200) 52%, var(--surface)) 18px 36px);
}

/* ── 사례 넘기기 — 모바일에서만 보입니다 ──────────────────────────── */
.ba__nav {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ba__nav-b {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--beige);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .4s var(--ease), opacity .3s var(--ease);
}

.ba__nav-b::before {
  content: '';
  position: absolute;
  top: 50%; left: 52%;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--rose-700);
  border-right: 1.5px solid var(--rose-700);
  transform: translate(-50%, -50%) rotate(-135deg);
}

.ba__nav-b--next::before {
  left: 48%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ba__nav-b[disabled] { opacity: .34; cursor: default; }

.ba__dots { display: flex; align-items: center; gap: 7px; }

.ba__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--sand);
  opacity: .45;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}

.ba__dot.is-on { background: var(--rose-700); opacity: 1; }

.ba__cta {
  margin-top: clamp(30px, 3.4vw, 44px);
  justify-content: center;
}

.ba__disc {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  word-break: keep-all;
}

/* ══════════════════════ 확대 모달 (왁싱 전용) ══════════════════════
   기존 교육 라이트박스(#lb)·모달(#modal) 과 완전히 분리된 별개 화면입니다.
   선택자·함수 이름을 전부 baz 로 두어 서로 건드리지 않습니다. */

.baz {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  opacity: 0;
  transition: opacity .34s var(--ease);
}

.baz.is-on { opacity: 1; }

.baz__scrim {
  position: absolute;
  inset: 0;
  background: rgba(43, 37, 33, .72);
  cursor: pointer;
}

.baz__box {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: 100%;
  display: grid;
  gap: 14px;
  transform: translateY(14px) scale(.985);
  transition: transform .34s var(--ease);
}

.baz.is-on .baz__box { transform: none; }

.baz__box .ba {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.baz__cap {
  text-align: center;
  font-size: 13px;
  letter-spacing: .02em;
  color: #FFF9F6;
}

.baz__x {
  position: absolute;
  top: -54px; right: 0;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(252, 249, 245, .34);
  background: transparent;
  cursor: pointer;
}

.baz__x::before,
.baz__x::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 1.5px;
  background: #FFF9F6;
}

.baz__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.baz__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .baz__x:hover { border-color: #FFF9F6; }
}

/* 모달이 열려 있는 동안 상담 버튼이 위로 뜨지 않게 합니다 */
body.baz-open .fab,
body.baz-open .cbot { display: none; }

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* ── 모바일 사례 레일 — 한 번에 한 사례만 ────────────────────────
     같은 크기가 줄줄이 이어지면 반복감이 생기고 페이지가 길어집니다.
     한 칸을 풀폭으로 크게 보여주고 ‹ › · 점으로 넘깁니다.

     scroll-snap 을 쓰지 않습니다. 쓰면 브라우저가 사진 위 가로 제스처까지
     스크롤로 가져가 divider 와 싸웁니다. transform 으로 직접 옮깁니다. */
  .ba__rail { overflow: hidden; }

  .ba__track {
    grid-template-columns: none;
    display: flex;
    gap: 0;
    transition: transform .42s var(--ease);
    will-change: transform;
  }

  .ba__case {
    flex: 0 0 100%;
    min-width: 0;
    /* 옆 사례가 삐져나오지 않게 폭을 정확히 100% 로 묶습니다 */
  }

  /* 대표만 예외 — 16:9 는 390 에서 높이가 183px 밖에 안 나옵니다.
     "대표는 모바일에서도 크게" 가 우선이라 여기서만 비율을 덮습니다.
     사례 카드의 --ar 은 폭과 무관하게 데이터 값을 그대로 씁니다. */
  .ba__hero .ba { aspect-ratio: 4 / 3; }

  /* 나란히 보기는 좌우가 아니라 위아래로 쌓습니다 */
  .ba__side { grid-template-columns: 1fr; gap: 12px; }
  .ba__grip { width: 42px; height: 42px; }
  .ba__tag { top: 10px; font-size: 10px; padding: 5px 10px; }
  .ba__tag--b { left: 10px; }
  .ba__tag--a { right: 10px; }
  .baz__x { top: auto; bottom: -56px; right: 50%; transform: translateX(50%); }
}

/* 모션을 줄이는 설정에서는 전환을 없앱니다 (base.css 전역과 같은 방침) */
@media (prefers-reduced-motion: reduce) {
  .baz,
  .baz__box,
  .ba__track { transition: none; }
}

/* ══════════════════════════ HOME · ACADEMY 네비 ══════════════════════════
   STEP 3 — '/' 통합 HOME 과 '/academy' 보조 네비.
   새 디자인 시스템을 만들지 않고 기존 .hero · .crs · .section · .wx__* 를
   그대로 쓰되, 모자란 것만 더합니다. */

/* ── Academy 보조 네비 — /academy 에서만, 본문 바깥 ────────────────
   공통 헤더가 position: fixed 라 문서 맨 위 요소는 헤더에 가려집니다.
   지금까지는 첫 섹션 .hero 의 padding-top(124px) 이 그 몫을 대신했는데,
   서브네비가 그 앞에 오면서 비켜줄 사람이 없어졌습니다.
   헤더 기본 높이(.hdr__in min-height: 84px) 만큼 내려 앉힙니다.

   붙박이(sticky)로 만들지 않습니다 — 그러면 base.css 의
   scroll-padding-top: 88px 을 함께 키워야 하는데, 그 파일은 다른 페이지도
   공유하므로 이번 범위에서 건드리지 않습니다. */
.anav {
  margin-top: 84px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ivory) 82%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
}

.anav__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.anav__label {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--sand);
  flex: none;
}

.anav__list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.anav__list::-webkit-scrollbar { display: none; }

.anav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  white-space: nowrap;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .anav__list a:hover { color: var(--rose-700); }
}

.anav__cta { flex: none; }

/* 서브네비가 헤더 몫을 이미 치렀으니 교육 히어로는 그만큼 덜 띄웁니다.
   HTML 이 아니라 CSS 로만 조정합니다 — 교육 본문은 바이트 동일 유지. */
.anav + main > .hero { padding-top: clamp(28px, 4vw, 52px); }

@media (max-width: 760px) {
  .anav__label,
  .anav__cta { display: none; }
  .anav__in { min-height: 50px; }
}

/* ── HOME HERO ────────────────────────────────────────────────────────
   모바일은 사진 → 메시지 순서입니다. DOM 도 그 순서라 모바일은 그대로 두고,
   1024 이상에서만 order 로 좌우를 바꿉니다. */
.home__hero-in { gap: clamp(22px, 3vw, 64px); }

.home__hero-copy .hero__sub { margin-top: 18px; }

/* 세로 인물 사진 — 액자가 정사각 · 4:5 로 잘려도 얼굴이 가운데 오게 (HOME · /academy 첫 화면 같은 사진) */
.home__hero-fig img,
#heroPhoto { object-position: 50% 28%; }

@media (min-width: 1024px) {
  .home__hero-fig  { order: 2; }
  .home__hero-copy { order: 1; }
}

/* 641~1023 (태블릿) — 사진을 글자 옆(오른쪽)에 둡니다. 위아래로 쌓으면 첫 화면이 사진으로 다 차서
   두 입구 카드가 밀려납니다. /academy 첫 화면은 제목이 4줄로 쪼개져 위아래 배치 그대로 둡니다. */
@media (min-width: 641px) and (max-width: 1023px) {
  .home__hero .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 40px); }
  .home__hero .home__hero-fig { order: 2; aspect-ratio: 4 / 5; max-height: none; width: 100%; margin-inline: 0; }
  .home__hero .home__hero-copy { order: 1; }
}

/* 390~640 — 두 입구가 첫 화면 안에 들어오도록 세로를 줄입니다.
   사진을 과하게 키우지 않는 것이 핵심입니다 (기본 44vh → 32vh). */
@media (max-width: 640px) {
  .home__hero {
    padding-top: 92px;
    padding-bottom: 32px;
  }
  .home__hero .hero__fig {
    max-height: 32vh;
    margin-inline: auto;
  }
  .home__hero .hero__title { margin-top: 10px; }
  .home__hero-copy .hero__sub { margin-top: 12px; }
}

/* ── 두 입구 ──────────────────────────────────────────────────────── */
.home__enter { padding-top: clamp(28px, 4vw, 64px); }

.home__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.home__card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease),
              border-color .6s var(--ease);
}

.home__card--edu { background: var(--cream); }

@media (hover: hover) and (pointer: fine) {
  .home__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--rose-200);
  }
  .home__card:hover .home__card-go::after { width: 28px; }
}

/* 카드 전체가 링크입니다. flex 로 끝까지 채워 아래쪽도 눌리게 합니다. */
.home__card-a {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 44px);
  color: inherit;
  text-decoration: none;
}

.home__card-en {
  font-family: var(--serif);
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--sand);
}

.home__card-t {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}

.home__card-d {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  word-break: keep-all;
}

.home__card-go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  min-height: 44px;
  font-size: 14px;
  color: var(--rose-700);
}

.home__card-go::after {
  content: '';
  width: 16px; height: 1px;
  background: currentColor;
  transition: width .5s var(--ease);
}

.home__enter-cta {
  margin-top: clamp(22px, 2.6vw, 34px);
  justify-content: center;
}

/* ── 신뢰 · 원장 ──────────────────────────────────────────────────── */
.home__trust { margin: 0; border: 0; padding: 0; }

.home__owner { align-items: center; }

/* 새로 만드는 링크라 44px 를 확보합니다.
   (기존 .tlink 가 31px 인 것은 STEP 3 범위 밖이라 건드리지 않습니다.) */
.home__owner-more { margin-top: 16px; }

.home__owner-more .tlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
/* .wx__trust 는 640 이하에서 이미 2열입니다 (style.css:3916). 다시 적지 않습니다. */
@media (max-width: 640px) {
  .home__cards { grid-template-columns: 1fr; }
}


/* ═══════════════════ ACADEMY Scroll Stack (STEP 3-B) ═══════════════════
   /academy 의 #curriculum 에만 적용합니다. HOME · WAXING · 전후사진 · FAQ ·
   후기 · 교육 현장은 건드리지 않습니다 — 모든 선택자를 #curriculum 으로 가둡니다.

   방식 — Sticky Course Rail + Normal Flow Course Card
     · 과정명 탭이 가로 한 줄 레일(.crsNav)에 좌→우로 하나씩 늘어납니다
     · 과정 본문 카드(.crs)는 일반 flow 라 길어도 잘리지 않고, CTA 까지 읽힙니다
   카드 전체를 sticky 로 만들지 않는 이유는 실측 때문입니다. sticky 요소는 고정되는
   순간이 가장 많이 보이는 때라 그 아래로 넘치는 부분은 영영 볼 수 없는데, 하필
   그 자리에 CTA 버튼 두 개가 있습니다 (390 에서 카드가 1,098px · 남는 높이 598px).

   레일은 #courses 의 첫째 자식이라 이 구간에서만 붙어 있다가 끝에서 스스로
   풀립니다. 보이기/숨기기 JS 가 필요 없습니다.

   아직 지나오지 않은 탭은 hidden 이라 자리를 차지하지 않습니다 — 그래야
   1개 → 2개 → 3개 → 4개로 실제로 늘어나는 것이 눈에 보입니다.                 */

#curriculum {
  /* 고정 헤더는 스크롤 중 .hdr.is-stuck .hdr__in 70px + ::after 1px 입니다.
     .anav 는 position: static 이라 스크롤하면 사라지므로 계산에 넣지 않습니다. */
  --stk-top: 70px;
  --stk-rail: 48px;  /* 레일 한 층. 탭 높이이기도 해서 44px 터치 기준을 넘깁니다 */
  --stk-lap: 20px;   /* 다음 카드가 이전 카드를 덮는 깊이 */
  --stk-cta: 36px;   /* 겹치고 난 뒤에도 CTA 아래 반드시 남는 여백 */
  --stk-r: 18px;     /* 덮는 카드 윗모서리 — 둥글수록 '얹힌' 것이 보입니다 */
  --stk-rise: 18px;  /* 카드가 올라오며 등장하는 거리 */
  --stk-pad: 88px;   /* base.css:73 의 scroll-padding-top 과 같아야 합니다 */
}

/* grid item 의 sticky 기준 영역은 자기 grid 칸이라 이동 거리가 0 입니다.
   쌓이게 하려면 한 줄 흐름이어야 합니다. style.css:733 의 grid 선언과
   1199/640 미디어쿼리는 그대로 두고 여기서 덮어씁니다. */
#curriculum .courses { display: block; }

#curriculum .crs {
  position: relative;
  z-index: calc(var(--i) + 1);   /* 덮는 쪽이 앞 — 뒤 카드가 위에 그려집니다 */
  margin-bottom: 0;

  /* 탭을 눌러 왔을 때 카드 윗머리가 레일 바로 밑에 붙도록.
     scroll-padding-top(88px) 과 scroll-margin-top 은 브라우저에서 더해지므로
     빼 줍니다 — 실측으로 확인한 값입니다. 레일이 한 층이라 네 카드가 같습니다. */
  scroll-margin-top: calc(var(--stk-top) + var(--stk-rail) - var(--stk-pad));

  /* 아래에서 올라오는 결. .is-in 은 initReveal() 이 붙입니다 — .crs 가
     관찰 대상에 직접 들어 있어(js/main.js:189) JS 를 더 쓰지 않습니다.
     opacity 는 건드리지 않습니다. 혹시 is-in 이 안 붙어도 카드가 사라지지
     않게 하려는 것입니다. */
  transform: translateY(var(--stk-rise));
  transition: transform .7s var(--ease), box-shadow .6s var(--ease),
              border-color .6s var(--ease);
}

#curriculum .crs.is-in { transform: none; }

@media (hover: hover) and (pointer: fine) {
  #curriculum .crs.is-in:hover { transform: translateY(-5px); }
}

/* 다음 카드가 이전 카드 위로 올라와 덮습니다. 덮이는 만큼 본문 아래 여백을
   미리 더해 두어 CTA 버튼은 가려지지 않습니다 — 먹히는 것은 여백뿐입니다.

   카드끼리는 바탕색이 같아서 경계가 그림자로만 읽힙니다. 그래서 위쪽 그림자를
   또렷하게 주고, 윗모서리를 크게 깎고, 윗변에 밝은 선을 한 줄 올려 '종이 한 장이
   얹힌' 것처럼 보이게 했습니다. */
#curriculum .crs + .crs {
  margin-top: calc(-1 * var(--stk-lap));
  border-top-left-radius: var(--stk-r);
  border-top-right-radius: var(--stk-r);
  box-shadow:
    0 -20px 36px -14px rgba(43, 37, 33, .34),
    0 -3px 10px -4px rgba(43, 37, 33, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

/* 사진이 카드 모서리를 비집고 나오지 않게 윗모서리를 같이 깎습니다. */
#curriculum .crs + .crs .crs__fig {
  border-top-left-radius: calc(var(--stk-r) - 1px);
}

/* 아래 여백 = 기본 + 겹치는 깊이 + CTA 안전여백.
   겹침만큼을 미리 더해 두었으므로 다음 카드가 덮는 것은 '여백'뿐이고,
   CTA 와 글자에는 닿지 않습니다. 실제로 남는 간격 = 기본 + --stk-cta.

   ⚠ 단축 padding 으로 덮어쓰면 이 값이 통째로 날아갑니다 (1200px 이상에서
      실제로 그렇게 깨졌습니다). 아래 블록에서도 반드시 longhand 로 씁니다. */
#curriculum .crs__body {
  padding-bottom: calc(clamp(24px, 2.4vw, 32px) + var(--stk-lap) + var(--stk-cta));
}

/* ── 과정 단계 레일 ─────────────────────────────────────────────────
   탭이 따로 떠 있는 메뉴가 아니라 '카드에 붙은 단계 탭'으로 보여야 합니다.
   레일 아래 1px 선이 카드 윗변처럼 깔리고, 현재 탭만 그 선을 덮으며 카드와
   같은 surface 색으로 이어집니다 — 폴더 탭과 같은 방식입니다.

   배경은 섹션과 같은 cream 입니다. 반투명이면 밑으로 지나가는 카드 글자가
   비칩니다. */
.crsNav {
  position: sticky;
  top: var(--stk-top);
  z-index: 12;                /* 카드 위 · .cbot(70) .fab(80) .hdr(90) 아래 */
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: var(--cream);
  border-bottom: 1px solid var(--beige);
}

/* 탭은 글자 너비만 차지합니다. flex: 1 로 늘이면 하나만 보일 때 가로 전체를
   채워 '누적되는' 느낌이 사라집니다. */
/* 탭 한 칸은 늘 카드 폭의 1/4 입니다. 글자 너비만큼만 차지하면 레퍼런스처럼
   카드 윗변을 가득 채우지 못하고 왼쪽에 몰려 메뉴처럼 보입니다.
   gap 3px × 3개 = 9px 을 네 칸이 나눠 뺍니다 (25% - 2.25px) → 합이 정확히 100%. */
.crsNav__t {
  flex: 0 0 calc(25% - 2.25px);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--stk-rail);
  margin-bottom: -1px;        /* 레일 밑선을 덮습니다 */
  padding: 0 6px;
  background: var(--ivory-deep);
  border: 1px solid var(--beige);
  border-bottom: 1px solid var(--beige);
  border-radius: 12px 12px 0 0;
  font-family: var(--serif);
  /* 390 에서 한 칸이 85.6px 입니다. 가장 긴 PROFESSIONAL 이 9.5px/.06em 에서
     74px — 좌우 5.8px 여유로 잘리지 않습니다. 폭이 넓어지면 아래에서 키웁니다. */
  font-size: 9.5px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
  text-decoration: none;
  transition: color .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease);
}

/* 지나오지 않은 탭은 hidden 이라 자리도 차지하지 않고 눌리지도, 포커스가
   가지도 않습니다. js/main.js 의 initCourseNav() 가 켜고 끕니다. */
.crsNav__t[hidden] { display: none; }

/* 현재 과정 — 카드와 같은 surface 로 이어지고 rose 로 가볍게 짚어 줍니다. */
.crsNav__t.is-cur {
  background: var(--surface);
  border-color: var(--rose-200);
  border-bottom-color: var(--surface);   /* 밑선을 끊어 카드와 한 면이 됩니다 */
  color: var(--rose-700);
  box-shadow: 0 -2px 6px -3px rgba(43, 37, 33, .14);
}

@media (hover: hover) and (pointer: fine) {
  .crsNav__t:hover { color: var(--rose-700); }
}

.crsNav__t:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: -2px;
}

/* 레일 바로 아래 카드는 윗머리를 각지게 해 탭과 한 덩어리로 보이게 합니다. */
#curriculum .crs:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── 768 이상 — 가로 2단 editorial ──────────────────────────────────
   .crs 의 자식이 figure + div 딱 둘이라 마크업을 건드리지 않고 2단이 됩니다.
   세로로 쌓으면 1440 에서 카드 한 장이 2,207px 가 되어 읽기 어려워집니다. */
@media (min-width: 768px) {
  #curriculum { --stk-lap: 32px; --stk-r: 20px; }

  /* 한 칸이 173px 로 넓어져 글자를 키울 수 있습니다. */
  .crsNav__t { font-size: 12px; letter-spacing: .12em; }

  #curriculum .crs {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  }

  /* 사진은 본문 높이에 맞춰 늘어납니다. 4/5 고정비를 쓰면 열이 어긋납니다. */
  #curriculum .crs__fig {
    aspect-ratio: auto;
    height: 100%;
  }

  /* 넓어진 카드에서는 버튼을 나란히 둡니다 (좁을 때는 기존대로 세로). */
  #curriculum .crs__btns {
    grid-auto-flow: column;
    justify-content: start;
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  #curriculum { --stk-rail: 52px; --stk-lap: 48px; --stk-r: 24px; }
  #curriculum .crs { grid-template-columns: minmax(0, 42%) minmax(0, 58%); }
  .crsNav__t {
    font-size: 13.5px;
    letter-spacing: .16em;
    border-radius: 14px 14px 0 0;
  }
}

/* style.css:955-1007 의 .courses .crs__* 미세조정 19줄은 290px 폭 카드에
   맞춘 값입니다. 1248px 폭 2단 카드에서는 지나치게 빡빡해서 여기서만
   덮어씁니다 — 원본은 지우지 않습니다 (다른 조건에서 되살릴 수 있게). */
@media (min-width: 1200px) {
  /* 단축 padding 을 쓰면 위 #curriculum .crs__body 의 padding-bottom 이
     함께 초기화되어 CTA 가 다음 카드에 덮였습니다. longhand 로 나눠 씁니다. */
  #curriculum .crs__body {
    padding-top: clamp(30px, 2.8vw, 46px);
    padding-right: clamp(30px, 2.8vw, 46px);
    padding-left: clamp(30px, 2.8vw, 46px);
    padding-bottom: calc(clamp(30px, 2.8vw, 46px) + var(--stk-lap) + var(--stk-cta));
  }
  #curriculum .crs__en   { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: .12em; }
  #curriculum .crs__ko   { margin-top: 9px; }
  #curriculum .crs__hook { margin-top: 20px; padding-top: 18px; line-height: 1.75; }
  #curriculum .crs__sum  { margin-top: 18px; line-height: 1.85; }
  #curriculum .chips     { margin-top: 18px; gap: 7px; }
  #curriculum .crs__rec  { margin-top: 22px; padding-top: 18px; }
  #curriculum .crs__target { gap: 8px; }
  #curriculum .crs__target li { line-height: 1.8; }
  #curriculum .crs__btns { padding-top: 28px; }
}

/* ── 모션을 줄이는 설정 ─────────────────────────────────────────────
   base.css:400 의 전역 블록은 transition·animation 만 끕니다. position: sticky
   는 꺼지지 않으므로 직접 해제합니다. 기존 sticky 3곳(style.css:652 · 3619 ·
   3904)이 전부 쓰는 방식 그대로입니다. 끄더라도 내용·순서·링크는 그대로 남고
   과정명 띠는 카드 제목 역할을 계속합니다. */
@media (prefers-reduced-motion: reduce) {
  .crsNav { position: static; }

  #curriculum .crs {
    scroll-margin-top: var(--stk-pad);
    transform: none;            /* 올라오는 결을 끕니다 */
  }

  /* 겹침도 풀고 평범한 간격으로 둡니다. */
  #curriculum .crs + .crs { margin-top: 24px; box-shadow: var(--shadow-sm); }

  @media (hover: hover) and (pointer: fine) {
    #curriculum .crs.is-in:hover { transform: none; }
  }
}

/* ══════════════════════ 전후사진 카테고리 탭 ══════════════════════
   /waxing REAL BEFORE & AFTER — 실제 노출 사례가 FACE · BODY 둘 다 있을 때만
   빌드가 넣습니다. 기존 .ba__nav 버튼과 같은 재료(surface · beige · rose)를 씁니다.
   패널마다 기존 사례 레일이 그대로 들어 있으므로 레일 규칙은 건드리지 않습니다. */
.ba__tabs {
  margin-top: clamp(28px, 3.2vw, 44px);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ba__tab {
  min-width: 96px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease),
              background .4s var(--ease);
}

.ba__tab[aria-pressed="true"] {
  border-color: var(--rose-700);
  background: var(--rose-700);
  color: var(--surface);
}

.ba__tab:focus-visible {
  outline: 2px solid var(--rose-300);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .ba__tab:hover { border-color: var(--rose-300); color: var(--rose-700); }
  .ba__tab[aria-pressed="true"]:hover { color: var(--surface); }
}

.ba__panel[hidden] { display: none; }

.ba__panel > .ba__cases { margin-top: clamp(22px, 2.6vw, 34px); }

/* 390 — 세 탭을 한 줄에 같은 폭으로 */
@media (max-width: 640px) {
  .ba__tabs { gap: 6px; }
  .ba__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    letter-spacing: .14em;
  }
}

/* ═══════════════════ WAXING 부위 Scroll Stack ═══════════════════
   /waxing 「어디를 받으실지부터」 전용. /academy #curriculum 의 레일 + 누적 카드와
   같은 시스템(같은 토큰 이름 · 같은 탭 모양 · 같은 덮기 방식)으로 맞추되,
   선택자는 전부 .wxStk / .wxNav 로 가둬 교육 쪽 규칙과 섞이지 않게 합니다.

   카드 내용(사진 자리 · 제목 · 설명 · 자세히 보기)과 카드 전체 링크는 그대로이고
   2×2 그리드를 세로 누적으로 바꾸는 레이아웃 변경만 합니다. */

.wxStk {
  --stk-top: 70px;   /* 스크롤 중 고정 헤더 높이 (.hdr.is-stuck .hdr__in) */
  --stk-rail: 48px;  /* 탭 높이 — 44px 터치 기준을 넘깁니다 */
  --stk-lap: 20px;   /* 다음 카드가 이전 카드를 덮는 깊이 */
  --stk-cta: 28px;   /* 덮이고 난 뒤에도 '자세히 보기' 아래 남는 여백 */
  --stk-r: 18px;     /* 덮는 카드 윗모서리 */
  --stk-pad: 88px;   /* base.css:73 scroll-padding-top 과 같아야 합니다 */
  margin-top: clamp(36px, 4.2vw, 58px);
}

/* 2×2 그리드 → 한 줄 흐름. grid 칸 안에서는 sticky 이동 거리가 0 이라
   레일이 붙어 있으려면 block 이어야 합니다. 기존 .wx__menu 규칙은 두고 덮어씁니다. */
.wxStk .wx__menu { display: block; margin-top: 0; }

.wxStk .wx__item {
  position: relative;
  z-index: calc(var(--i) + 1);   /* 뒤 카드가 위에 그려집니다 */
  /* 탭을 눌렀을 때 카드 윗머리가 레일 바로 밑에 닿게 (scroll-padding 과 더해지므로 뺍니다) */
  scroll-margin-top: calc(var(--stk-top) + var(--stk-rail) - var(--stk-pad));
}

/* 레일 바로 밑 첫 카드는 윗모서리를 각지게 — 탭과 한 덩어리로 보입니다. */
.wxStk .wx__item:first-child { border-top-left-radius: 0; border-top-right-radius: 0; }

/* 다음 카드가 이전 카드 아래쪽을 덮으며 올라옵니다 (/academy 와 같은 그림자). */
.wxStk .wx__item + .wx__item {
  margin-top: calc(-1 * var(--stk-lap));
  border-top-left-radius: var(--stk-r);
  border-top-right-radius: var(--stk-r);
  box-shadow:
    0 -20px 36px -14px rgba(43, 37, 33, .34),
    0 -3px 10px -4px rgba(43, 37, 33, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

/* 덮이는 깊이만큼 아래 여백을 미리 더해 '자세히 보기' 는 가려지지 않습니다.
   단축 padding 을 쓰면 이 값이 초기화되므로 longhand 로만 씁니다. */
.wxStk .wx__item-b {
  padding-bottom: calc(clamp(24px, 2.6vw, 34px) + var(--stk-lap) + var(--stk-cta));
}

@media (hover: hover) and (pointer: fine) {
  .wxStk .wx__item:hover { transform: translateY(-5px); }
}

/* ── 부위 탭 레일 — .crsNav 와 같은 폴더 탭 ───────────────────────── */
.wxNav {
  position: sticky;
  top: var(--stk-top);
  z-index: 12;                /* 카드 위 · .cbot(70) .fab(80) .hdr(90) 아래 */
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: var(--cream);   /* 섹션 바탕과 같은 불투명색 — 밑으로 지나가는 카드가 비치지 않게 */
  border-bottom: 1px solid var(--beige);
}

/* 한 칸은 늘 레일 폭의 1/4 (gap 3px × 3 을 네 칸이 나눠 뺍니다). */
.wxNav__t {
  flex: 0 0 calc(25% - 2.25px);
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--stk-rail);
  margin-bottom: -1px;
  padding: 0 6px;
  background: var(--ivory-deep);
  border: 1px solid var(--beige);
  border-radius: 12px 12px 0 0;
  font-family: var(--serif);
  font-size: 9.5px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
  text-decoration: none;
  transition: color .4s var(--ease), background .4s var(--ease),
              border-color .4s var(--ease);
}

/* 지나오지 않은 탭은 자리도 차지하지 않습니다 — initWxNav() 가 켜고 끕니다. */
.wxNav__t[hidden] { display: none; }

.wxNav__t.is-cur {
  background: var(--surface);
  border-color: var(--rose-200);
  border-bottom-color: var(--surface);   /* 밑선을 끊어 카드와 한 면이 됩니다 */
  color: var(--rose-700);
  box-shadow: 0 -2px 6px -3px rgba(43, 37, 33, .14);
}

@media (hover: hover) and (pointer: fine) {
  .wxNav__t:hover { color: var(--rose-700); }
}

.wxNav__t:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: -2px;
}

/* ── 768 이상 — 사진 왼쪽 · 글 오른쪽 ────────────────────────────────
   사진은 4:3 을 지키되 글이 더 길면 그 높이까지 늘어납니다.
   justify-self 를 함께 stretch 로 두어야 폭이 칸에 묶입니다 — 안 그러면
   늘어난 높이 × 4:3 으로 폭이 다시 계산되어 글 칸 밑으로 삐져나갑니다. */
@media (min-width: 768px) {
  .wxStk { --stk-lap: 32px; --stk-r: 20px; }

  .wxNav__t { font-size: 12px; letter-spacing: .12em; }

  .wxStk .wx__item-a {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  }

  .wxStk .wx__item .wx__shot {
    align-self: stretch;
    justify-self: stretch;
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
  }
}

@media (min-width: 1024px) {
  .wxStk { --stk-rail: 52px; --stk-lap: 48px; --stk-r: 24px; }
  .wxStk .wx__item-a { grid-template-columns: minmax(0, 42%) minmax(0, 58%); }
  .wxNav__t {
    font-size: 13.5px;
    letter-spacing: .16em;
    border-radius: 14px 14px 0 0;
  }
}

/* 모션을 줄이는 설정 — sticky 와 겹침을 풀고 평범한 세로 목록으로 둡니다. */
@media (prefers-reduced-motion: reduce) {
  .wxNav { position: static; }
  .wxStk .wx__item { scroll-margin-top: var(--stk-pad); }
  .wxStk .wx__item + .wx__item { margin-top: 24px; box-shadow: var(--shadow-sm); }
  @media (hover: hover) and (pointer: fine) {
    .wxStk .wx__item:hover { transform: none; }
  }
}

/* ══════════════════════ 전후사진 부위별 갤러리 ══════════════════════
   /waxing REAL BEFORE & AFTER — 1차 탭(전체 · FACE · BODY)만 두고, 고른 카테고리의
   부위를 한 화면에 모두 보여 줍니다. 위계: 카테고리(FACE · BODY) → 부위명 → 비교 카드.
   부위 블록 하나가 '부위명 → 전후사진' 작은 에디토리얼 단위입니다. */

.ba__group { margin-top: clamp(30px, 3.2vw, 46px); }
.ba__group + .ba__group { margin-top: clamp(56px, 6vw, 88px); }

/* 카테고리 — 세리프 대문자 + 가는 선이 오른쪽 끝까지 */
.ba__group-h {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--rose-700);
}

.ba__group-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.ba__areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  margin-top: clamp(20px, 2.2vw, 28px);
}

/* 부위명 — 카드 바로 위, 카테고리보다 한 단계 작게 */
.ba__area-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
}

/* '· 남성' — 상자 없이 한 톤 낮게 */
.ba__area-tag {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
}

.ba__area .ba__cases { margin-top: 12px; }
.ba__area .ba__rail { margin-top: 0; }

/* 부위 블록 안의 한 장은 칸을 꽉 채웁니다 (블록 자체가 이미 칸 폭) */
.ba__area .ba__track--one { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 641px) {
  .ba__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 3.4vw, 48px) clamp(20px, 2.2vw, 30px);
  }

  /* 대표 부위(FACE 얼굴전체) — 2열의 왼쪽 칸이 아니라 한 줄 가운데에 넓게.
     사진 비율(aspectRatio)은 그대로이고 폭만 넓힙니다. */
  .ba__area--feature {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 760px);
  }

  /* 줄에 홀로 남은 부위(예: BODY 의 등)는 왼쪽에 두지 않고 가운데 */
  .ba__area--solo {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(20px, 2.2vw, 30px)) / 2);
  }

  /* 여러 쌍 부위 안에서 홀수 마지막 사례도 가운데로 (/waxing 허브 안에서만) */
  .ba__area .ba__track > .ba__case:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(20px, 2.2vw, 30px)) / 2);
  }
}

/* 자리 표시 칸의 '전후사진 준비 중' — 가운데 선(z 4)이 글자를 가르지 않게 위로.
   실제 사진이 든 비교기에는 이 표시가 없으므로 레이어 구조가 그대로입니다. */
.ba--empty .ba__soon { z-index: 5; }

/* 사례가 정확히 한 장인 묶음 — 768 이상에서 2열 칸 대신 가운데 한 장 (390 은 풀폭 그대로) */
@media (min-width: 641px) {
  .ba__track--one {
    grid-template-columns: minmax(0, 600px);
    justify-content: center;
  }
}

/* 자리 표시만 든 묶음 — 작은 제목을 빼므로 레일 위 간격도 같이 줄입니다 */
.ba__cases--ph .ba__rail { margin-top: 0; }


/* ══════════════════════ 가격 안내 (/waxing #price) ══════════════════════
   위 「어디를 받으실지부터」 시술 카드와 같은 언어 — 4등분 폴더 탭 + 탭과 이어진 큰 카드.
   (.wxNav__t · .wx__item 와 같은 색 · 선 · 둥근 모서리. 선택자는 .wxp 로만 가둡니다.)
   카드 안은 살롱 메뉴판 — 줄 목록, 아주 옅은 점선, 엑셀식 칸 테두리 없음.
   데이터는 site.config.mjs 의 PRICE_MENU (전후사진과 무관). */

.wxp {
  --wxp-c: clamp(64px, 17vw, 88px);      /* 여성 · 남성 가격 칸 */
  --wxp-gap: clamp(40px, 5vw, 72px);     /* 1024 이상 두 열 사이 */
  --wxp-rail: 48px;                      /* 탭 높이 — 44px 터치 기준 이상 */
  --wxp-r: 18px;                         /* 카드 아래 모서리 */
}

.wxp__box { margin-top: clamp(28px, 3vw, 40px); }

/* ── 탭 — 시술 카드 레일(.wxNav)과 같은 폴더 탭, 늘 4등분 ── */
.wxp__tabs {
  position: relative;
  z-index: 1;                 /* 선택 탭의 밑변이 카드 윗선을 덮어 한 면이 됩니다 */
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.wxp__tab {
  flex: 0 0 calc(25% - 2.25px);   /* gap 3px × 3 을 네 칸이 나눠 뺍니다 */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wxp-rail);
  margin-bottom: -1px;
  padding: 0 4px;
  background: var(--ivory-deep);
  border: 1px solid var(--beige);
  border-radius: 12px 12px 0 0;
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  /* 선택 모양(바탕 · 테두리)은 전환 없이 바로 — 패널과 같은 순간에 바뀝니다.
     전환을 두면 새 패널이 열린 뒤에도 이전 탭이 잠시 선택된 것처럼 남아 보입니다. */
  transition: color .2s var(--ease-soft);
}

.wxp__tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--beige);
  border-bottom-color: var(--surface);   /* 밑선을 끊어 아래 카드와 한 면이 됩니다 */
  color: var(--rose-700);
  box-shadow: 0 -2px 6px -3px rgba(43, 37, 33, .12);
}

@media (hover: hover) and (pointer: fine) {
  .wxp__tab:hover { color: var(--rose-700); }
}

.wxp__tab:focus-visible { outline: 2px solid var(--rose-500); outline-offset: -2px; }

/* ── 본문 카드 — 선택 탭 하나에 대응하는 한 장 ── */
.wxp__card {
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 0 0 var(--wxp-r) var(--wxp-r);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 36px);
}

.wxp__panel:focus-visible { outline: 2px solid var(--rose-200); outline-offset: 8px; border-radius: 4px; }

/* 묶음 제목 — FACE WAXING · DESIGN */
.wxp__group-h {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--rose-700);
}

.wxp__group + .wxp__group { margin-top: clamp(40px, 5vw, 52px); }

/* 열 머리 — 여성 · 남성은 목록마다 한 번만 */
.wxp__head,
.wxp__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wxp-c) var(--wxp-c);
  column-gap: clamp(8px, 2vw, 20px);
}

.wxp__head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
  text-align: right;
}

/* 단위 — 표 위 오른쪽, 본문보다 작고 연하게 (표마다 한 번) */
.wxp__unit {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--faint);
  text-align: right;
}

.wxp__row {
  align-items: baseline;
  min-height: 52px;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--line-soft);
}

.wxp__list > .wxp__row:last-child { border-bottom-color: transparent; }

.wxp__n { display: block; min-width: 0; }

/* 이름 뒤 아주 옅은 점선 — 숫자까지 눈을 이어 줍니다 */
.wxp__t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ink);
}

.wxp__t::after {
  content: '';
  flex: 1;
  min-width: 10px;
  border-bottom: 1px dotted rgba(43, 37, 33, .16);
  transform: translateY(-4px);
}

.wxp__sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.wxp__p {
  text-align: right;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 19px;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
  color: var(--ink);
}

.wxp__p--none { color: var(--faint); }

/* 1024 미만에서는 BODY 의 두 번째 머리줄을 숨깁니다 (한 열) */
.wxp__head--2 { display: none; }

.wxp__note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* 전후사진으로 가는 작은 링크 — 목록과 가는 선으로 나눕니다 */
.wxp__more {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: 6px;
}

.wxp__ba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--rose-700);
  text-decoration: underline;
  text-decoration-color: var(--rose-200);
  text-underline-offset: 6px;
  transition: text-decoration-color .2s var(--ease-soft);
}

.wxp__ba:hover { text-decoration-color: var(--rose-700); }

/* 공통 안내 — 카드 맨 아래, 가는 선 위에 작게 */
.wxp__disc {
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

@media (min-width: 768px) {
  .wxp { --wxp-rail: 50px; --wxp-r: 20px; }
  .wxp__tab { font-size: 12px; letter-spacing: .12em; }
}

@media (min-width: 1024px) {
  .wxp { --wxp-rail: 52px; --wxp-r: 24px; }
  .wxp__tab {
    font-size: 13.5px;
    letter-spacing: .16em;
    border-radius: 14px 14px 0 0;
  }

  /* FACE — 왼쪽 FACE WAXING · 오른쪽 DESIGN */
  .wxp__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--wxp-gap);
    align-items: start;
  }
  .wxp__cols .wxp__group + .wxp__group { margin-top: 0; }

  /* BODY — 관련 부위끼리 좌 | 우 (데이터의 rows 짝 그대로) */
  .wxp__heads,
  .wxp__list--pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--wxp-gap);
  }
  .wxp__head--2 { display: grid; }

  /* 짝 목록은 두 열의 마지막 줄 모두 밑선 없이 */
  .wxp__list--pairs > .wxp__row:nth-last-child(2) { border-bottom-color: transparent; }
}

/* ── 짧은 카테고리(브라질리언 · 임산부) — 표 대신 한 장의 콘텐츠 카드 ──
   위 시술 카드처럼 '설명 | 핵심 정보' 2단. 높이는 내용만큼이고 FACE · BODY 와 맞추지 않습니다.
   390 은 설명 → 가격(또는 상담) → 보조 안내 순으로 쌓습니다. */
.wxp__feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "a" "b" "n";
  row-gap: 26px;
}

.wxp__feat-a { grid-area: a; }
.wxp__feat-b { grid-area: b; }
.wxp__feat-n { grid-area: n; margin-top: 0; }

.wxp__kick {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: .26em;
  color: var(--rose-700);
}

.wxp__feat-t {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
}

/* 임산부 — 상담이 먼저라는 핵심 한 줄 */
.wxp__feat-m {
  margin-top: 14px;
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.7;
  color: var(--ink);
}

.wxp__feat-d {
  margin-top: 12px;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* 가격 — 여성 · 남성 두 줄. 숫자는 표보다 크게, 그러나 강조색 · 배지 없이 */
.wxp__big { border-top: 1px solid var(--line); }

.wxp__big-r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--line-soft);
}

.wxp__big-k {
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--muted);
}

.wxp__big-p {
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

.wxp__big-u {
  margin-left: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

/* 임산부 오른쪽 — 상담 버튼 → 자세히 보기 */
.wxp__feat--msg .wxp__cta { margin-top: 0; }

.wxp__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--rose-700);
  text-decoration: underline;
  text-decoration-color: var(--rose-200);
  text-underline-offset: 6px;
}

.wxp__link:hover { text-decoration-color: var(--rose-700); }

@media (max-width: 640px) {
  /* 카드 안 버튼은 한 줄 꽉 채우지 않고 내용 폭으로 */
  .wxp__feat .wx__cta .btn { width: auto; }
}

/* 768 이상 — 왼쪽 설명 44% | 오른쪽 가격(또는 상담) 56%, 가운데 가는 세로선 */
@media (min-width: 768px) {
  .wxp__feat {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-areas: "a b" "n b";
    grid-template-rows: auto 1fr;
    column-gap: clamp(36px, 5vw, 72px);
    row-gap: 18px;
  }

  .wxp__feat-b {
    align-self: start;
    padding-left: clamp(36px, 5vw, 72px);
    border-left: 1px solid var(--line-soft);
  }

  .wxp__feat-n { align-self: end; }

  /* 임산부는 오른쪽이 버튼뿐이라 세로 가운데에 */
  .wxp__feat--msg { grid-template-areas: "a b"; grid-template-rows: auto; }
  .wxp__feat--msg .wxp__feat-b { align-self: center; }
}

/* ── 390~640 — 짧은 카드(브라질리언 · 임산부)는 모바일에서 압축 ──
   긴 소개 문단은 데스크톱 2단에서만 보이고, 모바일은 제목 → 핵심(가격 또는 상담) → 보조 안내만.
   카드 여백은 FACE · BODY 와 함께 쓰므로 이 두 패널이 열려 있을 때만 줄입니다. */
@media (max-width: 640px) {
  .wxp__feat-d { display: none; }

  .wxp__feat { row-gap: 14px; }
  .wxp__feat-t { margin-top: 6px; font-size: 22px; }
  .wxp__feat-m { margin-top: 10px; font-size: 15.5px; line-height: 1.65; }

  .wxp__big-r { padding: 10px 0 9px; }
  .wxp__big-p { font-size: 27px; }

  .wxp__feat--msg .wxp__link { margin-top: 2px; }

  .wxp__card:has(> .wxp__panel--brazilian:not([hidden])),
  .wxp__card:has(> .wxp__panel--pregnancy:not([hidden])) {
    padding-top: 22px;
    padding-bottom: 18px;
  }

  .wxp__card:has(> .wxp__panel--brazilian:not([hidden])) .wxp__disc,
  .wxp__card:has(> .wxp__panel--pregnancy:not([hidden])) .wxp__disc {
    margin-top: 16px;
    padding-top: 12px;
  }
}

/* ── 부위 블록의 여러 사례 — 모든 폭에서 한 번에 한 장 (/waxing REAL BEFORE & AFTER) ──
   빌드가 사례 2쌍 이상인 부위 묶음에 data-ba-rail-wide 를 붙이고, 기존 setupRail 이
   모바일과 같은 레일(‹ › · 점)로 움직입니다. 칸 안에서 세로로 다 펼치면 옆 칸 아래가 비고,
   칸 안을 다시 2열로 나누면 사진이 너무 작아지기 때문입니다.
   사진 위 가로 드래그는 비교 슬라이더 몫이고, 사례 넘기기는 버튼 · 점이 맡습니다.
   트랙은 미끄러뜨리지 않고 바로 자리를 옮깁니다 — 미끄러지는 동안에는 손가락 아래가 아직
   이전 사례(inert)라 새 사례의 첫 드래그가 빠졌습니다. 새 사례는 제자리에서 옅게 떠오릅니다
   (opacity 는 누르는 위치 판정에 영향이 없어 처음부터 바로 끌 수 있습니다). */
.ba__cases[data-ba-rail-wide] .ba__rail { overflow: hidden; }

.ba__cases[data-ba-rail-wide] .ba__track {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  transition: none;
}

.ba__cases[data-ba-rail-wide] .ba__track > .ba__case { transition: opacity .32s var(--ease); }
.ba__cases[data-ba-rail-wide] .ba__track > .ba__case[aria-hidden="true"] { opacity: 0; }

.ba__cases[data-ba-rail-wide] .ba__track > .ba__case,
.ba__cases[data-ba-rail-wide] .ba__track > .ba__case:last-child:nth-child(odd):not(:only-child) {
  flex: 0 0 100%;
  min-width: 0;
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ba__cases[data-ba-rail-wide] .ba__track > .ba__case { transition: none; }
}

/* ── /waxing 보조 네비(.anav, waxing-nav.html) 아래 히어로 ──
   /academy 와 같은 방식 — 보조 네비가 고정 헤더 몫(84px)을 이미 치렀으니 히어로를 그만큼 덜 띄웁니다. */
.anav + main > .wx__hero { padding-top: clamp(28px, 4vw, 52px); }

/* ── /waxing 히어로 — 버튼은 언제나 두 개 ──
   네이버 예약이 실제로 보이면(주소가 생겨 hidden 이 풀리면) 세 번째 [왁싱 시술 보기] 를 숨깁니다.
   예약 없음: 카카오(채움) + 시술 보기(테두리) / 예약 있음: 네이버(채움) + 카카오(테두리) */
.wx__cta > [data-contact="naverBooking"]:not([hidden]) ~ [data-cta-fallback] { display: none; }

/* ── /waxing 콘텐츠 등장 모션 — PRICE 탭 전환 · 시술 Stack 카드 공통 ──
   값은 사이트 공통 등장 효과(base.css [data-reveal]: 아래 26px · 1s · --ease)와 같고,
   두 곳이 아래 변수 하나를 함께 씁니다. 카드 · 카드 묶음의 위치와 크기는 움직이지 않고
   안쪽 콘텐츠만 움직입니다 — Stack 의 sticky · 겹침 · 탭 전환 계산과 무관합니다. */
:root {
  --fade-up-y: 26px;
  --fade-up-dur: 1s;
  /* PRICE 탭 전환 · 미리보기 — hover 로 자주 바뀌므로 짧게 */
  --fade-quick-y: 10px;
  --fade-quick-dur: .4s;
}

@keyframes wxFadeUpQuick {
  from { opacity: 0; transform: translateY(var(--fade-quick-y)); }
  to   { opacity: 1; transform: none; }
}

@keyframes wxFadeUp {
  from { opacity: 0; transform: translateY(var(--fade-up-y)); }
  to   { opacity: 1; transform: none; }
}

/* PRICE — 탭을 바꾸거나 미리볼 때마다 (hidden 이 풀리면 처음부터 다시 재생). 짧은 값 */
.wxp__panel:not([hidden]) { animation: wxFadeUpQuick var(--fade-quick-dur) var(--ease) both; }

/* 미리보기 중인 탭 — 고정된 탭(흰 바탕 · 카드와 연결)보다 약하게: 글자 로즈 + 바탕 반 톤 밝게 */
.wxp__tab.is-preview:not([aria-selected="true"]) {
  color: var(--rose-700);
  background: color-mix(in srgb, var(--ivory-deep) 50%, var(--surface));
}

/* Stack — 카드 자체는 제자리. 예전 카드 전체 fade-up(이동)은 끄고,
   카드가 처음 화면에 들어와 is-in 이 붙을 때 안쪽 글만 한 번 등장합니다(is-in 은 다시 빠지지 않음).
   카드 사진(.wx__shot)은 원래부터 자기 data-reveal 로 같은 등장 효과를 가집니다. */
.wxStk .wx__item[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.wxStk .wx__item[data-reveal]:not(.is-in) .wx__item-b > * { opacity: 0; }
.wxStk .wx__item.is-in .wx__item-b > * { animation: wxFadeUp var(--fade-up-dur) var(--ease) both; }
.wxStk .wx__item.is-in .wx__item-b > :nth-child(2) { animation-delay: .08s; }   /* .wx__stagger 와 같은 간격 */
.wxStk .wx__item.is-in .wx__item-b > :nth-child(3) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .wxp__panel:not([hidden]),
  .wxStk .wx__item.is-in .wx__item-b > * { animation: none; }
  .wxStk .wx__item[data-reveal]:not(.is-in) .wx__item-b > * { opacity: 1; }
}

/* ── PRICE 임산부 카드 — 가격(한 가지) + 진행 방식 + 상담 우선 CTA ──
   왼쪽 kicker · 제목 · 80,000원 · 핵심 문구 / 오른쪽 안내 · 진행 방식 · CTA (768 이상).
   390 은 세로로 쌓고 긴 안내 문단 · aside 는 숨겨 높이를 줄입니다. */
.wxp__solo { margin-top: 14px; }
.wxp__solo .wxp__big-p { font-size: clamp(30px, 3vw, 40px); }
.wxp__feat--care .wxp__feat-m { margin-top: 10px; }
.wxp__feat--care .wxp__feat-b > :first-child { margin-top: 0; }

.wxp__pts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.wxp__pts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wxp__pts li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rose-300);
}

.wxp__aside { margin-top: 10px; font-size: 13px; color: var(--muted); }
.wxp__feat--care .wxp__cta { margin-top: 20px; }

@media (max-width: 640px) {
  .wxp__aside { display: none; }
  .wxp__solo { margin-top: 10px; }
  .wxp__solo .wxp__big-p { font-size: 30px; }
  .wxp__pts { gap: 4px 12px; font-size: 13px; }
  .wxp__feat--care .wxp__cta { margin-top: 14px; }
}

/* 임산부 진행 방식 — 768 이상은 긴 문구, 390 은 짧은 문구를 가운뎃점으로 이어 한 줄 */
.wxp__pt--s { display: none; }

@media (max-width: 640px) {
  .wxp__feat--care { grid-template-areas: "a" "b"; }   /* 빈 보조 줄 간격 없애기 */
  .wxp__pts .wxp__pt { display: none; }
  .wxp__pts .wxp__pt--s { display: inline; }
  .wxp__pts { gap: 0; }
  .wxp__pts li { gap: 0; }
  .wxp__pts li::before { content: none; }
  .wxp__pts li + li::before {
    content: '·';
    width: auto;
    height: auto;
    margin: 0 7px;
    background: none;
    color: var(--sand);
  }
}

/* ── /waxing 최종 디자인 QA ──
   소개 문단 — 가운데 정렬이라 좁은 폭에서 마지막 한두 단어만 다음 줄에 홀로 남았습니다.
   줄 길이를 고르게 나눕니다 (한 줄에 들어가는 폭에서는 변화 없음). */
.wx__intro .h-lead { text-wrap: balance; }

/* 아직 사진이 없는 부위의 자리 표시만 낮춥니다 — 한 열에 같은 줄무늬 상자 16개가 4:3 으로 이어져
   전후사진 구간이 지나치게 길었습니다. 실제 사진이 들어간 사례의 비율(aspectRatio)은 그대로입니다.
   '준비 중' 표시는 가운데 손잡이 바로 위(원래와 같은 5px 간격)에 둡니다.
   360 미만은 칸이 너무 작아 표시끼리 겹치므로 원래 비율 그대로 둡니다. */
@media (min-width: 360px) and (max-width: 640px) {
  .ba__cases--ph .ba--empty { aspect-ratio: 16 / 9; }
  .ba__cases--ph .ba--empty .ba__soon { top: calc(50% - 61px); }
}

/* ── /waxing 모바일 첫 화면 — 히어로 버튼 두 개가 첫 화면 안에 들어오게 ──
   허브(/waxing) 히어로만, 640 이하만. 한 곳을 크게 자르지 않고 간격 여러 곳을 조금씩 줄입니다.
   제목 크기 · 본문 · 버튼 높이(62px) · 버튼 글자는 그대로입니다. 상세 페이지(--sub)는 대상이 아닙니다. */
@media (max-width: 640px) {
  .anav + main > .wx__hero:not(.wx__hero--sub) { padding-top: 14px; }        /* 28 */
  .wx__hero:not(.wx__hero--sub) .wx__hero-in { gap: 20px; }                  /* 사진 → 글 34 */
  .wx__hero:not(.wx__hero--sub) .eyebrow { margin-bottom: 12px; }            /* 20 */
  .wx__hero:not(.wx__hero--sub) .wx__hero-t { margin-top: 12px; }            /* 18 */
  .wx__hero:not(.wx__hero--sub) .wx__hero-s { margin-top: 16px; line-height: 1.75; }   /* 30 · 1.9 */
  .wx__hero:not(.wx__hero--sub) .wx__hero-copy .rule { margin: 16px 0; }     /* 28 */
  .wx__hero:not(.wx__hero--sub) .wx__hero-m { line-height: 1.75; }           /* 1.95 */
  .wx__hero:not(.wx__hero--sub) .wx__cta { margin-top: 20px; gap: 10px; }    /* 34 · 11 */
}

/* 380 미만(375 · 360)은 간격을 더 줄이면 답답해져서, 사진만 조금 낮춥니다 (16:10 → 16:9, 약 20px) */
@media (max-width: 379px) {
  .wx__hero:not(.wx__hero--sub) .wx__hero-fig { aspect-ratio: 16 / 9; }
}

/* 왁싱 페이지 히어로가 보이는 동안 상담 챗봇을 비켜 둡니다 (initChrome 이 .is-away 를 붙임).
   대화창이 열려 있으면 숨기지 않습니다. */
.cbot { transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.cbot.is-away:not(.is-open) { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cbot { transition: none; } }
/* 모바일 왁싱 페이지는 하단 '왁싱 상담'(.fab, 860px 이하에서만 보임) 하나만 띄웁니다.
   닫힌 챗봇 버튼까지 뜨면 카드 · 전후사진 · 리뷰를 가립니다. HOME · 교육 · 861px 이상은 그대로입니다. */
@media (max-width: 860px) {
  body[data-space="waxing"] .cbot:not(.is-open) { display: none; }
}

/* ── 모바일 4탭 글자 폭 — 시술 Stack 탭(.wxNav__t) · PRICE 탭(.wxp__tab) ──
   네 칸이 각각 25% 라 360 에서 한 칸 안쪽 폭이 약 66px 입니다. Cormorant 가 늦게 오거나 막혀
   대체 서체(안드로이드 기본 serif 등)로 그려지면 PREGNANCY · BRAZILIAN 이 칸을 넘었습니다.
   가장 넓은 대체 서체에서도 들어가도록 좌우 여백 → 자간 → 글자 크기 순으로 줄입니다. 두 줄의 탭을 같게 둡니다.
   768 이상은 기존 값 그대로입니다. */
@media (max-width: 640px) {
  .wxNav__t,
  .wxp__tab {
    padding-inline: 3px;     /* Stack 6px · PRICE 4px */
    letter-spacing: .04em;   /* .06em */
    font-size: 9.5px;        /* Stack 9.5px 그대로 · PRICE 10px */
  }
}

/* ── 세로 전후사진 (ba--tall · 예: 얼굴전체 3 / 4) ─────────────────────
   4:3 으로 잘라 헤어라인 · 턱수염을 자르지 않고 세로 비율을 그대로 둡니다.
   대표 칸(760px)을 그대로 쓰면 1,000px 넘는 세로 카드가 되므로 데스크톱에서만
   표시 폭을 줄여 가운데에 둡니다. 모바일(640 이하)은 칸 폭 그대로. */
@media (min-width: 641px) {
  .ba__area--feature:has(.ba--tall) { width: min(100%, 420px); }
}
/* 확대 모달 — 세로 사진은 화면 높이 안에 들어오게 폭을 정합니다 */
.baz__box .ba--tall {
  width: min(100%, calc((100vh - 150px) * 3 / 4));
  justify-self: center;
}

/* ── 나란히 보기 · 세로 반쪽 (aspectRatio 2 / 3) ──────────────────────
   전후 각도가 달라 겹쳐 비교가 안 되는 사례(다리 · 볼)는 세로 반쪽 두 장을
   한 카드 안에 좌 | 우로 둡니다. 모든 폭에서 좌우이고(모바일에서도 위아래로
   쌓지 않음) 카드 높이가 4:3 슬라이더 카드와 거의 같아, 여러 사례를 넘기는
   칸에서 빈 공간이 생기지 않습니다. */
.ba__side:has(> .ba--tall) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

/* ── 전후사진 2차 필터 — 성별 (전체 · 여자 · 남자) ─────────────────────
   1차 탭(.ba__tab) 아래 한 단계 작은 분절 버튼. 같은 beige · rose · 999px 재료를 쓰되
   채운 rose 대신 연한 바탕으로 1차보다 약하게 보입니다. 터치 높이 44px. */
.ba__genders {
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  background: var(--surface);
}

.ba__gender {
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans, inherit);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease);
}

.ba__gender[aria-pressed="true"] {
  background: var(--rose-100, #F6E9E4);
  color: var(--rose-700);
  font-weight: 600;
}

.ba__gender:focus-visible { outline: 2px solid var(--rose-300); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .ba__gender:hover { color: var(--rose-700); }
}

@media (max-width: 640px) {
  .ba__genders { width: 100%; }
  .ba__gender { flex: 1 1 0; min-width: 0; padding: 0 6px; }
}

/* 세로 3 : 4 사례(ba--tall)가 부위 칸 안에 들어갈 때 — 대표 칸(얼굴전체)이 아니면
   폭을 56.25% 로 줄여 높이를 옆 4 : 3 카드와 똑같이 맞춥니다(0.5625 × 4/3 = 3/4).
   여러 사례를 넘기는 칸(다리전체)에서 사례마다 높이가 달라 빈 공간이 생기지 않습니다. */
.ba__area:not(.ba__area--feature) .ba__case > .ba--tall {
  width: 56.25%;
  margin-inline: auto;
}

/* 비교 슬라이더 — 보이지 않는 range 의 기본 손잡이(약 48px)만큼 손가락과 가운데 선이
   어긋나던 것을 없앱니다. 손잡이를 1px 로 두면 값이 칸 폭 전체에 그대로 대응해
   좁은 칸(세로 사진)에서도 선이 손가락 바로 밑에 옵니다. 보이는 손잡이는 .ba__grip 그대로. */
.ba__r::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; }
.ba__r::-moz-range-thumb { width: 1px; height: 100%; border: 0; background: transparent; }

/* 모바일(640 이하) — 세로 3 : 4 사례는 칸 폭 전체로 키웁니다(좁게 줄이면 BEFORE · AFTER 표시가 겹침).
   한 줄 1열이라 옆 칸이 없으므로, 여러 사례를 넘기는 칸은 지금 보이는 사례 높이만 차지하게
   숨은 사례의 높이를 접습니다 — 사례 아래 빈 공간이 생기지 않습니다. */
@media (max-width: 640px) {
  .ba__area:not(.ba__area--feature) .ba__case > .ba--tall { width: 100%; }
  .ba__cases[data-ba-rail-wide] .ba__track { align-items: flex-start; }
  .ba__cases[data-ba-rail-wide] .ba__track > .ba__case[aria-hidden="true"] { height: 0; overflow: hidden; }
}

/* ── 부위 탭 — 영문 위 · 한글 아래 두 줄 (2026-10-13) ─────────────────
   탭 높이(--stk-rail)는 그대로라 카드 착지 위치 계산은 바뀌지 않습니다. */
.wxNav__t { flex-direction: column; gap: 2px; }
.wxNav__en { display: block; }
.wxNav__ko {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.wxNav__t.is-cur .wxNav__ko { color: var(--ink); }
@media (min-width: 768px)  { .wxNav__ko { font-size: 11px; } }
@media (min-width: 1024px) { .wxNav__t { gap: 4px; } .wxNav__ko { font-size: 12px; } }

/* ══════════════════════════ /waxing 네이버 리뷰 ══════════════════════════
   승인된 리뷰 캡처 이미지를 카드에 담아 한 칸씩 넘깁니다 (js initNaverReviews).
   한 화면에 1024 이상 3장 · 641~1023 2장 · 640 이하 1장 — --nrv-per 로 받습니다.
   캡처는 자르지 않고(object-fit: contain) 카드 높이 안에 통째로 보입니다.
   이전/다음 · 점은 전후사진 레일의 .ba__nav 재료를 그대로 씁니다. */
.nrv { --nrv-per: 1; --nrv-h: 440px; margin-top: clamp(26px, 3vw, 40px); }
.nrv__view {
  overflow: hidden;
  touch-action: pan-y;        /* 세로 스크롤은 페이지가, 가로 밀기는 리뷰 넘기기가 */
}
.nrv__track {
  display: flex;
  margin: 0; padding: 0; list-style: none;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.nrv__slide {
  flex: 0 0 calc(100% / var(--nrv-per));
  min-width: 0;
  padding: 0 clamp(6px, .8vw, 10px);
  box-sizing: border-box;
}
.nrv__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--nrv-h);
  padding: 12px;
  border: 1px solid var(--beige);
  border-radius: 14px;
  background: var(--surface);
  cursor: zoom-in;
  transition: border-color .3s var(--ease);
}
.nrv__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* 원문이 잘리지 않게 — 비율은 캡처마다 그대로 */
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
}
@media (hover: hover) and (pointer: fine) {
  .nrv__card:hover { border-color: var(--rose-200); }
}
.nrv__card:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }

.nrv__dot { border: 0; padding: 0; cursor: pointer; }
.nrv__more { margin-top: clamp(22px, 2.6vw, 32px); text-align: center; }
.nrv__more [hidden] { display: none; }

@media (max-width: 640px) {
  .nrv { --nrv-h: 430px; }
  .nrv__slide { padding: 0 2px; }
}
@media (min-width: 1024px) { .nrv { --nrv-h: 460px; } }

/* 확대 — 전후사진 모달(.baz)에 리뷰 이미지 한 장. 세로로 긴 캡처는 상자 안에서 스크롤 */
.baz__box--img { width: min(440px, 100%); }   /* 리뷰 이미지가 너무 늘어나 흐려지지 않게 */
.baz__box--img .baz__stage {
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  border-radius: 12px;
  background: var(--surface);
  overscroll-behavior: contain;
}
.baz__img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .nrv__track { transition: none; }
}

/* 네이버 리뷰 — 넘길 자리가 많을 때 점 대신 쓰는 '3 / 18' 숫자 */
.nrv__count {
  min-width: 64px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 네이버 리뷰 — JavaScript 가 꺼졌거나 실패했을 때(data-nrv-active 없음).
   정적 HTML 로 들어 있는 A 묶음 20개를 가로로 밀어 보는 줄로 둡니다. 이전/다음 · 숫자는
   JS 가 켜야 나오므로(hidden) 깨진 숫자가 보이지 않습니다. JS 가 돌면 이 규칙은 풀립니다. */
.nrv:not([data-nrv-active]) .nrv__view {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: auto;
  overscroll-behavior-x: contain;
}
.nrv:not([data-nrv-active]) .nrv__slide { scroll-snap-align: start; }
@media (min-width: 641px) { .nrv:not([data-nrv-active]) { --nrv-per: 2; } }
@media (min-width: 1024px) { .nrv:not([data-nrv-active]) { --nrv-per: 3; } }

/* /waxing — main.js 를 받지 못해 등장 효과가 켜지지 않았을 때(html.reveal-off, 페이지 안 안전장치가 붙임)
   data-reveal 요소를 처음부터 보이게 둡니다. JavaScript 가 정상이면 이 클래스는 붙지 않습니다. */
html.reveal-off [data-reveal] { opacity: 1; transform: none; transition: none; }
html.reveal-off .wxStk .wx__item[data-reveal]:not(.is-in) .wx__item-b > * { opacity: 1; }

/* /waxing 히어로 — H1 맨 앞 서비스명 한 줄 (예: '수원 브라질리언 왁싱').
   큰 세리프 카피는 그대로 두고, 그 위에 작은 본문 글씨로 무슨 페이지인지 먼저 보이게 합니다. */
.wx__hero-k {
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* 전후사진 필터 — 고른 조합에 맞지 않는 그룹 · 부위 · 사례(hidden).
   이 노드들에 display: grid 등이 걸려 있어 브라우저 기본 [hidden] 이 지므로 #results 안에서만 다시 숨깁니다. */
#results .ba__group[hidden],
#results .ba__areas[hidden],
#results .ba__area[hidden],
#results .ba__case[hidden],
#results .ba__case-t[hidden] { display: none; }
/* 숨긴 형제가 DOM 에 남아 있어도 배치가 예전(조합마다 따로 찍던 때)과 같게 —
   · 앞 그룹(FACE)을 숨기고 BODY 만 보일 때 BODY 는 첫 그룹 간격으로
   · 부위에 사례가 한 장만 보일 때(ba__track--one)는 '홀수 마지막 사례 가운데 반 칸' 규칙을 받지 않음 */
#results .ba__group[hidden] + .ba__group { margin-top: clamp(30px, 3.2vw, 46px); }
@media (min-width: 641px) {
  #results .ba__area .ba__track--one > .ba__case {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

/* ══════════════════════ 호매실 생활권 안내 (/waxing/homaesil) ══════════════════════
   새 디자인을 만들지 않고 기존 조각을 씁니다 — 히어로(.wx__hero--sub) · 카드(.wx__next-card) ·
   가격 줄(.wxp__row) · 순서(.wx__step) · FAQ(.wxq). 아래는 배치에 필요한 몇 줄만입니다. */

/* 히어로 아래 바로가기 — BA 필터 알약(.ba__tab)과 같은 모양의 일반 앵커 */
.wx__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wx__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.wx__jump a:hover { border-color: var(--rose-300); color: var(--rose-700); }
.wx__jump a:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }

/* 카드 4장 · 2장 — 1100 이상에서 한 줄 (그 아래는 .wx__next 기본: 2열 → 640 이하 1열) */
@media (min-width: 1100px) {
  .wx__next--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wx__next--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 대표 가격 — 탭 없는 한 장이라 네 모서리를 모두 둥글게 */
.wxp__card--brief { max-width: 760px; margin-top: clamp(28px, 3vw, 40px); border-radius: var(--wxp-r); }
.wxp__p--one { grid-column: 2 / 4; text-align: center; }
#price-brief .wxp__note,
#price-brief .wxp__more { max-width: 760px; }

/* 처음 이용 순서 — 사진 없이 한 열이라 읽기 좋은 폭으로 */
.wx__steps--narrow { max-width: 760px; }

/* 매장 위치(/waxing/homaesil #where) — 내용이 짧은 구간이라 1024 이상에서만 아래 여백을 줄입니다.
   (공통 .section 위아래 여백 + 마지막 줄 아래 여백이 겹쳐 1440 에서 약 355px 비어 보였습니다.
    HOME 에도 id="where" 가 있어 id 가 아닌 이 페이지 전용 클래스로만 겁니다.) */
@media (min-width: 1024px) {
  .wx__where { padding-bottom: clamp(72px, 6vw, 96px); }
  .wx__where .wx__info dd:last-of-type { margin-bottom: 0; }
}

/* ══════════════════════ SIGNATURE WAXING (/waxing #signature) ══════════════════════
   대표 시술 4개 — 가격은 빌드가 PRICE_MENU 에서 읽어 넣습니다. 390 · 768 은 2×2, 1024 이상 4열. */
.sig__list {
  margin-top: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (min-width: 1024px) { .sig__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sig__card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.sig__cat { font-family: var(--serif); font-size: 11px; letter-spacing: .26em; color: var(--sand); }
.sig__t { margin-top: 10px; font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; line-height: 1.4; color: var(--ink); }
.sig__sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.sig__p { margin-top: auto; padding-top: 16px; display: grid; gap: 4px; }
.sig__p div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.sig__p dt { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.sig__p dd {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
.sig__p dd span { margin-left: 2px; font-size: .62em; color: var(--ink-soft); }

/* ══════════════════════ 회원 혜택 (/waxing #membership) ══════════════════════
   처음엔 선택지 3개만, 고르면 카드가 열립니다(js/main.js initMemberChoice). JS 가 없으면 전부 보입니다. */
.mbr [hidden] { display: none !important; }
.mbr__choice { margin-top: clamp(22px, 2.6vw, 32px); display: flex; flex-wrap: wrap; gap: 10px; }
.mbr__opt {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.mbr__opt:hover { border-color: var(--rose-300); color: var(--rose-700); }
.mbr__opt[aria-pressed="true"] { border-color: var(--rose-700); background: var(--rose-700); color: var(--surface); }
.mbr__opt:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }
@media (max-width: 640px) {
  .mbr__choice { display: grid; grid-template-columns: 1fr; }
  .mbr__opt { width: 100%; }
}
.mbr__body { margin-top: clamp(26px, 3vw, 40px); }
.mbr__panel + .mbr__panel { margin-top: clamp(36px, 4vw, 52px); }
.mbr__panel-h { margin-bottom: 16px; font-family: var(--serif); font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; color: var(--ink); }
.mbr.is-choosing .mbr__panel-h {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mbr__cards { display: grid; gap: clamp(14px, 2vw, 24px); }
@media (min-width: 768px) {
  .mbr__cards { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .mbr__cards > :only-child { grid-column: 1 / -1; max-width: 760px; }
}
.mbr__card {
  padding: clamp(22px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.mbr__card--main { border-color: var(--rose-200); }
.mbr__kick { font-family: var(--serif); font-size: 11px; letter-spacing: .26em; color: var(--rose-700); }
.mbr__t { margin-top: 10px; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.4; color: var(--ink); }
.mbr__fee { margin-top: 10px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); word-break: keep-all; }
.mbr__fee-n { margin-top: 4px; font-size: 12.5px; color: var(--muted); word-break: keep-all; }
.mbr__pts { margin-top: 16px; border-top: 1px solid var(--line-soft); }
.mbr__pts li {
  position: relative;
  padding: 11px 0 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  word-break: keep-all;
}
.mbr__pts li::before {
  content: "";
  position: absolute; left: 2px; top: 21px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose-300);
}
.mbr__pts li:last-child { border-bottom: 0; }
.mbr__pts .mbr__aside-li { padding-top: 0; font-size: 12.5px; color: var(--muted); }
.mbr__pts .mbr__aside-li::before { display: none; }
.mbr__aside { font-size: 12.5px; color: var(--muted); }
.mbr__gift-pt b { font-weight: 600; color: var(--ink); }
.mbr__gift {
  max-width: 760px;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: 0 18px;
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: 12px;
}
.mbr__gift summary { display: flex; align-items: center; min-height: 48px; font-size: 14px; color: var(--ink); cursor: pointer; }
.mbr__gift summary:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }
.mbr__gift ul { padding: 0 0 14px; }
.mbr__gift li { position: relative; padding-left: 12px; font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); word-break: keep-all; }
.mbr__gift li::before { content: "·"; position: absolute; left: 0; color: var(--rose-300); }
.mbr__note { margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.mbr__cta { margin-top: 14px; }

/* ══════════════════════ 이벤트 팝업 (js/config.js EVENT_CONFIG · js/main.js initEventPopup) ══════════════════════
   641 이상 가운데 카드 · 640 이하 아래 시트. 쇼핑몰 SALE 느낌 대신 아이보리 · 베이지 선 · 세리프. */
.evt { position: fixed; z-index: 260; }
.evt--modal { inset: 0; display: grid; place-items: center; padding: 24px; }
.evt--sheet { left: 0; right: 0; bottom: 0; }
.evt__bg { position: absolute; inset: 0; background: rgba(43, 37, 33, .36); opacity: 0; transition: opacity .35s var(--ease); }
.evt__box {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 34px 30px 14px;
  background: var(--ivory);
  border: 1px solid var(--beige);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.evt--sheet .evt__box {
  width: 100%;
  max-height: 60vh;
  padding: 26px 20px calc(10px + env(safe-area-inset-bottom));
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transform: translateY(100%);
  box-shadow: 0 -10px 30px rgba(43, 37, 33, .16);
}
.evt.is-in .evt__bg { opacity: 1; }
.evt.is-in .evt__box { opacity: 1; transform: none; }
.evt__x {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.evt__x::before, .evt__x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink-soft);
}
.evt__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.evt__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.evt__x:focus-visible, .evt__foot button:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }
.evt__img { display: block; width: 100%; height: auto; margin-bottom: 18px; border-radius: 10px; }
.evt__eye { font-family: var(--serif); font-size: 11px; letter-spacing: .3em; color: var(--rose-700); }
.evt__t { margin-top: 10px; padding-right: 30px; font-family: var(--serif); font-size: clamp(22px, 5vw, 26px); font-weight: 400; line-height: 1.4; color: var(--ink); }
.evt__d { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--ink-soft); word-break: keep-all; }
.evt__p { margin-top: 16px; border-top: 1px solid var(--line); }
.evt__p li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.evt__k { font-size: 14px; color: var(--ink-soft); }
.evt__v { font-family: var(--serif); font-size: 22px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--ink); }
.evt__v i { margin-left: 2px; font-size: .6em; font-style: normal; color: var(--ink-soft); }
.evt__when { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.evt__note { margin-top: 2px; font-size: 12.5px; color: var(--muted); word-break: keep-all; }
.evt__btn { margin-top: 16px; }
.evt__more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font-size: 13.5px; color: var(--rose-700); text-decoration: underline; text-underline-offset: 3px;
}
.evt__foot { display: flex; justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.evt__foot button { min-height: 44px; padding: 0 4px; background: none; border: 0; font-size: 13px; color: var(--muted); cursor: pointer; }
body.evt-open .fab,
body.evt-open .cbot { display: none; }
@media (prefers-reduced-motion: reduce) {
  .evt__bg, .evt__box { transition: none; }
}

/* ══════════════════════ 가격표 안 회원제 비교 (/waxing #price · .wxm) ══════════════════════
   정가 목록 아래에 회원제를 한 번 더 — 카드 안이라 테두리 · 그림자 없이 가는 선과 옅은 바탕만 씁니다. */
.wxm {
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}
.wxm__h { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--rose-700); }
.wxm__row { margin-top: 14px; display: grid; gap: 12px; }
@media (min-width: 768px) {
  .wxm__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wxm__row--2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.wxm__col {
  padding: 16px 18px;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.wxm__col--main { border-color: var(--rose-200); background: var(--surface); }
.wxm__kick { font-family: var(--serif); font-size: 10.5px; letter-spacing: .24em; color: var(--sand); }
.wxm__t { margin-top: 6px; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.wxm__l { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); word-break: keep-all; }
.wxm__l--s { margin-top: 0; font-size: 12.5px; color: var(--muted); }
.wxm__fit, .mbr__fit { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); word-break: keep-all; }
.wxm__fit span, .mbr__fit span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border: 1px solid var(--beige);
  border-radius: 999px;
  font-size: 11px;
  color: var(--rose-700);
}
.wxm__ex { margin-top: 16px; }
.wxm__ex-h { font-size: 13px; color: var(--ink); }
.wxm__ex-h span { margin-left: 6px; font-size: 12px; color: var(--muted); }
.wxm__ex ul { margin-top: 6px; border-top: 1px solid var(--line-soft); }
.wxm__ex-r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(12px, 3vw, 28px);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wxm__ex-n { font-size: 14px; color: var(--ink); }
.wxm__ex-p { font-family: var(--serif); font-size: 15px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--ink); }
.wxm__ex-o { color: var(--muted); }
.wxm__ex-p b { font-weight: 400; color: var(--rose-700); }
.wxm__ex-k { font-family: inherit; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 640px) {
  .wxm__ex-r { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .wxm__ex-n { grid-column: 1 / -1; }
}
.wxm__more { margin-top: 12px; }

/* 가격표 안 회원제 — 탭 카드 맨 위에 둘 때 (회원제 → 세부 정가 순서) */
.wxm--top { margin-top: 0; padding-top: 0; border-top: 0; }
.wxm--fb { margin-bottom: clamp(28px, 3.4vw, 40px); padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.wxm--bz .wxp__feat-t { margin-top: 8px; }
.wxm--bz .wxm__lead { margin-top: 8px; max-width: 640px; }
.wxm--bz .wxm__row { margin-top: clamp(18px, 2.2vw, 24px); }
.wxm--bz .wxp__note { margin-top: 14px; }

/* 가격표 · 회원 혜택 — 설명 한 줄과 비용 구조 라벨 */
.wxm__desc { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); word-break: keep-all; }
.wxm__l.wxm__basis {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* 브라질리언 4칸(비싼 순: 3회 관리권 → 평생회원 → 1년 VIP → 일반 1회) — 가격표 BRAZILIAN 칸 · #membership 브라질리언 패널 공통.
   1024 이상 평생회원을 가장 넓게, 1023 이하는 같은 순서로 한 열. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wxm--bz .wxm__row,
  #mbr-brazilian .mbr__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .wxm--bz .wxm__row,
  #mbr-brazilian .mbr__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ══════════════════════ /waxing 모바일 · 태블릿 글자 깨짐 보정 (2026-10 통합 감사 T1 ~ T6) ══════════════════════
   글자 크기는 줄이지 않고, 좁은 폭에서 배치만 바꿉니다. 374 는 실측 경계 —
   SIGNATURE 카드 안쪽 폭이 "여성 120,000원"보다 좁아지고, 회원가 예시 한 칸이 136px 미만이 되는 지점입니다. */

/* T3 — 성별 + 금액 한 덩어리 (tools/build.mjs wmText). 줄이 바뀌면 '·' 뒤에서만 나뉩니다. */
.wxm .wm, .mbr .wm { white-space: nowrap; }

/* T5 — 영문 eyebrow 자간(.2em)이 한글에는 걸리지 않게 */
.wxm__h-ko { letter-spacing: 0; }

/* T1 — SIGNATURE 가격이 카드 테두리에 닿지 않게 (가격 17px 그대로 · 실측 경계)
   412 이상: 지금처럼 라벨 · 가격 한 줄 / 375 ~ 411: 2 × 2 그대로 두고 라벨을 가격 위로 / 374 이하: 한 열(라벨 · 가격 한 줄) */
@media (min-width: 375px) and (max-width: 411px) {
  .sig__p div { flex-direction: column; align-items: stretch; gap: 2px; }
  .sig__p dd { margin-left: 0; text-align: right; }
}
@media (max-width: 374px) {
  .sig__list { grid-template-columns: minmax(0, 1fr); }
  /* T2 — 공통 회원가 예시: 부위명 / 여성 / 남성 한 줄씩 */
  .wxm__ex-r { grid-template-columns: minmax(0, 1fr); }
  /* T4 — CONNECT '매장정보 보기 →': 화살표가 글자 끝에 붙어 함께 줄바꿈 (connect.html 공유 — academy · 호매실 같음) */
  .soc__go { display: block; }
  .soc__go i { display: inline; margin-left: 1px; }
}

/* T6 — 가격표 BRAZILIAN 은 768 ~ 1023 에서 2 × 2(3회권 · 평생회원 / 1년 VIP · 일반 1회). 1024 이상은 4칸.
   #membership 브라질리언 패널은 1023 까지 1열 그대로. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wxm--bz .wxm__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ══════════════════════ 등장 효과 — 바로 이동한 화면은 기다림 없이 (js/main.js revealNow) ══════════════════════
   보이는 것이 기본이고 애니메이션은 덤입니다. 주소 #hash 진입 · 앵커 이동 · 뒤로가기 · 빠른 이동 직후
   착지한 화면 근처만 전환 없이 끝 상태로 둡니다(reveal-now 는 두 프레임 뒤 빠짐). */
.reveal-now,
.reveal-now img,
.reveal-now video,
.reveal-now::before { transition: none !important; }
.wxStk .wx__item.is-instant .wx__item-b > * { animation: none; opacity: 1; }

/* 인쇄 · PDF 저장 — 스크롤하지 않은 구간도 빈칸 없이 */
@media print {
  [data-reveal], .frame--reveal img, .frame--reveal video,
  .wxStk .wx__item[data-reveal]:not(.is-in) .wx__item-b > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
}
/* 주소 #hash 로 들어온 직후(페이지 안 스크립트가 붙임 · main.js 가 착지 뒤 뗌) — 목적지로 가는 동안 빈칸 없이 */
html.reveal-hash [data-reveal] { opacity: 1; transform: none; transition: none; }
html.reveal-hash .wxStk .wx__item[data-reveal] .wx__item-b > * { opacity: 1; animation: none; }

/* ══════════════════════ /waxing 눌러야 하는 것이 눌러 보이게 (2026-10 통합 감사 U1 ~ U10) ══════════════════════ */

/* U1 — 평생회원 새해 감사선물 조건: 기본 상태부터 "자세히 보기 ⌄", 열리면 "접기 ⌃". hover 에 기대지 않습니다.
   좁으면 표시가 다음 줄 오른쪽으로 자연스럽게 내려갑니다(320 에서 억지로 한 줄 유지 안 함). */
.mbr__gift summary {
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 2px;
  padding-block: 10px;
  list-style: none;
}
.mbr__gift summary::-webkit-details-marker { display: none; }
.mbr__gift-t { flex: 0 1 auto; }
.mbr__gift-cue {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--rose-700);
  white-space: nowrap;
}
.mbr__gift-cue::after {
  content: "";
  width: 7px; height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease), margin .3s var(--ease);
}
.mbr__gift-o { display: none; }
.mbr__gift[open] .mbr__gift-c { display: none; }
.mbr__gift[open] .mbr__gift-o { display: inline; }
.mbr__gift[open] .mbr__gift-cue::after { margin-top: 4px; transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .mbr__gift summary:hover .mbr__gift-cue { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .mbr__gift-cue::after { transition: none; } }

/* U3 — #membership 고르기 전 안내 (고르면 사라짐 · 상품처럼 보이지 않게 테두리 · 배경 없음) */
.mbr__cue { margin-top: clamp(16px, 2vw, 22px); font-size: 13px; line-height: 1.6; color: var(--ink-soft); word-break: keep-all; }
.mbr__cue span { color: var(--rose-700); }
.mbr__cue + .mbr__choice { margin-top: 12px; }

/* U6 — 포커스 테두리가 overflow:hidden 카드에 잘리지 않게 안쪽으로 */
.wxq__q:focus-visible,
.wx__item-a:focus-visible { outline: 2px solid var(--rose-500); outline-offset: -3px; }

/* U7 — 가격표 "회원 혜택 자세히 보기 →" 터치 영역 44px (보이는 모양은 그대로, 눌리는 영역만 위아래로 넓힘) */
.wxm__more .tlink { position: relative; }
.wxm__more .tlink::before { content: ""; position: absolute; inset: -12px -6px; }

/* U9 — 리뷰 카드: 눌러서 크게 볼 수 있다는 작은 표시(오른쪽 아래 · 모든 기기). 전후사진 확대 버튼과 같은 모양 */
.nrv__card { position: relative; }
.nrv__zoom {
  position: absolute;
  right: 10px; top: 10px;          /* 위쪽 — 아래 구석은 ↑ · 상담 바가 지나가는 자리라 가려질 수 있어 */
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--beige);
  background: rgba(252, 249, 245, .92);
  pointer-events: none;
}
.nrv__zoom::before,
.nrv__zoom::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border: 1.5px solid var(--rose-700);
}
.nrv__zoom::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.nrv__zoom::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

/* ══════════════════════ 모바일 이벤트 시트 (≤640 · .evt--sheet) — 핵심 조작 항상 보이기 ══════════════════════
   X · 카카오 상담 · 회원 혜택 보기 · 오늘 하루 / 닫기는 시트 위 · 아래에 고정되고, 내용 칸만 넘칠 때 스크롤합니다.
   글자 크기는 그대로, 여백만 조금 줄입니다. 641 이상 가운데 카드는 바뀌지 않습니다. */
.evt--sheet .evt__box {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-height: 80dvh;
  overflow: hidden;
  padding: 22px 0 0;
}
.evt--sheet .evt__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 10px;
}
.evt--sheet .evt__act {
  flex: none;
  padding: 12px 20px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--ivory);
}
.evt--sheet .evt__p { margin-top: 12px; }
.evt--sheet .evt__p li { padding: 8px 0; }
.evt--sheet .evt__btn { margin-top: 0; }
.evt--sheet .evt__x { z-index: 1; }

.evt--sheet .evt__x { background: var(--ivory); }

/* ══════════════════════ /waxing 빠른 이동 — 퀵바(≤1023) · ↑ 맨 위로(≤860) ══════════════════════
   퀵바는 헤더(붙은 높이 70px) 바로 아래에 붙고, 위로 스크롤할 때만 내려옵니다. 지금 섹션은 로즈 글자 + 2px 밑줄.
   ↑ 는 하단 '왁싱 상담' 바(FAB, 높이 78px) 바로 위 오른쪽. 메뉴 · 확대 · 팝업 · 모달이 열리면 둘 다 숨습니다. */
.qnav {
  position: fixed;
  left: 0; right: 0; top: 70px;
  z-index: 85;
  background: rgba(252, 249, 245, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .28s var(--ease), opacity .2s var(--ease), visibility 0s linear .28s;
}
.qnav.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .28s var(--ease), opacity .2s var(--ease), visibility 0s;
}
.qnav__list {
  display: flex;
  gap: 2px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 calc(var(--pad) - 10px);
  overflow-x: auto;
  scrollbar-width: none;
}
.qnav__list::-webkit-scrollbar { display: none; }
.qnav__list li { flex: 1 0 auto; }
.qnav__a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.qnav__a[aria-current] { color: var(--rose-700); font-weight: 600; }
.qnav__a[aria-current]::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose-500);
}
.qnav__a:focus-visible { outline: 2px solid var(--rose-500); outline-offset: -4px; border-radius: 6px; }
/* 320 처럼 다섯 칸이 넘칠 때 — 오른쪽이 살짝 흐려져 옆으로 밀 수 있음을 알림. 끝까지 밀면 마지막 칸이 흐림 밖으로 나옴 */
@media (max-width: 359px) {
  .qnav__list {
    padding-right: 26px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
}

.totop {
  position: fixed;
  right: var(--pad);
  bottom: calc(78px + 12px + env(safe-area-inset-bottom));
  z-index: 79;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: rgba(252, 249, 245, .96);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.totop::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -2px 0 0 -5px;
  border-left: 1.5px solid var(--rose-700);
  border-top: 1.5px solid var(--rose-700);
  transform: rotate(45deg);
}
.totop:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }

/* 잠금 상태(모바일 메뉴 · 확대 · 과정 모달 · 이벤트 팝업)에서는 숨김 */
body.is-locked .qnav, body.baz-open .qnav, body.evt-open .qnav, body.is-menu-open .qnav,
body.is-locked .totop, body.baz-open .totop, body.evt-open .totop, body.is-menu-open .totop { opacity: 0; visibility: hidden; }

@media (min-width: 1024px) { .qnav { display: none !important; } }
@media (min-width: 861px)  { .totop { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .qnav, .qnav.is-on, .totop, .totop.is-on { transition: none; }
}
.totop, .qnav__a { -webkit-tap-highlight-color: transparent; }

/* ══════════════════════ 브라질리언 평생회원 — 성별 기준 가격 (tools/build.mjs bzGenderHTML) ══════════════════════
   공통 가입 시 혜택 1번 → 여성 · 남성 각각 가입비 + 이후 1회(정가 → 회원가) → 추가 갱신비 없음.
   강조: 가입비 숫자(ink) · 회원가(rose). 정가는 흐리게, 취소선 없음. 덩어리마다 nowrap — 좁으면 "→ 회원가" 앞에서만 줄바꿈. */
.bzg { margin-top: 12px; }
.bzg dl, .bzg dt, .bzg dd { margin: 0; }   /* 브라우저 기본 들여쓰기 · 아래 여백 제거 */
.bzg__k { font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.bzg__gift { font-size: 14px; line-height: 1.6; color: var(--ink); word-break: keep-all; }
.bzg__gift .bzg__k { display: block; margin-bottom: 2px; }
.bzg__gift-t { font-weight: 500; }
.bzg__sexes { margin-top: 12px; display: grid; }
.bzg__g { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.bzg__sex { font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); }
.bzg__fee { margin-top: 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bzg__v, .bzg__m {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.bzg__v { color: var(--ink); }
.bzg__m { color: var(--rose-700); }
.bzg__v i, .bzg__m i { margin-left: 1px; font-family: var(--sans); font-size: .72em; font-style: normal; font-weight: 500; }
.bzg__after { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.bzg__a1, .bzg__a2 { white-space: nowrap; }
.bzg__list { color: var(--muted); }
.bzg__renew { padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); }

/* 가격표 가운데 칸(안쪽 192 ~ 356px) — 같은 순서 · 같은 용어, 여백 · 숫자만 한 단계 작게(모든 폭 같은 크기) */
.bzg--compact { margin-top: 8px; }
.bzg--compact .bzg__gift { font-size: 13.5px; }
.bzg--compact .bzg__sexes { margin-top: 8px; }
.bzg--compact .bzg__g { padding: 8px 0; }
.bzg--compact .bzg__v, .bzg--compact .bzg__m { font-size: 15px; }
.bzg--compact .bzg__fee { justify-content: flex-start; }
.bzg--compact .bzg__renew { padding-top: 8px; font-size: 13px; }

/* #membership 평생회원 카드 — 768 ~ 1023 은 카드가 넓어(안쪽 약 645px) 여성 | 남성 2열 */
@media (min-width: 768px) and (max-width: 1023px) {
  .bzg--full .bzg__sexes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
}

/* 통합 카드 — 브라질리언 회원가만(가입비 없음) */
.bzg--member { margin-top: 0; }
.bzg__h { font-size: 14px; color: var(--ink-soft); }
.bzg--member .bzg__g { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 4px 0 0; border-top: 0; }
.bzg--member .bzg__after { margin-top: 0; }

/* 브라질리언 평생회원 전용 추가혜택(FACE · BODY 정가 10%) — 성별 블록 아래 · 추가 갱신비 없음 위 */
.bzg__perk { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.bzg__perk .bzg__k { display: block; }
.bzg__perk-t { margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--ink); font-weight: 500; word-break: keep-all; }
.bzg__perk-n { margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.bzg--compact .bzg__perk { padding: 8px 0; }
.bzg--compact .bzg__perk-t { font-size: 13px; }
.bzg__nw { white-space: nowrap; }
.evt__pre { margin-top: 2px; font-size: 12.5px; color: var(--rose-700); word-break: keep-all; }
/* 이벤트 팝업 — 정가는 이름 아래 작고 흐리게(취소선 없음), 이벤트가는 오른쪽에 지금처럼 크게 */
.evt__k { flex: none; white-space: nowrap; }
.evt__pp { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 8px; text-align: right; }
.evt__reg { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ══════════════════════ 오른쪽 바로가기 — 홈 · 카톡 · 길찾기 (site/partials/tail.html) ══════════════════════
   화면 오른쪽 가운데에 세로로 고정. 아래쪽 상담 버튼(FAB) · 맨 위로 · 챗봇과 자리가 겹치지 않습니다. */
.qk {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 78;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qk__a {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: rgba(252, 249, 245, .96);
  box-shadow: var(--shadow-sm);
  color: var(--rose-700);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.qk__a svg { width: 19px; height: 19px; }
.qk__a:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }
@media (hover: hover) { .qk__a:hover { border-color: var(--rose-500); transform: translateX(-2px); } }
@media (max-width: 640px) {
  .qk { right: 8px; gap: 6px; }
  .qk__a { width: 48px; height: 48px; font-size: 10.5px; }
  .qk__a svg { width: 17px; height: 17px; }
}
/* 모달 · 확대 · 메뉴 · 이벤트 시트 · 챗봇 창이 열려 있으면 숨깁니다 */
body.is-locked .qk, body.baz-open .qk, body.evt-open .qk, body.is-menu-open .qk, body:has(.cbot.is-open) .qk { display: none; }
@media (prefers-reduced-motion: reduce) { .qk__a { transition: none; } }
@media print { .qk { display: none; } }