/* ============================================================
   고객 화면 공통 스타일 — reservation / booking / faq / talk 4개 화면이 공유.
   base.css 다음, 각 화면 전용 CSS 앞에 읽힌다.
   (res.php · payment.php 는 레이아웃이 달라 각자 CSS 를 쓴다)
   ============================================================ */
html, body {
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 스크롤 컨테이너 */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 96px;          /* 하단 결제바 공간 */
}

.page::-webkit-scrollbar { display: none; }

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--pad);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar__logo {
  position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
  height: 22px; display: flex; align-items: center;
}

.topbar__logo img { height: 22px; width: auto; display: block; }

.topbar__back {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent; border: 0; color: var(--text);
  display: inline-flex; align-items: center; gap: 2px;
  font: inherit; font-size: 13px; color: var(--text-dim);
  padding: 4px 6px 4px 0; margin-right: 2px;
}

.topbar__back svg { width: 18px; height: 18px; }

.topbar__back:hover { color: var(--text); }

.topbar__title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  margin: 0; text-align: center;
}

.topbar__link {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text); text-decoration: none; white-space: nowrap;
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface);
  transition: background-color .12s, border-color .12s;
}

.topbar__link svg { width: 13px; height: 13px; }

.topbar__link:hover { background: var(--surface-2); border-color: rgba(0,0,0,0.35); }

/* ---------- 상단 사진 갤러리 ---------- */
.gallery { position: relative; background: #E9EBEF; }

.gallery__slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}

.gallery__slides::-webkit-scrollbar { display: none; }

.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; }

/* PC용 좌우 화살표 (모바일은 스와이프) */
.gallery__nav {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.92); color: #1A1C20;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18); z-index: 5;
  align-items: center; justify-content: center;
  transition: background-color .12s;
}

.gallery__nav:hover { background: #fff; }

.gallery__nav svg { width: 20px; height: 20px; }

.gallery__nav.prev { left: 14px; }

.gallery__nav.next { right: 14px; }

@media (min-width: 1024px) {
  .gallery__nav:not([hidden]) { display: flex; }
}

.gallery__img {
  display: block; width: 100%; aspect-ratio: 40 / 21; object-fit: cover;
  background: #E2E5EA;
}

.gallery__dots {
  position: absolute; top: 12px; left: 12px;
  display: none; align-items: center; gap: 5px;
  padding: 5px 8px; background: rgba(0,0,0,0.45); border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.gallery__dots.is-shown { display: inline-flex; }

.gdot { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.55);
        transition: width .2s, background-color .2s; }

.gdot.is-on { background: #fff; width: 14px; }

.gallery__tools {
  position: absolute; right: 12px; top: 12px;
  display: flex; gap: 8px; z-index: 2;
}

.tool-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,0.55); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .12s;
}

.tool-btn:hover { background: rgba(0,0,0,0.78); }

.tool-btn svg { width: 19px; height: 19px; }

/* ---------- 본문 컨테이너 ---------- */
.body { padding: 0 var(--pad); }

/* ---------- 지점 소개 (갤러리 오버레이) ---------- */
.gallery__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 13px;
  padding: 42px var(--pad) 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

.branch-logo {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 999px; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
}

.branch-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.branch-meta { min-width: 0; flex: 1; }

.branch-name { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.branch-desc { font-size: 12.5px; color: rgba(255,255,255,0.82); line-height: 1.5; margin: 4px 0 0; letter-spacing: -0.2px; }

/* 방 선택 태그 등에 재사용 */
.tag {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim); letter-spacing: -0.2px;
}

.tag.is-active { background: #1A1C20; border-color: #1A1C20; color: #fff; font-weight: 600; }

/* ---------- 시설정보 상단 (주소/길찾기/영업/전화) ---------- */
.info-block { padding: 20px 0; border-top: 1px solid var(--line-soft); }

.info-block:first-child { border-top: 0; padding-top: 6px; }

.info-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0;
}

.info-row__ico {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--text-dim); margin-top: 1px;
}

.info-row__ico svg { width: 20px; height: 20px; display: block; }

.info-row__body { flex: 1; min-width: 0; }

/* 주소 (도로명/지번/우편번호 라벨 + 복사) */
.addr-lines { display: flex; flex-direction: column; gap: 7px; }

.addr-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.addr-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 2px 6px;
}

.addr-text { font-size: 13.5px; letter-spacing: -0.2px; color: var(--text); }

.addr-copy {
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-mute); background: transparent; border: 0; padding: 2px 4px;
  text-decoration: underline; text-underline-offset: 2px;
}

