/* 모달 스타일 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* 어두운 오랜지색갈의 쉐도잉 백그라운드 */
  z-index: 1;
}

.modal-content {
  background-color: #fff;
  /* 흰색 배경 */
  box-shadow: 0px 0px 10px rgba(255, 140, 0, 0.7);
  /* 어두운 오랜지색갈의 쉐도잉 */
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 닫기 버튼 스타일 */
.Mdclose {
  color: #fff;
  /* 하얀색 텍스트 */
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #f00;
  /* 호버 시 빨간색 텍스트 */
}



/* 텍스트 박스 스타일 */
.text-box {
  text-align: left;
  margin-top: 20px;
}

/* 입력란 크기를 동일하게 조절 */
.text-box input[type="text"],
.text-box input[type="password"] {
  flex: 1;
  border: 2px solid #3498db;
  padding: 5px;
  border-radius: 5px;
  outline: none;
  width: 100%;
  /* 입력란의 너비를 100%로 설정하여 동일한 크기로 만듭니다. */
}

/* 입력란에 포커스가 있을 때 스타일 변경 (선택 사항) */
.text-box input[type="text"]:focus,
.text-box input[type="password"]:focus {
  border-color: #ff5733;
}

/* 인풋박스를 부각시키기 위한 스타일 */
.text-box p {
  margin: 10px 0;
  display: flex;
  /* 수직 정렬을 위해 Flexbox를 사용합니다. */
  align-items: center;
  /* 수직 가운데 정렬 */
}

/* 인풋박스를 부각시키기 위한 스타일 */
.text-box input {
  flex: 1;
  /* 인풋박스가 남은 공간을 채우도록 설정 */
  border: 2px solid #3498db;
  /* 인풋박스 테두리 스타일 */
  padding: 5px;
  /* 내부 여백 */
  border-radius: 5px;
  /* 둥글게 된 모서리 */
  outline: none;
  /* 포커스 시 기본 테두리 제거 */
  border: 2px solid #3498db;
  /* 인풋박스 테두리 스타일 */
  padding: 5px;
  /* 내부 여백 */
  border-radius: 5px;
  /* 둥글게 된 모서리 */
  outline: none;
  /* 포커스 시 기본 테두리 제거 */
}

/* 인풋박스에 포커스가 있을 때 스타일 변경 (선택 사항) */
.text-box input:focus {
  border-color: #ff5733;
  /* 포커스 시 테두리 색상 변경 */
}

.text-box p {
  margin: 10px 0;
}

/* 전환신청 버튼 스타일 */
.apply-button {
  background-color: rgba(255, 140, 0, 0.7);
  /* 어두운 오랜지색갈의 쉐도잉 버튼 */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

.apply-button:hover {
  background-color: #ff5733;
  /* 호버 시 밝은 오랜지색갈의 쉐도잉 버튼 */
}