/* ------------------------------------------------------------------
   FLOAT CTA — 전 페이지 공통 관심고객 등록 플로팅 버튼

   이 사이트의 스택 순서
     .menu-layer          1000
     .arch-popup           102
     header (sticky)       100   ← 하단바
     .home .video-container 99   ← 홈 인트로 영상
     .float-cta             98   ← 그 아래에 둬야 인트로를 가리지 않는다

   등장 시점은 사이트 자체 신호인 header.active 에 맞춘다.
   basic.js 가 영상 종료 / SVG animationend / architect reveal 세 경로
   모두에서 header 에 active 를 붙이므로, 로고·햄버거 색이 베이지로
   전환되는 순간과 정확히 같이 나타난다.
------------------------------------------------------------------ */

:root {
  --cta-bg: #3c3c3d;        /* --charcoal */
  --cta-fg: #eadbbe;        /* --cream */
  --cta-line: #ad9c86;      /* --brown */
  --cta-bg-hover: #886f50;  /* --brown-dark */
  --cta-fg-hover: #fff;
  --cta-bottom: 58px;       /* header 38px + 20px — JS 가 갱신 */
  --cta-right: 20px;
}

.float-cta {
  position: fixed;
  right: var(--cta-right);
  bottom: var(--cta-bottom);
  z-index: 98;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  box-sizing: border-box;

  background-color: var(--cta-bg);
  border: 1px solid var(--cta-line);
  border-radius: 0;
  color: var(--cta-fg);

  font-family: "SUIT", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;

  /* 인트로가 끝나기 전에는 숨김 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease-out, visibility 800ms,
    background-color 300ms, color 300ms, border-color 300ms;
}

/* header 와 .float-cta 는 둘 다 body 직계 자식이고 header 가 앞에 온다 */
header.active ~ .float-cta {
  opacity: 1;
  visibility: visible;
}

.float-cta:hover,
.float-cta:focus-visible {
  background-color: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg-hover);
}

.float-cta:focus-visible {
  outline: 1px solid var(--cta-bg);
  outline-offset: 2px;
}

/* 화살표 — 사이트의 1px hairline 어휘 유지 */
.float-cta__arrow {
  width: 14px;
  height: 8px;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
}

.float-cta__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 등록 페이지 본인에서는 숨김 */
body.page-template-contact .float-cta {
  display: none !important;
}

/* ------------------------------------------------------------------
   Mobile — 768px 에서 header 가 43px 로 커진다
------------------------------------------------------------------ */
@media all and (max-width: 768px) {
  :root {
    --cta-bottom: 59px;
    --cta-right: 12px;
  }

  .float-cta {
    height: 44px; /* 터치 타깃 최소 44px 유지 */
    padding: 0 16px;
    gap: 8px;
    font-size: 14px;
  }

  .float-cta__arrow {
    width: 12px;
  }
}

/* ------------------------------------------------------------------
   Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .float-cta {
    transition: none;
  }
}