/* =====================================================================
   PILATES X — 홈페이지 시안 v3
   브랜드에셋 정합(리본 하트 + 정자체 Fraunces) · 스펙 규칙(오베르진 액션,
   PC 상단중앙 네비) · 모션 대폭 강화 · 사업계획 기반 리브랜딩
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */
:root {
  /* 브랜드 컬러 */
  --orchid:    #B4A1C6;
  --ivory:     #EDE6D9;
  --rose:      #CAA8AD;
  --aubergine: #3B3145;
  --aubergine-90: #453a52;
  --aubergine-80: #55495f;
  --ivory-soft:   #F4EFE6;
  --bg-cream:     #FBF9F5;
  --border:       #E4DED4;
  --text-sub:     #8A7F94;

  /* 액션 (스펙 R1: 오키드 배경 금지 → 오베르진) */
  --action:    #3B3145;
  --action-fg: #EDE6D9;

  /* 폰트 (브랜드에셋) — 로고/디스플레이 세리프 + 본문 Pretendard */
  --f-serif-en: "Fraunces", Georgia, "Times New Roman", serif;   /* 워드마크·EN 디스플레이 */
  --f-serif-kr: "Noto Serif KR", serif;                           /* KR 디스플레이 */
  --f-body:     "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;

  /* 타이포 스케일 (모바일 우선) */
  --fs-hero:  clamp(2.6rem, 9.5vw, 6.5rem);
  --fs-h1:    clamp(2rem, 6.2vw, 4.25rem);
  --fs-h2:    clamp(1.7rem, 4.8vw, 3rem);
  --fs-h3:    clamp(1.25rem, 3.2vw, 1.6rem);
  --fs-lead:  clamp(1.075rem, 1.4vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* 행간·자간 (한글 가독성 우선) */
  --lh-display: 1.24; --lh-body: 1.85; --lh-lead: 1.9;
  --ls-display: -0.015em; --ls-body: -0.004em; --ls-label: 0.18em;

  --section: clamp(4.5rem, 12vw, 10rem);
  --container: 1280px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 14px;
  --pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); color: var(--ivory); background: var(--aubergine);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; word-break: keep-all;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--ls-display); }
p { max-width: 68ch; }
::selection { background: var(--orchid); color: var(--aubergine); }

/* ---------- 3. 그레인 ---------- */
.grain::after { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- 4. 레이아웃 ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block:var(--section); position:relative; z-index:2; }
.section--light { background:var(--ivory); color:var(--aubergine); }
.section--cream { background:var(--bg-cream); color:var(--aubergine); }
.section--dark  { background:var(--aubergine); color:var(--ivory); }
.section--rose  { background:var(--rose); color:var(--aubergine); }
.center { text-align:center; }
.maxw { max-width:60ch; margin-inline:auto; }

/* ---------- 5. 타이포 ---------- */
.eyebrow { font-family:var(--f-body); font-weight:600; font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:color-mix(in srgb, var(--orchid) 80%, var(--aubergine)); display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem; }
.section--dark .eyebrow, .section--rose .eyebrow { color:var(--orchid); }
.eyebrow::before { content:""; width:22px; height:1px; background:currentColor; opacity:.55; }
.display { font-family:var(--f-serif-kr); font-weight:500; line-height:var(--lh-display); letter-spacing:var(--ls-display); }
.display-en { font-family:var(--f-serif-en); font-style:italic; font-weight:400; line-height:1.05; }
.lead { font-size:var(--fs-lead); line-height:var(--lh-lead); color:color-mix(in srgb, currentColor 80%, transparent); }

/* ---------- 6. 로고 락업 (리본 하트 + 정자체 Fraunces) ---------- */
.logo { display:inline-flex; align-items:center; gap:.6rem; }
.logo__symbol { width:26px; height:26px; flex:none; }
.logo__word { display:inline-flex; align-items:center; gap:.34em; line-height:1; }
.logo__word .pilates { font-family:var(--f-serif-en); font-style:normal; font-weight:500; font-size:1.05rem; letter-spacing:.26em; text-indent:.26em; }
.logo__word .dot { color:var(--orchid); font-size:.9rem; }
.logo__word .x { font-family:var(--f-serif-en); font-style:normal; font-weight:500; font-size:1.05rem; color:var(--orchid); letter-spacing:.02em; }
.logo--stack { flex-direction:column; gap:.9rem; }
.logo--stack .logo__symbol { width:clamp(48px,7vw,68px); height:auto; }
.logo--stack .logo__word .pilates { font-size:clamp(1.4rem,3.6vw,2.1rem); }
.logo--stack .logo__word .dot, .logo--stack .logo__word .x { font-size:clamp(1.2rem,3vw,1.9rem); }

