:root{
  --bg:#FAFAF8; --ink:#242424; --sub:#5f5b55; --line:#e4e0d8; --brown:#6B522F; --sand:#efe8dc;
  --pad:20px; --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
b,h1,h2,.big,.name{text-wrap:balance}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px}
.btn-fill{background:var(--brown);color:#fff;border:1px solid var(--brown)}
.btn-fill:hover{background:#5a4526}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{border:1px solid rgba(255,255,255,.8);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}

/* 상단 */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px var(--pad);padding-top:max(12px,env(safe-area-inset-top));color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:background .3s,color .3s}
.top.solid{text-shadow:none}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.logo{font-weight:800;letter-spacing:.14em;font-size:17px}
.loc{font-size:13px;opacity:.85}
.top .btn-ghost{border-color:currentColor;color:inherit}
.top.solid{background:rgba(250,250,248,.94);color:var(--ink);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top.solid .btn-ghost:hover{background:var(--ink);color:#fff}

/* 1. 투어 */
.tour{position:relative;height:760vh;background:var(--bg)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);will-change:opacity,transform}
.frame:first-child{opacity:1}
.fadeout{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none;z-index:3}
/* 소제목: 아래 카드와 같은 틀(최대 폭 1080px)의 왼쪽 선에 맞춘다 */
.stop.dark{z-index:4;color:var(--ink);justify-content:center;align-items:flex-start;text-align:left;padding:0 max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)))}
.stop.center.dark{text-align:left}
.stop.dark .big{text-shadow:none;width:100%;max-width:var(--max);text-wrap:initial;white-space:nowrap;font-size:clamp(26px,6.4vw,44px);line-height:1.32}   /* 섹션 제목(.h)과 같은 크기 */
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
.stop{position:absolute;left:calc(var(--pad) + 8px);right:calc(var(--pad) + 8px);bottom:calc(64px + env(safe-area-inset-bottom));color:#fff;opacity:0;transform:translateY(16px);will-change:opacity,transform;pointer-events:none}
.stop.on{pointer-events:auto}
.stop-1{opacity:1;transform:none}
.stop.center{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.frame.vid{background:#1d1b18}

.tag{display:none;font-size:12px;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);margin-bottom:14px}
.stop.center .tag{position:absolute;left:var(--pad);bottom:calc(64px + env(safe-area-inset-bottom));margin:0}
.big{font-size:clamp(26px,7vw,52px);font-weight:700;line-height:1.3;margin:0 0 10px;letter-spacing:-.01em;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.sub{font-size:clamp(17px,4.5vw,23px);margin:0;opacity:.94;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.sub.lead{margin-bottom:8px;font-weight:500}
.name-sub{font-size:clamp(17px,4.6vw,24px);letter-spacing:.2em;margin:0 0 -6px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.name{font-size:clamp(46px,14vw,128px);font-weight:800;letter-spacing:.12em;margin:0;line-height:1.05;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.name-line{font-size:clamp(16px,4.4vw,24px);font-weight:500;margin:14px 0 0;opacity:.95;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.progress{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.progress i{width:3px;height:22px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .3s}
.progress i.on{background:#fff}
.hint{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);color:#fff;font-size:11px;letter-spacing:.2em;opacity:.7;transition:opacity .4s}

/* 섹션 공통 */
/* 투어의 마지막 장면은 고정된 채, 다음 내용이 그 위로 덮으며 올라온다 */
/* 투어가 바탕색으로 녹아든 뒤 빈 화면이 길지 않도록 다음 섹션을 당겨 올린다(둘 다 바탕색이라 겹침이 보이지 않는다) */
main{position:relative;z-index:2;background:var(--bg);margin-top:-34vh}
.sec{max-width:var(--max);margin:0 auto;padding:88px var(--pad)}
.h{font-size:clamp(26px,6.4vw,44px);line-height:1.32;font-weight:700;letter-spacing:-.01em;margin:0 0 32px}
.h-md{font-size:clamp(22px,5.4vw,36px)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* 2 */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.row{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center}
.row img{width:104px;height:104px;object-fit:cover;border-radius:6px}
.row b{display:block;font-size:16px;font-weight:600;color:var(--sub);margin-bottom:2px}
.row span{display:block;font-size:18px;font-weight:700;line-height:1.45}

/* 3 */
.wide{margin:0 0 36px}
.wide img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.chips{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:14px}
.body{font-size:16px;color:var(--sub);margin:0;max-width:40em}

/* 3: 시설 — 옆으로 넘기는 카드 */
.car-wrap{position:relative;margin:4px auto 0;max-width:calc(var(--max) + 2 * var(--pad));overflow:hidden}
.car{--gap:14px;--edge:var(--pad);list-style:none;margin:0;padding:0 var(--edge);display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car::-webkit-scrollbar{display:none}
.card{flex:0 0 76%;scroll-snap-align:start;position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#ddd}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .cap{position:absolute;left:0;right:0;top:0;padding:18px 18px 56px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.card .cap small{display:block;font-size:15px;font-weight:600;opacity:.9;margin-bottom:8px}
.card .cap b{display:block;font-size:19px;font-weight:700;line-height:1.35}
.card .cap span{display:block;font-size:14px;font-weight:500;opacity:1;margin-top:6px}
/* 처음 보일 때 오른쪽에서 한 번 살짝 밀려 들어온다: 옆에 더 있다는 신호 */
.card.nudge{transform:translateX(48px);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.card.nudge:nth-child(2){transition-delay:.08s}.card.nudge:nth-child(3){transition-delay:.16s}.card.nudge:nth-child(4){transition-delay:.24s}.card.nudge:nth-child(5){transition-delay:.32s}
.car.in .card.nudge{transform:none;opacity:1}
.car-nav{display:none;justify-content:flex-end;gap:10px;margin-top:24px;padding:0 var(--edge)}
.car-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.car-nav button:disabled{opacity:.35;cursor:default}
#work .inner{padding-top:0}
/* 3(이전): 시설 */
#work{padding-top:0}
.hero{position:relative;margin:0}
.hero img{width:100%;height:62vh;height:62svh;object-fit:cover;display:block}
.hero figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:32px;color:#fff}
.hero figcaption .h{margin:0;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
#work .inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.biz{margin:28px 0 0;font-size:16px;font-weight:600;line-height:1.5}
#work .note{margin:8px 0 0}
/* 3(이전): 폰부스·회의실 */
.rooms{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.rooms li{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.rooms img{width:120px;aspect-ratio:3/4;object-fit:cover;border-radius:6px}
.rooms b{display:block;font-size:17px;font-weight:700;line-height:1.4;margin-bottom:4px}
.rooms span{display:block;font-size:14px;color:var(--sub)}

/* 4: 결론 문장 — 한 줄씩 천천히 떠오르고, 사진은 살짝 크게 시작해 제자리로 가라앉는다 */
.closing{min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px var(--pad)}
.closing .line{margin:0;font-size:clamp(22px,5.6vw,38px);font-weight:500;line-height:1.5;color:var(--ink);opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
.closing .line.strong{font-weight:700;margin-top:10px}
.closing.in .line{opacity:1;transform:none}
.closing.in .line:nth-child(2){transition-delay:.45s}
.closing.in .line:nth-child(3){transition-delay:1.0s}
.settle img{transform:scale(1.05);opacity:0;transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s ease}
.settle.in img{transform:none;opacity:1}
/* 4 */
.sec-full{max-width:none;padding-left:0;padding-right:0}
.full{margin:0}
.full img{width:100%;max-height:78vh;aspect-ratio:3/2;object-fit:cover}

/* 5: 가격 카드 */
.plans{display:grid;gap:14px;margin:0 0 22px}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px 22px}
.plan small{display:flex;align-items:center;height:26px;font-size:14px;font-weight:600;color:var(--sub);margin-bottom:10px}
.plan b{display:block;font-size:clamp(30px,8vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.plan b em{font-style:normal;font-weight:500;margin-left:2px;color:var(--sub)}
.plan b em.tilde{font-size:.8em;font-weight:600}
.plan b em.unit{font-size:.38em}
.plan span{display:block;font-size:14px;color:var(--sub);margin-top:12px;line-height:1.5}
.plan-month{background:var(--brown);border-color:var(--brown);color:#fff}
.plan-month small,.plan-month span,.plan-month b em{color:rgba(255,255,255,.8)}
.plan .sale{display:inline-flex;align-items:center;height:22px;font-style:normal;font-size:12px;font-weight:700;line-height:1;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:0 9px;margin-left:8px}
.plan s{display:block;font-size:16px;line-height:1.4;color:rgba(255,255,255,.7);text-decoration:line-through;margin-bottom:2px}
.plan s.ph{visibility:hidden}   /* 월간권 취소선 줄과 높이를 맞춰 금액 줄을 정렬한다 */
/* 6: 오픈 이벤트 */
.band{display:grid;gap:18px}
.ev-big{display:flex;align-items:center;gap:14px}
.ev-big em{font-style:normal;font-size:clamp(40px,11vw,56px);font-weight:800;letter-spacing:-.03em;color:var(--brown);line-height:1}
.ev-big span{font-size:15px;font-weight:600;line-height:1.4}
.ev-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.08)}
.ev-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:15px}
.ev-list b{font-weight:700}
/* 5 */
.prices{display:grid;gap:2px;margin:0 0 28px;border-top:1px solid var(--line)}
.prices p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.prices span{font-size:15px;color:var(--sub)}
.prices b{font-size:22px;font-weight:700}
.steps{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;font-size:16px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.steps em{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.note{font-size:14px;color:var(--sub);margin:0 0 16px}
.how{font-size:17px;margin:0;color:var(--ink)}

/* 6 */
.event{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.band{background:var(--sand);border-radius:10px;padding:24px 22px}
.ev-t{font-size:18px;font-weight:700;margin:0 0 10px;color:var(--brown)}
.ev-p{margin:0;display:flex;flex-direction:column;gap:4px;font-size:16px}

/* 7 */
.info{margin:0 0 24px;display:grid;gap:12px}
.info div{display:grid;grid-template-columns:52px 1fr;gap:12px}
.info dt{color:var(--sub);font-size:14px;padding-top:2px}
.info dd{margin:0;font-size:16px}
#visit .actions{margin-top:0}

/* 8 */
.foot{padding:40px var(--pad) calc(120px + env(safe-area-inset-bottom));text-align:center;color:var(--sub);font-size:13px;border-top:1px solid var(--line);background:var(--bg)}
.foot p{margin:2px 0}
.foot b{letter-spacing:.14em;color:var(--ink)}

/* 하단 버튼 줄(휴대폰) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:10px var(--pad);padding-bottom:max(10px,env(safe-area-inset-bottom));background:rgba(250,250,248,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s ease}
.bar .btn{flex:1}
.bar.show{transform:none}

/* 휴대폰(860px 미만)에서만: 투어 글 왼쪽 여백, 이름 크기, 소제목-카드 간격 */
@media (max-width:859px){
  .stop{left:44px;right:28px;bottom:calc(104px + env(safe-area-inset-bottom))}
  .stop.center{bottom:0}
  #visit .actions{display:none}   /* 휴대폰은 하단 고정 버튼 줄이 있어 위치 섹션의 버튼을 숨긴다 */
  .name{font-size:11vw}
  .name-sub{font-size:4.2vw}
  main{margin-top:-44vh}
}

/* 넓은 화면 */
@media (min-width:860px){
  :root{--pad:48px}
  .stop{left:calc(var(--pad) + 28px);right:auto;max-width:640px;bottom:72px}
  .stop.center{left:0;right:0;max-width:none}   /* 이름은 화면 가운데 */
  .rows{grid-template-columns:repeat(3,1fr);gap:28px}
  .row{grid-template-columns:1fr;gap:14px}
  .row img{width:100%;height:auto;aspect-ratio:4/3}
  .card{flex-basis:calc((var(--max) - 2 * var(--gap)) / 3.25)}   /* 틀 안에 3장 + 4번째가 틀 오른쪽 선에서 잘려 보인다 */
  .card .cap b{font-size:22px}
  .card .cap small{font-size:16px}
  .car-nav{display:flex}
  .cards img{aspect-ratio:3/4}
  .hero img{height:72vh}
  .hero figcaption{left:var(--pad);bottom:56px}
  #visit{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  #visit .h{grid-column:1/-1}
  #visit .wide{grid-row:2/span 2;margin:0}
  #visit .info,#visit .actions{align-self:start}
  .plans{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .plan{padding:32px 28px}
  .plan b{font-size:34px}
  .band{grid-template-columns:1fr 1.4fr;align-items:center;gap:40px;padding:32px 36px}
  .bar{display:none}
  .foot{padding-bottom:48px}
}

/* 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  .frame,.stop{transition:none!important;transform:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}