/*
 * 05 / CONTACT: 전화·이메일 문의 카드
 * 수정 위치: 05 / CONTACT의 전화번호·이메일 안내·문의 카드.
 */

/* 1. CONTACT 영역의 제목과 연락처 패널 기본 레이아웃 */
.contact-panel h2 {
  font-size: 36px;
  letter-spacing: -1.6px;
  line-height: 1.4;
  margin-top: 16px;
}

/* 2. 문의 패널: 왼쪽 안내 문구 / 오른쪽 전화·메일 버튼 2열 배치 */
.contact-panel {
  padding: 50px;
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* 안내문 : 연락처 영역 너비 비율 */
  gap: 55px;
  align-items: center;
}

/* 문의 안내 설명의 글꼴 크기 */
.contact-panel p:not(.eyebrow) {
  font-size: 14px;
  margin-top: 18px;
}

/* 전화와 이메일 버튼의 위아래 배치 및 간격 */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 전화 문의 번호의 큰 글자 크기 */
.contact-phone {
  font-size: 29px; /* PC 전화번호 글자 크기 */
  letter-spacing: -1px;
}

/* 전화번호 위의 PHONE 등 작은 안내 문구 */
.contact-phone small {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  margin-bottom: 8px;
}

/* 전화번호 오른쪽의 화살표 표시 위치 */
.contact-phone > span {
  float: right;
}

/* 이메일 문의 버튼의 글자 정렬과 크기 */
.contact-mail {
  text-align: center;
  font-size: 13px;
}

/* 3. 태블릿(1050px 이하): 패널 내부 여백과 전화번호 글자 크기 축소 */
@media (max-width: 1050px) {
  .contact-panel h2 {
      font-size: 30px;
  }

  .contact-panel {
      padding: 35px;
      gap: 30px;
  }

  .contact-phone {
      font-size: 25px;
  }
}

/* 모바일(760px 이하): 안내 문구와 연락처 버튼을 세로로 쌓음 */
@media (max-width: 760px) {
  .contact-panel h2 {
      font-size: 29px;
  }

  .contact-panel {
      grid-template-columns: 1fr;
      padding: 28px;
      gap: 32px;
  }

  .contact-phone {
      font-size: 26px;
  }

  .contact-section {
      padding-block: 65px;
  }
}

/* 아주 작은 화면(360px 이하): 패널 여백과 번호 글꼴 추가 축소 */
@media (max-width: 360px) {
  .contact-panel {
      padding: 22px;
  }

  .contact-phone {
      font-size: 23px;
  }
}

/* 4. 문의 패널의 은은한 블루 빛 및 투명한 글래스 배경 */
/* 아래부터는 CONTACT만 사용하는 반투명 카드 배경과 문자색입니다. */
.contact-panel {
  background:
    radial-gradient(ellipse at 0 0, rgba(8, 145, 178, 0.2), transparent 80%),
    rgba(255, 255, 255, 0.04);
}

/* 문의 설명·연락처 부제·이메일 문구의 보조 글자색 */
.contact-panel p:not(.eyebrow),
.contact-phone small,
.contact-mail {
  color: var(--text-sub);
}