/* ---------- 7. 버튼 (스펙: 액션=오베르진) ---------- */
.btn { display:inline-flex; align-items:center; gap:.6rem; padding:1rem 1.8rem; border-radius:var(--pill);
  font-family:var(--f-body); font-size:var(--fs-small); font-weight:600; letter-spacing:.01em; min-height:48px;
  background:var(--action); color:var(--action-fg); transition:transform .35s var(--ease-out), background .25s, filter .25s; will-change:transform; }
.btn:hover { filter:brightness(1.12); }
.btn__inner { display:inline-flex; align-items:center; gap:.6rem; transition:transform .35s var(--ease-out); }
/* 다크 섹션 위의 주 버튼은 반전(아이보리 바탕) — 대비 확보 */
.section--dark .btn, .btn--on-dark { background:var(--ivory); color:var(--aubergine); }
.section--dark .btn:hover, .btn--on-dark:hover { filter:brightness(1.04); background:#fff; }
.btn--outline { background:transparent; color:currentColor; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn--outline:hover { filter:none; background:color-mix(in srgb, currentColor 10%, transparent); }
.section--dark .btn--outline { background:transparent; color:var(--ivory); }
.btn .arrow { transition:transform .3s var(--ease-out); }
.btn:hover .arrow { transform:translateX(4px); }

/* ---------- 8. 네비 (PC 상단 중앙 메뉴 / 모바일 햄버거) ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem var(--pad); transition:background .4s, transform .4s var(--ease-out); }
.nav.solid { background:color-mix(in srgb, var(--aubergine) 90%, transparent); backdrop-filter:blur(12px); }
.nav__menu { display:none; }
.nav__cta { display:none; }
.nav__toggle { display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory); }
.nav__toggle .bars { display:inline-flex; flex-direction:column; gap:4px; }
.nav__toggle .bars span { width:24px; height:1.5px; background:currentColor; }
/* 데스크톱: 상단 중앙 메뉴 노출, 햄버거 숨김 */
@media (min-width:960px) {
  .nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  .nav__toggle { display:none; }
  .nav__menu { display:flex; justify-content:center; gap:clamp(1.2rem,2.6vw,2.6rem); grid-column:2; }
  .nav__menu a { font-family:var(--f-body); font-weight:500; font-size:.92rem; color:var(--ivory); opacity:.82; position:relative; padding:.3rem 0; transition:opacity .2s; }
  .nav__menu a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--orchid); transition:right .3s var(--ease-out); }
  .nav__menu a:hover { opacity:1; }
  .nav__menu a:hover::after { right:0; }
  .nav__cta { display:inline-flex; grid-column:3; justify-self:end; }
  .nav__cta .btn { padding:.7rem 1.3rem; min-height:42px; }
}

/* 풀스크린 메뉴(모바일) */
.menu { position:fixed; inset:0; z-index:60; background:var(--aubergine); display:flex; flex-direction:column; justify-content:center; gap:.1rem; padding-inline:var(--pad); transform:translateY(-100%); transition:transform .7s var(--ease-io); visibility:hidden; }
.menu.open { transform:translateY(0); visibility:visible; }
.menu a { font-family:var(--f-serif-en); font-style:italic; font-size:clamp(2rem,9vw,3.2rem); color:var(--ivory); opacity:.6; transition:opacity .3s, transform .3s, color .3s; width:max-content; }
.menu a .kr { font-family:var(--f-serif-kr); font-style:normal; font-size:.42em; color:var(--text-sub); margin-left:.5em; }
.menu a:hover, .menu a:active { opacity:1; color:var(--orchid); }
.menu__close { position:absolute; top:1.25rem; right:var(--pad); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--ivory); }
.menu__foot { position:absolute; bottom:1.5rem; left:var(--pad); font-family:var(--f-serif-en); font-style:italic; font-size:.9rem; color:var(--text-sub); }

