/* =========================================
   공통 추가 기능
   - 현재 페이지 표시
   - 상단 이동 버튼
   - 제품 위치 강조
========================================= */


/* =========================================
   현재 페이지 상단 메뉴 표시
========================================= */

.navigation > a.current-page,
.dropdown-menu a.current-page {
  background-color: #fbbd24 !important;
  color: #252532 !important;
}


/* 제품 분류 페이지 왼쪽 메뉴 */

.sidebar-menu a.current-page,
.sidebar-menu a.active {
  background-color: #fbbd24 !important;
  color: #252532 !important;
  font-weight: 700;
}


/* =========================================
   검색 또는 홈 링크로 이동한 제품 강조
========================================= */

.category-product-card.product-target {
  position: relative;

  outline: 4px solid #fbbd24;
  outline-offset: 5px;

  animation:
    targetProductHighlight 1.3s ease
    2;
}

.category-product-card.product-target::after {
  content: "선택한 제품";

  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;

  padding: 7px 11px;

  border-radius: 3px;

  background-color: #fbbd24;
  color: #252532;

  font-size: 12px;
  font-weight: 700;

  pointer-events: none;
}

@keyframes targetProductHighlight {

  0%,
  100% {
    outline-color: #fbbd24;
  }

  50% {
    outline-color: rgba(251, 189, 36, 0.25);
  }

}


/* =========================================
   상단으로 이동 버튼
========================================= */

.back-to-top-button {
  position: fixed;

  right: 26px;
  bottom: 26px;

  z-index: 5000;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;

  background-color: #fbbd24;
  color: #292a33;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.3);

  font-size: 25px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(14px)
    scale(0.92);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease;
}

.back-to-top-button.show {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}

.back-to-top-button:hover {
  background-color: #ffffff;

  transform:
    translateY(-3px)
    scale(1.03);
}

.back-to-top-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}


/* =========================================
   이미지 로딩 효과
========================================= */

img[data-lazy-ready="true"] {
  opacity: 0;

  transition:
    opacity 0.35s ease;
}

img[data-lazy-ready="true"].image-loaded {
  opacity: 1;
}


/* 이미 캐시에 저장된 이미지 */

img[data-lazy-ready="true"][data-image-complete="true"] {
  opacity: 1;
}


/* =========================================
   모바일
========================================= */

@media (max-width: 700px) {

  .back-to-top-button {
    right: 17px;
    bottom: 17px;

    width: 46px;
    height: 46px;

    font-size: 22px;
  }

  .category-product-card.product-target {
    outline-width: 3px;
    outline-offset: 3px;
  }

  .category-product-card.product-target::after {
    top: 7px;
    right: 7px;

    padding: 6px 9px;

    font-size: 11px;
  }

}


/* =========================================
   애니메이션 최소화 설정 사용자
========================================= */

@media (prefers-reduced-motion: reduce) {

  .back-to-top-button,
  img[data-lazy-ready="true"],
  .category-product-card.product-target {
    animation: none !important;
    transition: none !important;
  }

}