:root{
  --bg:#f6f7f9; --card:#ffffff; --fg:#1a1d21; --muted:#5b6572;
  --border:#e3e7ec; --accent:#2f6bff; --accent-fg:#fff;
  --drop:#eef2ff; --ok:#0a8f5b; --radius:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1216;--card:#171b21;--fg:#e8ecf1;--muted:#98a2b0;
  --border:#262c34;--accent:#4d82ff;--drop:#1a2233;--ok:#33c88b;}}
:root[data-theme="dark"]{--bg:#0f1216;--card:#171b21;--fg:#e8ecf1;--muted:#98a2b0;
  --border:#262c34;--accent:#4d82ff;--drop:#1a2233;--ok:#33c88b;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;line-height:1.6}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:16px 16px 64px}
/* site header nav */
.sitehead{display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:22px}
.brand{font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--fg);font-size:1.05rem}
.brand span{color:var(--accent)}
.sitehead .home{font-size:.85rem;text-decoration:none;color:var(--muted)}
/* headings */
h1{font-size:1.45rem;margin:.1em 0 .1em;letter-spacing:-.02em}
p.sub{color:var(--muted);margin:.2em 0 1.3em;font-size:.97rem}
/* tool card */
.tool{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.drop{border:2px dashed var(--border);border-radius:var(--radius);background:var(--drop);
  padding:34px 16px;text-align:center;cursor:pointer;transition:.15s}
.drop.drag{border-color:var(--accent);transform:scale(1.005)}
.drop strong{color:var(--accent)}
.drop small{display:block;color:var(--muted);margin-top:6px}
.controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:flex-end}
.field{flex:1 1 150px;min-width:130px}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--fg);font-size:1rem;font-family:inherit}
textarea{min-height:150px;resize:vertical}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.presets button{border:1px solid var(--border);background:transparent;color:var(--fg);
  padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.88rem}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.presets button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.result{margin-top:20px;display:none}
.result.show{display:block}
.preview{width:100%;max-height:340px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:#0002}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--drop);border-radius:10px;padding:10px 12px;text-align:center}
.stat b{display:block;font-size:1.1rem} .stat span{color:var(--muted);font-size:.76rem}
.stat.win b{color:var(--ok)}
.btn{display:inline-block;width:100%;text-align:center;background:var(--accent);color:var(--accent-fg);
  border:none;padding:13px;border-radius:11px;font-size:1.02rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.92}
.btn.sec{background:transparent;color:var(--accent);border:1px solid var(--border)}
.note{font-size:.85rem;color:var(--muted);margin-top:14px;text-align:center}
.err{color:#d33;font-size:.9rem;margin-top:10px;display:none}
.err.show{display:block}
.busy{color:var(--muted);text-align:center;margin-top:14px;display:none}
.busy.show{display:block}
/* copy / FAQ */
.copy{margin-top:40px}
.copy h2{font-size:1.12rem;margin:1.5em 0 .4em}
details{border-top:1px solid var(--border);padding:12px 0}
details summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin:.6em 0 0}
/* hub */
.hero{padding:8px 0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:8px}
.toolcard{position:relative;display:block;text-decoration:none;color:var(--fg);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:.15s}
.pop{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;
  font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.02em}
.toolcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.toolcard .ic{font-size:1.5rem}
.toolcard b{display:block;margin:8px 0 3px}
.toolcard small{color:var(--muted)}
.cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:26px;margin-bottom:8px;font-weight:600}
/* footer nav */
.sitefoot{margin-top:46px;padding-top:20px;border-top:1px solid var(--border);font-size:.85rem;color:var(--muted)}
.sitefoot .fnav{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:12px}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:var(--accent)}