/* =====================================================================
   곤잠펜션 · 홈페이지 디자인 (색은 colors.css)

   규칙 하나: 값을 새로 만들지 않고, 아래 단계 중에서 고른다.
   ─ 그리드   휴대폰 4칸 · 태블릿 8칸 · PC 12칸 / 세로선은 A(1번째 칸) · B(PC 7번째 칸) 두 개
   ─ 글자     MEGA · DISPLAY · TITLE · HEAD · BODY · UI · SMALL · CAP  (8단계)
   ─ 굵기     900 · 700 · 500  (3단계)
   ─ 간격     s1 · s2 · s3 · s4 · s5 · s6  (6단계)
   ─ 모서리   pill · card · sm  (3단계) / 선 2px · 1px
   ─ 그림자   떠 있는 것(카드 · 바 · 단독 버튼) 4px · 안에 든 버튼 1px  (시즌 공통)
   ─ 흐림     흐린 글자 불투명도 --dim 하나 (링크는 흐리게 하지 않음)
   ─ 움직임   전환 시간 t1 .15s · t2 .4s · t3 .8s / 반복은 배경(영상 · 전광판 · 물결 · 눈)만
   ─ 화면     사진 화면(첫 화면 · 장면)은 글이 왼쪽 아래 같은 높이,
              정보 화면(후기 · 공간 · 안내 · 마지막)은 라벨이 위쪽 같은 높이에서 시작

   차례
     1. 토큰         5. 고정 UI       9.  장면(노래방 · 바비큐 · 불멍 · 객실 · 물놀이장)   13. 메뉴 · 사진 크게 · 알림
     2. 기본         6. 화면 틀       10. 공간                                         14. 화면 크기별 배치 ← 크기별 규칙은 모두 여기
     3. 글자 단계    7. 첫 화면       11. 이용 안내
     4. 공통 부품    8. 후기          12. 마지막 · 푸터 / 예약 창
   ===================================================================== */
[hidden]{display:none!important}

/* ---------- 1. 토큰 ---------- */
:root{
  color-scheme: light;
  --dim:.68;                                  /* 어두운 바탕 위 흐린 글자: 하나만 */
  /* 글꼴 */
  --f-ko:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --f-it:'Archivo','Helvetica Neue',Arial,sans-serif;
  /* 그리드 — 휴대폰 */
  --cols:4; --gut:24px; --col-gap:12px; --max:1168px;
  --colw:calc((min(100vw, calc(var(--max) + var(--gut) * 2)) - var(--gut) * 2 - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
  --nav-h:64px; --fab-zone:76px;
  /* 간격 6단계 — 휴대폰 */
  --s1:6px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:64px;
  /* 글자 8단계 — 휴대폰 (크기 / 행간 / 자간) */
  --fs-mega:clamp(48px,9.6vh,64px);   --lh-mega:.86;  --ls-mega:-.02em;
  --fs-display:clamp(32px,6vh,40px);  --lh-display:1.08; --ls-display:-.05em;
  --fs-title:26px;    --lh-title:1.2;  --ls-title:-.045em;
  --fs-head:18px;     --lh-head:1.32;  --ls-head:-.035em;
  --fs-body:15px;     --lh-body:1.6;   --ls-body:-.015em;
  --fs-ui:14px;       --lh-ui:1.3;     --ls-ui:-.02em;
  --fs-small:12px;    --lh-small:1.5;  --ls-small:-.01em;
  --fs-cap:11px;      --lh-cap:1.2;    --ls-cap:.14em;
  /* 모서리 · 그림자 · 선 */
  --r-pill:999px; --r-card:16px; --r-sm:10px;
  --sh:4px 4px 0 var(--shc); --sh-hover:6px 6px 0 var(--shc); --sh-press:1px 1px 0 var(--shc);
  --bd:2px solid var(--ink);
  /* 움직임: 전환 시간 3단계 — 누름 · 색 바뀜 / 열고 닫힘 / 시즌 · 등장 (영상 확대 1.8s만 예외) */
  --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.3,1.6,.45,1);
  --t1:.15s; --t2:.4s; --t3:.8s;
  --screen:100vh;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports (height:100dvh){:root{--screen:100dvh}}
/* 태블릿 */
@media (min-width:720px){
  :root{
    --cols:8; --gut:32px; --col-gap:16px; --nav-h:72px; --fab-zone:96px;
    --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
    --fs-mega:104px; --fs-display:60px; --fs-title:36px; --fs-head:20px;
    --fs-body:16px; --fs-ui:15px; --fs-small:12px; --fs-cap:11px;
  }
}
/* PC */
@media (min-width:960px){
  :root{
    --cols:12; --gut:56px; --col-gap:24px; --fab-zone:104px;
    --s4:clamp(28px,4vh,40px); --s5:clamp(40px,6vh,64px); --s6:clamp(72px,11vh,120px);
    --fs-mega:clamp(112px,15vh,160px); --fs-display:clamp(64px,9.5vh,88px); --fs-title:clamp(36px,5.2vh,48px);
    --fs-head:24px; --fs-body:17px; --fs-ui:15px; --fs-small:13px; --fs-cap:12px;
  }
}

/* ---------- 2. 기본 ---------- */
*{box-sizing:border-box}
html{touch-action:manipulation;scroll-snap-type:y mandatory;scroll-behavior:smooth;transition:background-color var(--t3) var(--ease)}   /* 손가락 두 번 톡 → 화면 확대 막기(아이폰). 두 손가락 확대는 그대로 */
a,button,label,summary,[role="button"]{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ko);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:500;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
b,strong{font-weight:900}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:900}
p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
#scene-splash{display:none}
:root[data-season="summer"] #scene-splash{display:grid}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}

/* ---------- 3. 글자 단계 — 역할만 정하고, 크기는 토큰에서 ---------- */
:where(.sc-en){font-size:var(--fs-mega);line-height:var(--lh-mega);letter-spacing:var(--ls-mega)}
:where(.s-hero h1){font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:900}
:where(.h2,.sc-ko){font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:900}
:where(.s-hero h1 .l1,.rvc q,.loc-hook,.bk-head b,.bk-price b,.ko-t,.ms-head b,.panel h3)
  {font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:900}
:where(body,.sub,.f-v,.loc-addr,.ko-s,.ko-bubble pre)
  {font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
:where(.btn,.top nav a,.menu-btn,.tab,.stab,.real,.hero-deal,.sc-spec li,.rv-tagline b,.pills a,.pills button,
  .bk-ppl output,.day,.mon-h h3,.ms-list button,.loc-rows div,.ref-card li,.ref-card header b,.fab-t,.toast,.lb-top,.sp-dev button)
  {font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:700}
:where(.f-k,.sp-desc,.ref-note,.ref-card header span,.bk-head span,.cal-key,.bk-price span,
  .bk-ppl .lbl,.dow span,.ms-tel,.bk-msg,.link-btn,.mon-h h3 small,.ko-cp)
  {font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);font-weight:500}
:where(.hd-tag,.corners,.ms-list button i,.ref-card header em)
  {font-family:var(--f-it);font-style:italic;font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap);font-weight:700;text-transform:uppercase}
/* 숫자는 Archivo */

/* ---------- 4. 공통 부품 ---------- */
/* 큰 영어 글씨: 레트로 포스터 겹그림자 */
.it{font-family:var(--f-it);font-style:italic;font-weight:500;color:#FFFFFF;text-shadow:.04em .04em 0 var(--ish,#6B1F12),.085em .085em 0 var(--it-sh2)}
.sub{color:var(--ink-2)}
.kit{position:relative;width:fit-content;max-width:100%}
/* 제목 마지막 단어 묶음: 줄이 바뀌어도 함께 */
.spk-end{position:relative;white-space:nowrap}

/* 버튼: 높이 48 (PC 52) · 모서리 sm · 그림자 1종 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s3);border-radius:var(--r-sm);text-decoration:none;cursor:pointer;border:var(--bd);background:none;white-space:nowrap;transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease),background-color var(--t2) var(--ease)}
.btn-pop{background:var(--btn);color:var(--on-accent);box-shadow:var(--sh)}
.btn-pop:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-hover)}
/* 누르면 리모컨 버튼처럼 꾹 */
.btn-pop:active{transform:translate(3px,3px) scale(.97);box-shadow:var(--sh-press);transition-timing-function:var(--pop)}
.btn-kakao{background:var(--kakao);color:#15181E;border-color:#15181E}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.arr{font-family:var(--f-it);font-weight:700}
.circ{width:44px;height:44px;border-radius:50%;border:var(--bd);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-press);transition:transform var(--t1) var(--ease)}
.circ:active:not(:disabled){transform:translate(1px,1px)}
.circ:disabled{opacity:.3;cursor:not-allowed}
.link-btn{background:none;border:0;padding:0;cursor:pointer;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

/* 노래방 자막: 시즌 색 글자가 왼쪽부터 채워지고(외곽선 있는 노래방 자막), 한 소절이 끝나면 꺼지며 원래 글자로 '딱'. 정보 글자에는 쓰지 않음 */
.kara{position:relative;--kt:2.4s;--kd:.9s;--ko:max(1.5px,.045em);transform-origin:0 62%}
span.kara{display:inline-block}
.kara::after{content:attr(data-k);content:attr(data-k) / "";position:absolute;left:0;top:0;right:0;bottom:0;white-space:pre-line;color:var(--kara);
  text-shadow:var(--ko) 0 0 var(--kara-o),calc(var(--ko) * -1) 0 0 var(--kara-o),0 var(--ko) 0 var(--kara-o),0 calc(var(--ko) * -1) 0 var(--kara-o),
    calc(var(--ko) * .7) calc(var(--ko) * .7) 0 var(--kara-o),calc(var(--ko) * -.7) calc(var(--ko) * .7) 0 var(--kara-o),calc(var(--ko) * .7) calc(var(--ko) * -.7) 0 var(--kara-o),calc(var(--ko) * -.7) calc(var(--ko) * -.7) 0 var(--kara-o),
    calc(var(--ko) * 1.6) calc(var(--ko) * 1.6) 0 var(--kara-o);
  clip-path:inset(-8% 100% -8% -2%);pointer-events:none;opacity:0}
.kara.play::after{animation:kara var(--kt) linear var(--kd) backwards}
@keyframes kara{
  0%{clip-path:inset(-8% 100% -8% -2%);opacity:1;animation-timing-function:cubic-bezier(.42,0,.3,1)}
  40%{clip-path:inset(-8% -2% -8% -2%);opacity:1}
  69.9%{clip-path:inset(-8% -2% -8% -2%);opacity:1}
  70%,100%{clip-path:inset(-8% -2% -8% -2%);opacity:0}}
/* 꺼지는 순간: 글자가 '딱' 한 번 튕김 */
.kara.play{animation:karapop .42s var(--pop) calc(var(--kd) + var(--kt) * .7) backwards}
@keyframes karapop{0%{scale:1.055}45%{scale:.985}100%{scale:1}}
/* 빛 줄기: 장면 영어 제목 위로 시즌의 밝은 색 빛이 왼쪽 → 오른쪽 한 번. 글자 폭(--kw)만큼만 지나가서 짧은 제목도 긴 제목도 같은 빠르기 */
.shine{position:relative}
.shine::after{content:attr(data-k);content:attr(data-k) / "";position:absolute;left:0;top:0;right:0;bottom:0;white-space:pre-line;pointer-events:none;opacity:0;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  background:linear-gradient(100deg,transparent 40%,var(--sf) 47%,#FFFFFF 50%,var(--sf) 53%,transparent 59%) 0 0/calc(var(--kw,100%) * 3) 100% no-repeat;
  -webkit-background-clip:text;background-clip:text}
.shine.play::after{animation:shine .95s cubic-bezier(.45,0,.25,1) var(--shd,.55s) backwards}
@keyframes shine{0%{background-position:calc(var(--kw,100px) * -1.95) 0;opacity:1}99%{background-position:calc(var(--kw,100px) * -.05) 0;opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .kara::after,.shine::after{display:none}
  .kara{animation:none!important}
}

/* ---------- 5. 고정 UI ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:#FFFFFF;transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
:root[data-tone="light"] .top{background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
:root[data-tone="dark"] .top{background:linear-gradient(to bottom,rgba(10,6,4,.45),rgba(10,6,4,0))}
.top .wrap{height:var(--nav-h);display:flex;align-items:center;gap:var(--s2)}
.top .logo{height:44px;width:auto}
.top .logo-c{display:none}
:root[data-tone="light"] .top .logo-w{display:none}
:root[data-tone="light"] .top .logo-c{display:block}
.top nav{display:none;gap:var(--s1);flex:1}
.top nav a{position:relative;text-decoration:none;padding:var(--s1) var(--s2);opacity:var(--dim)}
.top nav a::after{content:"";position:absolute;left:var(--s2);right:var(--s2);bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
.top nav a.on,.top nav a:hover{opacity:1}
.top nav a.on::after,.top nav a:hover::after{transform:scaleX(1)}
.top .gap{flex:1}
.top .btn{min-height:44px;padding:0 var(--s2);box-shadow:var(--sh-press)}
.menu-btn{display:flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2);border-radius:var(--r-pill);border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer}
/* 진행 막대 (노래방 반주 막대) */
.prog{position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));height:3px;z-index:49;pointer-events:none}
.prog i{position:relative;display:block;height:100%;width:0;background:var(--grad,var(--accent))}
.prog i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);opacity:.95}
:root[data-screen="hero"] .prog i::after{opacity:0}

