/* Face Jion - design-system.md + brand.md
   Titles: Bodoni Moda (Google Fonts) - Body: Inter (Google Fonts)
   Accent: Jion Burgundy #701F28 */

:root{
  --ink:#000000; --paper:#ffffff; --mist:#f7f7f7; --ash:#e8e8e8; --graphite:#808080;
  --accent:#701F28; --accent-deep:#4E1118;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px; --gutter:clamp(20px,4vw,48px); --chapter:clamp(96px,10vw,144px);
  --bar:32px; --row1:66px; --row2:42px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-reveal:cubic-bezier(.16,1,.3,1);
  --tr-display:-.012em; --tr-serif:-.006em; --tr-body:.005em; --tr-ui:.03em;
  --lh-display:1.08; --lh-heading:1.14; --lh-sub:1.3; --lh-body:1.5;
  --lh-small:1.45; --lh-meta:1.35;
  /* Inter는 x-height가 커서 design-system.md 수치보다 0.5~1px 내려 잡음 */
  --fs-display:clamp(28px,2.65vw,38px); --fs-statement:clamp(26px,2.4vw,34px);
  --fs-title:clamp(22px,1.8vw,26px); --fs-coda:clamp(18px,1.5vw,21px);
  --fs-name:clamp(20px,1.7vw,24px); --fs-item:21px; --fs-small:13.5px; --fs-note:12.25px;
  --fs-faq:clamp(17px,1.35vw,19px);
  --fs-lead:clamp(15.5px,1.15vw,16.5px); --fs-body:14.5px;
  --fs-link:12.5px; --fs-nav:13px; --fs-meta:11px;
  color-scheme:light;
}
@media (max-width:1023px){ :root{ --row1:60px; --row2:0px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* 고정 마스트헤드 아래로 앵커가 숨지 않게 */
  scroll-padding-top:calc(var(--bar) + var(--row1) + var(--row2) + 12px);
  scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);
  font:300 var(--fs-body)/var(--lh-body) var(--sans);letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.chapter{padding-block:calc(var(--chapter)/2)}
.chapter--first{padding-top:var(--chapter)}
.chapter--last{padding-bottom:var(--chapter)}

/* ---------- 타이포 ---------- */
.display{font:400 var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:var(--tr-display);text-wrap:balance}
.statement{font:400 var(--fs-statement)/var(--lh-heading) var(--serif);letter-spacing:var(--tr-display);text-wrap:balance}
.title{font:400 var(--fs-title)/var(--lh-heading) var(--serif);letter-spacing:var(--tr-display);text-wrap:balance}
.coda{font:italic 400 var(--fs-coda)/var(--lh-sub) var(--serif);letter-spacing:var(--tr-serif);text-wrap:balance}
.lead{font:300 var(--fs-lead)/var(--lh-body) var(--sans)}
.meta{font:400 var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--tr-ui);color:var(--graphite);text-transform:uppercase}
.accent{color:var(--accent)}
.hubcard__price{color:var(--accent)}
.card__n{color:var(--accent)}
.faq__q[aria-expanded="true"]{color:var(--accent)}
.faq__plus{color:var(--accent)}
.mapcard__pin{stroke:var(--accent)}
.social a:hover{color:var(--accent)}
.railctl button:not(:disabled):hover{color:var(--accent)}

/* ---------- 링크 / CTA ---------- */
.link{display:inline-block;font:400 var(--fs-link)/1 var(--sans);letter-spacing:var(--tr-ui);
  padding-bottom:6px;border-bottom:1px solid currentColor;
  transition:color .3s var(--ease),opacity .3s var(--ease)}
