File Upload (파일 업로드)

<div class="pi-upload" data-upload>
  <input class="pi-upload__input" id="pi-upload-demo" type="file" multiple accept="image/*">
  <label class="pi-upload__zone" for="pi-upload-demo">
    <svg class="pi-upload__icon" viewBox="0 0 24 24" width="34" height="34" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M12 15V4"/><path d="M8 8l4-4 4 4"/><path d="M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4"/>
    </svg>
    <span class="pi-upload__hint">파일을 끌어 놓거나 <b>선택</b>하세요</span>
    <span class="pi-upload__note">JPG·PNG, 10MB 이하</span>
  </label>
  <ul class="pi-upload__list" aria-live="polite"></ul>
</div>

.pi-upload__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pi-upload__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--upload-pad);
  border: var(--border-medium) dashed var(--upload-border);
  border-radius: var(--upload-radius);
  background: var(--upload-bg);
  color: var(--color-text-secondary);
  text-align: center; cursor: pointer; word-break: keep-all;
  transition: border-color var(--duration-base) var(--easing-out), background var(--duration-base) var(--easing-out);
}
.pi-upload__icon { color: var(--upload-icon-fg); }
.pi-upload__hint { font: var(--text-body); letter-spacing: var(--text-body-letter-spacing); }
.pi-upload__note { font: var(--text-caption); color: var(--color-text-muted); }
.pi-upload__input:focus-visible + .pi-upload__zone { outline: none; box-shadow: var(--focus-ring); }
.pi-upload.is-dragover .pi-upload__zone { border-color: var(--upload-border-active); background: var(--upload-bg-active); }
.pi-upload__input:disabled + .pi-upload__zone { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pi-upload__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pi-upload__file {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
}
.pi-upload__name { flex: 1 1 auto; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-upload__size { color: var(--color-text-muted); }
.pi-upload__remove { min-width: var(--target-min); min-height: var(--target-min); background: none; border: none; cursor: pointer; color: var(--color-text-muted); }
.pi-upload__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) { .pi-upload__zone { transition: none; } }

// 드래그 상태 토글 + 파일 목록 렌더 (의존성 없음)
document.querySelectorAll("[data-upload]").forEach((root) => {
  const input = root.querySelector(".pi-upload__input");
  const zone = root.querySelector(".pi-upload__zone");
  const list = root.querySelector(".pi-upload__list");
  const fmt = (n) => (n > 1e6 ? (n / 1e6).toFixed(1) + "MB" : Math.round(n / 1e3) + "KB");
  const render = (files) => {
    list.replaceChildren();
    [...files].forEach((f) => {
      const li = document.createElement("li");
      li.className = "pi-upload__file";
      li.innerHTML = '<span class="pi-upload__name"></span><span class="pi-upload__size"></span>'
        + '<button class="pi-upload__remove" type="button" aria-label="삭제">&#10005;</button>';
      li.querySelector(".pi-upload__name").textContent = f.name;
      li.querySelector(".pi-upload__size").textContent = fmt(f.size);
      list.appendChild(li);
    });
  };
  input.addEventListener("change", () => render(input.files));
  ["dragenter", "dragover"].forEach((e) => zone.addEventListener(e, (ev) => { ev.preventDefault(); root.classList.add("is-dragover"); }));
  ["dragleave", "drop"].forEach((e) => zone.addEventListener(e, () => root.classList.remove("is-dragover")));
  zone.addEventListener("drop", (ev) => { ev.preventDefault(); render(ev.dataTransfer.files); });
  list.addEventListener("click", (ev) => { const t = ev.target.closest(".pi-upload__remove"); if (t) t.closest(".pi-upload__file").remove(); });
});