드롭존

<div class="dz" id="dz">
  <div class="dzicon" id="dzi">⬆</div>
  <div class="dztext" id="dzt">파일을 끌어다 놓으세요</div>
  <div class="dzfile" id="dzf"><span>📄 report.pdf</span><i>✓</i></div>
</div>

.dz{width:min(230px,90%);height:78%;max-height:150px;border:2px dashed var(--line);border-radius:14px;
  display:grid;place-items:center;gap:6px;transition:border-color .2s,background .2s,transform .2s;position:relative}
.dz[data-over]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);transform:scale(1.02)}
.dzicon{font-size:20px;color:var(--muted);transition:color .2s}
.dz[data-over] .dzicon{color:var(--accent)}
.dztext{font-size:12px;color:var(--muted)}
.dzfile{position:absolute;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:7px 12px;font-size:12px;color:var(--fg);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .25s,transform .25s}
.dzfile[data-show]{opacity:1;transform:translateY(0) scale(1)}
.dzfile i{color:#18c29c;font-weight:700}

const dz = document.getElementById('dz'), dzf = document.getElementById('dzf'), dzt = document.getElementById('dzt'), dzi = document.getElementById('dzi');
function loop() {
  dz.setAttribute('data-over', '');
  setTimeout(() => {
    dz.removeAttribute('data-over');
    dzt.style.opacity = '0'; dzi.style.opacity = '0';
    dzf.setAttribute('data-show', '');
    setTimeout(() => {
      dzf.removeAttribute('data-show');
      dzt.style.opacity = ''; dzi.style.opacity = '';
      setTimeout(loop, 900);
    }, 1400);
  }, 900);
}
loop();