:root{
  --fg:#111;
  --muted:#666;
  --bg:#fff;
  --line:#e7e7e7;
  --card:#fafafa;
  --accent:#0b5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.75;
}

header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:9;
}

.container{
  max-width:980px;
  margin:0 auto;
  padding:14px 16px;
}

.header-inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.header-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.site{
  display:flex;
  gap:10px;
  align-items:baseline;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.site strong{font-weight:800}
.site span{color:var(--muted);font-size:.92rem}

.btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.btn:hover{background:#f6f6f6}

.badge{
  display:inline-block;
  font-size:.85rem;
  color:#0a4;
  background:#eefaf2;
  border:1px solid #d8f1e2;
  padding:4px 10px;
  border-radius:999px;
}

h1{margin:.6rem 0 .2rem;font-size:1.55rem}
.lead{color:var(--muted);margin:.2rem 0 1rem}

.toc-wrap{margin:12px 0 18px}
.toc{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin:14px 0 10px;
}
.toc a{
  display:block;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  text-decoration:none;
  color:inherit;
}
.toc a:hover{background:#f3f3f3}
.toc a small{display:block;color:var(--muted)}

.note{margin:0}
.muted{color:var(--muted)}
code.inline{background:#f2f2f2;padding:2px 6px;border-radius:8px}

.route{margin:26px 0}
.route h2{margin:0 0 10px;font-size:1.25rem}
.route-lead{margin:0 0 14px;color:var(--muted)}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  padding:14px;
}

.kicker{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:6px;
}

.tag{
  font-size:.8rem;
  color:#045;
  background:#eaf4ff;
  border:1px solid #d9ebff;
  padding:3px 8px;
  border-radius:999px;
}
.tag2{
  font-size:.8rem;
  color:#640;
  background:#fff3e6;
  border:1px solid #ffe1c2;
  padding:3px 8px;
  border-radius:999px;
}

.title{font-size:1.05rem;font-weight:800;margin:6px 0 4px}

.meta{
  font-size:.9rem;
  color:var(--muted);
  border-left:3px solid #ddd;
  padding-left:10px;
  margin:8px 0;
}

.label{font-weight:800;margin:10px 0 4px}

ul{margin:.2rem 0 .2rem 1.2rem;padding:0}
li{margin:.15rem 0}

.hr{height:1px;background:var(--line);margin:22px 0}

.foot{
  margin:28px 0 10px;
  color:var(--muted);
  font-size:.92rem;
}

.bottom-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0 24px;
}