/* 카톡 버튼: 휴대폰은 동그라미만, PC는 처음에 글자가 잠깐 펼쳐짐 */
.fab{transition-property:transform,opacity,visibility,box-shadow;position:fixed;z-index:47;right:calc(var(--s2) + env(safe-area-inset-right,0px));bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;height:52px;padding:0 2px;border-radius:var(--r-pill);border:2px solid #15181E;background:var(--kakao);color:#15181E;box-shadow:4px 4px 0 #15181E;cursor:pointer;font:inherit;transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease),box-shadow var(--t1) var(--ease)}
.fab-ic{width:44px;height:44px;display:grid;place-items:center;flex:none}
.fab-t{display:none;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width var(--t2) var(--ease),padding var(--t2) var(--ease)}
.fab:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #15181E}
.fab::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid #15181E;opacity:0;pointer-events:none}
.fab.ping::after{animation:ping 1.6s var(--ease) 2}
@keyframes ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
:root[data-screen="hero"] .fab,:root[data-screen="space"] .fab,body:has(.sheet.open) .fab,body:has(.lb.open) .fab,body:has(.msheet.open) .fab{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none;visibility:hidden}
@media (prefers-reduced-motion:reduce){.fab,.fab-t{transition:none}.fab.ping::after{animation:none}}

/* 시즌 미리보기 (운영자 확인용 · PC에서만 · config.js의 showSeasonPreview) */
.sp-dev{position:fixed;z-index:44;left:var(--s2);bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));display:none;gap:2px;padding:4px;border-radius:var(--r-pill);background:rgba(20,13,9,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:.9}
:root[data-screen="hero"] .sp-dev{bottom:auto;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s2))}
body:has(.sheet.open) .sp-dev,body:has(.lb.open) .sp-dev{display:none!important}
:root[data-screen="info"] .sp-dev,:root[data-screen="last"] .sp-dev{display:none!important}   /* 이용 안내 · 마지막 화면은 아래까지 글자 · 버튼이 차 있어서 덮지 않게 */
.sp-dev button{min-height:30px;padding:0 var(--s2);border-radius:var(--r-pill);border:0;background:transparent;color:#EFE7DE;cursor:pointer;display:flex;align-items:center;gap:var(--s1)}
.sp-dev button i{width:8px;height:8px;border-radius:50%}
.sp-dev button[aria-pressed="true"]{background:#FFFFFF;color:#15181E}

/* ---------- 6. 화면 틀 ---------- */
.scr{position:relative;min-height:var(--screen);scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;overflow:clip}
/* 정보 화면: 라벨이 언제나 같은 높이에서 시작, 아래는 카톡 버튼 자리 */
.pad{height:var(--screen);display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s4));padding-bottom:calc(var(--fab-zone) + env(safe-area-inset-bottom,0px))}
.pad > .wrap{flex:none}
/* 머리: 라벨 → s1 → 제목 → s2 → 설명 */
.head{display:grid;gap:var(--s2);justify-items:start;align-content:start}
/* 등장: 화면에 들어오면 아래에서 올라옴 */
[data-in]{opacity:0;transform:translateY(24px);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.scr.on [data-in]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-in]{opacity:1;transform:none;transition:none}}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:multiply;pointer-events:none;z-index:0}
/* 화면 밖 섹션은 그리기를 건너뜀 (한 번 그린 뒤 · 멀리 이동할 때는 모두 그림) */
.cv-off .scr{content-visibility:visible!important}

/* ---------- 7. 01 첫 화면 ---------- */
.s-hero{display:flex;flex-direction:column;height:var(--screen);background:var(--hero);--ish:var(--hero-sh);transition:background-color var(--t3) var(--ease)}
.film{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--dark);color:#FFFFFF}
/* 영상 색감: 시즌 필터 + 색 막(영상 위만, 글 아래) */
.film video,.hero-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);filter:var(--vid-filter);transition:filter var(--t3) var(--ease),transform 1.8s var(--ease)}
.film::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--vid-tint);mix-blend-mode:var(--vid-blend);transition:opacity var(--t3) var(--ease)}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,6,4,.5),rgba(10,6,4,0) 24%);pointer-events:none}   /* 위쪽만 살짝 어둡게(메뉴 글자용). 아래쪽 검은 그림자는 없앰 → 영상이 그대로 시즌 대표색 바탕과 만남 */
.film-top{position:absolute;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s2));z-index:2;display:none}
.corners{display:flex;justify-content:space-between;letter-spacing:.08em}
.corners span:nth-child(2){text-align:center}.corners span:nth-child(3){text-align:right}
.film-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:var(--s3)}
.film-cap .wrap{display:grid;gap:var(--s2);justify-items:start;position:relative}
.s-hero h1{color:#FFFFFF;text-shadow:.035em .035em 0 var(--hero-sh),0 0 .5em rgba(10,6,4,.55);position:relative}   /* 아래 그림자 대신 글자 둘레에만 어둠 → 밝은 장면에서도 읽힘 */
.s-hero h1 .l1{display:block;width:fit-content;margin-bottom:var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r-pill);background:rgba(10,6,4,.5);border:1.5px solid rgba(255,255,255,.55);text-shadow:none;white-space:nowrap}
.s-hero .kara{--kd:.7s}
.hero-deal{display:inline-flex;align-items:center;gap:var(--s1);width:fit-content;max-width:100%;padding:4px var(--s2) 4px 4px;border:var(--bd);border-radius:var(--r-pill);background:var(--kakao);color:#15181E;white-space:nowrap;cursor:pointer;box-shadow:var(--sh-press);transition:transform var(--t1) var(--ease)}
.hero-deal:hover{transform:translate(-1px,-1px)}
.hd-tag{background:#15181E;color:var(--kakao);border-radius:var(--r-pill);padding:5px var(--s1)}
.hd-go{font-family:var(--f-it)}
/* 여름: 물결 반짝임 (영상 위쪽, 아주 느리게) — 무늬 세 겹이 각자 미끄러짐(GPU에서만 움직임) */
.caustic{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;overflow:hidden;
  -webkit-mask:linear-gradient(to bottom,#000,transparent 70%);mask:linear-gradient(to bottom,#000,transparent 70%)}
.caustic::before,.caustic::after,.caustic i{content:"";position:absolute;top:-200px;left:-200px;right:-200px;bottom:-200px;will-change:transform;animation:18s linear infinite}
.caustic::before{background:radial-gradient(ellipse 60px 22px at 30% 40%,rgba(255,255,255,.95),transparent 70%) 200px 200px/180px 120px;animation-name:cs1}
.caustic::after{background:radial-gradient(ellipse 48px 16px at 70% 60%,rgba(200,250,255,.95),transparent 70%) 200px 200px/150px 100px;animation-name:cs2}
.caustic i{background:radial-gradient(ellipse 80px 26px at 50% 20%,rgba(255,255,255,.8),transparent 70%) 200px 200px/240px 160px;animation-name:cs3}
@keyframes cs1{to{transform:translate(180px,60px)}}
@keyframes cs2{to{transform:translate(-150px,100px)}}
@keyframes cs3{to{transform:translate(120px,-160px)}}
:root[data-season="summer"] .caustic{display:block}
/* 겨울: 눈 (캔버스, 첫 화면 · 마지막 화면) */
.snow{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}
:root[data-season="winter"] .snow{display:block}
@media (prefers-reduced-motion:reduce){ .caustic::before,.caustic::after,.caustic i{animation:none} .snow{display:none!important} }
.zone{flex:none;position:relative;z-index:4;padding:var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom,0px))}
/* 예약 바 */
.bar{background:var(--surface);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);display:grid;grid-template-columns:1fr auto;grid-template-areas:"date date" "ppl go"}
.bar-rib{display:none}
.bar-field{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px;padding:var(--s2) var(--s3);background:none;border:0;text-align:left;cursor:pointer}
.bar-date{grid-area:date;border-bottom:1px solid var(--line);border-radius:var(--r-card) var(--r-card) 0 0}
.bar-date:hover{background:color-mix(in srgb,var(--bg-2) 60%,transparent)}
.bar-ppl{grid-area:ppl;cursor:default}
.bar-go{grid-area:go;padding:var(--s2) var(--s2) var(--s2) 0;display:flex}
.bar-go .btn{width:100%;align-self:center;box-shadow:var(--sh-press)}
.f-k{display:block;color:var(--ink-3)}
.f-v{display:block;font-weight:700}
.f-v.empty{color:var(--ink-3);font-weight:500}
.bar-ppl .f-v{white-space:nowrap}
.stepper{display:flex;align-items:center;gap:var(--s1)}
.stepper button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;display:grid;place-items:center;font-size:var(--fs-head);line-height:1}
.stepper button:hover:not(:disabled){background:var(--bg-2)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
/* LED 전광판 띠: 정보 세 가지만, 숫자는 시즌 밝은 색으로 크게 */
.led{position:relative;overflow:hidden;contain:layout paint;height:56px;background:var(--led-bg);border-top:2px solid var(--shc);transition:background-color var(--t3) var(--ease);display:flex;align-items:center}
.led::before,.led::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none}
.led::before{left:0;background:linear-gradient(90deg,var(--led-bg),transparent)}
.led::after{right:0;background:linear-gradient(-90deg,var(--led-bg),transparent)}
.led-t{display:flex;width:max-content;animation:led var(--led-dur,40s) linear infinite}
.led-i{display:inline-flex;align-items:center;gap:var(--s3);padding-right:var(--s3);white-space:nowrap;font-size:var(--fs-head);line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--led-fg)}
.led-i b{font-family:var(--f-it);font-style:italic;font-weight:900;font-size:var(--fs-title);letter-spacing:-.02em;color:var(--led-num);text-shadow:0 0 8px var(--led-glow),0 0 20px var(--led-glow);margin:0 2px}
.led-i i{font-style:normal;color:var(--led-sep);font-size:var(--fs-small);text-shadow:0 0 8px var(--led-glow)}
.led-i span{display:inline-flex;align-items:baseline}
@keyframes led{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .led-t{animation:none!important} .led{overflow-x:auto} }

