:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --border:#e3e6ee;
  --text:#1c2333;
  --text-muted:#6b7280;
  --accent:#4f6df5;
  --accent-dark:#3c56d6;
  --accent-soft:#eef1ff;
  --success:#16a34a;
  --danger:#e0483f;
  --radius:14px;
  --shadow:0 4px 16px rgba(28,35,51,0.06);
  --shadow-lg:0 12px 32px rgba(28,35,51,0.10);
  font-size:16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- header ---------- */
.site-header{
  background:
    radial-gradient(1100px 520px at 12% -15%, rgba(79,109,245,0.32), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(123,94,240,0.18), transparent 55%),
    linear-gradient(160deg, #0a0f1e 0%, #101a2e 45%, #172443 100%);
  color:#fff;
  padding:56px 20px 46px;
  text-align:center;
}
.header-inner{max-width:720px;margin:0 auto;}
.logo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.92rem;font-weight:600;letter-spacing:0.01em;
  color:rgba(255,255,255,0.68);
  margin-bottom:20px;
}
.logo .logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#8b6ef2);
  font-size:0.95rem;
}
.hero-title{
  font-size:clamp(1.6rem, 4.4vw, 2.5rem);
  margin:0 0 14px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.28;
  color:#ffffff;
  text-shadow:0 2px 24px rgba(79,109,245,0.25);
}
.hero-subtitle{margin:0 auto;max-width:520px;color:rgba(255,255,255,0.68);font-size:1rem;}
.header-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;
}
.header-badges span{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.82);
  padding:6px 14px;border-radius:999px;font-size:0.8rem;font-weight:600;
  backdrop-filter:blur(6px);
}

/* ---------- ad boxes ---------- */
.ads-box{
  max-width:970px;
  margin:22px auto;
  min-height:100px;
  display:flex;align-items:center;justify-content:center;
  border:2px dashed #c7cce0;
  border-radius:12px;
  background:repeating-linear-gradient(45deg,#fbfbfe,#fbfbfe 10px,#f2f3f9 10px,#f2f3f9 20px);
  color:#9aa1b7;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.02em;
  padding:0 16px;
  text-align:center;
}

/* ---------- layout ---------- */
.container{max-width:970px;margin:0 auto;padding:0 20px 40px;}
section{margin-top:22px;}

/* ---------- library warning ---------- */
.lib-warning{
  max-width:970px;margin:16px auto 0;
  background:#fff4e5;border:1px solid #f3c98a;color:#8a5a12;
  border-radius:10px;padding:12px 16px;font-size:0.85rem;font-weight:600;
  text-align:center;
}

/* ---------- dropzone ---------- */
.dropzone{
  background:var(--surface);
  border:2.5px dashed #c7cce0;
  border-radius:var(--radius);
  padding:44px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.dropzone:hover{border-color:var(--accent);background:var(--accent-soft);}
.dropzone.dragover{
  border-color:var(--accent);
  background:var(--accent-soft);
  transform:scale(1.005);
}
.dropzone-icon{font-size:2.6rem;margin-bottom:10px;}
.dropzone p{margin:4px 0;}
.dropzone-main{font-size:1.05rem;font-weight:600;}
.browse-link{color:var(--accent);text-decoration:underline;}
.dropzone-sub{color:var(--text-muted);font-size:0.86rem;margin-top:8px !important;}

/* ---------- options bar ---------- */
.options-bar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px;
  box-shadow:var(--shadow);
}
.option-group{display:flex;flex-direction:column;gap:6px;min-width:130px;}
.option-group label{font-size:0.8rem;font-weight:700;color:var(--text-muted);}
select, input[type="range"]{accent-color:var(--accent);}
select{
  padding:9px 10px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fff;
  font-size:0.95rem;
  font-weight:600;
  color:var(--text);
  min-width:120px;
}
#qualityGroup{min-width:170px;}
.options-bar .spacer{flex:1;}

.btn{
  appearance:none;border:none;cursor:pointer;
  font-weight:700;font-size:0.92rem;
  padding:11px 18px;border-radius:10px;
  transition:transform .08s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-dark);}