/* 하단 고정 체험예약 바 */
.book-bar { position:fixed; inset:auto 0 0 0; z-index:44; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem var(--pad); background:color-mix(in srgb, var(--aubergine) 94%, black); border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px); transform:translateY(120%); transition:transform .5s var(--ease-out); }
.book-bar.show { transform:none; }
.book-bar__txt { font-size:.92rem; color:var(--ivory); }
.book-bar__txt b { font-family:var(--f-serif-kr); font-weight:600; }
@media (max-width:520px){ .book-bar__txt span { display:none; } }

/* ---------- 9. 히어로 ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#211b28; }
.hero__media { position:absolute; inset:0; z-index:0; will-change:transform; }
.hero__media img, .hero__media video { width:100%; height:110%; object-fit:cover; filter:contrast(1.03) brightness(.82) saturate(1.04); }
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide { position:absolute; inset:0; width:100%; height:110%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; filter:contrast(1.03) brightness(.82) saturate(1.04); }
.hero-slide.is-active { opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero-slide{ transition:none; } }
/* 히어로 영상 3개 연속 크로스페이드 */
.hero-vids { position:absolute; inset:0; z-index:0; }
.hero-vid { position:absolute; inset:0; width:100%; height:110%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; filter:contrast(1.03) brightness(.82) saturate(1.04); }
.hero-vid.is-active { opacity:1; }
.hero__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(33,27,40,.52) 0%, rgba(33,27,40,.24) 40%, rgba(33,27,40,.88) 100%); }
.hero__inner { position:relative; z-index:2; width:100%; padding-bottom:clamp(2.5rem,8vh,6rem); }
.hero__side { font-family:var(--f-body); font-size:.9rem; line-height:1.6; letter-spacing:.02em; color:var(--ivory); max-width:24ch; margin-bottom:1.5rem; opacity:.9; }
.hero__title { font-size:var(--fs-hero); color:var(--ivory); }
.hero__tag { margin-top:1.5rem; font-family:var(--f-serif-en); font-style:italic; font-size:clamp(1rem,2vw,1.4rem); color:var(--orchid); }
.hero__actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.75rem; align-items:center; }
.hero__actions .plainlink { font-weight:600; font-size:.9rem; color:var(--ivory); display:inline-flex; gap:.4rem; }

