.article-page .article-content.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 280px);
  gap: clamp(32px, 4vw, 64px);
  width: min(calc(100% - 96px), 1104px);
  margin-inline: auto;
  align-items: start;
}
.article-page .blog-layout .article-entry { width: 100%; min-width: 0; margin: 0; }
.blog-sidebar { min-width: 0; color: var(--subpage-ink, #333); }
.blog-sidebar__section { padding-block: 24px 32px; border-top: 1px solid #ccc; }
.blog-sidebar__eyebrow { margin: 0 0 8px; color: #a88b5d; font-size: 11px; letter-spacing: .14em; }
.blog-sidebar h2 { margin: 0 0 24px; font-size: 20px; line-height: 1.6; font-weight: 500; }
.blog-sidebar__note { font-size: 12px; line-height: 1.9; color: #777; margin: 0 0 20px; }
.blog-popular { list-style: none; padding: 0; margin: 0; }
.blog-popular li + li { border-top: 1px dotted #ccc; margin-top: 20px; padding-top: 20px; }
.blog-popular a { display: flex; align-items: flex-start; gap: 14px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.8; }
.blog-popular img { width: 72px; height: 72px; flex: 0 0 72px; object-fit: cover; border-radius: 8px; }
.blog-popular a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.article-page--blog .blog-sidebar .blog-tags { margin: 0; gap: 8px; }
.blog-sidebar a:focus-visible { outline: 2px solid #a88b5d; outline-offset: 4px; }
@media (max-width: 1023px) {
  .article-page .article-content.blog-layout { grid-template-columns: minmax(0, 1fr); width: min(calc(100% - 48px), 680px); gap: 56px; }
  .blog-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 599px) {
  .blog-sidebar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}