/* 폼 사전 검증 표기 규격 — 3로케일 공통.
 *
 * 한 줄이 항상 「무엇이 왜 안 되는지 → 이렇게 적으면 됩니다」로 끝나고, 그 예시는 바로 위
 * placeholder 와 같은 문자열이다. 고객이 눈을 두 번 옮기지 않게 하는 것이 이 컴포넌트의 전부다.
 *
 * 색은 기존 토큰 승계 — 새 팔레트를 만들지 않는다.
 *   오류      #b91c1c  대비 6.47:1 (#fff 위)  · 기존 .err 와 동일 값
 *   안내      #475565  대비 7.62:1            · --ds-sub 와 동일 값
 *   예시(회색) #6b7280  대비 4.83:1            · WCAG 1.4.3 본문 기준 통과
 *   테두리    #6b7280  대비 4.83:1            · WCAG 1.4.11 비텍스트 3:1 통과
 * 종전 placeholder·테두리 값 #94a3b8 은 2.59:1 로 기준 미달이라 올렸다.
 * 대비는 WCAG 산식으로 실측해 고정한 값이다(2026-07-29).
 */

.fg-msg {
  display: block;
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid currentColor;
  font-size: 13.5px;
  line-height: 1.65;
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.fg-msg[hidden] { display: none; }

.fg-msg--err { color: #b91c1c; }

.fg-msg--hint { color: #475565; border-left-color: #6b7280; font-weight: 500; }

/* 테두리만으로 상태를 전하지 않는다 — 같은 자리에 글로도 나온다(WCAG 1.4.1). */
.fg-invalid,
input.fg-invalid,
select.fg-invalid,
textarea.fg-invalid {
  border-color: #b91c1c !important;
  outline: 1px solid #b91c1c;
}

.fg-invalid:focus { outline: 2px solid #b91c1c; outline-offset: -1px; }

/* 고객이 적는 칸의 예시는 연한 회색 — 라벨을 대신하지 않고 예시로만 읽히게 한다. */
input::placeholder,
textarea::placeholder { color: #6b7280; opacity: 1; }

/* 추천 질의 칩 — 눌러서 빈 칸을 채운다. 안 눌러도 placeholder 로 같은 문장이 보인다. */
.fg-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.fg-sugg-t {
  flex: 0 0 100%;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #475565;
}

.fg-chip {
  margin: 0;
  padding: 7px 12px;
  border: 1px dashed #6b7280;
  border-radius: 999px;
  background: #fff;
  color: #475565;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  max-width: 100%;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fg-chip:hover { border-style: solid; border-color: #2b6cb0; color: #1a2633; }

.fg-chip:focus-visible { outline: 2px solid #2b6cb0; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .fg-chip { transition: border-color .15s ease, color .15s ease; }
}