/* 숨마디 요가 — 동네 요가원 디자인 샘플 (디코랩)
   구성: 척추 세로축. 화면 가운데(모바일은 왼쪽 가장자리) 세로선이 척추이고, 마디 일곱 개(정수리 → 꼬리뼈)가 섹션 메뉴.
   섹션은 축의 좌우에 번갈아 붙고, 섹션 머리말은 요가 선생님의 정렬 큐로 연다.
   색은 요가원 실물에서: 석회벽, 숯, 테라코타 화분, 코르크 블록, 올리브 잎, 면 스트랩 */
:root {
  --color-plaster: #F7F5F1;       /* 석회벽 — 배경 */
  --color-paper: #FBFAF7;         /* 밝은 면 — 표·그림 바탕 */
  --color-charcoal: #2A2522;      /* 숯 — 본문 글자 */
  --color-stone: #625953;         /* 보조 글자 */
  --color-clay: #B4583A;          /* 테라코타 화분 — 주 버튼·지금 마디에만 (theme-color) */
  --color-clay-deep: #96452B;
  --color-clay-tint: #F2DDD3;
  --color-cork: #D9BF98;          /* 코르크 블록 — 보조 면 */
  --color-cork-tint: #F1E5D1;
  --color-olive: #66704A;         /* 올리브 잎 — 척추 선·보조 표시 */
  --color-olive-tint: #E3E7D5;
  --color-cotton: #ECE7DE;        /* 면 스트랩 — 카드 면 */
  --color-line: #D8D0C3;
  --color-kakao: #FEE500;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-title: "Gowun Dodum", var(--font);

  --fs-h1: clamp(1.9rem, 1.3rem + 2.3vw, 3.1rem);
  --fs-h2: clamp(1.65rem, 1.25rem + 1.4vw, 2.35rem);
  --fs-h3: 1.16rem;
  --fs-body: 1rem;
  --fs-small: .87rem;

  --head-h: 58px;
  --qb-h: 64px;
  --axis-x: 22px;                 /* 모바일 척추 위치 */
  --sec-gap: clamp(56px, 8vw, 120px);
  --gutter: 18px;
  --radius: 10px;
}
@media (min-width: 1024px) {
  :root { --head-h: 68px; --qb-h: 0px; --gutter: 40px; --fs-body: 1.03rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 10px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-charcoal);
  background: var(--color-plaster);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--qb-h) + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
small { font-size: .82em; color: var(--color-stone); font-weight: 400; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-charcoal); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-olive); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .45em; border: 1.5px dashed currentColor; border-radius: 4px; opacity: .78; font-size: .92em; line-height: 1.55; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-charcoal); color: #E9E4DC; font-size: .8rem; line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; max-width: 1280px; margin-inline: auto; padding: 8px var(--gutter); }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 3px; background: var(--color-cork); color: var(--color-charcoal); font-weight: 700; font-size: .74rem; }
.sample-banner a { color: var(--color-cork); font-weight: 600; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px;
  border: 1.5px solid var(--color-charcoal); border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--color-charcoal);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--clay { background: var(--color-clay); border-color: var(--color-clay); color: #fff; }
.btn--clay:hover { background: var(--color-clay-deep); border-color: var(--color-clay-deep); }
.btn--line:hover { background: var(--color-cotton); }
.btn--kakao { background: var(--color-kakao); border-color: var(--color-kakao); color: #191600; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .93rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--color-plaster); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; gap: 10px; height: var(--head-h); max-width: 1280px; margin-inline: auto; padding: 0 var(--gutter); }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.logo__mark { width: 34px; height: 34px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__text b { font-family: var(--font-title); font-weight: 400; font-size: 1.12rem; letter-spacing: -.01em; white-space: nowrap; }
.logo__text small { display: none; font-size: .74rem; }
.site-header__now { flex: 1; min-width: 0; font-size: .8rem; color: var(--color-stone); line-height: 1.3; text-align: right; overflow: hidden; }
.site-header__now span { white-space: nowrap; }
.site-header__now b { color: var(--color-clay-deep); font-weight: 700; }
.site-header__open { display: none; }
.site-header__tel span { display: none; }
.site-header__tel { width: 42px; padding: 0; flex: none; }
.menu-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; min-width: 44px; min-height: 44px; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 600; color: var(--color-charcoal); cursor: pointer; }
.menu-btn__bars { position: relative; width: 4px; height: 20px; }
.menu-btn__bars::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--color-charcoal) 2px, transparent 2.5px) 0 0 / 4px 6.6px repeat-y; }
@media (min-width: 640px) { .logo__text small { display: block; } }
@media (min-width: 1024px) {
  .site-header__now, .menu-btn { display: none; }
  .site-header__open { display: block; flex: 1; text-align: right; font-size: .88rem; color: var(--color-stone); }
  .site-header__tel { width: auto; padding: 0 18px; }
  .site-header__tel span { display: inline; }
}

