/* 레벨 아이콘 스타일 - 통합 뱃지 (컴팩트 버전) */
.level-icon-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    position: relative;
    padding: 3px;
    background: #f5f5f5; /* 기본 배경 */
}

.level-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-text {
    font-size: 9px;
    font-weight: 700;
}

/* 레벨별 색상 - 화려한 그라데이션 */
.level-beginner .level-icon-wrapper {
    background: linear-gradient(135deg, #8d6e63 0%, #a1887f 100%);
    box-shadow: 0 2px 8px rgba(141, 110, 99, 0.3);
    border: 2px solid #bcaaa4;
}

.level-beginner .level-icon,
.level-beginner .level-text {
    color: #4e342e;
}

.level-intermediate .level-icon-wrapper {
    background: linear-gradient(135deg, #78909c 0%, #b0bec5 100%);
    box-shadow: 0 2px 8px rgba(120, 144, 156, 0.3);
    border: 2px solid #b0bec5;
}

.level-intermediate .level-icon,
.level-intermediate .level-text {
    color: #37474f;
}

.level-advanced .level-icon-wrapper {
    background: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%);
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.4);
    border: 2px solid #64b5f6;
}

.level-advanced .level-icon,
.level-advanced .level-text {
    color: #0d47a1;
}

.level-expert .level-icon-wrapper {
    background: linear-gradient(135deg, #8e24aa 0%, #ab47bc 100%);
    box-shadow: 0 2px 8px rgba(142, 36, 170, 0.4);
    border: 2px solid #ba68c8;
}

.level-expert .level-icon,
.level-expert .level-text {
    color: #4a148c;
}

.level-master .level-icon-wrapper {
    background: linear-gradient(135deg, #fb8c00 0%, #ffa726 100%);
    box-shadow: 0 2px 12px rgba(251, 140, 0, 0.5);
    border: 2px solid #ffb74d;
}

.level-master .level-icon,
.level-master .level-text {
    color: #e65100;
}

.level-legend .level-icon-wrapper {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 237, 78, 0.3);
    border: 2px solid #fff59d;
    animation: shine 2s ease-in-out infinite;
}

.level-legend .level-icon,
.level-legend .level-text {
    color: #f57f17;
}

.level-admin .level-icon-wrapper {
    background: linear-gradient(135deg, #c62828 0%, #ef5350 100%);
    box-shadow: 0 2px 12px rgba(198, 40, 40, 0.5);
    border: 2px solid #e57373;
}

.level-admin .level-icon,
.level-admin .level-text {
    color: #b71c1c;
}

/* 마스터 레벨 반짝임 애니메이션 */
@keyframes shine {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 237, 78, 0.3);
    }
    50% {
        box-shadow: 0 2px 16px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 237, 78, 0.5);
    }
}

/* 프로필 이미지와 함께 사용될 때 */
.profile-with-level {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-image-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-image-wrapper .default-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 24px;
}

/* 게시글 목록에서의 레벨 아이콘 */
.board-table .level-icon-wrapper {
    justify-content: center;
    margin: 0 auto;
}

/* 댓글에서의 레벨 아이콘 */
.comment-item .level-icon-wrapper {
    margin-right: 8px;
}

/* 헤더에서의 레벨 아이콘 - 작은 크기 */
.layout-header-profile-btn .level-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.layout-header-profile-btn .level-icon {
    font-size: 12px;
}

.layout-header-profile-btn .level-text {
    font-size: 8px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .level-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        gap: 1px !important;
        padding: 2px !important;
    }
    
    .level-icon {
        font-size: 12px !important;
    }
    
    .level-text {
        font-size: 8px !important;
    }
    
    /* 게시글 상세 작성자 영역 */
    .post-info .level-icon-wrapper,
    .author-info .level-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
    
    .post-info .level-icon,
    .author-info .level-icon {
        font-size: 12px !important;
    }
    
    .post-info .level-text,
    .author-info .level-text {
        font-size: 8px !important;
    }
    
    /* 댓글에서 더 작게 */
    .comment-item .level-icon-wrapper {
        width: 28px !important;
        height: 28px !important;
        margin-right: 6px !important;
        border-radius: 6px !important;
    }
    
    .comment-item .level-icon {
        font-size: 10px !important;
    }
    
    .comment-item .level-text {
        font-size: 7px !important;
    }
}