/* ==========================================================================
   floating-cta — 메인 한정 (기능정의서 3-3 F1·F2·F6)
   접힘 상태의 버튼 묶음 + 그 위에 쌓이는 문의 폼(inquiry-dock).

   세로 스택이라 도크가 항상 버튼 바로 위에 붙는다.
   전역 컴포넌트로 두었으므로 다른 화면에 필요해지면 배치만 추가한다.

   모바일 우선 — 기본이 하단 고정, 데스크톱에서 우측 하단으로 확장한다.
   ========================================================================== */

.floating-cta {
  position: fixed;
  right: 0; left: 0;
  bottom: 0;
  z-index: 55;   /* 모바일에서 도크가 고정 헤더(50) 위로 올라온다 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-3);
  pointer-events: none;   /* 빈 영역은 아래 콘텐츠가 눌리게 둔다 */
}
.floating-cta > * { pointer-events: auto; }

/* 버튼 묶음 */
.floating-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.floating-cta__btn {
  box-shadow: 0 4px 14px rgb(0 46 107 / .25);
  font-size: var(--fs-lg);
}

/* 모바일 — 떠 있는 버튼을 되살린다 `[2026-09-21]`. 넓은 화면과 같은 구조로 맞춘다.

   한동안 뺐던 것은(`[2026-09-18]`) 화면 아래에 늘 띠가 깔려 제품 카드 두 줄을
   가렸기 때문이다. 문제는 버튼이 있다는 것이 아니라 **화면 폭을 채웠다는 것**이었다.
   그래서 이번에는 데스크톱과 같이 오른쪽 아래 모서리에 글자 폭만큼만 둔다 —
   카드는 그 옆으로 그대로 보인다.

   도크(폼)는 이 묶음과 무관하다. 좁은 화면에서 제 스스로 화면 아래에 붙는다.

   44px 은 손가락으로 누르는 최소 크기다 — 더 줄이지 않는다 */
@media (max-width: 767px) {
  .floating-cta {
    right: var(--gutter);
    left: auto;
    bottom: var(--gutter);
    align-items: flex-end;
    padding: 0;
  }
  .floating-cta__actions { align-items: flex-end; }

  .floating-cta__btn {
    min-height: 44px;
    padding-block: 0;
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
  }
}

@media (min-width: 768px) {
  .floating-cta {
    right: var(--gutter);
    left: auto;
    bottom: var(--gutter);
    align-items: flex-end;
    padding: 0;
  }
  .floating-cta__actions { align-items: flex-end; }
  /* 데스크톱에서도 --btn-lg 기본값(18px)을 그대로 쓴다 — 시안보다 한 단계 작게 */
  .floating-cta__btn { font-size: var(--fs-lg); }
}

/* 제품 미리보기 창과 함께 떠 있을 때 `[2026-09-18]`.
   카드의 Inquiry/Quote 는 창과 폼을 같이 연다 — 내용을 보면서 쓰라는 요구다.
   모달(z-index 100)보다 위로 올려야 어두운 배경에 묻히지 않는다 */
.floating-cta.is-above-modal { z-index: 110; }