/* =========================================================================
   global-cta.css — 하단 sticky 전환 바 (페이히어/토스 이식)
   -------------------------------------------------------------------------
   JS(global-cta.js)가 <body> 끝에 주입하는 fixed 오버레이 바 스코프.
   인라인 <style> 뒤에 로드되어 소스 순서로 이김. 전역 오염 방지를 위해
   전부 .gcta- 프리픽스로 스코프. 문서 흐름 안 건드림(fixed 오버레이).
   콘텐츠 기본값 숨김 없음 — 바는 JS 주입 전용 요소라 안전.
   토큰: 오렌지 #f97316 / 진오렌지 #e85d0c, 틴트 rgba(249,115,22,.12) · #fff1e8,
        텍스트 #17181c, 서브 #6b7684, 표면 흰, pill 999px,
        섀도 0 8px 30px rgba(17,17,17,.12).
   모션: transform/opacity 만. reduced-motion 이면 슬라이드 대신 페이드.
   ========================================================================= */

/* ---- 1. 바 컨테이너 ---------------------------------------------------- */
.gcta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45; /* 상단바보다 아래 · 콘텐츠보다 위 */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px clamp(16px, 4vw, 40px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(17, 17, 17, .07);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 8px 30px rgba(17, 17, 17, .12);
  /* 진입 전 초기상태: 아래로 숨김 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.gcta-bar.gcta-shown {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---- 2. 내부 레이아웃 -------------------------------------------------- */
.gcta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 1080px;
  min-height: 44px;
}

.gcta-copy {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #17181c;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gcta-copy .gcta-copy-accent {
  color: #e85d0c;
}

.gcta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---- 3. pill CTA ------------------------------------------------------- */
.gcta-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(249, 115, 22, .32);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gcta-cta:hover {
  background: #e85d0c;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(249, 115, 22, .38);
}

.gcta-cta:active {
  transform: translateY(0);
}

.gcta-cta:focus-visible {
  outline: 2px solid #e85d0c;
  outline-offset: 3px;
}

.gcta-cta .gcta-cta-arrow {
  font-size: 15px;
  line-height: 1;
}

/* ---- 4. 닫기(×) -------------------------------------------------------- */
.gcta-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, .09);
  border-radius: 999px;
  background: rgba(249, 115, 22, .12);
  color: #6b7684;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.gcta-close:hover {
  color: #17181c;
  background: #fff1e8;
  border-color: rgba(249, 115, 22, .42);
}

.gcta-close:focus-visible {
  outline: 2px solid #e85d0c;
  outline-offset: 2px;
}

/* ---- 5. support-bubble 상승 (바에 안 가리게) --------------------------- */
/* 기존 인라인 .support-bubble 스타일은 유지, transform 만 얹는다. */
.support-bubble.gcta-lifted {
  transform: translateY(-76px);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

/* ---- 6. 모바일 -------------------------------------------------------- */
@media (max-width: 640px) {
  .gcta-bar {
    padding: 9px 14px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  }

  .gcta-inner {
    min-height: 42px;
    gap: 10px;
  }

  /* 모바일선 카피 축약: 짧은 버전만 노출 */
  .gcta-copy {
    font-size: 13.5px;
  }

  .gcta-copy .gcta-copy-full {
    display: none;
  }

  .gcta-cta {
    flex: 0 0 auto;
    padding: 12px 18px;
    font-size: 14.5px;
  }

  .support-bubble.gcta-lifted {
    transform: translateY(-68px);
  }
}

/* 아주 좁은 화면: 카피 생략하고 CTA 강조 */
@media (max-width: 380px) {
  .gcta-copy {
    display: none;
  }

  .gcta-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .gcta-cta {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* 데스크톱: 짧은 버전 숨기고 풀 카피 노출 */
@media (min-width: 641px) {
  .gcta-copy .gcta-copy-short {
    display: none;
  }
}

/* ---- 7. reduced-motion: 슬라이드 대신 페이드 -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gcta-bar {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }

  .gcta-bar.gcta-shown {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .gcta-cta,
  .gcta-cta:hover,
  .gcta-cta:active {
    transform: none;
  }

  /* 상승은 위치 오프셋으로 유지하되 애니 제거 */
  .support-bubble.gcta-lifted {
    transition: none;
  }
}

/* CTA 문구 통일('무료 샘플 리포트 신청')로 길어져 모바일선 카피 숨기고 버튼 확장 */
@media (max-width: 640px) {
  .gcta-bar .gcta-copy { display: none; }
  .gcta-bar .gcta-actions { flex: 1 1 auto; }
  .gcta-bar .gcta-cta { flex: 1 1 auto; justify-content: center; padding-left: 14px; padding-right: 14px; }
}
