/* 토글 컨테이너 */
.toggle-container {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

/* 사이드바 WebVR 컨테이너 */
.sidebar-webvr-container,
.sidebar-info-container {
	width: 100%;
	padding: 0;
	margin-bottom: var(--space-2);
}

.sidebar-webvr-container .webvr-button,
.sidebar-info-container .webvr-button {
	display: flex;
	align-items: center;
	background-color: rgba(100, 100, 100, 0.1);
	transition: background-color 0.3s;
	border: 0.7px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(1px);
	border-radius: 5px;
	padding: var(--space-2) var(--space-4);
	color: white;
	width: 100%;
	margin: 0;
	cursor: pointer;
	font-size: var(--font-size-lg);
	z-index: 2;
	position: relative;
	font-weight: var(--font-weight-base);
	justify-content: flex-start;
	height: 38px;
	box-sizing: border-box;
}

.sidebar-webvr-container .webvr-button:hover,
.sidebar-info-container .webvr-button:hover {
	background-color: rgba(30, 30, 30, 0.7);
	transform: translateY(0);
}

/* 토글 버튼 */ 
.toggle-btn {
	display: flex;
	align-items: center;
	background-color: rgba(100, 100, 100, 0.3);
	transition: background-color 0.3s;
	border: 0.7px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(2px);
	border-radius: 5px;
	padding: var(--space-2) var(--space-4);
	color: white;
	width: 100%;
	margin: 0;
	cursor: pointer;
	font-size: var(--font-size-lg);
	z-index: 2;
	position: relative;
}

.toggle-btn:hover {
	background-color: rgba(30, 30, 30, 0.7);
}

.toggle-btn .text-group {
	font-weight: var(--font-weight-base);
	flex: 1;
	margin: 0;
	padding: 0;
}
.toggle-btn .arrow {
	margin-left: auto;
	width: 20px;
	height: 20px;
	transition: transform 0.3s;
	padding: 0;
	transform-origin: center center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 뷰 목록 스타일 - 데스크탑 */
.toggle-wrapper {
	position: relative;
	width: 100%;
}

.toggle-wrapper .view-list {
	position: absolute;
	top: 100%;
	left: 0;
	width: 110%;
	max-width: 110%;
	margin-top: 15px;
	border-left: 1px solid #444;
	padding: 0 0 0 15px;
	max-height: 700px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 3;
	box-sizing: border-box;
}

/* 뷰 목록 스타일 - 모바일 */
.mobile-sidebar .view-list {
	position: relative;
	width: 100%;
	margin: 15px auto;
	border-left: 1px solid #444;
	padding: 0 0 0 15px;
	max-height: 70%;
	overflow-y: auto;
	overflow-x: hidden;
}

/*스크롤바 스타일 */
.view-list::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

.view-list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
}

.view-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

.view-item {
	margin: 10px 7px 0 0;
	padding: 15px;
	background-color: rgba(50, 50, 50, 0.9);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
	word-wrap: break-word;
	white-space: normal;
	backdrop-filter: blur(3px);
	width: calc(100% - 25px); /* 더 넓은 아이템 */
}

/* 이미지 리스트 스타일 */
.view-item-image {
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
}

.view-item-image img {
	transition: transform 0.3s ease;
	display: block;
	width: 100%;
	height: auto;
}

.view-item:hover .view-item-image img {
	transform: scale(1.05);
}

/* 모바일 view-item 스타일 */
.mobile-sidebar .view-item {
	margin: 10px 12px 0 0;
}

.view-item:hover {
	background-color: rgba(40, 40, 40, 0.7);
	transform: translateX(5px);
}

.view-item-active {
	background-color: rgba(100, 100, 100, 0.8) !important;
}

.view-item-title {
	font-size: var(--font-size-xl);
	font-weight: var(--fw-400);
	opacity: var(--opacity-90);
	margin-bottom: var(--space-2);
}

.view-item-description {
	font-size: var(--font-size-lg);
	font-weight: var(--fw-300);
	opacity: var(--opacity-75);
	color: var(--color-text);
}

/* 이미지 오버레이 스타일 */
#image-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(10px);
}

