html {
  padding-right: 0 !important;
  font-family: Pretendard Variable, Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, Helvetica Neue, Segoe UI,
    Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, sans-serif !important;
  scroll-behavior: smooth;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.bg-hero {
  background: linear-gradient(135deg, #2c1810 0%, #4a2c2a 50%, #8b4513 100%);
}

.btn-gold-gradient {
  background: linear-gradient(135deg, #e7c85a, #d4af37);
  transition: all 0.3s ease-in-out;
  border: none;
}
.btn-gold-gradient:hover {
  background: linear-gradient(135deg, #d4af37, #e7c85a);
  /* transform: scale(1.05); */
}

.laurel-award::before,
.laurel-award::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D4AF37' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM128.4 200.2c28.3-2.2 55.9-8.4 82-18.2c3.5-1.3 7.3-1.3 10.8 0c26.2 9.8 53.8 16 82 18.2c10.4 .8 20.9 1.2 31.3 1.2c4.3 0 8.5-.2 12.7-.5c-1.3-32.3-11.3-63-28.5-89.2c-2.4-3.6-6.1-5.7-10.2-5.7c-17.5 0-33.3 5.4-47.3 14.8c-1.2 .8-2.6 .8-3.8 0c-14-9.4-29.8-14.8-47.3-14.8c-4.1 0-7.8 2.1-10.2 5.7C151 138.4 141 169.2 128.4 200.2zM384 288c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32S401.7 288 384 288zm-64-64c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32S337.7 224 320 224zm-64-32c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32S256 174.3 256 192zm-96 32c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32S177.7 224 160 224zm-31.6 83.8c-30.8 19.3-64.8 33.3-100.4 41.5c-4.3 1-8.7 .9-13-1c-22.3-9.5-41.8-23.4-57.9-40.8c-3.7-4-3.4-10.1 .7-13.7c17.4-15.3 37.6-27.5 60-36c1.1-.4 2.2-.6 3.3-.6c17.5 0 34.3 4.4 49.8 12.4c1.2 .6 2.6 .6 3.8 0c21.6-11.4 45.4-17.8 70.3-18.8c.1 0 .2 0 .3 0c.2 0 .3 0 .5 0c24.9 1 48.7 7.4 70.3 18.8c1.2 .6 2.6 .6 3.8 0c15.5-8 32.3-12.4 49.8-12.4c1.1 0 2.2 .2 3.3 .6c22.4 8.5 42.6 20.7 60 36c4.1 3.6 4.4 9.7 .7 13.7c-16.1 17.4-35.6 31.3-57.9 40.8c-4.3 1.9-8.7 2-13 1c-35.6-8.2-69.6-22.2-100.4-41.5c-1-.6-2.2-.6-3.2 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin: 0 10px;
}
.laurel-award::before {
  transform: scaleX(-1);
}

.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}

/* 무한 스크롤 애니메이션 */
@keyframes infinite-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-infinite-scroll {
  animation: infinite-scroll 30s linear infinite;
}

/* 호버 시 애니메이션 일시정지 */
.animate-infinite-scroll:hover {
  animation-play-state: paused;
}

.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}

.highlight-on-scroll {
  background-image: linear-gradient(
    to right,
    rgba(212, 175, 55, 0.4),
    rgba(212, 175, 55, 0.4)
  ); /* brand-gold with 40% opacity */
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 70%;
  transition: background-size 0.8s ease-out 0.3s;
}
.highlight-on-scroll.is-visible {
  background-size: 100% 70%;
}

@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  30% {
    /* 5초 동안 애니메이션 진행 (전체 12초 중) */
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
  100% {
    /* 나머지 시간 동안 보이지 않게 유지하여 대기 효과 생성 */
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.ripple-section {
  position: relative;
  overflow: hidden;
}
.rings-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ringlet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(212, 175, 55, 0.4); /* 전통주 색상, 1px 두께 */
  border-radius: 50%;
  opacity: 0;
  animation: ripple-effect 12s ease-out infinite; /* 전체 애니메이션 주기를 12초로 늘려 대기 시간 추가 */
}
.ringlet:nth-child(2) {
  animation-delay: 1.5s;
}
.ringlet:nth-child(3) {
  animation-delay: 3s;
}
.ringlet:nth-child(4) {
  animation-delay: 4s;
}

/* Bottle floating animation v2 */
@keyframes float-effect-v2 {
  0% {
    transform: translateY(10px) rotate(-12deg);
  }
  50% {
    transform: translateY(-10px) rotate(-18deg);
  }
  100% {
    transform: translateY(10px) rotate(-12deg);
  }
}

.bottle-animation-v2 {
  transform: rotate(-15deg);
  animation: float-effect-v2 8s ease-in-out infinite;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-animation {
  animation: marquee-scroll 40s linear infinite;
}

/* 파티클 효과를 위한 CSS */
.particles-container {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;

  /* Common animation properties */
  animation-name: smooth-bubble-rise;
  animation-timing-function: linear; /* Constant speed */
  animation-iteration-count: infinite;
  animation-fill-mode: backwards; /* Prevents showing before delay */
}

@keyframes smooth-bubble-rise {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  15% {
    transform: translateY(-27px) translateX(2px) scale(0.8);
    opacity: 0.8;
  }
  30% {
    transform: translateY(-54px) translateX(3px) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-90px) translateX(-1px) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translateY(-126px) translateX(2px) scale(0.9);
    opacity: 0.7;
  }
  85% {
    transform: translateY(-153px) translateX(1px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

/* 기포별 개별 흔들림 패턴 */
.particle:nth-child(1) {
  animation-name: bubble-rise-1;
}
.particle:nth-child(2) {
  animation-name: bubble-rise-2;
}
.particle:nth-child(3) {
  animation-name: bubble-rise-3;
}
.particle:nth-child(4) {
  animation-name: bubble-rise-4;
}
.particle:nth-child(5) {
  animation-name: bubble-rise-5;
}
.particle:nth-child(6) {
  animation-name: bubble-rise-6;
}
.particle:nth-child(7) {
  animation-name: bubble-rise-7;
}
.particle:nth-child(8) {
  animation-name: bubble-rise-8;
}
.particle:nth-child(9) {
  animation-name: bubble-rise-9;
}
.particle:nth-child(10) {
  animation-name: bubble-rise-10;
}
.particle:nth-child(11) {
  animation-name: bubble-rise-11;
}
.particle:nth-child(12) {
  animation-name: bubble-rise-12;
}

/* 각 기포별 개별 애니메이션 */
@keyframes bubble-rise-1 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  15% {
    transform: translateY(-27px) translateX(2px) scale(0.8);
    opacity: 0.8;
  }
  30% {
    transform: translateY(-54px) translateX(3px) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-90px) translateX(-1px) scale(1.1);
    opacity: 1;
  }
  70% {
    transform: translateY(-126px) translateX(2px) scale(0.9);
    opacity: 0.7;
  }
  85% {
    transform: translateY(-153px) translateX(1px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-2 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  12% {
    transform: translateY(-22px) translateX(-2px) scale(0.7);
    opacity: 0.7;
  }
  28% {
    transform: translateY(-50px) translateX(-3px) scale(0.9);
    opacity: 0.9;
  }
  45% {
    transform: translateY(-81px) translateX(3px) scale(1.2);
    opacity: 1;
  }
  65% {
    transform: translateY(-117px) translateX(-1px) scale(1);
    opacity: 0.8;
  }
  82% {
    transform: translateY(-148px) translateX(1px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-3 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  18% {
    transform: translateY(-32px) translateX(2px) scale(0.9);
    opacity: 0.9;
  }
  35% {
    transform: translateY(-63px) translateX(-2px) scale(1.1);
    opacity: 1;
  }
  55% {
    transform: translateY(-99px) translateX(-3px) scale(1.3);
    opacity: 1;
  }
  75% {
    transform: translateY(-135px) translateX(1px) scale(0.8);
    opacity: 0.6;
  }
  88% {
    transform: translateY(-158px) translateX(1px) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-4 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  10% {
    transform: translateY(-18px) translateX(-1px) scale(0.6);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-45px) translateX(-2px) scale(0.8);
    opacity: 0.8;
  }
  42% {
    transform: translateY(-75px) translateX(2px) scale(1.1);
    opacity: 1;
  }
  60% {
    transform: translateY(-108px) translateX(-1px) scale(1);
    opacity: 0.9;
  }
  78% {
    transform: translateY(-140px) translateX(1px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-5 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  16% {
    transform: translateY(-29px) translateX(3px) scale(0.8);
    opacity: 0.8;
  }
  32% {
    transform: translateY(-58px) translateX(1px) scale(1);
    opacity: 1;
  }
  48% {
    transform: translateY(-87px) translateX(-2px) scale(1.2);
    opacity: 1;
  }
  66% {
    transform: translateY(-119px) translateX(2px) scale(0.9);
    opacity: 0.8;
  }
  84% {
    transform: translateY(-151px) translateX(-1px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-6 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  14% {
    transform: translateY(-25px) translateX(-1px) scale(0.7);
    opacity: 0.7;
  }
  28% {
    transform: translateY(-50px) translateX(-2px) scale(0.9);
    opacity: 0.9;
  }
  44% {
    transform: translateY(-79px) translateX(3px) scale(1.1);
    opacity: 1;
  }
  62% {
    transform: translateY(-111px) translateX(-1px) scale(1);
    opacity: 0.8;
  }
  80% {
    transform: translateY(-144px) translateX(2px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-7 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  20% {
    transform: translateY(-36px) translateX(2px) scale(0.9);
    opacity: 0.9;
  }
  38% {
    transform: translateY(-68px) translateX(-1px) scale(1.1);
    opacity: 1;
  }
  56% {
    transform: translateY(-101px) translateX(-3px) scale(1.2);
    opacity: 1;
  }
  74% {
    transform: translateY(-133px) translateX(1px) scale(0.8);
    opacity: 0.6;
  }
  87% {
    transform: translateY(-157px) translateX(1px) scale(0.5);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-8 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  11% {
    transform: translateY(-20px) translateX(-2px) scale(0.6);
    opacity: 0.6;
  }
  26% {
    transform: translateY(-47px) translateX(-1px) scale(0.8);
    opacity: 0.8;
  }
  41% {
    transform: translateY(-74px) translateX(2px) scale(1.1);
    opacity: 1;
  }
  58% {
    transform: translateY(-105px) translateX(-1px) scale(1);
    opacity: 0.9;
  }
  76% {
    transform: translateY(-137px) translateX(1px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-9 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  17% {
    transform: translateY(-31px) translateX(3px) scale(0.8);
    opacity: 0.8;
  }
  34% {
    transform: translateY(-61px) translateX(1px) scale(1);
    opacity: 1;
  }
  51% {
    transform: translateY(-92px) translateX(-2px) scale(1.3);
    opacity: 1;
  }
  68% {
    transform: translateY(-122px) translateX(2px) scale(1);
    opacity: 0.8;
  }
  85% {
    transform: translateY(-153px) translateX(-1px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-10 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  13% {
    transform: translateY(-23px) translateX(-2px) scale(0.7);
    opacity: 0.7;
  }
  29% {
    transform: translateY(-52px) translateX(-1px) scale(0.9);
    opacity: 0.9;
  }
  46% {
    transform: translateY(-83px) translateX(3px) scale(1.2);
    opacity: 1;
  }
  63% {
    transform: translateY(-113px) translateX(-1px) scale(1);
    opacity: 0.8;
  }
  81% {
    transform: translateY(-146px) translateX(2px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-11 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  19% {
    transform: translateY(-34px) translateX(1px) scale(0.9);
    opacity: 0.9;
  }
  36% {
    transform: translateY(-65px) translateX(-2px) scale(1);
    opacity: 1;
  }
  54% {
    transform: translateY(-97px) translateX(-3px) scale(1.1);
    opacity: 1;
  }
  71% {
    transform: translateY(-128px) translateX(1px) scale(0.9);
    opacity: 0.7;
  }
  86% {
    transform: translateY(-155px) translateX(1px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

@keyframes bubble-rise-12 {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.3);
    opacity: 0;
  }
  12% {
    transform: translateY(-22px) translateX(-1px) scale(0.7);
    opacity: 0.7;
  }
  27% {
    transform: translateY(-49px) translateX(-2px) scale(0.8);
    opacity: 0.8;
  }
  43% {
    transform: translateY(-77px) translateX(2px) scale(1.2);
    opacity: 1;
  }
  61% {
    transform: translateY(-110px) translateX(-1px) scale(1);
    opacity: 0.8;
  }
  79% {
    transform: translateY(-142px) translateX(1px) scale(0.7);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-180px) translateX(0px) scale(0.2);
    opacity: 0;
  }
}

/* --- Particle Color and Animation Variations --- */

/* Default Cream Bubble Style - 더 밝고 노란빛이 도는 크림색 */
.particle {
  background-color: rgba(255, 248, 220, 0.8); /* 더 밝은 크림색 */
  box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.7),
    inset -2px -2px 4px rgba(218, 165, 32, 0.2),
    /* 골든로드 톤 */ 0 0 12px rgba(255, 248, 220, 0.6);
}

/* Wine color for every 3rd particle - 더 진하고 붉은빛이 도는 와인색 */
.particle:nth-child(3n) {
  background-color: rgba(128, 0, 32, 0.8); /* 더 진한 와인색 */
  box-shadow: inset 2px 2px 6px rgba(255, 182, 193, 0.6),
    /* 연한 핑크 하이라이트 */ inset -2px -2px 4px rgba(64, 0, 16, 0.3),
    /* 어두운 와인색 그림자 */ 0 0 12px rgba(128, 0, 32, 0.7);
}

/* Individual size, duration, and delay */
.particle:nth-child(1) {
  width: 12px;
  height: 12px;
  animation-duration: 4.5s;
  animation-delay: 0s;
}
.particle:nth-child(2) {
  width: 8px;
  height: 8px;
  animation-duration: 5s;
  animation-delay: 0.4s;
}
.particle:nth-child(3) {
  width: 16px;
  height: 16px;
  animation-duration: 4.2s;
  animation-delay: 0.8s;
}
.particle:nth-child(4) {
  width: 10px;
  height: 10px;
  animation-duration: 5.5s;
  animation-delay: 1.2s;
}
.particle:nth-child(5) {
  width: 14px;
  height: 14px;
  animation-duration: 4.7s;
  animation-delay: 1.6s;
}
.particle:nth-child(6) {
  width: 9px;
  height: 9px;
  animation-duration: 5.3s;
  animation-delay: 2s;
}
.particle:nth-child(7) {
  width: 13px;
  height: 13px;
  animation-duration: 3.8s;
  animation-delay: 2.4s;
}
.particle:nth-child(8) {
  width: 7px;
  height: 7px;
  animation-duration: 5.7s;
  animation-delay: 2.8s;
}
.particle:nth-child(9) {
  width: 11px;
  height: 11px;
  animation-duration: 4.4s;
  animation-delay: 3.2s;
}
.particle:nth-child(10) {
  width: 15px;
  height: 15px;
  animation-duration: 5.1s;
  animation-delay: 0.2s;
}
.particle:nth-child(11) {
  width: 8px;
  height: 8px;
  animation-duration: 4.1s;
  animation-delay: 0.6s;
}
.particle:nth-child(12) {
  width: 12px;
  height: 12px;
  animation-duration: 5.4s;
  animation-delay: 1s;
}

/* SVG 로고 색상 반전 필터 */
.filter-invert {
  filter: brightness(0) saturate(100%) invert(1);
}

/* 선반 그림자 효과 */
.shelf-shadow {
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease-in-out;
}

/* 병 반사 효과 */
.bottle-reflect {
  -webkit-box-reflect: below 4px
    linear-gradient(transparent, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.18) 85%, rgba(0, 0, 0, 0.22) 100%);
}

/* 3D 큐브 로딩 애니메이션 */
#loading-container {
  width: 100%;
  perspective: 2200px;
  padding: 20px 60px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

#loading-pos {
  width: 96px;
  margin: 0 auto;
}

.loading-cube {
  width: 10px;
  height: 48px;
  position: relative;
  margin-right: 2px;
  float: left;
  transform-style: preserve-3d;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.05);
  animation: animCube 1s ease-in-out infinite;
}

.loading-cube div {
  position: absolute;
  display: block;
  width: 10px;
  height: 48px;
}

.loading-cube .center {
  width: 10px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.8);
  animation: animCenter 1s ease-in-out infinite;
  background-color: #f8f8f8;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(240, 240, 240, 0.9)
  );
}

.loading-cube .bottom {
  width: 10px;
  height: 3px;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  animation: animBottom 1s ease-in-out infinite;
  background-color: #e8e8e8;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8),
    rgba(235, 235, 235, 0.6)
  );
}

.loading-cube .left {
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation: animSide 1s ease-in-out infinite;
  background-color: #f0f0f0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(230, 230, 230, 0.7)
  );
}

.loading-cube .right {
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation: animSide 1s ease-in-out infinite;
  background-color: #f0f0f0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(230, 230, 230, 0.7)
  );
}

/* 각 큐브별 애니메이션 지연 */
.loading-cube:nth-child(1),
.loading-cube:nth-child(1) div {
  z-index: 1;
  animation-delay: 0.08333s;
}

.loading-cube:nth-child(2),
.loading-cube:nth-child(2) div {
  z-index: 2;
  animation-delay: 0.16667s;
}

.loading-cube:nth-child(3),
.loading-cube:nth-child(3) div {
  z-index: 3;
  animation-delay: 0.25s;
}

.loading-cube:nth-child(4),
.loading-cube:nth-child(4) div {
  z-index: 4;
  animation-delay: 0.33333s;
}

.loading-cube:nth-child(5),
.loading-cube:nth-child(5) div {
  z-index: 5;
  animation-delay: 0.41667s;
}

.loading-cube:nth-child(6),
.loading-cube:nth-child(6) div {
  z-index: 6;
  animation-delay: 0.5s;
}

.loading-cube:nth-child(7),
.loading-cube:nth-child(7) div {
  z-index: 7;
  animation-delay: 0.58333s;
}

.loading-cube:nth-child(8),
.loading-cube:nth-child(8) div {
  z-index: 8;
  animation-delay: 0.66667s;
}

/* 큐브 애니메이션 키프레임 */
@keyframes animCube {
  30% {
    transform: translateZ(48px) translateX(0) translateY(0) rotateX(3deg)
      rotateY(0deg) rotateZ(0deg);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1),
      0 4px 6px 1px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateZ(0px) rotateZ(0deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 0 0 transparent;
  }
}

@keyframes animSide {
  30% {
    width: 32px;
    background-color: #e0e0e0;
  }
  95% {
    width: 3px;
  }
}

@keyframes animBottom {
  30% {
    height: 32px;
  }
  95% {
    height: 3px;
  }
}

@keyframes animCenter {
  20% {
    background-color: #ffffff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1),
      inset 0 1px rgba(255, 255, 255, 1);
  }
  65% {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05),
      inset 0 1px rgba(255, 255, 255, 0.9);
  }
}