:root{
  --bg:#f6f7f9; --card:#fff; --fg:#111827; --muted:#6b7280;
  --line:#e5e7eb; --primary:#2563eb; --primary-weak:#eff4ff;
  --danger:#dc2626; --ok:#16a34a; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.5; padding:28px 16px 60px;
}
.app{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}

/* 상단 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--primary);display:block}
.topbar h1{font-size:17px;margin:0;letter-spacing:-.01em}
.topbar p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}

/* 버튼 · 입력 */
.btn{
  border:1px solid var(--line); background:#fff; color:var(--fg);
  padding:7px 13px; border-radius:7px; font-size:13px; cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s;
}
.btn:hover:not(:disabled){background:#f3f4f6}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover:not(:disabled){background:#1d4ed8}
.btn.danger{color:var(--danger);border-color:#fecaca;background:#fff}
.btn.danger:hover:not(:disabled){background:#fef2f2}
.btn.ghost{background:transparent}
.input{
  border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  font-size:13px; width:170px; background:#fff;
}
.input:focus,.btn:focus-visible,.dropzone:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* 드롭존 */
.dropzone{
  background:var(--card); border:1.5px dashed #cbd5e1; border-radius:var(--radius);
  padding:34px 20px; text-align:center; cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;
}
.dropzone:hover{border-color:var(--primary);background:var(--primary-weak)}
.dropzone.is-drag{border-color:var(--primary);background:var(--primary-weak);transform:scale(1.006)}
.dz-icon{width:34px;height:34px;color:var(--primary);display:block;margin:0 auto 8px}
.dz-title{margin:0;font-size:14.5px;font-weight:600}
.dz-sub{margin:4px 0 0;font-size:12.5px;color:var(--muted)}

/* 패널 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.panel-head h2{margin:0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chip{
  background:#f3f4f6;border-radius:5px;padding:1px 6px;
  font-size:11.5px;color:var(--muted);font-weight:600;
}

/* 업로드 큐 */
.queue-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.queue-item{padding:10px 14px;border-bottom:1px solid var(--line)}
.queue-item:last-child{border-bottom:none}
.qi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qi-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qi-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.qi-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.bar{height:4px;background:#eef0f3;border-radius:3px;margin-top:7px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;background:var(--primary);transition:width .18s}
.queue-item.done .bar > i{background:var(--ok)}
.queue-item.fail .bar > i{background:var(--danger);width:100%}

/* 테이블 */
.table-wrap{position:relative}
.ftable{width:100%;border-collapse:collapse}
.ftable th{
  text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);
  padding:9px 14px;border-bottom:1px solid var(--line);background:#fafafa;
}
.ftable td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.ftable tbody tr:last-child td{border-bottom:none}
.ftable tbody tr:hover{background:#fafbfc}
.col-chk{width:38px}
.col-size,.col-date{width:104px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.ftable td.col-size,.ftable td.col-date{text-align:right}
.fname{color:var(--fg);text-decoration:none;word-break:break-all}
.fname:hover{color:var(--primary);text-decoration:underline}
.state{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px}
.state.hidden{display:none}

/* 토스트 */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{
  background:#111827;color:#fff;font-size:13px;padding:9px 13px;
  border-radius:7px;max-width:320px;
}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}

@media (max-width:560px){
  .col-date{display:none}
  .input{width:120px}
}
/* 배포 진단 배너 */
.banner{
  border:1px solid #fecaca; background:#fef2f2; color:#991b1b;
  border-radius:var(--radius); padding:11px 13px; font-size:13px; line-height:1.6;
}
.banner b{color:#7f1d1d}
.banner code{
  background:#fff; border:1px solid #fecaca; border-radius:4px;
  padding:1px 5px; font-size:12px;
}