/* ============================================================
	rating.css
	Hyomin Design System v1.0 — Rating Component

	컴포넌트:
	- .rating               — 래퍼 (flex row, align-center, gap 8px)
	- .rating__stars        — 별 묶음 (flex row, gap 4px)
	- .rating__star         — 개별 별 (clip-path 별 모양)
	- .rating__score        — 점수 텍스트 (예: 3.5)
	- .rating__count        — 리뷰 수 (예: (1,284))

	수정자:
	- .rating--sm           — Small (별 16px)
	- .rating--lg           — Large (별 24px)
	- .rating--interactive  — 클릭·호버 인터랙티브 모드
	- .rating__star--filled — 채워진 별 (yellow-300)
	- .rating__star--half   — 반별 (왼쪽 노랑, 오른쪽 회색)
	- .rating__star--empty  — 빈 별 (gray-200)

	사용법:
	<!-- Readonly -->
	<div class="rating" data-value="3.5">
		<div class="rating__stars" role="img" aria-label="5점 만점에 3.5점">
			<span class="rating__star rating__star--filled"></span>
			<span class="rating__star rating__star--filled"></span>
			<span class="rating__star rating__star--filled"></span>
			<span class="rating__star rating__star--half"></span>
			<span class="rating__star rating__star--empty"></span>
		</div>
		<span class="rating__score">3.5</span>
		<span class="rating__count">(1,284)</span>
	</div>

	<!-- Interactive (JS로 초기화) -->
	<div class="rating rating--interactive" data-value="0" id="my-rating">
		<div class="rating__stars" role="group" aria-label="별점 선택">
			<span class="rating__star rating__star--empty" data-index="1"></span>
			...
		</div>
		<span class="rating__score">0</span>
	</div>
	============================================================ */

/* ─────────────────────────────────────────
	Wrapper
	───────────────────────────────────────── */

.rating {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
}

/* ─────────────────────────────────────────
	Stars container
	───────────────────────────────────────── */

.rating__stars {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
}

/* ─────────────────────────────────────────
	Individual star — clip-path 별 모양
	───────────────────────────────────────── */

.rating__star {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	/* 5각 별 clip-path */
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	background-color: var(--gray-200);
}

.rating__star--filled {
	background-color: var(--yellow-300);
}

.rating__star--half {
	background: linear-gradient(to right, var(--yellow-300) 50%, var(--gray-200) 50%);
}

/* ─────────────────────────────────────────
	Sizes
	───────────────────────────────────────── */

.rating--sm .rating__star {
	width: 16px;
	height: 16px;
}

.rating--lg .rating__star {
	width: 24px;
	height: 24px;
}

/* ─────────────────────────────────────────
	Text
	───────────────────────────────────────── */

.rating__score {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	color: var(--gray-900);
	line-height: var(--line-height-body-sm);
}

.rating__count {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-regular);
	color: var(--gray-400);
	line-height: var(--line-height-body-sm);
}

/* ─────────────────────────────────────────
	Star Wrap (interactive 전용 포커스 래퍼)
	clip-path를 적용한 .rating__star에는 outline이
	잘려서 보이지 않으므로, 바깥 wrapper에 포커스링을 부여
	───────────────────────────────────────── */

.rating__star-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.rating--interactive .rating__star-wrap {
	cursor: pointer;
	user-select: none;
}

.rating--interactive .rating__star-wrap:focus-visible {
	outline: 2px solid var(--color-accent-main);
	outline-offset: -2px;
	border-radius: 2px;
}

.rating--interactive .rating__star {
	transition:
		transform var(--duration-fast) var(--easing-default),
		background-color var(--duration-fast) var(--easing-default),
		background var(--duration-fast) var(--easing-default);
}

/*.rating--interactive .rating__star-wrap:hover .rating__star {
	transform: scale(1.2);
}*/

/* ─────────────────────────────────────────
	Dark Mode
	───────────────────────────────────────── */

[data-theme="dark"] .rating__star {
	background-color: var(--gray-600);
}

[data-theme="dark"] .rating__star--empty {
	background-color: var(--gray-600);
}

[data-theme="dark"] .rating__star--half {
	background: linear-gradient(to right, var(--yellow-300) 50%, var(--gray-600) 50%);
}

[data-theme="dark"] .rating__score {
	color: var(--gray-100);
}

[data-theme="dark"] .rating__count {
	color: var(--gray-500);
}