main {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--sp-header-height, 72px) + 32px) var(--sp-space-6) var(--sp-space-12);
}

.guide-post {
  max-width: 780px;
  margin: 0 auto;
}



.post-header {
  max-width: 680px;
  margin: 0 auto var(--sp-space-12);
  text-align: center;
}

article .post-header h1,
.post-header h1 {
  font-family: var(--sp-font-heading);
  font-size: var(--sp-text-3xl);
  line-height: var(--sp-leading-snug);
  margin-bottom: var(--sp-space-4);
  letter-spacing: -0.03em;
  color: var(--sp-color-text-primary);
  text-transform: uppercase;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-4);
  color: var(--sp-color-text-secondary);
  font-size: var(--sp-text-sm);
}



.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sp-text-sm);
  color: var(--sp-color-text-secondary);
  margin-bottom: 24px;
}

.breadcrumb a {
  color: var(--sp-color-text-secondary);
  text-decoration: none;
  transition: color var(--sp-duration-fast) var(--sp-ease-default);
}

.breadcrumb a:hover {
  color: var(--sp-color-text-primary);
}

.breadcrumb__separator {
  color: var(--sp-color-text-muted);
}

.breadcrumb__current {
  color: var(--sp-color-text-disabled);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.page-header {
  margin-bottom: var(--sp-space-12);
}

.page-header h1 {
  font-family: var(--sp-font-heading);
  font-size: var(--sp-text-3xl);
  font-weight: var(--sp-font-weight-bold);
  letter-spacing: -0.03em;
  color: var(--sp-color-text-primary);
  margin-bottom: var(--sp-space-2);
  text-transform: uppercase;
}

.page-header .subtitle {
  font-size: var(--sp-text-lg);
  color: var(--sp-color-text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb a {
    transition: none;
  }
}