/* ============================================================
   업로드 페이지
   ============================================================ */
.is-hidden { display: none !important; }

.upload-card { padding: 20px; }

/* 드롭존 */
.dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 180px; padding: 28px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
    background: var(--color-surface-2); color: var(--color-text-soft);
    transition: border-color .15s, background .15s, color .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--color-primary); color: var(--color-text); outline: none; }
.dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.dropzone__ic { display: grid; place-items: center; }
.dropzone__ic svg { width: 42px; height: 42px; color: var(--color-primary); }
.dropzone__title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.dropzone__title--mobile { display: none; }
.dropzone__hint { font-size: 12.5px; color: var(--color-muted); }

/* 업로드 한도 안내 */
.upload-limit-msg {
    margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-md);
    background: var(--color-danger-soft, #fee2e2); color: var(--color-danger, #dc2626);
    font-size: 13px; font-weight: 600; text-align: center;
}
.upload-limit-msg[hidden] { display: none; }

/* 선택된 파일 스테이지 */
.upload-stage { margin-top: 18px; display: grid; gap: 16px; }

/* 선택 파일 대기열 */
.upload-queue { display: grid; gap: 8px; }
.upload-queue__item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color .15s, opacity .2s;
}
.upload-queue__item.is-invalid { border-color: var(--color-danger, #dc2626); }
.upload-queue__item.is-uploading { opacity: .75; }
.upload-queue__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.upload-queue__name { width: 100%; }
.upload-queue__info { font-size: 12.5px; color: var(--color-muted); }
.upload-queue__info.is-error { color: var(--color-danger, #dc2626); font-weight: 600; }
.upload-queue__progress { height: 6px; border-radius: var(--radius-full); background: var(--color-surface); overflow: hidden; }
.upload-queue__progress span { display: block; height: 100%; width: 0; border-radius: inherit;
    background: var(--color-primary); transition: width .2s ease; }

.upload-file__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--color-primary-soft); color: var(--color-primary); align-self: flex-start; }
.upload-file__ic svg { width: 22px; height: 22px; }
.upload-file__remove { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0;
    border-radius: 8px; background: transparent; color: var(--color-muted); cursor: pointer; align-self: flex-start; }
.upload-file__remove:hover { background: var(--color-surface); color: var(--color-text); }
.upload-file__remove svg { width: 18px; height: 18px; }

/* 스테이지 액션 */
.upload-stage__actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.upload-stage__actions .btn { white-space: nowrap; }

.upload-name { display: flex; flex-direction: column; gap: 6px; }
.upload-name .input { width: 100%; }
.setup-label { font-size: 13px; font-weight: 600; color: var(--color-text-soft); }

/* 목록 */
.upload-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.upload-list-head h2 { font-size: 16px; font-weight: 700; }
.upload-list-count { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--color-muted); }
.upload-list-count b { color: var(--color-primary); }

.track-list { display: grid; gap: 8px; }
.track-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color .15s, opacity .2s;
}
.track-item.is-removing { opacity: .4; }
.track-item.is-saving-volume { border-color: var(--color-primary-soft); }
.track-item__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    background: var(--color-surface-2); color: var(--color-text-soft); }
.track-item__ic svg { width: 20px; height: 20px; }
.track-item__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track-item__name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-item__info { font-size: 12.5px; color: var(--color-muted); }
.track-item__volume {
    flex: 0 0 210px; display: grid; grid-template-columns: 18px minmax(96px, 1fr) 48px;
    align-items: center; gap: 8px; min-width: 0;
}
.track-item__volume-ic { display: grid; place-items: center; color: var(--color-muted); }
.track-item__volume-ic svg { width: 17px; height: 17px; }
.track-item__volume-range { width: 100%; accent-color: var(--color-primary); }
.track-item__volume-val {
    font-size: 12.5px; font-weight: 700; color: var(--color-text-soft); text-align: right;
    font-variant-numeric: tabular-nums;
}
.track-item__actions { flex: none; display: flex; align-items: center; gap: 2px; }
.track-item__edit, .track-item__del { display: grid; place-items: center; width: 34px; height: 34px; border: 0;
    border-radius: 8px; background: transparent; color: var(--color-muted); cursor: pointer; transition: background .15s, color .15s; }
.track-item__edit:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.track-item__del:hover { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger, #dc2626); }
.track-item__edit svg, .track-item__del svg { width: 18px; height: 18px; }

.track-empty { margin-top: 8px; }

/* ── 확인/수정 다이얼로그 ── */
.confirm-dialog .settings-dialog__card {
    width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box;
    justify-items: center; text-align: center;
}
.confirm-dialog__icon {
    display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 4px;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft); color: var(--color-primary);
}
.confirm-dialog__icon svg { width: 30px; height: 30px; }
.confirm-dialog--danger .confirm-dialog__icon { background: var(--color-danger-soft, #fee2e2); color: var(--color-danger, #dc2626); }
.confirm-dialog__content { width: 100%; }
.confirm-dialog__content h2 { font-size: 20px; }
.confirm-dialog__content p { margin-top: 8px; color: var(--color-text-soft); line-height: 1.6; }
.confirm-dialog .upload-name { width: 100%; text-align: left; }
.confirm-dialog .settings-dialog__actions { width: 100%; margin-top: 8px; justify-content: center; }

@media (max-width: 560px) {
    .upload-stage__actions { flex-direction: column-reverse; align-items: stretch; }
    .upload-stage__actions .btn { width: 100%; justify-content: center; }
    .dropzone__title--desktop { display: none; }
    .dropzone__title--mobile { display: block; }
    .track-item { flex-wrap: wrap; align-items: flex-start; }
    .track-item__meta { flex-basis: calc(100% - 94px); }
    .track-item__actions { margin-left: auto; }
    .track-item__volume {
        order: 4; flex: 1 0 100%; grid-template-columns: 18px minmax(0, 1fr) 48px;
        padding-left: 50px;
    }
}