/* extra emphasis on the main convert button */
#convertAllBtn{
  transition:transform .18s ease, box-shadow .18s ease, background .15s ease, opacity .15s ease;
  box-shadow:0 2px 6px rgba(79,109,245,0.25);
}
#convertAllBtn:hover:not(:disabled){
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(79,109,245,0.35);
  background:var(--accent-dark);
}
#convertAllBtn:active:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(79,109,245,0.3);
}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){background:#f1f2f7;}
.btn-accent{background:var(--success);color:#fff;}
.btn-accent:hover:not(:disabled){background:#128038;}
.btn-lg{padding:14px 26px;font-size:1rem;border-radius:12px;}
.btn-sm{padding:7px 12px;font-size:0.82rem;border-radius:8px;}

/* ---------- file list ---------- */
.file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.file-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.file-thumb{
  width:100%;aspect-ratio:4/3;
  background:#eef0f6;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.file-thumb img{width:100%;height:100%;object-fit:cover;}
.file-thumb .thumb-placeholder{font-size:2rem;}
.status-chip{
  position:absolute;top:8px;right:8px;
  font-size:0.68rem;font-weight:800;letter-spacing:.02em;
  padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,0.55);color:#fff;
}
.status-chip.done{background:var(--success);}
.status-chip.error{background:var(--danger);}
.status-chip.converting{background:var(--accent);}

.file-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.file-name{font-size:0.86rem;font-weight:700;word-break:break-all;}
.file-meta{font-size:0.78rem;color:var(--text-muted);}
.file-meta .arrow{color:var(--accent);font-weight:700;}
.file-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px;}
.file-actions .btn{flex:1;}
.remove-btn{
  background:transparent;border:none;color:var(--text-muted);
  cursor:pointer;font-size:0.78rem;text-decoration:underline;
  padding:0;
}
.remove-btn:hover{color:var(--danger);}
.error-msg{color:var(--danger);font-size:0.76rem;}

/* ---------- download all ---------- */
.download-all{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  text-align:center;
  box-shadow:var(--shadow);
}
.download-hint{margin:10px 0 0;color:var(--text-muted);font-size:0.85rem;}

/* ---------- footer ---------- */
.site-footer{
  background:#12172b;
  color:#c6cbe0;
  margin-top:56px;
  padding:40px 20px 30px;
}
.footer-inner{max-width:760px;margin:0 auto;}
.footer-inner h2{color:#fff;font-size:1.15rem;margin:0 0 10px;}
.footer-inner p{font-size:0.88rem;margin:0 0 12px;}
.footer-inner .small{font-size:0.8rem;color:#9aa1c2;}
.faq{margin-top:26px;border-top:1px solid #262c47;padding-top:20px;}
.faq h3{color:#fff;font-size:0.95rem;margin:16px 0 6px;}
.faq p{font-size:0.84rem;color:#a8adca;margin:0;}
.copyright{margin-top:22px;font-size:0.76rem;color:#6b7196;}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:#1c2333;color:#fff;padding:12px 20px;border-radius:10px;
  font-size:0.86rem;font-weight:600;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  z-index:50;max-width:90vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0);}

@media (max-width:640px){
  .site-header{padding:36px 16px 30px;}
  .header-inner h1{font-size:1.5rem;}
  .dropzone{padding:32px 14px;}

  .options-bar{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:16px;
  }
  .option-group{width:100%;min-width:0;}
  .options-bar .spacer{display:none;}
  .options-bar .btn{width:100%;}

  .ads-box{margin:16px auto;min-height:100px;}
  .file-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

@media (max-width:360px){
  .file-list{grid-template-columns:1fr 1fr;}
}