/*
* Copyright 마케터비
* 데스크탑 전용 하단 고정 퀵상담 바
*
* ====================================================================================================
* [읽기 전에] css/common/form.css 와의 특이도 싸움
* ----------------------------------------------------------------------------------------------------
* 이 폼은 <form class="xet-form quickcs-form"> 이라 form.css 의 규칙에 전부 걸린다.
* form.css 는 담당 범위 밖(다른 폼 전체에 영향)이라 고칠 수 없으므로 "특이도로 이긴다".
*
*  ┌ form.css 규칙 ───────────────────────────────────────────────┬ 특이도 ─┬ 이 파일의 대응 ──────────┬ 특이도 ─┐
*  │ .xet-form input:not()x5           (기본 치수/색/배경/outline) │ (0,6,1) │ .quickcs-form input      │ (0,7,1) │
*  │                                                              │         │   .quickcs-field:not()x5 │         │
*  │ .xet-form select                                             │ (0,1,1) │ .quickcs-form            │ (0,2,1) │
*  │                                                              │         │   select.quickcs-field   │         │
*  │ .xet-form input:not()x2:focus     (!important 3개)            │ (0,4,1) │ .quickcs-form            │ (0,8,0) │
*  │                                                              │         │   .quickcs-field:not()x5 │         │
*  │                                                              │         │   :focus  (+!important)  │         │
*  │ .xet-form input[readonly] 등      (!important 4개)            │ (0,2,1) │ .quickcs-form            │ (0,3,0) │
*  │   → cursor:not-allowed / 회색 배경 / 회색 글자                │         │   .quickcs-field         │         │
*  │                                                              │         │   [readonly](+!important)│         │
*  │ .xet-form input.error             (!important 2개)            │ (0,2,1) │ .quickcs-form            │ (0,4,0) │
*  │                                                              │         │   .quickcs-field.error   │         │
*  │                                                              │         │   :not([type=file])      │         │
*  └──────────────────────────────────────────────────────────────┴─────────┴──────────────────────────┴─────────┘
*  ※ 특이도 비교는 (id, class·속성·의사클래스, 요소) 순서로 앞자리부터 본다.
*     예) (0,3,0) vs (0,2,1) → 둘째 자리 3>2 이므로 (0,3,0) 승리. 셋째 자리는 보지 않는다.
*     ※ !important 끼리 붙으면 "특이도가 높은 쪽"이 이긴다 → 위 표대로 이 파일이 이긴다.
*
* ====================================================================================================
* [디자인] 어두운 바 + 밝은 입력칸
*   바 배경은 차콜(다크 팔레트 토큰 재사용), 입력칸만 흰색으로 띄우고 등록 버튼이 가장 도드라지게 한다.
*   다크 팔레트 토큰(--dark-*)은 layout.css / base.css 에 이미 정의된 기존 토큰이다. 새 변수는 만들지 않는다.
* ====================================================================================================
*/

/* ====================================================================================================
   1. 바 셸 + 스크롤 등장
   ==================================================================================================== */
.quickcs-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  padding: 16px 28px;
  background: var(--dark-bg-color, #1c1d21);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.32);

  /* 최상단에서는 숨어 있다가 일정 거리 스크롤하면 아래에서 올라온다.
     visibility 까지 끄는 이유: 숨은 상태의 바가 클릭·탭 이동을 가로채지 않게 하기 위함. */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
.quickcs-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s;
}

/* 요소들이 좌우로 벌어지지 않고 화면 중앙에 한 덩어리로 모이도록
   모든 자식을 flex:0 0 auto 로 두고 컨테이너를 center 정렬한다. */
.quickcs-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* 안내문구 — 어두운 배경 위이므로 밝은 글자.
   앞에 얇은 테마색 선을 두어 절제된 강조를 준다. */
