/**
 * CTA 포인트색 — `cta-primary`, `cta-secondary`, `cta-tertiary`(상세 계열)
 * 기존 style-new.css 비수정. 로드 순서: style-new.css 이후.
 */

.cta-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
}

.cta-primary:hover:not(:disabled) {
  background: #1d4ed8 !important;
}

.cta-primary:active:not(:disabled) {
  background: #1e40af !important;
}

.cta-primary:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}

.compare-start-btn.cta-primary:disabled,
.compare-start-btn.cta-primary:disabled:hover,
.compare-start-btn.cta-primary:disabled:active {
  background: #9ca3af !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
}

body.dark-mode .cta-primary {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

body.dark-mode .cta-primary:hover:not(:disabled) {
  background: #2563eb !important;
}

body.dark-mode .cta-primary:active:not(:disabled) {
  background: #1d4ed8 !important;
}

body.dark-mode .cta-primary:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}

body.dark-mode .compare-start-btn.cta-primary:disabled,
body.dark-mode .compare-start-btn.cta-primary:disabled:hover,
body.dark-mode .compare-start-btn.cta-primary:disabled:active {
  background: var(--compare-border, #3a4a63) !important;
  color: var(--compare-muted, #aeb9c8) !important;
  border: 1px solid var(--compare-border, #3a4a63) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- cta-secondary: 비교 담기 계열 (primary보다 한 톤 밝은 파랑) ---------- */

.btn-add-to-compare.cta-secondary,
.brand-detail-compare-add-btn--secondary.cta-secondary,
.brand-detail-compare-add-btn--peer.cta-secondary,
a.brand-detail-footer-go-compare.cta-secondary,
a.brand-detail-peer-compare-btn.cta-secondary,
button.brand-detail-peer-compare-btn.cta-secondary {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

.btn-add-to-compare.cta-secondary:hover:not(:disabled),
.brand-detail-compare-add-btn--secondary.cta-secondary:hover:not(:disabled),
.brand-detail-compare-add-btn--peer.cta-secondary:hover:not(:disabled),
a.brand-detail-footer-go-compare.cta-secondary:hover,
a.brand-detail-peer-compare-btn.cta-secondary:hover,
button.brand-detail-peer-compare-btn.cta-secondary:hover {
  background: #2563eb !important;
}

.btn-add-to-compare.cta-secondary:active:not(:disabled),
.brand-detail-compare-add-btn--secondary.cta-secondary:active:not(:disabled),
.brand-detail-compare-add-btn--peer.cta-secondary:active:not(:disabled),
a.brand-detail-footer-go-compare.cta-secondary:active,
a.brand-detail-peer-compare-btn.cta-secondary:active,
button.brand-detail-peer-compare-btn.cta-secondary:active {
  background: #1d4ed8 !important;
}

.btn-add-to-compare.cta-secondary:focus-visible,
.brand-detail-compare-add-btn--secondary.cta-secondary:focus-visible,
.brand-detail-compare-add-btn--peer.cta-secondary:focus-visible,
a.brand-detail-footer-go-compare.cta-secondary:focus-visible,
a.brand-detail-peer-compare-btn.cta-secondary:focus-visible,
button.brand-detail-peer-compare-btn.cta-secondary:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}

/* 랭킹: 이미 담은 행 — 여전히 클릭(제거) 가능, 톤만 완화 */
.btn-add-to-compare.ranking-compare-btn.cta-secondary.is-in-basket {
  background: #93c5fd !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
  cursor: pointer !important;
}

.btn-add-to-compare.ranking-compare-btn.cta-secondary.is-in-basket:hover {
  background: #60a5fa !important;
  color: #ffffff !important;
}

/* 상세 하단 secondary: 담김/비활성 — 기존 회색 체계 유지 */
.brand-detail-compare-add-btn--secondary.cta-secondary.is-added,
.brand-detail-compare-add-btn--secondary.cta-secondary:disabled,
.brand-detail-compare-add-btn--secondary.cta-secondary.is-added:hover,
.brand-detail-compare-add-btn--secondary.cta-secondary:disabled:hover {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 동종 peer: 담김 후에도 제거 가능 — 연한 파랑 */
.brand-detail-compare-add-btn--peer.cta-secondary.is-added {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  cursor: pointer !important;
}

.brand-detail-compare-add-btn--peer.cta-secondary.is-added:hover {
  background: #bfdbfe !important;
  color: #1e40af !important;
}

/* 검색/랭킹 공통: disabled (최대 개수 / 이미 담김 등) */
.btn-add-to-compare.cta-secondary:disabled,
.btn-add-to-compare.cta-secondary:disabled:hover,
.btn-add-to-compare.cta-secondary:disabled:active {
  background: #9ca3af !important;
  color: #ffffff !important;
  border-color: #9ca3af !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
}

/* secondary는 하단에서만 disabled 속성 — 위 블록과 중복 허용 */

body.dark-mode .btn-add-to-compare.cta-secondary,
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary,
body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary,
body.dark-mode a.brand-detail-footer-go-compare.cta-secondary,
body.dark-mode a.brand-detail-peer-compare-btn.cta-secondary {
  background: #60a5fa !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.dark-mode .btn-add-to-compare.cta-secondary:hover:not(:disabled),
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary:hover:not(:disabled),
body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary:hover:not(:disabled),
body.dark-mode a.brand-detail-footer-go-compare.cta-secondary:hover,
body.dark-mode a.brand-detail-peer-compare-btn.cta-secondary:hover,
body.dark-mode button.brand-detail-peer-compare-btn.cta-secondary:hover {
  background: #3b82f6 !important;
}

body.dark-mode .btn-add-to-compare.cta-secondary:active:not(:disabled),
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary:active:not(:disabled),
body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary:active:not(:disabled) {
  background: #2563eb !important;
}

body.dark-mode .btn-add-to-compare.cta-secondary:focus-visible,
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary:focus-visible,
body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary:focus-visible {
  outline: 2px solid #93c5fd !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35) !important;
}

body.dark-mode .btn-add-to-compare.ranking-compare-btn.cta-secondary.is-in-basket {
  background: rgba(96, 165, 250, 0.28) !important;
  color: #f0f9ff !important;
  border-color: #60a5fa !important;
}

body.dark-mode .btn-add-to-compare.ranking-compare-btn.cta-secondary.is-in-basket:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary.is-added,
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary:disabled,
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary.is-added:hover,
body.dark-mode .brand-detail-compare-add-btn--secondary.cta-secondary:disabled:hover {
  background: #374151 !important;
  color: #9ca3af !important;
  border-color: #4b5563 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
}

body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary.is-added {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #dbeafe !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .brand-detail-compare-add-btn--peer.cta-secondary.is-added:hover {
  background: rgba(59, 130, 246, 0.38) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-add-to-compare.cta-secondary:disabled,
body.dark-mode .btn-add-to-compare.cta-secondary:disabled:hover,
body.dark-mode .btn-add-to-compare.cta-secondary:disabled:active {
  background: var(--compare-border, #3a4a63) !important;
  color: var(--compare-muted, #aeb9c8) !important;
  border-color: var(--compare-border, #3a4a63) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- cta-tertiary: 상세보기/상세 (secondary보다 한 단계 약한 파랑·링크형) ---------- */

.btn-detail.search-result-btn-secondary.cta-tertiary {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

.btn-detail.search-result-btn-secondary.cta-tertiary:hover:not(:disabled) {
  background: #bfdbfe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

.btn-detail.search-result-btn-secondary.cta-tertiary:active:not(:disabled) {
  background: #93c5fd !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
}

.btn-detail.search-result-btn-secondary.cta-tertiary:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.ranking-page .btn-detail.ranking-detail-btn.cta-tertiary {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

.ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:hover {
  background: #bfdbfe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

.ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:active {
  background: #93c5fd !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
}

.ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.compare-tray-detail.cta-tertiary {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

.compare-tray-detail.cta-tertiary:hover {
  background: #bfdbfe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

.compare-tray-detail.cta-tertiary:active {
  background: #93c5fd !important;
  color: #1e3a8a !important;
  border-color: #60a5fa !important;
}

.compare-tray-detail.cta-tertiary:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .btn-detail.search-result-btn-secondary.cta-tertiary {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .btn-detail.search-result-btn-secondary.cta-tertiary:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.28) !important;
  color: #dbeafe !important;
  border-color: #60a5fa !important;
}

body.dark-mode .btn-detail.search-result-btn-secondary.cta-tertiary:active:not(:disabled) {
  background: rgba(37, 99, 235, 0.42) !important;
  color: #f0f9ff !important;
  border-color: #93c5fd !important;
}

body.dark-mode .btn-detail.search-result-btn-secondary.cta-tertiary:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

body.dark-mode .ranking-page .btn-detail.ranking-detail-btn.cta-tertiary {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:hover {
  background: rgba(37, 99, 235, 0.28) !important;
  color: #dbeafe !important;
  border-color: #60a5fa !important;
}

body.dark-mode .ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:active {
  background: rgba(37, 99, 235, 0.42) !important;
  color: #f0f9ff !important;
  border-color: #93c5fd !important;
}

body.dark-mode .ranking-page .btn-detail.ranking-detail-btn.cta-tertiary:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

body.dark-mode .compare-tray-detail.cta-tertiary {
  background: #1e3a5f !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .compare-tray-detail.cta-tertiary:hover {
  background: rgba(37, 99, 235, 0.28) !important;
  color: #dbeafe !important;
  border-color: #60a5fa !important;
}

body.dark-mode .compare-tray-detail.cta-tertiary:active {
  background: rgba(37, 99, 235, 0.42) !important;
  color: #f0f9ff !important;
  border-color: #93c5fd !important;
}

body.dark-mode .compare-tray-detail.cta-tertiary:focus-visible {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

/* PC shell(≥769): 상세 버튼만 tertiary — 연도별(compare-tray-yearly)은 style-new 유지 */
@media (min-width: 769px) {
  .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
  }

  .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary:hover {
    background: #bfdbfe !important;
    color: #1e40af !important;
    border-color: #93c5fd !important;
  }

  .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary:active {
    background: #93c5fd !important;
    color: #1e3a8a !important;
    border-color: #60a5fa !important;
  }

  body.dark-mode .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
  }

  body.dark-mode .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary:hover {
    background: rgba(37, 99, 235, 0.28) !important;
    color: #dbeafe !important;
    border-color: #60a5fa !important;
  }

  body.dark-mode .mobile-compare-tray-shell .compare-tray-detail.cta-tertiary:active {
    background: rgba(37, 99, 235, 0.42) !important;
    color: #f0f9ff !important;
    border-color: #93c5fd !important;
  }
}