/* src/main/resources/static/css/style.css */

/* Global styles and typography */
:root {
	--header-height-pc: 56px;
	--header-height-tablet: 50px;
	--header-height-mobile: 45px;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', 'Pretendard', sans-serif;
	background-color: #0d0d0d;
	color: #e0e0e0;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	
	/* 헤더 높이만큼 상단 여백을 줍니다. (PC 기준) */
	padding-top: var(--header-height-pc);
}

/* Main Container: Header 아래의 모든 공간을 차지합니다. */
.main-container {
	flex-grow: 1;
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
}

/* Map Container: 지도를 포함하며 main-container 내에서 확장됩니다. */
#map-container {
	position: relative;
	flex-grow: 1;
	height: 100%;
	overflow: hidden;
}

/* Mapbox GL JS 맵 자체 */
#map {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	touch-action: none; 
}

/* Custom Button Style (custom-btn) */
.custom-btn {
	margin-top: -40px;
	background-color: rgba(255, 255, 255, 0.1);
	color: #a74646;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(15px);
	border-radius: 12px;
	padding: 10px 15px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}
/* 버튼 호버(마우스 올렸을 때) 상태 스타일 */
	 .custom-btn:hover {
		 background-color: rgba(255, 255, 255, 0.2);
		 border-color: rgba(255, 255, 255, 0.4);
		 transform: translateY(-2px);
		 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	 }

	 /* 버튼 활성 상태 스타일 */
	 .custom-btn.active {
		 background-color: #a74646; /* 빨간색 계열 */
		 color: #ffffff; /* 흰색 글씨 */
		 border-color: #a74646;
		 box-shadow: 0 0 15px rgba(167, 70, 70, 0.7);
	 }


/* --- 로딩 오버레이 스타일 --- */
#loader-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	color: #ffffff;
	font-size: 1.2em;
	transition: opacity 0.5s ease-out;
}

#loader-overlay.hidden {
	opacity: 0;
	pointer-events: none;
}

.spinner {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #3498db;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	margin-bottom: 15px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Control panel on the right side */
#control-panel {
	position: absolute; 
	right: 20px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15px;
	/* PC (769px 이상)일 때 적용되는 기본값. 헤더 높이 + 10px 마진 */
	top: calc(var(--header-height-pc) + 10px); 
}

/* Mini-map styling */
#minimap-container {
	background-color: rgba(18, 18, 18, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
}
#minimap {
	width: 200px;
	height: 200px;
	border-radius: 8px;
}

/* Coordinates display */
#coordinates {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 14px;
	z-index: 10;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	white-space: nowrap;
}

/* --- Custom Marker Styles (DOM Markers for Peaks) --- */
.marker-container {
	width: 0px; 
	height: 0px; 
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
	transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease; 
	opacity: 0;
}
.marker-container[style*="display: flex"] {
	opacity: 1;
}

.peak-marker .marker-svg {
	width: 100%;
	height: 100%;
	fill: #8B4513;
	stroke: #FFD700;
	stroke-width: 2;
	transition: all 0.2s ease;
}
.peak-marker .marker-svg:hover {
	transform: scale(1.2);
	fill: #A0522D;
	stroke: #FFFFFF;
}

/* --- Mapbox GL JS 팝업 스타일 --- */
.mapboxgl-popup {
	max-width: 280px;
	font-family: 'Segoe UI', sans-serif;
	font-size: 14px;
}
.mapboxgl-popup-content {
	background: rgba(18, 18, 18, 0.95);
	backdrop-filter: blur(20px);
	color: #ffffff;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.mapboxgl-popup-close-button {
	color: #fff;
	font-size: 20px;
	outline: none;
}
.mapboxgl-popup-tip {
	border-top-color: rgba(18, 18, 18, 0.95) !important;
}
.mapboxgl-popup-content h6 {
	margin-bottom: 5px;
	font-weight: bold;
	color: #00BFFF;
}
.mapboxgl-popup-content p.text-muted {
	color: #cccccc !important;
	line-height: 1.4;
}

/* --- Modal Styling --- */
.main-modal .modal-content {
	background-color: rgba(18, 18, 18, 0.95);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	color: #ffffff;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.modal-backdrop.show {
	opacity: 0.8;
	background-color: #000;
}
.tab-container .nav-link {
	color: rgba(255, 255, 255, 0.6);
	transition: all 0.3s ease;
}
.tab-container .nav-link.active {
	color: #ffffff;
	background-color: transparent;
	border-color: #4ECDC4;
	font-weight: 600;
}
.tab-container .tab-pane {
	animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tab-container input, .tab-container textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
}
.tab-container input::placeholder, .tab-container textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.tab-container .btn-primary {
	background-color: #4ECDC4;
	border-color: #4ECDC4;
}
.gradient-text {
	background: linear-gradient(45deg, #FF6B6B, #FFD166, #4ECDC4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* --- Responsive design for smaller screens --- */
/* style.css에서는 PC용 반응형 설정만 하고, #control-panel top은 header.css에 오버라이딩 됩니다. */
@media (max-width: 768px) {
	#coordinates {
	bottom: 15px;
	padding: 8px 12px;
	font-size: 12px;
	}
	.modal-dialog {
	margin: 1rem;
	}
	#minimap-container {
	display: none;
	}
}