.dz-page-join {
  padding-block: 1.5rem;
}

.dz-page-join .dz-form-box {
  width: 25rem;
}

/* <440px (sm↓) */
@media (max-width: 439.98px) {
  .dz-page-join .dz-form-box {
    width: 100%;
  }
}

.dz-mh-0 {
  min-height: 0;
}

.dz-page-join .dz-title-desc {
  color: #151515;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 154.545%;
}

.dz-page-join .dz-title-desc strong {
  color: #ff6000;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 154.545%;
}

.dz-page-join .dz-title-desc-sub {
  color: #707070;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

/* =======================
  라디오 커스텀
  */
/* 커스텀 스타일 */
.dz-radio-input {
  display: none;
}

/* ✅ 선택되었을 때의 스타일 ✅ */
.dz-radio-input:checked + .dz-radio-card {
  background-color: #ff6000; /* 오렌지색 배경 */
  border-color: #ff6000;
  color: white;
}
.dz-radio-input:checked + .dz-radio-card .dz-radio-content strong {
  color: #fff0f0;
}
.dz-radio-input:checked + .dz-radio-card .dz-radio-content strong::after {
  background-color: #fff;
}
.dz-radio-input:checked + .dz-radio-card .dz-radio-content span {
  color: #fff4ee;
}

/* 선택되었을 때 OFF 아이콘 숨기기 */
.dz-radio-input:checked + .dz-radio-card .dz-radio-icon-off {
  display: none;
}

/* 선택되었을 때 ON 아이콘 보이기 */
.dz-radio-input:checked + .dz-radio-card .dz-radio-icon-on {
  display: inline-block;
}

/* 라디오 버튼 카드 스타일 */
.dz-radio-card {
  border-radius: 0.625rem;
  border: 1px solid #f5f5f5;
  background: #fafafa;
  padding: 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  display: flex; /* Flexbox로 아이콘과 텍스트 정렬 */
  align-items: center;
}

/* 선택되지 않았을 때의 아이콘 (ON 아이콘은 숨김) */
.dz-radio-icon-on {
  display: none;
}
.dz-radio-icon-off {
  display: inline-block;
}

/* 텍스트 컨테이너 */
.dz-radio-card .dz-radio-content {
  margin-left: 0.75rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dz-radio-card .dz-radio-content strong {
  color: #989898;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.dz-radio-card .dz-radio-content strong::after {
  content: "";
  display: inline-block;
  width: 0.0625rem;
  height: 0.875rem;
  line-height: 100%;
  background-color: #dcdcdc;
  vertical-align: middle;
  margin: 0rem 0.62rem;
}
.dz-radio-card .dz-radio-content span {
  color: #b1b1b1;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.dz-host-interest {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem !important;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: #fff3ec;
}
.dz-host-interest .form-check {
  padding: 0.5rem 1rem;
}

/* =======================
  체크박스 스타일
  */
/* 기본 input 숨기기 */
.dz-checkbox-input {
  display: none;
}

/* 라벨 스타일 */
.dz-checkbox-label {
  cursor: pointer;
  display: inline-flex; /* Flexbox 활성화 */
  flex-direction: column; /* 아이템을 세로로 쌓음 */
  align-items: center; /* 가로축 중앙 정렬 */
  gap: 0.5rem; /* 텍스트와 아이콘 사이의 간격 */
}

/* 텍스트 스타일 */
.dz-checkbox-text {
  font-weight: 500;
  color: #495057;
  transition: color 0.15s ease-in-out;
}

/* 아이콘 기본 상태 (ON 아이콘 숨김) */
.dz-checkbox-icon-on {
  display: none;
}
.dz-checkbox-icon-off {
  display: inline-block;
}

/* ✅ 체크되었을 때의 스타일 ✅ */
/* 체크되면 텍스트 색상 변경 */
.dz-checkbox-input:checked + .dz-checkbox-label .dz-checkbox-text {
  color: #ff6000; /* 오렌지색 */
}

/* 체크되면 OFF 아이콘 숨기기 */
.dz-checkbox-input:checked + .dz-checkbox-label .dz-checkbox-icon-off {
  display: none;
}

/* 체크되면 ON 아이콘 보이기 */
.dz-checkbox-input:checked + .dz-checkbox-label .dz-checkbox-icon-on {
  display: inline-block;
}

/* =======================
  체크박스 스타일
  */

.dz-page-join .dz-form-box .dz-desc {
  color: #707070;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.dz-password {
  position: relative;
}

/* 아이콘-왼쪽, 라벨-정중앙 */
.btn-icon-left {
  position: relative;
  border-radius: 0.625rem;
  height: 3.25rem;
  padding: 1rem 9.3125rem 1.0625rem 1rem;
}

/* 높이는 취향대로 */
.btn-icon-left .btn-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
}

.btn-icon-left .btn-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  /* 줄바꿈 방지 (필요시 제거) */
}

.dz-btn-naver {
  border-radius: 0.625rem;
  background: #03cf5d;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dz-btn-kakao {
  border-radius: 0.625rem;
  background: #ffcd00;
  color: #3c1e1e;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dz-btn-google {
  border-radius: 0.625rem;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  color: #151515;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dz-btn-naver span,
.dz-btn-kakao span,
.dz-btn-google span {
  color: #3c1e1e;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dz-btn-naver span {
  color: #fff;
}

.dz-btn-naver:hover,
.dz-btn-kakao:hover,
.dz-btn-google:hover {
  opacity: 0.8;
}

.dz-join-btns a,
.dz-join-btns span {
  color: #bfbfbf;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.dz-agree-title {
  border-radius: 10px;
  border: 1px solid #f5f5f5;
  background: #fafafa;
  padding: 0.75rem 1rem;
}

.dz-agree-list {
  padding: 0 1rem;
}

.dz-agree-list div {
}

/* =======================================
  관심사 커스텀 체크박스 (dz-interest)
  ======================================= */

/* 기본 input을 시각적으로만 숨기고 기능은 유지 */
.dz-interest .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 라벨을 카드/버튼 형태로 스타일링 */
.dz-interest .form-check-label {
  display: flex;
  padding: 0.4375rem 0.8125rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid #dedede;
  background: #fff;
  border-radius: 6.25rem;
  cursor: pointer;
}

/* 라벨을 카드/버튼 형태로 스타일링 */
.dz-interest .form-check-label::before {
  display: none;
}

/* 마우스 호버 시 효과 */
.dz-interest .form-check-label:hover {
}

/* ✅ 체크되었을 때의 스타일 ✅ */

/* 1. 체크되면 라벨 스타일 변경 */
.dz-interest .form-check-input:checked + .form-check-label {
  background-color: #ff6000; /* 연한 오렌지 배경 */
  border-color: #ff6000; /* 오렌지 테두리 */
  color: #ffffff; /* 텍스트 색상 */
}