/* 오른쪽 플로팅 위젯 전체 스타일 */
.floating-widget {
  position: fixed;
  top: 18%;
  /* 화면 상단과 중앙의 중간 위치 */
  right: 0;
  z-index: 9999;
  width: 120px;
  /* 기존 100px → 120px로 넓힘 */
  background: linear-gradient(180deg, #5a8fff 0%, #7b5cff 100%);
  border-radius: 30px 0 30px 0;
  box-shadow: 0 4px 24px rgba(90, 143, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 20px 0;
  /* 32px → 20px로 줄임 */
  animation: floatY 6s ease-in-out infinite alternate;
}

/* 위젯 버튼 기본 스타일 개선 */
.widget-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  /* 버튼 최소 너비 추가 */
  min-height: 90px;
  /* 버튼 최소 높이 추가 */
  color: #154492;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  background: #fff;
  border: none;
  border-radius: 18px;
  margin-bottom: 3px;
  /* 6px → 3px로 줄임 */
  box-shadow: 0 2px 8px rgba(90, 143, 255, 0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  padding: 8px 0 8px 0;
  /* 12px → 8px로 줄임 */
}

.widget-btn i {
  font-size: 38px;
  margin-bottom: 8px;
  /* 12px → 8px로 줄임 */
  color: #4e8cff;
  transition: color 0.2s;
}

.widget-btn:hover,
.widget-btn:focus {
  background: linear-gradient(180deg, #7b5cff 0%, #4e8cff 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(123, 92, 255, 0.18);
}

.widget-btn:hover i,
.widget-btn:focus i {
  color: #fff;
}

/* 구분선 더 진하게 */
.widget-divider {
  width: 50%;
  /* 60% → 50%로 줄임 */
  height: 2px;
  background: rgba(78, 140, 255, 0.5);
  /* 투명도 50% 적용 */
  margin: 4px 0 4px 0;
  /* 8px → 4px로 줄임 */
  border-radius: 1px;
}

/* 둥근 모서리 및 그림자 */
.floating-widget {
  border-radius: 30px 0 30px 0;
  box-shadow: 0 4px 24px rgba(90, 143, 255, 0.18);
}

/* 천천히 상하로 움직이는 애니메이션 */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(40px);
  }
}

/* 반응형 유지 */
@media (max-width: 600px) {
  .floating-widget {
    width: 70px;
    padding: 12px 0;
    /* 18px → 12px로 줄임 */
  }

  .widget-btn {
    width: 60px;
    height: 70px;
    font-size: 14px;
    padding: 5px 0 5px 0;
    /* 7px → 5px로 줄임 */
  }

  .widget-btn i {
    font-size: 24px;
    margin-bottom: 5px;
    /* 7px → 5px로 줄임 */
  }
}

/* 위젯 - 고급지고 세련된 스타일 적용 */
.floating-widget {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  border-radius: 16px 0 0 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  padding: 12px !important;
  /* 16px → 12px로 줄임 */
  gap: 4px !important;
  /* 8px → 4px로 더 줄임 */
  animation: none !important;
}

.widget-btn {
  width: 56px !important;
  height: 56px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px !important;
  transition: background 0.3s, transform 0.3s !important;
  margin-bottom: 1px !important;
  /* 3px → 1px로 더 줄임 */
}

.widget-btn i {
  font-size: 20px !important;
  margin-bottom: 2px !important;
  /* 4px → 2px로 줄임 */
}

.widget-btn span {
  font-size: 12px !important;
  line-height: 1.2;
}

.widget-btn:hover,
.widget-btn:focus {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-4px) !important;
}

.widget-divider {
  width: 1px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  margin: 2px 0 !important;
  /* 5px → 2px로 더 줄임 */
}

/* 전체 컨테이너 스타일 (첨부 이미지 스타일) */
.floating-widget {
  position: fixed;
  top: 18%;
  right: 0;
  z-index: 9999;
  background: #fff !important;
  border-radius: 20px 0 0 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 6px !important;
  /* 12px 8px → 8px 6px로 줄임 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px !important;
  /* 16px → 8px로 줄임 */
  animation: widget-float 3s ease-in-out infinite !important;
}

/* 버튼 스타일: 배경 없음, 파란색 아이콘/텍스트 */
.widget-btn {
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #154492 !important;
  text-decoration: none !important;
  transition: none !important;
}

.widget-btn i {
  font-size: 28px !important;
  color: #154492 !important;
  margin-bottom: 4px !important;
  /* 8px → 4px로 줄임 */
}

.widget-btn span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #154492 !important;
  text-align: center !important;
  /* 텍스트 센터 정렬 */
}

/* 구분선 스타일: 파란색, 얇게 */
.widget-divider {
  width: 50% !important;
  /* 80% → 50%로 줄임 */
  height: 1px !important;
  background: rgba(21, 68, 146, 0.5) !important;
  /* 투명도 50% 적용 */
  margin: 5px 0 !important;
  /* 10px → 5px로 줄임 */
}

/* 모바일 반응형: 간격 조정 및 너비 확보 */
@media (max-width: 600px) {
  .floating-widget {
    padding: 4px 3px !important;
    /* 50% 더 키움 */
    gap: 2px !important;
    /* 간격도 늘림 */
    width: 72px !important;
    /* 50% 더 키움 (48px → 72px) */
    min-height: auto !important;
    /* 최소 높이 제거 */
  }

  .widget-btn i {
    font-size: 24px !important;
    /* 50% 더 키움 (16px → 24px) */
    margin-bottom: 2px !important;
    /* 마진도 늘림 */
  }

  .widget-btn span {
    font-size: 10px !important;
    /* 50% 더 키움 (7px → 10px) */
    line-height: 1.1 !important;
    /* 라인 높이 증가 */
    margin-top: 2px !important;
    /* 상단 마진 추가 */
    margin-bottom: 2px !important;
    /* 하단 마진 추가 */
  }

  .widget-divider {
    width: 40% !important;
    /* 구분선도 늘림 */
    margin: 2px 0 !important;
    /* 마진 증가 */
    height: 1px !important;
    /* 구분선 높이 */
  }

  .widget-btn {
    margin-bottom: 1px !important;
    padding: 4px 0 !important;
    /* 상하 패딩 증가 */
    min-height: auto !important;
    /* 최소 높이 제거 */
  }

  /* 두 번째 위젯 위치도 조정 - 겹침 방지를 위해 충분한 간격 확보 */
  #floatingWidgetApplication {
    top: calc(18% + 140px) !important;
    /* 겹침 방지를 위해 충분한 간격 */
  }
}

/* 부드러운 위젯 부양 애니메이션 */
@keyframes widget-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}