.laon-link a {
    color: var(--dark-color);
    transition: 0.3s;
    text-transform: capitalize;
}

.laon-link a:hover {
    color: var(--primary-color);
}

.laon-link.login-do{
    display: flex;
    justify-content: space-between;
}

.laon-link.sign-up{
    display: flex;
    justify-content: flex-end;
}

/* 기본 숨김 상태 */
.log-in,
.sign-up,
.lost-pw,
.confirm-email {
  display: none;
  opacity: 0;
  transform: translateY(20px); /* 아래서 위로 올라오는 느낌 */
  transition: opacity 0.4s ease, transform 0.4s ease;
}


/* 활성 상태 */
.active-box {
  display: block;
  opacity: 1;
  transform: scale(1);
}

#viewport {
  overflow-y: auto;  
  height: auto;       /* ← 100% 제거 */
}


/* 등장 애니메이션 */
.slide-fade-in {
  display: block;
  opacity: 1;
  transform: translateY(20);
}

/* 퇴장 애니메이션 */
.slide-fade-out {
  opacity: 0;
  transform: translateY(-20px); /* 위로 사라지는 느낌 */
}

.section-box {
     
      padding: 20px;
      margin-bottom: 20px;
      
    }
.btn-primary {
  background-color: #6c63ff;
  border: none;
}
.conditional-buttons .btn {
  margin-right: 10px;
}