<div class="dc-drop">
<input class="dc-drop__input" id="dc-drop-a" type="file" multiple />
<label class="dc-drop__area" for="dc-drop-a">
<span class="dc-drop__icon" aria-hidden="true">⬆</span>
<span class="dc-drop__title">파일을 끌어다 놓거나 눌러서 고르세요</span>
<span class="dc-drop__hint">JPG · PNG · PDF / 한 개당 10MB 까지</span>
</label>
</div>
.dc-drop { position:relative; max-width:520px; font-family:var(--dc-font); }
.dc-drop__input { position:absolute; width:1px; height:1px; opacity:0; }
.dc-drop__area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--dc-2); min-height:148px; padding:var(--dc-6) var(--dc-4); border:1px dashed var(--dc-line-field); border-radius:var(--dc-r-md); background:var(--dc-sunken); text-align:center; cursor:pointer; transition:background var(--dc-fast), border-color var(--dc-fast); }
.dc-drop__area:hover { background:var(--dc-brand-soft); border-color:var(--dc-brand); }
.dc-drop__input:focus-visible + .dc-drop__area { outline:2px solid var(--dc-brand); outline-offset:2px; }
.dc-drop__area--sm { min-height:56px; padding:var(--dc-3); }
.dc-drop__area.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); }
.dc-drop__icon { font-size:22px; line-height:1; color:var(--dc-brand); }
.dc-drop__title { font-size:14px; font-weight:600; color:var(--dc-text); }
.dc-drop__hint { font-size:12px; color:var(--dc-text-mute); }
.dc-drop__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-drop__list { list-style:none; margin:var(--dc-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-drop__item { display:flex; align-items:center; flex-wrap:wrap; gap:var(--dc-2); padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-surface); font-size:13px; }
.dc-drop__name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dc-text); }
.dc-drop__size { font-size:12px; color:var(--dc-text-mute); font-family:var(--dc-mono); }
.dc-drop__meta { font-size:12px; color:var(--dc-brand-text); }
.dc-drop__del { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text-sub); font-size:13px; }
.dc-drop__del:hover { background:var(--dc-danger-soft); color:var(--dc-danger); }
.dc-drop__bar { flex:1 1 100%; height:4px; border-radius:var(--dc-r-full); background:var(--dc-sunken); overflow:hidden; }
.dc-drop__fill { display:block; height:100%; background:var(--dc-brand); }