html {
  width: 100%;
  height: 100vh;

  /* overflow-x: hidden; */
  /* x축 스크롤 없애기 */

  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

/*  */
header {
  display: flex;
  justify-content: left;
  align-items: center;

  position: absolute;
  z-index: 2;
}

nav ul {
  display: flex;
  gap: 0%;

}

nav ul li {
  display: block;
  text-align: center;
}

nav ul li a {
  background: linear-gradient(to bottom right, white, #ced4da);

  border-radius: 100%;
  width: 60px;
  height: 60px;

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

  font-size: 12px;

  text-decoration: none;
}

nav ul li a:hover {
  background-color: #e9ecef;
}

/* 설정 */
.taw {}

/* 메인 */
main {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  box-sizing: border-box;

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

.smoke {
  border: 2px solid black;
  display: inline-block;
}

.smoke-effect {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(200, 200, 200, 0.7);
  border-radius: 30%;
  pointer-events: none;
  /* 클릭 방지 */

  animation: smoke-animation 1s ease-out forwards;
}

@keyframes smoke-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}


.guide {
  position: absolute;
  top: 50%;
  animation: hide1 2s forwards;
  /* 'forwards'를 추가하여 애니메이션 종료 후 최종 상태 유지 */
}

@keyframes hide1 {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  25% {
    transform: scale(1.1);
    opacity: 1;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    visibility: hidden;
    /* 애니메이션 종료 후 요소를 숨깁니다 */
    transform: scale(1);
    opacity: 0;
  }
}