/* ---- Consultation form (toggle open/close) --------------------------------
   버튼 클릭시 하단에 나타났다가, 다시 누르면 사라짐
   ---------------------------------------------------------------------- */
.consult-form-wrap {
  /* 폼이 좁은 부모 컨테이너(예: .s8-content, max-width:800px) 뒤에 삽입돼도
     가로폭이 찌그러지지 않도록 항상 뷰포트 전체 폭으로 벗어나 렌더링 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, calc(16px + (180 - 16) * ((100vw - 375px) / (1440 - 375))), 180px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-16px);
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .4s ease, margin .5s ease, padding-top .5s ease, padding-bottom .5s ease;
}
.consult-form-wrap.is-open {
  max-height: 900px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding-top: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1440 - 375))), 40px);
  padding-bottom: clamp(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1440 - 375))), 40px);
}
.consult-form-wrap.is-open.consult-form-wrap--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* header CTA: floating popover under the button, fading in with a
   vertical slide. fully independent from the sidebar popover below so the
   two never share a base class or fight over cascade order. */
.consult-form-wrap--popover-header {
  position: fixed;
  z-index: 600;
  width: clamp(300px, 90vw, 400px);
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
  transform: translateY(-16px) scale(0.8);
  transform-origin: top center;
}
.consult-form-wrap--popover-header .consult-form { width: 100%; }
.consult-form-wrap--popover-header .consult-form__title { align-self: center; text-align: center; }
.consult-form-wrap--popover-header .consult-form__bottom { justify-content: center; }
.consult-form-wrap--popover-header .consult-form__agree-row { justify-content: center; }
.consult-form-wrap.is-open.consult-form-wrap--popover-header {
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(0) scale(0.8);
}

/* quick-sidebar CTA (desktop/tablet): floating popover fading in with a
   slight leftward slide instead of the header popover's vertical slide */
.consult-form-wrap--popover-sidebar {
  position: fixed;
  z-index: 600;
  width: clamp(300px, 90vw, 400px);
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
  transform: translateX(16px) scale(0.8);
  transform-origin: top center;
}
.consult-form-wrap--popover-sidebar .consult-form {
  width: 100%;
  position: relative;
  left: -86px;
  top: -320px;
}
.consult-form-wrap--popover-sidebar .consult-form__title { align-self: center; text-align: center; }
.consult-form-wrap--popover-sidebar .consult-form__bottom { justify-content: center; }
.consult-form-wrap--popover-sidebar .consult-form__agree-row { justify-content: center; }
.consult-form-wrap.is-open.consult-form-wrap--popover-sidebar {
  padding-top: 0;
  padding-bottom: 0;
  transform: translateX(0) scale(0.8);
}

/* mobile quick-sidebar CTA: the regular (non-popover) form, pinned as a
   fixed sheet just above the sidebar's bottom-docked bar */
.consult-form-wrap--sidebar-sheet {
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  z-index: 600;
}

/* js/main.js adds this while it sets up a mode's classes/position, so that
   switching modes snaps to its closed pose instantly instead of animating
   — only the deliberate is-open toggle afterward should ever transition.
   without this, the mode switch itself (transform/margin changing value)
   would also transition and collide with the open animation, which is why
   a trigger used to look different on its very first open vs. later ones. */
.consult-form-wrap--no-transition { transition: none !important; }

.consult-form {
  width: 100%;
  max-width: 800px;
  background: var(--color-white);
  border: 1px solid var(--color-bluegrey-300);
  border-radius: 20px;
  box-shadow: 0 6px 10px rgba(19,73,165,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1440 - 375))), 18px);
  padding: clamp(20px, calc(20px + (32 - 20) * ((100vw - 375px) / (1440 - 375))), 32px) clamp(16px, calc(16px + (42 - 16) * ((100vw - 375px) / (1440 - 375))), 42px);
}
@media (min-width: 1024px) {
  .consult-form { width: 800px; }
}
.consult-form__title { align-self: flex-start; font-weight: 600; color: var(--color-black); font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (1440 - 375))), 18px); }
.consult-form__fields { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.consult-form__row { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; }
.consult-form__row input {
  flex: 1 1 200px;
  background: var(--color-grey-200);
  border-radius: 9px;
  padding: 10px 10px 10px 18px;
  font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 375px) / (1440 - 375))), 16px);
  color: var(--color-black);
}
.consult-form__row input::placeholder, .consult-form textarea::placeholder { color: var(--color-grey-400); }
.consult-form textarea {
  width: 100%;
  min-height: 77px;
  resize: vertical;
  background: var(--color-grey-200);
  border-radius: 9px;
  padding: 10px 10px 10px 18px;
  font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 375px) / (1440 - 375))), 16px);
}
.consult-form__bottom { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.consult-form__agree-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.consult-form__agree { display: flex; align-items: center; gap: 3px; font-size: 14px; color: var(--color-grey-900); }
.consult-form__agree-detail {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-grey-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
  transition: color .2s ease;
}
.consult-form__agree-detail:hover { color: var(--color-blue); }
.consult-form__agree input[type="checkbox"] {
  appearance: none; width: 13px; height: 13px; flex-shrink: 0;
  background: var(--color-bluegrey-100);
  border: 1px solid var(--color-bluegrey-500);
  border-radius: 3px;
  cursor: pointer;
}
.consult-form__agree input[type="checkbox"]:checked {
  background-color: var(--color-bluegrey-100);
  border-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%231865EB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 7px;
}
.consult-form__submit {
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 700;
  border-radius: 35px;
  padding: 9px 25px;
  font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 375px) / (1440 - 375))), 18px);
  transition: background-color .2s ease;
}
.consult-form__submit:hover { background: var(--color-darkblue); }
.consult-form__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-grey-400);
  font-size: 18px;
}
.consult-form { position: relative; }

@media (max-width: 767px) {
  .consult-form-wrap { padding-left: 16px; padding-right: 16px; }
  .consult-form { border-radius: 10px; }
  .consult-form__title { align-self: center; }
  .consult-form__bottom { flex-direction: column; justify-content: center; }
}

/* ---- 접수 완료 상태 -------------------------------------------------------
   제출에 성공하면 입력칸 대신 완료 문구만 보여준다. 서버가 설정돼 있지 않거나
   전송이 실패해도 화면은 똑같이 완료를 보여준다(폼 UX가 서버 상태에 의존하지 않게).
   ------------------------------------------------------------------------- */
.consult-form__done { display: none; width: 100%; text-align: center; padding: 22px 6px; font-weight: 700; color: var(--color-blue); font-size: clamp(14px, calc(14px + (17 - 14) * ((100vw - 375px) / (1440 - 375))), 17px); }
.consult-form.is-sent .consult-form__fields,
.consult-form.is-sent .consult-form__bottom { display: none; }
.consult-form.is-sent .consult-form__done { display: block; }

/* 봇 차단용 허니팟: 화면에서 완전히 숨기되 자동입력 봇에게는 보이는 칸으로 남긴다 */
.fi-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }