/* 곤잠펜션 · 예약 정보 · 예약 완료 · 약관 페이지 공통 (reserve · done · terms · privacy)
   색은 colors.css, 요금 · 사업자 정보 · 환불 규정은 config.js 에서 와요.
   레이아웃: 휴대폰 한 줄 + 아래 결제 막대 / PC 왼쪽 입력(1fr) + 오른쪽 요약(360) */
:root{
  color-scheme:light;
  /* 색은 colors.css (홈페이지와 같은 파일) */
  --f-ko:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-it:"Archivo","Noto Sans KR",-apple-system,sans-serif;
  --fs-head:20px; --fs-body:16px; --fs-ui:15px; --fs-small:13px; --fs-cap:12px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --r-sm:10px; --r-card:16px; --r-pill:999px;
  --bd:2px solid var(--ink); --sh:4px 4px 0 var(--shc); --sh-press:1px 1px 0 var(--shc);
  --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.34,1.56,.64,1);
  --gut:20px; --top:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}   /* 두 번 톡 확대 막기(아이폰). 두 손가락 확대는 그대로 */
a,button,label,summary,[role="button"]{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ko);font-size:var(--fs-body);line-height:1.6;letter-spacing:-.01em;font-weight:500;word-break:keep-all;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ---------- 위 막대: 뒤로 · 로고 ---------- */
.co-top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:var(--top);padding:0 calc(var(--gut) - 8px);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.co-back{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--ink)}
.co-back:hover{background:var(--bg-2)}
.co-logo{justify-self:center;height:30px}
.co-logo img{height:30px;width:auto}
/* ---------- 단계 표시 ---------- */
.steps{list-style:none;margin:0 auto;padding:var(--s2) var(--gut) 0;max-width:1040px;display:flex;gap:6px;align-items:center;font-size:var(--fs-small);color:var(--ink-3);font-weight:700}
.steps li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.steps li + li::before{content:"";width:18px;height:1.5px;background:var(--line);margin-right:2px}
.steps i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);font-family:var(--f-it);font-style:italic;font-size:12px;font-weight:900}
.steps .now{color:var(--ink)}
.steps .now i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.steps .did i{background:var(--accent);border-color:var(--accent);color:var(--on-fill,var(--on-accent));font-style:normal;font-size:0}
.steps .did i::after{content:"";width:5px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);font-size:initial}

/* ---------- 본문 틀 ---------- */
.co{max-width:1040px;margin:0 auto;padding:var(--s2) var(--gut) 140px;display:grid;gap:var(--s3)}
.co h1{margin:0;font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.035em}
.co-form{display:grid;gap:var(--s4);min-width:0}
.co-side{display:grid;gap:var(--s2);align-content:start;min-width:0}

/* ---------- 예약 요약 (이 페이지에서 유일한 카드) ---------- */
.sum{display:grid;gap:var(--s2);padding:var(--s3);border:var(--bd);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh-press)}
.sum-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.sum-top b{display:block;font-size:var(--fs-head);line-height:1.25;font-weight:900;font-variant-numeric:tabular-nums}
.sum-top span{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--ink-2)}
.chip-btn{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-size:var(--fs-small);font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
.chip-btn:hover{border-color:var(--ink-3)}
.rows{display:grid;gap:6px;margin:0;padding-top:var(--s2);border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.rows div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);font-size:var(--fs-small);color:var(--ink-2)}
.rows dt{min-width:0}
.rows dd{margin:0;font-weight:700;color:var(--ink);white-space:nowrap;text-align:right}
.rows .dc dd{color:#15181E;background:var(--kakao);border-radius:var(--r-pill);padding:0 8px;font-weight:900}   /* 할인 = 노랑 칩 (홈 · 달력 · 결제 같은 모양) */
.rows .tot{margin-top:4px;padding-top:var(--s1);border-top:1px dashed var(--line);font-size:var(--fs-ui);color:var(--ink);font-weight:700}
.rows .tot dd{font-size:var(--fs-head);font-weight:900}
.per-box{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0;padding:14px var(--s2);border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 9%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 28%,transparent)}
.per-box span{font-size:var(--fs-small);font-weight:700;color:var(--ink-2)}
.per-box b{font-size:var(--fs-ui);font-weight:700;color:var(--accent-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.per-box em{font-style:normal;font-size:24px;font-weight:900;letter-spacing:-.02em;margin:0 1px}
.hold{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-cap);color:var(--ink-3)}
.hold i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;animation:blink 1.6s var(--ease) infinite}
.hold b{color:var(--ink);font-variant-numeric:tabular-nums}
.hold.out{color:var(--err)}.hold.out i{background:var(--err);animation:none}
@keyframes blink{50%{opacity:.25}}