.addr-copy:hover { color: #1A1C20; }

/* 찾아오는 길 (접기/펼치기) */
.directions {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; margin-top: 4px;
}

.directions__head {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 13px 14px; font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.3px;
}

.directions__head-ico { width: 17px; height: 17px; color: var(--text-dim); flex-shrink: 0; }

.directions__head-ico svg { width: 17px; height: 17px; display: block; }

.directions__summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.directions__chev { color: var(--text-mute); flex-shrink: 0; transition: transform .2s; }

.directions__chev svg { width: 18px; height: 18px; display: block; }

.directions.is-open .directions__chev { transform: rotate(180deg); }

.directions__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }

.directions__body-inner {
  padding: 0 14px 14px; font-size: 13px; color: var(--text-dim);
  letter-spacing: -0.2px; line-height: 1.7; white-space: pre-line;
  border-top: 1px solid var(--line-soft); margin-top: 0; padding-top: 12px;
}

/* 영업 상태 */
.biz-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: -0.2px; }

.biz-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

.biz-dot.open { background: var(--yellow); }

.biz-dot.closed { background: var(--text-mute); }

.biz-status__label { font-weight: 700; }

.biz-status.is-open .biz-status__label { color: #1A1C20; }

.biz-status.is-closed .biz-status__label { color: var(--text-mute); }

.biz-status__detail { color: var(--text-dim); }

/* 전화 */
.info-phone { font-size: 13.5px; letter-spacing: -0.2px; color: var(--text); text-decoration: none; }

.info-phone:hover { color: #1A1C20; }

/* 소개 (호스트가 게시판 작성한 것처럼 — 색상·굵기만 사용) */
.intro-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 6px; }

.intro-title::after {
  content: ''; display: block; width: 26px; height: 3px; background: rgba(255,255,255,0.35);
  border-radius: 2px; margin-top: 8px;
}

.intro-body {
  font-size: 14px; color: #4A4D55; letter-spacing: -0.2px; line-height: 1.85;
  margin-top: 14px;
}

.intro-body p { margin: 0 0 14px; }

.intro-body p:last-child { margin-bottom: 0; }

.intro-body b, .intro-body strong { font-weight: 800; color: #000; }

.intro-body .hl { color: #000; font-weight: 700; }

.intro-body .hl-red { color: #f56b6b; }

.intro-body .hl-blue { color: #4b8dff; }

.intro-body .dim { color: var(--text-dim); }

.intro-body .sm { font-size: 12.5px; color: #6B6E76; }

/* ---------- 하단 사업자 정보 네비 (푸터) ---------- */
.biz-footer {
  margin: 20px calc(-1 * var(--pad)) 0;
  padding: 18px var(--pad) 24px;
  background: var(--surface); border-top: 1px solid var(--line-soft);
  color: var(--text-mute); font-size: 12px; letter-spacing: -0.2px;
}

.biz-footer__head {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: transparent; border: 0; color: var(--text-dim);
  padding: 0 0 4px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.3px;
}

.biz-footer__head-text { flex: 1; min-width: 0; }

.biz-footer__chev { color: var(--text-mute); transition: transform .2s; }

.biz-footer__chev svg { width: 16px; height: 16px; display: block; }

.biz-footer.is-open .biz-footer__chev { transform: rotate(180deg); }

.biz-footer__terms {
  display: flex; align-items: center; gap: 10px; padding: 10px 0 0;
  font-size: 12px; color: var(--text-dim);
}

.biz-footer__terms span { cursor: default; opacity: .8; }

.biz-footer__terms .sep { color: var(--text-mute); opacity: .5; }

.biz-footer__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }

.biz-footer__body-inner {
  padding: 12px 0 0; font-size: 11.5px; color: var(--text-mute);
  letter-spacing: -0.2px; line-height: 1.6;
}

.biz-footer__body-inner p { margin: 0 0 4px; }

.biz-footer__body-inner p:last-child { margin: 0; }

.biz-footer__notice {
  margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--text-mute); letter-spacing: -0.2px; line-height: 1.55;
}

.biz-footer__brand {
  display: flex; align-items: center; gap: 6px; margin-top: 16px;
}

.biz-footer__brand img { height: 20px; width: auto; opacity: .85; }

.biz-footer__brand-name { font-size: 14px; font-weight: 800; color: var(--text-dim); letter-spacing: -0.4px; }

/* ---------- 편의시설 ---------- */
.fac__title { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 14px; }

.fac__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 4px; }

.fac__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }

.fac__ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}

.fac__ico svg { width: 20px; height: 20px; }

.fac__name { font-size: 11px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; word-break: keep-all; }

.fac__desc { font-size: 9.5px; color: var(--text-mute); letter-spacing: -0.3px; line-height: 1.25; margin-top: -2px; word-break: keep-all; }

/* ---------- 탭바 (시설정보 / 예약 / FAQ) ---------- */
.tabs {
  position: sticky; top: 47px; z-index: 30;
  display: flex; background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

.tab {
  flex: 1; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: transparent; border: 0; color: var(--text-dim);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.3px;
  padding: 14px 0; position: relative;
  transition: color .15s;
}

.tab.is-active { color: #1A1C20; }

.tab__ico { width: 15px; height: 15px; vertical-align: -2.5px; margin-right: 4px; }

.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: #1A1C20; transform: scaleX(0); transition: transform .18s;
}

.tab.is-active::after { transform: scaleX(1); }

.tabpanel[hidden] { display: none; }

/* ---------- FAQ (호스트 작성 · 아코디언) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
}

.faq-item__q {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 100%; background: transparent; border: 0; color: var(--text);
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 14px 15px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
}

.faq-item__badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line);
}

.faq-item__chev { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; color: var(--text-mute); transition: transform .18s; }

.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }

.faq-item__a {
  display: none; padding: 12px 15px 14px 47px; font-size: 13.5px; color: var(--text-dim);
  line-height: 1.7; letter-spacing: -0.2px; white-space: pre-line;
  border-top: 1px solid var(--line-soft); background: rgba(0,0,0,0.02);
}

.faq-item.is-open .faq-item__a { display: block; }

/* ---------- 톡톡 (호스트 1:1 채팅) ---------- */
.talk-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }

.talk-head__avatar {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}

.talk-head__name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.3px; }

