/* ==========================================================================
   Contact (GB-20 5조각, 페이지 548)
   정본: Figma I10 160:1773(데스크톱 1440), C01 202:699(모바일 390).
   폼 마크업은 WPForms 686 그대로다. 여기서는 모양만 맞춘다.
   ========================================================================== */

.gb-contact { background: var(--gb-paper); color: var(--gb-ink); }
.gb-contact__split { display: flex; min-block-size: 900px; }

/* ── 왼쪽 남색 소개 560 (패딩 80/64, 간격 22) ────────── */

.gb-contact__intro {
  display: flex;
  flex: 0 0 560px;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
  padding: 80px 64px;
  background: var(--gb-navy);
  color: var(--gb-white);
}
.gb-contact__intro > * { margin: 0; }
.gb-contact__eyebrow,
.gb-contact__label {
  font-family: var(--gb-font-family-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-gold);
}
.gb-contact__title { font-family: var(--gb-font-display-family); font-size: 64px; font-weight: 400; line-height: 1.1; letter-spacing: 0; color: var(--gb-white); }
.gb-contact__lead { max-inline-size: none; /* 고객 10-03: 한 줄에 들어가면 한 줄 */ font-family: var(--gb-font-serif); font-size: 20px; line-height: 1.5; color: var(--gb-white); }
.gb-contact__intro .gb-contact__label { margin-block-start: 16px; }
.gb-contact__help { display: flex; flex-direction: column; gap: 22px; padding: 0; list-style: none; }
.gb-contact__help li { display: flex; gap: 12px; align-items: center; margin: 0; font-family: var(--gb-font-serif); font-size: 18px; line-height: normal; }
.gb-contact__help li::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; background: var(--gb-gold); }
.gb-contact__office { font-family: var(--gb-font-serif); font-size: 17px; line-height: normal; color: var(--gb-white); }
.gb-contact__art { display: block; inline-size: 100%; max-inline-size: 432px; aspect-ratio: 432 / 90; margin-block-start: 8px; }
.gb-contact__art .gb-art { display: block; inline-size: 100%; block-size: 100%; }

/* ── 오른쪽 흰 카드 720 (패딩 40, 간격 22) ───────────── */

.gb-contact__side { display: flex; flex: 1; flex-direction: column; justify-content: center; min-inline-size: 0; box-sizing: border-box; padding: 80px; } /* I10: 카드는 칸 세로 가운데 */
.gb-contact__card {
  box-sizing: border-box;
  max-inline-size: 720px;
  padding: 39px; /* I10 카드 720 = 선 1 + 39 + 폼 640 + 39 + 선 1 */
  border: 1px solid var(--gb-gray-200);
  background: var(--gb-white);
}
.gb-contact__card h2 { margin: 0; font-family: var(--gb-font-display-family); font-size: 32px; font-weight: 400; line-height: normal; letter-spacing: 0; color: var(--gb-ink); }
.gb-contact__note { margin: 22px 0 0; font-family: var(--gb-font-family-ui); font-size: 13px; line-height: normal; color: var(--gb-gray-600); }

/* 폼 규칙은 #wpforms-686 로 잡는다: 사이트 추가 CSS(customizer)에 'body #wpforms-686 …' 규칙(파란 버튼, 모바일 13px 칸)이 있어
   ID 없이는 못 이긴다. 폼 번호가 바뀌면 여기도 바꾼다(inc/contact.php GB_CONTACT_FORM) */
/* WPForms modern 변수로 색·크기를 맞추고, 남는 여백·float 는 직접 걷는다 */
.gb-contact .gb-contact__card #wpforms-686 {
  --wpforms-field-border-color: var(--gb-gray-600);
  --wpforms-field-border-radius: 0;
  --wpforms-field-background-color: var(--gb-white);
  --wpforms-field-text-color: var(--gb-ink);
  --wpforms-label-color: var(--gb-ink);
  --wpforms-button-background-color: var(--gb-navy);
  --wpforms-button-border-radius: 0;
  --wpforms-button-text-color: var(--gb-white);
  margin: 22px 0 0;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-field {
  float: none;
  inline-size: auto;
  margin: 0;
  padding: 0;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-field-textarea { grid-column: 1 / -1; }
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-field-label {
  margin: 0 0 8px;
  font-family: var(--gb-font-family-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-ink);
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-required-label { color: var(--gb-ink); }
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form input.wpforms-field-large,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form select.wpforms-field-large,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 47px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--gb-gray-600);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--gb-font-family-ui);
  font-size: 15px;
  line-height: normal;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea { block-size: 180px; padding-block: 14px; resize: vertical; }
