/*
 * 모바일 하단 고정(sticky) 신청 버튼 — 공통 컴포넌트
 *
 * 신청 페이지 5개(tax-apply, bookkeeping-apply, vat-apply, capital-gains-tax,
 * inheritance-gift-tax)가 각자 따로 만들어 쓰던 "화면 하단에 떠 있는 신청 버튼"을
 * 하나로 모은 파일입니다. 위치·크기·등장 애니메이션은 여기서 한 번만 관리하고,
 * 페이지별 색상/문구는 각 템플릿에서 CSS 변수와 텍스트로만 지정합니다.
 *
 * 사용법:
 *   <a class="js-mobile-apply-bar"
 *      href="#formCardId"
 *      data-target="#formCardId"
 *      data-also-hide-when-visible="#finalCtaSelector"   (선택)
 *      style="--mab-bg:#1e3a8a; --mab-color:#fff;">
 *     버튼 문구
 *   </a>
 *
 * 신청 폼(data-target)이 화면에 보이는 동안과, 하단 최종 CTA(선택)가 보이는 동안은
 * 자동으로 숨어서 입력창을 가리지 않습니다. mobile-apply-bar.js가 이 동작을 담당합니다.
 */

.js-mobile-apply-bar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 950;

  display: none;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 20px;
  border: var(--mab-border, none);
  border-radius: var(--mab-radius, 12px);
  background: var(--mab-bg, #0f172a);
  color: var(--mab-color, #fff) !important;
  box-shadow: 0 12px 30px rgba(7, 18, 38, 0.28);

  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none !important;

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.js-mobile-apply-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.js-mobile-apply-bar .mab-arrow {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .js-mobile-apply-bar { display: flex; }
  /* 하단 고정 버튼에 가려지지 않도록 페이지 맨 아래 여백 확보 */
  body:has(.js-mobile-apply-bar) { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-mobile-apply-bar { transition: none; }
}