:root{
  color-scheme:light;
  --bg:#f3f6fb;
  --surface:#fff;
  --text:#142033;
  --muted:#6d788b;
  --line:#dfe5ee;
  --green:#16845b;
  --green2:#0eaa70;
  --green-soft:#e9f8f1;
  --navy:#111827;
  --blue:#3157d5;
  --danger:#c94b52;
  --shadow:0 18px 45px rgba(29,43,70,.09);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Inter,Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 0,rgba(22,132,91,.10),transparent 28rem),
    radial-gradient(circle at 90% 0,rgba(49,87,213,.08),transparent 30rem),
    var(--bg);
  color:var(--text)
}
button,input{font:inherit}.hidden{display:none!important}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:64px;display:flex;align-items:center;gap:12px;padding:0 clamp(16px,3vw,34px);
  background:rgba(15,23,42,.96);color:#fff;border-bottom:1px solid #273247
}
.back{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid #39445a;
  border-radius:10px;color:#d9deea;text-decoration:none
}
.brand{display:flex;align-items:center;gap:10px}.mark{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(135deg,#16845b,#25b77c);font-weight:900
}
.brand strong{display:block;font-size:14px}.brand span{display:block;margin-top:2px;color:#8c98ae;font-size:8px;letter-spacing:.12em}
.privacy{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:9px;color:#aeb7c8}
.privacy span{width:7px;height:7px;border-radius:50%;background:#31ce8e;box-shadow:0 0 0 4px rgba(49,206,142,.12)}
.shell{width:min(1080px,calc(100% - 28px));margin:0 auto;padding:clamp(34px,5vw,62px) 0 30px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;margin-bottom:34px}
.eyebrow{color:var(--green);font-size:10px;font-weight:900;letter-spacing:.18em}
.hero h1{margin:9px 0 14px;font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.055em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.format-flow{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.file-card{
  width:132px;height:158px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden
}
.file-card:before{content:"";position:absolute;left:0;right:0;top:0;height:7px}
.file-card.old:before{background:#9ca6b6}.file-card.new:before{background:linear-gradient(90deg,var(--green),#35c88c)}
.file-card span{font-size:24px;font-weight:900;letter-spacing:-.04em}.file-card small{margin-top:4px;color:var(--muted);font-size:9px}
.file-card.new{border-color:#bfe6d5;background:linear-gradient(145deg,#fff,#f1fbf6)}
.file-card.new span{color:var(--green)}
.arrow{display:flex;align-items:center;gap:5px;color:var(--green)}.arrow i{width:15px;height:1px;background:#a8d4c2}.arrow b{font-size:22px}

.workspace{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.drop-zone{
  min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;
  background:linear-gradient(180deg,#fff,#fbfcfe);outline:2px dashed #cbd4e1;outline-offset:-18px;transition:.16s
}
.drop-zone.dragover{background:#f1fbf6;outline-color:#54b98e}
.upload-icon{
  width:62px;height:62px;display:grid;place-items:center;border-radius:18px;background:var(--green-soft);
  color:var(--green);font-size:30px;font-weight:700;margin-bottom:14px
}
.drop-zone h2{margin:0 0 6px;font-size:20px}.drop-zone p{margin:0 0 18px;color:var(--muted);font-size:12px}
.drop-zone small{margin-top:12px;color:#9aa4b3;font-size:9px}
.primary-btn,.sub-btn,.download-btn,.file-action{
  border:0;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:800;font-size:10px
}
.primary-btn{background:var(--green);color:white;box-shadow:0 8px 20px rgba(22,132,91,.18)}
.primary-btn:hover{background:#126f4d}.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.sub-btn{background:#f2f4f7;color:#5f6b7c;border:1px solid var(--line)}
.queue-section{padding:20px}
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.queue-head h2{margin:0 0 3px;font-size:17px}.queue-head p{margin:0;color:var(--muted);font-size:9px}
.queue-actions{display:flex;gap:7px}
.file-list{display:grid;gap:8px}
.file-row{
  display:grid;grid-template-columns:44px minmax(180px,1fr) 1.3fr auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:11px;background:#fff
}
.file-icon{
  width:42px;height:42px;border-radius:10px;background:#eef8f3;color:var(--green);display:grid;place-items:center;
  font-size:10px;font-weight:900
}
.file-main{min-width:0}.file-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.file-main small{display:block;color:var(--muted);font-size:8px;margin-top:3px}
.audit{display:flex;gap:5px;flex-wrap:wrap}
.audit span{padding:4px 6px;border-radius:5px;background:#f3f5f8;color:#657083;font-size:7px;white-space:nowrap}
.file-state{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.badge{padding:5px 7px;border-radius:999px;font-size:7px;font-weight:900;background:#f1f3f6;color:#6b7482}
.badge.reading,.badge.converting{background:#fff6df;color:#98701e}.badge.done{background:var(--green-soft);color:var(--green)}
.badge.error{background:#fdecee;color:#b53e46}.file-action{padding:7px 9px;background:#eef2ff;color:#3157d5}
.remove-btn{border:0;background:transparent;color:#9da6b3;font-size:17px;padding:3px;cursor:pointer}
.progress{height:3px;border-radius:999px;background:#edf0f4;overflow:hidden;margin-top:7px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#42c993);transition:width .25s}
.file-row.done .progress i{width:100%}
.file-row.error .progress i{width:100%;background:var(--danger)}
.download-bar{
  margin-top:14px;border-radius:12px;background:linear-gradient(135deg,#133526,#176443);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px
}
.download-bar strong{display:block;font-size:12px}.download-bar span{display:block;color:#bad7ca;font-size:8px;margin-top:3px}
.download-btn{background:#fff;color:#176443;padding:9px 13px}
.preserve-panel{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(29,43,70,.05)}
.preserve-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}.preserve-title>span{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-weight:900
}
.preserve-title h2{margin:0 0 3px;font-size:14px}.preserve-title p{margin:0;color:var(--muted);font-size:9px}
.preserve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.preserve-grid>div{border:1px solid var(--line);border-radius:10px;padding:11px;background:#fbfcfd}
.preserve-grid b{display:block;color:var(--green);font-size:13px;margin-bottom:6px}.preserve-grid span{display:block;font-size:9px;font-weight:800}
.preserve-grid small{display:block;margin-top:2px;color:var(--muted);font-size:7px}
.limit-note{margin-top:12px;border-radius:10px;background:#fff9e9;border:1px solid #f1dfab;padding:11px 13px}
.limit-note strong{font-size:9px;color:#80642d}.limit-note p{margin:4px 0 0;color:#8b774d;font-size:8px;line-height:1.55}
footer{margin-top:auto;display:flex;justify-content:center;gap:18px;padding:18px;color:#8a94a4;font-size:8px}
.toast-root{position:fixed;right:14px;bottom:14px;display:grid;gap:7px;z-index:100}
.toast{min-width:250px;max-width:380px;padding:10px 12px;border-radius:9px;background:#1d2736;color:#fff;font-size:9px;box-shadow:var(--shadow)}
.toast.ok{background:#176443}.toast.error{background:#743239}
@media(max-width:820px){
  .hero{grid-template-columns:1fr}.format-flow{justify-content:center}.preserve-grid{grid-template-columns:repeat(2,1fr)}
  .file-row{grid-template-columns:42px 1fr auto}.audit{grid-column:2/-1}.file-state{grid-column:3;grid-row:1}
}
@media(max-width:560px){
  .privacy{display:none}.shell{width:min(100% - 18px,1080px);padding-top:26px}.hero h1{font-size:39px}
  .file-card{width:105px;height:128px}.drop-zone{min-height:290px;padding:24px}.queue-head{align-items:flex-start;flex-direction:column}
  .file-row{grid-template-columns:38px minmax(0,1fr)}.file-state{grid-column:1/-1;justify-content:flex-start}.audit{grid-column:1/-1}
  .preserve-grid{grid-template-columns:1fr 1fr}
}