/* 0722 사용자 확정: prefers-reduced-motion 대응 제거 — 감소 모드 폰에서 전체 정지가 "고장"으로 읽힘(포트폴리오와 동일 결정, verdict-log 0722) */
:root{
  --linen:#F7F5F0; --greige:#DDD8CD; --card:#ECE8E0; --rule-band:#C6BEAC; /* greige 밴드 위에서 읽히는 괘선(밴드 배경=greige라 greige 괘선은 소멸) */
  --sage:#8A8C6E; --sage-dk:#5E5F47; --sage-btn:#76785B; --forest:#2F4A3A; /* sage-dk 15%다크=AA(카드5.36/밴드4.61) · sage-btn=흰글씨 4.56 */
  --tint:#E3E6D6; /* 액센트 파생 연한 배경(시간표 g셀) — 색 테마 오버라이드 시 sage 계열과 함께 갈린다 */
  --ink:#34332D; --muted:#605F56; --footer:#2A2A23; /* muted 10%다크=AA(카드5.26/밴드4.52) */
  --serif:"EB Garamond","Noto Serif KR",Georgia,serif; /* Noto Serif KR: iOS/안드로이드엔 한글 명조가 없어 웹폰트 필수 */
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --hd:74px;
  --ease:cubic-bezier(.22,.61,.36,1);   /* soft editorial settle */
}
/* ── 색 테마(0722 파일럿 v2) — 액센트 5토큰만 갈린다(중립 리넨·잉크·사진은 불변).
   ★도출 원칙(사용자 지적 반영): 세이지의 OKLCH 명도·채도를 토큰별로 그대로 두고 색상(hue)만 회전
   — "채도·명도가 같아야 어울린다". v1(레퍼 hex 직수입 테라코타·블루)은 채도 2배라 튀어서 폐기.
   딥컬러(--forest)만 원본의 +47° hue 오프셋을 상속하지 않고 테마 hue에 정렬(상속 시 계열 이탈).
   전 값 AA 검증(hue_rotate.py): dk=card 5.3+/band 4.6+/tint 5.1+ · btn=흰글씨 4.5+ · deep=흰글씨 9.7+.
   포폴 LiveModal이 iframe documentElement에 data-theme을 주입해 전환한다. */
[data-theme="terra"]{--sage:#A08174;--sage-dk:#6F574C;--sage-btn:#8B6E61;--forest:#563C30;--tint:#F1E0D8} /* h45 클레이 */
[data-theme="teal"] {--sage:#6B9291;--sage-dk:#436362;--sage-btn:#567C7C;--forest:#254A4A;--tint:#D4E9E9} /* h195 틸 */
/* rose/blue/lilac(회전)·teal2(C×1.45 변형)도 육안 통과했으나 사용자 픽에서 제외(0722 "원래 조합으로") — 필요 시 공식으로 재생성 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
p,li,blockquote{text-wrap:pretty}
body{
  font-family:var(--sans); color:var(--ink); background:var(--linen);
  line-height:1.8; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; word-break:keep-all;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* 키보드 포커스 — 브랜드 링 (마우스 클릭엔 안 뜸) */
:where(a,button,summary,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--sage-dk);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-dk)}
.serif{font-family:var(--serif)}
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:14px 30px;border-radius:999px;background:var(--sage-btn);color:#fff;
  font-size:13.5px;font-weight:500;letter-spacing:.02em;
  transition:background .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pill:hover{background:var(--sage-dk);transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.link-arrow{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink);
  border-bottom:1px solid var(--sage);padding-bottom:3px;transition:color .2s,transform .3s var(--ease)}
.link-arrow:hover{color:var(--sage-dk);transform:translateX(4px)}
.grain{display:block;width:100%;height:auto;color:var(--sage);opacity:.5}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
/* 실사 히어로 위 가독성: 확산 글로우(A안·사용자 확정) — 오프셋 없는 후광이라 띠·외곽선 없음 */
header:not(.solid) .menu a{text-shadow:0 0 10px rgba(0,0,0,.5),0 0 28px rgba(0,0,0,.3)}
header:not(.solid) .logo{filter:drop-shadow(0 0 8px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(0,0,0,.28))}
header.solid{background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-bottom-color:var(--greige)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--hd)}
.logo{font-family:var(--serif);font-size:24px;letter-spacing:.34em;font-weight:500;color:#fff;transition:color .3s}
header.solid .logo{color:var(--ink)}
.menu{display:flex;gap:30px;list-style:none}
.menu a{position:relative;font-size:13.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);transition:color .3s}
.menu a:hover{color:#fff}
header.solid .menu a{color:var(--muted)}
header.solid .menu a:hover{color:var(--sage-dk)}
/* 투명 헤더(사진 위)에선 밑줄 제거 — 사진과 안 어울림(사용자 확정) */
header:not(.solid) .menu a::after{display:none}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left center;transition:transform .32s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:#fff}
header.solid .menu a[aria-current="page"]{color:var(--ink)}
.nav .pill{background:rgba(38,38,31,.55);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)} /* 흰 글라스는 흰글씨 대비가 히어로 픽셀 의존(4.30 실측) — offer-card 계열 다크 글라스로 사진 무관 AA */
header.solid .nav .pill{background:var(--sage-btn);border-color:var(--sage-btn)}
.hamb{display:none}

