/* トキスジ「仕組み」ページ共通スタイル（正本）。concepts/*.html が読み込む。
   単語帳(glossary)と同系の paper/ink 基調。図はこのCSSのクラスで組む。
   ※ 本文・図に製品固有名を書かない。 */
@font-face{font-family:"IBM Plex Sans JP";font-weight:700;font-display:swap;src:url("fonts/IBMPlexSansJP-Bold.subset.woff2") format("woff2")}
:root{--paper:#f5f0e7;--ink:#191919;--muted:#66645f;--rule:#d6d0c5;--blue:#527bac;--blue-deep:#406a9c;--pale:#ebe4d9;
  --dns:#0d8f80;--http:#b9760a;--atk:#a83a52;--auth:#7a4bd0;--display:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
header{position:relative;padding:22px max(20px,calc((100vw - 900px)/2));border-top:6px solid var(--blue);border-bottom:2px solid var(--ink)}
header .logo{position:absolute;left:max(20px,calc((100vw - 900px)/2));top:18px;width:56px;height:56px;object-fit:contain}
header h1{margin:0 0 1px 72px;font-family:var(--display);font-size:clamp(19px,2.6vw,25px);line-height:1.25;font-weight:900;letter-spacing:.04em}
header .tag{margin:5px 0 0 72px;color:var(--muted);font-size:12.5px}
header .back{position:absolute;right:max(20px,calc((100vw - 900px)/2));top:24px;font-size:12px;font-weight:700;text-decoration:none;color:#fff;background:var(--blue);padding:7px 13px;border-radius:20px}
main{max-width:900px;margin:0 auto;padding:26px 20px 70px}
h2{font-family:var(--display);font-size:18px;font-weight:900;letter-spacing:.03em;margin:34px 0 12px;padding-bottom:7px;border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:10px}
h2:before{content:"";width:7px;height:7px;background:var(--blue);display:block}
p{font-size:14px;color:#2f2d28;margin:12px 0}
.lead{font-size:15px;color:#2f2d28;background:#faf7f0;border-left:3px solid var(--blue);border-radius:0 9px 9px 0;padding:13px 16px;margin:6px 0 4px}
b{color:var(--blue-deep)}

/* ── 記述ブロック（重要度順カラー）──
   lv1 ピンク＝最重要 / lv2 黄＝重要 / lv3 緑＝補足的 / lv4 青＝背景・注記
   ラベル(.k)は主張しすぎないトーンに。本文サイズは据え置き。 */
.cal{border-radius:10px;padding:13px 16px;margin:18px 0;border:1px solid}
.cal .k{display:block;font-size:11px;font-weight:800;letter-spacing:.02em;margin-bottom:2px}
.cal p{margin:5px 0 0;font-size:13.5px;line-height:1.7}
.cal.lv1{background:#fdeef0;border-color:#f2c9cf}
.cal.lv1 .k{color:#b04a60}
.cal.lv1 p{color:#5a2b34}
.cal.lv1 b{color:#a83a52}
.cal.lv2{background:#fff6d9;border-color:#f0d98a}
.cal.lv2 .k{color:#977a2a}
.cal.lv2 p{color:#4a3d12}
.cal.lv2 b{color:#8a5806}
.cal.lv3{background:#e9f5ee;border-color:#bfe0cb}
.cal.lv3 .k{color:#357a52}
.cal.lv3 p{color:#274d38}
.cal.lv3 b{color:#2f7a4d}
.cal.lv4{background:#eef3fb;border-color:#d0ddef}
.cal.lv4 .k{color:#4f6f9c}
.cal.lv4 p{color:#2f3f57}
.cal.lv4 b{color:#406a9c}

/* ── 図：前提の構成（トポロジ）── */
.topo{background:#fbfaf5}
.topo .cap{font-size:12px;color:var(--muted);font-weight:700;margin:0 0 10px;text-align:center}
.zones{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.zone{flex:1 1 180px;min-width:150px;border:1px dashed #c9c2b4;border-radius:10px;padding:10px 12px 12px;background:#fffdf8}
.zone .zlab{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--muted);text-align:center;margin-bottom:8px}
.zone.inside{border-color:#b9c6da;background:#f2f6fc}
.zone.edge{border-color:#e3c98f;background:#fbf5e6}
.zone.outside{border-color:#a9d3c9;background:#eef7f4}
.zdev{background:#fff;border:1px solid #dfe3ea;border-radius:8px;padding:7px 10px;margin:6px 0;font-size:12.5px;text-align:center}
.zdev .d{font-family:var(--display);font-weight:900;font-size:13px;color:#25324a}
.zdev .r{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:1px}
.zconn{align-self:center;color:#b7b441;font-size:15px;font-weight:900;color:#a9a48f;padding:0 4px}
@media (max-width:560px){.zconn{transform:rotate(90deg);padding:6px 0}}

/* ── 図：縦フロー ── */
.diagram{background:#fffdf8;border:1px solid var(--rule);border-radius:12px;padding:18px 16px 20px;margin:16px 0}
.phase{margin:6px 0 4px}
.phase-h{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.02em;padding:4px 12px;border-radius:999px;margin-bottom:6px}
.phase-h .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff}
.phase.dns .phase-h{background:#e3f4f1;color:#0a6b60}
.phase.dns .phase-h .n{background:var(--dns)}
.phase.http .phase-h{background:#f6ecd8;color:#8a5806}
.phase.http .phase-h .n{background:var(--http)}
.phase.atk .phase-h{background:#fbe6ec;color:#8f2340}
.phase.atk .phase-h .n{background:var(--atk)}
.phase.auth .phase-h{background:#efe6f8;color:#5a2f9c}
.phase.auth .phase-h .n{background:var(--auth)}
.flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:4px 0}
.fnode{width:100%;max-width:460px;background:#f0f2f6;border:1px solid #dfe3ea;border-radius:9px;padding:9px 13px;font-size:13px;line-height:1.5;position:relative}
.fnode .dev{font-family:var(--display);font-weight:900;font-size:13.5px;color:#25324a}
.fnode .role{font-size:11.5px;color:var(--muted);margin-left:6px;font-weight:700}
.fnode.pc{border-left:3px solid #6b7280}
.fnode.fw{border-left:3px solid var(--dns);background:#eef7f5}
.fnode.proxy{border-left:3px solid var(--http);background:#fbf3e4}
.fnode.dst{border-left:3px solid #6b7280;background:#eef1f6}
.fnode.resolver{border-left:3px solid var(--blue);background:#eef3fb}
.fnode.auth-node{border-left:3px solid var(--auth);background:#f3edfb}
.fnode.atk-node{border-left:3px solid var(--atk);background:#fbeef1}
.farrow{color:#aeb6c4;font-size:16px;line-height:1;margin:5px 0;font-weight:900}
.farrow .msg{display:block;font-size:11px;color:#6a7180;font-weight:700;margin-top:2px;max-width:380px;text-align:center}
.farrow .msg.q{color:#0a6b60}
.farrow .msg.a{color:#8a5806}
.logtag{position:absolute;top:50%;right:-6px;transform:translate(100%,-50%);font-size:10.5px;font-weight:900;white-space:nowrap;background:#fff4d6;border:1px solid #e6c55a;color:#8a5806;padding:2px 8px;border-radius:6px}
.logtag.dns{background:#dff2ee;border-color:#8fcabf;color:#0a6b60}
.blocked{position:absolute;top:50%;right:-6px;transform:translate(100%,-50%);font-size:10.5px;font-weight:900;white-space:nowrap;background:#fdeef0;border:1px solid #eeb6bf;color:#a83a52;padding:2px 8px;border-radius:6px}
.gate{display:inline-block;font-size:11px;font-weight:900;color:#8a5806;background:#fbe6bf;border:1px solid #eecb7f;border-radius:6px;padding:1px 7px;margin-left:6px}
.tagpill{display:inline-block;font-size:10.5px;font-weight:900;border-radius:6px;padding:1px 7px;margin-left:6px}
.tagpill.data{background:#fbe6ec;border:1px solid #eeb6c4;color:#8f2340}
@media (max-width:560px){.logtag,.blocked{position:static;transform:none;display:inline-block;margin-top:6px}}

.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.two.three{grid-template-columns:1fr 1fr 1fr}
.two .box{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:#faf7f0}
.two .box h3{margin:0 0 6px;font-family:var(--display);font-size:14px;font-weight:900}
.two .box.p h3{color:var(--http)}
.two .box.f h3{color:var(--dns)}
.two .box.r h3{color:var(--blue-deep)}
.two .box.a h3{color:var(--auth)}
.two .box ul{margin:0;padding-left:17px}
.two .box li{font-size:12.5px;line-height:1.6;margin:3px 0;color:#3a3833}
@media (max-width:560px){.two,.two.three{grid-template-columns:1fr}}


.links{margin:16px 0 0;padding:0;list-style:none}
.links li{margin:8px 0}
.links a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;text-decoration:none;color:var(--blue-deep);background:#eef3fb;border:1px solid #d3ddec;border-radius:8px;padding:8px 13px}
.links a:hover{background:#e2ecf9}
.links .q{font-size:11px;font-weight:900;color:#fff;background:var(--blue);border-radius:5px;padding:1px 7px}
.hint{font-size:12px;color:var(--muted);margin:4px 2px 0}

/* つながる仕組み（連作ナビ） */
.chainnav{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.chainnav a{flex:1 1 220px;text-decoration:none;border:1px solid var(--rule);border-left:3px solid var(--blue);background:#faf7f0;border-radius:0 9px 9px 0;padding:10px 13px;color:inherit}
.chainnav a:hover{background:#fff6d9}
.chainnav .lab{font-size:10.5px;font-weight:800;color:var(--muted)}
.chainnav .t{display:block;font-family:var(--display);font-weight:900;font-size:13.5px;color:var(--blue-deep);margin-top:2px}

footer{margin-top:44px;padding:24px 20px 42px;border-top:1px solid var(--ink);background:#efeee8;color:var(--muted);font-size:11px;line-height:1.9;text-align:center}
footer a{color:var(--ink);font-weight:700}