/**
 * 기존 클래스 폴백 패치
 * Phase 3 Stage 6 - 2025-11-25
 *
 * 목적: 예측 목록 이미지 문제 수정
 * 임시: BEM 마이그레이션 완료 후 제거 예정
 */

/* ========================================
   기존 클래스 → BEM 변수 매핑
   ======================================== */

/* 프로필 아바타 폴백 */
.profile-avatar,
.user-avatar {
    width: var(--avatar-sm, 32px);  /* 예측 목록용 32px */
    height: var(--avatar-sm, 32px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* 레벨 아이콘 폴백 */
.level-badge,
.level-icon {
    width: var(--level-icon-sm, 32px);  /* 프로필과 동일 크기로 변경 */
    height: var(--level-icon-sm, 32px);
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

/* 크기 변형 - 큰 프로필 */
.profile-avatar-lg,
.user-avatar-lg {
    width: var(--avatar-lg, 56px);
    height: var(--avatar-lg, 56px);
}

/* 크기 변형 - 작은 프로필 */
.profile-avatar-sm,
.user-avatar-sm {
    width: var(--avatar-xs, 24px);
    height: var(--avatar-xs, 24px);
}

/* 크기 변형 - 큰 레벨 */
.level-badge-lg,
.level-icon-lg {
    width: var(--level-icon-lg, 32px);
    height: var(--level-icon-lg, 32px);
}

/* ========================================
   예측 목록 페이지 전용 오버라이드
   list_mobile_fixed.html의 인라인 CSS 대체
   ======================================== */

/* 예측 목록의 프로필 이미지 */
.predictions-list .profile-avatar,
.predictions-list .user-avatar,
#predictions-container .profile-avatar,
#predictions-container .user-avatar {
    width: var(--avatar-sm, 32px);
    height: var(--avatar-sm, 32px);
}

/* 예측 목록의 레벨 배지 */
.predictions-list .level-badge,
.predictions-list .level-icon,
#predictions-container .level-badge,
#predictions-container .level-icon {
    width: var(--level-icon-sm, 32px);
    height: var(--level-icon-sm, 32px);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 모바일에서도 동일한 크기 유지 */
    .profile-avatar,
    .user-avatar {
        width: var(--avatar-sm, 32px);
        height: var(--avatar-sm, 32px);
    }

    .level-badge,
    .level-icon {
        width: var(--level-icon-sm, 32px);
        height: var(--level-icon-sm, 32px);
    }
}

/* ========================================
   JavaScript 동적 생성 요소 지원
   ======================================== */

/* 카드 내부 이미지 크기 제어 */
.prediction-card .profile-avatar,
.prediction-card .user-avatar {
    width: var(--avatar-sm, 32px);
    height: var(--avatar-sm, 32px);
}

.prediction-card .level-badge,
.prediction-card .level-icon {
    width: var(--level-icon-sm, 32px);
    height: var(--level-icon-sm, 32px);
}

/* Tailwind 클래스 오버라이드 (필요시) */
.w-14.h-14 .profile-avatar { /* 56px 컨테이너 내부 */
    width: 100%;
    height: 100%;
}

/* ========================================
   END OF FILE

   상태: 임시 패치
   목적: 예측 목록 이미지 크기 정상화
   제거 시점: BEM 마이그레이션 완료 후
   ======================================== */