/* ---------- 척추 메뉴 ---------- */
.spine {
  position: fixed; z-index: 30;
  top: calc(var(--head-h) + 22px); bottom: calc(var(--qb-h) + env(safe-area-inset-bottom) + 22px);
  left: calc(var(--axis-x) - 16px); width: 32px;
  transition: opacity .3s;
}
.spine.is-away { opacity: 0; pointer-events: none; }
.spine__list { display: flex; flex-direction: column; height: 100%; }
.vert { position: relative; flex: 1 1 0; min-height: 34px; }
.vert:last-child { flex: 0 0 32px; min-height: 32px; }
.vert__seg {
  position: absolute; left: 50%; top: 16px; width: 3px; height: 100%; margin-left: -1.5px;
  background: var(--color-olive); border-radius: 2px; opacity: .55; transform-origin: 50% 0;
}
.node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; text-decoration: none; }
.node__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-plaster); border: 2.5px solid var(--color-olive);
  transition: transform .3s, background-color .3s, border-color .3s;
}
.node:hover .node__dot { background: var(--color-olive-tint); }
.node.is-active .node__dot { background: var(--color-clay); border-color: var(--color-clay); transform: scale(1.45); box-shadow: 0 0 0 4px rgba(180, 88, 58, .2); }
.node__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) {
  .spine { left: 50%; margin-left: -16px; top: calc(var(--head-h) + 40px); bottom: 40px; }
  .node__label {
    width: auto; height: auto; overflow: visible; clip: auto;
    top: 50%; right: calc(100% + 6px); transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; padding: 2px 8px;
    border-radius: 6px; background: var(--color-plaster);
    font-size: .78rem; line-height: 1.3; color: var(--color-stone);
    transition: color .3s, background-color .3s;
  }
  .node__label small { font-size: .7rem; color: var(--color-olive); }
  .vert:nth-child(even) .node__label { right: auto; left: calc(100% + 6px); align-items: flex-start; }
  .node:hover .node__label { color: var(--color-charcoal); }
  .node.is-active .node__label { color: #fff; background: var(--color-clay); font-weight: 700; }
  .node.is-active .node__label small { color: #F8E4DA; }
}
body.nav-open .spine, body.nav-open .quickbar { visibility: hidden; }

/* 모바일 목차 서랍 */
.drawer {
  position: fixed; z-index: 45; top: var(--head-h); left: 0; right: 0;
  max-height: calc(100vh - var(--head-h)); overflow: auto;
  padding: 18px var(--gutter) 24px; background: var(--color-plaster); border-bottom: 1px solid var(--color-line);
}
.drawer__title { font-size: .82rem; color: var(--color-stone); margin-bottom: 6px; }
.drawer__list { position: relative; margin-bottom: 18px; }
.drawer__list::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 22px; width: 2px; background: var(--color-olive); opacity: .5; }
.drawer__list a { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 9px 0 9px 28px; text-decoration: none; font-weight: 600; }
.drawer__list a::before { content: ""; position: absolute; left: 1px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--color-plaster); border: 2.5px solid var(--color-olive); }
.drawer__list a.is-active::before { background: var(--color-clay); border-color: var(--color-clay); }
.drawer__list a.is-active { color: var(--color-clay-deep); }
.drawer__part { min-width: 4.2em; font-size: .8rem; font-weight: 400; color: var(--color-olive); }
@media (min-width: 1024px) { .drawer { display: none !important; } }

