.guide-main { max-width: 1040px; padding-block: 56px 72px; }
.guide-intro { max-width: 830px; padding-bottom: 32px; }
.guide-intro h1 { margin: 12px 0 22px; font-size: 40px; line-height: 1.18; overflow-wrap: break-word; }
.guide-intro p + p { margin-top: 16px; }
.guide-lead { font-size: 21px; line-height: 1.5; }
.guide-date { color: var(--muted); font-size: 14px; }
.guide-index { padding: 24px 0; border-block: 1px solid var(--line); }
.guide-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 36px; margin: 12px 0 0; padding-left: 22px; }
.guide-main a:not(.button) { color: #086477; }
.guide-section { padding-top: 38px; scroll-margin-top: 100px; }
.guide-section h2 { margin-bottom: 18px; font-size: 27px; line-height: 1.3; }
.guide-section p + p, .guide-section ul + p { margin-top: 16px; }
.guide-section ul { margin: 18px 0; padding-left: 24px; }
.guide-section li + li { margin-top: 12px; }
.guide-example { margin: 24px 0; }
.guide-example div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.guide-example dt { font-weight: 600; }
.guide-example dd { margin: 0; }
.guide-figure { margin: 28px 0; }
.guide-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.guide-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.guide-next { margin-top: 38px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .guide-main { padding-block: 32px 48px; }
  .guide-intro h1 { font-size: 30px; }
  .guide-lead { font-size: 19px; }
  .guide-section h2 { font-size: 24px; }
  .guide-index ol { grid-template-columns: 1fr; }
  .guide-example div { grid-template-columns: 1fr; gap: 4px; }
}