/* ========================================
   Toss Style Badge Component
   토스 스타일 배지/태그 컴포넌트

   - 단색 배경 (그라디언트 제거)
   - 보더 제거 (토스 스타일)
   - 일관된 패딩과 radius
   ======================================== */

/* ========================================
   기본 배지 스타일
   ======================================== */
.toss-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--toss-radius-sm);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border: none;
    transition: all var(--toss-duration-fast) var(--toss-ease);
}

/* ========================================
   색상 변형
   ======================================== */

/* 기본 (회색) */
.toss-badge--default {
    background: var(--toss-bg-base);
    color: var(--toss-text-secondary);
}

/* 파랑 (정보) */
.toss-badge--blue {
    background: rgba(49, 130, 246, 0.12);
    color: var(--toss-blue-primary);
}

/* 빨강 (할인/에러) */
.toss-badge--red {
    background: rgba(222, 54, 47, 0.12);
    color: var(--toss-status-error);
}

/* 초록 (성공/친환경) */
.toss-badge--green {
    background: rgba(55, 210, 141, 0.12);
    color: #2E7D32;
}

[data-theme="dark"] .toss-badge--green {
    color: var(--toss-status-success);
}

/* 주황 (경고/특가) */
.toss-badge--orange {
    background: rgba(253, 153, 51, 0.12);
    color: #E65100;
}

[data-theme="dark"] .toss-badge--orange {
    color: var(--toss-status-warning);
}

/* 보라 */
.toss-badge--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}

/* ========================================
   특수 배지
   ======================================== */

/* 할인 배지 */
.toss-badge--discount {
    background: rgba(222, 54, 47, 0.12);
    color: var(--toss-status-error);
    font-weight: 700;
}

/* 특가 배지 */
.toss-badge--sale {
    background: rgba(253, 153, 51, 0.12);
    color: #E65100;
}

/* 신규 배지 */
.toss-badge--new {
    background: rgba(49, 130, 246, 0.12);
    color: var(--toss-blue-primary);
}

/* 인기 배지 */
.toss-badge--popular {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
}

/* 반려동물 동반 가능 */
.toss-badge--pet {
    background: rgba(55, 210, 141, 0.12);
    color: #2E7D32;
}

/* AI 추천 배지 */
.toss-badge--ai {
    background: linear-gradient(135deg, rgba(49, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: var(--toss-blue-primary);
}

/* ========================================
   배지 크기 변형
   ======================================== */

/* 작은 배지 */
.toss-badge--sm {
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 4px;
}

/* 큰 배지 */
.toss-badge--lg {
    padding: 6px 14px;
    font-size: var(--toss-font-body);
}

/* ========================================
   배지 아이콘
   ======================================== */
.toss-badge__icon {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    line-height: 1;
}

.toss-badge__icon svg {
    width: 12px;
    height: 12px;
}

.toss-badge--sm .toss-badge__icon svg {
    width: 10px;
    height: 10px;
}

/* ========================================
   기존 배지 호환 스타일
   (점진적 마이그레이션용)
   ======================================== */

/* promotion-badge - 토스 스타일로 변환 */
.promotion-badge {
    background: rgba(253, 153, 51, 0.12) !important;
    border: none !important;
    border-radius: var(--toss-radius-sm) !important;
    padding: 4px 8px !important;
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    font-weight: 600 !important;
    transition: all var(--toss-duration-fast) var(--toss-ease) !important;
}

.promotion-badge .fire-icon {
    font-size: 12px !important;
    line-height: 1 !important;
}

.promotion-badge .promo-text {
    color: #E65100 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #E65100 !important;
}

/* promotion-badge 호버 효과 제거 (토스 스타일) */
.promotion-badge:hover {
    transform: none !important;
    filter: none !important;
}

/* pet-friendly-badge - 토스 스타일로 변환 */
.pet-friendly-badge {
    background: rgba(55, 210, 141, 0.12) !important;
    border: none !important;
    border-radius: var(--toss-radius-sm) !important;
    padding: 4px 8px !important;
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    font-weight: 600 !important;
    transition: all var(--toss-duration-fast) var(--toss-ease) !important;
}

.pet-friendly-badge .pet-icon {
    font-size: 12px !important;
    line-height: 1 !important;
}

.pet-friendly-badge .pet-text {
    color: #2E7D32 !important;
}

/* pet-friendly-badge 호버 효과 제거 (토스 스타일) */
.pet-friendly-badge:hover {
    transform: none !important;
    filter: none !important;
}

/* card-badges 컨테이너 */
.card-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--toss-space-1) !important;
    margin-top: 2px !important;
}