/* ---------- 페이지 축과 줄(섹션) ---------- */
.page { position: relative; }
.page::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--axis-x); width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--color-olive) 0 4px, transparent 4px 10px); opacity: .4;
}
.row { position: relative; padding: var(--sec-gap) var(--gutter) 14px 52px; scroll-margin-top: var(--head-h); }
.row:last-child { padding-bottom: var(--sec-gap); }
.row__head, .row__body { max-width: 640px; }
.row__body { position: relative; margin-top: 26px; }
/* 축에서 내용으로 가는 가지선 */
.row__body::before {
  content: ""; position: absolute; top: 22px; left: -30px; width: 26px; height: 2px;
  background: var(--color-olive); transform-origin: 0 50%;
}
.row__body::after {
  content: ""; position: absolute; top: 18px; left: -34px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-plaster); border: 2px solid var(--color-olive);
}
.cue { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: .9rem; font-weight: 600; color: var(--color-olive); }
.cue__no { padding: 1px 9px; border-radius: 999px; background: var(--color-olive-tint); font-size: .76rem; font-weight: 700; }
.row h2 { font-size: var(--fs-h2); }
.cue__say { margin-top: 12px; font-family: var(--font-title); font-size: 1.12rem; color: var(--color-clay-deep); }
.row__lead { margin-top: 12px; color: var(--color-stone); max-width: 34em; }
.row__lead strong { color: var(--color-charcoal); }
.note { margin-top: 16px; font-size: var(--fs-small); color: var(--color-stone); }
.fig-cap { margin-top: 10px; font-size: var(--fs-small); color: var(--color-stone); }

@media (min-width: 1024px) {
  .page::before { left: 50%; }
  .row {
    display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); align-items: start;
    max-width: 1320px; margin-inline: auto; padding: var(--sec-gap) var(--gutter) 14px;
  }
  .row__head, .row__body { max-width: none; grid-row: 1; }
  .row__head { grid-column: 1; position: sticky; top: calc(var(--head-h) + 48px); text-align: right; }
  .row__head .cue { justify-content: flex-end; }
  .row__head .row__lead { margin-left: auto; }
  .row__body { grid-column: 3; margin-top: 0; }
  .row__body::before { left: -110px; width: 102px; top: 30px; }
  .row__body::after { left: -115px; top: 26px; }
  .row--flip .row__head { grid-column: 3; text-align: left; }
  .row--flip .row__head .cue { justify-content: flex-start; }
  .row--flip .row__head .row__lead { margin-left: 0; }
  .row--flip .row__body { grid-column: 1; }
  .row--flip .row__body::before { left: auto; right: -110px; transform-origin: 100% 50%; }
  .row--flip .row__body::after { left: auto; right: -115px; }
}
.has-motion .row__body::before { transform: scaleX(0); transition: transform .7s cubic-bezier(.3, .7, .2, 1) .15s; }
.has-motion .row.is-in .row__body::before { transform: scaleX(1); }

