/* =========================================================
   문의 페이지 전용 — 화이트 테마
   ⚡ 색은 tokens.css 토큰만 쓴다. 새 색을 만들지 않는다 (DESIGN.md §1 규칙5).
      크기는 --fs-* 만 쓴다 (§2). 값을 직접 적지 않는다.

   레이아웃: 데스크톱 2열(좌 40% sticky / 우 60% 폼) → 900px 이하 1열.
   ========================================================= */

/* 문의 페이지는 화이트 고정. OS 다크모드를 따르지 않는다 (§3). */
.contact-body {
  background: var(--bg);
  color: var(--text);
}

/* ⚠ section-flow-fix.css 가 `main { background-color: var(--bg-dark) }` 를 전 페이지에 건다.
   main 은 header.php 가 출력하는 공통 래퍼라, 이걸 되돌리지 않으면
   body 를 흰색으로 지정해도 그 위를 다크가 덮는다. 화이트 페이지는 반드시 이 한 줄이 필요하다. */
.contact-body main { background-color: var(--bg); }

.contact-page {
  padding: clamp(112px, 10vw, 144px) 0 clamp(80px, 9vw, 140px);
}

.contact-grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(48px, 6vw, 96px);
  /* ⚠ align-items: start 를 쓰지 않는다.
     start 를 주면 왼쪽 칼럼이 '내용 높이'로 줄어들어, 그 안의 sticky 가 움직일 공간을 잃는다.
     (sticky 는 '부모 상자 안에서' 붙어 있는 것이라 부모가 짧으면 그냥 같이 스크롤된다)
     기본값 stretch 로 두면 왼쪽 칼럼이 오른쪽 폼 높이만큼 늘어나 sticky 가 제대로 동작한다. */
}

/* grid 자식이 내용 때문에 늘어나 가로 스크롤을 만드는 것을 막는다 (§4) */
.contact-grid > * { min-width: 0; }

/* ---------------------------------------------------------
   왼쪽 — 안내 + 연락처 (데스크톱 sticky)
   --------------------------------------------------------- */
.contact-aside__inner {
  position: sticky;
  top: calc(64px + var(--sp-5));   /* 공용 헤더 64px + 여백 */
  /* max-height + overflow-y 를 쓰지 않는다 — 왼쪽에 자체 스크롤바가 생긴다.
     자연 높이로 두면 창이 낮아도 내용이 잘리지 않고, 넘칠 때는 페이지와 함께 스크롤된다. */
}

/* 키컬러 — 흰 배경 위 18px 미만 파란 글씨라 --brand-text 를 쓴다 (§1 규칙2) */
.contact-eyebrow {
  display: block;
  color: var(--brand-text);
  font: 600 var(--fs-sm)/1 var(--font-mono);   /* --fs-label(11.5) → --fs-sm(14) 로 키움 */
  letter-spacing: .08em;   /* 영문 대문자 라벨 (§2) */
  text-transform: uppercase;
}

/* ⚠ --fs-h1(52px) 을 쓰지 않는다.
   --fs-h1 은 '화면 전체 폭을 쓰는 대표 제목'(회사소개 미션) 기준 크기다.
   여기는 40% 폭 칼럼이라 52px 한글은 한 줄에 8자밖에 안 들어가 제목이 3줄로 터진다.
   좁은 열에서는 한 단계 내린다. */
.contact-title {
  margin: var(--sp-3) 0 0;   /* CONTACT 라벨과의 간격을 좁힘 (24px → 16px) */
  color: var(--text);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: 0;         /* 한글에 자간을 주지 않는다 (§2) */
  line-height: 1.15;         /* 줄간격 축소 (1.25 → 1.15) */
  text-wrap: balance;
}

/* 제목(--fs-h2) 아래 설명문. 20px → 17px → 14px 로 두 단계 내렸다.
   본문이 아니라 '보조 안내'라 --fs-sm 이 맞다. 오른쪽 폼 안내문과 같은 크기로 맞춘다. */
.contact-lead {
  margin: var(--sp-4) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

/* ---- 연락처 목록 ---- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: clamp(32px, 3.5vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

/* 카드 — 배경 --bg-surface, 테두리 1px --border (§5 카드). 상단 강조선 같은 장식은 넣지 않는다. */
.contact-info__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 0;
  border-radius: 6px;
  background: var(--bg-surface);
}

.contact-info__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  color: var(--brand);   /* 아이콘은 --brand (§1 규칙2 "그 외 전부") */
}
.contact-info__icon svg { width: 20px; height: 20px; }

.contact-info__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.contact-info__label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.contact-info__value {
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: anywhere;   /* 긴 주소·메일이 가로로 넘치지 않게 */
}
a.contact-info__value { text-decoration: underline; text-underline-offset: 3px; }
a.contact-info__value:hover { color: var(--brand-text); }   /* 흰 배경 위 18px 미만 파란 글씨 (§1 규칙2) */
/* 주소 — 이메일·전화의 보조 문구(평일 10:00–18:00)와 같은 크기로 맞춘다.
   링크가 아니라 '읽기만 하는 정보'라 값(--fs-body)보다 한 단계 작게 둔다. */
