/* 재미나 랜딩 — 우하단 상시 CTA
 * ---------------------------------------------------------------------------
 * 규격 출처: 04-ZEMINA/01-ArtDirector/DIRECTION-CHANGE-2026-07-24.md §7
 *   블로그(07-blog-publishing/web/public/css/pages/blog.css:1294~)와 같은 시각 언어를 쓴다.
 *   52px 높이 · 유리 배경 · 우하단 고정(safe-area) · z-index 400 · 호버 -2px · 누름 .96
 *   재미나 전용 디자인을 새로 만들지 않는다 — 이미 정해진 규격이 있다.
 *
 * z-index 를 400 으로 두는 이유(같은 페이지의 다른 고정 요소 실측):
 *   .wz-header      1000    → CTA 가 헤더를 가리면 안 된다
 *   .wj-prereg     10001    → 모달은 CTA 를 덮어야 한다
 *   400 은 그 사이이면서 본문 위다.
 *
 * 이 파일은 랜딩(zemina.html)에서만 불린다. /contents 에는 넣지 않는다 —
 * 이미 그 화면에 있는데 그리로 가라는 버튼은 순환이다.
 */

.zm-float-cta {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 400;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  /* 왼쪽이 좁은 것은 그림(가로형)이 자리를 차지하기 때문이다 — 시각 무게를 맞춘다. */
  padding: 0 22px 0 14px;
  border-radius: 26px;

  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(45, 42, 62, 0.1);
  box-shadow:
    0 12px 32px rgba(45, 42, 62, 0.16),
    0 2px 8px rgba(45, 42, 62, 0.08);

  color: #2c3e50;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* 그림이 버튼 위로 넘친다(.zm-float-cta__img) — 잘리면 안 된다. */
  overflow: visible;

  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.zm-float-cta:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 40px rgba(45, 42, 62, 0.2),
    0 3px 10px rgba(45, 42, 62, 0.1);
}

.zm-float-cta:active {
  transform: scale(0.96);
}

.zm-float-cta:focus-visible {
  outline: 2px solid #36c9a1;
  outline-offset: 3px;
}

/* 종이와 연필 — 재미나가 무엇인지 한 장으로 말하는 그림이다
   ("화면을 끄고, 종이와 연필로 시작하는 진짜 대화").
   원본 975×757(약 1.29:1) · 배경 투명이라 유리 버튼 위에 그대로 얹힌다.
   ★ loading="lazy" 를 쓰지 않는다 — 이 버튼은 처음부터 화면에 있다.
     늦게 뜨면 버튼이 한 번 덜컹인다. 40KB 라 미리 받아도 부담이 없다. */
/* 그림이 버튼 위로 넘치게 둔다.
   32px·40px 로 버튼 안에 넣어 봤더니 종이의 줄과 연필이 뭉개져 무슨 그림인지 읽히지 않았다
   (두 번 다 화면에서 확인했다). 이 그림은 원래 히어로용 일러스트라 작게는 형태가 안 산다.
   버튼 높이(52px)는 정본 §7 규격이라 지키고, 그림만 위로 넘긴다 — 손으로 올려둔 것처럼 보인다. */
.zm-float-cta__img {
  display: block;
  height: 62px;
  width: auto;
  margin-top: -16px;
  margin-bottom: -4px;
  /* 투명 배경 그림이 유리 위에 떠 보이도록 아주 옅은 그림자만 준다. */
  filter: drop-shadow(0 2px 4px rgba(45, 42, 62, 0.14));
  transition: transform 0.25s ease;
}

/* 연필이 종이로 다가가는 정도의 아주 작은 움직임. 재미나 톤은 "천천히"다. */
.zm-float-cta:hover .zm-float-cta__img {
  transform: translateX(-1px) rotate(-3deg);
}

.zm-float-cta__label {
  line-height: 1;
}

/* 모바일 메뉴가 열리면 비운다.
   ★ 이 저장소가 스크롤 인디케이터에 이미 쓰는 방식을 그대로 따랐다
     (public/css/mobile-menu.css — 형제 선택자 + :has() 이중).
     형제 선택자는 DOM 순서에 의존하고 :has() 는 지원 브라우저가 필요해서 둘 다 건다. */
.wz-mobile-menu.is-open ~ .zm-float-cta,
body:has(.wz-mobile-menu.is-open) .zm-float-cta {
  opacity: 0;
  pointer-events: none;
}

/* 좁은 화면 — 글자를 줄이지 않고 여백만 줄인다. 터치 타깃 높이(52px)는 지킨다. */
@media (max-width: 560px) {
  .zm-float-cta {
    padding: 0 18px 0 12px;
    gap: 8px;
    font-size: 14px;
  }

  .zm-float-cta__img {
    height: 32px;
  }
}

/* 움직임을 줄이도록 설정한 사용자에게는 이동 효과를 끈다. */
@media (prefers-reduced-motion: reduce) {
  .zm-float-cta,
  .zm-float-cta:hover,
  .zm-float-cta:active,
  .zm-float-cta__img,
  .zm-float-cta:hover .zm-float-cta__img {
    transition: none;
    transform: none;
  }
}