/* ══════════════════════════════════════════════════════════════════
   모바일 하단 고정 CTA — 랜딩 4면 공용 (/saju · /love · /money · /career)

   자미 랜딩 CRO ③ 규격을 그대로 옮겼다. 다른 점은 두 가지뿐:
     · 버튼이 인주 압인(색 체계 v2 주CTA) — 각 면의 .btn 을 그대로 재사용한다.
     · 폭이 90%(지시 스펙). 자미는 좌우 12px 고정이었다.

   z-index 50 — 랜딩에는 모달이 없지만, 나중에 모달이 붙어도 그 아래에 깔리도록
   자미와 같은 층을 쓴다(자미 .ob-mask 는 60).
   스크림은 --ink 계열 그라데이션 — 팔레트 밖 색을 쓰지 않는다.
   ══════════════════════════════════════════════════════════════════ */

.sticky-cta { display: none; }

@media (max-width: 520px) {
  .sticky-cta {
    display: block; position: fixed; z-index: 50;
    /* ★90% 폭 중앙 — 캔버스(520px)보다 좁은 화면에서만 뜨므로 5%/5% 로 잡는다 */
    left: 5%; right: 5%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .sticky-cta.on { opacity: 1; transform: none; pointer-events: auto; }

  /* 버튼 자체 규격(인주 압인·min-height 54px)은 각 면의 .btn 이 이미 갖고 있다.
     여기서는 폭과 그림자만 얹는다 — 색·질감은 건드리지 않는다. */
  .sticky-cta .btn {
    display: block; width: 100%; text-align: center;
    box-shadow: 0 10px 30px rgba(6, 6, 10, .75),
                inset 0 1px 0 rgba(255, 220, 208, .30),
                inset 0 -1px 0 rgba(40, 10, 7, .50);
  }

  /* 바 뒤로 본문이 비쳐 읽히지 않도록 아래쪽만 어둡게 깐다 */
  .sticky-cta::before {
    content: ""; position: absolute; left: -5vw; right: -5vw; top: -20px; bottom: -14px;
    z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 6, 10, 0), rgba(6, 6, 10, .72) 55%, rgba(6, 6, 10, .92));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}