/* ---------- 8. 02 후기 ---------- */
.s-rev{background:var(--bg)}
.rv-head{display:grid;gap:var(--s3)}
.rv-head .h-l{display:grid;gap:var(--s2);justify-items:start}
.real{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2) 0 12px;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.real:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-press)}
.rl-t{display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap}
.rl-n{width:18px;height:18px;border-radius:4px;background:var(--naver);color:#FFFFFF;font-family:Arial,sans-serif;font-weight:900;font-size:12px;display:grid;place-items:center}
.rl-go{flex:none}
/* 후기 카드: 남는 높이를 채움 */
.rv-track{flex:1;min-height:0;display:flex;align-items:stretch;gap:var(--col-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;margin-top:var(--s4);padding:4px var(--gut) var(--s1);scroll-padding-inline:var(--gut);width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto}
.rv-track.drag{cursor:grabbing;scroll-snap-type:none}
.rv-track::-webkit-scrollbar{display:none}
.rvc{flex:0 0 calc(var(--colw) * 3 + var(--col-gap) * 2);scroll-snap-align:start;background:var(--c,#FFFFFF);color:var(--fg,#15181E);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;user-select:none;transition:transform var(--t2) var(--pop),box-shadow var(--t2) var(--pop),background-color var(--t3) var(--ease)}
.rvc:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-hover)}
.rv-photo{position:relative;flex:1;min-height:64px;border-bottom:var(--bd);background:color-mix(in srgb,var(--c) 70%,#000 30%)}
.rv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ph-hint{position:absolute;inset:0;display:grid;place-items:center;color:#FFFFFF;opacity:var(--dim)}
.rv-body{flex:none;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.rvc q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;quotes:none;min-height:calc(2em * var(--lh-head))}
.rvc q::before{content:"“";font-family:var(--f-it);font-style:italic}
.rvc q::after{content:"”";font-family:var(--f-it);font-style:italic}
.rv-tagline{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);border-top:1.5px solid currentColor;padding-top:var(--s2)}

/* ---------- 9. 03~07 장면: 물놀이장 · 노래방 · 바비큐 · 불멍 · 객실 ---------- */
.scene{height:var(--screen);display:grid;grid-template-rows:minmax(0,1fr) auto;background:transparent;color:var(--sc-text,#FFFFFF);--ish:var(--flow-z);--sf:var(--sf1);--shd:.55s;transition:background-color var(--t3) var(--ease)}
/* 장면들의 바탕은 묶음(#scenes) 하나의 흐름 그라데이션 — 장면을 넘길 때마다 다음 구간이 보임 */
#scenes{background:var(--flow-a);transition:background-color var(--t3) var(--ease)}   /* 장면 아래 바탕: 시즌 대표색 한 가지 (첫 화면 · 마지막 화면과 같음) */
.sc-media{position:relative;overflow:hidden;background:var(--dark)}
.sc-media video,.sc-media .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease)}
.scene.on .sc-media video,.scene.on .sc-media .art{transform:scale(1)}
.sc-media .art{display:grid;place-items:center;background:linear-gradient(160deg,#0B5E96,#00A3E4)}
.sc-media .art svg{width:34%;color:#BDEBFF}
.sc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(10,6,4,.45),rgba(10,6,4,0) 26%)}
.sc-panel{position:relative;z-index:2;padding:var(--s3) 0 calc(var(--fab-zone) + env(safe-area-inset-bottom,0px))}
.sc-in{display:grid;gap:var(--s3)}
.sc-l{display:grid;gap:var(--s2);justify-items:start}
.sc-en{color:#FFFFFF;position:relative;width:fit-content;margin:calc(var(--s1) - var(--s2)) 0 calc(var(--s1) - var(--s2))}
/* 영어 제목: 시즌 그라데이션 글자 + 겹그림자 (글자 그라데이션은 여기 하나뿐) */
.it.sc-en{--t-fill:var(--grad-hi);--dsh:drop-shadow(.04em .04em 0 var(--ish,#6B1F12)) drop-shadow(.045em .045em 0 var(--it-sh2));
  background-image:var(--t-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:var(--dsh)}
/* 장면 글자는 시즌 · 장면과 상관없이 흰색 한 가지 */
.sc-ko{color:inherit}
.sc-spec{display:flex;flex-wrap:wrap;gap:var(--s1)}
.sc-spec li{display:flex;align-items:center;gap:var(--s1);border:1.5px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:var(--r-pill);padding:var(--s1) var(--s2)}
.sc-spec li span{font-weight:500}   /* 흐리게 하지 않고 굵기로만 구분 */
@media (prefers-reduced-motion:reduce){ .sc-en{animation:none!important} }
/* 휴대폰 손가락 인터랙션: 전광판은 꾹 누르면 멈춤 */
@media (hover:none),(pointer:coarse){
  .led:active .led-t{animation-play-state:paused}
}
@media (hover:hover){ .led:hover .led-t{animation-play-state:paused} }

/* ---------- 10. 08 공간: 사진 모음판 ---------- */
.s-space{background:var(--bg)}
.s-space.pad{padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px))}
.sp-wrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:var(--s3)}
.s-space > .sp-wrap{flex:1}
.sp-top{display:grid;gap:var(--s1);justify-items:start}
.sp-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);min-width:0}
.sp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
.stab{display:flex;align-items:center;justify-content:center;gap:var(--s1);min-height:44px;padding:0 var(--s1);border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);cursor:pointer;color:var(--ink-2);white-space:nowrap;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.stab:hover{border-color:var(--ink);color:var(--ink)}
.stab[aria-selected="true"]{background:var(--inv);border-color:var(--inv);color:var(--on-inv)}
.sp-desc{color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bento-box{position:relative;min-height:0;display:grid;align-items:start;justify-items:center;margin-top:calc(var(--s4) - var(--s3))} /* 탭 줄 ↔ 사진 = s4 */
.bento{display:grid}
.bt{position:relative;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--tone,#CFC3B0);cursor:zoom-in;min-width:0;min-height:0}
.bt.big{border-radius:var(--r-card)}
.bt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t3) var(--ease),filter var(--t2) var(--ease);animation:btIn .5s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.bt::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(30,22,17,.08);pointer-events:none}
.bt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (hover:hover){.bt:hover img{transform:scale(1.04)}}
.bt:active img{filter:brightness(.92)}
@keyframes btIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bt img{animation:none;transition:none}}

/* ---------- 11. 09 이용 안내 ---------- */
.s-info{background:var(--bg-2)}
.s-info > .info-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s4)}
.info-head{display:grid;gap:var(--s2);justify-items:start}
.info-head .h2{margin-top:calc(var(--s1) - var(--s2))}
.tabs{display:flex;width:100%;border-bottom:var(--bd)}
.tab{flex:1;min-height:44px;border:0;background:none;cursor:pointer;color:var(--ink-3);border-bottom:4px solid transparent;margin-bottom:-2px;padding:0 4px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.info-main{flex:1;min-height:0;display:flex;flex-direction:column}
.panel{flex:0 1 auto;min-height:0;background:var(--surface);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:var(--s3);overflow:auto;overscroll-behavior:contain}
.panel h3{margin-bottom:var(--s2)}
/* 안쪽 스크롤이 남았을 때만: 아래쪽이 흐려지고 '더 보기' 알약이 살짝 까딱 — 끝까지 내리면 사라짐 */
.pn-more{position:sticky;z-index:1;height:88px;margin-top:-88px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--s2);pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--surface) 0%,transparent),var(--surface) 78%);opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility var(--t2)}
.panel.more .pn-more{opacity:1;visibility:visible}
.pn-more button{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 16px;border:0;border-radius:var(--r-pill);background:var(--inv);color:var(--on-inv);font:inherit;font-size:var(--fs-small);font-weight:700;letter-spacing:-.01em;cursor:pointer;box-shadow:0 4px 14px rgba(20,12,6,.18);transition:transform var(--t1) var(--ease)}
.pn-more button:hover{transform:translateY(-1px)}
.pn-more svg{animation:pnNudge 1.6s var(--ease) infinite}
@keyframes pnNudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){.pn-more svg{animation:none}}
/* 가격: 지금 시즌 기준요금 — ① 시즌 · 기간 / 1박 · 4인 기준 → ② 평일 · 금 · 토 + 인원 추가(같은 크기) → ③ 이벤트 → ④ 옵션 · 무료 */
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2)}
.pr-when{margin:0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s1)}
.pr-when b{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:900;color:var(--ink)}
.pr-when small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pr-when small span{white-space:nowrap}
.now-tag{padding:1px 7px 2px;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--on-chip);font-size:var(--fs-small);line-height:var(--lh-small);font-style:normal;font-weight:900}
.pr-base{flex:none;padding:5px 14px;border:1.5px solid var(--ink);border-radius:var(--r-pill);font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:700;color:var(--ink);white-space:nowrap}
.pr-base b{font-weight:900}
/* 시즌 버튼: 지금 시즌이 먼저 선택 · '지금' 표시 */
.pr-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--bg-2)}
.pr-seg button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:0 6px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-ui);line-height:1;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.pr-seg button:hover{color:var(--ink)}
.pr-seg button[aria-pressed="true"]{background:var(--inv);color:var(--on-inv);font-weight:900}
.pr-seg .now-tag{padding:2px 6px 3px;font-size:11px;line-height:1}
.pr-top{margin:var(--s2) 0 var(--s1)}
.pr-when{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* 요금 줄: 왼쪽 요일 · 오른쪽 금액. 바탕 = 예약 달력 색(시즌이 진할수록 진함) */
.pr-days{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pd.d-wd,.pd.d-fri,.pd.d-sat{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;padding:0 var(--s2);border-radius:var(--r-sm);background:var(--pc);transition:background-color var(--t2) var(--ease)}
/* 인원 추가: 요금 칸과 같은 숫자 크기 · 흰 바탕 + 검은 테두리 (하루 요금과 구분) */
.pd.px{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;margin-top:6px;padding:0 var(--s2);border-radius:var(--r-sm);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pd-k{display:grid;gap:2px;min-width:0}
.pd-k b{font-size:var(--fs-ui);line-height:1.2;font-weight:900;color:var(--ink)}
.pd-k small{font-size:var(--fs-small);line-height:1.2;font-weight:500;color:var(--ink-2)}
.pd-v{display:flex;align-items:baseline;gap:2px;white-space:nowrap;color:var(--ink)}
.pd-v b{font-family:var(--f-it);font-size:24px;line-height:1;letter-spacing:-.03em;font-weight:900;font-variant-numeric:tabular-nums}
.pd-v i{font-family:var(--f-it);font-style:normal;font-size:20px;line-height:1;font-weight:900;margin-right:-1px}
.pd-v small{font-size:var(--fs-small);font-weight:700}
/* 즐길거리 카드 3장: 요금 카드보다 한 단계 약하게(옅은 바탕 · 테두리 없음) · 세 장 같은 짜임 */
.po{margin-top:var(--s3)}
.po-h{display:flex;align-items:baseline;gap:6px;margin:0 0 var(--s1);font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:900;color:var(--ink)}
.po-h small{font-size:var(--fs-small);font-weight:500;color:var(--ink-3)}
.po ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.po li{display:grid;align-content:start;gap:4px;min-width:0;padding:12px;border-radius:var(--r-sm);background:var(--bg-2)}
.po-k{font-size:var(--fs-small);line-height:1.2;font-weight:700;color:var(--ink-2)}
.po-v{display:flex;align-items:baseline;gap:2px;white-space:nowrap;color:var(--ink)}
.po-v b{font-family:var(--f-it);font-size:24px;line-height:1;letter-spacing:-.03em;font-weight:900;font-variant-numeric:tabular-nums}
.po-v b.free{font-family:var(--f-ko);font-size:20px;letter-spacing:-.02em;line-height:1.2}
.po-v small{font-size:var(--fs-small);font-weight:700}
.po-s{font-size:var(--fs-small);line-height:1.35;color:var(--ink-2)}
/* 행동: 예약 달력 (가격 정보를 다 읽은 뒤 마지막에) */
.p-act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s3)}
/* 잠자리 · 질문 */
/* 이용 안내: 꼭 확인할 3가지 카드(입퇴실 · 주차 = 반반, 잠자리 = 한 줄 전체) → 그 아래 질문 · 답은 글로만 */
.kc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.kc-it{display:grid;align-content:start;gap:var(--s1);min-width:0;padding:14px var(--s2) var(--s2);border:var(--bd);border-radius:var(--r-sm);background:var(--paper)}
.kc-bed{grid-column:1 / -1}
.panel .kc-k{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-small);line-height:1.2;font-weight:700;color:var(--ink-2)}
.kc-ic{width:16px;height:16px;flex:none;color:var(--ink)}
.kc-v{display:flex;align-items:baseline;gap:2px;margin:0;color:var(--ink)}
.kc-v b,.kc-tt b{font-family:var(--f-it);font-size:28px;line-height:1;letter-spacing:-.03em;font-weight:900;font-variant-numeric:tabular-nums}
.kc-v small{font-size:var(--fs-ui);font-weight:900}
.kc-s{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2)}
.kc-tt{display:grid;gap:6px;margin:0}
.kc-tt div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:var(--s1)}
.kc-tt dt{font-size:var(--fs-small);font-weight:900;color:var(--ink)}
.kc-tt dd{display:flex;align-items:baseline;gap:6px;margin:0;white-space:nowrap}
.kc-tt b{font-size:24px}
.kc-tt small{font-size:var(--fs-small);color:var(--ink-3)}
.sl-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.sl-it{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s2);row-gap:2px;align-items:center;background:var(--accent-soft);border-radius:var(--r-sm);padding:12px var(--s2)}   /* 카드 안 칸: 테두리 없이 옅은 바탕 */
.sl-ic{grid-row:1 / 3;width:34px;height:24px;color:var(--ink)}
.sl-it b{font-size:var(--fs-ui);font-weight:900}
.sl-it span{font-size:var(--fs-small);color:var(--ink-2)}
.sl-plus{display:none}
/* 더 궁금한 점: 접기 없이 글로만 */
.panel .qa-h{margin:var(--s4) 0 var(--s1);font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:900}
.faq{display:grid;margin:0}
.faq div{padding:12px 0;border-top:1px solid var(--line)}
.faq dt{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:900;color:var(--ink)}
.faq dd{margin:4px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2)}
/* 환불 */
.ref{display:grid;gap:var(--s2)}
.ref-card{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);background:var(--paper)}
.ref-card.now{border:var(--bd);box-shadow:var(--sh-press)}
.ref-card header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--s2);margin-bottom:var(--s2)}
.ref-card header span{color:var(--ink-3)}
.ref-card header em{margin-left:auto;background:var(--accent);color:var(--ink);border-radius:var(--r-pill);padding:3px var(--s1)}
.ref-card ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.ref-card li{display:grid;grid-template-columns:88px 1fr 44px;align-items:center;gap:var(--s2);font-weight:500}
.ref-card .k{color:var(--ink-2)}
.ref-card .rbar{height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.ref-card .rbar i{display:block;height:100%;border-radius:8px;background:var(--ink)}
.ref-card li b{text-align:right}
.ref-card li.no b{color:var(--err)}
.ref-card li.no .rbar{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--err) 18%,transparent) 0 4px,transparent 4px 8px)}
.ref-note{margin-top:var(--s2);color:var(--ink-3)}
/* 오시는 길 */
.loc{display:grid;gap:var(--s3)}
.loc > div{display:grid;gap:var(--s2)}
.map{position:relative;aspect-ratio:2/1;max-width:100%;border:var(--bd);border-radius:var(--r-sm);background:#E9E1D2;overflow:hidden}
.map.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loc-hook b{box-shadow:inset 0 -.38em 0 var(--accent-soft)}
.loc-addr{font-weight:700}
.loc-rows{display:grid}
.loc-rows div{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.loc-rows div span{color:var(--ink-3);font-weight:500}
.pills{display:flex;flex-wrap:wrap;gap:var(--s1)}
.pills a,.pills button{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--paper);text-decoration:none;cursor:pointer}

/* ---------- 12. 10 마지막 · 푸터 ---------- */
.s-last{--dl-k:7.75rem;background:var(--flow-a);color:#FFFFFF;transition:background-color var(--t3) var(--ease)}
/* 마지막 장면: 실제 마당 사진 한 장 + 제목 + 예약 요약표 */
.last-wrap{position:relative;z-index:1;display:grid;gap:var(--s4);justify-items:stretch}
.lw-head{display:grid;gap:var(--s1);justify-items:start}
.s-last h2{position:relative;width:fit-content;font-size:var(--fs-title);line-height:1.18;letter-spacing:var(--ls-title)}
.s-last h2 em{font-style:normal;color:inherit}
/* 두 줄 자막: 노래방처럼 윗줄 → 아랫줄 순서로 채움 */
#cta-line{--kt:2.8s;--kd:.8s}
#cta-line.play::after{animation-name:kara2}
@keyframes kara2{
  0%{clip-path:polygon(-2% -8%,-2% -8%,-2% 50%,-2% 50%,-2% 108%,-2% 108%);opacity:1;animation-timing-function:cubic-bezier(.42,0,.3,1)}
  24%{clip-path:polygon(-2% -8%,102% -8%,102% 50%,-2% 50%,-2% 108%,-2% 108%);opacity:1;animation-timing-function:cubic-bezier(.42,0,.3,1)}
  44%{clip-path:polygon(-2% -8%,102% -8%,102% 50%,102% 50%,102% 108%,-2% 108%);opacity:1}
  69.9%{clip-path:polygon(-2% -8%,102% -8%,102% 50%,102% 50%,102% 108%,-2% 108%);opacity:1}
  70%,100%{clip-path:polygon(-2% -8%,102% -8%,102% 50%,102% 50%,102% 108%,-2% 108%);opacity:0}}
.lw-photo{position:relative;margin:0;min-width:0}
.lw-img{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4 / 5;max-width:100%;box-shadow:var(--sh);background:#0B1A33}
.lw-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.lw-photo figcaption{position:absolute;left:var(--s2);bottom:var(--s2);font-family:var(--f-it);font-style:italic;font-weight:700;font-size:var(--fs-cap);letter-spacing:var(--ls-cap);line-height:1;color:#FFFFFF;background:rgba(10,6,4,.5);border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);padding:var(--s1) var(--s2)}
/* 예약 요약: 꾸밈 없이 표처럼 — 같은 글자 크기 · 같은 줄 간격 · 같은 굵기의 가는 선 */
.lw-spec{display:grid;margin:0;border-top:1px solid rgba(255,255,255,.22);min-width:0}
.lw-spec div{display:grid;grid-template-columns:var(--dl-k) minmax(0,1fr);gap:var(--s2);align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.lw-spec dt{font-size:var(--fs-small);line-height:var(--lh-small);opacity:var(--dim)}
.lw-spec dd{margin:0;min-width:0;font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:500}
.lw-spec em,.lw-price b{font-style:normal;font-weight:inherit;color:inherit}
.lw-price span{font-size:var(--fs-small);opacity:var(--dim);margin-left:6px}
/* 푸터: 브랜드 · 예약/입금 · 사업자 정보 세 덩어리 */
/* 푸터: 꾸밈 없이 문서처럼 — 항목 이름 · 내용 두 칸, 같은 글자 크기와 줄 간격 */
.s-last .foot{position:relative;z-index:1;margin-top:auto;padding-top:var(--s3);display:grid;gap:var(--s2);font-size:var(--fs-small);line-height:1.6}
.s-last .foot::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:rgba(255,255,255,.22)}
.foot .biz{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0}
.foot .biz div{display:grid;grid-template-columns:var(--dl-k) minmax(0,1fr);gap:var(--s2);align-items:baseline}
.foot .biz dt{opacity:var(--dim);margin:0}
.foot .biz dd{margin:0;min-width:0}
.foot .biz a,.foot .biz button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:var(--dim)}
.ft-legal{display:flex;flex-wrap:wrap;gap:0 var(--s2)}
.ft-legal a{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.ft-legal .pv{font-weight:700}
.foot .copy{opacity:var(--dim);margin:0}

/* ---------- 13. 예약 창 ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(18,12,8,.52);opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility var(--t2)}
.scrim.open{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:94dvh;background:var(--sheet);border-radius:var(--r-card) var(--r-card) 0 0;border-top:var(--bd);display:flex;flex-direction:column;transform:translateY(102%);visibility:hidden;transition:transform var(--t2) var(--ease),visibility var(--t2);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.open{transform:none;visibility:visible}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:var(--s1) auto 0;flex:none}
.bk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--gut) 0;flex:none}
.bk-head b{display:block}
.bk-head .acts{display:flex;align-items:center;gap:var(--s1)}
.bk-title{display:flex;align-items:center;gap:var(--s1);min-width:0;flex:1}
#sheet-t{font-size:var(--fs-head);line-height:1.2;font-weight:900}
/* 위: 체크인 · 체크아웃 칸 */
.bk-slots{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s1);max-width:420px}
.slot{min-width:0;display:grid;gap:2px;text-align:left;padding:var(--s1) var(--s2);min-height:52px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.slot small{font-size:var(--fs-small);line-height:1.1;color:var(--ink-3);font-weight:500}
.slot b{font-size:var(--fs-ui);line-height:1.2;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.slot.set b{color:var(--ink);font-weight:900}
.slot.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.slot.on small{color:var(--ink)}
.slot:hover{border-color:var(--ink-3)}
.slot-mid{position:relative;display:grid;place-items:center;width:24px;color:var(--ink-3)}   /* 너비 고정: 박수가 떠도 두 칸이 움직이지 않음 */
.slot-mid i{position:absolute;top:calc(50% + 11px);left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:var(--fs-cap);font-weight:700;color:var(--ink);line-height:1}   /* 화살표 아래에 겹쳐 표시 */
.slot-mid i:empty{display:none}
.bk-back{flex:none;width:36px;height:36px;margin:-4px 0 0 -8px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.bk-back:hover{background:var(--bg-2)}
.bk-x,.ms-head .x{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color var(--t1) var(--ease)}
.bk-x:hover,.ms-head .x:hover{background:var(--line)}
/* 달력 아래 범례: 요금 색 + 금액 */
.cal-key{display:grid;gap:6px;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-soft);font-size:var(--fs-small);line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal-key p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.cal-key b{font-weight:700;color:var(--ink)}
.cal-key p > span{white-space:nowrap}
.cal-key small{font-size:var(--fs-cap);color:var(--ink-3)}
.cal-key .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.bk-body{overflow:auto;padding:0 var(--gut) var(--s1);flex:1;overscroll-behavior:contain}
/* 달력 */
.cal{display:grid;gap:var(--s4);touch-action:pan-y;--day-off:color-mix(in srgb,var(--ink) 26%,var(--sheet))}
/* 요금 색: 색 = 요일 종류(평일 초록 · 금 노랑 · 토 분홍), 진하기 = 시즌(평수기 < 여름 < 겨울). 범례와 같은 값 */
:root{--c-wd-main:#CDEFD8;--c-wd-summer:#B2E5C6;--c-wd-winter:#97D9B3;--c-fri-main:#F2EAC4;--c-fri-summer:#EADC9E;--c-fri-winter:#E1CE7E;--c-sat-main:#F8D3E1;--c-sat-summer:#F2BBD0;--c-sat-winter:#EBA2BF}
.mon-h{display:flex;align-items:center;justify-content:space-between;height:40px}
.mon-h h3{font-weight:900}
.mon-h h3 small{color:var(--ink-3);margin-left:var(--s1);font-weight:700}
.mon-nav{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color var(--t1) var(--ease)}
.mon-nav:hover:not(:disabled){background:var(--bg-2)}
.mon-nav:disabled{opacity:.2;cursor:default}
.mon-nav.ghost{visibility:hidden}
.dow,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dow span{color:var(--ink-3);text-align:center;padding-bottom:4px;font-weight:700}
.dow span:first-child{color:#C2483A}
.days{row-gap:0}
.day{position:relative;height:var(--row-h,clamp(40px,6.3dvh,54px));border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;z-index:0;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.day.blank{visibility:hidden;pointer-events:none}
.day .n{position:relative;width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease),transform var(--t1) var(--pop)}
.day .dn{font-size:var(--fs-ui);font-weight:500}
.day .tg{font-size:11px;font-weight:700;letter-spacing:-.02em;line-height:1}   /* 입실 · 퇴실 · 다음 달 표시 */
.day.nx:not(.ci):not(.co) .tg{color:var(--ink-3)}
.day.nx:not(.past):not(.closed):not(.ci):not(.co) .dn{color:var(--ink-3)}   /* 다음 달 초: 숫자만 한 단계 흐리게 */
.day.sun{--sun:#A63428}.day.sun.s-winter{--sun:#962E22}   /* 일요일 숫자: 칠한 칸(초록) 위에서도 글자 대비 4.5:1 이상 */
.day.sun .dn{color:var(--sun)}
:root[data-season="winter"] .dow span:first-child{color:#B9431A}
/* 예약 가능 = 요금 색으로 칠함(간격 없이 이어짐) · 예약 불가 = 빈칸(마감은 숫자에 취소선) */
.day .n{background:var(--c-wd-main)}
.day.wd.s-summer .n{background:var(--c-wd-summer)}.day.wd.s-winter .n{background:var(--c-wd-winter)}
.day.fri.s-main .n{background:var(--c-fri-main)}.day.fri.s-summer .n{background:var(--c-fri-summer)}.day.fri.s-winter .n{background:var(--c-fri-winter)}
.day.sat.s-main .n{background:var(--c-sat-main)}.day.sat.s-summer .n{background:var(--c-sat-summer)}.day.sat.s-winter .n{background:var(--c-sat-winter)}
.day:hover:not(:disabled):not(.ci):not(.co):not(.mid) .n{filter:brightness(.95)}
.day.today:not(.ci):not(.co) .n::after{content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink-3)}   /* 오늘 = 날짜 아래 점 */
.day:disabled{cursor:default}
.cal .day.past .n,.cal .day.closed .n{background:none;color:var(--day-off)}   /* 요금 색보다 우선 */
.day.past .dn,.day.closed .dn{color:inherit}
.day.closed .dn{text-decoration:line-through 1.5px;text-decoration-color:currentColor}
.cal .day.mid .n{background:none}
.day.mid::after,.day.ci.has-co::after,.day.co::after{content:"";position:absolute;top:0;bottom:0;z-index:-1;background:color-mix(in srgb,var(--hi) 52%,var(--sheet))}   /* 칠한 칸(예약 가능)보다 한 단계 진하게 */
.day.mid::after{left:0;right:0}
.day.ci.has-co::after{left:50%;right:0}
.day.co::after{left:0;right:50%}
.cal .day.ci .n,.cal .day.co .n{background:var(--inv);color:var(--on-inv);border-radius:10px;animation:pick .35s var(--pop)}
.day.ci .dn,.day.co .dn{font-weight:700;color:inherit}
@keyframes pick{0%{transform:scale(.7)}100%{transform:scale(1)}}
.bk-msg{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:calc(100% - 4px);margin:0;padding:12px var(--s2);border-radius:var(--r-sm);background:var(--inv);color:var(--on-inv);font-weight:700;box-shadow:0 8px 24px rgba(21,24,30,.22);animation:msgIn .22s var(--ease)}   /* 안내 (오류 아님): 범례 줄 위에 겹쳐 4초 — 자리를 차지하지 않고 달력 마지막 줄도 가리지 않음 */
.bk-msg .link-btn{color:inherit;text-decoration:underline;text-underline-offset:3px}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 아래: 인원 · 옵션 · 금액 · 버튼 */
.bk-foot{position:relative;flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);grid-template-areas:"ppl ppl" "opt opt" "sep sep" "sum sum" "ko go";align-items:center;gap:12px var(--s2);padding:var(--s2) var(--gut);border-top:1px solid var(--line-soft);background:var(--sheet)}
.bk-ppl{grid-area:ppl;display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
/* 옵션 카드: 눌러서 견적에 넣고 빼기(1박마다). 평소엔 조용한 테두리 + 네모 체크 · 고르면 시즌 포인트 색 */
.bk-opt{grid-area:opt;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--s2) 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--t1) var(--ease),background-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.opt b{font-size:var(--fs-ui);line-height:1.2;font-weight:700}
.opt span{margin-left:auto;font-size:var(--fs-small);line-height:1.2;color:var(--ink-3);white-space:nowrap}
.opt em{font-style:normal;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color var(--t1) var(--ease)}
.opt i{position:relative;width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid var(--ink-3);background:var(--paper);transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.opt i::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid var(--on-fill,var(--on-accent));border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform var(--t1) var(--pop),opacity var(--t1) var(--ease)}
.opt:hover{border-color:var(--ink-3)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--paper));box-shadow:inset 0 0 0 1px var(--accent)}
.opt[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.opt[aria-pressed="true"] i::after{opacity:1;transform:rotate(45deg) scale(1)}
.opt[aria-pressed="true"] em{color:var(--accent-text)}
/* 결정 영역(금액 · 버튼) 위 구분선 */
.bk-sep{grid-area:sep;height:1px;background:var(--line-soft);margin:0 calc(var(--gut) * -1)}
.bk-ppl .lbl{display:grid;gap:2px;line-height:1.1}
.bk-ppl .lbl b{font-size:var(--fs-ui);font-weight:700}
.bk-ppl .lbl small{font-size:var(--fs-small);color:var(--ink-3)}
.bk-ppl .stp{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--paper);padding:2px}
.bk-ppl button{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:var(--fs-head);line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color var(--t1) var(--ease)}
.bk-ppl button:hover:not(:disabled){background:var(--bg-2)}
.bk-ppl button:disabled{opacity:.3;cursor:default}
.bk-ppl output{min-width:44px;text-align:center;font-weight:900;font-variant-numeric:tabular-nums}
.bk-price{grid-area:price;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);min-width:0;height:calc(var(--fs-head) * 1.3);text-align:left}   /* 높이 고정: 날짜 전(작은 글자) · 후(큰 글자) 모두 같은 높이 */
.bk-price b{flex:none;white-space:nowrap;font-size:var(--fs-head);line-height:1.2;font-weight:900;font-variant-numeric:tabular-nums}
.bk-price span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-ui);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}   /* 1인 금액: 검정 · 보통 크기 (강조는 총액 하나) */
/* 할인: 금액 바로 위 한 줄 — 정가는 취소선으로 작게, 할인액은 카톡 노랑 칩 */
/* 금액: 위 작은 줄 = 정가(취소선) + 할인적용 칩 / 아래 = 낼 금액(가장 큼) · 오른쪽 1인 금액. 할인이 없어도 위 줄 자리는 비워 둠 → 높이 그대로 */
.bk-sum{grid-area:sum;display:grid;align-content:center;gap:4px;min-width:0}
.bk-save{grid-area:auto;display:flex;align-items:center;gap:6px;min-height:21px;margin:0;font-size:var(--fs-small);line-height:1.2;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-save:empty{display:flex;visibility:hidden}
.bk-sum > .bk-price,.bk-sum > .bk-save{grid-area:auto}   /* 금액 묶음 안에서는 위아래 두 줄로만 */
.bk-save s{text-decoration-thickness:1.5px;color:var(--ink-3);font-weight:700}
.bk-save i{font-style:normal;font-weight:900;color:#15181E;background:var(--kakao);border:1.5px solid #15181E;border-radius:var(--r-pill);padding:1px 8px 2px;letter-spacing:-.02em}   /* EVENT 버튼과 같은 노랑 + 검은 테두리 */
.bk-price.empty b{font-size:var(--fs-ui);color:var(--ink-2);font-weight:700}
.bk-price.empty span{color:var(--ink-3);font-weight:500}
/* 버튼 두 개: 카톡 예약 · 사이트 예약(결제 페이지) */
.bk-go{grid-area:go;box-shadow:var(--sh-press);justify-content:center;min-width:min(46vw,220px);padding:0 var(--s3);white-space:nowrap}
.bk-go:disabled{background:var(--bg-2);color:var(--ink-2);border-color:var(--line);box-shadow:none;opacity:1}
.bk-go:disabled .arr{display:none}
/* 카톡 단계 */
.ko{display:grid;justify-items:center;text-align:center;gap:var(--s1);padding:var(--s3) 0;animation:koIn .4s var(--ease)}
@keyframes koIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ko-ic{position:relative;width:64px;height:64px;border-radius:50%;background:var(--kakao);border:2px solid #15181E;display:grid;place-items:center;color:#15181E;margin-bottom:var(--s1);animation:pick .45s var(--pop)}
.ko-ic i{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#FFFFFF;border:2px solid var(--sheet);display:grid;place-items:center}
.ko-s{color:var(--ink-2)}
.ko-bubble{position:relative;margin-top:var(--s2);max-width:340px;width:100%;text-align:left;border:0;cursor:pointer;background:var(--kakao);color:#15181E;border-radius:18px 18px 18px 4px;padding:var(--s2) var(--s3);font:inherit;transition:transform var(--t1) var(--ease)}
.ko-bubble:active{transform:scale(.98)}
.ko-bubble pre{margin:0;font-family:var(--f-ko);font-weight:700;white-space:pre-wrap;word-break:keep-all}
.ko-cp{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s1);font-weight:700;opacity:var(--dim)}
.bk-go,.bk-ko{flex-direction:column;gap:2px;line-height:1.15}
.bt-t{display:inline-flex;align-items:center;gap:6px}
.bk-ko{grid-area:ko;min-height:54px;padding:0 var(--s2);background:var(--paper);color:var(--ink);box-shadow:none;min-width:0}
.bk-ko:hover{background:var(--bg-2)}
.bk-go.going{pointer-events:none;opacity:.7}
.bk-ko .ko-mk{width:14px;height:14px;padding:3px;border-radius:6px;background:var(--kakao);color:#15181E;flex:none}
.bk-ko.solo{background:var(--kakao);color:#15181E;border-color:#15181E;box-shadow:var(--sh-press)}
.bk-ko.solo .ko-mk{background:#15181E;color:var(--kakao)}
/* 날짜를 다 고르면: 금액 한 줄 + 버튼 두 개 */
.bk-go{min-height:54px}
.bk-foot .bk-go{min-width:0}
.bk-foot:not(.q) .bk-go{grid-column:1/-1}   /* 날짜 고르기 전: 버튼 한 개가 줄 전체 */
.bk-foot.q.solo .bk-ko{grid-column:1/-1}   /* 당일: 카톡 버튼 한 개 */
.sheet.sx .bk-foot .bk-go{grid-column:auto}
/* 카톡 단계 · 달력 밖 단계: 인원 · 옵션 · 날짜 칸 숨김 */
.sheet.s2 .bk-opt{display:none!important}
.sheet.s2 .bk-save{display:none}
.sheet.s2 .bk-ppl{display:none}
.sheet.s2 .bk-foot{grid-template-areas:"sum go"}
.sheet.s2 .bk-slots{display:none}
.sheet.s2 #sheet-t{display:block!important}
.sheet.sx .bk-opt,.sheet.sx .bk-ppl,.sheet.sx .bk-slots,.sheet.sx .bk-ko,.sheet.sx .bk-save{display:none!important}
.sheet.sx #sheet-t{display:block!important}
.sheet.sx .bk-foot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sum go"}
.sheet.sx .bk-sep{display:none}
.sheet.s2 .bk-body{display:grid;align-content:center}   /* 카톡 단계: 창 크기는 그대로, 내용은 가운데 */   /* 위 테두리와 겹쳐 선이 두 줄로 보이던 것 정리 */

/* ---------- 14. 메뉴 · 사진 크게 · 알림 ---------- */
.mscrim{position:fixed;inset:0;z-index:62;background:rgba(18,12,8,.5);opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility var(--t2)}
.mscrim.open{opacity:1;visibility:visible}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:63;background:var(--surface);border-radius:var(--r-card) var(--r-card) 0 0;border-top:var(--bd);padding:0 var(--gut) calc(var(--s3) + env(safe-area-inset-bottom,0px));transform:translateY(102%);visibility:hidden;transition:transform var(--t2) var(--ease),visibility var(--t2);max-height:88dvh;overflow:auto}
.msheet.open{transform:none;visibility:visible}
.ms-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) 0 var(--s1)}
.ms-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);padding:var(--s1) 0 var(--s3)}
.ms-list button{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:0 var(--s2);border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);text-align:left;cursor:pointer;color:var(--ink)}
.ms-list button i{color:var(--ink-3);letter-spacing:.04em}
.ms-list button.on{border-color:var(--ink);background:var(--accent-soft)}
.ms-act{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s2)}
.ms-act .btn{width:100%}
.ms-tel{margin-top:var(--s2);color:var(--ink-2);text-align:center}
.ms-tel a{font-weight:700;color:var(--ink)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(14,9,6,.95);display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;visibility:hidden;transition:opacity var(--t2) var(--ease),visibility var(--t2)}
.lb.open{opacity:1;visibility:visible}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--s2) + env(safe-area-inset-top,0px)) var(--gut) var(--s2);color:#EDE6DD}
.lb-stage{display:grid;place-items:center;padding:0 var(--s2);min-height:0;height:100%;overflow:hidden}
.lb-img{width:min(1200px,100%);aspect-ratio:16/9;max-height:min(76vh,100%);border-radius:var(--r-sm);display:grid;place-items:center;color:#FFFFFF;background:var(--tone,#555);border:2px solid #FFFFFF;overflow:hidden}
.lb-img img{width:100%;height:100%;object-fit:contain}
.lb-img:has(img){background:transparent;border:0}
.lb-ctrl{display:flex;justify-content:center;gap:var(--s2);padding:var(--s2) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom,0px))}
.toast{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;z-index:90;background:var(--inv);color:var(--on-inv);padding:var(--s2) var(--s3);border-radius:var(--r-sm);pointer-events:none;transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease);max-width:calc(100% - var(--gut) * 2);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* =====================================================================
   15. 화면 크기별 배치 — 크기별 규칙은 모두 여기에, 넓은 조건 → 좁은 조건 순서
   (같은 요소를 여러 조건이 고치면 뒤에 오는 규칙이 이겨요)
     ① 휴대폰 · 태블릿(≤959)   ② 휴대폰(≤719)   ③ 짧은 휴대폰   ④ 좁은 휴대폰(≤370 · ≤350)
     ⑤ 태블릿 이상(≥720)   ⑥ 태블릿만(720~959)   ⑦ PC(≥960)   ⑧ 낮은 PC   ⑨ 가로 휴대폰
   ===================================================================== */

