.lur-reactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 중앙 정렬 */
    gap: 10px; /* 아이템 간 간격 */
    margin: 0 auto;
    width: 100%;
}

.lur-reaction-button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 50px;  /* 버튼 크기 조정 */
    height: 50px; /* 버튼 크기 조정 */
    margin: 5px;  /* 버튼 간 간격 */
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background-color: transparent;   /* 배경색 제거 */
    position: relative; /* 텍스트와 카운트를 위한 상대 위치 설정 */
    transition: transform 0.2s ease; /* 부드러운 애니메이션 */
}

/* 리액션 이름 숨긴 상태 */
.lur-reaction-button span.reaction-name {
    display: none; /* 기본적으로 숨김 */
    font-size: 12px;
    color: inherit; /* 부모 요소 스타일 적용 */
    position: absolute;
    top: -2em; /* 버튼 위쪽에 위치 */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    padding: 5px;
    background-color: #ffffff;
    color: #222222;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    opacity: 0; /* 기본적으로 투명 */
    visibility: hidden; /* 기본적으로 보이지 않음 */
    transition: opacity 0.3s, visibility 0.3s; /* 애니메이션 부드럽게 */
}

/* 리액션 카운트 기본 스타일 */
.lur-reaction-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit; /* 기본 글자색 */
    transition: all 0.3s ease; /* 텍스트 전환 부드럽게 */
}

/* 호버 시 리액션 이름을 카운트 자리에 표시 */
.lur-reaction-button:hover span.reaction-name {
    display: block; /* 호버 시 텍스트 표시 */
    opacity: 1; /* 투명도 1로 변경 */
    visibility: visible; /* 보이게 설정 */
}

/* 호버 시 카운트 숨기기 */
.lur-reaction-button:hover .lur-reaction-count {
    display: none; /* 카운트 숨기기 */
}

/* 호버 시 버튼 크기 확대 */
.lur-reaction-button:hover {
    transform: scale(1.5); /* 크기 확대 */
}

/* 커버가 올라가 있는 버튼 */
.lur-reaction-button.covered {
    transform: scale(1.5); /* 커진 크기 */
}

/* 호버 상태에서 커버된 버튼은 크기 축소하지 않도록 */
.lur-reaction-button.covered:hover {
    transform: scale(1.3); /* 커진 상태 유지 */
}

/* 반응형: 화면 크기 조정 시 버튼 크기 조정 */
@media (max-width: 768px) {
    .lur-reaction-button {
        width: 40px;  /* 작은 화면에서 버튼 크기 조정 */
        height: 40px; /* 작은 화면에서 버튼 크기 조정 */
    }
    .lur-reaction-button span.reaction-name {
        font-size: 10px; /* 작은 화면에서 글씨 크기 조정 */
    }
}