/* 小規模ネットワーク構成ガイド 共通スタイル。外部フォント・外部画像なし。
   方針: 読みやすさ最優先 / スレート+ミント・シアンの技術系 / 数値と設定例は等幅 / ライト既定+ヘッダーのボタンでダークに切替(OS設定には追従しない)
   余白: 4/8/12/16/24/32/48/64px のスケール(--s1〜--s8)だけを使う。詰め込まず、1画面の情報を減らす。 */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 20px;      /* 左右の余白(スマホ20px / PC32px) */
  --sec: var(--s7);    /* セクション間(スマホ48px / PC64px) */
  --card-pad: var(--s5); /* カード内(スマホ24px / PC28px) */
  color-scheme: light;
  --bg: #f1f5f7;
  --surface: #ffffff;
  --surface-2: #e9f0f3;
  --ink: #10202b;
  --muted: #465865;
  --line: #d3dde3;
  --line-strong: #7d909c;
  --accent: #0a7283;
  --accent-ink: #ffffff;
  --accent-soft: #dff3f3;
  --mint: #19c2a5;
  --ok: #0a6b47; --ok-bg: #e0f5ea; --ok-bar: #15a57f;
  --warn: #7a4a00; --warn-bg: #fff0d1; --warn-bar: #e2a400;
  --bad: #9e1c1c; --bad-bg: #fde6e4; --bad-bar: #d13c35;
  --dep: #3b3a8c; --dep-bg: #e9e8fb; --dep-bar: #6f6bd6;
  --real: #0a6372; --real-bg: #e0f3f5;
  --head-bg: #10222d; --head-ink: #dcebf0; --head-accent: #5eead4;
  --code-bg: #0f1d27; --code-ink: #d7f3ee; --code-line: #27404f;
  --focus: #0b5fd0;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Noto Sans Mono CJK JP", "Liberation Mono", monospace;
  --sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, -apple-system, sans-serif;
}
@media (min-width: 720px) { :root { --gutter: 32px; --sec: var(--s8); --card-pad: 28px; } }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b151c;
  --surface: #132029;
  --surface-2: #1a2b36;
  --ink: #e4eef2;
  --muted: #a9bcc6;
  --line: #2a3d49;
  --line-strong: #6f8593;
  --accent: #5eead4;
  --accent-ink: #052521;
  --accent-soft: #0f2f33;
  --mint: #5eead4;
  --ok: #7be8b5; --ok-bg: #0f2e24; --ok-bar: #2dc995;
  --warn: #fbd38d; --warn-bg: #33270d; --warn-bar: #e8b229;
  --bad: #ffb0ab; --bad-bg: #3a1514; --bad-bar: #f06a62;
  --dep: #c9c7ff; --dep-bg: #25244a; --dep-bar: #8f8cf0;
  --real: #8ae9f3; --real-bg: #0f2c33;
  --head-bg: #08121a; --head-ink: #cfe0e7;
  --code-bg: #07111a; --code-line: #27404f;
  --focus: #7dd3fc;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.06rem; line-height: 1.85;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 46em; }
a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: var(--s3) var(--s4); z-index: 30; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.mono, .num { font-family: var(--mono); }
.small { font-size: .9rem; color: var(--muted); line-height: 1.8; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--head-bg); color: var(--head-ink); border-bottom: 3px solid var(--mint); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s5); padding-top: var(--s2); padding-bottom: var(--s2); }
.site-name { margin: 0 auto 0 0; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; line-height: 1.4; }
.site-name a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.site-name a::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--head-accent); box-shadow: 4px 4px 0 -1px rgba(94, 234, 212, .35); flex: none; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.site-header nav li { margin: 0; }
.site-header nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: 8px; color: var(--head-ink); text-decoration: none; font-size: .92rem; line-height: 1.4; }
.site-header nav a:hover { background: rgba(255, 255, 255, .1); }
.site-header nav a[aria-current="page"] { color: var(--head-bg); background: var(--head-accent); font-weight: 700; }
.site-header :focus-visible { outline-color: var(--head-accent); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0; border: 1px solid rgba(220, 235, 240, .4); border-radius: 10px; background: transparent; color: var(--head-ink); cursor: pointer; }
.theme-toggle:hover { background: rgba(255, 255, 255, .1); border-color: var(--head-accent); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ---------- 本文・見出し ---------- */
main { display: block; padding: var(--s7) 0 var(--s8); }
h1 { font-size: clamp(1.65rem, 5vw, 2.2rem); line-height: 1.45; margin: 0 0 var(--s5); letter-spacing: .01em; }
h2 { font-size: 1.45rem; line-height: 1.5; margin: var(--sec) 0 var(--s5); padding-left: var(--s4); border-left: 5px solid var(--mint); }
h3 { font-size: 1.15rem; line-height: 1.55; margin: var(--s7) 0 var(--s3); }
h2 + h3 { margin-top: var(--s5); }
p { margin: 0 0 1.3em; }
ul, ol { padding-left: 1.5em; margin: 0 0 var(--s5); }
li { margin: var(--s2) 0; }
strong { font-weight: 700; }
.lead { font-size: 1.12rem; line-height: 1.9; margin-bottom: var(--s6); }
.eyebrow { display: inline-block; margin: 0 0 var(--s4); padding: 1px var(--s3); border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: 700 .78rem/1.9 var(--mono); letter-spacing: .08em; }
code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: .1em .4em; border-radius: 4px; }