.link:hover{color:var(--accent);opacity:.8}
.link--over:hover{color:#fff;opacity:.55}
.spread__links{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:8px}
.link--cta{color:var(--accent)}
.link--over{color:#fff}

/* ---------- 공지 바 ---------- */
.bar{height:var(--bar);display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--paper);border-bottom:1px solid var(--ash);
  font-size:10.5px;letter-spacing:var(--tr-ui);color:var(--graphite)}
.bar em{font:italic 400 12.5px/1 var(--serif);color:var(--accent);letter-spacing:var(--tr-serif)}
@media (max-width:720px){ .bar .bar__long{display:none} }

/* ---------- 마스트헤드 ---------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease)}
.masthead.scrolled{border-bottom-color:var(--ash)}
.masthead__r1{height:var(--row1);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.masthead__logo{grid-column:2;justify-self:center;display:block}
.masthead__cta{grid-column:3;justify-self:end;color:var(--accent);
  font:500 var(--fs-link)/1 var(--sans);letter-spacing:var(--tr-ui);
  padding-bottom:4px;border-bottom:1px solid currentColor;
  transition:opacity .3s var(--ease)}
.masthead__cta:hover{opacity:.6}
.masthead__cta-short{display:none}
.masthead__logo img{height:46px;width:auto;display:block}
.masthead__r2{height:var(--row2);display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.2vw,36px)}
.nav>a,.nav__group>a{display:inline-flex;align-items:center;
  font:300 var(--fs-nav)/1 var(--sans);letter-spacing:var(--tr-ui);
  padding-bottom:4px;border-bottom:1px solid transparent;white-space:nowrap}
.nav>a:hover,.nav__group>a:hover,.nav [aria-current="page"]{border-bottom-color:var(--ink)}
.nav__group{position:relative;display:flex;align-items:center}
.nav__cta{color:var(--accent)}
.nav__caret{flex:0 0 auto;width:0;height:0;margin-left:7px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor}
.dropdown{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  padding-top:13px;white-space:nowrap;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease)}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:0;height:13px}
.dropdown>div{display:grid;gap:14px;padding:22px 30px;
  background:var(--paper);border:1px solid var(--ash)}
.nav__group:hover .dropdown,.nav__group:focus-within .dropdown{opacity:1;visibility:visible}
.dropdown a{font-size:var(--fs-link);color:var(--graphite)}
.dropdown a:hover{color:var(--ink)}
.menu-btn{display:none;grid-column:1;justify-self:start;
  font:500 var(--fs-nav)/1 var(--sans);letter-spacing:.02em}
@media (max-width:1023px){
  .masthead__r2{display:none}
  .menu-btn{display:block}
  .masthead__logo img{height:40px}
}
@media (max-width:420px){
  .masthead__cta-long{display:none}
  .masthead__cta-short{display:inline}
}

.mobilemenu{position:fixed;inset:calc(var(--bar) + var(--row1)) 0 0;z-index:49;background:var(--paper);
  padding:24px var(--gutter) 120px;overflow-y:auto;display:none}
.mobilemenu.open{display:block}
.mrow{display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--ash);text-align:left;
  font:400 clamp(20px,5.6vw,24px)/1.25 var(--serif);letter-spacing:var(--tr-serif);
  background:none;border-top:0;border-left:0;border-right:0;color:inherit}
.mgroup__plus{font:300 16px/1 var(--sans);transition:transform .2s var(--ease)}
.mgroup__head[aria-expanded="true"]{color:var(--accent)}
.mgroup__head[aria-expanded="true"] .mgroup__plus{transform:rotate(45deg)}
.mgroup__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s var(--ease)}
.mgroup__head[aria-expanded="true"]+.mgroup__panel{grid-template-rows:1fr}
.mgroup__panel>div{overflow:hidden;visibility:hidden}
.mgroup__head[aria-expanded="true"]+.mgroup__panel>div{visibility:visible}
.mgroup__panel a{display:block;padding:13px 0 13px clamp(20px,10vw,48px);
  border-bottom:1px solid var(--ash);font:300 15px/1.4 var(--sans);letter-spacing:var(--tr-body)}
.mgroup__panel a:last-child{border-bottom:0}
.mobilemenu__cta{margin-top:30px}

/* ---------- 히어로 ---------- */
.hero{position:relative;height:calc(100svh - var(--bar) - var(--row1) - var(--row2));
  min-height:520px;max-height:1080px;overflow:hidden;background:#cbbba8}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .9s var(--ease)}
.hero__video.playing{opacity:1}
.hero__scrim{position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(to top,rgba(0,0,0,.46),rgba(0,0,0,.20) 45%,transparent)}
.hero__cap{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,80px);
  padding-inline:var(--gutter);text-align:center;color:#fff}
.hero__cap .display{color:#fff}
.hero__sub{margin-top:14px;font:300 clamp(14px,1.15vw,16px)/1.5 var(--sans);
  letter-spacing:var(--tr-body);color:#fff;opacity:.92;max-width:52ch;
  margin-inline:auto;text-wrap:balance}
.hero__cap .link{margin-top:22px}
.svc-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;margin:0 0 22px;padding:0;list-style:none}
.svc-facts li:not(:last-child)::after{content:"·";margin-left:10px;color:var(--graphite)}
/* 좁은 화면에서는 줄바꿈이 생겨 구분점이 줄 끝에 홀로 남는다. 점을 빼고 줄로 나눈다. */
@media (max-width:620px){
  .svc-facts{gap:6px 0;flex-direction:column}
  .svc-facts li:not(:last-child)::after{content:none}
}
@media (max-width:720px){ .hero__cap{bottom:calc(clamp(40px,8vh,80px) + 56px)} }

/* ---------- 섹션 머리 ---------- */
.head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px 48px;padding-top:26px;margin-bottom:clamp(36px,4vw,56px)}
.head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}