.quickcs-bar__lead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
.quickcs-bar__lead::before {
  content: "";
  width: 2px;
  height: 16px;
  background: var(--theme-color, #d51515);
}

.quickcs-form {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}

.quickcs-bar__fields {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ====================================================================================================
   2. 입력칸
   각 필드는 cond 를 걸기 위한 래퍼(.quickcs-cell)로 감싸져 있고, 폭은 래퍼가 가진다.
   ==================================================================================================== */
.quickcs-cell {
  flex: 0 0 auto;
}
.quickcs-cell--name {
  width: 116px;
}
.quickcs-cell--tel {
  width: 158px;
}
.quickcs-cell--date {
  width: 168px;
}
.quickcs-cell--time {
  width: 126px;
}

/* 저특이도 공통값 (form.css 가 건드리지 않는 속성들) */
.quickcs-field {
  display: block;
  font-family: inherit;
  line-height: 1.2;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* form.css 의 .xet-form input:not()x5 (0,6,1) / .xet-form select (0,1,1) 을 이기는 실제 치수·색상.
   ★ :not() 사슬을 그대로 유지해야 특이도가 (0,7,1) 이 된다. 사슬을 지우면 form.css 가 다시 이긴다. */
.quickcs-form input.quickcs-field:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]),
.quickcs-form select.quickcs-field {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--text-strong-color, #191b1f);
  background-color: var(--input-bg-color, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm, 8px);
  -webkit-appearance: none;
  appearance: none;
}
.quickcs-field::placeholder {
  color: var(--muted-color, #9b9ea0);
  opacity: 1;
}

/* 오른쪽 아이콘 자리 확보. base 규칙과 같은 사슬을 유지해야 padding 을 덮을 수 있다. */
.quickcs-form input.quickcs-field--date:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]),
.quickcs-form select.quickcs-field--select {
  padding-right: 38px;
}
.quickcs-form select.quickcs-field--select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* ---------- 포커스 ----------
   form.css 의 :focus 규칙이 border/color/background 를 !important 로 강제하므로
   같은 속성에 !important + 더 높은 특이도(0,8,0)로 맞선다.
   테두리 링은 outline 으로 준다 → 테마색 변수를 그대로 쓸 수 있고(하드코딩 rgba 불필요),
   흰 입력칸/어두운 바 어느 쪽에서도 또렷하게 보인다. */