/* Astra 다크 모드는 입력칸 바탕·글자색을 !important 로 칠한다(list.css·home.css 와 같은 방식) */
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form input.wpforms-field-large,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form input.wpforms-field-large:focus,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form select.wpforms-field-large,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form select.wpforms-field-large:focus,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea:focus {
  background-color: var(--gb-white) !important;
  color: var(--gb-ink) !important;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form ::placeholder { color: var(--gb-gray-600); opacity: 1; }
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form input:focus-visible,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form select:focus-visible,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 0; }
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-error { margin-block-start: 6px; font-family: var(--gb-font-family-ui); font-size: 13px; }
/* 오류 칸 — components.css .gb-field--error 와 같은 규칙(적색 없음, 먹색 2px). 문구와 함께 알린다 */
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form input.wpforms-error,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form select.wpforms-error,
.gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea.wpforms-error { border-color: var(--gb-ink); border-width: 2px; }

.gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-submit-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 22px 0 0;
  padding: 0;
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-submit {
  block-size: 47px;
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background-color: var(--gb-navy);
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-white);
}
.gb-contact .gb-contact__card #wpforms-686 .wpforms-submit:hover { background-color: color-mix(in srgb, var(--gb-navy) 85%, var(--gb-white)); }
.gb-contact .gb-contact__card #wpforms-686 .wpforms-submit:focus-visible { outline: 2px solid var(--gb-gold); outline-offset: 2px; }
/* JS 꺼졌을 때만 보이는 안내(대표님 2026-10-01). 보일 때는 시안 자리(버튼 왼쪽 작은 글씨) */
.gb-contact .wpforms-error-noscript { font-family: var(--gb-font-family-ui); font-size: 12px; color: var(--gb-gray-600); }
.gb-contact .wpforms-confirmation-container-full { margin: 22px 0 0; padding: 20px; border: 1px solid var(--gb-gray-200); background: var(--gb-paper); font-family: var(--gb-font-serif); font-size: 17px; color: var(--gb-ink); }

/* 보낸 뒤: WPForms 가 폼을 감사 문구로 바꾸면 필수 안내 문장은 의미가 없다 */
.gb-contact__card:has(.wpforms-confirmation-container-full) .gb-contact__note { display: none; }

/* ── 노트북 폭 ───────────────────────────────────────── */

@media (max-width: 1279px) {
  .gb-contact__intro { flex-basis: 440px; padding-inline: 44px; } /* 44: 'Send a note.' 한 줄 (GB-57) */
  .gb-contact__side { padding-inline: 40px; }
}

/* ── 모바일 C01 (390) ────────────────────────────────── */

@media (max-width: 1023px) {
  .gb-contact__split { flex-direction: column; min-block-size: 0; }
  .gb-contact__intro { flex: none; gap: 12px; padding: 40px 20px; }
  .gb-contact__title { font-size: 40px; }
  .gb-contact__lead { font-size: 17px; }
  .gb-contact__intro .gb-contact__label { margin-block-start: 20px; }
  .gb-contact__help { gap: 12px; }
  .gb-contact__help li { font-size: 17px; }
  .gb-contact__art { max-inline-size: none; aspect-ratio: 350 / 72; margin-block-start: 20px; }
  .gb-contact__side { display: block; padding: 32px 20px 48px; }
  .gb-contact__card { padding: 28px 20px; }
  .gb-contact__card h2 { font-size: 28px; }
  .gb-contact__note { margin-block-start: 18px; }
  .gb-contact .gb-contact__card #wpforms-686 { margin-block-start: 18px; }
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-form input.wpforms-field-large,
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-form select.wpforms-field-large { block-size: 48px; }
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-form textarea { block-size: 160px; }
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-form .wpforms-submit-container { margin-block-start: 18px; }
  .gb-contact .gb-contact__card #wpforms-686 .wpforms-submit { inline-size: 100%; block-size: 48px; }
}