#overlay-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#overlay-media-container {
	position: relative;
	width: 800px;
	max-width: 100%;
	max-height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#overlay-image {
	max-width: 80%;
	max-height: 80vh;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	object-fit: contain;
}

#overlay-video {
	max-width: 100%;
	max-height: 80vh;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	margin: 0 auto; /* 중앙 정렬 */
}

#overlay-close {
	position: fixed;
	top: 20px;
	right: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: var(--font-size-base);
	font-weight: var(--fw-600);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10000;
}

.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: var(--font-size-xl);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
}

#prev-btn {
	left: -20px;
}

#next-btn {
	right: -20px;
}

.nav-arrow:hover {
	background-color: rgba(60, 60, 60, 0.8);
	transform: translateY(-50%) scale(1.1);
}

#overlay-close:hover {
	background-color: rgba(60, 60, 60, 0.8);
}

#overlay-info {
	margin-top: 15px;
	color: white;
	text-align: center;
}

#overlay-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--fw-600);
	margin-bottom: 5px;
}

#overlay-description {
	font-size: var(--font-size-lg);
	opacity: 0.8;
}

/* 데이터 변경 버튼 */
.data-change-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	background-color: rgba(48, 48, 48, 0.7);
	color: white;
	border: none;
	cursor: pointer;
	font-weight: var(--fw-400);
	transition: background-color 0.2s ease;
	backdrop-filter: blur(3px);
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: auto;
	min-width: 90px;
	height: 44px;
	z-index: 100;
	border-radius: 22px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Cesium 지구본 버튼 위치 조정 */
button.cesium-button {
	position: fixed !important;
	bottom: 20px !important;
	right: 120px !important;
	z-index: 100 !important;
}

/* 테크캡슐 로고 - 우측 하단 고정, year-toggle-btn과 동일 여백 */
.techcapsule-logo {
	position: fixed;
	bottom: 20px; /* year-toggle-btn 과 동일 */
	right: 20px;  /* year-toggle-btn 과 동일 */
	z-index: 90;  /* 토글 버튼(100)보다 낮게 배치하여 클릭 방지 */
	width: 100px;
	height: auto;
	opacity: 0.9;
}

/* 모양 공통 - 항상 둥근 모서리로 통일 */
.data-change-btn.rectangle,
.data-change-btn.oval {
	border-radius: 22px;
}

.data-change-btn-text {
	font-size: var(--font-size-lg);
	transition: opacity 0.3s ease;
}

/* 텍스트 전환 애니메이션을 위한 스타일 */

.data-change-btn .text-primary,
.data-change-btn .text-secondary {
	position: absolute;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
	width: 100%;
	left: 0;
	font-size: var(--font-size-lg);
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--fw-400);
}

.data-change-btn:hover{
	background-color: rgba(60, 60, 60, 0.75);
}

.data-change-btn .text-primary {
	opacity: 1;
	transform: translateY(0);
}

.data-change-btn .text-secondary {
	opacity: 0;
	transform: translateY(10px);
}

.data-change-btn.active .text-primary {
	opacity: 0;
	transform: translateY(-10px);
}

.data-change-btn.active .text-secondary {
	opacity: 1;
	transform: translateY(0);
}

/* 연도 토글 버튼 */
.year-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: rgba(48, 48, 48, 0.7);
	color: white;
	border: none;
	cursor: pointer;
	font-weight: var(--fw-400);
	transition: background-color 0.2s ease;
	backdrop-filter: blur(3px);
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 50px;
	height: 50px;
	z-index: 100;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 모양 공통 - 항상 둥근 모서리로 통일 */
.year-toggle-btn.rectangle,
.year-toggle-btn.oval {
	border-radius: 25px;
}

.year-toggle-btn-text {
	font-size: var(--font-size-lg);
	transition: opacity 0.3s ease;
}

