.guide-page { width:min(100%,76rem); display:grid; gap:1.25rem; }
.guide-hero,.guide-toc,.guide-step,.guide-next { border:1px solid var(--line); border-radius:1.25rem; background:var(--paper); box-shadow:0 1rem 3rem rgb(55 75 67 / 7%); }
.guide-hero { padding:clamp(1.5rem,5vw,3.5rem); background:linear-gradient(120deg,#fffdf8,#eef5ef); }
.guide-hero h1 { max-width:18em; margin:.4rem 0 1rem; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(2rem,4.5vw,3.7rem); line-height:1.35; }
.guide-hero > p:not(.eyebrow) { max-width:48rem; color:var(--muted); line-height:1.9; }
.guide-progress { display:inline-flex; padding:.45rem .7rem; border-radius:999px; color:var(--teal-dark)!important; background:var(--teal-soft); font-size:.8rem; font-weight:750; }
.guide-toc { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; padding:1rem; }
.guide-toc a { display:grid; gap:.25rem; padding:.8rem; border-radius:.7rem; color:var(--text); background:#fbf7ed; font-size:.82rem; text-decoration:none; }
.guide-toc b { color:var(--gold); font-size:.72rem; }
.guide-steps { display:grid; gap:1.25rem; }
.guide-step { scroll-margin-top:1rem; overflow:hidden; padding:clamp(1rem,3vw,2rem); }
.guide-step-copy { display:grid; grid-template-columns:3.25rem 1fr; gap:1rem; align-items:start; margin-bottom:1.25rem; }
.guide-step-copy > span { display:grid; width:3.25rem; height:3.25rem; place-items:center; border-radius:50%; color:#fff; background:var(--teal); font-weight:850; }
.guide-step h2 { margin:0 0 .4rem; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(1.4rem,3vw,2rem); }
.guide-step p { margin:0; color:var(--muted); line-height:1.8; }
.guide-step figure { margin:0; }
.guide-step img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:.85rem; background:var(--canvas); }
.guide-step figcaption { margin-top:.5rem; color:var(--muted); font-size:.75rem; }
.guide-next { padding:clamp(1.2rem,3vw,2rem); border-color:#bed8d2; background:var(--teal-soft); }
.guide-next h2 { margin-top:0; color:var(--ink); }
.guide-next p { margin-bottom:0; line-height:1.8; }
@media (max-width:52rem) { .guide-toc { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:34rem) { .guide-toc { grid-template-columns:1fr; }.guide-step-copy { grid-template-columns:2.5rem 1fr;gap:.7rem;}.guide-step-copy > span { width:2.5rem;height:2.5rem;}.guide-step { border-radius:.85rem;padding:.75rem;}.guide-hero { border-radius:.85rem; } }