#cursor {position: fixed;z-index: 999999;left: 0;top: 0;pointer-events: none;will-change: transform;}

@media (hover: hover) and (pointer: fine) {
	.cursor__circle {
		width: 0rem;
		height: 0rem;
		margin-top: -50%;
		margin-left: -50%;
		border-radius: 50%;
		background: transparent;
		border: solid 1px transparent;

		/* 💡 핵심: transform을 제외한 넓이/높이/배경색에만 부드러운 전환 효과(transition) 적용 */
		transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
					height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
					background-color 0.3s ease;
	}

	#cursor.arrow .cursor__circle{width: 12.8rem;height: 12.8rem;background:rgba(38,104,255,0.8);border: transparent;}
	#cursor.arrow::after{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

	#cursor.arrowDrag .cursor__circle{width: 10.0rem;height: 10.0rem;background: rgba(0, 0, 0, 1);border: transparent;}

	#cursor.arrowDrag::after {
		content: '';position: absolute;left: 0;top: 0;transform:translate(-50%,-50%);width: 100%;height: 100%;content: '제품소개 바로가기';font-size: 1.5rem;color: #fff;font-weight: 500;text-align:center;padding: 10px;
		/* 💡 디테일: 원이 커질 때 글자도 부드럽게 나타나도록 투명도 애니메이션 추가 */
		animation: cursorFadeIn 0.3s forwards;
	}

	#cursor.arrowDrag::before {
		content: '';position: absolute;left: -7.6rem;top: -7.6rem;width: 15.2rem;aspect-ratio: 1;background: url(../../img/business_more_txt.png) no-repeat center/contain;
		/* 💡 디테일: 기존 spin과 fadeIn 애니메이션 다중 적용 */
		animation: cursorFadeIn 0.3s forwards, spin 10s infinite linear;
	}

	#cursor.subtle .cursor__circle{width: 5.0rem;height: 5.0rem;opacity: 0.3;}
	#cursor.subLink .cursor__circle{width: 5.0rem;height: 5.0rem;opacity: 0.8;}
	#cursor.overlay .cursor__circle{width: 4.8rem;height: 4.8rem;background-color: rgba(227, 222, 193, 1);border-color: transparent;}
	#cursor.arrowPrev1 .cursor__circle{width: 5.0rem;height: 5.0rem;opacity: 0.3;}
}

/* 글자와 회전 이미지 페이드인용 키프레임 */
@keyframes cursorFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}