/* ---------- 블록 ---------- */
.statement-block{max-width:700px;margin-inline:auto;text-align:center;display:grid;gap:28px}

.spread{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6.5vw,104px);align-items:center}
.spread__text{max-width:470px;display:grid;gap:22px;align-content:center}
.spread__media{overflow:hidden;background:var(--mist)}
.spread__media img,.spread__media video{width:100%;height:100%;object-fit:cover}
.spread--portrait{grid-template-columns:5fr 6fr}
/* 왼쪽에 포함내역·패키지·버튼이 들어가므로 사진도 크게.
   4:5 는 design-system.md 6: Spread 의 세로 사진 비율이다. */
.spread--scene .spread__media{aspect-ratio:4/5}
@media (max-width:900px){ .spread--scene .spread__media{aspect-ratio:3/2} }

/* 목록 블록 — scalpit .listblock (site.css 447) */
.listblock{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:24px 64px;padding-top:26px}
.listblock::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.listblock__text{display:grid;gap:12px;align-content:start}
.listblock ul{border-top:1px solid var(--ash);margin:0;padding:0;list-style:none}
.listblock li{padding:14px 0;border-bottom:1px solid var(--ash);
  font:300 var(--fs-lead)/var(--lh-body) var(--sans);letter-spacing:var(--tr-body)}
@media (max-width:900px){ .listblock{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .spread{grid-template-columns:1fr;gap:32px}
  .spread__text{max-width:none}
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,36px)}
.card{display:grid;gap:12px;align-content:start;border-top:1px solid var(--ash);padding-top:22px}
.card .title{min-height:2.3em}
.card__n{font:400 11px/1 var(--sans);letter-spacing:var(--tr-ui);color:var(--graphite)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .cards--4{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

.rail{display:flex;gap:clamp(16px,1.8vw,24px);
  width:min(var(--wrap),calc(100% - var(--gutter)*2));margin-inline:auto;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  touch-action:pan-x pan-y;
  justify-content:safe center}
.rail::-webkit-scrollbar{display:none}
.rail{cursor:grab}
.rail.nosnap,.gallery.nosnap{scroll-snap-type:none;scroll-behavior:auto}
.rail.dragging{cursor:grabbing}
.rail.dragging *{pointer-events:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.railctl{display:flex;align-items:center;gap:26px}
.railctl .count{font:500 var(--fs-meta)/1 var(--sans);letter-spacing:.09em;color:var(--graphite);
  font-variant-numeric:tabular-nums;min-width:4.5em}
.railctl button{font:500 var(--fs-meta)/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid currentColor;transition:opacity .3s var(--ease)}
.railctl button[disabled]{opacity:.22;cursor:default}
.railtrack{height:1px;background:var(--ash);margin:32px auto 0;
  width:min(var(--wrap),calc(100% - var(--gutter)*2))}
.railtrack i{display:block;height:1px;background:var(--ink);min-width:48px;
  transition:width .3s var(--ease),transform .3s var(--ease)}
.hubcard{width:clamp(250px,26vw,344px)}
@media (max-width:720px){ .hubcard{width:76vw} }
.hubcard__plate{position:relative;overflow:hidden;background:var(--mist)}
.hubcard__plate::after{content:"";display:block;padding-top:133.333%}
.hubcard__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.hubcard:hover .hubcard__plate img{transform:scale(1.03)}
.hubcard__body{padding-top:22px;display:grid;gap:10px;align-content:start}
.hubcard__body .title{min-height:2.35em;font-size:var(--fs-item)}
.hubcard__body .link{justify-self:start;margin-top:2px}
.hubcard__meta{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-meta);
  letter-spacing:var(--tr-ui);color:var(--graphite)}
.hubcard__price{color:var(--ink)}
.hubcard__desc{min-height:2.9em}

/* 단계 도해 — 원장님 제공 코스 자료. 칸별로 잘라 격자로 놓는다.
   한 장으로 두면 폰에서 칸이 작아져 글씨를 못 읽는다. */
.stepfig{margin:28px 0 0;background:var(--mist)}
.stepfig img{display:block;width:100%;height:auto}
.stepgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);margin-top:28px}
.stepgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stepgrid figure{margin:0;background:var(--mist)}
.stepgrid img{display:block;width:100%;height:auto}
.stepgrid + .note{margin-top:clamp(20px,2.2vw,30px)}
@media (max-width:900px){ .stepgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .stepgrid,.stepgrid--2{grid-template-columns:minmax(0,1fr)} }

