/* ==========================================================================
   inquiry-dock — 플로팅 버튼 위에 떠 있는 문의 폼

   딤(배경 어둡게)을 깔지 않는다. 열어 둔 채로 페이지를 스크롤하며
   제품 사양을 보면서 문의 내용을 적을 수 있어야 하기 때문이다.

   폼 전체가 한 화면에 보여야 하므로 세로 간격을 시안보다 좁혔다.

   문의 폼은 평소에 화면에 없다. 이 도크가 열릴 때만 나온다.
   ========================================================================== */

.inquiry-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line-card);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgb(0 24 56 / .22);
  overflow: hidden;   /* 자식이 둥근 모서리 밖으로 튀어나오지 않게 한다 */
}

/* 손잡이 `[2026-09-18]` — 닫기 X 를 대신한다.
   X 는 도크 오른쪽 위에 떠 있어(position: absolute) 안쪽 폼이 스크롤하면
   그때그때 다른 글자 위에 얹혔다. "엑스가 제멋대로 움직인다"는 말이 그것이다.
   손잡이는 흐름 안에 있어 무엇과도 겹치지 않고, 아래로 끌어내려 닫는다.
   누르기만 해도 닫힌다 — 끌기를 모르는 사람과 키보드 사용자를 위해서다 */
.inquiry-dock__grab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  /* 손가락이 닿는 자리다. 막대만큼만 두면 집기 어렵다 */
  height: 26px;
  touch-action: none;    /* 끌어내리는 동안 페이지가 같이 움직이지 않게 한다 */
  cursor: grab;
}
.inquiry-dock__grab:active { cursor: grabbing; }

.inquiry-dock__grab-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--c-line-card);
}
.inquiry-dock__grab:hover .inquiry-dock__grab-bar { background: var(--c-text-chip); }

/* 좁은 화면에서는 손잡이만 쓴다 — X 는 넓은 화면 몫이다 (아래 미디어쿼리) */
.inquiry-dock__close-icon { display: none; }

/* 끌어내리는 동안 따라 움직인다. --dock-drag 는 inquiry-panel.js 가 넣는다 */
.inquiry-dock.is-dragging { transition: none; }
.inquiry-dock { transform: translateY(var(--dock-drag, 0)); transition: transform .18s ease; }

.inquiry-dock__body {
  /* 모바일에서는 화면의 일부만 차지한다 `[2026-09-18]`.
     전체 높이를 덮으면 뒤 제품 목록이 통째로 가려, 무엇을 문의하려던 참인지
     확인하려면 창을 닫았다 다시 열어야 했다. 나머지는 안에서 스크롤한다.

     `[2026-09-21]` 절반에서 40% 로 줄인다. 제품 칸 · 문의 종류 · 성명까지
     한눈에 들어오면 폼이 시작됐다는 것은 충분히 알 수 있고, 그 아래는
     어차피 적으면서 따라 내려간다. 줄인 만큼 위의 미리보기 창이 길어진다 */
  max-height: 40vh;
  max-height: 40dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 위는 손잡이가 이미 자리를 벌어 준다 */
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

/* --- 도크 안의 폼 — 간격을 좁힌다 ------------------------------------------- */

.inquiry-dock__body .inquiry-panel {
  width: auto;
  gap: var(--sp-5);          /* 제목과 폼 사이 — 브랜드 섹션 패널과 같은 간격 */
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.inquiry-dock__body .inquiry-panel__title { font-size: var(--fs-md); }

.inquiry-dock__body .inquiry-panel__form { gap: var(--sp-4); }

/* 라벨과 입력칸 사이. 4px 은 붙어 보여 8px 로 벌렸다 */
.inquiry-dock__body .field { gap: var(--sp-2); }

/* 위 규칙은 라벨과 입력칸 사이(세로)를 좁히려는 것이다.
   라디오처럼 가로로 늘어선 그룹까지 눌리면 안 되므로 되돌린다. */
.inquiry-dock__body .field--inline { gap: var(--sp-6); }

.inquiry-dock__body .field__input,
.inquiry-dock__body .field__select {
  height: 32px;
  padding-block: var(--sp-2);
}

.inquiry-dock__body .field__textarea {
  min-height: 48px;
  padding-block: var(--sp-2);
}

.inquiry-dock__body .inquiry-panel__note { font-size: var(--fs-sm); }

.inquiry-dock__body .btn--md { padding-block: var(--sp-2); font-size: var(--fs-md); line-height: 1.2; }

/* 모바일 — 화면 아래에 꽉 채워 붙인다 `[2026-09-18]`.
   floating-cta 의 안쪽 여백(12px)만큼 좌우·아래가 떠 있어 카드처럼 보였다.
   같은 크기만큼 음수 여백으로 끌어내 화면 끝까지 닿게 하고,
   아랫변은 화면 밖이라 모서리를 펴고 테두리도 지운다 */
@media (max-width: 767px) {
  /* 바깥 묶음의 여백·간격에 기대지 않고 화면에 직접 붙인다.
     묶음 안에 두면 버튼이 숨어도 그 자리(간격)가 남아 아래에 띠가 생긴다 */
  .inquiry-dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 56;
    width: auto;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /* 제목과 첫 칸이 붙어 한 덩어리로 읽혔다 — 위아래를 더 벌린다 */
  .inquiry-dock__body { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .inquiry-dock__body .inquiry-panel { gap: var(--sp-6); }
}

/* --- 데스크톱 — 시안(415px) 폭. 세로 1단을 유지한다 ------------------------ */

@media (min-width: 768px) {
  .inquiry-dock { width: 415px; }
  .inquiry-dock__body { padding: var(--sp-5); }
  /* 데스크톱은 고정 헤더를 피한다 */
  .inquiry-dock__body { max-height: calc(100vh - var(--header-h) - 120px); }

  /* 넓은 화면에서는 닫기 X 로 되돌린다 `[2026-09-21]`.
     손잡이는 아래에서 올라온 창을 손가락으로 끌어내리는 장치다 — 마우스로는
     끌 일이 없고, 오른쪽에 붙어 뜨는 창을 아래로 미는 것도 말이 되지 않는다.
     X 가 글자 위에 얹히던 문제는 좁은 화면 이야기였다 (도크가 화면 폭을
     가득 채워 폼이 X 밑으로 지나갔다). 여기서는 창이 415px 로 서 있어
     겹칠 자리가 없다 */
  .inquiry-dock__grab {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    color: var(--c-text);
    cursor: pointer;
    touch-action: auto;
  }
  .inquiry-dock__grab:hover { background: var(--c-chip-off); }
  .inquiry-dock__grab-bar { display: none; }
  .inquiry-dock__close-icon { display: block; }

  /* X 자리를 비운다 — 제목이 그 밑으로 들어가지 않게 */
  .inquiry-dock__body { padding-top: var(--sp-8); }
}