:root { --gap: 12px; }
* { box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
margin: 0; padding: 16px; color:#111; background:#f7f7f8;
height:100vh; display:flex; flex-direction:column; overflow:hidden;
}
h1 { font-size: 18px; margin:0 0 4px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch; flex:1; min-height:0; }
textarea {
width:100%; height:100%; resize:none; overflow:auto;
font-family: Consolas, Menlo, ui-monospace, "Noto Sans JP", monospace;
font-size:15px; line-height:1.5;
padding:12px; border-radius:12px; border:1px solid #ddd; background:#fff;
}
.toolbar { display:flex; gap:8px; align-items:center; margin:12px 0 16px; }
.ml-auto { margin-left: auto; }
button { padding:10px 16px; border-radius:999px; border:1px solid #ccc; background:#fff; cursor:pointer; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.05); }
button:hover { background:#f1f5f9; }
.banner-ad{ height:60px; background:#e5e7eb; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.top-link{ margin:6px 0 12px; }
.top-link a{ text-decoration:none; font-weight:700; color:#2563eb; }
.top-link a:hover{ text-decoration:underline; }
.row > div{ height:100%; display:flex; }
.row textarea{ flex:1; }
.page-footer{ margin-top:12px; padding-top:10px; border-top:1px solid #e5e7eb; color:#475569; font-size:12px; }
.page-footer a{ color:#2563eb; text-decoration:none; }
.page-footer a:hover{ text-decoration:underline; }