/* Blog 共通（common.css のトークンに追記） */
.blog-main { max-width: 760px; margin: 0 auto; padding: 130px 24px 90px; }
.crumb { font-size: 0.75rem; color: var(--ink-faint); margin-bottom: 18px; }
.crumb a { color: var(--accent); }
.post-title { font-size: clamp(1.5rem, 4.6vw, 2.1rem); font-weight: 800; line-height: 1.6; letter-spacing: 0.03em; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 34px; font-size: 0.75rem; color: var(--ink-soft); }
.post-tag { color: var(--accent); font-weight: 700; padding: 4px 14px; border-radius: 999px; box-shadow: var(--neu-in-sm); }
.post-body { font-size: 0.95rem; }
.post-body h2 {
  font-size: 1.15rem; font-weight: 800; margin: 44px 0 16px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--bg); box-shadow: var(--neu-out-sm);
}
.post-body p { margin-bottom: 1.2em; color: var(--ink); }
.post-body p.sub { color: var(--ink-soft); font-size: 0.88rem; }
.post-body ul { margin: 0 0 1.4em 1.4em; }
.post-body li { margin-bottom: 6px; }
.post-body strong { color: var(--accent); }
.post-body pre {
  background: #2A3240; color: #D8E0EC;
  border-radius: 14px; padding: 18px 20px;
  font-size: 0.78rem; line-height: 1.7;
  overflow-x: auto; margin: 0 0 1.6em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.post-body pre .c { color: #7B8794; }
.demo-box {
  border-radius: 18px; box-shadow: var(--neu-in-sm);
  padding: 20px 24px; margin: 0 0 1.6em;
  font-size: 0.85rem; color: var(--ink-soft);
}
.demo-box a { color: var(--accent); font-weight: 700; }
.cta-box {
  margin-top: 50px; text-align: center;
  background: var(--bg); border-radius: 24px; box-shadow: var(--neu-out);
  padding: 36px 28px;
}
.cta-box h3 { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.cta-box p { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 22px; }
.cta-box .cta-button { text-decoration: none; }
/* 一覧ページ */
.post-list { display: grid; gap: 22px; }
.post-card {
  display: block; background: var(--bg); border-radius: 22px;
  box-shadow: var(--neu-out); padding: 28px 28px;
  transition: transform 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); }
.post-card .pc-tags { font-size: 0.7rem; color: var(--accent); font-weight: 700; }
.post-card h2 { font-size: 1.05rem; font-weight: 800; margin: 6px 0 8px; line-height: 1.6; }
.post-card p { font-size: 0.82rem; color: var(--ink-soft); }
.post-card .pc-date { font-size: 0.72rem; color: var(--ink-faint); margin-top: 10px; display: block; }