@charset "utf-8";

/* 로딩 이미지 스타일 */
        #loadingSpinner {
			display: none; /* 초기에는 숨김 */
			position: fixed; /* 화면에 고정 */
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); /* 중앙 정렬 */
			z-index: 1000; /* 다른 요소 위에 표시 */

			/* 스피너 모양 정의 */
			width: 50px;
			height: 50px;
			border: 5px solid #f3f3f3; /* 연한 회색 테두리 (스피너의 기본 원형) */
			border-top: 5px solid #3498db; /* 파란색 테두리 (회전하는 부분) */
			border-radius: 50%; /* 원형으로 만듦 */

			/* 애니메이션 적용 */
			animation: spin 1s linear infinite; /* spin이라는 애니메이션을 1초 동안 선형(linear)으로 무한 반복 */
		}

		/* 애니메이션 키프레임 정의 */
		@keyframes spin {
			0% { transform: translate(-50%, -50%) rotate(0deg); } /* 시작 시 0도 회전 */
			100% { transform: translate(-50%, -50%) rotate(360deg); } /* 끝 시 360도 회전 */
		}

		/* (선택 사항) 로딩 중 오버레이 */
		#loadingOverlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3); /* 반투명 검은색 */
			z-index: 999; /* 스피너보다 아래에 위치 */
		}