/* ============================================================
   NODE Space — 예약 폼
   ============================================================ */

.book-wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 560px) { .book-wrap { padding: 0 18px; } }

/* 본문(좌) + 요약(우) 2단.
   요약을 아래에 고정하면 내용을 가려서, 넓은 화면에서는 우측에 따라다니게 둔다. */
.book-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px; align-items: start;
}
@media (max-width: 1040px) { .book-layout { grid-template-columns: 1fr; } }

.book-head { padding: calc(var(--nav-h) + 56px) 0 34px; }
.book-head h1 {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-weight: 800;
  font-size: clamp(28px, 5vw, 46px); line-height: 1.05; letter-spacing: -.02em;
}
.book-head p { color: var(--mute); margin-top: 12px; font-size: 15px; }

.step {
  border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 28px;
  margin-bottom: 18px; background: linear-gradient(180deg, rgba(91,191,148,0.025), transparent);
}
.step > h2 {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 11px; margin-bottom: 20px;
}
.step > h2 .n {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--signal-dim); border: 1px solid rgba(91,191,148,.45); color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-family: 'Archivo', 'Noto Sans KR', sans-serif;
}
.step > h2 .sub {
  margin-left: auto; font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400; font-size: 12.5px; color: var(--mute-2);
}

/* 입력 */
.f-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
@media (max-width: 620px) { .f-grid { grid-template-columns: 1fr; } }
.f-grid .full { grid-column: 1 / -1; }

.f { display: flex; flex-direction: column; gap: 7px; }
.f > label { font-size: 12.5px; color: var(--mute); }
.f > label .req { color: var(--signal); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"],
.f input[type="date"], .f input[type="number"], .f select, .f textarea {
  background: rgba(12,15,19,.5); border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 12px 14px; color: var(--paper); font-family: inherit; font-size: 14.5px; font-weight: 400;
  transition: border-color .2s, box-shadow .2s;
}
.f textarea { resize: vertical; min-height: 92px; }
.f input::placeholder, .f textarea::placeholder { color: rgba(236,238,240,.26); }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim);
}
.f .hint { font-size: 12px; color: var(--mute-2); }
.f-row { display: flex; align-items: center; gap: 9px; }
.f-row select { flex: 1; }
.f-row .sep { color: var(--mute-2); }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: 13.5px; color: var(--mute); transition: all .2s;
}
.seg label:hover { border-color: var(--signal); }
.seg input { accent-color: var(--signal); margin: 0; }
.seg label:has(input:checked) { border-color: var(--signal); background: var(--signal-soft); color: var(--paper); }

/* 회의실 선택 */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 11px; }
.pick label {
  display: block; padding: 14px 15px; border: 1px solid var(--line-strong);
  border-radius: 5px; cursor: pointer; transition: all .2s; background: rgba(12,15,19,.3);
}
.pick label:hover { border-color: var(--signal); }
.pick label:has(input:checked) { border-color: var(--signal); background: var(--signal-soft); }
.pick label.busy { opacity: .42; cursor: not-allowed; }
.pick label.busy:hover { border-color: var(--line-strong); }
.pick input { accent-color: var(--signal); margin-right: 8px; }
.pick .rn { font-size: 14px; font-weight: 500; }
.pick .rp { font-size: 12px; color: var(--mute-2); margin-top: 5px; }
.pick .rp.busy-txt { color: var(--danger); }

/* ── 회의실 크기 툴팁 ─────────────────────────────
   예약 단계에서 "이 방이 얼마나 큰가"를 확인하려고 목록 페이지로
   되돌아가지 않도록, 카드 안에서 규격을 바로 보여준다.            */
.pick label { position: relative; padding-right: 34px; }   /* ⓘ 자리 확보 */

.rinfo {
  position: absolute; top: 10px; right: 9px;
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--mute-2); cursor: help;
  transition: color .18s, background .18s;
}
.rinfo:hover, .rinfo[aria-expanded="true"] { color: var(--signal); background: var(--signal-soft); }
.rinfo:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.busy .rinfo { display: none; }

.rtip {
  position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 30;
  width: max-content; max-width: 254px;
  transform: translateX(-50%) translateY(4px);
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; text-align: left;
  background: #10141a; border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* 말풍선 꼬리 */
.rtip::after {
  content: ""; position: absolute; top: 100%; left: var(--tail, 50%);
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--line-strong);
}
.rinfo:hover + .rtip,
.rinfo:focus-visible + .rtip,
.rinfo[aria-expanded="true"] + .rtip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* 툴팁이 열린 카드를 이웃 카드 위로 올린다 */
.pick label:has(.rinfo:hover),
.pick label:has(.rinfo:focus-visible),
.pick label:has(.rinfo[aria-expanded="true"]) { z-index: 31; }

