html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
}

.main_container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #fef39f, #a0e7e5);
  display:flex;
  justify-content: center;
  align-items: center;  
}

.loginbox {
  display:flex;
  flex-direction: column;
  align-items: center;
  min-height:400px;
  gap: 10px; /* strong과 input 사이 여백 */
}

#login_header {
  margin-top:15px;
  display: flex;
  align-items: center;     /* 세로 중앙 정렬 */
  gap: 10px;               /* 폭죽과 프로필 사이 간격 */
  margin-bottom: 20px;
}

.profile-border {
  position: relative;
  width: 110px;           /* 테두리 포함 크기 */
  height: 110px;
  padding: 5px;           /* 테두리 두께 */
  border-radius: 50%;     /* 원형 */
  background: linear-gradient(1deg, #1e90ff, #00bfff); /* 푸른색 그라데이션 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-img {
  width: 100px;       /* 가로 크기 */
  height: 100px;      /* 세로 크기 */
  border-radius: 50%; /* 둥글게 만들기 */
  object-fit: cover;  /* 이미지 비율 유지하며 잘라서 꽉 채우기 */
}

.firework-img {
  width: 50px;
  height: 50px;
}

.firework-img-trans {
  width: 50px;
  height: 50px;
  transform: scaleX(-1); /* 좌우 반전 */
}

#check_btn {
  width: 100%;
}

#loginGuest_btn {
  font-size: 13px;
  color: #808080;
  cursor: pointer;
  user-select: none;
}

strong {
  margin-bottom: 20px;
}

.toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5; /* input 위에 올라오도록 */
  padding: 2px 6px;
}

/* 모바일 (화면 너비 768px 이하) */
@media (max-width: 768px) {
  .loginbox {
    width: 90%;
    height: 50%;
    padding: 20px;
  }
}

/* 태블릿 ~ 작은 PC (769px ~ 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  .loginbox {
    width: 70%;
    height: 50%;
  }
}

/* 데스크탑 (1201px 이상) */
@media (min-width: 1201px) {
  .loginbox {
    width: 500px;
    height: 400px;
  }
}