/* =========================================================
   pages/contact.css — 문의(Contact) 전용. Contact Form 7 출력 스타일링.
   Figma 태경전자 2568-2744 기준. 표준 CF7 클래스 + 권장 폼 래퍼(.cf-*) 모두 커버.
   ⚠ page-contact.php 담당.
   ========================================================= */

.contact-head { text-align: center; }
/* Contact은 별도 Figma(태경전자) 기반 — 공통 60/40 스케일 미적용, 폼 안내 크기 유지 */
.contact-head .sec-title { font-size: 40px; letter-spacing: -.01em; line-height: 1.2; }
.contact-head .sec-lead { margin-top: 16px; font-size: 20px; line-height: 1.6; letter-spacing: normal; }
@media (max-width: 1024px) { .contact-head .sec-title { font-size: 32px; } .contact-head .sec-lead { font-size: 18px; } }
@media (max-width: 768px) { .contact-head .sec-title { font-size: 26px; } .contact-head .sec-lead { font-size: 16px; } }
.contact-form-wrap { max-width: 1040px; margin: 50px auto 0; }

/* 행/필드 */
.cf-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cf-form .cf-field { margin-bottom: 26px; }
.cf-form label,
.cf-form .cf-consent-title { display: block; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--ink); margin-bottom: 12px; letter-spacing: -.01em; }
.cf-req { color: var(--green); font-weight: 700; }

/* 입력 필드(표준 CF7 + 일반) */
.cf-form input[type="text"], .cf-form input[type="email"], .cf-form input[type="tel"],
.cf-form input.wpcf7-text, .cf-form textarea, .cf-form .wpcf7-textarea {
  width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px; background: #fff;
  font-size: 16px; color: var(--ink); font-family: var(--font-body); box-sizing: border-box;
  transition: border-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.cf-form input::placeholder, .cf-form textarea::placeholder { color: #9a9a9a; }
.cf-form input:focus, .cf-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(134,199,1,.15); }
.cf-form textarea { min-height: 210px; resize: vertical; line-height: 1.6; }
.cf-form .wpcf7-form-control-wrap { display: block; }

/* 개인정보 동의 박스 */
.cf-consent { margin: 34px 0 8px; }
.cf-consent-body { background: #f7f7f7; border: 1px solid var(--line); border-radius: 6px; padding: 28px 30px; font-size: 15px; color: var(--gray); line-height: 1.7; }
.cf-consent-body p { margin: 0 0 12px; }
.cf-consent-body p:last-child { margin-bottom: 0; }
.cf-consent-body .cf-dot { display: block; padding-left: 15px; position: relative; margin-top: 2px; color: var(--gray); }
.cf-consent-body .cf-dot::before { content: "·"; position: absolute; left: 5px; top: -1px; }

/* 동의 체크 행 */
.cf-agree { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 22px 0 8px; }
.cf-agree-q { font-size: 16px; color: var(--ink); }
.cf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); cursor: pointer; }
.cf-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }

/* 제출 버튼 */
.cf-submit { text-align: center; margin-top: 30px; }
.cf-form input.wpcf7-submit, .cf-form .wpcf7-submit {
  background: var(--green); color: #fff; border: 0; border-radius: 4px;
  padding: 16px 72px; font-size: 17px; font-weight: 700; font-family: var(--font-head); cursor: pointer;
  transition: background-color .25s var(--e-out), transform .25s var(--e-out), box-shadow .25s var(--e-out);
}
.cf-form input.wpcf7-submit:hover, .cf-form .wpcf7-submit:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(134,199,1,.32); }

/* CF7 기본 <p> 래핑 폼(관리자가 래퍼 클래스 미사용 시) 폴백 */
.cf-form > p { margin-bottom: 24px; }
.cf-form .wpcf7-not-valid-tip { color: #e23; font-size: 13px; margin-top: 6px; }
.wpcf7-response-output { margin: 20px 0 0 !important; border-radius: 4px; padding: 14px 18px !important; font-size: 15px; }

/* 반응형 — 태블릿 */
@media (max-width: 768px) {
  .contact-form-wrap { margin-top: 34px; }

  /* Name+Phone 1열 스택 (필드 간 간격은 .cf-field margin으로 유지) */
  .cf-form .cf-row { grid-template-columns: 1fr; gap: 0; }
  .cf-form .cf-row .cf-field { margin-bottom: 22px; }
  .cf-form .cf-field { margin-bottom: 22px; }

  /* 라벨 ≥18px, 입력 ≥16px(iOS 자동확대 방지) */
  .cf-form label, .cf-form .cf-consent-title { font-size: 18px; }
  .cf-form input[type="text"], .cf-form input[type="email"], .cf-form input[type="tel"],
  .cf-form input.wpcf7-text, .cf-form textarea, .cf-form .wpcf7-textarea {
    font-size: 16px; padding: 14px 16px;
  }
  .cf-form textarea { min-height: 170px; }

  /* 동의 박스 여백 축소, 가독 유지(≥14px) */
  .cf-consent { margin: 28px 0 8px; }
  .cf-consent-body { padding: 20px 18px; font-size: 15px; }

  /* 질문 + 동의 체크 세로 스택, 좌측 정렬 */
  .cf-agree { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cf-check { min-height: 24px; }
  .cf-check input[type="checkbox"] { width: 20px; height: 20px; }

  /* 제출 버튼 풀폭, 탭 높이 ≥48px */
  .cf-submit { margin-top: 26px; }
  .cf-submit input.wpcf7-submit, .cf-form .wpcf7-submit { width: 100%; padding: 15px 24px; min-height: 52px; }
}

/* 반응형 — 모바일 375px */
@media (max-width: 480px) {
  .contact-form-wrap { margin-top: 28px; }
  .cf-form .cf-field { margin-bottom: 20px; }
  .cf-form .cf-row .cf-field { margin-bottom: 20px; }

  .cf-form label, .cf-form .cf-consent-title { font-size: 18px; margin-bottom: 10px; }

  /* 입력 폰트는 16px 유지(확대 방지), 가로 오버플로 방지 */
  .cf-form input[type="text"], .cf-form input[type="email"], .cf-form input[type="tel"],
  .cf-form input.wpcf7-text, .cf-form textarea, .cf-form .wpcf7-textarea {
    font-size: 16px; padding: 13px 14px; max-width: 100%;
  }
  .cf-form textarea { min-height: 150px; }

  /* 동의 박스 — 작은 화면에서도 읽히게(≥14px) */
  .cf-consent { margin: 24px 0 6px; }
  .cf-consent-body { padding: 16px 15px; font-size: 14px; line-height: 1.65; }
  .cf-consent-body p { margin: 0 0 10px; }
  .cf-consent-body .cf-dot { padding-left: 14px; }

  /* 동의 체크 — 탭 친화(≥20px) */
  .cf-agree { gap: 12px; padding: 18px 0 6px; }
  .cf-agree-q { font-size: 15px; }
  .cf-check { font-size: 15px; gap: 10px; }
  .cf-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }

  /* 제출 버튼 — 풀폭, 탭 높이 ≥48px */
  .cf-submit { margin-top: 24px; }
  .cf-submit input.wpcf7-submit, .cf-form .wpcf7-submit { width: 100%; padding: 15px 20px; min-height: 50px; font-size: 16px; }

  .wpcf7-response-output { font-size: 14px; padding: 12px 14px !important; }
}