@charset "utf-8";

:root {
	--marker-green:#32cd32;
	--marker-green-border:#28a428;
	--marker-blue:#1E90FF;
	--marker-blue-border:#005bb7;
	--marker-red:#ff0000;
	--marker-red-border:#ac1a1a;
	--marker-orange:#ff8c00;
	--marker-orange-border:#cc8500;
	--marker-yellow:#fcf358;
	--marker-yellow-border:#ccad00;
	--marker-purple:#cc7df5;
	--marker-purple-border:#c25af7;	
	--marker-gray:#c6c6c6;
	--marker-gray-border:#666666;
	--marker-black:#404040;
	--marker-black-border:#000000; 
}

/********************************
 * 마커
 *******************************/
@keyframes blink-marker-event {
	50% {
		box-shadow:1px 1px 10px 4px #ff0000;
	}
}

@keyframes blink-marker-active {
	0% { box-shadow: 0px 0px 8px 5px #ffffff; }
	50% { box-shadow: 0px 0px 8px 5px var(--marker-blue); }
	100% { box-shadow: 0px 0px 8px 5px #ffffff; }
}

@keyframes pulse {
	50% {
		filter: drop-shadow(0 0 7px rgba(255, 0, 0, 1));
	}
}

/* 마커 기본 아이콘 */
.marker {
	
	position:absolute;
	/* z-index:10; */

	width:18px;
	height:18px;
	
	cursor: pointer;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

	outline: 0;

	border-radius: 4px;
		
	background-color:var(--marker-gray);
	border:1px solid var(--marker-gray-border);

	/* transition: all 0.1s linear; */
	transition:transform 0.2s ease; /* 크기 변화에 애니메이션 효과 추가 */
	transform-origin: center center; /* 가운데를 기준으로 설정 */
	
	text-align:center;
	margin:0px;
	padding:0px;
	
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.marker:hover {
	z-index:13;
	transform:scale(1.3); 
}

.marker.active {
	z-index:12;
	transform:scale(1.3, 1.3); 
	animation: blink-marker-active 1s linear infinite;
}

.marker.event {
	z-index:11;

	transform:scale(2, 2);
	animation: blink-marker-event 1s linear infinite; 
}

.marker > .is119 {
	width:30px;
	height:15px;
	
	background-image: url(/image/app/icon/119.png);
	background-size: contain;
	background-repeat: no-repeat;
	
	position:absolute;
	left:8px;
	top:5px;

	animation: pulse 1s infinite;
}

.marker.event.active {
	animation: blink-marker-event 1s linear infinite, blink-marker-active 1s linear infinite; 
}

.marker.green {
	background-color:var(--marker-green);
	border:1px solid var(--marker-green-border);
}

.marker.blue {
	background-color:var(--marker-blue);
	border:1px solid var(--marker-blue-border);
}

.marker.red {
	background-color:var(--marker-red);
	border:1px solid var(--marker-red-border);
}

.marker.orange {
	background-color:var(--marker-orange);
	border:1px solid var(--marker-orange-border);
}

.marker.yellow {
	background-color:var(--marker-yellow);
	border:1px solid var(--marker-yellow-border);
}

.marker.purple {
	background-color:var(--marker-purple);
	border:1px solid var(--marker-purple-border);
}

.marker.gray {
	background-color:var(--marker-gray);
	border:1px solid var(--marker-gray-border);
}

.marker.black {
	background-color:var(--marker-black);
	border:1px solid var(--marker-black-border);
}

.marker.food-shop {
	outline:2px solid var(--marker-red);
}