/* 기본 스타일 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
//  overflow: hidden; /* 바디 내용이 스크롤되지 않도록 */
}

/* 비활성화된 배경 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* 반투명 검정색 배경 */
  visibility: hidden; /* 기본적으로 숨김 */
  opacity: 0;
  pointer-events: none; /* 클릭을 막음 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 50; /* 비활성화 배경이 버튼들보다 아래에 있어야 함 */
}

/* 퀵버튼 메인 */
.quick-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;  /* 크기 동일하게 설정 */
  height: 60px; /* 크기 동일하게 설정 */
  background-color: #3498db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 100; /* 메인 버튼이 다른 버튼들 위에 있게 설정 */
}

/* 버튼들이 나타날 위치 및 기본 숨김 */
.quick-buttons-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.5s ease;
  transform: translateY(50px); /* 초기 상태에서 아래로 내려놓기 */
  z-index: 101; /* 버튼들이 주 버튼보다 위에 오도록 설정 */
}

/* 각 버튼 스타일 */
.quick-button-item {
  width: 60px;  /* 주 버튼 크기와 동일하게 설정 */
  height: 60px; /* 주 버튼 크기와 동일하게 설정 */
  background-color: #e74c3c;
  border-radius: 50%; /* 원형 버튼 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px; /* 아이콘 크기 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 활성화 시 버튼 보이기 */
.quick-buttons-container.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 위로 슬라이딩 */
}

.quick-buttons-container.show .quick-button-item {
  opacity: 1;
}

.quick-button-item:nth-child(1) {
  transition-delay: 0s;
}

.quick-button-item:nth-child(2) {
  transition-delay: 0.1s;
}

.quick-button-item:nth-child(3) {
  transition-delay: 0.2s;
}

.quick-button-item:nth-child(4) {
  transition-delay: 0.3s;
}