.quickcs-form .quickcs-field:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):focus {
  border-color: var(--theme-color, #d51515) !important;
  background-color: var(--input-bg-color, #fff) !important;
  color: var(--text-strong-color, #191b1f) !important;
  outline: 2px solid var(--theme-color, #d51515);
  outline-offset: 1px;
}

/* ---------- ★ 방문희망일 칸 버그 수정 ----------
   Flatpickr 를 allowInput:false 로 띄우면 input 에 readonly 속성이 붙는다.
   그러면 form.css 의 .xet-form input[readonly] (0,2,1 + !important) 가 걸려
   회색 배경 + 회색 글자 + not-allowed 커서가 된다(= 비활성처럼 보이는 버그).
   form.css 는 손대지 않고, 클래스 칸을 하나 더 쌓아 (0,3,0) 으로 이긴다. 3 > 2 이므로 항상 승리.
   포커스는 위 (0,8,0) 규칙이 이 규칙보다 높으므로 다른 칸과 동일하게 동작한다. */
.quickcs-form .quickcs-field[readonly] {
  cursor: pointer !important;
  color: var(--text-strong-color, #191b1f) !important;
  background-color: var(--input-bg-color, #fff) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.quickcs-form .quickcs-field[readonly]::placeholder {
  color: var(--muted-color, #9b9ea0) !important;
}

/* ---------- 날짜 지우기 버튼 ---------- */
.quickcs-date-wrap {
  position: relative;
  width: 100%;
}
.quickcs-date-clear {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-circle, 50%);
  background: #e5e7eb;
  color: #4b5058;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.quickcs-field--date.has-value ~ .quickcs-date-clear {
  opacity: 1;
  pointer-events: auto;
}
.quickcs-date-clear:hover {
  background: var(--theme-color, #d51515);
  color: #fff;
}

/* ====================================================================================================
   3. 동의 체크 + 약관 버튼 (어두운 배경 대비 확보)
   ==================================================================================================== */
.quickcs-agree {
  /* form.css 가 체크박스를 position:absolute 로 화면 밖에 숨기므로,
     기준 블록을 여기로 고정해 두어야 포커스 이동 시 화면이 튀지 않는다. */
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.quickcs-agree label {
  white-space: nowrap;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s ease;
}
.quickcs-agree label:hover {
  color: #fff;
}
/* form.css 가 체크박스를 숨기고 label::before/::after 로 그린다
   (.xet-form input[type=checkbox] + label::before = (0,2,3)).
   어두운 바에서는 박스 크기·색을 다시 잡아야 하므로 클래스를 하나 더 얹어 (0,3,3)으로 이긴다. */
.quickcs-form .quickcs-agree input[type=checkbox] + label {
  padding-left: 24px;
}
.quickcs-form .quickcs-agree input[type=checkbox] + label::before,
.quickcs-form .quickcs-agree input[type=checkbox] + label::after {
  width: 17px;
  height: 17px;
  border-radius: var(--radius-xs, 4px);
}
.quickcs-form .quickcs-agree input[type=checkbox] + label::before {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.quickcs-form .quickcs-agree input[type=checkbox]:checked + label::before {
  background: var(--theme-color, #d51515);
  border-color: var(--theme-color, #d51515) !important;
}
.quickcs-form .quickcs-agree input[type=checkbox]:focus-visible + label::before {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.quickcs-agree__toggle {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.quickcs-agree__toggle:hover {
  color: #fff;
}

/* ====================================================================================================
   4. 등록 버튼 — 바에서 가장 도드라지는 요소
   ==================================================================================================== */
.quickcs-submit {
  flex: 0 0 auto;
}
.quickcs-submit__btn {
  height: 48px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: var(--theme-color, #d51515);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}
.quickcs-submit__btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.46);
}
.quickcs-submit__btn:active {
  transform: translateY(1px);
}
.quickcs-submit__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ====================================================================================================
   5. 유효성 에러
   바 높이가 낮아 필드마다 인라인 에러를 넣으면 레이아웃이 깨지므로,
   에러는 바 위쪽 중앙에 한 줄로만 띄우고 해당 필드는 붉은 테두리로 표시한다.
   ==================================================================================================== */
.quickcs-error {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: none;
  margin-bottom: 10px;
  padding: 7px 16px;
  border-radius: var(--radius-pill, 999px);
  background: #e11414;
  color: #fff;
  font-size: 13px;
  font-weight: var(--fw-medium, 500);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.quickcs-error.is-visible {
  display: block;
}
/* form.css 의 .xet-form input.error (0,2,1 + !important) 를 (0,4,0) 으로 이긴다. */
.quickcs-form .quickcs-field.error:not([type=file]) {
  border-color: #ff5a5a !important;
}

/* ====================================================================================================
   6. 제출 완료 화면 — alert() 대신 바 자리에서 피드백
   (js/main-quickcs.js 가 .quickcs-bar 에 is-done 을 붙이고 잠시 뒤 이동 URL 로 넘긴다)
   ==================================================================================================== */
.quickcs-done {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
}
.quickcs-bar.is-done .quickcs-done {
  display: flex;
}
.quickcs-bar.is-done .quickcs-bar__inner {
  display: none;
}
.quickcs-done__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle, 50%);
  background: var(--theme-color, #d51515);
  color: #fff;
  animation: quickcs-done-pop 0.32s ease-out both;
}
.quickcs-done__text {
  margin: 0;
  font-size: 15px;
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-base, 1.6);
  letter-spacing: 0.01em;
  color: #fff;
  white-space: pre-line;
  text-align: left;
}
@keyframes quickcs-done-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ====================================================================================================
   7. 약관 모달 — 딤 + 중앙 카드
   reserve-modal.css 에 의존하지 않고 여기서 자족적으로 구현한다.
   ==================================================================================================== */
.quickcs-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}
.quickcs-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.quickcs-modal__dim {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 15, 0.62);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.quickcs-modal.is-open .quickcs-modal__dim {
  opacity: 1;
}
.quickcs-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: min(76vh, 640px);
  background: var(--content-bg-color, #fff);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  outline: none;
}
.quickcs-modal.is-open .quickcs-modal__panel {
  opacity: 1;
  transform: translateY(0);
}
.quickcs-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 16px;
  border-bottom: 1px solid var(--border-color, #d6e4e5);
}
.quickcs-modal__title {
  margin: 0;
  font-size: 18px !important; /* base.css 의 h1~h6 !important 를 되돌리기 위함 */
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-tight, 1.3);
  letter-spacing: 0.02em;
  color: var(--text-strong-color, #191b1f);
}
.quickcs-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle, 50%);
  background: transparent;
  color: var(--text-base-color, #707070);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.quickcs-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-strong-color, #191b1f);
}
/* 내용이 길면 모달 내부만 스크롤 */
.quickcs-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 26px 24px;
}
.quickcs-privacy__lead {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color, #d6e4e5);
  font-size: 14px;
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-base, 1.6);
  color: var(--text-strong-color, #191b1f);
}
.quickcs-privacy__text {
  font-size: 14px;
  line-height: var(--lh-loose, 1.8);
  color: var(--text-base-color, #707070);
  word-break: keep-all;
}
.quickcs-modal__foot {
  flex: 0 0 auto;
  padding: 0 26px 24px;
}
.quickcs-modal__confirm {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: var(--theme-color, #d51515);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: filter 0.18s ease;
}
.quickcs-modal__confirm:hover {
  filter: brightness(1.08);
}
/* 모달이 열린 동안 뒤쪽 본문 스크롤 잠금 */
body.quickcs-modal-open {
  overflow: hidden;
}

/* ====================================================================================================
   8. body 하단 여백
   바가 실제로 보일 때만(.quickcs-visible) 여백을 준다.
   최상단에서 바가 숨어 있는데 여백만 잡혀 있으면 페이지 끝이 어색하게 비기 때문.
   ==================================================================================================== */
body.quickcs-active.quickcs-visible {
  padding-bottom: 80px;
}

/* ====================================================================================================
   9. 다크모드
   현재 js/header.js 에서 라이트를 강제하고 있어 적용되지 않지만, 복구 대비로 유지한다. (삭제 금지)
   바 자체는 원래 어두우므로 배경이 본문과 붙어 보이지 않게 경계만 또렷하게 만든다.
   ==================================================================================================== */
body.color_scheme_dark .quickcs-bar {
  background: var(--dark-content-bg-color, #26282c);
  border-top-color: var(--dark-border-color, #3a3b3d);
}
body.color_scheme_dark .quickcs-modal__panel {
  background: var(--dark-content-bg-color, #26282c);
}
body.color_scheme_dark .quickcs-modal__title {
  color: var(--dark-text-strong-color, #eff2f7);
}
body.color_scheme_dark .quickcs-privacy__lead {
  color: var(--dark-text-strong-color, #eff2f7);
  border-bottom-color: var(--dark-border-color, #3a3b3d);
}
body.color_scheme_dark .quickcs-privacy__text {
  color: var(--dark-text-base-color, #adb7be);
}
body.color_scheme_dark .quickcs-modal__head {
  border-bottom-color: var(--dark-border-color, #3a3b3d);
}
body.color_scheme_dark .quickcs-modal__close {
  color: var(--dark-text-base-color, #adb7be);
}

/* ====================================================================================================
   10. 데스크탑 전용 / 반응형
   ==================================================================================================== */
@media (max-width: 1023px) {
  .quickcs-bar,
  .quickcs-modal {
    display: none !important;
  }
  body.quickcs-active.quickcs-visible {
    padding-bottom: 0;
  }
}

/* 가로폭이 좁은 데스크탑 창에서 문구 줄임 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .quickcs-bar__lead {
    display: none;
  }
  .quickcs-submit__btn {
    padding: 0 26px;
  }
}

/* ====================================================================================================
   11. 모션 최소화 설정 존중
   ==================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .quickcs-bar,
  .quickcs-bar.is-visible {
    transform: none;
    transition: opacity 0.01ms linear, visibility 0.01ms linear;
  }
  .quickcs-submit__btn,
  .quickcs-submit__btn:active,
  .quickcs-modal__dim,
  .quickcs-modal__panel,
  .quickcs-date-clear,
  .quickcs-agree__toggle {
    transition: none;
    transform: none;
  }
  .quickcs-modal__panel {
    transform: none;
  }
  .quickcs-done__icon {
    animation: none;
  }
}