/* ONFORM Pilates — base + Section 1 (header + hero + ticker) */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- shared type primitives ---- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}
.display em { font-style: italic; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
}

.u-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }

/* ---- pill text-link CTA (실측: 얇은 outline pill, mono uppercase) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 24px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill .arrow { transition: transform var(--dur) var(--ease); }
.pill:hover { background: var(--c-espresso); color: var(--c-cream); border-color: var(--c-espresso); }
.pill:hover .arrow { transform: translateX(4px); }
.pill--solid { background: var(--c-espresso); color: var(--c-cream); border-color: var(--c-espresso); }
.pill--solid:hover { background: transparent; color: var(--c-espresso); }
.pill--onhero { color: var(--c-on-dark); }
.pill--onhero:hover { background: var(--c-cream); color: var(--c-espresso); border-color: var(--c-cream); }

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--pad-x);
  color: var(--c-on-dark);                 /* hero 위 = cream */
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header.is-scrolled {
  background: var(--c-sand);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-hairline);
}
.brand {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.nav-main { display: none; }
.nav-main ul {
  display: flex;
  gap: var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-main a {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.nav-main a:hover { border-color: currentColor; }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); }
.header-actions .link-login {
  display: none;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.menu-toggle {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--c-cream);
  color: var(--c-espresso);
}

/* mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-espresso);
  color: var(--c-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--pad-x);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.nav-drawer.is-open { transform: translateY(0); visibility: visible; }
.nav-drawer a {
  font-family: var(--f-display);
  font-size: clamp(2rem, 10vw, 3rem);
  line-height: 1.15;
}
.nav-drawer .drawer-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--pad-x);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) clamp(64px, 12vh, 120px);
  overflow: hidden;
  background: var(--c-espresso); /* 이미지 로드 전 flat 폴백 (gradient 0) */
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* 텍스트 가독 — flat 톤 오버레이 (실측: 웜 어둑 처리). gradient 아닌 단색 + blend */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-espresso);
  opacity: 0.44;            /* 모바일 기준 — 밝은 창 위 cream 텍스트 가독 확보 */
  mix-blend-mode: multiply;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; color: var(--c-on-dark); }
.hero .eyebrow { color: var(--c-on-dark); opacity: 0.85; }
.hero__title {
  font-size: var(--fs-hero);
  margin: var(--sp-5) 0 var(--sp-6);
}
.hero__title .line { display: block; }
.hero__sub {
  max-width: var(--col-text);
  color: var(--c-on-dark);
  opacity: 0.9;
  margin: 0 0 var(--sp-8);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ============ TICKER (마퀴) ============ */
.ticker {
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
  background: var(--c-sand);
  overflow: hidden;
  padding: var(--sp-4) 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--sp-9);
  animation: ticker-scroll 38s linear infinite;
}
.ticker__item {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
  white-space: nowrap;
}
.ticker__item::before { content: "—"; margin-right: var(--sp-9); color: var(--c-muted); }
@keyframes ticker-scroll {
  to { transform: translateX(calc(-50% - var(--sp-9) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* reveal (IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ section primitives ============ */
.section { padding-block: clamp(64px, 11vw, 120px); }
.section--cream { background: var(--c-cream); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-5); }
.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-espresso);
  margin: 0;
}
.section-title em { font-style: italic; }
.section-head__row { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-6); flex-wrap: wrap; }
.section-sub { max-width: var(--col-text); color: var(--c-taupe); margin: var(--sp-5) 0 0; }

/* ============ SECTION 2 — APPROACH (01–03 mono 넘버드) ============ */
.approach__statement {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-espresso);
  max-width: 18ch;
  margin: 0 0 clamp(48px, 7vw, 88px);
}
.approach__statement em { font-style: italic; }
.principles { display: grid; gap: var(--sp-8); }
.principle { padding-top: var(--sp-6); border-top: 1px solid var(--c-hairline); }
.principle__num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-clay);
  display: block;
  margin-bottom: var(--sp-5);
}
.principle__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
  color: var(--c-espresso);
  margin: 0 0 var(--sp-3);
}
.principle__title small {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
  margin-left: var(--sp-3);
}
.principle p { margin: 0; color: var(--c-taupe); font-size: 1rem; }

/* ============ SECTION 3 — CLASSES (비대칭 행 + 아치 이미지) ============ */
.class-row {
  display: grid;
  gap: var(--sp-6);
  padding-block: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--c-hairline);
  align-items: center;
}
.class-row:last-of-type { border-bottom: 1px solid var(--c-hairline); }
.class-row__num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-clay);
}
.class-row__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-h3);
  color: var(--c-espresso);
  margin: var(--sp-3) 0 var(--sp-4);
}
.class-row__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-espresso);
  background: var(--c-warmgrey);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.class-row p { margin: 0 0 var(--sp-6); color: var(--c-taupe); max-width: 46ch; }
.class-link {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-espresso);
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
  border-bottom: 1px solid var(--c-hairline);
  padding-bottom: 3px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.class-link:hover { border-color: var(--c-espresso); gap: var(--sp-4); }
.class-row__media {
  overflow: hidden;
  border-radius: 160px 160px var(--r-input) var(--r-input); /* 아치 top, 역할별 radius */
  background: var(--c-warmgrey);
  aspect-ratio: 3 / 4;
  max-width: 340px;
}
.class-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* dark section variant */
.section--dark { background: var(--c-espresso); color: var(--c-on-dark); }
.section--dark .section-title,
.section--dark .display { color: var(--c-on-dark); }
.section--dark .eyebrow { color: var(--c-muted); }
.section--dark .section-sub { color: var(--c-warmgrey); }