/* 화면 밖으로 나가는 가장자리 카드는 JS 가 붙여준 클래스로 정렬을 바꾼다 */
.rtip.at-left  { left: 0;    transform: translateX(0) translateY(4px); }
.rtip.at-right { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.rinfo:hover + .rtip.at-left,  .rinfo:focus-visible + .rtip.at-left,
.rinfo[aria-expanded="true"] + .rtip.at-left  { transform: translateX(0) translateY(0); }
.rinfo:hover + .rtip.at-right, .rinfo:focus-visible + .rtip.at-right,
.rinfo[aria-expanded="true"] + .rtip.at-right { transform: translateX(0) translateY(0); }
/* 위쪽 공간이 부족하면 아래로 */
.rtip.below { bottom: auto; top: calc(100% + 9px); }
.rtip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--line-strong); }

.rtip-h {
  font-size: 12.5px; font-weight: 600; color: var(--paper);
  padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.rtip-h em {
  font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--signal);
  border: 1px solid var(--signal-dim); border-radius: 20px; padding: 1px 7px; white-space: nowrap;
}
.rtip-r { display: flex; align-items: baseline; gap: 10px; font-size: 12px; line-height: 1.45; }
.rtip-r i { font-style: normal; color: var(--mute-2); flex: 0 0 52px; }
.rtip-r u { text-decoration: none; color: var(--paper); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .rtip { transition: none; } }

.pick-all {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12.5px; color: var(--mute); cursor: pointer;
  background: none; border: 1px dashed var(--line-strong); border-radius: 4px;
  padding: 7px 13px; font-family: inherit; transition: all .2s;
}
.pick-all:hover { border-color: var(--signal); color: var(--signal); }

.wall-line {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 13px; color: var(--mute); cursor: pointer;
}
.wall-line input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--signal); flex-shrink: 0; }

/* ── 행사 목적 ────────────────────────────── */
.purposes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
@media (max-width: 860px) { .purposes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .purposes { grid-template-columns: 1fr; } }

.purpose {
  display: block; padding: 15px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: rgba(12,15,19,.3); transition: border-color .2s, background .2s;
}
.purpose:hover { border-color: var(--signal); }
.purpose:has(input:checked) { border-color: var(--signal); background: var(--signal-soft); }
.purpose:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.purpose input { position: absolute; opacity: 0; pointer-events: none; }
.purpose b { display: block; font-size: 14px; font-weight: 600; }
.purpose span { display: block; font-size: 11.5px; color: var(--mute-2); margin-top: 4px; line-height: 1.5; }

.pdetail { margin-top: 16px; }
.pdetail[hidden] { display: none; }
.sublabel {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--mute); margin-bottom: 9px;
}
.sublabel em { font-style: normal; font-size: 11px; color: var(--mute-2); }

.pchips { display: flex; gap: 9px; flex-wrap: wrap; }
.pchip { position: relative; cursor: pointer; }
.pchip input { position: absolute; opacity: 0; pointer-events: none; }
.pchip span {
  display: block; padding: 8px 15px; font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: 20px;
  color: var(--mute); transition: all .2s;
}
.pchip:hover span { border-color: var(--signal); color: var(--paper); }
.pchip input:checked + span { border-color: var(--signal); background: var(--signal-soft); color: var(--signal); }
.pchip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }

.f-narrow { max-width: 220px; }

/* 부가서비스 */
.ad-cat { margin-bottom: 16px; }
.ad-cat > h3 {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--mute-2); margin-bottom: 9px;
}
.ad-list { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.ad-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ad-row:first-child { border-top: 0; }
.ad-row.on { background: var(--signal-soft); }
.ad-row > input[type=checkbox] {
  width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--signal); cursor: pointer;
}
.ad-row .body { flex: 1; min-width: 0; }
.ad-row .nm { font-size: 13.5px; color: var(--paper); cursor: pointer; }
.ad-row .meta { font-size: 12px; color: var(--mute-2); margin-top: 2px; }
.ad-row .note { font-size: 12px; color: #d0a860; margin-top: 3px; }
.ad-row .amt {
  margin-left: auto; text-align: right; flex-shrink: 0; min-width: 92px; align-self: center;
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--signal);
}
.ad-row .amt.zero { color: var(--mute-2); font-weight: 400; }

.qwrap { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.qwrap.hide { display: none; }
.qbox { display: inline-flex; align-items: center; gap: 6px; }
.qbox.off { display: none; }
.qbox .ql { font-size: 12px; color: var(--mute-2); min-width: 60px; }
.qbox input {
  width: 62px; padding: 6px 8px; text-align: center;
  background: rgba(12,15,19,.6); border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--paper); font-family: inherit; font-size: 13px;
}
.qbox input:focus { outline: none; border-color: var(--signal); }
.qbox .qu { font-size: 12px; color: var(--mute-2); }

