/* q 담당 CSS — 클래스 접두어 .q- 만. 토큰은 base.css :root(var(--…))만 쓰고 hex 직접 금지. 고객 화면 틀이 자동으로 불러온다.
   견적 계산 메뉴 · 이사 계산기 보조 · 옵션 시트 · 예약 조건 확인 · 날짜·시간대 · 예약금 결제 · 결제 실패 · 접수 완료 · 보증·환불 정책 */

/* ── 공용: 금액 목록·확인 목록·아래 고정 바 ── */
.q-paylist { display: grid; gap: .55rem; font-size: var(--fs-sm); }
.q-paylist > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.q-paylist dt { color: var(--ink-3); flex: 0 0 auto; }
.q-paylist dd { font-weight: 650; text-align: right; min-width: 0; }
.q-paylist .q-paytotal { margin-top: .3rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); font-size: var(--fs-md); }
.q-paylist .q-paytotal dd { color: var(--accent-ink); font-weight: 850; font-size: var(--fs-lg); }
.q-checks { display: grid; gap: .45rem; font-size: var(--fs-sm); color: var(--ink-2); }
.q-checks li { display: flex; gap: .5rem; align-items: flex-start; }
.q-checks .ic { color: var(--accent); margin-top: .2rem; }
.q-paycard { display: flex; flex-direction: column; gap: var(--sp-4); border: 1.5px solid var(--accent); box-shadow: var(--shadow); }
.q-paycard .h-sub { display: flex; align-items: center; gap: .4rem; margin-bottom: 0; }
.q-paycard .h-sub .ic { color: var(--accent); }
.q-paycard-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.q-paycard-btns .btn { padding: 0 .6rem; white-space: normal; }
.q-dd-note { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.q-tags { gap: .35rem; }
.q-refund .table { min-width: 0; }
.q-refund th[scope="row"] { width: 38%; }
.q-refund-rate { display: block; }
.q-refund-note { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.q-coef { white-space: nowrap; }
.q-stickybar { display: none; }
@media (max-width: 760px) {
  .q-has-bar { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .q-stickybar { display: flex; align-items: center; gap: var(--sp-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
  .q-stickybar .btn { flex: 1; }
  .q-stickybar-amt { display: flex; flex-direction: column; line-height: 1.2; }
  .q-stickybar-amt small { font-size: var(--fs-xs); color: var(--ink-3); }
  .q-stickybar-amt strong { font-size: var(--fs-lg); color: var(--accent-ink); }
  .q-paycard-btns { grid-template-columns: 1fr; }
}

/* ── 견적 계산 메뉴(/quote) ── */
.q-last { display: flex; align-items: center; gap: var(--sp-3); padding: .9rem 1rem; margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); flex-wrap: wrap; }
.q-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.q-menu-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.q-menu-text { display: flex; flex-direction: column; gap: .35rem; }
.q-menu-title { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; }
.q-menu-desc { color: var(--ink-2); }
.q-menu-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.q-menu-ex { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--line-strong); }
.q-menu-price { font-size: var(--fs-h4); font-weight: 850; color: var(--warm-ink); }
.q-menu-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--sp-2); font-weight: 750; color: var(--accent-ink); }
.q-menu-card:hover .q-menu-go { text-decoration: underline; text-underline-offset: 3px; }
.q-menu-foot { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 760px) { .q-menu { grid-template-columns: 1fr; } }

/* ── 이사 계산기 보조 ── */
.q-sub { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.q-sub-label { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.q-sub-label .ic { color: var(--accent); }
.q-km { max-width: 16rem; }
.q-pack input { border-radius: 50%; }
.q-sum-sub { display: grid; gap: var(--sp-2); }

/* ── 옵션 추가 선택(시트) ── */
.q-opt .qopt-box { align-items: flex-start; }
.q-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-opt-text .qopt-name { display: inline-flex; align-items: center; gap: .35rem; }
.q-opt-text small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.q-optsum { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); flex-wrap: wrap; }
.q-optsum-amt { margin-left: auto; color: var(--warm-ink); font-size: var(--fs-lg); }

/* ── 예약 조건 확인 ── */
.q-book { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; }
.q-book-side { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 960px) { .q-book { grid-template-columns: minmax(0, 1fr); } .q-book-side { position: static; } }

/* ── 예약 날짜·시간대 선택 ── */
.q-new { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-5); align-items: start; }
.q-new-side { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 960px) { .q-new { grid-template-columns: minmax(0, 1fr); } .q-new-side { position: static; } }
.q-key { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; }
.q-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-strong); }
.q-dot.is-sur { background: var(--warm); }
.q-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.q-date { position: relative; display: block; cursor: pointer; }
.q-date input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.q-date-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .55rem .25rem; border: 1.5px solid var(--line-input); border-radius: var(--r-sm); background: var(--surface); text-align: center; transition: border-color var(--t-short) var(--ease), background var(--t-short) var(--ease); }
.q-date-dow { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }
.q-date-day { font-size: var(--fs-lg); font-weight: 800; }
.q-date-tag { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 650; white-space: nowrap; }
.q-date.is-sur .q-date-tag, .q-date.is-sur .q-date-dow { color: var(--warm-ink); }
.q-date:hover .q-date-box { border-color: var(--ink); }
.q-date input:checked + .q-date-box { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.q-date input:checked + .q-date-box .q-date-dow, .q-date input:checked + .q-date-box .q-date-tag { color: var(--accent-on-night); }
.q-date input:focus-visible + .q-date-box { box-shadow: var(--focus); }
.q-date input:disabled + .q-date-box { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
.q-date input:disabled + .q-date-box .q-date-tag { color: var(--danger); }
.q-date input[aria-invalid="true"] + .q-date-box { border-color: var(--danger); }
.q-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2); }
.q-slot { position: relative; display: block; cursor: pointer; }
.q-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.q-slot-box { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); padding: .6rem .9rem; border: 1.5px solid var(--line-input); border-radius: var(--r-sm); background: var(--surface); }
.q-slot-time { display: inline-flex; align-items: center; gap: .35rem; font-weight: 750; }
.q-slot-tag { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 650; }
.q-slot:hover .q-slot-box { border-color: var(--ink); }
.q-slot input:checked + .q-slot-box { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.q-slot input:checked + .q-slot-box .q-slot-tag { color: var(--accent-on-night); }
.q-slot input:focus-visible + .q-slot-box { box-shadow: var(--focus); }
.q-slot input:disabled + .q-slot-box { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
.q-slot input:disabled + .q-slot-box .q-slot-tag { color: var(--danger); }
.q-slot input[aria-invalid="true"] + .q-slot-box { border-color: var(--danger); }
.q-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.q-span2 { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .q-dates { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px .4rem; }
  .q-date { flex: 0 0 4.6rem; scroll-snap-align: start; }
  .q-fields { grid-template-columns: 1fr; }
}

/* ── 예약금 결제 ── */
.q-pay { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-5); align-items: start; }
.q-pay-side { position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 960px) { .q-pay { grid-template-columns: minmax(0, 1fr); } .q-pay-side { position: static; } }
.q-info { display: grid; gap: .8rem; }
.q-info > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-3); }
.q-info dt { color: var(--ink-3); }
.q-info dd { font-weight: 650; min-width: 0; }
.q-info dd small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
@media (max-width: 520px) { .q-info > div { grid-template-columns: 1fr; gap: 0; } }
.q-methods .seg-opt { flex: 1 1 100%; }
.q-demo { gap: 0; }
.q-demo .radio { min-height: 2.6rem; padding: .3rem 0; }

