/* BASIC css start */
.floating-banner {
  position: fixed;
  top: 80%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

/* 개별 버튼 */
.floating-banner .banner-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #f9f9f9;
  padding: 8px 16px;
  border-radius: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Font Awesome 아이콘 크기 & 색상 */
.floating-banner .banner-btn i {
  font-size: 20px;
  width: 20px;
  text-align: center;
  color: #555;
}
    
/* 텍스트 스타일 */
.floating-banner .banner-btn span {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}

/* 호버 효과 */
.floating-banner .banner-btn:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
    
.floating-banner .banner-btn .material-symbols-outlined {
  /* 기존 폰트 설정 유지 */
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
  font-size: 20px;
  line-height: 1;
  color: #fff;

  /* 원형 배경 */
  background-color: #0080ff; /* 배경색 */
  border-radius: 50%; /* 완전 원형 */
  padding: 8px; /* 원 크기 조정 */
  display: inline-flex; /* 가운데 정렬 */
  align-items: center;
  justify-content: center;
}
/* 이미지 아이콘에 원형 배경 입히기 */
.floating-banner .banner-btn .banner-icon {
  /* 이미지 본연의 크기 */
  width: 35px;
  height: 35px;

  /* circle 배경 */
  border-radius: 50%;

  /* Flex 가운데 정렬 */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 이미지 비율 유지 */
  object-fit: contain;
}

/* BASIC css end */