/* ---------- 입력 ---------- */
.sec{display:grid;gap:var(--s2);min-width:0}
.sec-h{margin:0;font-size:var(--fs-ui);line-height:1.3;font-weight:900}
.fld{display:grid;gap:6px}
.fld label{font-size:var(--fs-small);font-weight:700;color:var(--ink-2)}
.fld input,.req textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:16px;font-weight:500;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fld input{height:52px;padding:0 var(--s2)}
.fld input::placeholder,.req textarea::placeholder{color:var(--ink-3);opacity:1}
.fld input:focus,.req textarea:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fld.bad input{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.err{margin:0;font-size:var(--fs-small);font-weight:700;color:var(--err)}
.req summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;list-style:none;cursor:pointer;font-size:var(--fs-small);font-weight:700;color:var(--ink-2)}
.req summary::-webkit-details-marker{display:none}
.req summary::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-3);font-size:13px;line-height:1;color:var(--ink-2)}
.req[open] summary::before{content:"−"}
.req summary small{font-weight:500;color:var(--ink-3)}
.req textarea{display:block;min-height:88px;padding:12px var(--s2);resize:vertical;line-height:1.5}

/* 결제 수단 */
.pm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.pm-it{display:grid;justify-items:center;align-content:center;gap:8px;min-height:80px;padding:var(--s1) 4px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.pm-it b{font-size:var(--fs-small);line-height:1.2;font-weight:700;white-space:nowrap}
.pm-it:hover{border-color:var(--ink-3)}
.pm-it[aria-checked="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--paper));box-shadow:inset 0 0 0 1px var(--accent)}
.pm-logo{display:grid;place-items:center;height:24px;min-width:46px;padding:0 7px;border-radius:7px;font-family:var(--f-it);font-style:normal;font-size:12px;font-weight:900;letter-spacing:-.02em;line-height:1}
.pm-logo.kp{background:var(--kakao);color:#15181E}
.pm-logo.np{background:var(--naver);color:#FFFFFF}
.pm-logo.cd{background:var(--inv);color:var(--on-inv)}
.pm-note{margin:0;font-size:var(--fs-cap);color:var(--ink-3)}

/* 동의 */
.ck{position:relative;width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--ink-3);background:var(--paper);transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.ck::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;border:solid var(--on-fill,var(--on-accent));border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform .2s var(--pop),opacity .15s var(--ease)}
[aria-pressed="true"] > .ck{background:var(--accent);border-color:var(--accent)}
[aria-pressed="true"] > .ck::after{opacity:1;transform:rotate(45deg) scale(1)}
.agr{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.agr.bad{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.agr-all{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 var(--s2);border:0;border-bottom:1px solid var(--line-soft);background:none;color:var(--ink);font-size:var(--fs-ui);font-weight:900;text-align:left}
.agr-list{list-style:none;margin:0;padding:6px var(--s2) var(--s1);display:grid}
.agr-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s1)}
.agr-it{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0;border:0;background:none;color:var(--ink-2);font-size:var(--fs-small);text-align:left}
.agr-it .ck{width:18px;height:18px;border-radius:5px}
.agr-it .ck::after{left:5px;top:1.5px;width:4.5px;height:9px}
.agr-it em{font-style:normal;font-weight:700;color:var(--ink-3);margin-right:6px}
.agr-it em.req-t{color:var(--accent-text)}
.agr-view{min-height:44px;padding:0 2px;border:0;background:none;color:var(--ink-3);font-size:var(--fs-cap);text-decoration:underline;text-underline-offset:3px}
.agr-view[aria-expanded="true"]{color:var(--ink)}
.agr-txt{grid-column:1 / -1;margin:0 0 var(--s1) 28px;padding:var(--s1) 12px;border-radius:8px;background:var(--bg-2);color:var(--ink-2);font-size:var(--fs-cap);line-height:1.65}
.agr-txt span{display:block}
.confirm{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);text-align:center}
.demo{justify-self:center;margin:0;padding:6px 12px;border:1px dashed var(--line);border-radius:var(--r-pill);font-size:var(--fs-cap);color:var(--ink-3);text-align:center}
.alert{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0;padding:12px var(--s2);border:1.5px solid var(--err);border-radius:var(--r-sm);background:color-mix(in srgb,var(--err) 8%,var(--paper));color:var(--err);font-size:var(--fs-small);font-weight:700}
.alert button{flex:none;min-height:36px;padding:0 12px;border:1.5px solid var(--err);border-radius:var(--r-pill);background:var(--paper);color:var(--err);font-weight:700}

/* ---------- 버튼 (메인과 같은 모양) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:56px;padding:0 var(--s3);border-radius:var(--r-sm);border:var(--bd);background:none;color:var(--ink);font-size:var(--fs-ui);font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn-pop{background:var(--btn);color:var(--on-accent);box-shadow:var(--sh)}
.btn-pop:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--shc)}
.btn-pop:active{transform:translate(3px,3px);box-shadow:var(--sh-press)}
.btn-line{background:var(--paper);box-shadow:none}
.btn-line:hover{background:var(--bg-2)}
.btn.full{width:100%}
.btn .arr{font-family:var(--f-it)}
/* 휴대폰: 아래 결제 막대 (입력 중엔 숨겨서 키보드에 안 가리게) */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;gap:6px;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);transition:transform .25s var(--ease)}
.paybar.away{transform:translateY(110%)}
.pay-in{display:none}

