/* 색/폰트 토큰 */
:root {
  --bg: #0c1c27;
  --line: rgba(255, 255, 255, 0.22);
  --text: #d7d7d7;
  --text-dim: #9aa3aa;
  --white: #fff;
  --gold: #c7a574;
  --gold-d: #b8955f;
}

.join-page {
  height: 100dvh;
  background: var(--bg);
}

.join-wrap {
  max-width: 116rem;
  margin: 8rem auto 12rem;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  color: var(--white);
  padding: 0 clamp(1.6rem, 3vw, 4rem);
}

.join-title {
  margin: 1.2rem 0 3.6rem;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.9rem;
  color: var(--white);
  padding: 180px 0 36px;
}

#joinForm {
  width: 100%;
}

/* 2열 그리드 */
.join-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc((100% - 7.6rem) / 2));
  gap: 2.3rem 7.6rem;
  /* 행, 열 간격(시안처럼 넉넉하게) */
  align-items: center;
}

/* 라벨/인풋 */
.fg {
  width: calc(100% - 2.4rem);
}

.fg label {
  display: block;
  margin: 0 0 0.8rem;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5rem;

  color: var(--white);
}

.ipt {
  width: 100%;
  height: 4.4rem;
  border: 0.1rem solid var(--line);
  background: transparent;
  color: var(--white);
  font-size: 1.5rem;
  padding: 0 1.2rem;
  outline: none;
  border-color: #634d32;
}

.ipt::placeholder {
  color: var(--text-dim);
}

/* 우편번호 + 버튼 한 줄 */
.zip-row {
  display: grid;
  grid-template-columns: 1fr 12rem;
  gap: 1rem;
  align-items: center;
}

.btn_postcode {
  height: 4.4rem;
  border: none;
  background: #b48b5a;
  font-size: 1.7rem;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 11.5rem;
  margin-left: 3rem;
  font-family: "Pretendard", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-align: center;
  color: var(--white);
}

.btn_postcode:hover {
  background: #b48b5a;
}

/* 제출 버튼은 오른쪽 컬럼 하단 풀-폭 */
.submit-row {
  grid-column: 2 / 3;
  /* 오른쪽 컬럼 아래 */
  margin-top: 0.8rem;
}

.btn-submit {
  margin-top: 2.1rem;
  width: 100%;
  height: 4.6rem;
  background: #b48b5a;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: "Pretendard", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-align: center;
  color: var(--white);
}

.btn-submit:hover {
  background: #b48b5a;
}
@media (max-width: 1024px) {
  .join-grid {
    grid-template-columns: 1 fr;
    gap: 22 px;
  }
  .submit-row {
    grid-column: 1 / 2;
  }
}
.join-grid {
  gap: 24 px 56 px;
} /* 행, 열 간격 */
.btn-submit {
  height: 46 px;
} /* 시안 높이 */

/* 반응형: 1열 스택 */
@media (max-width: 768px) {
  .join-page {
    height: 100%;
  }
  .join-title {
    padding: 0;
    margin-top: 14rem;
  }

  .join-grid {
    grid-template-columns: 1fr;
  }

  .fg {
    width: 100%;
  }

  .fg label {
    width: 100%;
  }

  .ipt {
    width: calc(100% - 2.4rem);
  }

  .btn_postcode {
    margin-left: 0;
    width: auto;
  }

  .submit-row {
    grid-column: 1 / 2;
  }
  /* DOM 순서 기준
         1:ID, 2:우편번호, 3:비번, 4:주소, 5:비번확인, 6:상세주소, 7:이름, 8:주민번호, 9:전화번호, 10:제출 */
  .join-grid > .fg:nth-child(1) {
    order: 1;
  }
  /* ID */
  .join-grid > .fg:nth-child(3) {
    order: 2;
  }
  /* 비밀번호 */
  .join-grid > .fg:nth-child(5) {
    order: 3;
  }
  /* 비번 확인 */
  .join-grid > .fg:nth-child(7) {
    order: 4;
  }
  /* 이름 */
  .join-grid > .fg:nth-child(8) {
    order: 5;
  }
  /* 주민번호 */
  .join-grid > .fg:nth-child(9) {
    order: 6;
  }
  /* 전화번호 */
  .join-grid > .fg:nth-child(2) {
    order: 7;
  }
  /* 우편번호 */
  .join-grid > .fg:nth-child(4) {
    order: 8;
  }
  /* 주소 */
  .join-grid > .fg:nth-child(6) {
    order: 9;
  }
  /* 상세주소 */
  .join-grid > .submit-row {
    order: 10;
    width: 100%;
  }
}

/* ===== join 화면 배경 누수/띠 제거: 상위 컨테이너를 강제로 동일 배경으로 ===== */
body {
  background: #0c1c27;
}

/* 사이트 통일 배경(안전) */

.post,
.post-container,
.auth-wrapper,
.join-page,
.join-wrap {
  background: #0c1c27;
}

.join-wrap {
  margin: 80px auto 120px;
}

/* 행, 열 간격 */
.btn-submit {
  height: 46px;
}

/* 시안 높이 */
/* 반응형: 1열 스택 */

/* === 모바일 전용 정리 === */
/* @media (max-width: 768px) { */
/* 0) 상단 여백 정리 */
/* .join-wrap {
        margin: 40 px auto 80 px!important;
        padding: 0 16 px!important;
      }
  .join-title {
    padding: 60 px 0 24 px!important; 
    font - size: 30 px!important;
  } */

/* 1) 그리드를 flex로 강제 전환 + 우선순위 확보 */
/* .join- grid { */
/* display: flex!important;  */
/* grid -> flex로 확실히 바꿈 */
/* flex - direction: column!important; */
/* gap: 16 px!important; */
/* } */
/* .join-grid > * {
    order: 0;
  } 초기화 */

/* 제출 버튼 */

/* 2) 우편번호 행 버튼 밀림/높이 보정 */
/* .zip-row {
    display: grid !important;
    grid-template-columns: 1 fr auto !important; 인풋 넓게, 버튼은 내용만큼
    align-items: center !important;
    gap: 10 px !important;
  } */
/* .zip-row.btn {
    margin-left: 0 !important;
    width: auto !important;
    min-width: 110 px !important;
    height: 44 px !important;
    line-height: 44 px; 필요하면 유지
  } */

/* 3) 제출 버튼 튀어나옴 방지 */
/* .btn-submit {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
  } */

/* 폼 전체 좌우 여백(원하면 값만 조절) */
/* .join-wrap {
    padding: 0 16 px !important;
  } */

/* 각 필드 그룹에 내부 여백(가장 확실한 방법) */
/* .join-grid.fg {
    padding: 0 10 px;
  } ← 여기 숫자 키워서 더 띄울 수 있음 (예: 14px, 16px) */

/* input은 100% 유지 + 테두리/패딩 포함 계산 */
/* .ipt {
    width: 100%;
    box-sizing: border - box;
  } */

/* 우편번호 줄도 동일한 폭감 유지 */
/* .zip-row {
    grid-template-columns: 1 fr auto;
    gap: 10 px;
  }
  .zip-row.btn {
    margin-left: 0;
    height: 44 px;
  } */

/* 제출 버튼은 넘치지 않게 */
/* .btn-submit {
    width: 100%;
    max-width: 100%;
  } */
/* } */