/* ネットワークの深掘り。style.css と flow.css の上に重ねる（層ごとの色: アプリは青・トランスポートは緑・インターネットは橙・リンクは灰、AI は紫） */
:root {
  --n-app: #1d4ed8;
  --n-app-soft: #eff6ff;
  --n-tr: #0f766e;
  --n-tr-soft: #f0fdfa;
  --n-ip: #b45309;
  --n-ip-soft: #fffbeb;
  --n-link: #475569;
  --n-link-soft: #f1f5f9;
  --n-bad: #b91c1c;
  --n-bad-soft: #fef2f2;
  --n-ai: #6d28d9;
  --n-ai-soft: #ede9fe;
  --n-code: #0f172a;
}
.subh { margin: 22px 0 10px; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hint { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; color: #475569; background: #f8fafc; border: 1px dashed #94a3b8; border-radius: 999px; padding: 0 8px; white-space: nowrap; vertical-align: 2px; margin-left: 6px; }
.sref { margin: 0; font-size: 11.5px; color: var(--muted); }
.sref a, .jl a, .fhead p a, .lead a, .tosay a { color: #1d4ed8; text-underline-offset: 2px; }
.jl { margin: 0; font-size: 12.5px; }
.inl { font-weight: 700; }
.lab { display: block; font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; }
.code { margin: 0; font-family: var(--latin); font-size: 12px; line-height: 1.6; background: var(--n-code); color: #e2e8f0; border-radius: 10px; padding: 9px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code code { font: inherit; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.ncard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ncard h3 { margin: 0; font-size: 15px; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.ncard p { margin: 0; font-size: 13px; color: var(--ink2); }
.ncard .sref { margin-top: auto; padding-top: 2px; }
.ncard code.ex { align-self: flex-start; font-family: var(--latin); font-size: 12px; background: var(--line2); border-radius: 6px; padding: 2px 8px; overflow-wrap: anywhere; }
.hp { margin: 10px 0 0; font-size: 13px; color: var(--ink2); display: flex; gap: 2px 0; align-items: baseline; flex-wrap: wrap; }
.hp .hint { margin: 0 8px 0 0; }
.aitag { font-size: 12px; font-weight: 700; color: var(--n-ai); background: var(--n-ai-soft); border-radius: 6px; padding: 2px 8px; margin-right: 8px; vertical-align: middle; }

/* ① 層と包む体験 */
.lylay { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
.lylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ly { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; transition: border-color .2s, background-color .2s; }
.ly b { font-size: 14px; }
.ly .lyex { margin-left: 8px; font-family: var(--latin); font-size: 11.5px; color: var(--muted); }
.ly p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink2); }
.lyn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--latin); color: #fff; }
.ly.app .lyn { background: var(--n-app); }
.ly.tr .lyn { background: var(--n-tr); }
.ly.ip .lyn { background: var(--n-ip); }
.ly.link .lyn { background: var(--n-link); }
.ly.app.on { border-color: var(--n-app); background: var(--n-app-soft); }
.ly.tr.on { border-color: var(--n-tr); background: var(--n-tr-soft); }
.ly.ip.on { border-color: var(--n-ip); background: var(--n-ip-soft); }
.ly.link.on { border-color: var(--n-link); background: var(--n-link-soft); }
.encbox { display: flex; flex-direction: column; gap: 10px; }
.enctop { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.encnav { display: flex; gap: 5px; flex-wrap: wrap; }
.encnav button { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); font: 600 13px var(--latin); color: var(--ink2); cursor: pointer; }
.encnav button:hover { border-color: #94a3b8; }
.encnav button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.enctls { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.enctls input, .tophp input { width: 17px; height: 17px; accent-color: var(--n-app); cursor: pointer; }
.encside { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.encside .sd { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted); background: var(--paper); }
.encside .sd.on { color: #fff; background: var(--ink2); border-color: var(--ink2); font-weight: 700; }
.encside .sdarr { color: var(--muted); }
.encpkt { min-height: 230px; display: flex; align-items: flex-start; }
.pkt { border: 2px solid; border-radius: 12px; padding: 6px 8px 8px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pkt .ph { font-family: var(--latin); font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.pkt .pl { flex: none; font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 0 6px; }
.pkt em { font-style: normal; font-family: var(--sans); font-size: 11px; font-weight: 700; color: #92400e; background: #fde68a; border-radius: 999px; padding: 0 8px; }
.pkt.chg > .ph { background: #fef9c3; border-radius: 6px; padding: 2px 4px; }
.pkt.link { border-color: var(--n-link); background: var(--n-link-soft); }
.pkt.link > .ph { color: var(--n-link); }
.pkt.link > .ph .pl { background: var(--n-link); }
.pkt.ip { border-color: var(--n-ip); background: var(--n-ip-soft); }
.pkt.ip > .ph { color: var(--n-ip); }
.pkt.ip > .ph .pl { background: var(--n-ip); }
.pkt.tr { border-color: var(--n-tr); background: var(--n-tr-soft); }
.pkt.tr > .ph { color: var(--n-tr); }
.pkt.tr > .ph .pl { background: var(--n-tr); }
.pkt.app { border-color: var(--n-app); background: var(--paper); flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.pkt.app > .pl { background: var(--n-app); }
.pkt.app .appln { font-family: var(--latin); font-size: 12.5px; color: var(--ink); }
.pkt.app.done { box-shadow: 0 0 0 4px rgba(29, 78, 216, .15); }
.tlsbox { font-family: var(--latin); font-size: 12px; font-weight: 600; color: #fff; background: repeating-linear-gradient(45deg, #334155 0 6px, #475569 6px 12px); border-radius: 6px; padding: 3px 8px; }
.tlsnote { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.encsay b { font-size: 15px; }
.encsay p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); }
.encctrl { display: flex; justify-content: space-between; }
.encctrl button { appearance: none; font: inherit; font-size: 13.5px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 7px 16px; cursor: pointer; min-height: 38px; }
.encctrl button.pri { background: var(--ink); border-color: var(--ink); color: #fff; }
.encctrl button:disabled { opacity: .4; cursor: default; }

/* ② IP とポート・CIDR */
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cidrbox { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 16px; }
.cidrin input { width: 100%; font-family: var(--latin); font-size: 18px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--ink); background: var(--paper); }
.cpresets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.cpresets button { appearance: none; font: inherit; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 6px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cpresets button code { font-family: var(--latin); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cpresets button span { font-size: 11.5px; color: var(--muted); }
.cpresets button:hover { border-color: #94a3b8; }
.cpresets button[aria-pressed="true"] { border-color: var(--n-app); background: var(--n-app-soft); }
.cerr { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--n-bad); background: var(--n-bad-soft); border-radius: 10px; padding: 8px 10px; }
.cfix { margin: 0 0 8px; font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 9px; }
.bits { display: flex; flex-wrap: wrap; gap: 2px; font-family: var(--latin); font-size: 12px; }
.bits i { font-style: normal; width: 15px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
.bits i.nb { background: var(--n-app); color: #fff; }
.bits i.hb { background: var(--line2); color: var(--ink2); }
.bits .dot { width: 6px; display: grid; place-items: end center; color: var(--muted); }
.blegend { margin: 6px 0 10px; font-size: 12px; color: var(--ink2); display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; }
.blegend .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.blegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.nbk { background: var(--n-app); }
.hbk { background: var(--line2); border: 1px solid var(--line); }
.cdl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cdl div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 10px; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: var(--line2); }
.cdl dt { font-weight: 700; color: var(--ink2); }
.cdl dd { margin: 0; overflow-wrap: anywhere; }
.cdl code { font-family: var(--latin); font-size: 12.5px; }
.cdl b { font-family: var(--latin); }
.kd { font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.kd.priv { color: var(--n-tr); background: var(--n-tr-soft); }
.kd.doc { color: var(--n-ip); background: var(--n-ip-soft); }
.kd.glob { color: var(--ink2); background: var(--paper); }
.kd.mix { color: #92400e; background: #fef3c7; }
#cidrSrc { margin-top: 8px; }

/* ③ TCP と UDP */
.tcplay { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.hslist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hs { display: grid; grid-template-columns: 24px 5em 6.5em minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; padding: 7px 9px; border-radius: 10px; background: var(--n-tr-soft); }
.hs.back { background: var(--line2); }
.hsn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--n-tr); color: #fff; font: 600 11.5px var(--latin); }
.hsdir { font-family: var(--latin); font-weight: 600; color: var(--ink2); }
.hs code { font-family: var(--latin); font-weight: 700; color: var(--n-tr); }
.hssay { color: var(--ink2); }
.tugrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.use { font-size: 12.5px !important; }
.use b { font-size: 11.5px; color: var(--ink); margin-right: 6px; }
.faillist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.faillist li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink2); }
.faillist b { color: var(--ink); font-size: 14px; }
.faillist .nx { color: var(--n-tr); font-weight: 600; }

/* ④ DNS */
.dnslay { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.twrap { overflow-x: auto; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable th { text-align: left; font-size: 12px; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--line); }
.rtable td { padding: 7px 8px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.rtable td:first-child code { font-family: var(--latin); font-weight: 700; color: var(--n-app); }
.rtable td:last-child code { font-family: var(--latin); font-size: 12px; color: var(--ink2); }
.digcols { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.digcols li { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 8px; }
.digcols code { font-family: var(--latin); font-weight: 600; color: var(--ink); white-space: nowrap; }
.digcols span { color: var(--ink2); }
.dnote { margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); }
.dnote code { font-family: var(--latin); font-weight: 700; }

/* ⑤ TLS */
.tlslay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.chain { display: flex; flex-direction: column; gap: 4px; }
.ch { border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; border: 1.5px solid; }
.ch b { font-size: 14px; }
.ch span { font-size: 12.5px; color: var(--ink2); }
.ch.leaf { border-color: #93c5fd; background: var(--n-app-soft); }
.ch.mid { border-color: #99f6e4; background: var(--n-tr-soft); }
.ch.root { border-color: #fcd34d; background: var(--n-ip-soft); }
.charr { font-size: 11.5px; font-weight: 700; color: var(--muted); padding-left: 10px; }
.cnote { margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); }
.tls13 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tls13 li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; font-size: 13px; color: var(--ink2); }
.tls13 .tn { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink2); color: #fff; font: 600 11.5px var(--latin); }
.tls13 b { color: var(--ink); font-size: 14px; }
.tgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#tlsSrc { margin-top: 8px; }
.ncard h3 .on { font-family: var(--latin); font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ⑥ 包みがなくなったとき */
.lossbox { margin-top: 10px; }
.losstop button { appearance: none; font: inherit; font-size: 13.5px; font-weight: 700; border: 1.5px solid var(--n-bad); background: var(--paper); color: var(--n-bad); border-radius: 999px; padding: 7px 16px; cursor: pointer; min-height: 38px; }
.losstop button[aria-pressed="true"] { background: var(--n-bad); color: #fff; }
.losslay { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.losslay h3 { font-size: 13.5px; color: var(--ink2); }
.lanes { display: flex; flex-direction: column; gap: 6px; }
.lane { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 8.5em; gap: 8px; align-items: center; font-size: 12.5px; }
.lane > span { font-weight: 700; }
.lbar { height: 10px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.lbar i { display: block; height: 100%; background: var(--n-tr); transform-origin: left center; transform: scaleX(1); transition: transform .35s ease, background-color .35s; }
.lane em { font-style: normal; font-size: 12px; color: var(--n-tr); font-weight: 700; }
.lane.wait .lbar i { transform: scaleX(.35); background: var(--n-bad); }
.lane.wait em { color: var(--n-bad); }
.losssay { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }

/* ⑦ ロードバランサーとプロキシ */
.lbgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tobox { display: flex; flex-direction: column; gap: 10px; }
.tobox .hp { margin: 0; }
.toctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.toctrl .lab { margin: 0; }
.toctrl .lab b { font-family: var(--latin); font-size: 15px; color: var(--ink); margin-left: 6px; }
.toctrl input[type="range"] { flex: 1; min-width: 180px; accent-color: var(--ink); }
.tophp { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.tobars { display: flex; flex-direction: column; gap: 8px; }
.tob { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.tob.cut { border-color: #fecaca; background: #fffafa; }
.toh { display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.toh b { font-size: 13.5px; }
.toh span { color: var(--ink2); }
.toh code { margin-left: auto; font-family: var(--latin); font-weight: 700; }
.totrack { position: relative; height: 10px; border-radius: 999px; background: var(--line2); margin-top: 6px; }
.totrack i { position: absolute; inset: 0; border-radius: 999px; background: #94a3b8; transform-origin: left center; }
.tob.cut .totrack i { background: var(--n-bad); }
.tomark { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transition: left .2s; }
.tosay { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* ⑧ 囲いと通り道 */
.vpclay { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.layout { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.lnet { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink2); border: 1.5px dashed #94a3b8; border-radius: 999px; padding: 4px 10px; }
.larr { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.lzone { border-radius: 12px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid; }
.lzone.pub { border-color: #93c5fd; background: var(--n-app-soft); }
.lzone.priv { border-color: #cbd5e1; background: var(--n-link-soft); }
.lzn { font-size: 11px; font-weight: 700; color: var(--muted); }
.lzone b { font-size: 14px; }
.lzt { font-size: 12px; color: var(--ink2); }

/* ⑨ 調べる道具 */
.toolgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tool h3 code { font-family: var(--latin); font-size: 14.5px; font-weight: 700; background: var(--line2); border-radius: 6px; padding: 1px 8px; }
.tool .code { font-size: 11.5px; }
.tool .tnote { font-size: 12.5px; color: var(--ink2); }

/* ⑩ AI 時代 */
.aigrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ncard.ai { border-color: #ddd6fe; background: #faf8ff; }

/* ⑪ チェックリスト */
.cklist { padding: 10px 16px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mlist label { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; cursor: pointer; padding: 5px 0; }
.mlist input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--n-tr); cursor: pointer; }
.mlist input:checked + span { color: var(--muted); text-decoration: line-through; }
.ckfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mcount { font-family: var(--latin); font-size: 13px; color: var(--muted); }
.ckreset { appearance: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; min-height: 34px; }

.encnav button:focus-visible, .encctrl button:focus-visible, .enctls input:focus-visible, .cidrin input:focus-visible, .cpresets button:focus-visible, .losstop button:focus-visible, .toctrl input:focus-visible, .tophp input:focus-visible, .mlist input:focus-visible, .ckreset:focus-visible, .ncard a:focus-visible, .fhead a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .lylay, .cidrbox, .tcplay, .dnslay, .vpclay { grid-template-columns: 1fr; }
  .agrid, .lbgrid, .toolgrid, .tgrid3, .faillist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .agrid, .lbgrid, .toolgrid, .tgrid3, .faillist, .aigrid, .tlslay, .losslay, .vgrid, .mlist, .lylist { grid-template-columns: 1fr; }
  .encnav button { width: 31px; height: 31px; font-size: 12px; }
  .encpkt { min-height: 0; }
  .pkt { padding: 5px 6px 6px; }
  .pkt .ph { font-size: 11.5px; }
  .cpresets { grid-template-columns: 1fr 1fr; }
  .cdl div { grid-template-columns: 1fr; gap: 2px; }
  .bits { gap: 1px; font-size: 8px; }
  .bits i { width: 8px; height: 18px; border-radius: 2px; }
  .bits .dot { width: 4px; }
  .hs { grid-template-columns: 22px 4.2em minmax(0, 1fr); }
  .hs .hssay { grid-column: 2 / -1; }
  .lane { grid-template-columns: 4em minmax(0, 1fr); }
  .lane em { grid-column: 2; }
  .digcols li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ly, .lbar i, .tomark { transition: none; }
}