/* ---------- 결제 확인 중 ---------- */
.proc{position:fixed;inset:0;z-index:50;display:grid;justify-items:center;align-content:center;gap:var(--s1);padding:var(--gut);background:var(--bg);text-align:center;animation:fade .25s var(--ease)}
.proc b{font-size:var(--fs-head);line-height:1.3;font-weight:900}
.proc p{margin:0;color:var(--ink-2)}
.dots{display:flex;gap:10px;margin-bottom:var(--s2)}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);animation:hop 1s var(--ease) infinite}
.dots i:nth-child(1){background:var(--p-wd)}
.dots i:nth-child(2){background:var(--p-fri);animation-delay:.15s}
.dots i:nth-child(3){background:var(--p-sat);animation-delay:.3s}
@keyframes hop{0%,60%,100%{transform:none}30%{transform:translateY(-10px)}}
@keyframes fade{from{opacity:0}}

/* ---------- 완료 ---------- */
.done{max-width:480px;margin:0 auto;padding:var(--s3) var(--gut) var(--s5);display:grid;justify-items:center;gap:var(--s1);text-align:center}
.done-ic{width:72px;height:72px;margin:var(--s2) 0 var(--s1);border-radius:50%;border:var(--bd);background:var(--ok);color:#FFFFFF;display:grid;place-items:center;box-shadow:var(--sh-press);animation:pick .45s var(--pop)}
@keyframes pick{from{transform:scale(.6)}}
.done h1{margin:0;font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.035em;outline:none}
.done-no{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:var(--s1) 0 0;padding:0 6px 0 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);font:inherit;font-size:var(--fs-small);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.done-no b{color:var(--ink);font-family:var(--f-it);font-size:var(--fs-ui);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.done-no em{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink);font-style:normal;font-size:var(--fs-cap);font-weight:700}
.done-no:hover{border-color:var(--ink-3)}.done-no:hover em{background:var(--line-soft)}
.done-no:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.done-no.masked{cursor:default;padding-right:16px}.done-no.masked em{display:none}.done-no.masked:hover{border-color:var(--line)}
.done-no:active em{transform:scale(.96)}
.done-no.ok{border-color:var(--ok)}.done-no.ok em{background:var(--ok);color:#FFFFFF}
.ticket{width:100%;margin:var(--s2) 0 var(--s1);padding:var(--s3);border:var(--bd);border-radius:var(--r-card);background:var(--paper);text-align:left}
.ticket .rows{border-top:0;padding-top:0;gap:8px}
.done-acts{width:100%;display:grid;gap:var(--s1);margin-top:var(--s1)}
.done-acts small{display:block;font-size:var(--fs-cap);font-weight:500;opacity:.8}
.done-acts .btn{flex-direction:column;gap:2px;line-height:1.2}
.done-s{margin:var(--s2) 0 0;font-size:var(--fs-small);line-height:1.65;color:var(--ink-3)}
.empty{max-width:480px;margin:0 auto;padding:var(--s5) var(--gut);display:grid;justify-items:center;gap:var(--s2);text-align:center}
.empty b,.empty h1{margin:0;font-size:var(--fs-head);font-weight:900;line-height:1.3}
.empty p{margin:0;color:var(--ink-2)}

/* ---------- 아래: 사업자 정보 · 약관 ---------- */
.co-foot{max-width:1040px;margin:0 auto;padding:var(--s3) var(--gut) calc(var(--s3) + 120px);border-top:1px solid var(--line-soft);display:grid;gap:var(--s2);font-size:var(--fs-cap);color:var(--ink-3)}
.co-foot dl{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.co-foot dl div{display:flex;gap:6px}
.co-foot dt{color:var(--ink-3)}
.co-foot dd{margin:0;color:var(--ink-2)}
.co-foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.co-foot nav button,.co-foot nav a{padding:4px 0;border:0;background:none;color:var(--ink-2);font-size:var(--fs-cap);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.co-foot nav .pv{color:var(--ink);font-weight:900}

/* ===== 약관 · 개인정보 처리방침 (terms.html · privacy.html) ===== */
.legal{max-width:760px;margin:0 auto;padding:var(--s4) var(--gut) var(--s5);display:grid;gap:var(--s4);min-width:0}
.lg-head{display:grid;gap:6px}
.lg-head h1{margin:0;font-size:28px;line-height:1.25;font-weight:900;letter-spacing:-.035em;text-wrap:balance}
.lg-head p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.lg-head time{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.lg-sum{display:grid;gap:6px;margin:0;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:var(--fs-small);line-height:1.7;color:var(--ink-2)}
.lg-sum b{color:var(--ink)}
.lg-toc{border-top:var(--bd);border-bottom:1px solid var(--line);padding:var(--s2) 0}
.lg-toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s3);font-size:var(--fs-small);line-height:1.5}
.lg-toc li{break-inside:avoid;padding:3px 0}
.lg-toc a{color:var(--ink-2);text-decoration:none}.lg-toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lg-toc a span{display:inline-block;min-width:3.6em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal section{display:grid;gap:var(--s1);scroll-margin-top:calc(var(--top) + var(--s2));min-width:0}
.legal h2{margin:0 0 2px;font-size:var(--fs-head);line-height:1.35;font-weight:900;letter-spacing:-.02em}
.legal h2 span{margin-right:8px;color:var(--accent-text);font-family:var(--f-it);font-style:italic;font-variant-numeric:tabular-nums}
.legal p,.legal li{margin:0;font-size:var(--fs-ui);line-height:1.8;color:var(--ink-2);max-width:68ch}
.legal ol.n,.legal ul.d{margin:0;padding-left:1.4em;display:grid;gap:4px}
.legal ol.n li::marker{color:var(--ink-3);font-variant-numeric:tabular-nums}
.legal strong{color:var(--ink);font-weight:700}
.legal a{color:var(--ink);text-underline-offset:3px}
.lg-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.lg-tbl table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-small);line-height:1.6}
.lg-tbl th,.lg-tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.lg-tbl tr:last-child td{border-bottom:0}
.lg-tbl th{background:var(--bg-2);color:var(--ink);font-weight:700;white-space:nowrap}
.lg-tbl td{color:var(--ink-2)}
.lg-tbl td b{color:var(--ink)}
.lg-tbl.sm table{min-width:0}
.lg-end{margin:0;padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:560px){ .lg-toc ol{columns:1} .lg-head h1{font-size:24px} .legal p,.legal li{font-size:15px} }
.doc{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:80dvh;overflow:auto;padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom,0px));border-radius:var(--r-card) var(--r-card) 0 0;border-top:var(--bd);background:var(--surface);transform:translateY(104%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
.doc.on{transform:none;visibility:visible}
.doc header{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.doc h2{margin:0;font-size:var(--fs-head);font-weight:900}
.doc-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);display:grid;place-items:center}
.doc div{font-size:var(--fs-small);line-height:1.75;color:var(--ink-2)}
.doc div p{margin:0 0 var(--s1)}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(18,12,8,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.on{opacity:1;visibility:visible}
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--inv);color:var(--on-inv);font-size:var(--fs-small);font-weight:700;text-align:center;opacity:0;visibility:hidden;transition:transform .25s var(--ease),opacity .2s,visibility .2s}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}