.fullbleed{position:relative;height:clamp(380px,74vh,780px);overflow:hidden;background:#d7c9b8}
.fullbleed img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;
  will-change:transform}

.band{border-top:1px solid var(--ash);border-bottom:1px solid var(--ash);
  padding-block:clamp(28px,3vw,40px);margin-top:clamp(56px,6vw,88px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band .coda{max-width:40ch}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6.5vw,104px)}
.pair>div{border-top:1px solid var(--ink);padding-top:26px;display:grid;gap:18px;
  align-content:start;grid-template-rows:auto 1fr auto}
.pair>div .link{justify-self:start;align-self:end}
@media (max-width:720px){ .pair{grid-template-columns:1fr;gap:32px} }

/* Inside — brand line + PR copy (premium.md 6: Inside) */
.inside-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:24px 64px;align-items:start;margin-bottom:clamp(44px,5vw,72px)}
.inside-intro__text{display:grid;gap:16px;max-width:62ch}
.inside-bar{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px 40px;margin-bottom:24px}
@media (max-width:900px){ .inside-intro{grid-template-columns:minmax(0,1fr)} }

/* Visit details — Address 1.3 : Hours 1 : Telephone 0.8 (premium.md 6: Visit) */
.info{display:grid;grid-template-columns:1.2fr 1fr;gap:36px clamp(20px,2.2vw,34px)}
.info>*{display:grid;align-content:start;justify-items:start;gap:10px;
  padding-top:22px;border-top:1px solid var(--ash)}
.info dt{margin-bottom:2px}
.info dd{margin:0;font:300 var(--fs-body)/var(--lh-body) var(--sans)}
.info dd+dd{margin-top:14px}
.info dd+dt{margin-top:10px}
.info a.link{margin-top:4px}
@media (max-width:900px){ .info{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .info{grid-template-columns:1fr} }

/* Social icons — 23px outline, 44px tap area (premium.md 6: Visit) */
.social{display:flex;justify-content:center;gap:20px;margin-top:28px}
.social a{width:44px;height:44px;display:grid;place-items:center;
  transition:opacity .3s var(--ease)}
.social a:hover{opacity:.55}
.social svg{width:23px;height:23px}

/* FAQ */
.faq{display:grid;grid-template-columns:4fr 8fr;gap:64px}
.faq__list{border-top:1px solid var(--ash);border-bottom:1px solid var(--ash)}
.faq__item{border-bottom:1px solid var(--ash)}
.faq__item:last-child{border-bottom:0}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:12px 0;text-align:left;font:400 var(--fs-faq)/1.3 var(--serif);letter-spacing:var(--tr-serif)}
.faq__plus{flex:0 0 auto;font-size:13px;transition:transform .35s var(--ease)}
.faq__q[aria-expanded="true"] .faq__plus{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden;visibility:hidden}
.faq__q[aria-expanded="true"]+.faq__a>div{visibility:visible}
.faq__a p{max-width:62ch;padding-bottom:16px}
@media (max-width:900px){ .faq{grid-template-columns:1fr;gap:28px} }

/* 문의 — 메신저 채널 */
.enquiry{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6.5vw,104px);align-items:start}
.channels{display:grid;gap:14px}
.channel{display:flex;align-items:center;gap:18px;padding:20px 22px;
  border:1px solid var(--ash);transition:border-color .25s var(--ease),background .25s var(--ease)}
.channel:hover{border-color:var(--ink);background:var(--mist)}
.channel__ic{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center}
.channel__ic svg{width:26px;height:26px;display:block}
.channel__body{flex:1 1 auto;display:grid;gap:3px}
.channel__name{font:400 var(--fs-item)/1.2 var(--serif)}
.channel__note{font:300 var(--fs-small)/var(--lh-small) var(--sans);color:var(--graphite)}
.channel__go{flex:0 0 auto;font-size:17px;color:var(--graphite);
  transition:transform .25s var(--ease),color .25s var(--ease)}
