@charset "UTF-8";
/* 스위치 전체 배경 */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 90px; /* 스위치 전체 너비 */
  height: 40px; /* 스위치 높이 */
  background-color: #e9ecef; /* 라이트 모드 배경 (밝은 회색) */
  border-radius: 50px; /* 알약 모양 */
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 아이콘 배경(하얀색 동그라미) */
.theme-icon-cover {
  position: absolute;
  left: 5px; /* 시작 위치 (왼쪽) */
  width: 32px; /* 동그라미 크기 */
  height: 32px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 0.3초 동안 부드럽게 이동 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 스위치 안의 텍스트 (Dark / Light) */
.theme-text {
  font-size: 15spx;
  font-weight: bold;
  color: #495057;
  width: 100%;
  text-align: right;
  padding-right: 6px;
  transition: color 0.3s;
  z-index: 1;
}

/* 다크 모드일 때 스위치 배경색 */
[data-bs-theme=dark] .theme-switch {
  background-color: #495057;
}

/* 다크 모드일 때 동그라미를 오른쪽으로 48px 이동 */
[data-bs-theme=dark] .theme-icon-cover {
  transform: translateX(48px);
}

/* 다크 모드일 때 헤더 배경색 덮어쓰기 */
[data-bs-theme=dark] .header {
  background-color: #555555 !important;
}

/* 다크 모드일 때 테두리 색상을 살짝 밝게 하여 영역을 확실히 구분! */
[data-bs-theme=dark] .main1 {
  border: 1px solid #555555 !important;
}

/* 다크 모드일 때 테두리 색상을 살짝 밝게 하여 영역을 확실히 구분! */
[data-bs-theme=dark] .main2 {
  border: 1px solid #555555 !important;
}

/* 다크 모드일 때 테두리 색상을 살짝 밝게 하여 영역을 확실히 구분! */
[data-bs-theme=dark] .hover-float {
  border: 1px solid #555555 !important;
}

/* 다크 모드일 때 텍스트 위치(왼쪽) 및 색상 변경 */
[data-bs-theme=dark] .theme-text {
  color: #f8f9fa;
  text-align: left;
  padding-left: 6px;
}

/* 다크 모드일 때 목록 이미지 색상 변경 */
[data-bs-theme=dark] .list-images {
  filter: brightness(0) invert(1);
}

/* 다크 모드일 때 달력 이미지 색상 변경 */
[data-bs-theme=dark] .calender-images {
  filter: brightness(0) invert(1);
}

/* 다크 모드일 때 검색 이미지 색상 변경 */
[data-bs-theme=dark] .search-images {
  filter: brightness(0) invert(1);
}

/* 전류, 전압, 온도 부분 */
.hover-float {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-8px); /* 위로 8px 띄우기 (숫자를 키우면 더 높이 뜹니다) */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* 공중에 뜬 것처럼 그림자를 뿌려줍니다 */
}

/* 페이징 부분 */
.pagination .page-item.active .page-link {
  background-color: #555555 !important;
  color: white !important;
}

/* 전류 */
@keyframes voltage-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(241, 196, 15, 0));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.8));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(241, 196, 15, 0));
  }
}
.hover-float:hover .electric-img {
  animation: voltage-pulse 1.5s ease-in-out;
}

/* 전압 */
@keyframes zap-effect {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-3px, 0) rotate(-2deg);
  }
  40% {
    transform: translate(3px, 0) rotate(2deg);
  }
  60% {
    transform: translate(-3px, 0) rotate(-1deg);
  }
  80% {
    transform: translate(3px, 0) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.hover-float:hover .voltage-img {
  animation: zap-effect 0.3s;
}

/* 온도 */
@keyframes heat-rising {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(217, 104, 104, 0));
  }
  50% {
    transform: translateY(-6px);
    filter: drop-shadow(0 8px 6px rgba(217, 104, 104, 0.6));
  }
  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0 rgba(217, 104, 104, 0));
  }
}
.hover-float:hover .temperature-img {
  animation: heat-rising 1.5s ease-in-out;
}/*# sourceMappingURL=style.css.map */