/* subpage: solid header from load, offset body below fixed bar */
body.sub{padding-top:var(--hd)}
/* 홈 인페이지 앵커 점프 시 고정 헤더에 안 가리게 */
body:not(.sub) section[id]{scroll-margin-top:calc(var(--hd) + 8px)}
.pagehead{border-bottom:1px solid var(--greige)}
.pagehead .wrap{padding-top:clamp(58px,7vw,96px);padding-bottom:clamp(38px,5vw,58px)}
.pagehead .eyebrow{display:block;margin-bottom:18px}
.pagehead h1{font-size:clamp(30px,4.4vw,52px);font-weight:300;letter-spacing:-.025em;line-height:1.28;max-width:760px;text-wrap:balance}
.pagehead h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.pagehead .lede{margin-top:22px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.85;color:var(--muted);max-width:600px}

/* ---------- hero ---------- */
.hero{position:relative;height:92vh;min-height:600px;color:#fff;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;animation:kenburns 18s var(--ease) forwards;will-change:transform}
@keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.075)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,40,35,.28)0%,rgba(40,40,35,.05)45%,rgba(40,40,35,.32)100%)}
.offer{position:absolute;left:0;right:0;bottom:8%;z-index:2}
.offer-card{max-width:430px;background:rgba(38,38,31,.56);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.28);padding:38px 40px;border-radius:6px}
.offer-card .eyebrow{color:rgba(255,255,255,.82)}
.offer-card h2{font-size:26px;font-weight:300;letter-spacing:-.02em;line-height:1.4;margin:14px 0 20px}
.offer-card p{font-size:14px;color:rgba(255,255,255,.82);margin-bottom:26px}

/* ---------- boutique statement ---------- */
.statement{padding:130px 0 110px;position:relative;overflow:hidden}
.statement .grain-margin{position:absolute;left:-90px;top:60px;width:340px;opacity:.4;color:var(--sage);transform:rotate(-4deg)}
.statement .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;position:relative}
.statement h1{font-size:clamp(30px,4vw,50px);font-weight:300;letter-spacing:-.025em;line-height:1.32}
.statement h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.statement .body p{font-size:15px;color:var(--muted);margin-bottom:24px}
.statement .eyebrow{margin-bottom:22px}

/* ---------- classes 3-up ---------- */
.classes{padding:20px 0 120px}
.classes .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.ccard figure{overflow:hidden;border-radius:5px;aspect-ratio:4/5}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.ccard:hover img{transform:scale(1.05)}
.ccard h3{font-size:18px;font-weight:500;letter-spacing:-.01em;margin:20px 0 6px}
.ccard p{font-size:13.5px;color:var(--muted)}
.divider{margin:0 auto;max-width:1200px;padding:0 40px}

/* ---------- split ---------- */
.split{background:var(--greige)}
.split .duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1120px;margin:0 auto}
.split figure{min-height:520px;overflow:hidden}
.split img{width:100%;height:100%;object-fit:cover}
.split .txt{padding:96px clamp(40px,7vw,120px);display:flex;flex-direction:column;justify-content:center}
.split h2{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1.35;margin:20px 0 24px}
.split h2 em{font-family:var(--serif);font-style:italic}
.split p{font-size:15px;color:#5b5849;margin-bottom:18px}
.split .pill{margin-top:14px}

/* ---------- review ---------- */
.review{padding:130px 0;text-align:center}
.review .eyebrow{display:block;margin-bottom:44px}
.review .quotes{position:relative;max-width:840px;min-height:304px;margin:0 auto}
.review .q{position:absolute;inset:0;opacity:0;pointer-events:none;display:flex;gap:44px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--greige);border-radius:6px;padding:44px 48px}
.review .q.active{position:relative;opacity:1;pointer-events:auto;transition:opacity .5s ease}
.review .pic{flex:0 0 auto;width:172px;height:216px;border-radius:5px;overflow:hidden;margin:0}
.review .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.review .qbody{flex:1;min-width:0}
.review blockquote{font-size:clamp(17px,1.85vw,21px);font-weight:400;line-height:1.75;letter-spacing:-.015em;color:var(--ink)}
.review blockquote em{font-family:var(--serif);font-style:italic}
.review .qbody{position:relative}
.review .qbody::before{content:"\201C";position:absolute;top:-30px;left:-14px;font-family:var(--serif);font-size:76px;line-height:1;color:var(--sage);opacity:.2;pointer-events:none}
.review figcaption{margin-top:24px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.review figcaption span{color:var(--muted);font-weight:500;letter-spacing:0}
.review .qnav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:42px}
.qarrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--greige);background:transparent;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.qarrow:hover{border-color:var(--sage);color:var(--sage-dk)}
.qdots{display:flex;gap:10px}
.qdots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--greige);cursor:pointer;transition:background .25s,transform .25s}
.qdots button.on{background:var(--sage);transform:scale(1.3)}
.review .qfoot{margin-top:50px}
.review .qrule{display:block;width:56px;height:1px;background:var(--greige);margin:0 auto 22px}
.review .naver{font-size:13.5px;color:var(--muted);letter-spacing:-.01em;transition:color .2s}
.review .naver .st{color:var(--sage-dk);letter-spacing:.06em;margin-right:9px;font-size:12px} /* 골드(#E3A72F)는 linen 위 1.96:1 — AA 미달이라 세이지로 */
.review .naver strong{color:var(--ink);font-weight:600}
.review .naver:hover{color:var(--sage-dk)}