/* 텍스트 전환 애니메이션을 위한 스타일 */
.year-toggle-btn .text-primary,
.year-toggle-btn .text-secondary {
	position: absolute;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
	width: 100%;
	left: 0;
	font-size: var(--font-size-lg);
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--fw-400);
}

.year-toggle-btn:hover{
	background-color: rgba(60, 60, 60, 0.75);
}

.year-toggle-btn .text-primary {
	opacity: 1;
	transform: translateY(0);
}

.year-toggle-btn .text-secondary {
	opacity: 0;
	transform: translateY(10px);
}

.year-toggle-btn.active .text-primary {
	opacity: 0;
	transform: translateY(-10px);
}

.year-toggle-btn.active .text-secondary {
	opacity: 1;
	transform: translateY(0);
}

/* 라운드 버튼 */
.round-btn {
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-4);
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(100, 100, 100, 0.3);
	backdrop-filter: blur(2px);
	transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
}

.round-btn-text {
	font-size: var(--font-size-lg);
	white-space: nowrap;
	color: white;
}

.round-btn:hover {
	background-color: rgba(30, 30, 30, 0.7);
	border-color: rgba(255, 255, 255, 0.3);
}

/* 팝업 컨테이너 */
.popup-container {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(5px);
}

.popup-content {
	background-color: rgba(30, 30, 30, 0.5);
	padding: var(--space-6);
	border-radius: var(--space-4);
	/* border: 1px solid rgba(255, 255, 255, 0.2); */
	backdrop-filter: blur(10px);
	max-width: 500px;
	margin: 0 var(--space-4);
	gap: var(--space-3);
}

.popup-message {
	text-align: center;
	color: white;
	font-size: var(--font-size-2xl);
	line-height: 1.6;
	padding: 0 0 var(--space-3) 0;
	background-color: transparent;
}

.popup-buttons {
	display: flex;
	justify-content: center;
	padding: var(--space-2) 0 0 0;
	margin: 0;
	gap: var(--space-5);
}

.popup-button {
	padding: var(--space-2) var(--space-4);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
	cursor: pointer;
	font-size: var(--font-size-xl);
	font-weight: var(--fw-600);
	transition: all 0.3s ease;
	min-width: 100px;
	max-width: 120px;
	backdrop-filter: blur(3px);
}

.popup-button:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

.popup-button:active {
	transform: translateY(0);
}
.popup-button-confirm:hover {
	background-color: rgba(255, 255, 255, 0.4);
}