/* ---------- 히어로 ---------- */
.hero { padding-top: 28px; }
.hero__kicker { font-size: .92rem; font-weight: 600; color: var(--color-olive); margin-bottom: 10px; }
.hero__title { font-size: var(--fs-h1); line-height: 1.24; }
.hero__lead { margin-top: 14px; color: var(--color-stone); max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__actions .btn { flex: 1 1 200px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: .9rem; }
.hero__facts div { display: flex; gap: 8px; align-items: baseline; }
.hero__facts dt { color: var(--color-olive); font-weight: 700; font-size: .82rem; }
.hero__fig { margin-top: 22px; }
.hero__fig::before, .hero__fig::after { display: none; }
.hero__art { width: 100%; max-width: 480px; height: auto; }
.hero__spine-t text { font-size: 15px; fill: var(--color-olive); font-family: var(--font); font-weight: 600; }
@media (min-width: 1024px) {
  .hero { align-items: center; padding-top: 56px; padding-bottom: 24px; }
  .hero .row__head { position: static; text-align: left; }
  .hero .hero__lead { margin-left: 0; }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__fig { margin-top: 0; }
  .hero__art { margin-left: 10px; }
}
.has-motion .hero__text > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.has-motion .hero__text > :nth-child(2) { animation-delay: .08s; }
.has-motion .hero__text > :nth-child(3) { animation-delay: .16s; }
.has-motion .hero__text > :nth-child(4) { animation-delay: .24s; }
.has-motion .hero__text > :nth-child(5) { animation-delay: .32s; }
.has-motion .hero__spine circle { animation: dot-in .45s ease both; transform-box: fill-box; transform-origin: center; }
.has-motion .hero__spine circle:nth-child(1) { animation-delay: .5s; }
.has-motion .hero__spine circle:nth-child(2) { animation-delay: .62s; }
.has-motion .hero__spine circle:nth-child(3) { animation-delay: .74s; }
.has-motion .hero__spine circle:nth-child(4) { animation-delay: .86s; }
.has-motion .hero__spine circle:nth-child(5) { animation-delay: .98s; }
.has-motion .hero__spine circle:nth-child(6) { animation-delay: 1.1s; }
.has-motion .hero__spine circle:nth-child(7) { animation-delay: 1.22s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* ---------- 마디 1 수업 소개 ---------- */
.cls { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--color-line); }
.cls:last-child { border-bottom: 1px solid var(--color-line); }
.cls__pose { width: 76px; height: auto; }
.cls h3 { font-size: 1.32rem; }
.cls h3 small { font-family: var(--font); font-size: .78rem; margin-left: 4px; }
.cls__tag { font-size: .82rem; font-weight: 700; color: var(--color-olive); }
.cls__text > p:not(.cls__tag):not(.cls__meta) { margin-top: 6px; }
.cls__meta { margin-top: 8px; font-size: .86rem; color: var(--color-stone); font-variant-numeric: tabular-nums; }
.cls--basic { grid-template-columns: 96px minmax(0, 1fr); padding: 22px 20px; border: 0; border-radius: var(--radius); background: var(--color-cotton); margin-bottom: 4px; }
.cls--basic .cls__pose { width: 96px; }
.cls--basic h3 { font-size: 1.55rem; }
.cls--basic + .cls { border-top: 0; }

/* ---------- 마디 2 첫 수업 고르기 ---------- */
.pick fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: .95rem; }
.pick legend small { margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 15px;
  border: 1.5px solid var(--color-line); border-radius: 999px; background: var(--color-paper);
  font-size: .95rem; line-height: 1.35; transition: background-color .2s, border-color .2s, color .2s;
}
.chip--check span::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--color-stone); background: #fff center / 11px no-repeat; }
.chip:hover span { border-color: var(--color-olive); }
.chip input:checked + span { background: var(--color-olive); border-color: var(--color-olive); color: #fff; font-weight: 600; }
.chip--check input:checked + span::before { border-color: #fff; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.5L10 3' fill='none' stroke='%2366704A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip input:focus-visible + span { outline: 3px solid var(--color-olive); outline-offset: 2px; }

.match { margin-top: 8px; padding: 20px; border: 1.5px solid var(--color-charcoal); border-radius: var(--radius); background: var(--color-paper); }
.match__label { font-size: .82rem; font-weight: 700; color: var(--color-olive); }
.match__name { font-size: 1.75rem; margin-top: 2px; }
.match__when { margin-top: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.match__note { margin-top: 8px; font-size: .92rem; color: var(--color-stone); }
.match__card { padding-bottom: 16px; border-bottom: 1px dashed var(--color-line); }
.match__sub { font-size: .84rem; font-weight: 700; color: var(--color-olive); margin-bottom: 6px; }

.flow { padding: 16px 0; border-bottom: 1px dashed var(--color-line); }
.flow__title { font-size: .84rem; font-weight: 700; color: var(--color-olive); margin-bottom: 8px; }
.flow__bar { display: flex; gap: 3px; }
.flow__seg { flex: var(--min) 1 0; min-width: 0; font-size: .8rem; line-height: 1.3; }
.flow__fill { display: block; height: 16px; margin-bottom: 6px; border-radius: 3px; transform-origin: 0 50%; }
.flow__seg b { display: block; font-weight: 700; white-space: nowrap; }
.flow__seg span { color: var(--color-stone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__seg--breath .flow__fill { background: #C3CBAA; }
.flow__seg--warm .flow__fill { background: var(--color-cork); }
.flow__seg--main .flow__fill { background: var(--color-olive); }
.flow__seg--rest .flow__fill { background: #DDD5C6; }
.flow__main { margin-top: 10px; font-size: .92rem; }

.match__cols { display: grid; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--color-line); }
@media (min-width: 560px) { .match__cols { grid-template-columns: 1fr 1fr; } }
.tell ul li, .bring ul li { position: relative; padding-left: 16px; font-size: .92rem; line-height: 1.6; }
.tell ul li + li, .bring ul li + li { margin-top: 6px; }
.tell ul li::before, .bring ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-olive); }
.tell ul li b { font-weight: 700; }
.tell ul li.is-empty { color: var(--color-stone); }
.tell ul li.is-call::before { background: var(--color-clay); }
.bring__have { margin-top: 8px; font-size: .84rem; color: var(--color-stone); }
.say { padding-top: 16px; }
.say__text { padding: 12px 14px; border-radius: 8px; background: var(--color-cotton); font-size: .95rem; }
.say__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- 마디 3 시간표 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: .85rem; }
.row__head .legend { justify-content: inherit; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend li::before { content: ""; width: 14px; height: 14px; border-radius: 3px; }
.legend__basic::before { background: var(--color-cork); }
.legend__hatha::before { background: #A9B28A; }
.legend__vinyasa::before { background: #D9957C; }
@media (min-width: 1024px) { .row__head .legend { justify-content: flex-end; } }
.week { display: grid; gap: 6px; }
.day { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; align-content: start; gap: 8px; padding: 8px 8px; border-radius: 8px; background: var(--color-paper); border: 1.5px solid transparent; }
.day__name { font-family: var(--font-title); font-size: 1.1rem; line-height: 36px; text-align: center; }
.day ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.s { display: flex; flex-direction: column; justify-content: center; min-height: 36px; padding: 3px 6px; border-radius: 5px; font-size: .8rem; line-height: 1.25; border-left: 3px solid; white-space: nowrap; }
.s time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; }
.s--basic { background: var(--color-cork-tint); border-color: var(--color-cork); }
.s--hatha { background: var(--color-olive-tint); border-color: #A9B28A; }
.s--vinyasa { background: var(--color-clay-tint); border-color: #D9957C; }
.s--off { border-color: var(--color-line); color: var(--color-stone); background: transparent; }
.day.is-today { border-color: var(--color-clay); }
.day.is-today .day__name { color: var(--color-clay-deep); font-weight: 700; }
.day__today { display: block; font-family: var(--font); font-size: .66rem; line-height: 1; font-weight: 700; color: var(--color-clay-deep); }
@media (min-width: 1024px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .day { grid-template-columns: 1fr; padding: 8px 5px; gap: 6px; }
  .day__name { height: 46px; line-height: 1.5; padding-top: 4px; }
  .day ul { grid-template-columns: 1fr; }
  .s { padding: 4px 6px; border-left-width: 3px; font-size: .8rem; }
}

/* ---------- 마디 4 수업료 ---------- */
.fees { border-top: 1.5px solid var(--color-charcoal); }
.fee { display: flex; align-items: baseline; gap: 8px; padding: 14px 4px; border-bottom: 1px solid var(--color-line); }
.fee__name { font-weight: 600; }
.fee__name small { display: block; font-weight: 400; }
.fee__dots { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--color-line); transform: translateY(-4px); }
.fee__won { font-variant-numeric: tabular-nums; font-size: 1.12rem; white-space: nowrap; }
.fee--trial { background: var(--color-cotton); padding-inline: 12px; }
.fee--trial .fee__won { color: var(--color-clay-deep); }
.rules { margin-top: 20px; display: grid; gap: 10px; }
.rules div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; font-size: .94rem; }
.rules dt { font-weight: 700; color: var(--color-olive); }

/* ---------- 마디 5 선생님·공간 ---------- */
.teacher { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.teacher__ph { width: 96px; height: auto; }
.teacher__role { font-size: .84rem; font-weight: 700; color: var(--color-olive); }
.teacher h3 { font-size: 1.2rem; margin: 2px 0 6px; }
.teacher p:not(.teacher__role) { font-size: .95rem; }
.teacher__cert { margin-top: 8px; color: var(--color-stone); }
.plan { margin-top: 24px; }
.plan svg { width: 100%; height: auto; border-radius: var(--radius); }
.plan__t { font-size: 15px; fill: var(--color-charcoal); font-family: var(--font); font-weight: 600; }
.plan__s { font-size: 12px; fill: var(--color-olive); font-family: var(--font); font-weight: 600; }
.plan__w { font-size: 14px; fill: #fff; font-family: var(--font); font-weight: 700; }
.space-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.space-facts li { padding: 6px 12px; border-radius: 999px; background: var(--color-cotton); font-size: .88rem; }

/* ---------- 마디 6 자주 묻는 것 ---------- */
.faq { border-top: 1.5px solid var(--color-charcoal); }
.qa { border-bottom: 1px solid var(--color-line); }
.qa h3 { font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.qa button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 2px; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.qa button::after { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--color-olive); transition: background-color .2s; }
.qa.is-open button::after { background: var(--color-olive); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__a > div { overflow: hidden; min-height: 0; }
.qa__a p { padding: 0 2px 16px; color: var(--color-stone); font-size: .96rem; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }

/* ---------- 마디 7 오시는 길 ---------- */
.visit__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (min-width: 1024px) { .row__head .visit__actions { justify-content: flex-end; } }
.map svg { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-line); }
.map__t { font-size: 14px; fill: var(--color-charcoal); font-family: var(--font); font-weight: 600; }
.map__ph { fill: var(--color-stone); font-weight: 400; }
.map__shop { font-size: 13px; fill: var(--color-charcoal); font-family: var(--font); font-weight: 700; }
.map__sub { font-size: 11px; fill: #fff; font-family: var(--font); font-weight: 700; }
.info { margin-top: 18px; display: grid; gap: 8px; }
.info div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; font-size: .95rem; }
.info dt { font-weight: 700; color: var(--color-olive); }
.hours { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.hours th, .hours td { padding: 9px 6px; border-top: 1px solid var(--color-line); text-align: left; }
.hours th { width: 5.5em; font-weight: 600; }
.hours .is-off td { color: var(--color-stone); }
.hours .is-today { background: var(--color-clay-tint); }
.hours__today { margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--color-clay); color: #fff; font-size: .72rem; font-weight: 700; }

/* ---------- 푸터 ---------- */
.site-footer { position: relative; z-index: 31; background: var(--color-charcoal); color: #D9D3C9; font-size: .86rem; }
.site-footer__inner { max-width: 1280px; margin-inline: auto; padding: 40px var(--gutter) 44px; }
.site-footer__logo { font-family: var(--font-title); font-size: 1.3rem; color: #fff; margin-bottom: 12px; }
.site-footer__biz { line-height: 1.85; }
.site-footer__links { display: flex; gap: 16px; margin-top: 14px; }
.site-footer__links .strong { font-weight: 700; color: #fff; }
.site-footer__credit { margin-top: 16px; color: #ADA597; }
.site-footer__credit a { color: var(--color-cork); }

/* ---------- 모바일 하단 고정 바 ---------- */
.quickbar {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr 1.5fr;
  height: calc(var(--qb-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-plaster); border-top: 1px solid var(--color-line);
}
.quickbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.quickbar svg { width: 21px; height: 21px; }
.quickbar__cta { background: var(--color-clay); color: #fff; font-size: .9rem !important; }
@media (min-width: 1024px) { .quickbar { display: none; } }

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--qb-h) + 18px); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px;
  background: var(--color-charcoal); color: #fff; font-size: .9rem;
}

/* ---------- 동작 줄이기 — 척추 휘기·등장은 끄고, 색 피드백·아코디언은 둔다 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .qa__a, .btn, .chip span, .node__dot, .node__label { transition-duration: .2s !important; }
}