/* NZ Studio 공통 버튼 시스템
   흰 배경의 주요 CTA: 검정 → 브랜드 보라색 */
:root {
  --nz-button-ink: #111111;
  --nz-button-brand: #5864FF;
  --nz-button-white: #FFFFFF;
}

/* Header typography — keep navigation consistent across every page */
.nz5-header .nz5-nav a {
  font-family: 'Wanted Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.2px !important;
}

.nz5-header {
  height: 88px !important;
  font-family: 'Wanted Sans', sans-serif !important;
  font-weight: 400 !important;
}

.nz5-header .nz5-logo,
.nz5-header .nz5-nav,
.nz5-header .nz5-header-inner {
  font-weight: 400 !important;
}

.nz5-header .nz5-header-inner {
  width: 100%;
  max-width: 1120px !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  align-items: center !important;
}

.nz5-header .nz5-nav {
  gap: 36px !important;
  align-items: center !important;
}

.nz5-header.header-scrolled {
  height: 64px !important;
}

.nz5-header.header-scrolled .nz5-header-inner {
  padding: 0 20px !important;
}

@media (max-width: 768px) {
  .nz5-header .nz5-header-inner {
    padding: 0 20px !important;
  }
}

.nz5-header .nz5-btn-pill {
  font-family: 'Wanted Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.2px !important;
}

:where(
  .nz5-btn-pill,
  .nz5-cta-main,
  .page-hero-cta,
  .plan-cta,
  .hero-plan-btn,
  .quick-cta-btn,
  .form-submit,
  .btn-submit:not(:disabled),
  .btn-url-add,
  .modal-btn
) {
  background: var(--nz-button-ink) !important;
  border-color: var(--nz-button-ink) !important;
  color: var(--nz-button-white) !important;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
}

.mobile-cta {
  background: var(--nz-button-ink) !important;
  color: var(--nz-button-white) !important;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
}

@media (hover: hover) {
  :where(
    .nz5-btn-pill,
    .nz5-cta-main,
    .page-hero-cta,
    .plan-cta,
    .hero-plan-btn,
    .quick-cta-btn,
    .form-submit,
    .btn-submit:not(:disabled),
    .btn-url-add,
    .modal-btn
  ):hover {
    background: var(--nz-button-brand) !important;
    border-color: var(--nz-button-brand) !important;
    color: var(--nz-button-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(88, 100, 255, 0.24);
  }

  .mobile-cta:hover {
    background: var(--nz-button-brand) !important;
    color: var(--nz-button-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(88, 100, 255, 0.24);
  }
}

:where(
  .nz5-btn-pill,
  .nz5-cta-main,
  .page-hero-cta,
  .plan-cta,
  .hero-plan-btn,
  .quick-cta-btn,
  .form-submit,
  .btn-submit:not(:disabled),
  .btn-url-add,
  .modal-btn,
  .mobile-cta
):focus-visible {
  outline: 3px solid rgba(88, 100, 255, 0.28);
  outline-offset: 3px;
  background: var(--nz-button-brand) !important;
  border-color: var(--nz-button-brand) !important;
}

:where(
  .nz5-btn-pill,
  .nz5-cta-main,
  .page-hero-cta,
  .plan-cta,
  .hero-plan-btn,
  .quick-cta-btn,
  .form-submit,
  .btn-submit:not(:disabled),
  .btn-url-add,
  .modal-btn,
  .mobile-cta
):active {
  transform: translateY(0);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .nz5-btn-pill,
    .nz5-cta-main,
    .page-hero-cta,
    .plan-cta,
    .hero-plan-btn,
    .quick-cta-btn,
    .form-submit,
    .btn-submit,
    .btn-url-add,
    .modal-btn,
    .mobile-cta
  ) {
    transition: none !important;
  }
}