/* ---------- motion system (role-differentiated, restrained) ---------- */
/* base — text & blocks rise + fade (var(--d) = per-sibling stagger from JS) */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* media — figures settle: fade + inner image un-zooms (no rise) */
figure.reveal,.reveal.mapbox{transform:none;transition:opacity .7s var(--ease) var(--d,0s)}
figure.reveal img,.reveal.mapbox iframe{transform:scale(1.055);
  transition:transform .9s var(--ease) var(--d,0s)}
figure.reveal.in img,.reveal.mapbox.in iframe{transform:scale(1)}

/* split — 서브페이지 사진과 동일하게: 프레임 고정 + 사진만 안에서 줌 세틀 (figure.reveal 기본 사용) */

/* signature — 시그니처 라인이 스크롤 진입 시 스스로 그려짐 (no-JS·reduced 는 그냥 보임) */
.grain.will-draw path,.grain-margin.will-draw path{
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.2s var(--ease)}
.grain.drawn path,.grain-margin.drawn path{stroke-dashoffset:0}

/* card micro-hover (warm border) */
.ncard,.classcard{transition:border-color .35s var(--ease)}
.ncard:hover,.classcard:hover{border-color:var(--sage)}



/* ---------- shared section head ---------- */
.shead{text-align:center;max-width:640px;margin:0 auto 62px}
.shead .eyebrow{display:block;margin-bottom:16px}
.shead h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.3}
.shead h2 em{font-family:var(--serif);font-style:italic}
.shead p{margin-top:16px;font-size:15px;color:var(--muted)}

/* ---------- trust strip ---------- */
.trust{background:var(--footer);color:#e9e6dc}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:40px;padding-bottom:40px}
.trust .t{text-align:center}
.trust .t b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;color:#fff;letter-spacing:.01em} /* 사용자 확정: 세리프 + 원래(500)보다 얇게 400 */
.trust .t span{display:block;margin-top:6px;font-size:12px;letter-spacing:.03em;color:rgba(233,230,220,.6)}

/* ---------- trainers (home 2-up) ---------- */
.trainers{padding:120px 0}
.trainers .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;max-width:860px;margin:0 auto}
.trainers .grid.cols3{grid-template-columns:repeat(3,1fr);gap:48px;max-width:1120px} /* 강사 3인 업체 변형 — _variants/roster-3tabs.html 참조 */
.tcard{text-align:center}
.tcard .photo{width:186px;height:186px;border-radius:50%;overflow:hidden;margin:0 auto 26px;border:1px solid var(--greige)}
.tcard .photo img{width:100%;height:100%;object-fit:cover}
.tcard h3{font-size:19px;font-weight:500;letter-spacing:-.01em}
.tcard .role{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-dk);margin-top:8px}
.tcard blockquote{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);margin:20px 0 16px;line-height:1.6}
.tcard .certs{font-size:13px;color:var(--muted);line-height:1.75}

