/* きほん（kihon/ のページ）だけの見た目。shikumi.css の上に重ねて使う
   1ページ＝1つの疑問：短い答え → 触って確かめる → 現場ではこう見える → 3問チェック → 次へ */

/* 段の表示（きほん → しくみ図解 → 故障探し） */
.lv{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;color:var(--muted);margin:0 0 8px}
.lv span{border:1px solid var(--line);border-radius:999px;padding:1px 10px;background:var(--surface)}
.lv span.on{background:var(--live-soft);border-color:var(--live);color:var(--ink);font-weight:600}

/* 短い答え */
.answer{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--live);border-radius:10px;padding:12px 14px;margin-top:16px}
.answer b.k{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:2px}
.answer p{margin:0;font-family:var(--f-display);font-size:17px;font-weight:700;line-height:1.6}

/* 現場ではこう見える */
.genba{background:var(--chip);border-radius:10px;padding:12px 14px}
.genba p{margin:4px 0}

/* 次にすること（図の下の一言） */
.hint{color:var(--muted);font-size:14px;margin:2px 0 0}

/* 場面カード（安全の基本） */
.scns{display:grid;gap:10px}
.scn{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.scn .no{font-size:12px;color:var(--muted)}
.scn p.t{margin:2px 0 8px;font-weight:600}
.scn .row .btn{flex:1 1 200px;text-align:left}
.scn .btn.right{background:var(--live-soft);border-color:var(--live)}
.scn .btn.wrong{border-color:var(--ng)}
.scn .res{margin-top:8px;font-size:14px}
.scn.done{border-color:var(--live)}
.score{font-size:14px;color:var(--muted);margin:0 0 8px}

/* 3つの合言葉 */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:640px){.three{grid-template-columns:minmax(0,1fr)}}
.three div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.three b{display:block;font-family:var(--f-display);font-size:18px}
.three span{font-size:14px;color:var(--muted)}

/* 一覧（kihon/index.html） */
.road{display:grid;gap:18px}
.road h2{margin:0 0 8px}
.road ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.road li a,.road li span.soon{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);text-decoration:none;height:100%}
.road li a:hover{border-color:var(--live)}
.road li b{display:block;font-family:var(--f-display)}
.road li small{font-size:13px;color:var(--muted)}
.road li span.soon{color:var(--muted);background:transparent;border-style:dashed}
.road .to{font-size:13px;color:var(--muted);margin:6px 0 0}