/* 入門の道（dist/onboarding.js）：入門の窓の3歩と、はじめてのけいこ完了画面の板 */
.intro-steps{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:10px}
.intro-steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fffae9}
.intro-num,.road-mark{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.road-mark .icon{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:3}
.intro-steps strong{display:block;font-size:15px}.intro-steps small{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.intro-skip{display:block;margin:8px auto 0;padding:10px 16px}
.road-board{margin-top:23px}
.road-steps{list-style:none;margin:0;padding:0;display:grid}
.road-step{display:flex;gap:12px;padding:14px 18px 16px;border-top:1px solid var(--line)}.road-step:first-child{border-top:0}
.road-step>div{flex:1;min-width:0}.road-step strong{display:block;font-size:16px;margin:3px 0 4px}.road-step p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.55}
.road-step.is-done .road-mark{background:var(--green)}.road-step.is-done p{color:var(--ink);margin-bottom:0}
.road-slots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.road-slot{min-height:40px;padding:8px 14px;border-radius:999px;border:2px solid #d9c9a6;background:#fff;color:var(--ink);font-weight:800;font-size:14px}
.road-slot.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.road-join{display:flex;gap:8px;flex-wrap:wrap}.road-join input{flex:1;min-width:150px;min-height:48px;border:1px solid #cedbe6;border-radius:12px;padding:0 12px;font-size:16px;background:#fff}
.road-later{display:block;margin:0 auto;padding:8px 18px 16px}
.road-link{display:inline-block;margin:-4px 0 6px}