/* ===============================================
   credit-badge.css — V2 Credit Tier Badges (2026-04-19)
   ===============================================
   📌 일반(general) / 프리미엄(premium) 구분 배지
   📌 7eyes 서비스 전체 톤(보라/네온/그라데이션)에 맞춤
   =============================================== */

.credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.credit-badge__icon {
    font-size: 11px;
    line-height: 1;
}

.credit-badge__label {
    line-height: 1;
}

/* ===== 일반 (General) — 차분한 슬레이트/시안 ===== */
.credit-badge--general {
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(56,189,248,0.18) 100%);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}

/* ===== 프리미엄 (Premium) — 골드/퍼플 그라데이션 ===== */
.credit-badge--premium {
    background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(168,85,247,0.22) 100%);
    color: #fbbf24;
    border-color: rgba(251,191,36,0.45);
    box-shadow: 0 0 0 0 rgba(251,191,36,0);
}

.credit-badge--premium:hover {
    box-shadow: 0 0 12px rgba(251,191,36,0.35);
    transform: translateY(-1px);
}

/* ===== Compact (옵션 카드 우측 상단 등) ===== */
.credit-badge--compact {
    padding: 2px 7px;
    font-size: 10px;
    gap: 3px;
}

/* ===== 옵션 카드 컨테이너용 위치 보조 클래스 ===== */
.credit-badge-anchor {
    position: relative;
}

.credit-badge-anchor .credit-badge--corner {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

/* ===== Create 버튼 내 비용 칩 (Notion/Linear 스타일 통합 배지) =====
   📌 버튼 안에 숏컷 라벨처럼 자연스럽게 통합되도록 디자인.
   📌 일반(general)은 절제된 모노톤, 프리미엄(premium)은 골드/퍼플 강조. */
.credit-cost-hint {
    display: none;          /* JS가 inline-flex로 토글 */
    align-items: baseline;
    gap: 1px;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.18);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    vertical-align: middle;
    /* backdrop-filter 제거: 부유감 줄이고 버튼과 일체화 */
}

.credit-cost-hint .cch-num {
    font-size: 13px;
    font-weight: 800;
}
.credit-cost-hint .cch-unit {
    font-size: 10.5px;
    opacity: 0.75;
    margin-left: 1px;
    font-weight: 600;
}

/* 프리미엄: 골드/퍼플 그라데이션, 강조는 절제 */
.credit-cost-hint--premium {
    background: linear-gradient(135deg, rgba(251,191,36,0.22) 0%, rgba(168,85,247,0.20) 100%);
    border-color: rgba(251,191,36,0.45);
    color: #fde68a;
    box-shadow: inset 0 0 6px rgba(251,191,36,0.10);
}

/* legacy 잔존 클래스: 이제 사용 안 하지만 호환을 위해 유지 (no-op) */
.credit-cost-hint__icon { display: none; }

/* ===== 드롭다운(option)에는 배경/border 적용 어려우므로 텍스트 prefix로 처리 ===== */
/* (CreditTier.suffixLabel 이용) */

/* ===== 카테고리 헤더 인라인 표시 ===== */
.credit-tier-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.credit-tier-inline--premium {
    color: #fbbf24;
}

/* ===== 다크/라이트 호환 (라이트 배경에서도 가독성 유지) ===== */
@media (prefers-color-scheme: light) {
    .credit-badge--general {
        color: #4f46e5;
    }
    .credit-badge--premium {
        color: #b45309;
    }
}