/* 요가·성인 운동 세계 · "해 질 녘 흙벽 수련실 — 원 하나가 한 번 숨을 쉬고 멈춘다" (📚 보드 10_요가 §4)
 * 리넨 #F3EEE6 · 카드 #FAF7F2 · 이끼 #2F3A33(글자·버튼·선) · 돌 #6E6A62(보조 글) · 세이지 #CDD5C6(숨 쉬는 원 · 처음 오시는 분 면)
 * 흙 #9C5A38 = 강조 5% (폰 하단 "체험 예약" · "다음 수업" · 첫 방문 한 줄) · 그라데이션 0 · 그림자 0
 * 제목 = 마루 부리(MaruBuri · 네이버 · OFL) 400 한 굵기 · 본문·숫자 Pretendard 400/600 (미술·국어가 고운바탕이라 요가는 마루 부리) */
@font-face{font-family:"MaruBuri";font-weight:400;font-style:normal;font-display:swap;
  src:url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2"),url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff) format("woff")}
:root{--head:"MaruBuri","Nanum Myeongjo","AppleMyungjo",serif;--ink-soft:rgba(47,58,51,.8)}
.h-l,.sec-title,.cta-end h2,.teacher blockquote p,.cls-list h3,.b-n,.cue{font-family:var(--head);font-weight:400}
.sec-title{font-size:28px;line-height:1.4;letter-spacing:-.02em}
.cta-end h2{font-size:28px;line-height:1.4;letter-spacing:-.02em}
.sec-label{color:var(--ink-2)}
@media (min-width:1024px){ .sec-title,.cta-end h2{font-size:40px;line-height:1.36} }

/* ── 첫 화면: 숨 쉬는 원 ───────────────────── */
.hero{position:relative;padding:8px 0 0;overflow:hidden}
.hero-in{position:relative}
.breath{position:relative;width:256px;height:256px;margin:72px -8px 0 auto}
.orb,.ring{position:absolute;border-radius:50%;display:block}
.orb{top:0;left:0;right:0;bottom:0;background:var(--mood);transform:scale(.94)}
.ring{border:1px solid var(--ink);opacity:var(--o)}
.r1{top:-22px;left:-22px;right:-22px;bottom:-22px;--o:.2}
.r2{top:-48px;left:-48px;right:-48px;bottom:-48px;--o:.12}
.r3{top:-80px;left:-80px;right:-80px;bottom:-80px;--o:.07}
.cue{position:absolute;left:0;right:0;top:50%;margin-top:-14px;height:28px;line-height:28px;text-align:center;font-size:17px;letter-spacing:.04em;color:var(--ink)}
.cue-in{opacity:0}
.hero-copy{position:relative;z-index:1;margin-top:-96px}
.eyebrow{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.h-l{display:block;font-size:32px;line-height:1.32;letter-spacing:-.03em}
.hero-sub{margin-top:16px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.hero-act{margin-top:24px;display:flex;align-items:center;flex-wrap:wrap}
.hero-act .btn{margin-right:20px}
.hours{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
.hours li{padding-left:12px;border-left:1px solid var(--line)}
.hours li:first-child{padding-left:0;border-left:0}
.hours strong{display:block;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.hours span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4}

/* 재생 전 모습은 html.fx 에서만 · .go 가 붙으면 숨 한 번 재생하고 멈춤 (transform · opacity 만 · 약 2.85초) */
.fx .hero .h-in{opacity:0;transform:translate3d(0,12px,0)}
.fx .hero.go .h-in{opacity:1;transform:none;transition:opacity 640ms var(--ease-out) var(--d),transform 640ms var(--ease-out) var(--d)}
.fx .hero .orb{transform:scale(.84)}
.fx .hero.go .orb{animation:yg-breath 2600ms both}
@keyframes yg-breath{
  0%{transform:scale(.84);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  54%{transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:scale(.94)}
}
.fx .hero .ring{opacity:0;transform:scale(.9)}
.fx .hero.go .ring{opacity:var(--o);transform:none;transition:opacity 1100ms var(--ease-out) var(--d),transform 1300ms var(--ease-out) var(--d)}
.r1{--d:1250ms}.r2{--d:1400ms}.r3{--d:1550ms}
.fx .hero.go .cue-in{animation:yg-cue 1250ms ease-in-out 150ms both}
@keyframes yg-cue{0%{opacity:0}30%{opacity:1}72%{opacity:1}100%{opacity:0}}
.fx .hero .cue-out{opacity:0}
.fx .hero.go .cue-out{opacity:1;transition:opacity 600ms var(--ease-out) 1450ms}

@media (min-width:1024px){
  .hero{padding:0}
  .hero-in{display:grid;grid-template-columns:6fr 5fr;grid-template-rows:auto auto;align-items:center;min-height:680px;padding-top:120px;padding-bottom:120px}
  .hero-copy{grid-column:1;grid-row:1;margin:0;align-self:end}
  .hours{grid-column:1;grid-row:2;align-self:start;max-width:520px;margin-top:56px;padding-top:20px}
  .hours strong{font-size:28px}
  .hours span{font-size:13px}
  .hours li{padding-left:24px}
  .breath{grid-column:2;grid-row:1 / span 2;justify-self:end;width:480px;height:480px;margin:0 8px 0 0}
  .r1{top:-32px;left:-32px;right:-32px;bottom:-32px}
  .r2{top:-68px;left:-68px;right:-68px;bottom:-68px}
  .r3{top:-108px;left:-108px;right:-108px;bottom:-108px}
  .cue{font-size:22px}
  .eyebrow{font-size:15px;margin-bottom:24px}
  .h-l{font-size:62px;line-height:1.28;white-space:nowrap}
  .hero-sub{font-size:18px;margin-top:28px}
  .hero-act{margin-top:40px}
}

@media (min-width:768px) and (max-width:1023px){ .breath{width:320px;height:320px;margin-right:24px} .hero-copy{margin-top:-120px} }
@media (min-width:1024px) and (max-width:1279px){ .breath{width:400px;height:400px;margin-right:0} .h-l{font-size:52px} }

/* ── 오늘의 수업: 요일 원 + 줄마다 예약 ───────────── */
.days{display:grid;grid-template-columns:repeat(6,48px);justify-content:space-between;margin-bottom:16px}
.day{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:15px;font-weight:600;color:var(--ink-2);cursor:pointer;position:relative;transition:background-color 200ms,color 200ms,transform 160ms var(--ease-out)}
.day:active{transform:scale(.96)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.day.is-today::after{content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.slots{background:var(--surface);border-radius:var(--r-card);padding:4px 20px}
.slot{display:grid;grid-template-columns:68px 1fr auto;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.slot:first-child{border-top:0}
.s-time{font-size:19px;font-weight:600;line-height:1.3}
.s-next{display:none;font-style:normal;font-size:12px;font-weight:600;color:var(--accent);margin-top:2px}
.is-next .s-next{display:block}
.s-info strong{display:block;font-size:16px;font-weight:600;line-height:1.4}
.s-meta{display:flex;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:13px;color:var(--ink-2)}
.s-meta>*{margin-right:8px}
.lv{display:inline-flex;align-items:center}
.lv i{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink);margin-right:3px}
.lv i:last-child{margin-right:0}
.lv i.on{background:var(--ink)}
.s-book{display:inline-flex;align-items:center;min-height:44px;padding-left:12px;font-size:14px;font-weight:600}
.s-book svg{margin-left:4px;width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.s-book:hover svg{transform:translateX(3px)}
.today-note{margin-top:16px;font-size:14px;color:var(--ink-2)}
@media (min-width:1024px){
  .today-in{display:grid;grid-template-columns:4fr 7fr;grid-column-gap:80px;column-gap:80px;align-items:start}
  .days{grid-template-columns:repeat(6,56px);justify-content:start;grid-column-gap:12px;column-gap:12px;margin-bottom:24px}
  .day{width:56px;height:56px;font-size:16px}
  .slots{padding:8px 32px}
  .slot{grid-template-columns:112px 1fr auto;padding:22px 0}
  .s-time{font-size:22px}
  .s-info{display:flex;align-items:baseline;flex-wrap:wrap}
  .s-info strong{font-size:18px;margin-right:16px}
  .s-meta{margin-top:0;font-size:14px}
}

/* ── 처음 오시는 분: 세이지 면 · 하나 둘 셋 ───────── */
.band{margin-top:var(--sec);padding:96px 0;background:var(--mood)}
.band .sec-label{color:var(--ink-soft)}
.breaths li{display:grid;grid-template-columns:64px 1fr;padding:24px 0;border-top:1px solid rgba(47,58,51,.2)}
.breaths li:first-child{border-top:0;padding-top:0}
.b-n{font-size:20px;line-height:1.4}
.breaths h3{font-size:17px;font-weight:600;line-height:1.4}
.breaths p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.offer{display:flex;align-items:center;margin-top:24px;background:var(--surface);border-radius:var(--r-card);padding:16px 20px;font-size:15px;font-weight:600;line-height:1.5;color:var(--accent)}
.offer i{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--accent);margin-right:12px}
.first-btn{margin-top:16px;width:100%}
@media (min-width:1024px){
  .band{padding:144px 0}
  .first-in{display:grid;grid-template-columns:4fr 7fr;grid-column-gap:80px;column-gap:80px;align-items:start}
  .breaths li{grid-template-columns:96px 1fr;padding:32px 0}
  .b-n{font-size:24px}
  .breaths h3{font-size:20px}
  .breaths p{font-size:16px}
  .offer{margin-top:40px;padding:20px 24px;font-size:16px}
  .first-btn{width:auto;padding:0 40px;margin-top:24px}
}

/* ── 수업 종류: 목록 줄 · 난이도 점 ─────────────── */
.cls-list li{padding:28px 0;border-top:1px solid var(--line)}
.cls-list li:last-child{border-bottom:1px solid var(--line)}
.c-lv{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink-2)}
.c-lv .lv{margin-right:10px}
.cls-list h3{font-size:24px;line-height:1.4;letter-spacing:-.02em;margin-top:10px}
.cls-list p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.c-meta{display:block;margin-top:12px;font-size:13px;color:var(--ink-2)}
@media (min-width:1024px){
  .cls-list li{display:grid;grid-template-columns:200px 220px 1fr 140px;grid-column-gap:32px;column-gap:32px;align-items:center;padding:36px 0}
  .cls-list h3{margin:0;font-size:28px}
  .cls-list p{margin:0;font-size:16px}
  .c-meta{margin:0;text-align:right;font-size:14px}
}

/* ── 공간: 편의시설 칸 (한 판 · 칸 사이 선) ────────── */
.amen{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.amen li{padding:24px 20px;border-top:1px solid var(--line)}
.amen li:nth-child(-n+2){border-top:0}
.amen li:nth-child(2n){border-left:1px solid var(--line)}
.amen .glyph{color:var(--ink)}
.amen strong{display:block;margin-top:16px;font-size:16px;font-weight:600;line-height:1.4}
.amen span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (min-width:1024px){
  .amen{grid-template-columns:repeat(3,1fr)}
  .amen li{padding:32px}
  .amen li:nth-child(-n+3){border-top:0}
  .amen li:nth-child(2n){border-left:0}
  .amen li:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
  .amen strong{margin-top:24px;font-size:17px}
}

/* ── 선생님 인사: 동심선 두 겹 · 큰 부리 글 ─────────── */
.teacher{overflow:hidden}
.teacher-in{position:relative}
.t-ring{position:absolute;right:-64px;top:-96px;width:184px;height:184px;border-radius:50%;border:1px solid rgba(47,58,51,.14);pointer-events:none}
.t-ring::after{content:"";position:absolute;top:28px;left:28px;right:28px;bottom:28px;border-radius:50%;background:var(--mood);opacity:.55}
.teacher .sec-label,.teacher blockquote,.t-body{position:relative}
.teacher blockquote{margin:0}
.teacher blockquote p{font-size:28px;line-height:1.46;letter-spacing:-.02em}
.t-body{margin-top:32px;max-width:32em}
.t-body p{font-size:16px;line-height:1.75;color:var(--ink-2)}
.t-body p+p{margin-top:12px}
.t-body .sign{margin-top:24px;color:var(--ink);font-weight:600;font-size:15px}
@media (min-width:1024px){
  .teacher{overflow:visible}
  .t-ring{right:auto;left:-24px;top:auto;bottom:-96px;width:256px;height:256px}
  .t-ring::after{top:40px;left:40px;right:40px;bottom:40px}
  .teacher blockquote p{font-size:48px;line-height:1.36}
  .t-body{margin:48px 0 0 50%;max-width:none}
  .t-body p{font-size:17px}
}

/* ── 수강료: 단위 칸이 있는 목록 ─────────────────── */
.price-list li{display:grid;grid-template-columns:1fr auto;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.price-list li:last-child{border-bottom:1px solid var(--line)}
.p-name strong{display:block;font-size:17px;font-weight:600;line-height:1.4}
.p-name span{display:block;margin-top:2px;font-size:14px;color:var(--ink-2)}
.p-won{font-size:22px;font-weight:600;white-space:nowrap;letter-spacing:-.01em}
.p-won small{font-size:13px;font-weight:400;color:var(--ink-2);margin-right:8px;letter-spacing:0}
@media (min-width:1024px){
  .prices .wrap{display:grid;grid-template-columns:4fr 7fr;grid-column-gap:80px;column-gap:80px;align-items:start}
  .prices .sec-head{grid-row:1 / span 2}
  .price-list li{padding:26px 0}
  .p-name strong{font-size:19px}
  .p-won{font-size:26px}
}

/* 폰 하단 막대 — "체험 예약"만 흙색 (강조 5% 자리 1) */
.bar .b-main{background:var(--accent)}
@media (min-width:1024px){ .price-list,.prices .fee-note{grid-column:2} }