/* ---------- pricing ---------- */
.pricing{padding:120px 0;background:var(--card)}
.pricing .cols{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;max-width:1000px;margin:0 auto;align-items:start}
.trial{background:var(--forest);color:#fff;border-radius:6px;padding:46px 38px;text-align:center}
.trial .eyebrow{color:rgba(255,255,255,.68);display:block;margin-bottom:20px}
.trial .amt{font-family:var(--serif);font-size:46px;font-weight:500;letter-spacing:-.01em;line-height:1}
.trial .amt small{font-size:18px;font-weight:400}
.trial p{font-size:13.5px;color:rgba(255,255,255,.8);margin:16px 0 28px;line-height:1.7}
.trial .pill{background:#fff;color:var(--forest)}
.trial .pill:hover{background:var(--linen)}
.plist{list-style:none}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:19px 4px;border-bottom:1px solid var(--greige)}
.plist li:last-child{border-bottom:0}
.plist .name{font-size:15px;font-weight:500}
.plist .name span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px}
.plist .price{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pricing .note{max-width:1000px;margin:26px auto 0;font-size:12.5px;color:var(--muted);text-align:center}
.pricing.plain{background:var(--greige)}

/* pricing — 스택형: 체험 가로배너 + 가격표 2열 (수강료 페이지) */
.trial.trial-banner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);text-align:left;padding:32px clamp(28px,4vw,46px)}
.trial-banner .tb-info{min-width:0}
.trial-banner .eyebrow{display:block;color:rgba(255,255,255,.68);margin-bottom:13px}
.trial-banner .tb-row{display:flex;align-items:baseline;gap:clamp(18px,2.5vw,30px);flex-wrap:wrap}
.trial-banner .amt{font-size:clamp(34px,4vw,42px);line-height:1;white-space:nowrap;margin:0}
.trial-banner p{margin:0;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.82);max-width:440px}
.trial-banner .pill{flex:none;background:#fff;color:var(--forest)}
.trial-banner .pill:hover{background:var(--linen)}
/* 가격표 rows 공식 클래스화 적용(시안 slotmap N-변동 §3 처방) —
   항목수(N)에 따라 .rows2~.rows5 클래스를 HTML에 부여. rows=ceil(N/2), nth-child 마감 선택자도 함께 이동.
   고요(N=6) → rows3 실전 적용. */
.plist.plist-2col{max-width:1000px;margin:32px auto 0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;column-gap:clamp(36px,5vw,64px)}
.plist.plist-2col li:last-child{border-bottom:0}
.plist.plist-2col.rows2{grid-template-rows:repeat(2,auto)}
.plist.plist-2col.rows2 li:nth-child(2){border-bottom:0}
.plist.plist-2col.rows3{grid-template-rows:repeat(3,auto)}
.plist.plist-2col.rows3 li:nth-child(3){border-bottom:0}
.plist.plist-2col.rows4{grid-template-rows:repeat(4,auto)}
.plist.plist-2col.rows4 li:nth-child(4){border-bottom:0}
.plist.plist-2col.rows5{grid-template-rows:repeat(5,auto)}
.plist.plist-2col.rows5 li:nth-child(5){border-bottom:0}
@media(max-width:860px){
  .trial.trial-banner{flex-direction:column;align-items:flex-start;gap:22px;padding:28px 24px}
  .trial-banner .pill{align-self:stretch;justify-content:center}
  .plist.plist-2col.rows2,.plist.plist-2col.rows3,.plist.plist-2col.rows4,.plist.plist-2col.rows5{
    grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;
  }
  .plist.plist-2col.rows2 li:nth-child(2){border-bottom:1px solid var(--greige)}
  .plist.plist-2col.rows3 li:nth-child(3){border-bottom:1px solid var(--greige)}
  .plist.plist-2col.rows4 li:nth-child(4){border-bottom:1px solid var(--greige)}
  .plist.plist-2col.rows5 li:nth-child(5){border-bottom:1px solid var(--greige)}
}

/* ---------- schedule ---------- */
.schedule{padding:120px 0}
.grid-sched{max-width:1040px;margin:0 auto;overflow-x:auto}
.grid-sched table{width:100%;border-collapse:collapse;min-width:660px}
.grid-sched th,.grid-sched td{padding:15px 8px;text-align:center;border-bottom:1px solid var(--greige)}
.grid-sched th{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--sage-dk);border-bottom:1px solid var(--sage)}
.grid-sched td.time{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.grid-sched td .cls{display:inline-block;font-size:11.5px;padding:5px 11px;border-radius:999px;background:var(--card);color:var(--ink)}
.grid-sched td .cls.g{background:var(--tint);color:var(--sage-dk)}
.grid-sched td .cls.f{background:var(--forest);color:#fff}
.schedule .note{text-align:center;margin-top:28px;font-size:13px;color:var(--muted)}
.schedule .note a{color:var(--sage-dk);border-bottom:1px solid var(--sage);padding-bottom:2px}

/* ---------- facility gallery ---------- */
.facility{padding:120px 0;background:var(--greige)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:14px;max-width:1160px;margin:0 auto;padding:0 20px}
.gal figure{overflow:hidden;border-radius:5px}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal .g-studio{grid-column:1/3;grid-row:1}
.gal .g-ref{grid-column:3;grid-row:1/3}
.gal .g-props{grid-column:4;grid-row:1/3}
.gal .g-lounge{grid-column:1/3;grid-row:2}

/* ---------- location ---------- */
.location{padding:120px 0}
.location .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1080px;margin:0 auto;align-items:center}
.addr .big{font-size:19px;font-weight:500;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.addr .line{font-size:14.5px;color:var(--muted);line-height:1.9}
.addr .row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.obtn{display:inline-flex;align-items:center;gap:.4em;padding:11px 20px;border-radius:999px;border:1px solid var(--greige);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;background:transparent;transition:border-color .2s,color .2s}
.obtn:hover{border-color:var(--sage);color:var(--sage-dk)}
.mapbox{aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--greige)}
.mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(.95)}

