/* =========================================================================
   CTA 다크 + 글로우 보더 시안 (테스트용 / 롤백 가능)
   -------------------------------------------------------------------------
   롤백 방법: header.html / contact.html 의 이 파일 <link> 한 줄만 지우면
   원래 스카이블루 그라데이션 CTA로 즉시 복구됩니다. (원본 CSS 무수정)

   원본 CTA는 각 템플릿 인라인 <style>에 있어 문서 순서상 뒤에 오므로
   여기서는 !important 로 덮어씁니다.

   배경에 따라 두 톤으로 나눕니다.
   - DARK  : 밝은 배경 위 (섹션 CTA, contact 폼, 팝업, 스크롤된 navbar)
   - LIGHT : 어두운 배경 위 (히어로, 상단 투명 navbar, 모바일 offcanvas)
   ========================================================================= */

:root {
    --cta-dark-bg-from: #0d1524;
    --cta-dark-bg-to: #16243c;
    --cta-glow: 45, 208, 254;   /* --primary-light 계열 RGB */
}

/* -------------------------------------------------------------------------
   DARK — 밝은 배경 위 CTA
   ------------------------------------------------------------------------- */
.btn-cta,
.btn-contact,
.ds-cta,
.popup-cta-btn,
.process-cta-btn,
.navbar.scrolled .btn-nav-cta,
body.service-page .navbar .btn-nav-cta {
    background: linear-gradient(135deg, var(--cta-dark-bg-from) 0%, var(--cta-dark-bg-to) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--cta-glow), 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(var(--cta-glow), 0.18),
        0 0 18px rgba(var(--cta-glow), 0.30),
        inset 0 0 14px rgba(var(--cta-glow), 0.07) !important;
    animation: ctaGlowPulse 2.8s ease-in-out infinite;
}

.btn-cta:hover,
.btn-contact:hover,
.ds-cta:hover,
.popup-cta-btn:hover,
.process-cta-btn:hover,
.navbar.scrolled .btn-nav-cta:hover,
body.service-page .navbar .btn-nav-cta:hover {
    background: linear-gradient(135deg, #12203a 0%, #1d3557 100%) !important;
    border-color: rgba(var(--cta-glow), 0.9) !important;
    box-shadow:
        0 0 0 1px rgba(var(--cta-glow), 0.35),
        0 0 28px rgba(var(--cta-glow), 0.55),
        inset 0 0 18px rgba(var(--cta-glow), 0.12) !important;
    color: #ffffff !important;
    animation-play-state: paused;
}

/* 보더 글로우 맥동 (다크) */
@keyframes ctaGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(var(--cta-glow), 0.18),
            0 0 14px rgba(var(--cta-glow), 0.24),
            inset 0 0 12px rgba(var(--cta-glow), 0.06);
        border-color: rgba(var(--cta-glow), 0.45);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(var(--cta-glow), 0.32),
            0 0 26px rgba(var(--cta-glow), 0.48),
            inset 0 0 18px rgba(var(--cta-glow), 0.12);
        border-color: rgba(var(--cta-glow), 0.85);
    }
}

/* -------------------------------------------------------------------------
   LIGHT — 어두운 배경 위 CTA (화이트 배경 + 검정 폰트)
   ------------------------------------------------------------------------- */
.hero-btn-primary,
.btn-offcanvas-cta,
.navbar:not(.scrolled) .btn-nav-cta {
    background: #ffffff !important;
    color: #0d1524 !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 0 22px rgba(255, 255, 255, 0.35),
        0 0 40px rgba(var(--cta-glow), 0.20) !important;
    animation: ctaGlowPulseLight 2.8s ease-in-out infinite;
}

.hero-btn-primary:hover,
.btn-offcanvas-cta:hover,
.navbar:not(.scrolled) .btn-nav-cta:hover {
    background: #ffffff !important;
    color: #0d1524 !important;
    border-color: #ffffff !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.45),
        0 0 32px rgba(255, 255, 255, 0.55),
        0 0 60px rgba(var(--cta-glow), 0.35) !important;
    animation-play-state: paused;
}

/* 보더 글로우 맥동 (라이트) */
@keyframes ctaGlowPulseLight {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.20),
            0 0 16px rgba(255, 255, 255, 0.28),
            0 0 32px rgba(var(--cta-glow), 0.15);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.40),
            0 0 30px rgba(255, 255, 255, 0.50),
            0 0 56px rgba(var(--cta-glow), 0.32);
    }
}

/* navbar CTA: 스크롤 전(화이트) → 후(다크) 전환을 부드럽게 */
.btn-nav-cta {
    transition: background 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .hero-btn-primary,
    .btn-cta,
    .btn-contact,
    .btn-nav-cta,
    .btn-offcanvas-cta,
    .ds-cta,
    .popup-cta-btn,
    .process-cta-btn {
        animation: none;
    }
}