/* 5段階星評価のスタイル */

.star-rating {
    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.star-rating .star {
    display: inline-block;
    transition: all 0.2s ease;
}

/* 星の基本スタイル */
.star-rating .star.filled {
    color: #FFC107;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.star-rating .star.empty {
    color: #E0E0E0;
}

/* レベル別の星の色 */
.star-rating.star-5 .star.filled {
    color: #FFD700; /* ゴールド */
    text-shadow: 0 2px 4px rgba(255, 215, 0, 0.4);
    animation: sparkle 1.5s ease-in-out infinite;
}

.star-rating.star-4 .star.filled {
    color: #FFA500; /* オレンジ */
    text-shadow: 0 1px 3px rgba(255, 165, 0, 0.3);
}

.star-rating.star-3 .star.filled {
    color: #3B82F6; /* ブルー */
    text-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
}

.star-rating.star-2 .star.filled {
    color: #9CA3AF; /* グレー */
}

.star-rating.star-1 .star.filled {
    color: #D1D5DB; /* ライトグレー */
}

/* 星のアニメーション（5つ星のみ） */
@keyframes sparkle {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

/* ホバー効果 */
.star-rating:hover .star.filled {
    transform: scale(1.1);
}

/* 期待値の色分け */
.text-yellow-500 { color: #EAB308; }
.text-yellow-400 { color: #FACC15; }
.text-blue-500 { color: #3B82F6; }
.text-gray-500 { color: #6B7280; }
.text-gray-400 { color: #9CA3AF; }

/* レスポンシブ対応 */
@media (max-width: 640px) {
    .star-rating {
        font-size: 1rem;
    }
}

/* ツールチップ */
.star-rating[title] {
    cursor: help;
}

/* テーブル内での星評価調整 */
td .star-rating {
    margin: 0;
    padding: 2px 0;
}

/* 期待値表示の調整 */
.star-rating + .text-xs {
    display: block;
    margin-top: 2px;
    font-weight: 500;
}