/* ---------- cta banner ---------- */
.ctabanner{background:var(--sage-btn);color:#fff;text-align:center;padding:104px 0}
.ctabanner h2{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.35;margin-bottom:14px}
.ctabanner h2 em{font-family:var(--serif);font-style:italic}
.ctabanner p{font-size:15px;color:rgba(255,255,255,.85);margin-bottom:32px}
.ctabanner .pill{background:#fff;color:var(--sage-dk)}
.ctabanner .pill:hover{background:var(--linen)}

/* ---------- contact ---------- */
.contact{padding:120px 0;background:var(--card)}
.cform{max-width:560px;margin:0 auto}
.cform .field{margin-bottom:20px}
.cform label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:8px;color:var(--ink)}
.cform input,.cform textarea{width:100%;padding:14px 16px;border:1px solid var(--greige);border-radius:6px;background:var(--linen);font-family:inherit;font-size:14.5px;color:var(--ink)}
.cform textarea{resize:vertical;min-height:118px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 14%,transparent)}
.cform .agree{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:6px}
.cform .agree input{width:auto}
.cbtn{width:100%;justify-content:center;margin-top:10px;border:0;cursor:pointer;font-size:14.5px}
.cform.sent .fields{display:none}
.sentmsg{display:none;text-align:center;padding:40px 20px}
.cform.sent .sentmsg{display:block}
.sentmsg .ic{width:56px;height:56px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 22px}
.sentmsg h3{font-size:20px;font-weight:500;margin-bottom:10px}
.sentmsg p{font-size:14px;color:var(--muted)}

/* ---------- footer ---------- */
footer.site{background:var(--footer);color:rgba(233,230,220,.7);padding:74px 0 40px}
footer.site .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .logo2{font-family:var(--serif);font-size:22px;letter-spacing:.3em;color:#fff}
footer.site .intro{margin-top:16px;font-size:13.5px;line-height:1.8;max-width:280px;color:rgba(233,230,220,.6)}
footer.site h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:16px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:11px;font-size:13.5px}
footer.site a{color:rgba(233,230,220,.72);transition:color .2s}
footer.site a:hover{color:#fff}
footer.site .biz{margin-top:20px;font-size:12px;line-height:1.85;color:rgba(233,230,220,.42)}
footer.site .bot{padding-top:26px;font-size:12px;color:rgba(233,230,220,.4);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.site .bot a{color:rgba(233,230,220,.55)}

/* ====================================================================
   SUBPAGE COMPONENTS (sage system, weight-300 headings + serif accents)
   ==================================================================== */

/* section utilities */
.band{background:var(--greige)}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec-tight{padding:clamp(56px,7vw,92px) 0}
.narrow{max-width:1120px;margin:0 auto}

/* media-row : image + text, .rev flips image right, .portrait uses 3/4 */
.media-row{padding:clamp(60px,7.5vw,100px) 0}
.media-row .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,68px);align-items:center;max-width:1120px;margin:0 auto}
.media-row.portrait .cols{grid-template-columns:.85fr 1.15fr}
.media-row figure{overflow:hidden;border-radius:5px;aspect-ratio:4/3}
.media-row.portrait figure{aspect-ratio:3/4;max-width:460px}
.media-row img{width:100%;height:100%;object-fit:cover}
.media-row.rev figure{order:2}
.media-row .eyebrow{display:block;margin-bottom:14px}
.media-row h2{font-size:clamp(24px,2.9vw,35px);font-weight:300;letter-spacing:-.02em;line-height:1.38}
.media-row h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.media-row p{font-size:15px;line-height:1.9;color:var(--muted);margin-top:20px;max-width:500px}
.media-row p+p{margin-top:16px}
.feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:10px}
.feats li{font-size:14px;color:#5b5849;line-height:1.6;display:flex;gap:11px}
.feats li::before{content:"—";color:var(--sage);flex:none}

/* numcards : small enumerated differentiators */
.numcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:46px auto 0}
.ncard{background:var(--card);border:1px solid var(--rule-band);border-radius:5px;padding:34px 30px}
.ncard h3{font-size:18px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px}
.ncard p{font-size:14.5px;line-height:1.8;color:var(--muted)}
.morelinks{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px}

