/* =============== 휴대폰 인증 공통 컴포넌트 =============== */
/* 조각: views/common/form/phoneAuthentication.jsp
   표 안(행정정보)과 .login-form 안(회원가입) 양쪽에 들어간다.
   .inputs 대신 자체 클래스를 쓰는 이유: modal.css가 .inputs를 문맥마다 다르게 잡아
   같은 컴포넌트가 화면마다 다르게 보인다. */
.phone-authentication {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-authentication-row {
  display: grid;
  gap: 5px;
  align-items: center;
}

/* 번호 | 인증요청 */
.phone-authentication [data-role='numberArea'] {
  grid-template-columns: minmax(0, 1fr) auto;
}
/* 인증번호 | 타이머 | 인증확인 */
.phone-authentication [data-role='codeArea'] {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
/* 다시 인증받기 | 번호 수정하기 — 항상 균등 2열 */
.phone-authentication [data-role='retryArea'] {
  grid-template-columns: 1fr 1fr;
}

/* grid 자식은 늘어나려 하므로 폭은 열에 맡기고, 높이는 표 안(행정정보)의 기준을 따른다 */
.phone-authentication-row input {
  width: 100%;
  min-width: 0;
  height: var(--input-h);
}
.phone-authentication .button {
  white-space: nowrap;
  text-align: center;
}

/* .button 기본 테두리(forms.css) 되살리기. modal.css가 .login-form 안에서 border:0을 주는데
   그 선택자가 (0,6,1)이라 !important 없이는 못 이긴다. */
.phone-authentication .button {
  border: 1px solid var(--gray-border) !important;
}
.phone-authentication .button:hover {
  border-color: var(--main) !important;
}
.phone-authentication [data-role='timer'] {
  white-space: nowrap;
  text-align: center;
}

/* 모바일: 표 안에서 폭이 200px 안팎까지 좁아진다.
   한 줄에 3칸을 욱여넣으면 입력칸이 뭉개지므로 실행 버튼만 아래 전체 폭으로 내린다. */
@media (max-width: 812px) {
  .phone-authentication [data-role='numberArea'] {
    grid-template-columns: minmax(0, 1fr);
  }
  .phone-authentication [data-role='codeArea'] {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .phone-authentication [data-role='numberArea'] [data-role='requestCode'],
  .phone-authentication [data-role='codeArea'] [data-role='confirmCode'] {
    grid-column: 1 / -1;
  }
}

/* 페이지형 로그인 카드(비회원 예약 조회) 안에서는 테두리형이 아니라 회색 채움 버튼이다.
   모달·표 안의 인증 버튼은 기존 테두리형을 그대로 쓰므로 .login-wrap 안쪽만 잡는다. */
.login-wrap .phone-authentication .button {
  background-color: var(--gray-light);
  color: var(--white);
  border-color: var(--gray-light) !important;
}
.login-wrap .phone-authentication .button:hover {
  background-color: var(--main);
  border-color: var(--main) !important;
}

/* JS가 만료·인증완료 때 붙이는 상태. modal.css의 disabled 훅은 `.modal .btn-set` 안으로
   한정돼 있어 이 컴포넌트에는 닿지 않으므로 여기서 직접 잡는다.
   opacity로 처리하면 테두리형(모달·표)과 회색 채움형(.login-wrap) 양쪽에 그대로 통한다. */
.phone-authentication .button.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}