* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
body { margin: 0; background: #f6f7f9; color: #222; }
.site-header, .site-footer { background:#fff; border-bottom:1px solid #e5e7eb; padding: 0.75rem 1rem; }
.site-footer { border-top:1px solid #e5e7eb; border-bottom:none; text-align:center; }
.container { max-width: 860px; margin: 1rem auto; padding: 0 1rem; }
h1,h2 { margin: 0.5rem 0 0.75rem; }

.post-form, .post-list { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; margin-bottom:1rem; }
.field { margin-bottom: 0.75rem; }
.field input[type="text"], .field textarea, .admin-login input[type="text"], .admin-login input[type="password"] {
  width: 100%; padding: 0.5rem; border:1px solid #cbd5e1; border-radius:8px; background:#fff;
}
.req { color:#d00; font-size: 0.85em; }
.note { color:#6b7280; font-size: 0.9em; margin-top:0.25rem; }
.errors { background:#fff3f3; border:1px solid #fca5a5; color:#7f1d1d; padding:0.5rem 0.75rem; border-radius:8px; }
.actions button, .admin-logout button, .admin-table button { padding:0.5rem 0.9rem; border:0; border-radius:8px; background:#2563eb; color:#fff; cursor:pointer; }
.actions button:hover { filter:brightness(1.05); }

.posts { list-style:none; margin:0; padding:0; }
.post { padding:0.75rem 0; border-bottom:1px solid #f0f2f5; }
.post:last-child { border-bottom:0; }
.post-meta { display:flex; gap:0.5rem; align-items:baseline; color:#6b7280; font-size:0.9em; }
.post-id { font-weight:bold; color:#334155; }
.post-name { color:#111827; font-weight:600; }
.post-body { margin-top:0.35rem; line-height:1.6; white-space:normal; word-wrap:break-word; }

.pager { display:flex; gap:0.5rem; align-items:center; justify-content:center; padding-top:0.75rem; }
.pager a { padding:0.3rem 0.6rem; border:1px solid #cbd5e1; border-radius:6px; text-decoration:none; color:#1f2937; background:#fff; }
.pager span { color:#6b7280; }

.admin-login, .admin-logout { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; margin:0 0 1rem; display:grid; gap:0.75rem; max-width:420px; }
.admin-table { width:100%; border-collapse: collapse; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.admin-table th, .admin-table td { border-bottom:1px solid #f1f5f9; padding:0.5rem; text-align:left; }
.admin-table th { background:#f8fafc; color:#334155; }

@media (max-width: 640px) {
  .post-meta { flex-wrap:wrap; gap:0.25rem; }
}