/* ① 휴대폰 · 태블릿: 예약 창 '옵션 포함' 생략 · 6주짜리 달은 칸 높이를 조금 줄여 한 화면에 */
@media (max-width:959px){ .last-wrap{margin-bottom:var(--s5)} }

/* ② 휴대폰(<720): 한 화면씩 넘기지 않고 자연스럽게 스크롤. 영상 · 장면은 모두 4:5 */
@media (max-width:719px){
  html{scroll-snap-type:none}
  .scr{min-height:0;scroll-snap-align:none;scroll-snap-stop:normal;scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
  .scr:not(.s-hero){content-visibility:auto;contain-intrinsic-size:auto 900px}   /* 화면 가까이 올 때 그림 */
  .pad,.s-rev,.s-info,.s-space{height:auto}
  .pad{padding-top:var(--s5);padding-bottom:var(--s5)}
  .s-space.pad{padding-bottom:var(--s5)}
  .s-last.pad{padding-bottom:calc(var(--fab-zone) + env(safe-area-inset-bottom,0px))}
  /* 첫 화면: 영상 4:5 위엔 배지 + 제목만, 할인은 예약 바 윗변 띠 */
  .s-hero{height:auto}
  .film{flex:none;aspect-ratio:4/5;max-height:none}
  .film-cap .hero-deal{display:none}
  .zone{padding-bottom:0}
  .zone .bar{margin-bottom:var(--s3)}
  .bar{grid-template-areas:"rib rib" "date date" "ppl go"}
  .bar-rib{grid-area:rib;display:flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2) 0 var(--s1);border:0;border-bottom:var(--bd);border-radius:calc(var(--r-card) - 2px) calc(var(--r-card) - 2px) 0 0;background:var(--kakao);color:#15181E;text-align:left;cursor:pointer;font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:700}
  .bar-rib .rib-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar-rib{min-width:0}   /* 좁은 휴대폰에서 띠가 예약 칸 밖으로 넘치지 않게 */
  .bar-rib:active{background:color-mix(in srgb,var(--kakao) 85%,#000)}
  .bar-date{border-radius:0}
  .led{height:52px}
  /* 후기: 사진도 4:5 · 네이버 리뷰는 상자 없이 */
  .rv-track{flex:none;margin-top:var(--s4);padding-bottom:var(--s2)}
  .rvc{flex:0 0 calc(var(--colw) * 3 + var(--col-gap) * 2)}
  .rv-photo{flex:none;aspect-ratio:4/5;min-height:0}
  .rvc q{-webkit-line-clamp:3;min-height:calc(3em * var(--lh-head))}
  .real{border:0;padding:0;min-height:44px;background:none;gap:var(--s2)}
  .real:hover{box-shadow:none;transform:none}
  .real .rl-t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
  /* 장면: 영상 4:5 위, 글 아래 · 정보는 줄로 */
  .scene{height:auto;grid-template-rows:auto auto}
  .sc-media{aspect-ratio:4/5}
  .sc-panel{padding:var(--s4) 0 var(--s5)}
  .sc-in{gap:var(--s4)}
  .sc-en{margin-bottom:0}
  .sc-spec{flex-direction:column;gap:0;width:100%;border-top:1.5px solid color-mix(in srgb,currentColor 55%,transparent)}
  .sc-spec li{border:0;border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:0;padding:var(--s2) 0;justify-content:space-between}
  /* 공간: 사진 모음판은 2열, 첫 장(과 짝이 안 맞는 마지막 장)은 크게 */
  .sp-wrap{display:grid;grid-template-rows:none}
  .bento-box{display:block}
  .bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);width:100%}
  .bt{aspect-ratio:16/9}
  .bt.big{grid-column:1 / -1}
  /* 이용 안내: 패널은 내용 길이만큼 */
  .s-info > .info-wrap{flex:none}
  .info-main{flex:none}
  .panel{flex:none;overflow:visible;max-height:none;padding-bottom:var(--s4)}
}

/* ③ 짧은 휴대폰: 예약 창 달력 칸부터 줄이고, 보조 정보를 접는다 */
@media (max-width:719px) and (max-height:660px){ .slot{min-height:46px;padding-top:5px;padding-bottom:5px} }
@media (max-width:719px) and (max-height:700px){ .bk-foot{gap:8px var(--s2);padding-top:12px;padding-bottom:12px} .opt{min-height:38px} .bk-ppl .stp button,.bk-ppl button{width:36px;height:36px} .cal-key{margin-top:var(--s1);padding-top:var(--s1)} .mon-h{height:34px} }
@media (max-width:719px) and (max-height:620px){ .cal-key small{display:none} }

/* ④ 좁은 휴대폰 */
/* 좁은 휴대폰(갤럭시 360 · 아이폰 SE 375)에서 예약 칸이 카드 밖으로 넘치지 않게 */
@media (max-width:379px){ .bar-ppl{padding-inline:var(--s2);gap:var(--s1)} }
@media (max-width:340px){ .bar-go{padding-right:var(--s1)} .bar-go .btn{padding-inline:var(--s2)} }
@media (max-width:370px){ .pr-seg button{font-size:13px;gap:3px} .pr-seg .now-tag{padding:2px 4px 3px} .cal-key p{column-gap:9px} .cal-key .sw{margin-right:4px} .bk-ppl .lbl small{display:none} .bk-ppl button{width:36px;height:36px} .bk-ppl output{min-width:38px} .slot{padding:var(--s1) 10px} .opt{gap:8px;padding:0 10px} .bk-price b{letter-spacing:-.05em} }
@media (max-width:350px){
  :root{--gut:16px}
  .stab{letter-spacing:-.04em}
  .hero-deal .hd-go,.bar-rib .hd-go{display:none}
}

/* ⑤ 태블릿 이상(≥720) */
@media (min-width:720px){
  .scr:not(.s-hero){content-visibility:auto;contain-intrinsic-size:auto 100vh}   /* 높이가 한 화면이라 스크롤 위치는 그대로 */
  .fab{height:60px;padding:0 4px}
  .fab-ic{width:48px;height:48px}
  .fab-t{display:block}
  .fab.open .fab-t,.fab:hover .fab-t,.fab:focus-visible .fab-t{max-width:160px;padding-right:var(--s3)}
  .sp-dev{display:flex}
  .film-top{display:block}
  .btn{min-height:52px;padding:0 var(--s3)}
  /* 전광판 글자: 숫자는 글자보다 한 단계 위 — 휴대폰 HEAD·TITLE, 태블릿 · PC BODY·HEAD (예약 바 글자와 같은 크기) */
  .led-i{font-size:var(--fs-body)}
  .led-i b{font-size:var(--fs-head)}
  .rvc q{-webkit-line-clamp:3;min-height:calc(3em * var(--lh-head))}
  .sp-tabs{display:flex}
  .stab{padding:0 var(--s3)}
  .bento-box{justify-items:start}
  .sl-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .sl-plus{display:block;align-self:center;font-family:var(--f-it);font-weight:900;font-size:var(--fs-head)}
  .sl-it{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:2px;align-content:start}
  .sl-ic{grid-row:auto;margin-bottom:var(--s1)}
}

/* ⑥ 태블릿만(720~959) */
@media (min-width:720px) and (max-width:959px){
  .lw-img{aspect-ratio:auto;height:clamp(200px,calc(var(--screen) - 860px),420px)}
}
@media (min-width:720px) and (max-width:959px) and (max-height:1100px){ .lw-spec .lw-ppl{display:none} }

/* ⑦ PC(≥960): 12칸 · A선(1칸) · B선(7칸) */
@media (min-width:960px){
  .pr-seg{max-width:420px}
  .pr-days .pd,.pd.px{min-height:60px;padding:0 var(--s3)}
  .pd-v b{font-size:30px}
  /* 마지막: 왼쪽 1–6칸 위엔 제목, 아래엔 요약표(사진 아랫선에 맞춤) · 오른쪽 7–12칸 사진 */
  .last-wrap{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--col-gap);row-gap:var(--s3);flex:none}
  .lw-head{grid-column:1 / span 6;grid-row:1}
  .lw-spec{grid-column:1 / span 5;grid-row:2;align-self:end}
  .lw-photo{grid-column:7 / span 6;grid-row:1 / span 2}
  .lw-img{aspect-ratio:auto;height:clamp(240px,calc(var(--screen) - 400px),460px)}
  /* 예약 창 아래: 날짜를 다 고르면 금액 + 버튼 두 개를 한 줄에 */
  /* 후기: PC는 4칸씩 3장 · 태블릿과 휴대폰은 3칸 폭 카드를 옆으로 넘김 */
  .rv-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;cursor:default;scroll-snap-type:none}
  .top .wrap{gap:var(--s3)}
  .top nav{display:flex}
  .top .logo{height:54px}
  .menu-btn{display:none}
  /* 첫 화면: 21:9 영상, 화면이 낮으면 예약 칸이 들어갈 만큼만 줄어요 */
  .film{flex:none;height:min(max(822px,42.8125vw),calc(var(--screen) - 112px))}
  .zone{flex:1 1 auto;display:flex;flex-direction:column;padding:0}
  .zone .wrap{display:flex;flex-direction:column;flex:1}
  .zone .bar{margin-top:-44px}
  .film-cap{padding-bottom:calc(44px + var(--s5))}
  .bar{grid-template-columns:3fr 2fr auto;grid-template-areas:"date ppl go"}
  .bar-date{border-bottom:0;border-right:1px solid var(--line);border-radius:var(--r-card) 0 0 var(--r-card)}
  .bar-field{padding:var(--s2) var(--s4);min-height:84px}
  .bar-go{padding:var(--s2)}
  .bar-go .btn{padding:0 var(--s4)}
  .led{margin-top:auto;height:60px}
  /* 정보 화면 공통: 12칸 두 단 — 제목 단 1–6, 내용 단 7–12 */
  .rv-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .rv-head .h-l{grid-column:1 / span 6}
  /* 장면: 영상이 화면 전체, 글은 왼쪽 아래 · 정보는 B선 */
  .scene{display:block}
  :root[data-season="summer"] #scene-splash{display:block}
  .sc-media{position:absolute;inset:0}
  .sc-shade{background:linear-gradient(to bottom,rgba(10,6,4,.45),rgba(10,6,4,0) 22%,rgba(10,6,4,0) 46%,rgba(10,6,4,.78))}
  .sc-panel{position:absolute;left:0;right:0;bottom:0;padding:0 0 var(--s6);color:#FFFFFF}
  .sc-in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .sc-in > .sc-l{grid-column:1 / span 6}
  .sc-in > .sc-r{grid-column:7 / span 6}
  .sc-spec{flex-direction:column;gap:0;width:100%;border-top:1.5px solid rgba(255,255,255,.6)}
  .sc-spec li{border:0;border-bottom:1px solid rgba(255,255,255,.3);border-radius:0;padding:var(--s2) 0;justify-content:space-between}
  /* 공간 */
  .sp-top{grid-auto-flow:row}
  /* 이용 안내: 제목 단 1–5 · 내용 단 7–12, 탭은 세로 목록 */
  .s-info > .info-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);grid-template-rows:minmax(0,1fr);align-items:stretch}
  .info-head{grid-column:1 / span 5;align-content:start}
  .info-main{grid-column:7 / span 6}
  .tabs{flex-direction:column;border-bottom:0;gap:var(--s1);margin-top:calc(var(--s4) - var(--s2))}
  .tab{flex:none;text-align:left;min-height:52px;border:var(--bd);border-color:transparent;border-radius:var(--r-sm);margin:0;padding:0 var(--s3);display:flex;align-items:center;justify-content:space-between}
  .tab::after{content:"→";font-family:var(--f-it);opacity:0;transition:opacity var(--t1) var(--ease)}
  .tab[aria-selected="true"]{background:var(--surface);border-color:var(--ink);box-shadow:var(--sh)}
  .tab[aria-selected="true"]::after{opacity:1}
  .panel{padding:var(--s4)}
  .ms-head .x{display:grid}
  .s-last.pad{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
  /* 푸터: 항목 두 단 (왼쪽 → 오른쪽 순서로 읽힘) */
  .foot .biz{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
}

/* ⑦-1 태블릿 · PC(≥720) 예약 창: 휴대폰과 똑같은 한 달 달력 · 같은 순서를 화면 가운데 작은 창으로.
   칸 높이는 휴대폰처럼 창 높이에 맞춰 자동(28~56px) · 모든 단계에서 창 크기 그대로 */
@media (min-width:720px){
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(472px,calc(100vw - 48px));max-height:min(860px,calc(100dvh - 48px));border-radius:var(--r-card);border:var(--bd);box-shadow:10px 10px 0 var(--ink);transform:translate(-50%,-47%);opacity:0;transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease),visibility var(--t2);padding-bottom:0}
  .sheet.open{transform:translate(-50%,-50%);opacity:1}
  .sheet-grip{display:none}
  .bk-head{padding:var(--s3) var(--s3) 0}
  .bk-body{padding:0 var(--s3) var(--s1)}
  .bk-foot{padding:var(--s2) var(--s3) var(--s3)}
  .bk-sep{margin:0 calc(var(--s3) * -1)}
  .bk-msg{left:var(--s3);right:var(--s3)}
  .ko{padding:var(--s3) 0}
  .day:hover:not(:disabled):not(.ci):not(.co):not(.mid) .n{filter:brightness(.93)}
}
/* ⑦-2 PC(≥960) 예약 창: 가로로 넓게 — 왼쪽 한 달 달력 · 오른쪽 선택 패널(날짜 칸 → 인원 → 옵션 → 금액 · 버튼).
   세로로 길게 쌓지 않아 창 높이가 낮고, 달력 칸은 거의 정사각형. 모든 단계에서 창 크기 그대로 */
