/* ==========================================================================
   pages/contact.css — Contact 페이지 (연락처·지도 자리 + 전송 비활성 문의 폼)
   모바일 우선. 브레이크포인트 640 / 1024 / 1280
   ========================================================================== */

.contact-hero__lead {
  max-width: 46ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* ---------- 연락처 · 지도 (네이비, 값은 확정 전 빈칸) ---------- */
.contact-info__grid {
  display: grid;
  row-gap: var(--sp-7);
}

.contact-info__title {
  margin-bottom: var(--sp-6);
}

.contact-info__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-on-dark);
}

.contact-info__row dt {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.contact-info__row dd {
  min-height: 1.65em;
  color: var(--paper);
}

/* 지도 이미지 자리: 위치 확정 전까지 빈 틀 */
.contact-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-on-dark); /* 값이 없을 때 빈 상자가 두드러지지 않게 테두리만 */
}

@media (min-width: 1024px) {
  .contact-info__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: 0;
    align-items: start;
  }

  .contact-info__block {
    grid-column: 1 / 6;
  }

  .contact-map {
    grid-column: 7 / 13;
  }
}

/* ---------- 문의 폼 (라이트, fieldset disabled) ---------- */
.contact-form__grid {
  display: grid;
  row-gap: var(--sp-7);
}

.contact-form__status {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--blue);
}

.contact-form__fields {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid rgba(10, 15, 24, 0.3);
  background-color: transparent;
  font-size: var(--fs-base);
  color: var(--ink);
}

.field textarea {
  resize: vertical;
}

.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.field--check input {
  width: 1.1rem;
  height: 1.1rem;
}

.contact-form__submit {
  justify-self: start;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--ink);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* 준비 중: 비활성 상태가 눈으로도 보이게 */
.contact-form__fields:disabled .field,
.contact-form__fields:disabled .contact-form__submit {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 640px) {
  .contact-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full,
  .contact-form__submit {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .contact-form__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: 0;
  }

  .contact-form__head {
    grid-column: 1 / 5;
  }

  .contact-form {
    grid-column: 5 / 13;
  }
}