.contact-info__value--plain {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.contact-info__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ---------------------------------------------------------
   오른쪽 — 문의 폼
   --------------------------------------------------------- */
.contact-form-wrap {
  padding-top: calc(var(--fs-sm) + var(--sp-3));
}

/* 폼 제목은 왼쪽 제목보다 한 단계 아래. 위계: 페이지 제목 > 폼 제목 > 라벨 */
.contact-form__title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

/* .contact-form__lead 는 제거했다 — 왼쪽 .contact-lead 와 같은 말이라 중복이었다 (§7). */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: clamp(32px, 3.5vw, 48px);
}

/* 허니팟 — 화면에서 숨기되 display:none 은 피한다(일부 봇이 걸러냄) */
.contact-form__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.field-row > * { min-width: 0; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* 필수 표시 — 별표나 색에만 의존하지 않고 '필수' 글자로 표기 (§6) */
.field__required {
  padding: 2px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0;
}

.field__input {
  width: 100%;
  min-height: 44px;                 /* 모바일 최소 터치 영역 (§6) */
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  /* 그림자 없음. 호버·포커스에서 크기가 변하지 않는다 (요구사항) */
  transition: border-color .15s ease;
}
/* 안내 문구는 입력칸 안(placeholder)에 넣는다. 커서를 올리면(포커스) 사라진다.
   ⚠ 문구는 마크업에 .field__hint.sr-only 로 그대로 남겨두고 aria-describedby 로 연결한다 —
     placeholder 는 스크린리더가 읽어준다는 보장이 없어서 이것만 믿으면 접근성이 깨진다. */
.field__input::placeholder { color: var(--text-muted); opacity: 1; }
.field__input:focus::placeholder { color: transparent; }
.field__input:hover { border-color: var(--text-muted); }

/* 화면에서만 숨기고 스크린리더에는 남긴다 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 입력칸 글자 크기 — 데스크톱에서만 한 단계 줄인다.
   ⚠ 모바일은 --fs-body(16px) 를 유지해야 한다. iOS 사파리는 입력칸 글자가 16px 미만이면
     탭할 때 화면을 자동 확대해버려서, 작게 만들면 오히려 모바일 사용성이 깨진다. */
@media (min-width: 641px) {
  .field__input { font-size: var(--fs-sm); }
}

.field__select {
  appearance: none;
  padding-right: 40px;
  /* 화살표는 배경 이미지 대신 그라데이션 두 줄로 그린다 — 외부 자산 없이 */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field__select:invalid { color: var(--text-muted); }

.field__textarea {
  min-height: 180px;
  max-width: 100%;
  resize: vertical;   /* 세로만 조절 — 가로 스크롤 방지 */
}

.field__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* 오류 — 색만으로 표현하지 않는다. '⚠' 기호와 문장을 함께 쓴다 (§6) */
.field__error {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}
.field__error::before { content: "⚠ "; }

.field__input[aria-invalid="true"] { border-color: var(--text); border-width: 2px; }

/* ---- 개인정보 동의 ---- */
.field--consent { margin-top: var(--sp-2); }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 0;
  border-radius: 6px;
  background: var(--bg-surface);
  cursor: pointer;
}

.consent__box {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.consent__text {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.consent__text .field__required { margin-right: 4px; background: var(--bg); }

.consent__note {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- 제출 버튼 — 이 페이지의 유일한 파란 면 (§1 규칙1) ---- */
.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;              /* §5 버튼 모서리 6px */
  background: var(--brand);
  color: var(--c-accent-fg);       /* 액센트 위 글자 = 흰색 */
  font-family: var(--font);
  font-size: 15px;                 /* §1 규칙3 — 파란 버튼 위 글자 15px 이상 */
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease;   /* 크기 변화·그림자 없음 (§5) */
}
.contact-submit:hover { background: var(--brand-hover); }
.contact-submit[disabled] { background: var(--text-muted); cursor: not-allowed; }

/* 종이비행기 — 장식이라 aria-hidden. 전송 중에는 숨긴다(문구가 '보내는 중…'으로 바뀜) */
.contact-submit__icon { width: 18px; height: 18px; flex: none; }
.contact-submit[disabled] .contact-submit__icon { display: none; }

/* ---- 제출 결과 메시지 ---- */
.form-status {
  margin: 0;
  padding: var(--sp-4);
  border: 0;
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.7;
  white-space: pre-line;   /* 메시지의 줄바꿈을 그대로 보여준다 */
}
.form-status--error { border-color: var(--text); border-width: 2px; }

/* ---------------------------------------------------------
   포커스 — 표시를 없애지 않는다 (§6)
   --------------------------------------------------------- */
.field__input:focus-visible,
.consent__box:focus-visible,
.contact-submit:focus-visible,
.contact-info__value:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.field__input:focus-visible { border-color: var(--brand); }

/* ---------------------------------------------------------
   반응형 — 900px 이하 1열 / 640px 이하 폼도 1열 (§4)
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;   /* 안내·연락처가 먼저, 폼이 다음 */
    gap: clamp(40px, 7vw, 64px);
  }
  /* 모바일·태블릿에서는 sticky 해제 */
  .contact-aside__inner {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .contact-form-wrap { padding-top: 0; }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-lead br,
  .contact-title br { display: none; }   /* 좁은 화면에서 강제 줄바꿈 해제 */
}

/* 모션 최소화 설정을 존중한다 (§6) */
@media (prefers-reduced-motion: reduce) {
  .field__input,
  .contact-submit { transition: none; }
}