/* carry-core.com "/25" (문의하기/Get in Touch) 페이지 본문 전용 스타일 — 실측 기반
   (2026-08-12 Playwright, carry-core.com/25 + engcarrycore.imweb.me/25, desktop 1440 + mobile
   iPhone13). 헤더/푸터는 main.css 공통. 동의 체크박스/약관 미리보기 박스/제출 버튼은
   main.css의 .ibform-* 공통 컴포넌트 재사용(ib-partner.css와 동일 컴포넌트, 실측 확인).
   실측 확인: "Submessage" x2는 라이브 CMS에 서브텍스트 필드가 채워지지 않은 채로 남아있는
   실제 버그(placeholder 문구가 그대로 노출) — 의도적으로 그대로 재현(사용자 결정: /22와 동일하게
   라이브 버그 bug-for-bug 재현). */

.gitcontainer { max-width: 1220px; margin: 0 auto; padding: 0 40px; }

/* ---------- hero (dark navy) ---------- */
.githero-section { position: relative; background: #0B1E3F; padding: 90px 0 60px; overflow: hidden; }
.githero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.githero-inner {
  position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.githero-copy { flex: 1 1 420px; max-width: 620px; }
.githero-heading { font-size: 48px; font-weight: 700; color: #fff; line-height: 1.35; margin: 0; }
.githero-heading span { display: block; }
.githero-subtext { margin-top: 20px; font-size: 20px; font-weight: 400; color: #BEDBFF; line-height: 1.7; white-space: pre-line; }

.githero-channels { display: flex; gap: 40px; flex: 0 0 auto; padding-top: 8px; }
.githero-channel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
a.githero-channel { color: inherit; text-decoration: none; cursor: pointer; transition: opacity .2s; }
a.githero-channel:hover { opacity: 0.8; }
.githero-channel-label { font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; }
.githero-channel-icon { display: block; width: 64px; height: 64px; }
/* EN 값(예: "KakaoTalk Consultation")이 KR보다 훨씬 길어서 nowrap이면 채널 3개 열이
   히어로 카피 컬럼을 밀어내 헤딩이 불필요하게 줄바꿈됨(실측 확인) — 값만 줄바꿈 허용 + 폭 제한. */
.githero-channel-value { font-size: 16px; font-weight: 400; color: #94A3B8; max-width: 130px; }

/* ---------- get in touch form ---------- */
.gitform-section { background: #fff; padding: 90px 0; }
.gitform-inner { max-width: 1220px; margin: 0 auto; padding: 0 40px; display: flex; gap: 64px; align-items: flex-start; }
.gitform-copy { flex: 0 0 340px; }
.gitform-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #155DFC; margin-bottom: 16px; }
.gitform-heading { font-size: 36px; font-weight: 700; color: #000; margin: 0 0 16px; }
.gitform-submessage p { font-size: 15px; color: #62748E; margin: 0; line-height: 1.6; }

.gitform-formwrap { flex: 1 1 0; max-width: 640px; }
.gitform-form { display: flex; flex-direction: column; gap: 28px; }
.gitform-field { display: flex; flex-direction: column; gap: 8px; }
.gitform-field input, .gitform-field textarea {
  border: none; border-bottom: 1px solid #E2E8F0; border-radius: 0; padding: 8px 2px;
  font-size: 15px; font-family: inherit; background: transparent; width: 100%;
}
.gitform-field input:focus, .gitform-field textarea:focus { outline: none; border-bottom-color: #155DFC; }
.gitform-field textarea { min-height: 90px; resize: vertical; }

/* ============ mobile (<=720px) ============ */
@media (max-width: 720px) {
  .githero-section { padding: 40px 0 40px; }
  /* `.githero-inner{justify-content:space-between}`(base, 데스크톱 가로 배치용)가 모바일
     column 방향에서는 세로축(main axis)에 적용돼 두 자식 사이에 불필요한 여백을 만들 수 있어
     명시적으로 flex-start로 재정의. */
  .githero-inner { padding: 0 20px; flex-direction: column; justify-content: flex-start; }
  /* 실측(2026-08-12)으로 발견: `.githero-copy{flex:1 1 420px}`(base)의 420px flex-basis는
     데스크톱 가로 레이아웃에서 "폭" 기준값인데, 모바일에서 flex-direction이 column으로 바뀌면
     같은 flex-basis가 "높이" 기준값으로 재해석돼 콘텐츠 실제 높이(~160px)와 무관하게 무조건
     420px 높이로 강제됨 — githero-section이 라이브보다 304px 더 커지던 원인. flex-grow도 1이라
     남는 공간까지 늘어날 수 있어 콘텐츠 크기 그대로 렌더되도록 flex 자체를 초기화. */
  .githero-copy { flex: 0 0 auto; max-width: none; text-align: center; }
  .githero-heading { font-size: 26px; }
  .githero-subtext { font-size: 14px; color: #C9C9C9; }
  .githero-channels { width: 100%; justify-content: center; gap: 40px; margin-top: 32px; flex-direction: column; align-items: center; }
  .githero-channel-label { font-size: 15px; }
  /* 실측(라이브 모바일): "admin@carry-core.com"이 줄바꿈 없이 한 줄로 표시됨. base의
     `max-width:130px`는 데스크톱에서 EN 긴 라벨("KakaoTalk Consultation")이 히어로 카피
     컬럼을 밀어내는 걸 막으려던 값인데, 모바일은 이미 세로 스택(column) 레이아웃이라 그
     문제 자체가 없음 — 모바일에서만 폭 제한 풀어서 이메일 줄바꿈 방지. */
  .githero-channel-value { color: #fff; max-width: none; }

  .gitform-section { padding: 56px 0; }
  .gitform-inner { padding: 0 20px; flex-direction: column; gap: 32px; }
  .gitform-copy { flex: 0 0 auto; }
  .gitform-heading { font-size: 24px; }
  .gitform-formwrap { max-width: 100%; }
}