@font-face {
  font-family: MakeyGuide;
  src: url('/assets/MakeyGuide.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root { font-family: MakeyGuide, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

.guide-container { width: min(760px, calc(100% - 48px)); margin-inline: auto; padding-block: 48px 88px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 32px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.guide-header { margin-bottom: 40px; }
.guide-header h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.35; letter-spacing: -.045em; }
.guide-header .lead { color: var(--muted); font-size: 18px; line-height: 1.85; margin-block: 24px; word-break: keep-all; }
.guide-meta { font-size: 13px; color: var(--muted); line-height: 1.8; }
.guide-toc { padding: 24px; background: var(--wash); border-radius: 12px; margin-bottom: 48px; }
.guide-toc ol { margin: 12px 0 0; padding-left: 20px; }
.guide-toc a { display: block; min-height: 44px; padding-block: 8px; color: var(--muted); line-height: 1.6; word-break: keep-all; }
.guide-toc a:hover { color: var(--blue); }
.guide-body { font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.guide-body section { margin-block: 48px; }
.guide-body h2 { margin-bottom: 20px; font-size: 27px; letter-spacing: -.035em; line-height: 1.5; }
.guide-body h3 { margin-block: 24px 12px; font-size: 20px; line-height: 1.5; }
.guide-body p, .guide-body ul, .guide-body ol { margin-block: 16px; }
.guide-body ul, .guide-body ol { padding-left: 24px; }
.guide-body li + li { margin-top: 8px; }
.guide-body a, .related-guides a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.guide-note { padding: 20px 24px; background: var(--wash); border-left: 3px solid var(--blue); }
.guide-template { white-space: pre-wrap; overflow-wrap: anywhere; padding: 24px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.9; background: var(--wash); }
.guide-figure { margin-block: 32px; }
.guide-figure img { width: min(100%, 300px); margin-inline: auto; border: 1px solid var(--line); border-radius: 16px; }
.guide-figure figcaption { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; margin-top: 16px; }
.guide-body dl { margin-block: 24px; }
.guide-body dt { font-weight: 650; margin-top: 20px; }
.guide-body dd { margin: 6px 0 0; color: var(--muted); }
.related-guides { border-top: 1px solid var(--line); padding-top: 32px; margin-block: 48px 32px; }
.related-guides h2 { font-size: 23px; }
.related-guides ul { padding-left: 22px; line-height: 2; }
.related-guides a { display: block; padding-block: 6px; word-break: keep-all; }
.guide-action { padding-top: 24px; border-top: 1px solid var(--line); }
.guide-action p { color: var(--muted); margin-bottom: 18px; font-size: 15px; line-height: 1.8; }
.guide-index h2 { margin-top: 48px; margin-bottom: 24px; font-size: 25px; }
@media (max-width: 767px) {
  .guide-container { width: calc(100% - 40px); padding-top: 28px; }
  .guide-header .lead { font-size: 16px; }
  .guide-body { font-size: 16px; }
  .guide-body h2 { font-size: 24px; }
  .guide-toc, .guide-template, .guide-note { padding: 18px; }
  .guide-action .button { white-space: normal; text-align: center; }
}