/* ── 결제 실패·접수 완료 공용 ── */
.q-fail-hero { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); border: 1.5px solid var(--danger); border-radius: var(--r); }
.q-fail-hero h2 { font-size: var(--fs-h4); }
.q-fail-hero p { margin-top: .3rem; color: var(--ink-2); }
.q-fail { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sp-4); }
.q-fail-reason { display: flex; gap: var(--sp-3); align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); }
.q-fail-reason > div { color: var(--ink); }
.q-fail-reason .ic { margin-top: 3px; }
.q-fail-cta { display: flex; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
@media (max-width: 560px) { .q-fail-hero { flex-direction: column; } .q-fail-cta .btn { flex: 1 1 100%; } }

.q-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); border: 1.5px solid var(--accent); box-shadow: var(--shadow); }
.q-done h2 { font-size: var(--fs-h3); }
.q-code { color: var(--ink); }
.q-done-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); text-align: left; }
.q-done-grid > div { padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); }
.q-done-grid dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 650; }
.q-done-grid dd { font-weight: 750; margin-top: 2px; }
.q-done-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
@media (max-width: 760px) { .q-done-grid, .q-done-cols { grid-template-columns: 1fr; } }
.q-next { display: grid; gap: 0; }
.q-next li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding-bottom: var(--sp-4); color: var(--ink-3); }
.q-next li:last-child { padding-bottom: 0; }
.q-next li:not(:last-child)::after { content: ""; position: absolute; left: 1rem; top: 2rem; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line-strong); }
.q-next li.is-done:not(:last-child)::after { background: var(--accent); }
.q-next-dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-weight: 800; font-size: var(--fs-sm); }
.q-next-dot .ic { width: .95rem; height: .95rem; }
.q-next li strong { display: block; color: var(--ink-2); }
.q-next li small { display: block; font-size: var(--fs-sm); }
.q-next li.is-done .q-next-dot { background: var(--accent); color: var(--on-accent); }
.q-next li.is-now .q-next-dot { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.q-next li.is-now strong, .q-next li.is-done strong { color: var(--ink); }

/* ── 보증·환불 정책 안내 ── */
.q-flow { margin-bottom: var(--sp-5); }
.q-flow-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.q-flow-list li { display: flex; flex-direction: column; gap: var(--sp-2); }
.q-flow-list h3 { font-size: var(--fs-md); }
.q-flow-no { font-size: var(--fs-xs); font-weight: 750; color: var(--accent-ink); }
@media (max-width: 960px) { .q-flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .q-flow-list { grid-template-columns: 1fr; } }
.q-doc { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.q-doc-side { position: sticky; top: calc(var(--header-h) + 1rem); }
.q-toc ol { display: grid; gap: 2px; margin-top: .4rem; }
.q-toc a { display: block; padding: .45rem .5rem; border-radius: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.q-toc a:hover { background: var(--surface-2); color: var(--ink); }
.q-doc-title { font-size: var(--fs-h4); }
.q-doc-body .prose h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.q-doc-body .q-refund { margin-top: var(--sp-3); }
.q-related .btn-row { margin-top: var(--sp-2); gap: var(--sp-1); }
@media (max-width: 960px) { .q-doc { grid-template-columns: minmax(0, 1fr); } .q-doc-side { position: static; } }

.q-new > *, .q-pay > *, .q-book > *, .q-doc > *, .q-new-main > *, .q-fail > * { min-width: 0; }