@media (min-width:960px){
  .sheet{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"body head" "body foot";width:min(900px,calc(100vw - 48px));overflow:hidden}
  .bk-body{grid-area:body;padding:var(--s3) var(--s4) var(--s3);overflow:visible}
  .bk-head,.bk-foot{background:color-mix(in srgb,var(--bg) 45%,var(--sheet));border-left:1px solid var(--line-soft)}
  .bk-head{grid-area:head;padding:var(--s3)}
  .bk-foot{grid-area:foot;position:static;border-top:1px solid var(--line-soft);grid-template-rows:auto auto minmax(var(--s2),1fr) auto auto;padding:var(--s3);gap:var(--s2) var(--s1)}   /* 날짜 칸 아래 얇은 선 → 날짜 / 인원 · 옵션 / 금액 세 덩어리 */
  .bk-sep{align-self:end;margin:0 calc(var(--s3) * -1) var(--s1)}
  .bk-opt{grid-template-columns:1fr}   /* 옵션 두 개를 한 줄씩 → 금액이 패널 너비 전부를 씀 */
  .opt{min-height:48px}
  .bk-slots{max-width:none}
  .cal .mon-h{height:44px}
  /* 알림: 오른쪽 패널 금액 줄 바로 위에 겹쳐 4초 — 달력은 가리지 않음 */
  .bk-msg{left:calc(100% - 380px + var(--s3));right:var(--s3);bottom:calc(var(--s3) + 54px + var(--s2) + 52px + var(--s2))}
  /* 카톡 단계: 왼쪽에 안내 · 오른쪽 위 제목 · 아래 금액과 버튼 */
  .sheet.s2 .bk-foot{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"." "sum" "go"}
  .sheet.s2 .bk-foot .bk-go{grid-column:1/-1}
  .sheet.s2 .bk-body{padding:var(--s4)}
}
/* 낮은 태블릿 화면(높이 820 이하): 달력 칸을 지키려고 아래 칸 여백부터 줄임 */
@media (min-width:720px) and (max-width:959px) and (max-height:820px){
  .bk-head{padding-top:var(--s2)}
  .bk-foot{gap:8px var(--s2);padding-top:12px;padding-bottom:var(--s2)}
  .opt{min-height:38px}
  .bk-ppl .stp button,.bk-ppl button{width:36px;height:36px}
  .bk-ppl .lbl small{display:none}
  .cal-key{margin-top:var(--s1);padding-top:var(--s1)}
  .mon-h{height:34px}
  .bk-go,.bk-ko{min-height:48px}
}