.card-badges .promotion-badge,
.card-badges .pet-friendly-badge {
    height: auto !important;
    line-height: 1.3 !important;
}

/* ========================================
   notion-tag 호환 스타일
   ======================================== */
.notion-tag {
    background: var(--toss-bg-base) !important;
    color: var(--toss-text-secondary) !important;
    border: none !important;
    border-radius: var(--toss-radius-sm) !important;
    font-family: var(--toss-font-sans) !important;
    font-size: var(--toss-font-caption) !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
}

.notion-tag--blue {
    background: rgba(49, 130, 246, 0.12) !important;
    color: var(--toss-blue-primary) !important;
}

.notion-tag--red {
    background: rgba(222, 54, 47, 0.12) !important;
    color: var(--toss-status-error) !important;
}

.notion-tag--green {
    background: rgba(55, 210, 141, 0.12) !important;
    color: #2E7D32 !important;
}

.notion-tag--orange {
    background: rgba(253, 153, 51, 0.12) !important;
    color: #E65100 !important;
}

.notion-tag--purple {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #7C3AED !important;
}

/* ========================================
   AI Score 배지 - 토스 스타일
   ======================================== */
.ai-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-caption);
    font-weight: 600;
    color: var(--toss-blue-primary);
}

.ai-score-badge__icon {
    width: 14px;
    height: 14px;
}

.ai-score-number {
    color: var(--toss-blue-primary) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--toss-blue-primary) !important;
    animation: none !important;
}

/* ========================================
   카테고리 필터 배지
   ======================================== */
.toss-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--toss-bg-base);
    color: var(--toss-text-secondary);
    border: none;
    border-radius: var(--toss-radius-full);
    font-family: var(--toss-font-sans);
    font-size: var(--toss-font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--toss-duration-fast) var(--toss-ease);
    white-space: nowrap;
}

.toss-filter-badge:hover {
    background: var(--toss-bg-grey-opacity);
    color: var(--toss-text-primary);
}

.toss-filter-badge.active {
    background: var(--toss-text-primary);
    color: var(--toss-bg-white);
}

.toss-filter-badge__icon {
    font-size: 14px;
}

/* 기존 subcategory-filter 호환 */
.subcategory-filter,
.filter-button.subcategory-filter {
    background: var(--toss-bg-base) !important;
    color: var(--toss-text-secondary) !important;
    border: none !important;
    border-radius: var(--toss-radius-full) !important;
    font-family: var(--toss-font-sans) !important;
    font-weight: 600 !important;
    transition: all var(--toss-duration-fast) var(--toss-ease) !important;
}

.subcategory-filter:hover,
.filter-button.subcategory-filter:hover {
    background: var(--toss-bg-grey-opacity) !important;
    color: var(--toss-text-primary) !important;
}

.subcategory-filter.active,
.filter-button.subcategory-filter.active {
    background: var(--toss-text-primary) !important;
    color: var(--toss-bg-white) !important;
}

/* shimmer 효과 제거 */
.subcategory-filter.active::before,
.subcategory-filter.active::after {
    display: none !important;
}

/* ========================================
   모바일 최적화
   ======================================== */
@media (max-width: 767px) {
    .toss-badge {
        padding: 3px 8px;
        font-size: 11px;
    }

    .toss-badge--sm {
        padding: 2px 5px;
        font-size: 10px;
    }

    .toss-badge__icon svg {
        width: 10px;
        height: 10px;
    }

    .card-badges .promotion-badge,
    .card-badges .pet-friendly-badge {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    .toss-filter-badge {
        padding: 6px 12px;
        font-size: var(--toss-font-caption);
    }
}