/* =========================
   Quick Menu
   ========================= */
.quick_menu {
  position: absolute;
  right: 0;
  bottom: var(--footer-height);
  padding: max(calc(20px * var(--base-ratio)),
               calc((20 / var(--base-size)) * var(--base-percent)));
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10%);
  transition: opacity 0.6s, transform 0.6s;
}

.quick_menu.fixed {
  position: fixed;
  bottom: max(calc(20px * var(--base-ratio)),
              calc((20 / var(--base-size)) * var(--base-percent)));
}

.quick_menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* -------------------------
   Top Button (고정 이미지)
   ------------------------- */
.quick_menu .top_btn {
  position: relative;
  width: max(calc(60px * var(--base-ratio)),
             calc((60 / var(--base-size)) * var(--base-percent)));
  height: max(calc(60px * var(--base-ratio)),
              calc((60 / var(--base-size)) * var(--base-percent)));
  border: none;
  border-radius: 50%;
  background-color: #fff;
  background: url("../svg/quick_top.svg") center no-repeat;
  background-size: 60%;
  outline: none;
  font-size: 0;
  border: 1px solid #ccc;
  background-color: #fff;
}

/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 1024px) {
  .quick_menu {
    padding: max(calc(10px * var(--base-ratio)),
                 calc((10 / var(--base-size)) * var(--base-percent)))
             max(calc(20px * var(--base-ratio)),
                 calc((20 / var(--base-size)) * var(--base-percent)));
  }

  .quick_menu .top_btn {
    width: max(calc(50px * var(--base-ratio)),
               calc((50 / var(--base-size)) * var(--base-percent)));
    height: max(calc(50px * var(--base-ratio)),
                calc((50 / var(--base-size)) * var(--base-percent)));
    background-size: 60%;
  }
}