@media (min-width:960px){
  :root{--gut:32px}
  .co{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s5);align-items:start;padding-top:var(--s3);padding-bottom:var(--s5)}
  .co > h1{grid-column:1 / -1}
  .co-side{position:sticky;top:calc(var(--top) + var(--s3));grid-column:2;grid-row:2 / span 3}
  .co-form{grid-column:1;grid-row:2}
  .paybar{display:none}
  .pay-in{display:flex}
  .co-foot{padding-bottom:var(--s4)}
  .doc{left:50%;right:auto;bottom:50%;width:min(560px,calc(100% - 48px));border-radius:var(--r-card);border:var(--bd);transform:translate(-50%,54%);opacity:0;transition:transform .3s var(--ease),opacity .3s,visibility .3s}
  .doc.on{transform:translate(-50%,50%);opacity:1}
  .toast{bottom:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}
.legal + .co-foot{padding-bottom:var(--s4)}
.agr-more{display:inline-block;margin-top:4px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.link-in{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lg-tbl caption{caption-side:top;padding:10px 12px;text-align:left;font-size:var(--fs-small);color:var(--ink-2);border-bottom:1px solid var(--line-soft);background:var(--surface)}
.lg-tbl caption b{color:var(--ink)}
#refund-tbl{display:grid;gap:var(--s1)}
.lg-toc.num a span{min-width:2.2em}
@media (max-width:560px){
  .lg-tbl.stack table{min-width:0}
  .lg-tbl.stack thead{display:none}
  .lg-tbl.stack tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .lg-tbl.stack tr:last-child{border-bottom:0}
  .lg-tbl.stack td{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:10px;padding:3px 0;border:0}
  .lg-tbl.stack td::before{content:attr(data-l);color:var(--ink-3);font-weight:700}
  .lg-tbl.stack td:first-child{padding-bottom:6px}
}
/* 누르는 영역 44px (보이는 크기는 그대로) */
.co-logo{position:relative}
.co-logo::after{content:"";position:absolute;inset:-7px -9px}
.co-foot nav button,.co-foot nav a{position:relative}
.co-foot nav button::after,.co-foot nav a::after{content:"";position:absolute;inset:-9px 0}
.chip-btn,.doc-x,#tw-retry{position:relative}
.chip-btn::after{content:"";position:absolute;inset:-6px 0}
.doc-x::after{content:"";position:absolute;inset:-2px;border-radius:50%}
#tw-retry::after{content:"";position:absolute;inset:-8px 0}
.agr-view{position:relative}.agr-view::after{content:"";position:absolute;inset:0 -8px}

/* ===== 예약조회 (check.html) =====
   한 줄 폭 480 · 휴대폰과 PC 같은 순서: 찾기 → 예약 내용(표) → 취소 → 홈 */
.lk{max-width:520px;margin:0 auto;padding:var(--s4) var(--gut) var(--s5)}
.lk h1{margin:0;font-size:28px;line-height:1.25;font-weight:900;letter-spacing:-.04em;outline:none;text-wrap:balance}
.lk-eye{margin:0 0 6px;font-family:var(--f-it);font-style:italic;font-size:var(--fs-cap);font-weight:900;letter-spacing:.16em;color:var(--accent-text)}
.lk-sub{margin:6px 0 0;font-size:var(--fs-ui);color:var(--ink-2)}
.lk-form{display:grid;gap:var(--s2);margin-top:var(--s4);padding:var(--s3);border:var(--bd);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--sh)}
.lk-form .fld input{font-family:var(--f-it),var(--f-ko);font-size:18px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lk-form .fld input::placeholder{font-weight:500;letter-spacing:.02em}
.lk-form .btn{margin-top:4px}
.btn.ld{pointer-events:none}
.btn.ld > *,.btn.ld{color:transparent}
.btn.ld{position:relative}
.btn.ld::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid var(--ink);border-right-color:transparent;animation:lkspin .8s linear infinite}
@keyframes lkspin{to{transform:rotate(360deg)}}
.lk-help{margin:var(--s3) 0 0;font-size:var(--fs-small);line-height:1.7;color:var(--ink-3);text-align:center}
.lk-help a{color:var(--ink);font-weight:700}

/* 예약 내용 */
.lk-head{display:grid;justify-items:start;gap:var(--s1)}
.lk-st{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-small);font-weight:900}
.lk-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lk-st.ok{background:color-mix(in srgb,var(--ok) 14%,var(--paper));color:color-mix(in srgb,var(--ok) 78%,var(--ink));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ok) 40%,transparent)}
.lk-st.wait{background:color-mix(in srgb,var(--hi) 30%,var(--paper));color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hi) 70%,transparent)}
.lk-st.off{background:var(--bg-2);color:var(--ink-2)}
.lk-head .done-no{margin-top:4px}
.done-no.ok{border-color:var(--ok)}
.lk-ticket{margin:var(--s3) 0 0;box-shadow:var(--sh)}
.lk-dates{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s2);padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1.5px dashed var(--line)}
.lk-dates > div{display:grid;gap:2px;min-width:0}
.lk-dates > div:last-child{text-align:right}
.lk-dates small{font-size:var(--fs-cap);font-weight:700;color:var(--ink-3)}
.lk-dates b{font-family:var(--f-it);font-size:30px;line-height:1.05;font-weight:900;letter-spacing:-.03em}
.lk-dates b i{font-family:var(--f-ko);font-style:normal;font-size:var(--fs-ui);font-weight:700;letter-spacing:0;color:var(--ink-2);vertical-align:3px}
.lk-dates span{font-size:var(--fs-small);color:var(--ink-2)}
.lk-n{display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.lk-n i{width:14px;height:1.5px;background:var(--line)}
.lk-n em{font-style:normal;min-height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--r-pill);background:var(--inv);color:var(--on-inv);font-size:var(--fs-cap);font-weight:900}
.lk-ticket .rows{padding-top:0;border-top:0;gap:8px}
.lk-res .demo{margin-top:var(--s2)}
.lk-res .demo:not([hidden]){display:block;width:fit-content;margin-inline:auto}

