/* 파일 놓기 칸(552-3) — 점선 칸 · 끌어 오면 강조 · 오류 빨강 */
.ui-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 48px;
  padding: var(--spacing-16);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}
.ui-drop__icon {
  color: var(--color-text-muted);
}
.ui-drop__text,
.ui-drop__hint,
.ui-drop__error {
  margin: 0;
}
.ui-drop__text {
  font-size: var(--text-body-sm);
}
.ui-drop__hint {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.ui-drop .ui-progress {
  align-self: stretch;
}
.ui-drop:is(.is-over, [data-state="hover"]) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.ui-drop:is(.is-over, [data-state="hover"]) .ui-drop__icon {
  color: var(--color-accent);
}
.ui-drop[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-drop:is(.is-error, [data-state="error"]) {
  border-color: var(--color-danger);
}
.ui-drop__error {
  font-size: var(--text-caption);
  color: var(--color-danger);
}

/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
.ui-drop[hidden] {
  display: none !important;
}