.free-note {
  margin-top: 12px; padding: 11px 14px; border-radius: 5px;
  background: var(--signal-soft); border: 1px solid var(--signal-dim);
  font-size: 12.5px; color: var(--mute); line-height: 1.7;
}
.free-note b {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 11px; letter-spacing: .03em;
  font-weight: 500; color: var(--signal); margin-right: 8px;
}

/* 합계 — 넓은 화면에서는 우측에 따라다닌다 */
.total {
  position: sticky; top: calc(var(--nav-h) + 24px); z-index: 20;
  background: rgba(34,39,43,.9); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 22px 22px; margin-bottom: 40px;
}
.total > h3 {
  font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2);
  padding-bottom: 13px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.total .picked {
  font-size: 12.5px; color: var(--mute); line-height: 1.7;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.total .picked.none { color: var(--mute-2); }
.total .row { display: flex; align-items: center; font-size: 13.5px; padding: 4px 0; }
.total .row .k { color: var(--mute); }
.total .row .k small { color: var(--mute-2); margin-left: 5px; }
.total .row .v { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--paper); }
.total .row.grand { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 13px; }
.total .row.grand .k { color: var(--paper); font-weight: 500; }
.total .row.grand .v { font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 22px; font-weight: 700; color: var(--signal); }
.total .vat { font-size: 12px; color: var(--mute-2); margin-top: 8px; }
.total .go { margin-top: 18px; display: flex; gap: 10px; }
.total .go .btn { flex: 1; padding: 15px 20px; }

/* 오류 */
.err-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; margin-bottom: 20px;
  background: rgba(224,128,120,.09); border: 1px solid rgba(224,128,120,.34);
  border-left: 2px solid var(--danger); border-radius: 4px;
  font-size: 13.5px; color: #f0b3ad;
}
.err-box svg { flex-shrink: 0; margin-top: 2px; }

/* 완료 */
.done { text-align: center; padding: calc(var(--nav-h) + 90px) 0 100px; }
.done .mark {
  width: 62px; height: 62px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--signal-dim); border: 1px solid rgba(91,191,148,.45); color: var(--signal);
  display: flex; align-items: center; justify-content: center;
}
.done h1 { font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-weight: 800; font-size: clamp(26px, 4.4vw, 40px); }
.done .code {
  display: inline-block; margin: 22px 0 8px; padding: 11px 22px;
  border: 1px solid var(--signal); border-radius: 4px; background: var(--signal-soft);
  font-family: var(--mono); font-size: 17px; letter-spacing: .06em; color: var(--signal);
}
.done p { color: var(--mute); font-size: 14.5px; margin-top: 12px; }
.done .sum {
  max-width: 460px; margin: 34px auto 0; text-align: left;
  border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px;
}
.done .sum .row { display: flex; font-size: 13.5px; padding: 6px 0; gap: 16px; }
.done .sum .row .k { color: var(--mute-2); min-width: 78px; flex-shrink: 0; }
.done .sum .row .v { color: var(--paper); }
.done .acts { display: flex; gap: 10px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .pick label, .seg label, .pick-all { transition: none; }
}

/* 1단으로 접히는 폭부터는 하단 고정으로 되돌린다 */
@media (max-width: 1040px) {
  .total { position: sticky; top: auto; bottom: 0; margin: 20px 0 32px; }
  .total > h3, .total .picked { display: none; }
}
@media (max-width: 560px) {
  .total { padding: 14px 16px; margin: 18px 0 28px; }
  .total .row { font-size: 12.5px; padding: 2px 0; }
  .total .row.grand .v { font-size: 19px; }
  .total .vat { display: none; }
  .total .go { margin-top: 12px; }
}
.book-wrap form { padding-bottom: 8px; }

/* ── 날짜·시간 입력의 브라우저 기본 UI ─────────────────────
   color-scheme: dark 로 대부분 해결되지만, 달력 아이콘은
   확실히 보이도록 밝기를 한 번 더 올린다. */
.f input[type="date"],
.f input[type="number"],
.f select { color-scheme: dark; }

/* color-scheme: dark 가 이미 아이콘을 밝게 만들어 준다.
   여기에 invert 를 걸면 도로 어두워지므로 크기만 키운다.
   ⚠ 이 요소에 background 단축 속성을 쓰면 아이콘 그림(background-image)까지
     지워져 아이콘이 사라진다. 호버 배경 같은 건 넣지 않는다. */
.f input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  width: 18px; height: 18px;
  margin-right: -2px;
}

/* 수량 스피너도 어두운 배경에서 보이도록 */
.qbox input[type="number"] { color-scheme: dark; }