/* ⑧ 낮은 PC: 정보는 그대로, 줄 간격과 보조 정보부터 줄임 */
@media (min-width:960px) and (max-height:820px){ .lw-spec .lw-ppl{display:none} }
@media (min-width:960px) and (max-height:960px){
  #pn-price{padding:var(--s3) var(--s4)}
  .po{margin-top:var(--s2)}
  .pr-days .pd,.pd.px{min-height:52px}
  .p-act{margin-top:var(--s2)}
}
@media (min-width:960px) and (max-height:800px){
  .po li{padding:10px 12px}
  #pn-price{padding:var(--s2) var(--s4)}
  .pr-days .pd,.pd.px{min-height:46px}
  .pr-top{margin:12px 0 6px}
  .pr-seg button{min-height:36px}
  .po{margin-top:var(--s1)}
  .pd-v b{font-size:26px}
}

@media (min-width:960px) and (max-height:740px){ .pr-days .pd,.pd.px{min-height:40px} .pr-top{margin:8px 0 4px} .pr-days{gap:4px} .po li{padding:8px 10px;gap:2px} .po-h{margin-bottom:4px} .pr-top{margin-bottom:var(--s1)} .po{margin-top:var(--s1)} .p-act{margin-top:var(--s1)} }   /* 아주 낮은 노트북: 요금 칸 보조 설명부터 접음 */