/* trainer-row : full profile */
.trainer-row{padding:clamp(60px,8vw,100px) 0}
.trainer-row .cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,64px);align-items:start;max-width:1080px;margin:0 auto}
.trainer-row .portrait{overflow:hidden;border-radius:5px;aspect-ratio:1/1;max-width:380px}
.trainer-row .portrait img{width:100%;height:100%;object-fit:cover}
.trainer-row .motto{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:var(--sage-dk);margin-top:26px;max-width:380px}
.trainer-row .motto cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.trainer-row h2{font-size:clamp(25px,3vw,37px);font-weight:300;letter-spacing:-.02em;line-height:1.28}
.trainer-row h2 .role{display:inline-block;font-size:14px;font-weight:400;color:var(--muted);margin-left:10px;letter-spacing:0}
.trainer-row .bio{font-size:15px;line-height:1.9;color:var(--muted);margin-top:22px;max-width:520px}
.trainer-row h3{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-dk);margin:34px 0 0}
.timeline{margin-top:16px;border-top:1px solid var(--rule-band)} /* 밴드 배경 위에서도 읽히는 괘선(FAQ와 동일 클래스) */
.timeline .r{display:flex;gap:22px;padding:13px 2px;border-bottom:1px solid var(--rule-band)}
.timeline .p{font-size:13.5px;color:var(--sage-dk);min-width:104px;font-variant-numeric:tabular-nums}
.timeline .w{font-size:14.5px;line-height:1.55;color:var(--ink)}

/* director's note (about.html) : media-row 그리드 재사용, 사진 크기·인용·서명만 전용 지정(신규 var 없음)
   사진은 강사 카드(1/1 정사각)·상단 Our Philosophy(3/4 세로)와 다른 프레임(4/3 가로)으로 차별화 —
   확산 계약②. 3문장 인용문 분량에 맞춰 사진을 300px로 눌러 좌우 컬럼 세로 편차를 ±30px 이내로 둠(계약④). */
.media-row.portrait.director figure{max-width:300px;aspect-ratio:4/3;justify-self:center}
.media-row.director img{object-position:50% 25%}
.director blockquote{position:relative;font-size:clamp(17px,1.9vw,20px);font-weight:400;
  line-height:1.85;letter-spacing:-.015em;color:var(--ink);margin-top:24px;max-width:480px}
.director blockquote::before{content:"\201C";position:absolute;top:-26px;left:-6px;
  font-family:var(--serif);font-size:52px;line-height:1;color:var(--sage);opacity:.2;pointer-events:none}
.director blockquote em{font-family:var(--serif)}
.director .dsign{margin-top:26px;font-size:14px;font-weight:600;color:var(--ink)}
.director .dsign span{font-weight:400;color:var(--muted);margin-left:8px}

/* ttabs : 강사 토글 — 명부(roster) 탭, pagehead 하단 괘선이 레일 (HTML+JS = _variants/roster-3tabs.html) */
.pagehead.has-tabs .wrap{padding-bottom:0}
.ttabs{display:flex;max-width:1080px;margin:clamp(30px,4vw,46px) auto 0}
.ttab{flex:1;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;padding:15px 8px 16px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .2s}
.ttab strong{font-size:clamp(16px,1.7vw,19px);font-weight:500;letter-spacing:-.01em;color:var(--muted);transition:color .2s}
.ttab span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);opacity:.75}
.ttab:hover strong{color:var(--ink)}
.ttab[aria-selected="true"]{border-bottom-color:var(--sage-dk)}
.ttab[aria-selected="true"] strong{color:var(--ink)}
.ttab[aria-selected="true"] span{color:var(--sage-dk);opacity:1}
.ttab:focus-visible{outline:2px solid var(--sage-dk);outline-offset:-2px}

/* records : 자격·수료 전체 수록 아카이브 — 풀폭 3단 레저 (경력은 위층 디테일 칼럼) */
.records{max-width:1080px;margin:clamp(34px,4.5vw,54px) auto 0}
.records h3{margin-top:0}
.records .cnt{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14px;line-height:1;letter-spacing:.02em;text-transform:none;color:var(--muted);margin-left:7px}
.ledger{list-style:none;margin-top:15px;border-top:1px solid var(--greige)}
.ledger li{font-size:13.5px;line-height:1.65;color:#5b5849;padding:8px 2px;border-bottom:1px solid var(--greige)}
.ledger.certs{columns:3;column-gap:clamp(28px,3.5vw,48px)}
.ledger.certs li{break-inside:avoid}
@media(max-width:1100px){.ledger.certs{columns:2}}
.ledger.career li{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ledger.career li strong{font-weight:500;color:var(--ink)}
.ledger.career .p{font-size:12.5px;color:var(--sage-dk);font-variant-numeric:tabular-nums;flex:none;margin-left:auto}
.ledger .sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;letter-spacing:.01em}
.nb{white-space:nowrap}

/* classcard : detailed class + fit list */
.classlist{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.classcard{background:var(--card);border:1px solid var(--greige);border-radius:6px;padding:34px 32px;display:grid;grid-template-columns:1.45fr 1fr;gap:30px}
.classcard .head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.classcard h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.classcard .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dk);border:1px solid var(--sage);border-radius:999px;padding:4px 11px}
.classcard .desc{font-size:14.5px;line-height:1.85;color:var(--muted);margin-top:14px}
.classcard .meta{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-top:16px}
.classcard .meta span.sep{color:var(--greige)}
.classcard .fit{border-left:1px solid var(--greige);padding-left:26px}
.classcard .fit .lbl{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dk);margin-bottom:12px}
.classcard .fit p{font-size:14px;line-height:1.6;color:var(--muted);display:flex;gap:9px;margin-top:9px}
.classcard .fit p::before{content:"—";color:var(--sage);flex:none}

