/**
 * Wehome Select — components.md §10
 * Native select preferred. Matches Input tokens.
 */
.wh-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--wh-touch-min, 44px);
  padding: 10px 36px 10px 14px;
  box-sizing: border-box;
  border: 1px solid var(--wh-bd-input, rgba(0, 0, 0, 0.42));
  border-radius: var(--wh-radius-sm, 16px);
  background-color: var(--wh-card, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2366707d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  color: var(--wh-tx, #191f28);
  font-family: var(--wh-ff, Pretendard, -apple-system, sans-serif);
  font-size: var(--wh-text-base, 1rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--wh-tracking-body, -0.02em);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.wh-select:focus-visible {
  outline: 2px solid var(--wh-focus-ring, #681dc7);
  outline-offset: 2px;
}

.wh-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wh-select.is-error,
.wh-select[aria-invalid="true"] {
  border-color: var(--wh-err-bd, #fecaca);
  background-color: var(--wh-err-bg, #fef2f2);
}

.wh-select-field {
  display: flex;
  flex-direction: column;
  gap: var(--wh-stack-xs, 8px);
}

.wh-select-field__label {
  font-size: var(--wh-text-sm, 0.875rem);
  font-weight: 650;
  color: var(--wh-tx, #191f28);
}

.wh-select-field__hint,
.wh-select-field__error {
  font-size: var(--wh-text-xs, 0.75rem);
  color: var(--wh-tx3, #66707d);
  margin: 0;
}

.wh-select-field__error {
  color: var(--wh-err-tx, #b91c1c);
}