/* 좋아요 버튼 프론트 스타일 */

.ep-like {
	display: inline-block;
}

.ep-like__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.ep-like__button:disabled {
	opacity: 0.5;
	cursor: default;
}

.ep-like__button:not(:disabled):hover {
	color: #e0245e;
}

.ep-like__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

/* 커스텀 SVG는 span으로 감싸 크기만 통일하고 원본 색을 유지.
   좋아요 전에는 흑백·반투명, 좋아요 후에 원본 색이 드러난다. */
.ep-like__icon--custom {
	display: inline-flex;
	width: 20px;
	height: 20px;
	fill: initial;
	stroke: initial;
	filter: grayscale(1);
	opacity: 0.45;
}

.ep-like__icon--custom svg {
	width: 100%;
	height: 100%;
}

.ep-like.is-liked .ep-like__icon--custom {
	filter: none;
	opacity: 1;
}

.ep-like.is-liked .ep-like__button {
	color: #e0245e;
}

.ep-like.is-liked .ep-like__icon {
	fill: currentColor;
}

.ep-like__count {
	font-size: 0.9em;
	min-width: 1ch;
}

/* 카운트 로드 전 빈 자리 흔들림 방지 */
.ep-like__count:empty::before {
	content: '\2013';
	opacity: 0.4;
}