/* ---------- ボタン・フォーム ---------- */
button { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.4; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.lg { min-height: 60px; padding: 0 var(--s6); font-size: 1.12rem; }
.btn.add { width: 100%; border-style: dashed; color: var(--accent); background: transparent; }
.btn.add:hover { background: var(--accent-soft); }
.btn.sm { min-height: 48px; min-width: 48px; padding: 0 var(--s3); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s6) 0 0; }
.btn-row .btn { flex: 0 1 auto; }
@media (max-width: 519px) { .btn-row .btn { flex: 1 1 100%; } }
label { display: block; font-size: .92rem; font-weight: 700; margin: 0 0 var(--s2); line-height: 1.6; }
input[type="text"], select {
  width: 100%; min-height: 50px; padding: var(--s2) var(--s3); font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 10px;
}
input[type="text"] { font-family: var(--mono); font-size: 1.05rem; }
input[type="text"]:focus, select:focus { border-color: var(--focus); }
input[aria-invalid="true"] { border-color: var(--bad-bar); background: var(--bad-bg); }
.field { margin: 0 0 var(--s5); min-width: 0; }
.hint { display: block; margin-top: var(--s2); font-size: .88rem; line-height: 1.75; color: var(--muted); }
.err { margin: var(--s2) 0 0; font-size: .9rem; font-weight: 700; color: var(--bad); }
.err:empty { display: none; }
.err:not(:empty)::before { content: "⚠ "; }
.grid3 { display: grid; gap: 0 var(--s4); grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
.grid2 { display: grid; gap: 0 var(--s5); grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); }

/* ---------- パネル・折りたたみ ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad) var(--card-pad) var(--s2); margin: 0 0 var(--s6); }
.panel h2 { margin: 0 0 var(--s5); padding: 0; border: 0; font-size: 1.15rem; display: flex; align-items: center; gap: var(--s3); }
.step { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .95rem var(--mono); flex: none; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 var(--s5); }
summary { cursor: pointer; padding: var(--s3) var(--s5); min-height: 52px; font-weight: 700; line-height: 1.6; list-style: none; display: flex; align-items: center; gap: var(--s2); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--accent); font-size: .9em; transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(90deg); }
details[open] > summary { border-bottom: 1px solid var(--line); }
details > :not(summary) { margin-left: var(--s5); margin-right: var(--s5); }
details > summary + * { margin-top: var(--s5); }
details > :last-child { margin-bottom: var(--s5); }
.more { background: transparent; border: 0; margin: var(--s2) 0 var(--s4); }
.more summary { padding: var(--s1) 0; min-height: 44px; font-weight: 600; font-size: .88rem; color: var(--accent); }
.more[open] > summary { border: 0; }
.more > :not(summary) { margin-left: 0; margin-right: 0; font-size: .88rem; }
.more > summary + * { margin-top: var(--s2); }

/* ---------- バナー・ラベル ---------- */
.banner { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s6); padding: var(--s4) var(--s5); border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: .94rem; line-height: 1.8; border: 1px solid var(--line); }
.banner::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .8rem var(--mono); }
.banner p { margin: 0; }
.confirm { display: inline-block; padding: 0 var(--s2); border-radius: 4px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bar); font-weight: 700; font-size: .84em; line-height: 1.7; white-space: nowrap; }
.notice { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bar); border-radius: 12px; padding: var(--s4) var(--s5); margin: 0 0 var(--s5); font-size: .94rem; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }

/* ---------- 計算ツールのレイアウト ---------- */
.tool { display: grid; gap: var(--s2) var(--s7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .tool { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } .res-col { position: sticky; top: var(--s5); } }
.dev-list { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.dev { margin: 0 0 var(--s5); padding: var(--s5) var(--s5) var(--s1); border: 1px solid var(--line); border-left: 5px solid var(--mint); border-radius: 12px; background: var(--bg); }
.dev-grid { display: grid; gap: 0 var(--s4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.dev-grid .f-type { grid-column: 1 / 2; }
.dev-grid .f-cls { grid-column: 2 / 4; }
.stepper { display: flex; gap: var(--s2); }
.stepper input { text-align: center; min-width: 0; width: 64px; }
.dev-actions { align-self: end; margin-bottom: var(--s5); }
.dev-title { font: 700 .8rem var(--mono); color: var(--muted); letter-spacing: .06em; margin: 0 0 var(--s4); }
@media (max-width: 519px) { .dev-grid { grid-template-columns: minmax(0, 1fr) auto; } .dev-grid .f-type, .dev-grid .f-cls { grid-column: 1 / -1; } }

/* ---------- 結果 ---------- */
.res { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); margin: 0 0 var(--s6); }
.res h2 { font-size: 1.1rem; margin: 0 0 var(--s4); padding: 0; border: 0; }
.pill { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); padding: var(--s1) var(--s4) var(--s1) var(--s1); border-radius: 99px; font-weight: 700; font-size: 1.05rem; line-height: 1.5; }
.pill .ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 1rem var(--mono); color: var(--surface); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.ok .ic { background: var(--ok-bar); color: #04281b; }
.pill.tight { background: var(--warn-bg); color: var(--warn); } .pill.tight .ic { background: var(--warn-bar); color: #2b1a00; }
.pill.over { background: var(--bad-bg); color: var(--bad); } .pill.over .ic { background: var(--bad-bar); color: #fff; }
.pill.depends { background: var(--dep-bg); color: var(--dep); } .pill.depends .ic { background: var(--dep-bar); color: #fff; }
.vtext { font-size: .98rem; line-height: 1.85; margin: 0 0 var(--s5); }
.gauge { margin: 0 0 var(--s6); }
.g-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.g-title { font-size: .92rem; font-weight: 700; margin: 0; }
.g-pct { font: 700 2.6rem/1.2 var(--mono); letter-spacing: -.02em; margin: 0; }
.g-pct small { font-size: 1rem; font-weight: 600; margin-left: 2px; }
.gauge.sub .g-pct { font-size: 1.7rem; }
.gauge.ok .g-pct { color: var(--ok); } .gauge.tight .g-pct { color: var(--warn); } .gauge.over .g-pct { color: var(--bad); }
.meter { display: block; width: 100%; height: 20px; margin: var(--s2) 0 var(--s2); border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-strong); }
.gauge.sub .meter { height: 14px; }
.m-track { fill: var(--surface-2); }
.m-fill { fill: var(--ok-bar); } .gauge.tight .m-fill { fill: var(--warn-bar); } .gauge.over .m-fill { fill: var(--bad-bar); }
.m-mark { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 2; }
.g-scale { display: flex; justify-content: space-between; font: .8rem var(--mono); color: var(--muted); gap: var(--s2); }
.kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0 0; }
.kv3 > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: var(--s3) var(--s4); }
.kv3 dt { font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 0; }
.kv3 dd { margin: var(--s1) 0 0; font: 700 1.05rem var(--mono); }
.kv3 dd.neg { color: var(--bad); }
.kv3 dd.pos { color: var(--ok); }
@media (max-width: 519px) { .kv3 { grid-template-columns: 1fr 1fr; } .g-pct { font-size: 2.3rem; } }
.res details { margin-bottom: var(--s4); }

/* スマホ: 画面下に常に結果の要約を出す */
.live-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--gutter); background: var(--head-bg); color: #fff; border-top: 3px solid var(--mint); font-size: .94rem; transition: transform .2s; }
.live-bar.hide { transform: translateY(110%); }
.live-bar .lb-pct { font: 700 1.3rem var(--mono); }
.live-bar .lb-tag { font-weight: 700; padding: 0 var(--s3); border-radius: 99px; background: var(--ok-bg); color: var(--ok); }
.live-bar.tight .lb-tag { background: var(--warn-bg); color: var(--warn); }
.live-bar.over .lb-tag { background: var(--bad-bg); color: var(--bad); }
.live-bar.depends .lb-tag { background: var(--dep-bg); color: var(--dep); }
.live-bar .lb-rest { margin-left: auto; font: .85rem var(--mono); color: #cfe0e7; }
@media (min-width: 960px) { .live-bar { display: none; } }
@media (max-width: 959px) { body.has-bar { padding-bottom: 72px; } }

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s6); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.table-scroll:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; line-height: 1.7; }
caption { text-align: left; padding: var(--s3) var(--s4); font-size: .9rem; font-weight: 700; color: var(--muted); caption-side: top; }
th, td { padding: var(--s3) var(--s4); text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--surface-2); font-size: .86rem; white-space: nowrap; border-top: 1px solid var(--line-strong); }
tbody tr:nth-child(even) { background: var(--bg); }
.t-num td:nth-child(n+3), .t-num th:nth-child(n+3), td.num, th.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.t-vlan td:nth-child(4) { font-family: var(--mono); font-size: .9rem; }
.t-vlan td:first-child { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
table.min { min-width: 34em; }

/* ---------- 記事部品 ---------- */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: 0 0 var(--s6); font-size: .88rem; color: var(--muted); }
.article-meta .chip { padding: 0 var(--s3); border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); line-height: 1.9; }
.pr { margin: 0; font-size: .88rem; color: var(--muted); }
.pr::before { content: "PR"; display: inline-block; margin-right: var(--s2); padding: 0 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 700 .72rem/1.7 var(--mono); }
.summary { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--mint); border-radius: var(--radius); padding: var(--card-pad) var(--card-pad) var(--s2); margin: 0 0 var(--s6); }
.summary h2 { margin: 0 0 var(--s3); padding: 0; border: 0; font-size: 1.1rem; }
.summary ul { margin-bottom: var(--s5); }
.conclusion { margin: var(--s2) 0 var(--s5); padding: var(--s4) var(--s5); border-radius: 10px; background: var(--accent-soft); font-weight: 600; line-height: 1.85; }
.conclusion b { font: 700 .78rem var(--mono); color: var(--accent); letter-spacing: .08em; display: block; margin-bottom: var(--s1); }
.toc { margin: 0 0 var(--s3); }
.toc details { margin-bottom: var(--s3); }
.toc ol { margin: 0; padding-left: 1.6em; }
.toc li { margin: var(--s2) 0; }
.toc a { text-decoration: none; display: inline-block; padding: var(--s1) 0; }
.toc a:hover { text-decoration: underline; }
.callout { margin: var(--s6) 0; border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; background: var(--surface); padding: var(--s5) var(--card-pad) var(--s2); }
.callout > p:first-child:not(.tag) { margin-top: 0; }
.callout h3 { margin: var(--s1) 0 var(--s3); }
.callout .tag { display: inline-block; margin: 0 0 var(--s3); padding: 0 var(--s3); border-radius: 4px; font: 700 .8rem/1.9 var(--sans); letter-spacing: .04em; }
.callout.real { border-left-color: var(--real); } .callout.real .tag { background: var(--real-bg); color: var(--real); border: 1px solid var(--real); }
.callout.check { border-left-color: var(--warn-bar); background: var(--warn-bg); color: var(--ink); } .callout.check .tag { background: var(--surface); color: var(--warn); border: 1px solid var(--warn-bar); }
.callout.caution { border-left-color: var(--bad-bar); } .callout.caution .tag { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-bar); }
.callout.tip { border-left-color: var(--mint); } .callout.tip .tag { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.steps { list-style: none; padding: 0; counter-reset: st; margin: 0 0 var(--s6); }
.steps > li { counter-increment: st; position: relative; margin: 0 0 var(--s4); padding: var(--s4) var(--s5) var(--s4) 64px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.steps > li::before { content: counter(st); position: absolute; left: var(--s4); top: var(--s4); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .95rem var(--mono); }
.code { margin: var(--s6) 0; border-radius: 12px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-line); }
.code figcaption { padding: var(--s2) var(--s5); font: .78rem var(--mono); color: #8fb3b8; border-bottom: 1px solid var(--code-line); letter-spacing: .04em; }
.code pre { margin: 0; padding: var(--s5); overflow-x: auto; color: var(--code-ink); font: .94rem/1.8 var(--mono); user-select: all; -webkit-user-select: all; white-space: pre; }
.code pre:focus-visible { outline-offset: -3px; }
.code code { background: none; padding: 0; font-size: inherit; }
.diagram { margin: var(--s6) 0; padding: var(--s5) var(--s4) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.diagram svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.diagram figcaption { margin-top: var(--s3); text-align: center; }
.d-box { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.d-router { stroke: var(--accent); stroke-width: 2.5; }
.d-switch { stroke: var(--ink); stroke-width: 2.5; }
.d-ap { stroke: var(--real); stroke-width: 2; }
.d-end { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.d-link { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.d-wifi { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 5; fill: none; }
.d-t { fill: var(--ink); font: 700 14px var(--sans); }
.d-s { fill: var(--muted); font: 12px var(--mono); }
.d-l { fill: var(--ink); font: 12px var(--mono); }
.related { margin-top: var(--s8); }
.related h2 { margin-top: 0; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); }
.cards li { margin: 0; }
.cards a { display: block; height: 100%; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--mint); border-radius: 12px; color: var(--ink); text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards strong { display: block; color: var(--accent); line-height: 1.6; margin-bottom: var(--s2); }
.cards span { font-size: .9rem; color: var(--muted); line-height: 1.75; display: block; }
.src-list li { margin: var(--s4) 0; font-size: .96rem; }
article { max-width: 44em; margin: 0 auto; }
article > section h2:first-child { margin-top: var(--sec); }

/* ---------- トップページ(ハブ) ---------- */
.hero { padding: var(--s5) 0 var(--s2); }
.hero h1 { font-size: clamp(1.8rem, 6.4vw, 2.7rem); line-height: 1.4; margin-bottom: var(--s5); max-width: 24em; text-wrap: balance; }
.hero .lead { max-width: 36em; margin-bottom: 0; }
.hero .btn-row { margin-top: var(--s6); }
.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); }
.hub-cards > li { margin: 0; }
.hub-card { display: flex; flex-direction: column; height: 100%; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--mint); border-radius: var(--radius); }
.hub-card .kind { flex: none; align-self: flex-start; margin: 0 0 var(--s3); padding: 0 var(--s3); border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: 700 .78rem/1.9 var(--mono); letter-spacing: .06em; }
.hub-card h3 { margin: 0 0 var(--s3); font-size: 1.15rem; }
.hub-card p:not(.kind) { color: var(--muted); font-size: .96rem; flex: 1 1 auto; margin-bottom: var(--s5); }
.card-links { list-style: none; margin: 0; padding: 0; }
.card-links li { margin: 0; }
.card-links a { display: flex; align-items: center; min-height: 48px; font-weight: 700; padding: var(--s1) 0; }
.card-links li + li { border-top: 1px solid var(--line); }
.env { margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.env > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--s2) var(--s5); padding: var(--s5) var(--card-pad); }
.env > div + div { border-top: 1px solid var(--line); }
.env dt { font-weight: 700; color: var(--muted); font-size: .92rem; }
.env dd { margin: 0; font-family: var(--mono); font-size: 1rem; line-height: 1.7; }
@media (max-width: 519px) { .env > div { grid-template-columns: minmax(0, 1fr); } }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.trust li { margin: 0; position: relative; padding: var(--s4) var(--s5) var(--s4) 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.trust li::before { content: "✓"; position: absolute; left: var(--s4); top: var(--s4); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .95rem var(--mono); }
.stamp { margin: var(--sec) 0 0; font: .86rem var(--mono); color: var(--muted); }

/* ---------- フッター ---------- */
.site-footer { background: var(--head-bg); color: var(--head-ink); padding: var(--s7) 0; font-size: .9rem; line-height: 1.85; border-top: 3px solid var(--mint); }
.site-footer a { color: var(--head-accent); }
.site-footer :focus-visible { outline-color: var(--head-accent); }
.site-footer p { margin: 0 0 var(--s4); }
.foot-links { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); font-size: .95rem; }
.foot-links li { margin: 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .legal { color: #b9ccd4; }
.site-footer .updated { font-family: var(--mono); font-size: .82rem; color: #b9ccd4; margin-bottom: 0; }
.ad-slot:not([hidden]) { min-height: 90px; margin-bottom: var(--s5); border: 1px dashed #456; }
@media (max-width: 560px) {
  .site-name { flex: 1 1 0; min-width: 0; }
  .theme-toggle { order: 1; }
  .site-header nav { order: 2; flex: 1 1 100%; padding-bottom: var(--s1); }
  .site-header nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
  .site-header nav a { justify-content: center; padding: 0 var(--s2); }
}