/* faq : native details accordion — 밴드 배경이라 괘선은 --rule-band */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--rule-band)}
.faq details{border-bottom:1px solid var(--rule-band)}
.faq details[open]{border-bottom-color:var(--sage-dk)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-size:16px;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;font-size:21px;line-height:1;color:var(--sage-dk);transition:transform .25s ease}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq .a{padding:2px 4px 24px;font-size:14.5px;line-height:1.8;color:var(--muted);max-width:660px}
.faq-foot{text-align:center;margin-top:26px;font-size:14px;color:var(--muted)}
.faq-foot a{color:var(--sage-dk);border-bottom:1px solid var(--sage);padding-bottom:2px}


/* contact page : intro + method tiles + form grid */
.contactwrap{padding:clamp(64px,9vw,100px) 0}
.contactwrap .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,60px);max-width:1080px;margin:0 auto;align-items:start}
/* 폼 폐기(0720) — 우측 칼럼은 연락 타일이 받는다. 국내 스튜디오 13곳 중 11곳이 폼 없이 전화·카톡으로 받는다. */
.ctiles-col{display:flex;align-items:center}
.ctiles-col .ctiles{margin-top:0;max-width:none;width:100%}
.contactwrap .lede{margin-top:20px;font-size:15px;line-height:1.8;color:var(--muted);max-width:420px}
.ctiles{display:flex;gap:12px;margin-top:30px;max-width:460px}
.ctiles-col .ctile{padding:30px 12px 24px}
.ctile{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px 10px 16px;background:var(--card);border:1px solid var(--greige);border-radius:6px;text-align:center;transition:border-color .2s}
.ctile:hover{border-color:var(--sage)}
.ctile .ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ctile .ico.phone{background:var(--forest)}
.ctile .ico.kko{background:#FAE100}
.ctile .ico.insta{background:linear-gradient(45deg,#FEDA75,#FA7E1E 25%,#D62976 50%,#962FBF 78%,#4F5BD5)}
.ctile .t{font-size:13px;font-weight:600;color:var(--ink)}
.ctile .s{font-size:11px;color:var(--muted)}
.faq-jump{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:14px;font-weight:500;color:var(--sage-dk);border-bottom:1px solid var(--sage);padding-bottom:3px}

/* legal doc */
.legal{max-width:760px;margin:0 auto;padding:clamp(60px,8vw,96px) 40px clamp(80px,10vw,120px)}
.legal h1{font-size:clamp(26px,3.6vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.32}
.legal .date{margin-top:16px;font-size:13.5px;color:var(--muted)}
.legal .body{margin-top:44px;display:flex;flex-direction:column;gap:36px}
.legal h2{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:12px}
.legal p,.legal li{font-size:14.5px;line-height:1.85;color:#4a4a40}
.legal ul{margin:10px 0 0;padding-left:18px}
.legal li{margin-bottom:4px}

/* ---------- mobile menu + bottom bar ---------- */
.mmenu{position:fixed;inset:0;z-index:60;background:var(--linen);transform:translateX(100%);transition:transform .35s ease;padding:88px 30px 40px;display:flex;flex-direction:column;visibility:hidden}
.mmenu.open{transform:none;visibility:visible}
.mmenu a{font-size:21px;font-weight:300;letter-spacing:-.01em;padding:17px 0;border-bottom:1px solid var(--greige);color:var(--ink)}
.mmenu a[aria-current="page"]{color:var(--sage-dk);font-weight:500}
.mmenu a[aria-current="page"]::before{content:"— ";color:var(--sage)} /* 현재 페이지 표기 — 색차만으론 안 읽혀 대시 마커 */
.mmenu .mfoot{margin-top:auto;display:flex;gap:10px;padding-top:24px}
.mmenu .mfoot a{flex:1;text-align:center;padding:14px 0;border:0;border-radius:999px;font-size:14px;font-weight:600}
.mmenu .mfoot .tel{border:1px solid var(--greige);color:var(--ink)}
.mmenu .mfoot .book{background:var(--sage-btn);color:#fff}
.mclose{position:absolute;top:26px;right:24px;font-size:24px;background:none;border:0;color:var(--ink);cursor:pointer}
.botbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;grid-template-columns:1fr 1fr 1.3fr;background:#fff;border-top:1px solid var(--greige);transition:transform .3s ease}
.botbar a{padding:15px 6px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.01em}
.botbar a.tel{color:var(--ink)}
.botbar a.kko{background:#FAE100;color:#3b2222}
.botbar a.book{background:var(--sage-btn);color:#fff}
.botbar.hide{transform:translateY(100%)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .wrap{padding:0 22px}
  .menu,.nav .pill{display:none}
  .hamb{display:block;color:#fff;font-size:22px;background:none;border:0}
  header.solid .hamb{color:var(--ink)}
  .hero{height:86vh}
  .offer-card{padding:28px 26px}
  .statement{padding:80px 0 70px}
  .statement .grid{grid-template-columns:1fr;gap:34px}
  .statement .grain-margin{display:none}
  .classes .cols{grid-template-columns:1fr;gap:26px}
  .ccard figure{aspect-ratio:16/11}
  .split .duo{grid-template-columns:1fr}
  .split figure{min-height:320px}
  .split .txt{padding:56px 26px}
  .review{padding:80px 0}
  .review .quotes{min-height:0}
  .review .q{flex-direction:column;text-align:center;gap:26px;padding:34px 26px}
  .review .pic{width:150px;height:184px}
  .review .qbody{text-align:center}
  .review .qbody::before{display:none}
  .trust .wrap{grid-template-columns:1fr 1fr;gap:30px 16px}
  .trainers,.pricing,.schedule,.facility,.location,.contact{padding:78px 0}
  .trainers .grid{grid-template-columns:1fr;gap:48px;max-width:340px}
  .pricing .cols{grid-template-columns:1fr;gap:30px}
  .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .gal .g-studio{grid-column:1/3;grid-row:1}
  .gal .g-lounge{grid-column:1/3;grid-row:4}
  .gal .g-ref{grid-column:1;grid-row:2/4}
  .gal .g-props{grid-column:2;grid-row:2/4}
  .location .cols{grid-template-columns:1fr;gap:34px}
  .ctabanner{padding:78px 0}
  footer.site{padding:56px 0 90px}
  footer.site .top{grid-template-columns:1fr 1fr;gap:32px}
  footer.site .brand{grid-column:1/3}
  .mmenu,.botbar{display:flex}
  .botbar{display:grid}
  body{padding-bottom:54px}
  body.nobar{padding-bottom:0}

  /* subpage responsive */
  .media-row .cols,.trainer-row .cols,.contactwrap .cols{grid-template-columns:1fr;gap:32px}
  .media-row.portrait .cols,.trainer-row.portrait .cols{grid-template-columns:1fr}
  .media-row.rev figure{order:0}
  .media-row.portrait figure,.trainer-row .portrait{max-width:none}
  .records{margin-top:34px}
  .ledger.certs{columns:1}
  .numcards{grid-template-columns:1fr;gap:14px}
  .classcard{grid-template-columns:1fr;gap:22px}
  .classcard .fit{border-left:0;border-top:1px solid var(--greige);padding-left:0;padding-top:22px}
  .ctiles{max-width:none}
  .legal{padding-left:22px;padding-right:22px}
}
@media(min-width:861px){.mmenu{display:none}}

/* ---- 데모 표기 체계 (실업체 데모 전용 — HTML 삽입은 _variants/demo-notes.html, 프로토타입은 미사용) ---- */
.imgnote{display:block;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--muted);margin:8px 0 12px}
.tcard .imgnote{margin:-16px 0 16px} /* 컨텍스트별 마진 — 음수마진 공유하면 겹침(sum 실측) */
.media-row .imgnote{text-align:left;margin:14px 0 0}
.review .exnote{font-size:12.5px;color:var(--muted);margin:12px 0 4px;opacity:.85}
footer.site .demo-note{margin-top:18px;font-size:11.5px;color:rgba(247,245,240,.45)}
footer.site .demo-note a{color:rgba(247,245,240,.62);text-decoration:underline}

/* ═══ 모션 트랙 0726 — 시그니처 보강: 이미지 가로 마스크 오픈 ═══
   처방(리뷰 §5.4): Ken Burns 유지 + 사진이 천천히 좌→우 마스크로 열림. 튕김·회전 금지 — "호흡".
   실측 근거 = exoape 프로브(expo-out)·§6 브랜드 연출 밴드. 클립은 img(자식)에만 —
   관찰 대상(figure.reveal)에 걸면 IO 가시비율 0으로 .in이 안 붙는다(0726 실측 함정).
   프레임 페이드는 해제(마스크 에지가 크리스프하게 읽히도록). */
:root{--mt-brand:1.2s;--me-expo:cubic-bezier(.19,1,.22,1)}
figure.reveal{opacity:1;transition:none}
figure.reveal img{clip-path:inset(0 100% 0 0);transform:scale(1.055);
  transition:clip-path var(--mt-brand) var(--me-expo) var(--d,0s),transform 1.45s var(--me-expo) var(--d,0s)}
figure.reveal.in img{clip-path:inset(0 0 0 0);transform:scale(1)}