/* ============================================================
   Component: Dropzone
   c-dropzone — ファイルドロップエリア
   ============================================================ */

.c-dropzone {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--spacing-md);
  place-items: center;
  width: min(100%, 780px);
  min-height: 420px;
  align-content: center;
  padding: var(--spacing-2xl);
  border: 2px dashed rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(16, 17, 18, 0.72);
  text-align: center;
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
}

/* ドロップ中ヒント（疑似要素） */
.c-dropzone::after {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  content: "";
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.16s;
  white-space: nowrap;
}

/* --- Light variant (管理画面用) --- */

.c-dropzone--light {
  border-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 280px;
}

/* --- Children --- */

.c-dropzone__icon {
  width: 56px;
  height: 56px;
  color: currentColor;
}

.c-dropzone__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.c-dropzone__text {
  color: rgba(255, 255, 255, 0.76);
}

.c-dropzone--light .c-dropzone__text {
  color: var(--color-text-muted);
}