/* ⑨ 가로로 누운 휴대폰 */
@media (max-height:560px) and (orientation:landscape){
  .film-cap{padding-bottom:var(--s2)}
}
/* ⑩ 낮은 화면(높이 600px 미만: 가로 휴대폰 · 200% 확대 · 작은 창): 한 화면씩 넘기지 않고, 장면은 글자 길이만큼 늘어나요.
      예약 창은 창 전체를 내려서 봐요 (달력이 좁은 칸 안에 갇히지 않게) — WCAG 1.4.10 · 1.4.4 */
@media (max-height:600px){
  html{scroll-snap-type:none}
  .scr{min-height:0;scroll-snap-align:none;scroll-snap-stop:normal;scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
  .pad,.s-rev,.s-info,.s-space,.s-hero{height:auto}
  .film{flex:none;height:max(320px,calc(var(--screen) - var(--nav-h)))}
}
/* 가로로 낮은 화면만: 예약 창 전체를 내려 봐요 (세로 작은 휴대폰은 금액 · 결제 버튼이 아래에 늘 보이게 그대로) */
@media (max-height:600px) and (orientation:landscape){
  .sheet{overflow-y:auto;overscroll-behavior:contain}
  .sheet .bk-body{flex:none;overflow:visible}
}
/* 태블릿 · 폴더블(폭 720~959 · 높이 1000 이하): 화면 높이보다 내용이 길면 장면이 길어져요 (아래 글자가 잘리지 않게).
   길어진 장면은 한 화면씩 넘기기와 맞지 않아(PageDown · 스페이스가 멈춤) 이 크기에서는 자연스럽게 스크롤해요 */
@media (min-width:720px) and (max-width:959px) and (max-height:1000px){
  .pad,.s-rev,.s-info,.s-space{height:auto;min-height:var(--screen)}
  html{scroll-snap-type:none}
  .scr{scroll-snap-align:none;scroll-snap-stop:normal}
}
/* 작은 노트북(폭 960~1099 · 높이 680 이하): 이용 안내 · 마지막 화면만 내용만큼 길어지고, 자연스럽게 스크롤 */
@media (min-width:960px) and (max-width:1099px) and (max-height:680px){
  .s-info,.s-last{height:auto;min-height:var(--screen)}
  html{scroll-snap-type:none}
  .scr{scroll-snap-align:none;scroll-snap-stop:normal}
}
/* 낮은 화면: 시즌 미리보기 버튼은 첫 화면에서만 (장면 정보칸을 덮지 않게) */
@media (max-height:600px){ :root:not([data-screen="hero"]) .sp-dev{display:none!important} }


/* ---------- 영상 · 움직임 멈춤 버튼 (WCAG 2.2.2) — 영상이 있는 화면에서만 왼쪽 아래 ---------- */
.vtog{position:fixed;z-index:46;left:calc(var(--s2) + env(safe-area-inset-left,0px));bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));width:44px;height:44px;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(20,13,9,.62);color:#FFFFFF;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t2) var(--ease),visibility var(--t2)}
.vtog .i-play,:root.still .vtog .i-pause{display:none}
:root.still .vtog .i-play{display:block}
:root[data-screen^="scene-"] .vtog{opacity:1;visibility:visible;pointer-events:auto}
:root[data-screen="hero"] .vtog{opacity:1;visibility:visible;pointer-events:auto;bottom:auto;left:auto;right:calc(var(--s2) + env(safe-area-inset-right,0px));top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s2))}
body:has(.sheet.open) .vtog,body:has(.lb.open) .vtog,body:has(.msheet.open) .vtog{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:720px){:root[data-screen^="scene-"]:has(#sp-dev:not([hidden])) .vtog{bottom:calc(var(--s2) + 52px + env(safe-area-inset-bottom,0px))}}
.vtog:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* 멈춤이면 장식 움직임도 멈춰요 */
:root.still .led-t,:root.still .caustic i,:root.still .caustic::before,:root.still .caustic::after,:root.still .kara.play,:root.still .shine.play,:root.still .fab.ping::after{animation-play-state:paused!important}
/* 누르는 곳 최소 크기 (WCAG 2.5.8: 24px 이상) */
#copy-bank,#ftc{display:inline-flex;align-items:center;min-height:24px;min-width:24px;padding:0 6px}
.foot a[data-phone]{color:inherit}
/* 누르는 영역 44px: 보이는 크기는 그대로 두고, 둘레를 투명하게 넓혀요 (WCAG 2.5.5 · V&L 높이 단계 h3) */
.bk-x,.ms-head .x,.mon-nav,.bk-ppl button,.stepper button,.bk-back{position:relative}
.bk-x::after,.ms-head .x::after,.mon-nav::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.bk-ppl button::after,.stepper button::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.bk-back::after{content:"";position:absolute;inset:-4px;border-radius:50%}

/* 움직임 줄이기: 장면 확대 · 창 미끄러짐도 없이 */
@media (prefers-reduced-motion:reduce){.sc-media video,.sc-media .art{transition:none;transform:none}.sheet,.msheet,.lb{transition:none!important}}
.opt{position:relative}.opt::before{content:"";position:absolute;inset:-4px 0}

/* ---------- 15. 상단 메뉴 (펜션 사진 · 오시는 길 · 예약조회 · 예약하기) ----------
   휴대폰 · 태블릿: 예약하기 · ≡ (예약조회는 메뉴 안) / PC(≥960): 펜션 사진 · 오시는 길 · 예약조회 · 예약하기 */
.top .tnav{display:flex;align-items:center;gap:0;flex:none}
.tnav a,.tnav button{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:inherit;text-decoration:none;cursor:pointer;font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:700;white-space:nowrap}
.tnav a::after,.tnav button::after{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
@media (hover:hover){.tnav a:hover::after,.tnav button:hover::after{transform:scaleX(1)}}
.tnav a:focus-visible::after,.tnav button:focus-visible::after{transform:scaleX(1)}
.tnav .tn-pc{display:none}
.menu-btn{justify-content:center;width:44px;padding:0}
@media (max-width:959px){ .top .wrap{gap:var(--s1)} .top .tnav{margin-right:2px} }
@media (max-width:359px){ .tnav a{padding:0 6px} .tnav a::after{left:6px;right:6px} }
@media (min-width:960px){
  .tnav .tn-pc{display:inline-flex}
  .top .tnav{gap:var(--s1);margin-right:var(--s1)}
}
/* 메뉴 시트: 세 줄 목록 */
.ms-list.ms-main{grid-template-columns:1fr}
.ms-list a{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:0 var(--s2);border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none;font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:700}
.ms-list a i{font-family:var(--f-it);font-style:italic;font-size:var(--fs-cap);letter-spacing:var(--ls-cap);font-weight:700;color:var(--ink-3)}
.ms-main button::after,.ms-main a::after{content:"→";margin-left:auto;font-family:var(--f-it);color:var(--ink-3)}

/* ---------- 16. 펜션 사진 (사진 전체 보기) ---------- */
.gal{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),visibility var(--t2)}
.gal.open{opacity:1;visibility:visible;transform:none}
.gal-top{flex:none;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gal-top .wrap:first-child{display:flex;align-items:center;gap:var(--s2);height:var(--nav-h)}
.gal-top h2{margin:0;font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--ls-head);font-weight:900}
.gal-n{font-family:var(--f-it);font-size:var(--fs-small);font-weight:700;color:var(--ink-3)}
.gal .x{margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color var(--t1) var(--ease)}
.gal .x:hover{background:var(--line)}
.gal-tabs{display:flex;gap:var(--s1);overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-tabs::-webkit-scrollbar{display:none}
.gal-tabs button{position:relative;flex:none;min-height:36px;padding:0 var(--s2);border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:700;transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.gal-tabs button::before{content:"";position:absolute;inset:-4px 0}
.gal-tabs button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.gal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px))}
.gal-sec{padding-top:var(--s4);scroll-margin-top:0}
.gal-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--s2);margin-bottom:var(--s2);padding-bottom:var(--s1);border-bottom:var(--bd)}
.gal-h h3{margin:0;font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:900}
.gal-h p{margin:0;flex:1 1 12em;min-width:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2)}
.gal-h em{font-family:var(--f-it);font-style:italic;font-size:var(--fs-head);font-weight:900;color:var(--ink-3)}
.gal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.gal-grid button{position:relative;display:block;aspect-ratio:16/9;max-width:100%;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--tone,#CFC6B8);cursor:zoom-in}
.gal-grid button:first-child,.gal-grid button.w{grid-column:span 2}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform var(--t3) var(--ease)}
.gal-grid span{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 10px;border-radius:var(--r-pill);background:rgba(14,9,6,.62);color:#FFFFFF;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-grid button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (hover:hover){.gal-grid button:hover img{transform:scale(1.04)}}
@media (min-width:720px){
  .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gal-grid button.w{grid-column:auto}
  .gal-grid button:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .gal-grid button:only-child{grid-row:auto;aspect-ratio:16/9}
  .gal-grid:has(> button:nth-child(2):last-child) button{grid-column:span 1;grid-row:auto;aspect-ratio:16/9}
  .gal-grid:has(> button:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.gal{transition:none;transform:none}.gal-grid img{transition:none}}
/* 예전 장면 링크 규칙(.top nav a: 흐림 · 밑줄 위치)보다 우선 */
.top .tnav a{opacity:1}
.top .tnav a::after{left:10px;right:10px;bottom:9px}
@media (max-width:359px){ .top .tnav a::after{left:6px;right:6px} }
.ms-main button,.ms-main a{font-family:var(--f-ko);font-size:var(--fs-ui);font-weight:700;color:var(--ink)}
/* 아이폰 홈 막대 자리(safe-area): 화면 쪽(상단 바 · 마지막 화면)이 직접 챙겨요.
   :root 에 같은 여백이 또 붙으면 맨 아래에 바탕색(흰 띠)이 드러나서 0으로 둬요 */
html:root{padding-top:0;padding-bottom:0}
/* 가로로 누운 노치 휴대폰: 양옆 여백이 안전 영역(노치 · 둥근 모서리)보다 좁지 않게 */
@media (orientation:landscape) and (max-height:600px) and (max-width:719px){ :root{--gut:max(24px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))} }
@media (orientation:landscape) and (max-height:600px) and (min-width:720px) and (max-width:959px){ :root{--gut:max(32px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))} }