:root{
  --fg:#15161a; --muted:#666a73; --line:#e3e4e8; --bg:#fff; --soft:#f6f7f8;
  --accent:#2f6f4e; --accent-ink:#245740; --accent-soft:#eef5f1;
  --radius:14px; --maxw:920px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); line-height:1.85;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;
}
a{color:var(--accent-ink); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
header.site{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px}
.brand{font-weight:700; letter-spacing:.02em; font-size:15px; color:var(--fg)}
.brand span{color:var(--accent)}
nav.site{display:flex; gap:18px; font-size:14px; color:var(--muted)}
nav.site a{color:var(--muted)}
nav.site a[aria-current="page"]{color:var(--accent-ink); font-weight:700}
@media (max-width:640px){ nav.site{gap:12px; font-size:13px} .brand{font-size:14px} }

main{padding:44px 0 72px}
h1{font-size:clamp(24px,4.4vw,32px); line-height:1.4; margin:0 0 12px; letter-spacing:.01em}
h2{font-size:19px; margin:44px 0 14px; letter-spacing:.01em}
h3{font-size:16px; margin:26px 0 8px}
.lead{color:var(--muted); margin:0 0 28px; font-size:15.5px}
.crumb{font-size:13px; color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--muted)}
.crumb span{margin:0 6px; opacity:.6}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card + .card{margin-top:14px}
@media (max-width:640px){ .card{padding:16px} main{padding:28px 0 56px} }

/* tool */
.tool{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:26px 0}
@media (max-width:640px){ .tool{padding:14px} }
.drop{
  border:2px dashed #cfd3da; border-radius:12px; background:#fff; padding:34px 18px;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover,.drop.is-over{border-color:var(--accent); background:var(--accent-soft)}
.drop.is-over{background:#e6f0eb}
.drop p{margin:0 0 12px; color:var(--muted); font-size:14.5px}
.drop .big{display:block; font-size:15.5px; color:var(--fg); font-weight:700; margin-bottom:6px}
.btn{
  display:inline-block; padding:11px 20px; border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  font-family:inherit; line-height:1.4;
}
.btn:hover{background:var(--accent-ink); text-decoration:none}
.btn.ghost{background:#fff; color:var(--accent-ink)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{padding:7px 14px; font-size:13.5px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.hint{font-size:13px; color:var(--muted); margin-top:10px}

.settings{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; margin:0 0 18px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; color:var(--muted); font-weight:700}
.field input[type=number]{width:120px}
input[type=number],select{
  padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:15px;
  font-family:inherit; background:#fff; color:var(--fg);
}
input[type=range]{width:190px; accent-color:var(--accent)}
.value{font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted)}
.check{display:flex; align-items:center; gap:8px; font-size:14px}
.check input{width:16px; height:16px; accent-color:var(--accent)}

.results{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.row{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:11px; padding:12px 14px;
}
.row .thumb{width:44px; height:44px; border-radius:8px; background:var(--soft); object-fit:cover; flex:none}
.row .meta{min-width:0; flex:1}
.row .name{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .sizes{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.row .sizes b{color:var(--fg)}
.tag{display:inline-block; font-size:12px; padding:1px 7px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); margin-left:6px}
.tag.warn{background:#fdf3e7; color:#8a5a12}
.tag.err{background:#fdecec; color:#9b2c2c}
@media (max-width:640px){ .row{gap:10px} .row .thumb{display:none} }

.notice{background:#fdf8ef; border:1px solid #f0e3c8; border-radius:12px; padding:14px 16px; font-size:14px; color:#6b5426}
.notice code{background:#fff; padding:1px 5px; border-radius:4px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:22px 0 0}
.tile{display:block; border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:#fff; color:var(--fg)}
.tile:hover{border-color:var(--accent); text-decoration:none; background:var(--accent-soft)}
.tile h3{margin:0 0 6px; font-size:16px}
.tile p{margin:0; font-size:14px; color:var(--muted)}

table.spec{width:100%; border-collapse:collapse; font-size:14.5px; margin:14px 0 0}
table.spec th,table.spec td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.spec th{width:38%; color:var(--muted); font-weight:400}
@media (max-width:640px){ table.spec th{width:42%} }

ol.steps{padding-left:1.3em; margin:10px 0 0}
ol.steps li{margin:8px 0}
dl.faq{margin:14px 0 0}
dl.faq dt{font-weight:700; margin-top:18px}
dl.faq dd{margin:4px 0 0; color:#33363d}

footer.site{border-top:1px solid var(--line); padding:28px 0 40px; font-size:13px; color:var(--muted)}
footer.site .links{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:12px}
footer.site a{color:var(--muted)}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* セグメントボタン（回転など） */
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg button{
  padding:9px 15px; border:1px solid var(--line); background:#fff; border-radius:9px;
  font:inherit; font-size:14px; color:var(--fg); cursor:pointer; line-height:1.3;
}
.seg button:hover{border-color:#b9c2bc}
.seg button.is-on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:700}

/* ドラッグ範囲選択 */
.crop-wrap{background:#0f1113; border-radius:12px; overflow:hidden; display:flex; justify-content:center; padding:0}
.crop-wrap canvas{display:block; max-width:100%; max-height:65vh; touch-action:none; cursor:crosshair}
.selinfo{font-variant-numeric:tabular-nums}