/* ===========================================
   FluxLMS 아이콘 — 이모지 대체
   Prefix: .flms-i

   디자인 표준(docs/plans/2026-08-08-fluxlms-class-platform.md §7.1):
   이모지 금지. 상태·별점·체크는 순수 CSS 도형으로 그린다. 폰트/플랫폼에 따라
   모양이 달라지는 이모지와 달리 어디서나 같은 크기·같은 색으로 렌더된다.
   =========================================== */

:root {
	--flms-ok: #047857;
	--flms-fail: #DC2626;
	--flms-warn: #B45309;
	--flms-muted: #9CA3AF;
	--flms-star: #F59E0B;
}

/* --- 공통 --- */
.flms-i {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	line-height: 1;
}

/* --- 체크 (합격·완료·설치됨) --- */
.flms-i--check {
	width: 1em;
	height: 1em;
	position: relative;
}
.flms-i--check::after {
	content: "";
	position: absolute;
	left: 30%;
	top: 8%;
	width: 30%;
	height: 60%;
	border: solid var(--flms-ok);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-sizing: border-box;
}

/* --- 엑스 (불합격·오답·미설치) --- */
.flms-i--cross {
	width: 1em;
	height: 1em;
	position: relative;
}
.flms-i--cross::before,
.flms-i--cross::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 10%;
	width: 2px;
	height: 80%;
	background: var(--flms-fail);
	transform-origin: center;
}
.flms-i--cross::before { transform: translateX(-50%) rotate(45deg); }
.flms-i--cross::after  { transform: translateX(-50%) rotate(-45deg); }

/* --- 빈 체크박스 (미완료 단계) --- */
.flms-i--box {
	width: .9em;
	height: .9em;
	border: 2px solid var(--flms-muted);
	border-radius: 3px;
	box-sizing: border-box;
}

/* --- 경고 (삼각형) --- */
.flms-i--warn {
	width: 0;
	height: 0;
	border-left: .5em solid transparent;
	border-right: .5em solid transparent;
	border-bottom: .85em solid var(--flms-warn);
	position: relative;
}

/* --- 드래그 핸들 (점 격자) --- */
.flms-i--drag {
	width: 10px;
	height: 16px;
	cursor: grab;
	background-image: radial-gradient(var(--flms-muted) 1.5px, transparent 1.5px);
	background-size: 5px 5px;
	background-position: center;
}

/* ===========================================
   별점 — 이모지 ★ 대신 CSS 마스크 별
   마크업: <span class="flms-rating" style="--flms-rating:4.5" role="img" aria-label="5점 만점에 4.5점">
   =========================================== */
.flms-rating {
	--flms-rating: 0;
	display: inline-block;
	position: relative;
	width: 5.5em;
	height: 1em;
	vertical-align: middle;
	/* 별 5개를 반복 마스크로 그린다 — 폰트 의존 없음 */
	background: var(--flms-muted);
	-webkit-mask-image: var(--flms-star-svg);
	mask-image: var(--flms-star-svg);
	-webkit-mask-size: 1.1em 1em;
	mask-size: 1.1em 1em;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}
.flms-rating::before {
	content: "";
	position: absolute;
	inset: 0;
	width: calc(var(--flms-rating) / 5 * 100%);
	background: var(--flms-star);
	-webkit-mask-image: var(--flms-star-svg);
	mask-image: var(--flms-star-svg);
	-webkit-mask-size: 1.1em 1em;
	mask-size: 1.1em 1em;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

/* 별 모양 SVG (data URI — 외부 요청 없음) */
:root {
	--flms-star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M11 1.5l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5L11 16.4l-5.8 3.05 1.1-6.5L1.6 8.35l6.5-.95z' fill='%23000'/%3E%3C/svg%3E");
}

/* 숫자 평점 표기 (별 옆 4.8 같은 값) */
.flms-rating-value {
	font-variant-numeric: tabular-nums;
	margin-left: .35em;
	color: inherit;
}

/* --- 상태 뱃지 (합격/불합격 라벨) --- */
.flms-status {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-weight: 600;
}
.flms-status--ok   { color: var(--flms-ok); }
.flms-status--fail { color: var(--flms-fail); }
.flms-status--warn { color: var(--flms-warn); }