.talk-head__sub { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; letter-spacing: -0.2px; }

.talk-msgs { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; flex: 1; overflow-y: auto; min-height: 0; background: var(--bg); }

.talk-msg { display: flex; flex-direction: column; max-width: 80%; }

.talk-msg.host { align-self: flex-start; align-items: flex-start; }

.talk-msg.me { align-self: flex-end; align-items: flex-end; }

.talk-msg__bubble {
  padding: 10px 13px; font-size: 13.5px; line-height: 1.6;
  letter-spacing: -0.2px; white-space: pre-line; word-break: break-word;
}

.talk-msg.host .talk-msg__bubble { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); border-radius: 4px 14px 14px 14px; }

.talk-msg.me .talk-msg__bubble { background: #1A1C20; color: #fff; border-radius: 14px 4px 14px 14px; }

.talk-msg__time { font-size: 10.5px; color: var(--text-mute); margin-top: 4px; padding: 0 2px; }

/* 채팅 패널 하단 메시지 입력바 */
.talkbar {
  border-top: 1px solid var(--line-soft); background: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: center;
}

.talkbar__input {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 14px; padding: 11px 15px;
  border-radius: 999px; outline: none; letter-spacing: -0.2px;
}

.talkbar__input::placeholder { color: var(--text-mute); }

.talkbar__input:focus { border-color: rgba(0,0,0,0.35); }

.talkbar__send {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px; border: 0;
  cursor: pointer; background: #1A1C20; color: #fff; display: grid; place-items: center;
  transition: background-color .12s;
}

.talkbar__send:hover { background: #33363E; }

.talkbar__send svg { width: 18px; height: 18px; }

/* 비회원: 입력창 대신 카카오 가입 유도 */
.talkbar { flex-direction: column; align-items: stretch; }

.talkbar__row { display: flex; gap: 8px; align-items: center; }

.talkbar__join { display: flex; flex-direction: column; gap: 8px; }

.talkbar__join-cap { margin: 0; text-align: center; font-size: 11.5px; color: var(--text-mute); letter-spacing: -0.2px; }

/* 데모 전용: 비회원/회원 상태 전환 토글 (실서비스에서는 제거) */
.demo-toggle { margin-left: auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.demo-toggle__cap { font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.4px; }

.demo-toggle__seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }

.demo-toggle__btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: transparent;
  color: var(--text-dim); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: -0.2px;
  padding: 4px 11px; border-radius: 999px; transition: background-color .12s, color .12s;
}

.demo-toggle__btn.on { background: #1A1C20; color: #fff; }

.kakao-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FEE500; color: #191919; border: 0; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; letter-spacing: -0.3px; padding: 13px;
  transition: background-color .12s;
}

.kakao-btn:hover { background: #f4dc00; }

/* 카카오 가입 시트 (전화번호 인증 필수) */
.authsheet {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity .18s;
}

.authsheet[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.authsheet__box {
  width: 100%; max-width: var(--maxw); background: #FFFFFF;
  border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(12px); transition: transform .18s;
}

.authsheet[aria-hidden="false"] .authsheet__box { transform: none; }

.authsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

.authsheet__title { font-size: 16px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }

.authsheet__x { appearance: none; cursor: pointer; background: transparent; border: 0; color: var(--text-dim); width: 30px; height: 30px; display: grid; place-items: center; }

.authsheet__x svg { width: 18px; height: 18px; }

.authsheet__sub { font-size: 12.5px; color: var(--text-dim); letter-spacing: -0.2px; line-height: 1.6; margin: 0 0 16px; }

.authsheet .frow { display: flex; gap: 8px; }

.authsheet .frow input { flex: 1; min-width: 0; }

.mini-btn {
  flex-shrink: 0; cursor: pointer; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); font: inherit;
  font-size: 13px; font-weight: 600; padding: 0 15px; border-radius: var(--radius-sm);
  letter-spacing: -0.2px; white-space: nowrap;
}

.mini-btn:hover { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

/* ---------- 카카오싱크 동의 화면 (시뮬레이션 · 실제로는 카카오가 호스팅) ---------- */
.ksync { position: fixed; inset: 0; z-index: 95; overflow-y: auto; background: #FDFAF2; display: none; }

.ksync[aria-hidden="false"] { display: block; }

.ksync__wrap { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 96px; color: #191919; font-family: inherit; }

.ksync__x {
  position: absolute; top: 12px; right: 12px; appearance: none; cursor: pointer;
  background: transparent; border: 0; color: #999; font-size: 17px; width: 32px; height: 32px;
}

.ksync__logo { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin: 8px 0 18px; }

.ksync__card { background: #fff; border: 1px solid #F0EDE4; border-radius: 16px; padding: 16px; margin-bottom: 12px; }

.ksync__ch { display: flex; align-items: center; gap: 10px; }

.ksync__ch-logo { height: 26px; display: block; }

.ksync__ch-ico { width: 34px; height: 34px; border-radius: 999px; background: #191919; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }

.ksync__ch-name { display: flex; align-items: baseline; gap: 7px; }

.ksync__ch-name b { font-size: 15px; letter-spacing: -0.3px; }

.ksync__ch-name small { font-size: 11.5px; color: #999; }

.ksync__acc { margin-top: 12px; background: #F7F6F2; border-radius: 10px; padding: 11px 13px; font-size: 13px; color: #333; display: flex; justify-content: space-between; align-items: center; }

.ksync__acc-chg { font-size: 12px; color: #999; }

.ksync__desc { font-size: 12.5px; color: #666; line-height: 1.6; margin: 0 0 2px; }

.ksync__item { display: flex; gap: 9px; padding: 12px 0; border-bottom: 1px solid #F4F2EC; font-size: 13px; line-height: 1.5; letter-spacing: -0.2px; align-items: flex-start; }

.ksync__item:last-of-type { border-bottom: 0; }

.ksync__item .chk { color: #191919; font-weight: 800; flex-shrink: 0; }

.ksync__item small { display: block; color: #999; font-size: 11.5px; margin-top: 3px; }

.ksync__note { font-size: 11px; color: #A5A29A; line-height: 1.65; margin: 10px 0 0; }

.ksync__ok {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw); appearance: none; cursor: pointer; border: 0;
  background: #FEE500; color: #191919; font: inherit; font-size: 15px; font-weight: 800;
  padding: 17px 16px calc(17px + env(safe-area-inset-bottom)); letter-spacing: -0.3px;
}

.ksync__ok:hover { background: #f4dc00; }

.section { padding: 22px 0; border-top: 1px solid var(--line-soft); }

.section:first-of-type { border-top: 0; }

.tabpanel > .section:first-child { border-top: 0; }

.section__title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 14px; }

.section__title .req { color: var(--yellow); margin-left: 3px; }

/* ---------- 방 선택 (인라인 아코디언) ---------- */
.rooms { display: flex; flex-direction: column; gap: 10px; }

.room {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: border-color .15s, background-color .15s;
  background: var(--surface);
}

.room.is-selected { border-color: #1A1C20; background: rgba(0,0,0,0.03); }

.room__head {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 14px 14px; font: inherit;
}

.room__radio {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: border-color .15s;
}

.room.is-selected .room__radio { border-color: #1A1C20; }

.room.is-selected .room__radio::after {
  content: ''; width: 10px; height: 10px; border-radius: 999px; background: #1A1C20;
}

.room__info { flex: 1; min-width: 0; }

.room__nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.room__name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.3px; }

.room__price { text-align: right; flex-shrink: 0; white-space: nowrap; }

.room__price b { font-size: 13px; font-weight: 800; color: #1A1C20; letter-spacing: -0.3px; }

.room__price i { font-size: 10.5px; font-style: normal; color: var(--text-mute); margin-left: 1px; }

.room__chev { width: 18px; height: 18px; color: var(--text-mute); flex-shrink: 0; transition: transform .2s; }

.room.is-open .room__chev { transform: rotate(180deg); }

.room__detail {
  display: none;
  border-top: 1px solid var(--line-soft);
  padding: 14px;
}

.room.is-open .room__detail { display: block; }

.room__photos {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px;
  padding: 0 0 2px; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.room__photos:empty { display: none; }

/* 사진 없으면 영역 자체 숨김 */
.room__photos::-webkit-scrollbar { display: none; }

.room__photos > picture {
  flex: 0 0 auto; scroll-snap-align: start;
  /* 한 번에 한 장 보이도록 넓게 잡되 높이는 낮춰서 세로 공간 절약 */
  width: min(85%, 320px); height: 128px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft); background: #E9EBEF;
  display: block; overflow: hidden;
}

.room__photos > picture > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.room__desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; margin: 0 0 14px; letter-spacing: -0.2px; }

.spec { margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }

.spec__kit { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.2px; }

.spec__row { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }

.spec__row b { color: var(--text); font-weight: 600; margin-right: 4px; }

.facts {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 4px 14px;
}

.fact {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14px;
}

.fact:first-child { border-top: 0; }

.fact__k { color: var(--text-dim); }

.fact__v { color: #1A1C20; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

.area-toggle {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 999px; padding: 3px 9px; transition: color .12s, border-color .12s;
}

.area-toggle:hover { color: #1A1C20; border-color: rgba(0,0,0,0.35); }

/* ---------- 달력 ---------- */
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.cal__title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; }

.cal__nav { appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); display: grid; place-items: center; transition: border-color .12s, color .12s; }

.cal__nav:hover:not(:disabled) { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__nav svg { width: 16px; height: 16px; }

.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }

.cal__dow { text-align: center; font-size: 11px; color: var(--text-mute); padding: 4px 0; font-weight: 600; }

.cal__dow.sun { color: #ff7676; }

.cal__dow.sat { color: #7aa8ff; }

.cal__cell {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  aspect-ratio: 1; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; border-radius: var(--radius-sm);
  display: grid; place-items: center; transition: background-color .12s, color .12s;
}

.cal__cell.empty { visibility: hidden; }

.cal__cell:disabled { color: var(--text-mute); opacity: .35; cursor: not-allowed; }

.cal__cell:not(:disabled):hover { background: var(--surface-2); }

.cal__cell.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1px var(--line); }

.cal__cell.is-sel { background: var(--yellow); color: #fff; font-weight: 700; }

/* ---------- 시간 선택 ---------- */
.time-hint { font-size: 12.5px; color: var(--text-mute); margin: 0 0 12px; line-height: 1.6; letter-spacing: -0.2px; }

/* 선택 중 시작/종료를 스크롤해도 보이게 하는 sticky 바 */
.sel-sticky {
  position: sticky;
  top: 53px;                 /* 헤더 높이만큼 */
  z-index: 30;
  display: none;
  margin: 0 -16px 14px;
  padding: 10px 16px;
  background: rgba(232,250,248,0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(24,196,177,0.35);
  border-bottom: 1px solid rgba(24,196,177,0.35);
  align-items: center; justify-content: space-between; gap: 10px;
}

.sel-sticky.is-shown { display: flex; }

.sel-sticky__info { min-width: 0; }

.sel-sticky__label { font-size: 10.5px; color: #0E7568; font-weight: 700; letter-spacing: 0.3px; }

.sel-sticky__val { font-size: 13.5px; font-weight: 600; color: #1A1C20; margin-top: 1px; letter-spacing: -0.2px; }

.sel-sticky__val .dim { color: var(--text-mute); font-weight: 500; }

.sel-sticky__reset {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(14,117,104,0.35); color: #0E7568;
  font-size: 12px; padding: 6px 12px; border-radius: 999px; transition: border-color .12s, color .12s;
}

.sel-sticky__reset:hover { border-color: var(--yellow); color: #0B5F55; }

.daygroup { margin-bottom: 18px; }

.daygroup__date { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 0 0 8px; }

/* 시간대 요금 안내 배너 (반복되는 가격을 슬롯에서 뺀 대신 여기로) */
.rate-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 0 0 12px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-dim); letter-spacing: -0.2px;
}

.rate-hint svg { width: 14px; height: 14px; color: var(--text-mute); flex-shrink: 0; }

.rate-hint b { color: var(--text); font-weight: 700; }

/* 슬롯 범례 (상태 안내) */
.slot-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 2px 10px; font-size: 11.5px; color: var(--text-mute); letter-spacing: -0.2px;
}

.slot-legend__item { display: flex; align-items: center; gap: 5px; }

.slot-legend__box {
  width: 12px; height: 12px; border-radius: 3px;
}

.slot-legend__box.available { background: var(--surface); border: 1px solid var(--line); }

.slot-legend__box.selected  { background: var(--yellow); }

.slot-legend__box.booked    { background: var(--booked); }

.slots {
  display: grid; grid-template-columns: repeat(4, 1fr);
  row-gap: 6px; column-gap: 3px;
}

.slot {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  position: relative;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); padding: 9px 2px; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 42px;
  transition: background-color .1s, border-color .1s, color .1s;
}

.slot__t { font-size: 13px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }

/* 피크 시간대: 추가요금 표기 (+1,000 등) */
.slot__peak {
  font-size: 9.5px; font-weight: 700; color: #E8930C;
  letter-spacing: -0.2px; line-height: 1;
}

.slot:not(:disabled):hover { border-color: rgba(0,0,0,0.35); }

/* 선택됨: 민트 */
.slot.in-range, .slot.edge {
  background: var(--yellow); border-color: var(--yellow); color: #fff;
  font-weight: 700; z-index: 1;
}

.slot.in-range { background: rgba(24,196,177,0.45); border-color: rgba(24,196,177,0.45); color: #0B5F55; }

.slot.edge .slot__t { font-weight: 800; color: #fff; }

.slot.edge .slot__peak { color: rgba(255,255,255,0.9); }

.slot.in-range .slot__peak { color: rgba(11,95,85,0.9); }

/* 인접한 슬롯 사이 갭을 이어주는 커넥터 */
.slot.link-right::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  right: -4px; width: 4px; background: rgba(24,196,177,0.45); z-index: 0;
}

.slot.link-left::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: -4px; width: 4px; background: rgba(24,196,177,0.45); z-index: 0;
}

.slot.link-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.slot.link-left  { border-top-left-radius: 0;  border-bottom-left-radius: 0; }

/* 예약 불가 (다른 손님이 예약함): 사선 패턴 + "예약됨" 뱃지 */
.slot.booked {
  background:
    repeating-linear-gradient(45deg,
      var(--booked) 0, var(--booked) 4px,
      rgba(0,0,0,0.05) 4px, rgba(0,0,0,0.05) 6px);
  border-color: transparent; color: var(--text-mute); cursor: not-allowed;
}

.slot.booked .slot__t { text-decoration: none; opacity: 1; color: var(--text-mute); }

.slot.booked::after {
  content: '예약됨'; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 700; color: var(--text-mute); letter-spacing: -0.2px;
  background: rgba(0,0,0,0.07); padding: 1px 4px; border-radius: 3px;
}

/* 지난 시간: 그냥 회색 처리, 클릭 불가 */
.slot.past {
  background: transparent; border-color: var(--line-soft);
  color: var(--text-mute); cursor: not-allowed; opacity: .4;
}

.slot.past .slot__t { text-decoration: line-through; }

.sel-summary {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.sel-summary b { color: #1A1C20; font-weight: 700; }

.sel-reset { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  background: transparent; border: 0; color: var(--text-dim); font-size: 12px; text-decoration: underline; }

.placeholder-msg { font-size: 13px; color: var(--text-mute); padding: 8px 0; }

.more-days {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  width: 100%; margin: 4px 0 4px; padding: 12px;
  background: var(--surface); border: 1px dashed var(--line); color: var(--text-dim);
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  transition: border-color .12s, color .12s;
}

.more-days:hover { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

.more-days-max { text-align: center; font-size: 12.5px; color: var(--text-mute); margin: 8px 0; }

/* ---------- 인원 ---------- */
.counter {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
}

.counter__label { font-size: 14.5px; }

.counter__sub { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; }

.counter__ctrls { display: flex; align-items: center; gap: 6px; }

.counter__btn { appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); display: grid; place-items: center;
  transition: border-color .1s, color .1s; }

.counter__btn:hover:not(:disabled) { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

.counter__btn:disabled { opacity: .4; cursor: not-allowed; }

.counter__btn svg { width: 14px; height: 14px; }

.counter__val { width: 40px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.over-note { font-size: 12px; color: var(--text-dim); margin: 8px 2px 0; }

.over-note b { color: #ffb84d; }

/* ---------- 환불 규정 ---------- */
.refund { display: flex; flex-direction: column; gap: 8px; }

.refund__row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }

.refund__when { flex-shrink: 0; width: 96px; color: var(--text-dim); }

.refund__what { color: var(--text); }

.refund__what.no { color: #ff7676; }

/* ---------- 하단 결제 바 ---------- */
.paybar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--maxw); z-index: 50;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}

.paybar__summary {
  font-size: 12px; color: var(--text-dim); letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 0 0;
}

.paybar__summary b { color: var(--text); font-weight: 700; }

.paybar__summary.is-empty { color: var(--text-mute); }

.paybar__main { display: flex; align-items: center; gap: 12px; }

.paybar__total { flex: 1; min-width: 0; }

.paybar__total .k { font-size: 11.5px; color: var(--text-mute); }

.paybar__total .v { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }

.paybar__total .v small { font-size: 13px; font-weight: 600; color: var(--text-dim); }

.pay-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  background: var(--yellow); border: 0; color: #1a1a1a;
  font-size: 16px; font-weight: 700; padding: 14px 26px; border-radius: var(--radius);
  white-space: nowrap; transition: background-color .12s, transform .04s, opacity .12s;
}

.pay-btn:hover { background: var(--yellow-press); }

.pay-btn:active { transform: translateY(1px); }

.pay-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 지도 모달 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}

.modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.modal__box {
  width: 100%; max-width: 460px; background: #FFFFFF;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  transform: translateY(12px); transition: transform .2s;
  display: flex; flex-direction: column; max-height: 86vh;
}

.modal[aria-hidden="false"] .modal__box { transform: translateY(0); }

.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }

.modal__title { font-size: 15px; font-weight: 700; margin: 0; }

.modal__close { appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--text);
  display: grid; place-items: center; }

.modal__close:hover { background: var(--surface); }

.modal__close svg { width: 18px; height: 18px; }

.modal__map {
  width: 100%; aspect-ratio: 4 / 3; background: #E2E5EA; position: relative; overflow: hidden;
}

#mapLeaflet { width: 100%; height: 100%; background: #E2E5EA; }

/* Leaflet 핀 (테마 노란색 SVG) */
.map-marker svg { width: 32px; height: 32px; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); display: block; }

/* Leaflet 다크 톤 약간 */
.leaflet-container { font-family: inherit; }

.leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,0.7); }

.modal__addr { padding: 13px 14px; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }

.modal__addr svg { width: 15px; height: 15px; color: var(--text-dim); flex-shrink: 0; }

.modal__open {
  margin: 0 14px 14px; display: flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-weight: 600; font-size: 13.5px;
  padding: 11px; border-radius: 8px; transition: border-color .12s, color .12s;
}

.modal__open:hover { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

.modal__open svg { width: 16px; height: 16px; }

/* ========== 결제 플로우 모달 ========== */
.checkout {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}

.checkout[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

.checkout__sheet {
  width: 100%; max-width: var(--maxw); background: #FFFFFF;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  max-height: 92vh; transform: translateY(24px); transition: transform .24s cubic-bezier(.2,.8,.2,1);
}

.checkout[aria-hidden="false"] .checkout__sheet { transform: translateY(0); }

.checkout__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }

.checkout__back, .checkout__x {
  appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent; border: 0; color: var(--text);
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; flex-shrink: 0;
}

.checkout__back:hover, .checkout__x:hover { background: var(--surface); }

.checkout__back svg, .checkout__x svg { width: 19px; height: 19px; }

.checkout__back[hidden] { visibility: hidden; }

.checkout__title { flex: 1; text-align: center; font-size: 15.5px; font-weight: 700; margin: 0; }

/* 진행 단계 점 */
.steps-dots { display: flex; gap: 5px; justify-content: center; padding: 12px 0 4px; }

.steps-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: background-color .2s, width .2s; }

.steps-dots i.on { background: #1A1C20; width: 18px; }

.steps-dots i.done { background: rgba(0,0,0,0.35); }

.checkout__body { overflow-y: auto; padding: 8px 18px 18px; flex: 1; scrollbar-width: none; }

.checkout__body::-webkit-scrollbar { display: none; }

.step { display: none; }

.step.active { display: block; animation: stepin .22s ease; }

@keyframes stepin { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.step__title { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; margin: 6px 0 4px; }

.step__sub { font-size: 13px; color: var(--text-dim); margin: 0 0 20px; line-height: 1.6; }

.field { margin-bottom: 16px; }

.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }

.field input {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 15px; padding: 13px 14px; border-radius: 10px;
}

.field input:focus { outline: none; border-color: rgba(0,0,0,0.35); }

.field input::placeholder { color: var(--text-mute); }

.field-row { display: flex; gap: 8px; align-items: stretch; }

.field-row input { flex: 1; min-width: 0; }

.inline-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-size: 13.5px; font-weight: 600; padding: 0 16px; border-radius: 10px; white-space: nowrap;
  transition: border-color .12s, color .12s, background-color .12s;
}

.inline-btn:hover:not(:disabled) { border-color: rgba(0,0,0,0.35); color: #1A1C20; }

.inline-btn.ok { background: rgba(46,160,80,0.12); border-color: rgba(46,160,80,0.5); color: #1F9D4D; }

.inline-btn:disabled { opacity: .5; cursor: not-allowed; }

.field-msg { font-size: 12px; margin: 7px 2px 0; color: var(--text-mute); }

.field-msg.ok { color: #1F9D4D; }

.field-msg.err { color: #ff7676; }

.otp-row { display: flex; gap: 8px; margin-top: 4px; }

.otp-row input { flex: 1; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 4px; font-variant-numeric: tabular-nums; }

.summary-box { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }

.summary-box .srow { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 5px 0; }

.summary-box .srow .k { color: var(--text-mute); }

.summary-box .srow .v { color: var(--text); font-weight: 500; text-align: right; }

.summary-box .stotal { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 10px; }

.summary-box .stotal .v { color: var(--yellow); font-weight: 800; font-size: 16px; }

.pay-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }

.pay-method {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  transition: border-color .12s;
}

.pay-method:hover { border-color: rgba(0,0,0,0.35); }

.pay-method input { accent-color: var(--yellow); width: 18px; height: 18px; }

.pay-method .pm-name { font-size: 14.5px; font-weight: 600; }

.pay-method .pm-sub { font-size: 11.5px; color: var(--text-mute); }

.hecto-badge { margin-left: auto; font-size: 10.5px; color: var(--text-mute); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; }

.processing { text-align: center; padding: 40px 0; }

.spinner {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 999px;
  border: 4px solid var(--line); border-top-color: #1A1C20; animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.processing p { font-size: 14px; color: var(--text-dim); margin: 4px 0; }

.result-icon { width: 72px; height: 72px; margin: 24px auto 16px; border-radius: 999px; display: grid; place-items: center; }

.result-icon.success { background: rgba(46,160,80,0.12); }

.result-icon.success svg { width: 38px; height: 38px; color: #4ade80; }

.result-icon.key { background: rgba(0,0,0,0.06); }

.result-icon.key svg { width: 36px; height: 36px; color: #1A1C20; }

.notice-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; margin: 14px 0; }

.notice-card .nc-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }

.notice-card .nc-head svg { width: 17px; height: 17px; color: var(--text-dim); }

.notice-card .nc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }

.notice-card .nc-row .k { color: var(--text-mute); }

.alimtalk { display: flex; gap: 10px; align-items: flex-start; background: #fee500; color: #191600; border-radius: 12px; padding: 13px 14px; margin: 14px 0; }

.alimtalk svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }

.alimtalk .at-t { font-size: 13px; font-weight: 700; }

.alimtalk .at-d { font-size: 12px; margin-top: 2px; opacity: .8; }

.keypad-box { text-align: center; }

.door-code {
  font-size: 34px; font-weight: 800; letter-spacing: 8px; font-variant-numeric: tabular-nums;
  color: #1A1C20; background: var(--surface); border: 1px dashed var(--line);
  border-radius: 12px; padding: 18px; margin: 8px 0 6px;
}

.checkout__foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }

.cta-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; width: 100%;
  background: var(--yellow); border: 0; color: #1a1a1a; font-size: 16px; font-weight: 700;
  padding: 15px; border-radius: 12px; transition: background-color .12s, opacity .12s;
}

.cta-btn:hover:not(:disabled) { background: var(--yellow-press); }

.cta-btn:disabled { opacity: .4; cursor: not-allowed; }

.cta-btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translate(-50%, 12px);
  background: #1A1C20; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; z-index: 200; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- 톡톡 플로팅 위젯 ---------- */
.chatw__launcher {
  position: fixed; right: 20px; bottom: 96px; z-index: 60;
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 24px 12px 12px; cursor: pointer; font: inherit;
  box-shadow: 0 8px 28px rgba(20,24,31,0.18);
  transition: border-color .12s, box-shadow .12s;
}

.chatw__launcher:hover { border-color: var(--yellow); box-shadow: 0 10px 34px rgba(20,24,31,0.24); }

.chatw__avatar {
  position: relative; width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background: var(--yellow); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; overflow: hidden;
}

.chatw__greet { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; letter-spacing: -0.2px; color: var(--text-dim); }

.chatw__greet b { font-size: 15px; color: var(--text); letter-spacing: -0.3px; }

.chatw__panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: 384px; max-width: calc(100vw - 24px);
  height: 580px; max-height: calc(100vh - 60px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(20,24,31,0.24);
  display: flex; flex-direction: column; overflow: hidden;
}

.chatw__panel[hidden] { display: none; }

.chatw__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line-soft); }

.chatw__close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--text-mute); cursor: pointer; font-size: 14px;
}

.chatw__close:hover { background: var(--surface-2); color: var(--text); }

.talkbar__attach {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--text-dim);
  cursor: pointer; display: grid; place-items: center; transition: border-color .12s, color .12s;
}

.talkbar__attach:hover { border-color: var(--text-dim); color: var(--text); }

.talkbar__attach svg { width: 18px; height: 18px; }

.talk-msg__img { max-width: 200px; max-height: 240px; border-radius: 12px; border: 1px solid var(--line-soft); display: block; }

@media (max-width: 640px) {
  .chatw__panel { right: 10px; left: 10px; width: auto; bottom: 10px; height: 76vh; }
  .chatw__launcher { right: 14px; bottom: 96px; }
}

/* PC: 탭 → 연속 스크롤 문서 (섹션 사이 구분선) */
@media (min-width: 1024px) {
  .tabpanel { scroll-margin-top: 104px; }
  .tabpanel + .tabpanel { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 20px; }
}

/* ---------- TOP 버튼 ---------- */
.top-btn {
  display: none; position: fixed; right: 24px; bottom: 186px; z-index: 59;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--text-dim); cursor: pointer;
  box-shadow: 0 4px 16px rgba(20,24,31,0.14);
  align-items: center; justify-content: center;
  transition: color .12s, border-color .12s;
}

.top-btn.is-shown { display: flex; }

.top-btn:hover { color: var(--text); border-color: var(--text-dim); }

.top-btn svg { width: 20px; height: 20px; }

a.tab, span.tab { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }