:root {
  --color-bg: #fafaf7;
  --color-fg: #222;
  --color-accent: #2a6e8f;
  --color-border: #e1e1d8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: 1.7;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0;
}
.site-title { margin: 0; font-size: 22px; }
.site-title a { color: var(--color-fg); }
.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.site-nav a { font-weight: 600; }

main.container { padding-top: 24px; padding-bottom: 48px; }
h2 { border-bottom: 2px solid var(--color-accent); padding-bottom: 6px; }

.article-list { list-style: none; padding: 0; }
.article-list-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.article-list-item .thumb {
  flex: 0 0 120px;
  display: block;
}
.article-list-item .thumb img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.article-list-body { flex: 1 1 auto; }
.article-list-title {
  font-size: 17px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.article-list .meta { color: #777; font-size: 13px; }

.article-detail .meta { color: #777; font-size: 13px; }
.article-body { margin-top: 16px; }
.article-body img { max-width: 100%; height: auto; }
.featured-image { margin: 16px 0; }
.featured-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 16px 0;
  color: #777;
  text-align: center;
  background: #fff;
}

/* Admin */
.admin-form label { display: block; margin-top: 12px; font-weight: 600; }
.admin-form input[type="text"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  padding: 8px;
  font: inherit;
  border: 1px solid #bbb;
  border-radius: 4px;
}
.admin-form textarea { min-height: 240px; font-family: ui-monospace, monospace; }
.admin-form button {
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--color-accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.flash { padding: 10px; background: #e7f4ea; border: 1px solid #b6dbc1; margin: 12px 0; }
.flash.error { background: #fde8e8; border-color: #f0b6b6; }