/* ============ SECTION 4 — PRICING ============ */
.price-grid { display: grid; }
.price-item {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--c-hairline);
  display: grid;
  gap: var(--sp-4);
}
.price-item__cat {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-clay);
}
.price-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.price-item__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
  color: var(--c-espresso);
  margin: 0;
}
.price-item__amount {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--c-espresso);
  white-space: nowrap;
}
.price-item p { margin: 0; color: var(--c-taupe); font-size: 1rem; max-width: 42ch; }
.price-note {
  margin-top: var(--sp-8);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
}

/* ============ SECTION 5 — MEMBERSHIP (다크 2-col) ============ */
.membership__grid { display: grid; gap: var(--sp-8); align-items: center; }
.membership__media {
  overflow: hidden;
  border-radius: var(--r-input);
  aspect-ratio: 4 / 5;
  background: rgba(234, 232, 225, 0.08);
}
.membership__media img { width: 100%; height: 100%; object-fit: cover; }
.membership__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-on-dark);
  margin: var(--sp-5) 0 var(--sp-6);
}
.membership__title em { font-style: italic; }
.membership__body > p { color: var(--c-warmgrey); margin: 0 0 var(--sp-6); max-width: 48ch; }
.perks { list-style: none; padding: 0; margin: 0 0 var(--sp-8); display: grid; gap: var(--sp-4); }
.perks li { display: flex; gap: var(--sp-4); align-items: flex-start; color: var(--c-on-dark); }
.perks .check { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--c-clay); }
.perks span { font-size: 1rem; }

/* ============ SECTION 6 — LOCATION + EXPERIENCE ============ */
.location__grid { display: grid; gap: var(--sp-8); align-items: center; }
.location__eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-espresso);
  background: var(--c-clay);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.location__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-espresso);
  margin: 0 0 var(--sp-5);
}
.location__title em { font-style: italic; }
.location__grid p { color: var(--c-taupe); margin: 0 0 var(--sp-7); max-width: 42ch; }
.location__info { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; gap: var(--sp-3); }
.location__info li {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-hairline);
}
.location__media {
  overflow: hidden;
  border-radius: var(--r-input);
  aspect-ratio: 4 / 3;
  background: var(--c-warmgrey);
  padding: var(--sp-3);
}
.location__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

.experience { text-align: center; padding-block: clamp(56px, 9vw, 110px); }
.experience__line {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--c-espresso);
  max-width: 24ch;
  margin: 0 auto;
}
.experience__line em { font-style: italic; color: var(--c-clay); }

/* ============ SECTION 7 — FAQ (accordion) ============ */
.faq__list { border-top: 1px solid var(--c-hairline); }
.faq__item { border-bottom: 1px solid var(--c-hairline); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h5);
  letter-spacing: -0.01em;
  color: var(--c-espresso);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: var(--c-clay);
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item .faq__a { margin: 0 0 var(--sp-7); color: var(--c-taupe); max-width: 64ch; }

/* ============ SECTION 8 — JOIN band ============ */
.join {
  background: var(--c-espresso);
  color: var(--c-on-dark);
  text-align: center;
  padding-block: clamp(80px, 13vw, 160px);
}
.join__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--c-on-dark);
  margin: 0;
}
.join__title em { font-style: italic; }
.join__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.ig-mark { width: 15px; height: 15px; }

/* ============ SECTION 9 — CONTACT (form auto-attach) ============ */
.contact__grid { display: grid; gap: var(--sp-9); }
.form-field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.form-field label {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-taupe);
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-cream);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-input);
  padding: 13px 15px;
  width: 100%;
}
.contact__form textarea { min-height: 130px; resize: vertical; }
.contact__form :focus-visible { outline: none; border-color: var(--c-espresso); }
.contact__submit {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  background: var(--c-espresso);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  padding: 15px 32px;
  transition: opacity var(--dur) var(--ease);
}
.contact__submit:hover { opacity: 0.86; }
.contact__info { color: var(--c-taupe); }
.contact__info dt {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-clay);
  margin-bottom: var(--sp-2);
}
.contact__info dd { margin: 0 0 var(--sp-6); color: var(--c-espresso); }

/* ============ FOOTER (full) ============ */
.site-footer { background: var(--c-espresso); color: var(--c-on-dark); padding-block: var(--sp-10); }
.footer__grid { display: grid; gap: var(--sp-8); }
.footer__brand {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--c-on-dark);
}
.footer__col h4 {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--sp-5);
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer__col a, .footer__col li {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-on-dark);
}
.footer__col--info li, .footer__col--info a {
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--c-warmgrey);
}
.footer__col a { transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--c-clay); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(234, 232, 225, 0.16);
}
.footer__bottom p, .footer__bottom a {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}
.footer__legal { display: flex; gap: var(--sp-6); }
.footer__legal a { transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: var(--c-on-dark); }

/* ============ responsive (mobile-first cascade) ============ */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .nav-main { display: block; }
  .header-actions .link-login { display: inline; }
  .hero__title { margin-top: var(--sp-7); }
  .hero__media::after { opacity: 0.30; }

  .principles { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
  .class-row { grid-template-columns: 1fr 340px; gap: var(--sp-10); align-items: center; }
  .class-row__media { justify-self: end; }

  .price-grid { grid-template-columns: 1fr 1fr; column-gap: var(--sp-10); }
  .membership__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-10); }
  .location__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-10); }
  .contact__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-10); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: var(--sp-9); align-items: start; }
}
@media (min-width: 1024px) {
  .hero__inner { max-width: 820px; }
  .approach__statement { font-size: var(--fs-h2); max-width: 22ch; }
}