/* pay-brand.css — 결제사 브랜드 색 (WEB-N-023).
 *
 * 색 값은 여기 한 곳에만 둔다. 템플릿은 클래스만 쓴다.
 *   토스   : 파랑 바탕 + 흰 글자   (토스페이먼츠 공지 이미지 기준)
 *   Paddle : 노랑 바탕 + 검정 글자 (Paddle 로고·배너 기준)
 * 값은 근사치다. 각 사 공식 브랜드 가이드 값으로 바꿀 때 이 변수만 고친다.
 *
 * 선택자는 button./a. 를 붙여 Tailwind CDN preflight 보다 세게 둔다.
 * preflight 의 `[type='button'] { background-color: transparent }` 는 클래스와 같은 세기(0,1,0)이고
 * 페이지 로드 뒤 <style> 로 늦게 들어와 이긴다 — 2026-10-30 운영에서 버튼이 투명하게 보였다.
 * 이 파일을 고치면 base.html 의 ?v= 도 올린다 (404·옛 버전 캐시 4시간 회피).
 */
:root {
    --pay-toss-bg: #0064FF;
    --pay-toss-bg-hover: #0050CC;
    --pay-toss-fg: #FFFFFF;
    --pay-paddle-bg: #FFD200;
    --pay-paddle-bg-hover: #F0C400;
    --pay-paddle-fg: #111111;
}

/* 결제 버튼 — 결제 페이지의 마지막 버튼, 모달 버튼, debug 링크 */
button.pay-btn-toss,
a.pay-btn-toss {
    background-color: var(--pay-toss-bg);
    color: var(--pay-toss-fg);
}
button.pay-btn-toss:hover,
a.pay-btn-toss:hover {
    background-color: var(--pay-toss-bg-hover);
}
button.pay-btn-paddle,
a.pay-btn-paddle {
    background-color: var(--pay-paddle-bg);
    color: var(--pay-paddle-fg);
}
button.pay-btn-paddle:hover,
a.pay-btn-paddle:hover {
    background-color: var(--pay-paddle-bg-hover);
}

/* 동의 전·점검중 — 같은 색을 연하게, 마우스를 올려도 진해지지 않는다 */
button.pay-btn-disabled,
button.pay-btn-toss:disabled,
button.pay-btn-paddle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
button.pay-btn-toss.pay-btn-disabled:hover,
button.pay-btn-toss:disabled:hover {
    background-color: var(--pay-toss-bg);
}
button.pay-btn-paddle.pay-btn-disabled:hover,
button.pay-btn-paddle:disabled:hover {
    background-color: var(--pay-paddle-bg);
}

/* 결제사 배지 — 제품 페이지 구매 버튼 아래 (toss)/(paddle) */
span.pay-badge-toss,
span.pay-badge-paddle {
    display: inline-block;
    border-radius: 9999px;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: 0.02em;
}
span.pay-badge-toss {
    background-color: var(--pay-toss-bg);
    color: var(--pay-toss-fg);
}
span.pay-badge-paddle {
    background-color: var(--pay-paddle-bg);
    color: var(--pay-paddle-fg);
}