@charset "utf-8";

/* =========================================
   Contact Section 스타일 (common.css 기반)
========================================= */
.contact-section {
  padding-top: 10rem;
}

.contact-section .section-title {
  display: inline-block;
  position: relative;
}

.contact-section h2 {
  position: relative;
  font-size: clamp(28px, 3vw, 7rem);
  margin-bottom: 1.2rem;
  z-index: 99;
}

.contact-section .circle {
  position: absolute;
  width: 8rem;
  height: 8rem;
  background-color: #c63224; /* 붉은 원색 */
  border-radius: 50%;
  top: -25%; /* 원의 수직 위치 */
  right: -10%; /* 원의 수평 위치 */
  z-index: 1;
}
/* 섹션 배경 및 기본 설정 */

/* 래퍼 설정 (common.css의 .wrap 활용) */
.contact-section .contact-wrap {
  max-width: 80rem; /* 폼은 너무 넓으면 안 예뻐서 800px로 제한 */
}

/* 섹션 타이틀 (common.css의 .title 활용) */

.contact-section .title p {
  margin-top: 1.6rem; /* 제목과 설명 사이 간격 */
}

/* -----------------------------------------
   폼(Form) 공통 스타일
----------------------------------------- */
.contact-form {
  padding-top: 4rem;
}

.contact-form .form-group {
  margin-bottom: 4rem; /* 그룹 간 간격 */
}

/* 라벨 스타일 */
.contact-form label {
  display: block;
  /* h4 스타일 활용 (22px, 흰색, 600 weight) */
  font-size: clamp(14px, 2vw, 1.7rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.4em;
  margin-bottom: 1.5rem;
}

/* 필수 항목 표시 (*) */
.contact-form .required::after {
  content: "*";
  color: var(--main); /* common.css의 --main 변수 활용 (#e11818) */
  margin-left: 0.5rem;
  font-weight: 700;
}

/* 입력 필드 (Input) 스타일 */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="url"] {
  width: 100%;
  height: 5.4rem; /* 터치하기 편한 크기 */
  padding: 0 2.2rem;
  background-color: #222; /* 어두운 배경에 맞는 입력창 색상 */
  border: 1px solid #333;
  border-radius: 1rem;

  /* 텍스트 스타일 (p18 스타일 활용) */
  font-family: "pretendard", sans-serif;
  font-size: clamp(13px, 2vw, 1.5rem);
  color: #fff; /* 입력 텍스트 흰색 */

  transition: all 0.3s ease;
}

/* 입력 필드 포커스 효과 */
.contact-form input:focus {
  border-color: var(--main); /* 포커스 시 메인 컬러로 강조 */
  background-color: #2a2a2a; /* 살짝 밝아짐 */
  outline: none;
}

/* 플레이스홀더 색상 */
.contact-form input::placeholder {
  color: #666;
}

/* -----------------------------------------
   라디오 버튼 그룹 (예산, 유입경로)
----------------------------------------- */
.contact-form .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem; /* 버튼 사이 간격 */
}

.contact-form .radio-box {
  position: relative;
}

/* 실제 라디오 버튼 숨김 */
.contact-form .radio-box input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* 라디오 버튼 디자인 (Label) */
.contact-form .radio-box label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  padding: 0 3rem;
  background-color: #222;
  border: 1px solid #333;
  border-radius: 5rem; /* 완전 둥근 형태 */

  /* 텍스트 스타일 (p16 스타일 활용) */
  font-size: clamp(13px, 2vw, 1.5rem);
  font-weight: 500;
  color: #999;
  margin-bottom: 0; /* 기본 label 마진 제거 */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 라디오 버튼 선택됨 (Checked) */
.contact-form .radio-box input[type="radio"]:checked + label {
  background-color: var(--main); /* 메인 컬러 배경 */
  border-color: none;
  color: #fff; /* 텍스트 흰색 */
  font-weight: 600;
}
/* 라디오 버튼 호버 효과 */
.contact-form .radio-box label:hover {
  background-color: #333;
  color: #fff;
}

/* -----------------------------------------
   개인정보 동의 박스
----------------------------------------- */
.contact-form .privacy-wrap {
  margin-top: 6rem;
  padding: 3rem;
  background-color: #1a1a1a; /* 살짝 구분되는 배경색 */
  border-radius: 1.6rem;
  border: 1px solid #222;
}

/* 약관 내용 스크롤 박스 */
.contact-form .privacy-content {
  height: 15rem;
  overflow-y: auto;
  padding-right: 1.5rem;
  margin-bottom: 2rem;

  /* 텍스트 스타일 (p14 스타일 활용) */
  font-size: clamp(13px, 2vw, 1.4rem);
  line-height: 1.6;
  color: #777;

  /* 스크롤바 커스텀 (웹킷 브라우저용) */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background-color: #222;
  }
}

/* 동의 체크박스 */
.contact-form .privacy-check {
  display: flex;
  justify-content: flex-end;
}

.contact-form .privacy-check label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;

  /* 텍스트 스타일 (p16 스타일 활용) */
  font-size: clamp(12px, 2vw, 1.4rem);
  color: #d9d9d9;
}

.contact-form .privacy-check input[type="checkbox"] {
  appearance: none; /* 기본 체크박스 숨김 */
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 0.4rem;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* 체크되었을 때 모양 */
.contact-form .privacy-check input[type="checkbox"]:checked {
  background-color: var(--main);
  border-color: var(--main);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* -----------------------------------------
   제출 버튼 (Submit Button)
----------------------------------------- */
.contact-form .btn-submit-wrap {
  margin-top: 8rem;
  text-align: center;
}

.contact-form .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  height: 7rem;
  background-color: var(--main);
  border: none;
  border-radius: 5rem;
  cursor: pointer;
  transition: all 0.3s ease;

  /* 텍스트 스타일 (h3급 강조) */
  font-family: "pretendard", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

/* 버튼 호버 효과 */
.contact-form .btn-submit:hover {
  background-color: #c01515; /* 약간 어두운 레드 */
  transform: translateY(-3px); /* 살짝 떠오르는 효과 */
  box-shadow: 0 10px 20px -10px rgba(225, 24, 24, 0.5); /* 붉은 그림자 */
}

.contact_footer {
  margin-top: 10rem;
}