/* ---------- 10. 모션 유틸 ---------- */
/* 스크롤 등장(블러인) */
.js [data-reveal] { opacity:0; transform:translateY(38px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; filter:none; }
.js [data-reveal-stagger] > * { opacity:0; transform:translateY(30px); filter:blur(5px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
[data-reveal-stagger].in > * { opacity:1; transform:none; filter:none; }
/* 줄 마스크 리빌 */
.reveal-mask { display:block; overflow:hidden; padding-block:.02em; }
.js .reveal-mask > span { display:block; transform:translateY(110%) rotate(2deg); transition:transform .95s var(--ease-out); }
.reveal-mask.in > span { transform:none; }
/* 히어로 페이드 */
.js [data-hero-fade] { opacity:0; transform:translateY(20px); }
[data-hero-fade].in { opacity:1; transform:none; }
/* 클립 리빌(미디어) */
.js [data-clip] { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-out); }
[data-clip].in { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  .js [data-reveal], .js [data-reveal-stagger] > *, .js [data-hero-fade] { opacity:1!important; transform:none!important; filter:none!important; }
  .js .reveal-mask > span { transform:none; } .js [data-clip]{ clip-path:none; }
}

/* 커서 */
.cursor { position:fixed; top:0; left:0; width:30px; height:30px; border:1.5px solid var(--orchid); border-radius:50%; pointer-events:none; z-index:100; transform:translate(-50%,-50%); transition:width .25s, height .25s, background .25s; mix-blend-mode:difference; }
.cursor.hover { width:56px; height:56px; background:color-mix(in srgb, var(--orchid) 30%, transparent); }
@media (hover:none),(max-width:767px){ .cursor{ display:none; } }

/* ---------- 11. 신뢰 지표 바 ---------- */
.trust { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
@media (min-width:760px){ .trust { grid-template-columns:repeat(4,1fr); } }
.trust__item { background:var(--bg-cream); padding:1.5rem 1.25rem; text-align:center; }
.section--dark .trust { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12); }
.section--dark .trust__item { background:var(--aubergine); }
.trust__num { font-family:var(--f-serif-en); font-size:clamp(2rem,5vw,3rem); line-height:1; color:currentColor; }
.trust__num .u { font-size:.5em; color:var(--orchid); margin-left:.1em; }
.trust__label { margin-top:.5rem; font-size:.8rem; color:var(--text-sub); }
.section--dark .trust__label { color:color-mix(in srgb, var(--ivory) 70%, transparent); }

/* ---------- 12. 스플릿 ---------- */
.split { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:900px){ .split { grid-template-columns:1fr 1fr; } .split--wl { grid-template-columns:1.12fr .88fr; } }

/* ---------- 13. 카드 스택 (스캐터→정렬) ---------- */
.stack-band { position:relative; height:clamp(360px,52vw,520px); margin-block:clamp(2rem,5vw,3.5rem); }
.stack-card { position:absolute; top:50%; left:50%; width:clamp(150px,20vw,210px); aspect-ratio:3/4; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(59,49,69,.22); transform-origin:center; transform:translate(-50%,-50%); will-change:transform; }
.stack-card img { width:100%; height:100%; object-fit:cover; }
.stack-card .tag { position:absolute; inset:auto 0 .8rem 0; text-align:center; font-family:var(--f-serif-kr); font-weight:600; font-size:1.15rem; color:var(--ivory); text-shadow:0 2px 12px rgba(0,0,0,.5); }

/* ---------- 14. 카드 ---------- */
.cards { display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:1fr; }
@media (min-width:700px){ .cards--2{ grid-template-columns:1fr 1fr; } }
@media (min-width:820px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }
.card { background:var(--surface,#fff); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease-out); }
.section--dark .card { background:color-mix(in srgb, var(--aubergine) 92%, black); border-color:rgba(255,255,255,.08); }
.card:hover { transform:translateY(-6px); }
.card__media { aspect-ratio:4/3; overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.card:hover .card__media img { transform:scale(1.05); }
.card__body { padding:1.5rem; }
.card__idx { font-family:var(--f-body); font-weight:600; font-size:.78rem; letter-spacing:.12em; color:color-mix(in srgb, var(--orchid) 75%, var(--aubergine)); }
.section--dark .card__idx { color:var(--orchid); }
.card__title { font-family:var(--f-serif-kr); font-weight:600; font-size:var(--fs-h3); line-height:1.3; margin:.55rem 0 .7rem; }
.card__text { font-size:.98rem; line-height:1.7; color:color-mix(in srgb, currentColor 74%, transparent); }

/* ---------- 15. 가격 ---------- */
.price { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:760px){ .price{ grid-template-columns:repeat(3,1fr); } }
.price__card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; }
.price__card.feature { background:var(--aubergine); color:var(--ivory); border-color:var(--aubergine); }
.price__name { font-family:var(--f-serif-kr); font-weight:600; font-size:1.25rem; }
.price__amt { font-family:var(--f-serif-en); font-size:2rem; margin:.6rem 0; }
.price__amt small { font-family:var(--f-body); font-size:.85rem; color:var(--text-sub); }
.price__card.feature .price__amt small { color:color-mix(in srgb, var(--ivory) 70%, transparent); }
.price__list { margin-top:1rem; font-size:.92rem; line-height:1.9; color:color-mix(in srgb, currentColor 76%, transparent); }

/* ---------- 16. 지점 ---------- */
.studio-hero { display:grid; grid-template-columns:1fr; gap:0; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.1); }
@media (min-width:820px){ .studio-hero{ grid-template-columns:1.1fr .9fr; } }
.studio-hero__media { position:relative; min-height:300px; }
.studio-hero__body { padding:clamp(1.75rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.badge { display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; padding:.4rem .9rem; border-radius:var(--pill); background:color-mix(in srgb, var(--orchid) 22%, transparent); color:var(--orchid); font-size:.78rem; font-weight:600; letter-spacing:.06em; margin-bottom:1rem; }
.badge .live { width:7px; height:7px; border-radius:50%; background:var(--orchid); box-shadow:0 0 0 0 var(--orchid); animation:pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--orchid) 70%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.roadmap { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.roadmap span { font-size:.82rem; padding:.5rem .9rem; border-radius:var(--pill); border:1px solid rgba(255,255,255,.16); color:color-mix(in srgb, var(--ivory) 65%, transparent); }
.roadmap span.now { background:var(--ivory); color:var(--aubergine); border-color:var(--ivory); font-weight:600; }

/* ---------- 17. 마퀴 ---------- */
.marquee { overflow:hidden; white-space:nowrap; padding-block:clamp(1.5rem,4vw,3rem); border-block:1px solid color-mix(in srgb, currentColor 18%, transparent); }
.marquee__track { display:inline-flex; gap:2rem; will-change:transform; }
.marquee__track span { font-family:var(--f-serif-en); font-style:italic; font-size:clamp(1.75rem,5vw,3.4rem); }
.marquee__track .kr { font-family:var(--f-serif-kr); font-style:normal; font-weight:500; }
.marquee__track .dot { color:var(--orchid); font-style:normal; }

/* ---------- 18. 리뷰(실제 인물 사진) ---------- */
.quotes { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:760px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote { background:color-mix(in srgb, var(--ivory) 7%, transparent); border:1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius:var(--radius); padding:1.9rem; display:flex; flex-direction:column; }
.quote p { font-size:1rem; line-height:1.72; max-width:none; flex:1; }
.quote__who { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; }
.quote__ph { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.quote__meta b { font-family:var(--f-serif-kr); font-weight:600; font-size:.95rem; display:block; }
.quote__meta span { font-size:.78rem; color:var(--text-sub); }

/* ---------- 19. 블로그 ---------- */
.post-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .4s var(--ease-out); }
.section--dark .post-card { background:color-mix(in srgb,var(--aubergine) 92%,black); border-color:rgba(255,255,255,.08); }
.post-card:hover { transform:translateY(-6px); }
.post-card__media { aspect-ratio:16/10; overflow:hidden; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.post-card:hover .post-card__media img { transform:scale(1.05); }
.post-card__body { padding:1.5rem; }
.post-card__meta { display:flex; gap:.75rem; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb,var(--orchid) 75%,var(--aubergine)); margin-bottom:.7rem; }
.section--dark .post-card__meta { color:var(--orchid); }
.post-card__title { font-family:var(--f-serif-kr); font-weight:600; font-size:1.25rem; line-height:1.4; }
.post-card__excerpt { margin-top:.7rem; font-size:.95rem; line-height:1.7; color:color-mix(in srgb,currentColor 72%,transparent); }
.article { max-width:72ch; margin-inline:auto; }
.article h2 { font-family:var(--f-serif-kr); font-weight:600; font-size:var(--fs-h2); margin:2.5rem 0 1rem; line-height:1.35; }
.article h3 { font-family:var(--f-serif-kr); font-weight:600; font-size:var(--fs-h3); margin:2rem 0 .75rem; }
.article p { font-size:1.075rem; line-height:1.85; margin-bottom:1.25rem; }
.article ul.bullets { margin:0 0 1.25rem 1.1rem; list-style:disc; } .article ul.bullets li { margin-bottom:.5rem; line-height:1.8; }
.article blockquote { border-left:3px solid var(--orchid); padding-left:1.25rem; margin:1.5rem 0; font-family:var(--f-serif-kr); font-size:1.2rem; line-height:1.6; }

/* ---------- 20. FAQ ---------- */
.faq details { border-bottom:1px solid color-mix(in srgb, currentColor 15%, transparent); padding:1.35rem 0; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; font-family:var(--f-serif-kr); font-weight:500; font-size:1.2rem; line-height:1.45; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--orchid); transition:transform .3s; font-family:var(--f-body); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin-top:.85rem; }

/* ---------- 21. 폼 ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.field label { font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb,var(--orchid) 75%,var(--aubergine)); }
.section--dark .field label { color:var(--orchid); }
.field input, .field textarea, .field select { padding:.9rem 1.05rem; border-radius:10px; background:color-mix(in srgb, currentColor 7%, transparent); border:1px solid color-mix(in srgb, currentColor 24%, transparent); color:currentColor; font:inherit; font-size:.98rem; min-height:48px; }
.field textarea { min-height:130px; resize:vertical; }
.check { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:color-mix(in srgb, currentColor 72%, transparent); }

/* ---------- 22. 푸터 ---------- */
.footer { background:color-mix(in srgb, var(--aubergine) 88%, black); color:var(--ivory); padding-block:clamp(3.5rem,7vw,6rem) 5.5rem; position:relative; z-index:2; overflow:hidden; }
.footer__grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem 1.5rem; position:relative; z-index:2; }
@media (min-width:820px){ .footer__grid{ grid-template-columns:1.5fr repeat(3,1fr); } }
.footer h5 { font-weight:600; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orchid); margin-bottom:1rem; }
.footer a { display:block; padding:.32rem 0; opacity:.72; transition:opacity .2s; }
.footer a:hover { opacity:1; }
.footer__tag { margin-top:.9rem; font-family:var(--f-serif-en); font-style:italic; font-size:1rem; color:color-mix(in srgb,var(--ivory) 75%,transparent); max-width:34ch; line-height:1.5; }
.footer__bottom { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.72rem; letter-spacing:.04em; color:var(--text-sub); position:relative; z-index:2; }

/* ---------- 23. 미디어 슬롯 ---------- */
.slot { position:relative; display:grid; place-items:center; background:linear-gradient(135deg, var(--aubergine-80), var(--aubergine)); color:color-mix(in srgb, var(--ivory) 60%, transparent); overflow:hidden; }
.slot::before { content:""; position:absolute; inset:0; opacity:.4; background:radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--orchid) 45%, transparent), transparent 60%), radial-gradient(90% 80% at 80% 90%, color-mix(in srgb, var(--rose) 40%, transparent), transparent 55%); }
.slot__label { position:relative; z-index:2; font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:1rem; line-height:1.7; }
.slot__label b { color:var(--orchid); }
.watermark { position:absolute; pointer-events:none; opacity:.05; z-index:0; }
.watermark svg { width:clamp(200px,38vw,520px); height:auto; }

/* ---------- 23-B. 히어로 하단(리드 + 쇼릴 카드) · 아바타 버튼 ---------- */
.hero__lower { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-top:clamp(2rem,7vh,4.5rem); }
.hero__desc { max-width:44ch; font-size:.98rem; line-height:1.7; color:var(--ivory); opacity:.9; }
.hero-reel { width:min(320px,82vw); background:rgba(59,49,69,.5); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:.5rem; }
.hero-reel .thumb { aspect-ratio:16/10; border-radius:10px; overflow:hidden; }
.hero-reel .row { display:flex; align-items:center; justify-content:space-between; padding:.6rem .5rem .25rem; color:var(--ivory); font-size:.88rem; }
.hero-reel .play { width:32px; height:32px; border-radius:50%; background:var(--orchid); display:grid; place-items:center; color:var(--aubergine); font-size:.7rem; }
.btn--avatar { padding-left:.5rem; }
.btn__ava { width:30px; height:30px; border-radius:50%; flex:none; }
.hero__secondary { display:inline-flex; align-items:center; gap:.55rem; color:var(--ivory); font-weight:600; font-size:.92rem; }
.hero__secondary .ic { width:26px; height:20px; border-radius:5px; overflow:hidden; display:inline-block; }

/* ---------- 25. 피처 카드(블로그 대형 이미지 + 플러스) ---------- */
.feature-cards { display:grid; grid-template-columns:1fr; gap:clamp(1rem,2vw,1.4rem); }
@media (min-width:760px){ .feature-cards{ grid-template-columns:1fr 1fr; } }
.feature-card { position:relative; display:block; aspect-ratio:16/11; border-radius:16px; overflow:hidden; }
.feature-card .fc-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.feature-card:hover .fc-media { transform:scale(1.05); }
.feature-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(30,24,36,.62), transparent 55%); z-index:1; }
.feature-card__title { position:absolute; left:1.4rem; right:4.6rem; bottom:1.3rem; z-index:2; color:#fff; }
.feature-card__title .kr { font-family:var(--f-serif-kr); font-weight:600; font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.35; }
.feature-card__meta { display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orchid); margin-bottom:.5rem; }
.feature-card__plus { position:absolute; right:1.15rem; bottom:1.15rem; z-index:3; width:44px; height:44px; border-radius:12px; background:#fff; color:var(--aubergine); display:grid; place-items:center; font-size:1.4rem; line-height:1; transition:transform .35s var(--ease-out); }
.feature-card:hover .feature-card__plus { transform:rotate(90deg); }

/* ---------- 26. 스크롤 확대 미디어 (풀블리드 + 텍스트 오버레이) ---------- */
.grow-wrap { width:100%; margin-top:clamp(2rem,6vw,4rem); }
.grow-media__inner { position:relative; width:var(--gw,66%); max-width:100%; margin-inline:auto; aspect-ratio:16/9; overflow:hidden; border-radius:var(--gr,24px); will-change:width; }
.grow-overlay { position:absolute; inset:0; z-index:3; display:grid; place-items:center; opacity:var(--go,0); background:rgba(30,24,36,calc(.28 * var(--go,0))); transition:opacity .2s linear; }
.grow-overlay__msg { font-family:var(--f-serif-kr); font-weight:600; font-size:clamp(1.5rem,4.5vw,3.2rem); line-height:1.4; color:#fff; text-align:center; text-shadow:0 2px 24px rgba(0,0,0,.45); }
@media (prefers-reduced-motion:reduce){ .grow-media__inner{ width:100%; } .grow-overlay{ opacity:1; } }

/* ---------- 27. 리뷰 (연속 롤링 마퀴) + Trusted by ---------- */
.trusted { display:flex; flex-direction:column; align-items:center; gap:.9rem; margin:2rem 0 3rem; }
.trusted__label { font-size:.9rem; color:var(--text-sub); }
.trusted__avatars { display:flex; }
.trusted__avatars .av { width:46px; height:46px; border-radius:50%; overflow:hidden; margin-left:-9px; border:2px solid var(--ivory); }
.section--light .trusted__avatars .av, .section--cream .trusted__avatars .av { border-color:var(--bg-cream); }
.review-marquee { position:relative; overflow:hidden; padding-block:.75rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.review-track { display:flex; gap:1.5rem; width:max-content; will-change:transform; }
.review-card { position:relative; flex:0 0 auto; width:min(400px,84vw); background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.9rem; display:flex; flex-direction:column; }
.review-card p { font-size:1rem; line-height:1.8; max-width:none; flex:1; }
.review-card__who { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; }
.review-card__ph { width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; }
.review-card__meta b { font-family:var(--f-serif-kr); font-weight:600; font-size:.95rem; display:block; }
.review-card__meta span { font-size:.78rem; color:var(--text-sub); }
.review-note { max-width:52ch; margin:1.75rem auto 0; text-align:center; font-size:.82rem; line-height:1.7; color:color-mix(in srgb, currentColor 60%, transparent); }

/* ---------- 28. 강사 카드 (지점 + 더보기) ---------- */
.teacher-card { display:flex; flex-direction:column; }
.teacher-card__branch { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-sub); margin:.25rem 0 .75rem; }
.teacher-card__branch::before { content:"📍"; font-size:.85em; }
.teacher-more { margin-top:1rem; }
.teacher-more__btn { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-body); font-weight:600; font-size:.86rem; color:color-mix(in srgb,var(--orchid) 78%,var(--aubergine)); }
.section--dark .teacher-more__btn { color:var(--orchid); }
.teacher-more__btn .chev { transition:transform .35s var(--ease-out); display:inline-block; }
.teacher-card.open .teacher-more__btn .chev { transform:rotate(180deg); }
.teacher-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
.teacher-card.open .teacher-detail { grid-template-rows:1fr; }
.teacher-detail__inner { overflow:hidden; }
.teacher-detail dl { margin-top:1rem; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:.9rem; line-height:1.7; }
.teacher-detail dt { font-weight:600; color:color-mix(in srgb,var(--orchid) 78%,var(--aubergine)); }
.section--dark .teacher-detail dt { color:var(--orchid); }
.teacher-detail dd { color:color-mix(in srgb, currentColor 78%, transparent); }

/* 고객센터 링크(네비 우측) */
.nav__support { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--ivory); opacity:.85; transition:opacity .2s; }
.nav__support:hover { opacity:1; }
.nav__support .dot { width:6px; height:6px; border-radius:50%; background:var(--orchid); }

/* ---------- 29. 사진 스트립(무한 스크롤 갤러리) ---------- */
.photo-strip { overflow:hidden; padding-block:.5rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.photo-strip + .photo-strip { margin-top:1rem; }
.photo-strip .marquee__track { display:inline-flex; gap:1rem; align-items:stretch; will-change:transform; }
.photo-strip .ps-item { height:clamp(190px,26vw,330px); border-radius:14px; overflow:hidden; flex:none; }
.photo-strip .ps-item img { height:100%; width:auto; max-width:none; object-fit:cover; display:block; transition:transform .6s var(--ease-out); }
.photo-strip .ps-item:hover img { transform:scale(1.06); }

/* ---------- 24. 반응형 ---------- */
@media (max-width:767px){ .footer__bottom{ flex-direction:column; } .hero__lower{ align-items:flex-start; } }