/* Potree 어노테이션 스타일 오버라이드 */
.annotation-titlebar {
	font-size: var(--font-size-lg) !important;
	border-radius: var(--space-5) !important;
	padding: var(--space-1) var(--space-3) !important;
  }
  
  .annotation-item {
	font-size: var(--font-size-lg) !important;
	border-radius: var(--space-2) !important;
	padding: var(--space-1) var(--space-2) 0 var(--space-2) !important;
	line-height: 1.5 !important;
  }
  
  .annotation-label {
	font-weight: var(--fw-600) !important;
	line-height: 1.5 !important;
  }
  
  .annotation-description {
	padding: var(--space-3) !important;
	margin: var(--space-2) 0 0 0 !important;
	border-radius: var(--space-1) !important;
	max-width: 300px !important;
	max-height: 300px !important; /* 최대 높이 제한 */
	overflow-y: auto !important; /* 세로 스크롤 활성화 */
  }
  
  .annotation-description-content {
	font-size: var(--font-size-lg) !important;
	line-height: 1.4 !important;
  }
  
  /* 어노테이션 설명 내부 HTML 요소 스타일 */
  .annotation-description-content h1 {
	font-size: var(--font-size-3xl) !important;
	font-weight: var(--fw-700) !important;
	margin-bottom: var(--space-2) !important;
	color: white !important;
  }
  
  .annotation-description-content h2 {
	font-size: var(--font-size-2xl) !important;
	font-weight: var(--fw-600) !important;
	margin-bottom: var(--space-2) !important;
	margin-top: var(--space-4) !important;
	color: white !important;
  }
  
  .annotation-description-content p {
	font-size: var(--font-size-lg) !important;
	margin-bottom: var(--space-1) !important;
	color: white !important;
	line-height: 1.4 !important;
	opacity: 0.9;
  }
  
  .annotation-description-content img {
	max-width: 100% !important;
	height: auto !important;
	margin: var(--space-2) auto !important; /* auto 마진으로 중앙 정렬 */
	border-radius: var(--space-1) !important;
	display: block !important; /* 블록 요소로 변경하여 중앙 정렬 가능하게 함 */
  }
  
  .annotation-description-content .highlight {
	color: #8c8eff !important;
	font-weight: var(--fw-600) !important;
  }
  
  .annotation-action-icon {
	width: var(--space-5) !important;
	height: var(--space-5) !important;
  }
  
  .annotation-action-icon:hover {
	width: var(--space-6) !important;
	height: var(--space-6) !important;
  }
  
  .annotation-icon {
	width: var(--space-5) !important;
	height: var(--space-5) !important;
	margin: var(--space-1) !important;
  }
  
  .annotation-description-close {
	opacity: 1.0 !important; /* 완전 불투명하게 설정 */
	margin: 0 0 var(--space-2) var(--space-2) !important;
	filter: none !important; /* invert 필터 제거 */
	position: relative !important;
	z-index: 10 !important;
}

.annotation-description-close img {
	filter: brightness(0) invert(1) !important; /* SVG를 흰색으로 변경 */
	opacity: 0.8 !important;
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}
  
/* 어노테이션 설명 닫기 버튼 호버 효과 수정 */
.annotation-description-close:hover {
	cursor: pointer !important;
	transform: scale(1.1) !important;
	transition: all 0.2s ease !important;
}

.annotation-description-close:hover img {
	opacity: 1.0 !important;
	filter: brightness(0) invert(1) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.8)) !important;
}

/* 인트로 영상 관련 스타일 */
#intro-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
  backdrop-filter: blur(3px); /* 배경 블러 효과 */
  z-index: 1000; /* 가장 위에 위치 */
  transition: opacity 1s ease;
  opacity: 1;
}

#intro-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

#youtube-container {
  width: 800px;
  height: 450px;
  max-width: 80%;
  max-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 8px;
  overflow: visible; /* 스킵 버튼이 컨테이너 밖으로 나갈 수 있도록 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1001; /* 오버레이 배경보다 위에 위치 */
}

#youtube-video {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

#skip-button {
  position: absolute;
  bottom: -60px;
  right: 0;
  padding: var(--space-2) var(--space-4);
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  cursor: pointer;
  font-size: var(--font-size-3xl);
  font-weight: var(--fw-600);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease;
  z-index: 1002; /* 유튜브 컨테이너보다 위에 위치 */
  backdrop-filter: blur(3px);
}

#skip-button.visible {
  opacity: 1;
  transform: translateY(0);
}

#skip-button:hover {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.253);
}

/* 모바일 대응 */
@media (max-width: 767px) {
  #youtube-container {
    width: 90%;
    height: auto;
    aspect-ratio: 16/9;
  }
  /* 라운드 버튼 */
	.round-btn {
		padding: var(--space-2) var(--space-3);
	}
	.annotation-description {
		padding: var(--space-3) !important;
		margin: var(--space-2) 0 0 0 !important;
		border-radius: var(--space-1) !important;
		max-width: 300px !important;
		max-height: 200px !important; /* 최대 높이 제한 */
		overflow-y: auto !important; /* 세로 스크롤 활성화 */
	  }
}

/* 가로 모드 대응 */
@media (max-height: 500px) and (orientation: landscape) {
  #youtube-container {
    width: 70%;
    height: auto;
    aspect-ratio: 16/9;
    max-height: 80vh;
  }
}