/* ===== reserve-pay.html ===== */
body.page-reserve-pay{ --hero:#FBF1EF;
  --surface:#FFFFFF;
  --text-body:#3F3A37;
  --text-muted:#77716D;
  --primary-light:#FBEAEA;
  --text-disabled:#BDB7B3;
}

body.page-reserve-pay{font-size:1.5rem;}

body.page-reserve-pay .wrap.narrow{max-width:760px;}

@media (max-width:860px){
  body.page-reserve-pay .header-bottom{justify-content:center;}
}

body.page-reserve-pay .page-hero{background:var(--hero);border-bottom:1px solid #F2E2DF;padding:34px 0 30px}
body.page-reserve-pay .page-hero h1{font-size:2.5rem}
body.page-reserve-pay .steps{display:flex;gap:8px;margin-top:14px;font-size:1.3rem;color:var(--hallasan-mint);font-weight:600;flex-wrap:wrap}
body.page-reserve-pay .steps span::after{content:'›';margin-left:8px;color:#ABA09B}
body.page-reserve-pay .steps span:last-child::after{content:''}
body.page-reserve-pay .steps .on{color:var(--tangerine-deep)}

body.page-reserve-pay section.card{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:16px;overflow:hidden}
body.page-reserve-pay section.card > h2{font-size:1.6rem;padding:18px 24px;border-bottom:1px solid var(--line)}
body.page-reserve-pay .pad{padding:18px 24px 22px}

body.page-reserve-pay .row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid #F4F0EB}
body.page-reserve-pay .row:last-child{border-bottom:0}
body.page-reserve-pay .row dt{width:88px;flex:none;color:var(--hallasan-mint);font-size:1.4rem;font-weight:600}
body.page-reserve-pay .row dd{flex:1;font-weight:600}

body.page-reserve-pay .methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.page-reserve-pay .m{position:relative}
body.page-reserve-pay .m input{position:absolute;opacity:0;width:0;height:0}
body.page-reserve-pay .m label{
  display:flex;align-items:center;gap:10px;padding:16px 16px;border:1px solid var(--line);
  border-radius:11px;cursor:pointer;font-weight:700;font-size:1.5rem;background:#fff;transition:.15s;height:100%;
}
body.page-reserve-pay .m label:hover{border-color:#B9A9A6}
body.page-reserve-pay .m input:checked + label{border-color:var(--tangerine);box-shadow:inset 0 0 0 1px var(--tangerine);color:var(--tangerine)}
body.page-reserve-pay .m input:focus-visible + label{outline:2px solid var(--tangerine-deep);outline-offset:2px}

body.page-reserve-pay .m .ico{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center}
body.page-reserve-pay .m .ico svg{width:18px;height:18px;display:block}
body.page-reserve-pay .ico.bank{background:var(--basalt)}
body.page-reserve-pay .ico.card{background:var(--hallasan-mint)}
body.page-reserve-pay .ico.kakao{background:#FEE500}
body.page-reserve-pay .ico.naver{background:#03C75A}

body.page-reserve-pay .bankbox{margin-top:14px;background:#FBF6F5;border:1px solid #F0E2DF;border-radius:11px;padding:16px 18px}
body.page-reserve-pay .bankbox .acc{font-family:'Gothic A1',sans-serif;font-weight:800;font-size:2rem;letter-spacing:.02em;margin:4px 0 2px}
body.page-reserve-pay .bankbox .due{font-size:1.3rem;color:var(--hallasan-mint);line-height:1.9}
body.page-reserve-pay .bankbox .due .when{font-weight:800;color:var(--ink);font-size:1.45rem}
body.page-reserve-pay .bankbox .due .when.soon{color:var(--tangerine-deep)}

body.page-reserve-pay .bankbox .due .why{display:inline-block;background:#FBECEA;color:var(--tangerine-deep);
  font-size:1.15rem;font-weight:800;padding:2px 8px;border-radius:6px;margin-left:4px}
body.page-reserve-pay .bankbox .due .left{display:block;font-size:1.25rem;font-weight:700;color:var(--text-muted)}
body.page-reserve-pay .bankbox .due .left.soon{color:var(--tangerine-deep)}

body.page-reserve-pay .bank-blocked{margin-top:14px;background:#FBF6F5;border:1px solid #F0D6D2;border-radius:11px;
  padding:15px 17px;font-size:1.35rem;line-height:1.8;color:var(--text-body)}
body.page-reserve-pay .bank-blocked b{color:var(--tangerine)}
body.page-reserve-pay .bankbox label{display:block;margin-top:14px;font-size:1.3rem;font-weight:700;color:var(--hallasan-mint);margin-bottom:6px}
body.page-reserve-pay .bankbox input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:1.5rem;background:#fff}
body.page-reserve-pay .bankbox input:focus{outline:none;border-color:var(--tangerine)}

body.page-reserve-pay .amt{display:flex;justify-content:space-between;padding:9px 0;font-size:1.4rem;color:#3A3532}
body.page-reserve-pay .amt.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:1.6rem;font-weight:700;color:var(--ink)}
body.page-reserve-pay .amt.total b{font-family:'Gothic A1',sans-serif;font-weight:800;font-size:2.4rem;color:var(--tangerine-deep)}
body.page-reserve-pay .amt .rest{color:var(--hallasan-mint);font-size:1.3rem}

body.page-reserve-pay .agree{display:flex;align-items:flex-start;gap:9px;font-size:1.4rem;padding:7px 0;color:#3A3532}
body.page-reserve-pay .agree input{margin-top:4px;width:17px;height:17px;accent-color:var(--tangerine);flex:none}

body.page-reserve-pay .agree a{color:var(--tangerine);font-weight:700;text-decoration:underline;text-underline-offset:2px}
body.page-reserve-pay .agree .hl{color:var(--tangerine);font-weight:700}

body.page-reserve-pay .paybtn{
  display:block;width:100%;margin:20px 0 56px;padding:18px;border:0;border-radius:12px;
  background:var(--tangerine);color:#fff;font-family:'Gothic A1',sans-serif;font-weight:800;font-size:1.7rem;
  cursor:pointer;transition:.15s;
}
body.page-reserve-pay .paybtn:hover:not(:disabled){background:var(--tangerine-deep)}
body.page-reserve-pay .paybtn:disabled{background:#D6CCC7;cursor:not-allowed}
body.page-reserve-pay .paybtn:focus-visible{outline:2px solid var(--tangerine-deep);outline-offset:3px}

body.page-reserve-pay .msg{margin-top:14px;padding:14px 16px;border-radius:10px;font-size:1.4rem;display:none}
body.page-reserve-pay .msg.err{display:block;background:#FCF1EF;border:1px solid #F0D6D2;color:var(--tangerine-deep)}
body.page-reserve-pay .notice{font-size:1.3rem;color:var(--hallasan-mint);margin-top:14px;word-break:keep-all;line-height:1.8}
body.page-reserve-pay .notice a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

body.page-reserve-pay .loading{text-align:center;padding:60px 20px;color:var(--hallasan-mint)}

@media (max-width:600px){
  body.page-reserve-pay .page-hero h1{font-size:2.1rem}
  body.page-reserve-pay .pad, body.page-reserve-pay section.card > h2{padding-left:18px;padding-right:18px}
  body.page-reserve-pay .methods{grid-template-columns:1fr}
  body.page-reserve-pay .row{flex-direction:column;gap:2px}
  body.page-reserve-pay .row dt{width:auto}
}

/* ===== reserve-complete.html ===== */
body.page-reserve-complete{ --hero:#FBF1EF;
  --surface:#FFFFFF;
  --text-body:#3F3A37;
  --text-muted:#77716D;
  --primary-light:#FBEAEA;
  --text-disabled:#BDB7B3;
}

body.page-reserve-complete{font-size:1.5rem;}

body.page-reserve-complete .wrap.narrow{max-width:760px;}

@media (max-width:860px){
  body.page-reserve-complete .header-bottom{justify-content:center;}
}

body.page-reserve-complete .done{background:var(--hero);border-bottom:1px solid #F2E2DF;text-align:center;padding:52px 0 44px}
body.page-reserve-complete .check{
  width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
  background:var(--tangerine);display:flex;align-items:center;justify-content:center;
}
body.page-reserve-complete .check svg{width:30px;height:30px}
body.page-reserve-complete .check path{
  fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;animation:draw .45s .12s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
body.page-reserve-complete .done h1{font-size:2.7rem}
body.page-reserve-complete .done p{margin-top:10px;color:var(--hallasan-mint);font-size:1.5rem}

body.page-reserve-complete .numbox{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  margin:-26px auto 0;padding:22px 24px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
body.page-reserve-complete .numbox .lab{font-size:1.3rem;color:var(--hallasan-mint);font-weight:600;letter-spacing:.02em}
body.page-reserve-complete .numbox .no{
  font-family:'Gothic A1',sans-serif;font-weight:800;font-size:2.8rem;
  letter-spacing:.04em;color:var(--tangerine-deep);margin-top:2px;word-break:break-all;
}
body.page-reserve-complete .numbox .copy{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:inherit;font-size:1.4rem;font-weight:600;
  padding:11px 18px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap;
}
body.page-reserve-complete .numbox .copy:hover{border-color:var(--tangerine);color:var(--tangerine)}
body.page-reserve-complete .numbox .copy.ok{background:var(--tangerine);border-color:var(--tangerine);color:#fff}

body.page-reserve-complete section.card{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:16px;overflow:hidden}
body.page-reserve-complete .card h2{
  font-size:1.6rem;padding:18px 24px;border-bottom:1px solid var(--line);
}
body.page-reserve-complete .rows{padding:6px 24px 18px}
body.page-reserve-complete .row{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid #F4F0EB}
body.page-reserve-complete .row:last-child{border-bottom:0}
body.page-reserve-complete .row dt{width:96px;flex:none;color:var(--hallasan-mint);font-size:1.4rem;font-weight:600}
body.page-reserve-complete .row dd{flex:1;font-weight:600;word-break:keep-all}
body.page-reserve-complete .row dd .sub{display:block;font-weight:500;font-size:1.3rem;color:var(--hallasan-mint);margin-top:3px}
body.page-reserve-complete .price{color:var(--tangerine-deep);font-family:'Gothic A1',sans-serif;font-weight:800;font-size:2rem}

body.page-reserve-complete .notes{padding:20px 24px 22px}
body.page-reserve-complete .notes li{
  list-style:none;position:relative;padding-left:16px;
  font-size:1.4rem;color:#3A3532;margin-bottom:9px;word-break:keep-all;
}
body.page-reserve-complete .notes li:last-child{margin-bottom:0}
body.page-reserve-complete .notes li::before{content:'';position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--sea)}
body.page-reserve-complete .notes strong{color:var(--tangerine);font-weight:700}

body.page-reserve-complete .notes a{color:var(--tangerine);font-weight:700;text-decoration:underline;text-underline-offset:2px}

body.page-reserve-complete .actions{display:flex;gap:10px;margin:22px 0 56px}
body.page-reserve-complete .btn{
  flex:1;text-align:center;padding:16px 12px;border-radius:11px;
  font-weight:700;font-size:1.5rem;transition:.15s;border:1px solid var(--line);background:#fff;
}
body.page-reserve-complete .btn:hover{border-color:var(--tangerine);color:var(--tangerine)}
body.page-reserve-complete .btn.primary{background:var(--tangerine);border-color:var(--tangerine);color:#fff}
body.page-reserve-complete .btn.primary:hover{background:var(--tangerine-deep);border-color:var(--tangerine-deep);color:#fff}
body.page-reserve-complete .btn:focus-visible{outline:2px solid var(--tangerine-deep);outline-offset:2px}

body.page-reserve-complete .empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:40px 24px;text-align:center;margin-top:-26px}
body.page-reserve-complete .empty h2{font-size:1.9rem;margin-bottom:8px}
body.page-reserve-complete .empty p{color:var(--hallasan-mint);font-size:1.4rem}

@media (max-width:600px){
  body.page-reserve-complete .done{padding:42px 0 40px}
  body.page-reserve-complete .done h1{font-size:2.2rem}
  body.page-reserve-complete .numbox{padding:18px 18px;flex-direction:column;align-items:flex-start;gap:12px}
  body.page-reserve-complete .numbox .no{font-size:2.4rem}
  body.page-reserve-complete .copy{width:100%}
  body.page-reserve-complete .rows, body.page-reserve-complete .notes, body.page-reserve-complete .card h2{padding-left:18px;padding-right:18px}
  body.page-reserve-complete .row{flex-direction:column;gap:3px}
  body.page-reserve-complete .row dt{width:auto}
  body.page-reserve-complete .actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  body.page-reserve-complete .check path{animation:none;stroke-dashoffset:0}
}
@media print{
  body.page-reserve-complete header, body.page-reserve-complete .actions, body.page-reserve-complete .copy, body.page-reserve-complete footer{display:none}
  body.page-reserve-complete{background:#fff}
  body.page-reserve-complete .numbox, body.page-reserve-complete section.card{border-color:#ababab}
}

/* ===== mybookings.html ===== */
body.page-my-bookings nav a.current{color:var(--tangerine);}

body.page-my-bookings .mega-col strong{display:block; font-size:1.9rem; font-weight:800; color:var(--ink); margin-bottom:14px;}

body.page-my-bookings .mega-col a.current{color:var(--tangerine);}

body.page-my-bookings .nav-dropdown a.current{color:var(--tangerine-deep); font-weight:700;}


body.page-my-bookings .check{padding:70px 0 100px;}

body.page-my-bookings .check-box{
  max-width:460px; margin:0 auto;
  background:#fff; border:1px solid #EBE5DF; border-radius:14px;
  padding:40px 36px 34px;
}
body.page-my-bookings .check-box h2{font-size:2.1rem; font-weight:800; text-align:center; margin-bottom:8px;}
body.page-my-bookings .check-box .desc{font-size:1.4rem; color:var(--text-muted); text-align:center; margin-bottom:28px;}

body.page-my-bookings .check-field{margin-bottom:12px;}

body.page-my-bookings .check-field input{
  width:100%; border:1.5px solid #DDE3E0; border-radius:10px;
  padding:15px 16px; font-size:1.5rem; font-family:inherit; color:var(--ink);
  background:#fff; outline:none; transition:border-color .15s;
}

body.page-my-bookings .check-field input::placeholder{color:var(--text-muted); font-weight:500;}

body.page-my-bookings .check-field input:focus{border-color:var(--tangerine);}

body.page-my-bookings .check-btn{
  width:100%; margin-top:16px;
  background:var(--tangerine); color:#fff; font-weight:800; font-size:1.65rem;
  padding:16px; border-radius:10px; border:none;
  box-shadow:0 8px 18px rgba(176,48,48,0.22);
  transition:background .15s;
}
body.page-my-bookings .check-btn:hover{background:var(--tangerine-deep);}

body.page-my-bookings .check-note{
  text-align:center; font-size:1.35rem; color:var(--text-muted);
  margin-top:22px; line-height:1.7;
}

body.page-my-bookings .check-note b{color:var(--ink); font-weight:700;}
body.page-my-bookings .check-note a{color:var(--tangerine-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px;}

body.page-my-bookings .result-box{
  max-width:460px; margin:0 auto;
  background:#fff; border:1px solid #EBE5DF; border-radius:14px;
  padding:32px 30px 26px;
}
body.page-my-bookings .result-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
body.page-my-bookings .result-head h2{font-size:1.9rem; font-weight:800;}

body.page-my-bookings .result-state{
  font-size:1.25rem; font-weight:800; padding:5px 12px; border-radius:999px;
  background:#F5F1EE; color:var(--hallasan-mint);
}
body.page-my-bookings .result-rows{border-top:1px solid #F2ECE7;}
body.page-my-bookings .result-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px solid #F2ECE7; font-size:1.4rem;
}
body.page-my-bookings .result-row .k{color:var(--text-muted); font-weight:600; flex:0 0 84px;}
body.page-my-bookings .result-row .v{color:var(--ink); font-weight:700; text-align:right;}

body.page-my-bookings .result-row .res-sub{display:block; margin-top:3px; font-size:1.25rem; font-weight:600; color:var(--text-muted);}
body.page-my-bookings .result-row.total{border-bottom:none; padding-top:16px;}
body.page-my-bookings .result-row.total .k{color:var(--ink); font-weight:800;}
body.page-my-bookings .result-row.total .v{color:var(--tangerine-deep); font-weight:800; font-size:1.9rem;}

/* KB국민카드 제휴 «현장결제» 예약일 때만 나오는 줄 */
body.page-my-bookings #rowKbNormal .v{color:#9A948E; text-decoration:line-through; font-weight:600;}
body.page-my-bookings #rowKbOff .v{color:var(--tangerine-deep); font-weight:800;}
body.page-my-bookings #rowKbNormal[hidden], body.page-my-bookings #rowKbOff[hidden], body.page-my-bookings .kb-note[hidden]{display:none;}
/* 「현장 결제금액」은 글자가 길어 두 줄로 접히므로 칸 너비를 글자에 맞춥니다 */
body.page-my-bookings .result-row.total .k{flex:0 0 auto; white-space:nowrap;}
body.page-my-bookings .kb-note{
  margin-top:10px; padding:11px 13px; background:#FFF6E8; border:1px solid #F0DFA8;
  border-radius:10px; font-size:1.25rem; line-height:1.6; color:#6B5A32; word-break:keep-all;
}

body.page-my-bookings .result-btns{display:flex; gap:10px; margin-top:22px;}
body.page-my-bookings .btn-again, body.page-my-bookings .btn-cancel{
  flex:1; padding:14px; border-radius:11px; font-size:1.45rem; font-weight:700;
}
body.page-my-bookings .btn-again{border:1.5px solid var(--line); background:#FCFAF9; color:var(--text-body);}
body.page-my-bookings .btn-again:hover{border-color:var(--tangerine); color:var(--tangerine-deep);}

body.page-my-bookings .btn-cancel{border:1.5px solid #E8C4BC; background:#fff; color:var(--tangerine-deep); font-weight:800;}
body.page-my-bookings .btn-cancel:hover{background:#FDF5F3;}
body.page-my-bookings .cancel-note{
  margin-top:16px; font-size:1.25rem; color:var(--text-muted); text-align:center; line-height:1.7;
}
body.page-my-bookings .cancel-note b{color:var(--sea);}

body.page-my-bookings .help-box{
  max-width:460px; margin:24px auto 0;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 24px;
}
body.page-my-bookings .help-box h3{font-size:1.45rem; font-weight:800; margin-bottom:12px;}
body.page-my-bookings .help-box li{
  font-size:1.35rem; color:var(--sea); list-style:none;
  padding-left:12px; position:relative; margin-bottom:7px; line-height:1.65;
}
body.page-my-bookings .help-box li:last-child{margin-bottom:0;}
body.page-my-bookings .help-box li::before{content:'·'; position:absolute; left:2px;}

body.page-my-bookings .help-box li a{color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:2px;}

@media (max-width:860px){
  body.page-my-bookings .header-bottom{justify-content:center;}

  body.page-my-bookings .check{padding:50px 0 80px;}
  body.page-my-bookings .check-box{padding:30px 22px 26px;}
  body.page-my-bookings .help-box{padding:20px 20px;}
}