html, body {
  height: auto;
  overflow: auto;
  box-sizing: border-box;
}

/* 전체 레이아웃 및 배경 스타일 */
.root {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  overflow: visible;
  padding-top: 30px;
  box-sizing: border-box;
}

/* Auth관련 폼 기본 상태 */
.form {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  opacity: 0;
  transform: scale(0.95) rotate(-1.5deg);
  pointer-events: none;
  transition: all 0.6s ease;
  z-index: 1;
}

.form.active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: all;
  z-index: 10;
}

/* 폼 카드 스타일 */
.form-wrapper {
  background-color: #fdfcf7;
  width: 500px;
  min-height: 800px;
  padding: 40px 32px;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #bfb89b;
  border: 1px solid #d6d1b1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeInUp 0.5s ease;
  box-sizing: border-box;
}

/* 제목 텍스트 스타일 */
h5 {
  font-size: 28px;
  color: #3e3426;
  margin-bottom: 35px;
  font-weight: 600;
}

/* 모든 input/select 공통 스타일 */
.form-field {
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 7px 7px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  color: #3e3e3e;
  border: 1px solid #d9d2b4;
  border-radius: 6px;
  background: #fffef9;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* 버튼 기본 스타일 */
.button {
  width: 100%;
  max-width: 100%;
  height: 50px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 18px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.primary {
  background-color: #826d47;
  color: #fffbea;
  border: none;
}

.primary:hover {
  background-color: #6b5739;
}

.secondary {
  background-color: transparent;
  color: #826d47;
  border: 1px solid #826d47;
}

.secondary:hover {
  background-color: #f9f6ee;
}

/* 링크 및 안내 텍스트 스타일 */
p {
  font-size: 14px;
  color: #555;
}

p a {
  color: #826d47;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

p a:hover {
  color: #b08b56;
}

/* 페이드 전환 애니메이션 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.fade-out {
  opacity: 1;
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; }
}

/* 배경 마스코트 위치 스타일 */
.overlay-img {
  position: absolute;
  transform: translateY(-40px);
  justify-content: center;
  width: 700px;
  height: 700px;
  z-index: 20;
  pointer-events: none;
}

.dusan-mascot-container {
  position: absolute;
  transform: translateY(40px);
  z-index: 15;
  pointer-events: none;
  width: 125px;
}

.hanhwa-mascot-container {
  position: absolute;
  transform: translate(175px, -100px);
  z-index: 15;
  pointer-events: none;
  width: 400px;
}

.samsung-mascot-container {
  position: absolute;
  transform: translate(-175px, 40px);
  z-index: 15;
  pointer-events: none;
  width: 125px;
}

.kt-mascot-container {
  position: absolute;
  top: 10%;
  transform: translate(280px);
  z-index: 15;
  pointer-events: none;
  width: 250px;
}

.lotte-mascot-container {
  position: absolute;
  top: 40%;
  transform: translate(290px);
  z-index: 15;
  pointer-events: none;
  width: 200px;
}

.kiwom-mascot-container {
  position: absolute;
  top: 70%;
  transform: translate(300px);
  z-index: 15;
  pointer-events: none;
  width: 150px;
}

.kia-mascot-container {
  position: absolute;
  top: 13%;
  transform: translate(-275px);
  z-index: 15;
  pointer-events: none;
  width: 150px;
}

.lg-mascot-container {
  position: absolute;
  top: 30%;
  transform: translate(-275px);
  z-index: 15;
  pointer-events: none;
  width: 150px;
}

.sk-mascot-container {
  position: absolute;
  top: 50%;
  transform: translate(-275px);
  z-index: 15;
  pointer-events: none;
  width: 150px;
}

.nc-mascot-container {
  position: absolute;
  top: 70%;
  transform: translate(-275px);
  z-index: 15;
  pointer-events: none;
  width: 150px;
}

@media (max-width: 768px) {
  .root {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 10px;
    overflow: auto;
  }

  .form {
    padding-top: 10px;
  }

  .form-wrapper {
    width: 90%;
    min-height: auto;
    padding: 24px 20px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  h5 {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .form-field {
    font-size: 14px;
    height: 42px;
    padding: 0 10px;
    margin-bottom: 18px;
  }

  .button {
    height: 45px;
    font-size: 15px;
  }

  input[type="file"] {
    max-width: 100%;
  }

  .dusan-mascot-container,
  .samsung-mascot-container,
  .kt-mascot-container,
  .lotte-mascot-container,
  .kiwom-mascot-container,
  .kia-mascot-container,
  .lg-mascot-container,
  .sk-mascot-container,
  .nc-mascot-container,
  .hanhwa-mascot-container {
    display: none;
  }
}