:root { --bg:#fff; --fg:#111; --muted:#666; --card:#f6f7f9; --line:#e5e7eb; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; color:var(--fg); background:var(--bg); }
.wrap{ max-width:980px; margin:0 auto; padding:0 14px; }
.site-header{ border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; }
.brand{ font-weight:700; text-decoration:none; color:var(--fg); }
.nav a{ margin-left:12px; text-decoration:none; color:var(--fg); }
.nav a:hover{ text-decoration:underline; }

.main{ padding:18px 14px 28px; }
.h1{ font-size:22px; margin:8px 0 12px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:#fff; border:1px solid var(--line); border-radius:10px; padding:2px 8px; }
.muted{ color:var(--muted); }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
input, select, button, textarea{ font:inherit; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; }
button{ cursor:pointer; }
button.primary{ background:#111; color:#fff; border-color:#111; }

.result{ margin-top:10px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.site-footer{ border-top:1px solid var(--line); padding:18px 0; background:#fff; }
.footer-grid{ display:grid; gap:12px; grid-template-columns: 1fr minmax(240px, 360px); align-items:start; }
.ad-placeholder{ border:1px dashed var(--line); border-radius:12px; padding:18px; text-align:center; color:var(--muted); background:#fff; }
.footnote{ padding-top:10px; color:var(--muted); }