:root{
  --bg:#f5f5f3;
  --paper:#ffffff;
  --text:#202420;
  --muted:#666b66;
  --border:#d7d9d5;
  --border-dark:#b7bbb6;
  --accent:#245b46;
  --accent-hover:#1a4635;
  --soft:#edf3ef;
  --max:820px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI","Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit}
a{color:inherit}
.wrap{
  width:min(calc(100% - 32px),1080px);
  margin:0 auto;
}
.content{max-width:var(--max)}

.main-section{
  padding:42px 0 44px;
}
h1{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.35;
  letter-spacing:-.03em;
}
.intro{
  margin:0 0 26px;
  color:#4f554f;
  font-size:14px;
}

.tool-box{
  border:1px solid var(--border);
  background:var(--paper);
  padding:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.drop-zone{
  width:100%;
  min-height:290px;
  padding:28px;
  border:2px dashed var(--border-dark);
  background:#fafafa;
  color:var(--text);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:border-color .12s ease, background-color .12s ease;
}
.drop-zone:hover,
.drop-zone.dragover{
  border-color:var(--accent);
  background:#f6faf7;
}
.drop-zone.dragover{
  outline:3px solid rgba(36,91,70,.10);
  outline-offset:-3px;
}
.drop-title{
  font-size:18px;
  font-weight:700;
}
.drop-link{
  margin-top:5px;
  color:var(--accent);
  font-size:13px;
}
.drop-format{
  margin-top:18px;
  color:#808580;
  font-size:11px;
}

.queue{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:350px;
  overflow:auto;
}
.queue-item{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:11px;
  align-items:center;
  padding:9px;
  border:1px solid var(--border);
  background:#fff;
}
.thumb{
  width:48px;
  height:48px;
  object-fit:cover;
  background:#eee;
}
.file-meta{min-width:0}
.file-name{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:700;
}
.file-sub{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}
.file-status{
  color:var(--accent);
  font-weight:700;
}
.remove-btn,.download-btn{
  border:0;
  cursor:pointer;
}
.remove-btn{
  padding:7px 9px;
  background:transparent;
  color:#777;
}
.remove-btn:hover{color:#a63f3f}
.download-btn{
  padding:8px 10px;
  background:var(--soft);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.action-bar,.result-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  margin-top:12px;
  border-top:1px solid var(--border);
}
.action-bar>div,
.result-bar>div:first-child{
  display:flex;
  flex-direction:column;
}
.action-bar strong,.result-bar strong{font-size:13px}
.action-bar span,.result-bar span{
  color:var(--muted);
  font-size:11px;
}
.primary-btn,.secondary-btn{
  border:0;
  padding:10px 15px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.primary-btn{
  color:#fff;
  background:var(--accent);
}
.primary-btn:hover{background:var(--accent-hover)}
.primary-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.secondary-btn{
  color:var(--text);
  background:#eceeeb;
}
.result-actions{
  display:flex;
  gap:8px;
}
.notice{
  margin:10px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}

.text-section,
.faq-section{
  padding:46px 0;
  border-top:1px solid var(--border);
  background:#fff;
}
.faq-section{background:var(--bg)}
.text-content h2,
.faq-section h2{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.5;
}
.text-content h2:not(:first-child){
  margin-top:34px;
}
.text-content p{
  margin:0 0 8px;
  color:#4f554f;
  font-size:13px;
}

.faq{
  border-top:1px solid var(--border);
}
details{
  border-bottom:1px solid var(--border);
}
summary{
  position:relative;
  padding:15px 30px 15px 0;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";
  position:absolute;
  right:3px;
  top:12px;
  color:var(--accent);
  font-size:18px;
  font-weight:400;
}
details[open] summary::after{content:"−"}
details p{
  margin:-2px 0 15px;
  color:var(--muted);
  font-size:12px;
}

footer{
  border-top:1px solid var(--border);
  background:#eceeeb;
  padding:20px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#707570;
  font-size:10px;
}
.footer-inner a{
  color:#626862;
  text-decoration:none;
}
.footer-inner a:hover{
  text-decoration:underline;
}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,10px);
  padding:9px 13px;
  background:#202420;
  color:#fff;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:.15s;
  z-index:20;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

button:focus-visible,
a:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(36,91,70,.25);
  outline-offset:3px;
}

@media(max-width:600px){
  .wrap{width:min(calc(100% - 20px),1080px)}
  .main-section{padding:30px 0 36px}
  h1{font-size:28px}
  .intro{font-size:13px}
  .tool-box{padding:10px}
  .drop-zone{
    min-height:225px;
    padding:20px;
  }
  .drop-title{font-size:16px}
  .queue-item{
    grid-template-columns:44px 1fr auto;
  }
  .thumb{
    width:44px;
    height:44px;
  }
  .action-bar,.result-bar{
    align-items:stretch;
    flex-direction:column;
  }
  .result-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .footer-inner{
    flex-direction:column;
    gap:4px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}