/* 취소 */
.lk-cx{display:grid;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:var(--bd)}
.lk-cx-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.lk-cx-top h2{margin:0;font-size:var(--fs-head);font-weight:900;letter-spacing:-.02em}
.lk-cx-top .link-in{font-size:var(--fs-small);color:var(--ink-2);position:relative}
.lk-cx-top .link-in::after{content:"";position:absolute;inset:-12px -6px}
.lk-refund{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 9%,var(--paper));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 28%,transparent)}
.lk-refund span{grid-column:1 / -1;font-size:var(--fs-small);font-weight:700;color:var(--ink-2)}
.lk-refund b{font-family:var(--f-it);font-size:32px;line-height:1.1;font-weight:900;letter-spacing:-.03em;color:var(--accent-text)}
.lk-refund em{font-style:normal;font-size:var(--fs-small);font-weight:900;color:var(--accent-text);padding-bottom:6px}
.lk-refund.zero{background:var(--bg-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.lk-refund.zero b{font-family:var(--f-ko);font-size:22px;color:var(--ink)}
.lk-refund.zero em{color:var(--ink-2)}
.lk-rule{list-style:none;margin:0;padding:var(--s1) 0 0;display:grid;gap:6px;font-size:var(--fs-small)}
.lk-rule li{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3em;align-items:center;gap:var(--s1);min-height:30px;padding:0 10px;border-radius:8px;color:var(--ink-3)}
.lk-rule li.on{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--ink)}
.lk-rule li b{text-align:right;font-weight:700}
.lk-rule .lk-rule-h{grid-template-columns:1fr auto;min-height:auto;padding:0 2px 4px;color:var(--ink-2)}
.lk-rule .lk-rule-h b{text-align:left;color:var(--ink);font-weight:900}
.lk-bar{display:block;height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden}
.lk-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink-3)}
.lk-rule li.on .lk-bar i{background:var(--accent)}
.lk-note{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.lk-arm{display:grid;gap:2px;padding:12px var(--s2);border-radius:var(--r-sm);background:color-mix(in srgb,var(--err) 8%,var(--paper));box-shadow:inset 0 0 0 1.5px var(--err);animation:fade .2s var(--ease)}
.lk-arm b{font-size:var(--fs-ui);color:var(--err);font-weight:900}
.lk-arm span{font-size:var(--fs-small);color:var(--ink-2)}
.lk-cx-act{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1)}
.lk-cx-act:has(#cx-back:not([hidden])){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.lk-cx-btn{color:var(--err);border-color:var(--err)}
.lk-cx-btn.armed{background:var(--err);border-color:var(--err);color:#FFFFFF;box-shadow:var(--sh-press)}
.lk-cx-btn.ld::after{border-color:#FFFFFF;border-right-color:transparent}
.lk-off{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--bg-2);font-size:var(--fs-small);line-height:1.7;color:var(--ink-2)}
.lk-off a{color:var(--ink);font-weight:700}
.lk-foot{display:grid;justify-items:center;gap:var(--s2);margin-top:var(--s4)}

/* 취소 끝 */
.lk-done{padding-top:0}
.lk-done.req .done-ic{background:var(--hi);color:var(--ink)}
.lk-done-s{margin:0;font-size:var(--fs-ui);color:var(--ink-2)}
@media (max-width:380px){ .lk-dates b{font-size:26px} .lk-refund b{font-size:28px} .lk-rule li{grid-template-columns:6.8em minmax(0,1fr) 2.8em} }
@media (min-width:960px){ .lk{padding-top:var(--s5)} .lk h1{font-size:32px} }
.done-s a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.lk-form .fld input::placeholder{color:color-mix(in srgb,var(--ink) 32%,transparent)}
.co-foot dd a{color:inherit;text-underline-offset:3px}
.lk-bar i{background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
/* 예약조회: 찾는 방법 (휴대폰 번호 · 예약번호) */
.lk-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--bg-2)}
.lk-seg button{min-height:40px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font-size:var(--fs-ui);font-weight:700;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.lk-seg button[aria-checked="true"]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
/* 예약 여러 건 */
.lk-list h1{margin-bottom:var(--s3)}
.lk-items{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.lk-items button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st go" "d go" "s go" "no go";justify-items:start;row-gap:4px;column-gap:var(--s2);width:100%;padding:var(--s2) var(--s3);border:var(--bd);border-radius:var(--r-card);background:var(--paper);color:var(--ink);text-align:left;box-shadow:var(--sh-press);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.lk-items button:hover{transform:translate(-1px,-1px);box-shadow:var(--sh)}
.lk-items .lk-st{grid-area:st;min-height:24px;font-size:var(--fs-cap)}
.lk-items b{grid-area:d;font-family:var(--f-it);font-size:22px;font-weight:900;letter-spacing:-.02em}
.lk-it-s{grid-area:s;font-size:var(--fs-small);color:var(--ink-2)}
.lk-it-no{grid-area:no;font-family:var(--f-it);font-size:var(--fs-cap);font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.lk-items i{grid-area:go;align-self:center;font-family:var(--f-it);font-style:normal;font-size:20px;color:var(--ink-3)}
/* 취소 확정 때 휴대폰 번호 */
.lk-arm-tel{margin-top:var(--s1)}
.lk-arm-tel input{height:48px;font-family:var(--f-it),var(--f-ko);font-size:17px;font-weight:700}
.lk-arm-tel input::placeholder{color:color-mix(in srgb,var(--ink) 32%,transparent);font-weight:500}
/* 404 */
.nf{padding-top:var(--s5)}
.nf h1{margin:0;font-size:24px;line-height:1.3;font-weight:900;letter-spacing:-.035em}
.nf-code{margin:0;font-family:var(--f-it);font-style:italic;font-size:72px;line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--accent-text)}
.nf-acts{display:grid;gap:var(--s1);width:100%;max-width:320px;margin-top:var(--s2)}
/* 가로로 누운 노치 휴대폰: 양옆 여백이 안전 영역보다 좁지 않게 */
@media (orientation:landscape) and (max-height:600px) and (max-width:959px){ :root{--gut:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))} }