.review-card {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.2s;
}
.review-card:hover { transform: translateY(-5px); }

/* 별점 반쪽 구현을 위한 CSS */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.star-rating label {
    width: 15px; /* 반쪽 별 너비 */
    overflow: hidden;
    cursor: pointer;
    font-size: 30px;
    color: #ddd;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #ff0558; } /* 왓챠 핑크색 */

<style>
/* 에디터 툴바 전체 컨테이너 초기화 및 가로 정렬 강제 */
.ra-toolbar {
    display: block !important; /* 플렉스 박스 무력화 */
    text-align: left !important;
    padding: 10px !important;
    background: #fff !important;
    border-bottom: 1px solid #ddd !important;
}

/* 툴바 내의 모든 테이블 구조 초기화 */
.ra-toolbar table {
    display: table !important;
    width: auto !important;
    border-collapse: collapse !important;
}

/* 툴바 td 초기화 (버튼이 테이블 셀 안에 있는 경우) */
.ra-toolbar td {
    display: table-cell !important;
    padding: 0 !important;
    width: auto !important;
    vertical-align: middle !important;
}

/* ★핵심: 모든 버튼 요소(span, b, a)를 두 번째 이미지처럼 깔끔한 사각 박스로 변환 */
.ra-toolbar span.ra-btn,
.ra-toolbar .ra-btn b,
.ra-toolbar a.ra-btn,
.ra-toolbar .ra-icon {
    /* 첫 번째 이미지 증상(세로 나열) 해결 */
    display: inline-block !important;
    
    /* 두 번째 이미지 스타일 적용 */
    border: 1px solid #dee2e6 !important; /* 연한 회색 테두리 */
    border-radius: 6px !important; /* 둥근 모서리 */
    background: #fff !important; /* 하얀 배경 */
    
    /* 여백 및 크기 조정 */
    padding: 6px 10px !important; /* 버튼 내부 여백 */
    margin: 2px !important; /* 버튼 간의 간격 */
    
    /* 정렬 및 기타 스타일 */
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: all 0.2s; /* 호버 효과를 위한 애니메이션 */
}

/* 폰트 선택 드롭다운 메뉴 스타일 조정 */
.ra-toolbar select {
    display: inline-block !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    height: 32px !important;
    font-size: 13px !important;
    padding: 0 5px !important;
    vertical-align: middle !important;
}

/* 버튼 위에 마우스를 올렸을 때 효과 (호버) */
.ra-toolbar .ra-btn:hover,
.ra-toolbar span.ra-btn:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}
</style>