/* contact.css — 문의(contact.html) 전용 스타일.
 * 문의 폼 · 필드 · 커스텀 셀렉트/체크박스 · 문의 페이지 가운데 정렬. 공통 뼈대는 base.css 참고.
 */

/* ── 문의 폼 (contact.html) ────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.form-section { padding-block: var(--space-lg) var(--space-3xl); }

.form-card {
  max-width: 40rem;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  display: grid;
  gap: var(--space-lg);
}

.field { display: grid; gap: var(--space-2xs); }

.field__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}
.req { color: var(--color-accent-text); }
.field__opt {
  margin-inline-start: 0.25em;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.field__input::placeholder { color: var(--color-muted); }
.field__input:hover { border-color: var(--color-rule); }
.field__input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 22%, transparent);
}

.field__textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

/* 셀렉트 — 커스텀 화살표 */
.field__select { position: relative; }
.field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}
.field__select::after {
  content: "";
  position: absolute;
  top: 50%; right: 1rem;
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--color-ink-2);
  border-bottom: 2px solid var(--color-ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field__hint { font-size: var(--text-sm); color: var(--color-muted); }
.field__error {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent-text);
}

/* 오류 상태 */
.field--invalid .field__input {
  border-color: var(--color-accent-text);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent-text) 16%, transparent);
}

/* 체크박스 (개인정보 동의) */
.field--check { gap: var(--space-2xs); }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-sm);
  cursor: pointer;
}
.check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px;
  margin-block-start: 1px;
  border: 1.5px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-paper);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.check__box::after {
  content: "";
  width: 6px; height: 11px;
  border-right: 2px solid var(--color-accent-ink);
  border-bottom: 2px solid var(--color-accent-ink);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dur-micro) var(--ease-out);
  margin-block-end: 3px;
}
.check__input:checked + .check__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.check__input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check__input:focus-visible + .check__box {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 30%, transparent);
}
.check__text { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.55; }
.field--check.field--invalid .check__box { border-color: var(--color-accent-text); }

.form-card__submit { margin-block-start: var(--space-xs); }
.form-card .contact__soft { margin-block-start: calc(var(--space-md) * -1 + var(--space-2xs)); }

/* 전송 완료 안내 (한 줄) */
.form-note {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-ink-2);
  animation: reveal var(--dur-long) var(--ease-out) both;
}

/* ── 문의 페이지 — 히어로는 가운데, 폼 카드는 가운데(내용은 왼쪽) ── */
.page--contact .page-hero { text-align: center; }
.page--contact .page-hero h1 { margin-inline: auto; }
.page--contact .page-hero .lede { margin-inline: auto; }

/* 카드는 페이지 가운데 정렬, 라벨·입력칸은 왼쪽 맞춤(기본) */
.page--contact .form-card { margin-inline: auto; }
/* 보내기 버튼 — 가운데 + 크게 */
.page--contact .form-card__submit {
  justify-self: center;
  min-height: 56px;
  padding-inline: 3rem;
  font-size: var(--text-md);
  margin-block-start: var(--space-md);
}
.page--contact .form-card .contact__soft { text-align: center; }