.channel:hover .channel__go{transform:translateX(4px);color:var(--ink)}
.channel[data-channel="ln"]:hover .ic-ln{fill:#06C755}
.channel[data-channel="wa"]:hover .ic-wa{fill:#25D366}
.channel[data-channel="ig"]:hover .ic-ig{stroke:#C13584}
.ic-ig{stroke:var(--ink);fill:none;stroke-width:1.4}
.ic-wa,.ic-ln{fill:var(--ink);stroke:none}
.form__note{font:300 var(--fs-note)/var(--lh-small) var(--sans);color:var(--graphite)}
.note{font:300 var(--fs-note)/var(--lh-small) var(--sans);letter-spacing:var(--tr-body);color:var(--graphite);max-width:52ch}
.note a{border-bottom:1px solid var(--ash)}
.note a:hover{color:var(--accent);border-bottom-color:currentColor}
.statement-block .note{margin-inline:auto;max-width:none;text-wrap:balance}
@media (max-width:900px){ .enquiry{grid-template-columns:1fr;gap:32px} }

/* 푸터 */
.footer{border-top:1px solid var(--ash);padding:72px 0 36px;margin-top:var(--chapter)}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.footer__logo img{height:54px;width:auto;margin-bottom:14px}
.footer h3{font:400 16px/1.2 var(--serif);letter-spacing:var(--tr-serif);margin-bottom:14px}
.footer li{list-style:none;font-size:12.5px;line-height:1.9}
.footer ul{margin:0;padding:0}
.footer__legal{border-top:1px solid var(--ash);margin-top:40px;padding-top:18px;
  font-size:11px;line-height:1.7;color:var(--graphite)}
.footer__row{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:4px 32px;margin-top:12px}
.footer__row p{margin:0}
@media (max-width:720px){ .footer__row{display:grid;gap:4px} }
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .footer__grid{grid-template-columns:1fr} }

/* 독 */
.dock{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:12px;pointer-events:none}
.dock a{pointer-events:auto}
.dock a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease),color .25s var(--ease)}
.dock a:hover{background:#fff}
.dock svg{width:23px;height:23px;display:block}
.dock a:hover .ic-ig{stroke:#C13584}
.dock a:hover .ic-wa{fill:#25D366}
.dock a:hover .ic-ln{fill:#06C755}
/* 세로 독은 콘텐츠 열 오른쪽 끝과 겹친다.
   content right = min(W-gutter, (W+1296)/2-48), dock left = W-70
   -> 뷰포트 1340px 미만에서는 항상 겹쳐서 FAQ 플러스·캐러셀 버튼이 가려진다.
   그 아래에서는 하단 가로 배치로 바꾼다. */
@media (max-width:1399px){
  .dock{flex-direction:row;gap:14px;left:auto;right:22px;top:auto;transform:none;
    bottom:calc(20px + env(safe-area-inset-bottom))}
  .footer{padding-bottom:96px}
}
@media (max-width:720px){
  /* innerHeight 가 574px 아래면 min-height 가 히어로를 화면보다 길게 만들어
     CTA 가 독과 겹친다. iPhone SE 는 툴바 포함 553px. */
  .hero{min-height:0}
  .hero__cap{bottom:calc(48px + 14px + env(safe-area-inset-bottom) + 24px)}
  .dock{flex-direction:row;gap:26px;left:0;right:0;top:auto;transform:none;
    justify-content:center;bottom:calc(14px + env(safe-area-inset-bottom))}
  .dock a{width:48px;height:48px;border-radius:0;background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(255,255,255,.9))}
  .dock a:hover{background:none}
  .dock svg{width:27px;height:27px}
  .footer{padding-bottom:104px}
}

.disclaimer{font-size:11.5px;line-height:1.65;color:var(--graphite);max-width:70ch}
.pair .disclaimer{margin-top:4px;padding-top:14px;border-top:1px solid var(--ash)}
.crumb{font-size:var(--fs-meta);letter-spacing:var(--tr-ui);color:var(--graphite);padding-top:24px}
.crumb a:hover{color:var(--ink)}

/* ---------- 가로 모드 / 낮은 화면 ----------
   폰을 눕히면 높이가 ~390px 밖에 안 된다. 히어로 min-height 520px 때문에
   H1 과 CTA 가 화면 밖으로 밀려나고, 세로 독이 본문 오른쪽을 덮는다. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero__cap{bottom:68px}
  .hero__sub{display:none}
  .dock{flex-direction:row;gap:22px;left:0;right:0;top:auto;transform:none;
    justify-content:center;bottom:calc(10px + env(safe-area-inset-bottom))}
  .dock a{width:44px;height:44px;border-radius:0;background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}
  .dock a:hover{background:none}
  .footer{padding-bottom:84px}
}

/* ---------- 모바일 탭 영역 ----------
   WCAG 2.2 AA(2.5.8)는 24x24px, Apple HIG 는 44pt 를 요구한다.
   밑줄 위치가 틀어지지 않게 가상요소로 히트 영역만 넓힌다. */
@media (max-width:1023px){
  .menu-btn,.masthead__cta,.link,.railctl button,.faq__q,.mgroup__head{position:relative}
  .menu-btn::after,.masthead__cta::after,.link::after,.railctl button::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:44px}
  .masthead__logo{padding-inline:10px;min-height:44px;display:grid;align-items:center}
  /* 푸터 링크는 히트 영역을 겹치면 서로 클릭을 뺏는다. 간격으로 벌린다. */
  .footer li{line-height:1.4}
  .footer li a{display:inline-block;padding-block:13px}
  .footer__legal a{display:inline-block;padding-block:7px}
  .crumb a{display:inline-block;padding-block:8px}
  /* 가격과 코스 정보는 모바일에서 한 단계 키운다 */
  .hubcard__meta{font-size:12.5px}
  .statement-block .meta{font-size:12px;line-height:1.6}
}

/* ---------- 모션 ---------- */
@keyframes rv-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes rv-unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes rv-settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes rv-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-in{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .rv-rise.in{animation:rv-rise 1000ms var(--ease-reveal) var(--d,0ms) backwards}
  .rv-unveil.in{animation:rv-unveil 1400ms var(--ease-reveal) var(--d,0ms) backwards}
  .rv-unveil.in img{animation:rv-settle 1800ms var(--ease-reveal) var(--d,0ms) backwards}
  .rv-line.in::before{animation:rv-line 1200ms var(--ease-reveal) var(--d,0ms) backwards;transform-origin:0 50%}
  .hero__cap>*{animation:hero-in 1000ms var(--ease-reveal) backwards}
  .hero__cap .display{animation-delay:380ms}
  .hero__cap .link{animation-delay:720ms}
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important} }


/* ---------- 이식: 마무리 초대 ---------- */
/* 버건디 CTA 밴드 — scalpit .cta-band (site.css 498) */
.cta-band{position:relative;background:var(--accent);color:var(--paper);
  padding-block:clamp(88px,9vw,128px)}
.closing{text-align:center;max-width:700px;display:grid;gap:26px}
.closing .statement{text-wrap:balance;color:var(--paper)}
.closing .accent{color:var(--paper)}
.cta-band .link{color:var(--paper);border-bottom-color:var(--paper)}
.cta-band .link:hover{color:var(--paper);opacity:.6}
.cta-band :focus-visible{outline-color:var(--paper)}

/* ---------- 이식: 지도 카드 ---------- */
.mapwrap{margin-top:clamp(40px,4vw,64px)}
.mapembed{position:relative;background:var(--mist);aspect-ratio:3/1;margin-bottom:14px}
.mapembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.25) contrast(.95)}
@media (max-width:760px){ .mapembed{aspect-ratio:4/3} }
@media (max-width:420px){ .mapembed{aspect-ratio:1/1} }
.mapcard{display:block;background:var(--mist);padding:clamp(24px,3vw,36px);
  display:grid;gap:10px;transition:background .3s var(--ease)}
.mapcard:hover{background:var(--ash)}
.mapcard__pin{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.1}
.mapcard__name{font:400 var(--fs-coda)/1.3 var(--serif);letter-spacing:var(--tr-serif)}
.mapcard__addr{font:300 var(--fs-link)/1.6 var(--sans);color:var(--graphite)}
.mapcard__hint{font:400 var(--fs-meta)/1 var(--sans);letter-spacing:var(--tr-ui);
  text-transform:uppercase;color:var(--graphite)}

/* ---------- 이식: 인테리어 갤러리 ---------- */
.gallery{display:flex;gap:clamp(16px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;touch-action:pan-x pan-y;width:min(var(--wrap),calc(100% - var(--gutter)*2));margin-inline:auto;
  cursor:grab}
.gallery::-webkit-scrollbar{display:none}
.gallery.dragging{cursor:grabbing}

.gallery img{height:clamp(300px,58vh,600px);width:auto;flex:0 0 auto;scroll-snap-align:start;
  object-fit:cover;-webkit-user-drag:none;user-select:none}