/**
 * Joyn LMS 리뷰 스타일
 * ============================================================
 * 파일 경로: joyn-lms/assets/css/joyn-lms-review.css
 * 설명: 프리뷰 v2.0 기준
 * ============================================================
 */

/* ── 별점 (공용) ─── */
.joyn-stars { display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; }
.joyn-stars--sm { font-size: 14px; }
.joyn-stars--lg { font-size: 20px; }
.star-filled { color: #f5a623; }
.star-empty  { color: #ddd; }
.star-hover  { color: #f5c854 !important; }
.star-active { color: #f5a623 !important; }
.joyn-star-rating { display: inline-flex; gap: 4px; font-size: 24px; cursor: pointer; }
.joyn-star-rating__star { color: #ddd; transition: color 0.15s; user-select: none; }
.joyn-star-rating__star.star-filled, .joyn-star-rating__star.star-active { color: #f5a623; }
.joyn-star-rating__star:hover { transform: scale(1.1); }

/* ── 리뷰 작성 폼 ─── */
.joyn-review-form { background: #f8f9fa; border: 1px solid #e8e8e8; border-radius: 10px; padding: 24px; margin-top: 24px; }
.joyn-review-form h3 { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.joyn-review-form__rating { margin-bottom: 16px; }
.joyn-review-form__rating label, .joyn-review-form__field label { display: block; font-size: 13px; font-weight: 600; color: #646970; margin-bottom: 6px; }
.joyn-review-form__field { margin-bottom: 14px; }
.joyn-review-form__field input[type="text"], .joyn-review-form__field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; line-height: 1.5; background: #fff; transition: border-color 0.15s; }
.joyn-review-form__field input:focus, .joyn-review-form__field textarea:focus { border-color: #4a90d9; outline: none; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); }
.joyn-review-form .joyn-btn--primary { display: inline-block; padding: 10px 24px; background: #4a90d9; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; width: auto; }
.joyn-review-form .joyn-btn--primary:hover { background: #3a7bc8; }
.joyn-review-login, .joyn-review-info { color: #8c8f94; font-size: 14px; text-align: center; padding: 20px; background: #f8f9fa; border-radius: 8px; }

/* ── 리뷰 리스트 ─── */
.joyn-reviews-list { display: flex; flex-direction: column; }
.joyn-review-item { padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
.joyn-review-item:last-child { border-bottom: none; }
.joyn-review-item__header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.joyn-review-item__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.joyn-review-item__meta { flex: 1; }
.joyn-review-item__meta strong { display: block; font-size: 14px; }
.joyn-review-item__date { font-size: 12px; color: #8c8f94; }
.joyn-lms .joyn-review-item__title { font-size: 15px; font-weight: 600; margin: 8px 0 4px; }
.joyn-review-item__content { font-size: 14px; color: #3c434a; line-height: 1.6; }
.joyn-review-item__actions { display: flex; gap: 8px; margin-top: 8px; }
.joyn-review-item__actions button { padding: 4px 10px; font-size: 12px; background: none; border: 1px solid #ddd; border-radius: 4px; color: #646970; cursor: pointer; transition: all 0.15s; }
.joyn-review-item__actions button:hover { border-color: #4a90d9; color: #4a90d9; }
.joyn-review-delete:hover { border-color: #e74c3c !important; color: #e74c3c !important; }
.joyn-review-edit-form { padding: 16px; background: #f8f9fa; border-radius: 8px; }
.joyn-reviews-load-more { display: block; width: 100%; padding: 12px; margin-top: 16px; background: #f0f0f0; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; color: #3c434a; cursor: pointer; transition: background 0.15s; }
.joyn-reviews-load-more:hover { background: #e0e0e0; }
.joyn-toast { animation: joyn-toast-in 0.3s ease; }
@keyframes joyn-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ── 반응형 ─── */
@media (max-width: 600px) {
    .joyn-reviews-summary { flex-direction: column; text-align: center; }
    .joyn-review-form { padding: 16px; }
    .joyn-star-rating { font-size: 28px; }
}