/* Playback18 ブログ専用スタイル(dark.css のトークンを前提に上乗せ) */

.blog-main { max-width: 760px; margin: 0 auto; padding: 120px 24px 88px; }
@media (max-width: 760px) { .blog-main { padding: 104px 20px 64px; } }

/* パンくず */
.breadcrumbs { font-size: 12.5px; color: var(--weak); margin-bottom: 28px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs a { color: var(--weak); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs .sep { color: var(--line); }
.breadcrumbs [aria-current] { color: var(--body-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24em; }

/* 一覧 */
.blog-index-title { font-family: var(--heading); font-weight: 900; font-size: 34px;
  line-height: 1.45; margin-bottom: 14px; }
@media (max-width: 760px) { .blog-index-title { font-size: 26px; } }
.blog-empty { color: var(--body-soft); }
.post-list { display: flex; flex-direction: column; gap: 16px; }
.post-card { display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease; }
.post-card:hover { border-color: var(--accent-border); }
.post-card .post-title { font-family: var(--heading); font-weight: 700; font-size: 18px;
  line-height: 1.6; color: var(--text); }
.post-card .post-desc { font-size: 13.5px; line-height: 1.9; color: var(--body-soft); }

/* 記事 */
.post-date { font: 600 12px var(--kicker); letter-spacing: .12em; color: var(--accent); }
.post-header { margin-bottom: 36px; }
.post-header h1 { font-family: var(--heading); font-weight: 900; font-size: 30px;
  line-height: 1.55; margin-top: 10px; }
@media (max-width: 760px) { .post-header h1 { font-size: 24px; } }

.post-body { font-size: 15px; line-height: 2.1; color: var(--body); }
.post-body h2 { font-size: 22px; margin: 48px 0 14px; }
.post-body h3 { font-family: var(--heading); font-weight: 700; font-size: 17px;
  color: var(--text); margin: 36px 0 10px; }
.post-body p { margin-bottom: 1.4em; }
.post-body ul, .post-body ol { margin: 0 0 1.4em 1.4em; }
.post-body li { margin-bottom: .4em; }
.post-body strong { color: var(--text); }
.post-body blockquote { border-left: 3px solid var(--accent-border);
  padding-left: 16px; margin: 0 0 1.4em; color: var(--body-soft); }
.post-body img { border-radius: var(--radius); margin-bottom: 1.4em; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; }

/* 記事末尾CTA */
.cta-box { margin-top: 56px; background: var(--card-grad);
  border: 1px solid var(--accent-border-soft); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-kicker { font: 600 11px var(--kicker); letter-spacing: .25em; color: var(--accent); }
.cta-head { font-family: var(--heading); font-weight: 900; font-size: 20px;
  line-height: 1.6; color: var(--text); }
.cta-body { font-size: 13.5px; line-height: 2; color: var(--body-soft); }
.cta-box .btn { margin-top: 8px; }