/* ============================================================
   sec-contact — 문의 폼 UI(백엔드 미연동)
   모든 규칙을 #sec-contact 하위로 스코프(전역 오염 금지).
   tokens.css 변수 사용 · 쿨톤 · 글라스 톤 유지.
   3색 아이덴티티: teal=MES · indigo=MOM · violet=AI.
   ============================================================ */

/* ---- 레이아웃: 카피 + 폼 2열 ---- */
#sec-contact .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* ---- 좌: 인트로 ---- */
#sec-contact .contact-intro { position: sticky; top: 88px; }

#sec-contact .contact-points {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
#sec-contact .contact-points li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--ink-2);
  word-break: keep-all;
}
#sec-contact .contact-points__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
}
#sec-contact .contact-points__dot--teal   { background: var(--c-teal);   box-shadow: 0 0 0 4px var(--c-teal-soft); }
#sec-contact .contact-points__dot--indigo { background: var(--c-indigo); box-shadow: 0 0 0 4px var(--c-indigo-soft); }
#sec-contact .contact-points__dot--violet { background: var(--c-violet); box-shadow: 0 0 0 4px var(--c-violet-soft); }

/* ---- 우: 폼 래퍼(글라스 패널) ---- */
#sec-contact .contact-formwrap {
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3.4vw, 40px);
}
/* 상단 3색 시그니처 라인 */
#sec-contact .contact-formwrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-tri);
}

/* ---- 폼 필드 ---- */
#sec-contact .contact-form {
  display: grid;
  gap: var(--space-5);
}
#sec-contact .contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
#sec-contact .contact-field { display: grid; gap: var(--space-2); }

#sec-contact .contact-field label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
#sec-contact .contact-req { color: var(--c-violet); font-weight: 800; }
#sec-contact .contact-optional {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 2px;
}

#sec-contact input[type="text"],
#sec-contact input[type="email"],
#sec-contact input[type="tel"],
#sec-contact select,
#sec-contact textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
#sec-contact textarea { resize: vertical; min-height: 108px; line-height: var(--lh-body); }

#sec-contact input::placeholder,
#sec-contact textarea::placeholder { color: var(--ink-3); }

#sec-contact input:focus,
#sec-contact select:focus,
#sec-contact textarea:focus {
  outline: none;
  border-color: var(--c-indigo-vivid);
  box-shadow: 0 0 0 3px var(--c-indigo-glow);
}

/* ---- select 커스텀 화살표 ---- */
#sec-contact .contact-select { position: relative; }
#sec-contact .contact-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
#sec-contact .contact-select i {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  font-size: 1.05rem;
}

/* ---- 체크박스 동의 ---- */
#sec-contact .contact-field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}
#sec-contact .contact-field--check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--c-violet);
  cursor: pointer;
  flex: none;
}
#sec-contact .contact-field--check label {
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.5;
}
#sec-contact .contact-agree-note {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px;
}
#sec-contact .contact-field--check .contact-error { grid-column: 1 / -1; }

/* ---- 유효성 에러 상태 ---- */
#sec-contact .contact-error {
  font-size: var(--fs-label);
  font-weight: 600;
  color: #e11d48;
}
#sec-contact .contact-field.is-invalid input,
#sec-contact .contact-field.is-invalid textarea {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244,63,94,.18);
}

/* ---- 제출 버튼 ---- */
#sec-contact .contact-submit { width: 100%; padding-block: 15px; }

#sec-contact .contact-note {
  font-size: var(--fs-label);
  color: var(--ink-3);
  text-align: center;
  margin-top: calc(var(--space-2) * -1);
}

/* ---- 제출 결과 안내(준비 중) ---- */
#sec-contact .contact-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-indigo);
  background: var(--c-indigo-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  word-break: keep-all;
}

/* ---- 반응형 ---- */
@media (max-width: 860px) {
  #sec-contact .contact-grid { grid-template-columns: 1fr; }
  #sec-contact .contact-intro { position: static; }
}
@media (max-width: 480px) {
  #sec-contact .contact-row { grid-template-columns: 1fr; }
}

/* ---- 모션 축소 존중(장식 전환만) ---- */
@media (prefers-reduced-motion: reduce) {
  #sec-contact input,
  #sec-contact select,
  #sec-contact textarea { transition: none; }
}