body.is-loading {
  overflow: hidden;
}
.wrapper {
  opacity: 0;
  transition: opacity 0.35s ease;
}
body:not(.is-loading) .wrapper {
  opacity: 1;
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.loader.is-visible {
  opacity: 1;
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.loader__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.loader__char {
  width: clamp(35px, 5vw, 55px);
  height: auto;
  display: block;
  margin-left: 40px;
  animation: loader-walk 2.6s ease-in-out infinite;
}
.loader__text {
  margin: 0;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(18px, 3.2vw, 24px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #000;
  text-align: center;
}
@keyframes loader-walk {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  9% {
    transform: translate(-5px, -5px) rotate(-3deg);
  }
  18% {
    transform: translate(-10px, 0) rotate(0deg);
  }
  27% {
    transform: translate(-15px, -6px) rotate(-2deg);
  }
  36% {
    transform: translate(-20px, 0) rotate(0deg);
  }
  45% {
    transform: translate(-26px, -6px) rotate(-3deg);
  }
  54% {
    transform: translate(-30px, 0) rotate(0deg);
  }
  67% {
    transform: translate(-20px, -4px) rotate(2deg);
  }
  80% {
    transform: translate(-9px, -3px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader.is-hidden,
  .wrapper {
    transition: none;
  }
  .loader__char {
    animation: none;
  }
}