/* 第1章 リスク編 v3 — style-b-v3.css（共通の色・ヘッダー・フッター）の後に読み込む */

/* Page head */
.page-head{padding:clamp(28px,5vw,56px) 0 clamp(32px,5vw,56px);background:radial-gradient(ellipse 60% 90% at 85% 0%,#fdeee0 0%,rgba(255,249,242,0) 70%);border-bottom:1px solid var(--line)}
.page-head-inner>*{max-width:880px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:#b8987f}
.breadcrumb a{color:var(--clay);text-underline-offset:3px}
.chapter-label{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:14px;font-weight:750;color:var(--clay)}
.chapter-label span{padding:2px 10px;border-radius:999px;background:var(--clay);color:var(--paper);font-size:12.5px;letter-spacing:.04em}
.page-title{margin:12px 0 0;font-size:clamp(30px,4vw,48px);line-height:1.35;font-weight:750;letter-spacing:-.02em;word-break:keep-all}
.summary{margin-top:24px;padding:20px 24px;background:var(--paper);border:1px solid var(--line);border-left:4px solid #d9a88a;border-radius:12px}
.summary-label{margin:0;font-size:13px;font-weight:750;letter-spacing:.06em;color:var(--clay)}
.summary-text{margin:6px 0 0;font-size:17px;line-height:1.9}
.summary-text strong{color:#5a3424}
.page-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}

/* Layout */
.article-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;align-items:start;padding:48px 0 72px}
.toc{position:sticky;top:calc(var(--header-h) + 24px);padding:18px 18px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.toc-title{margin:0 0 6px;font-size:13px;font-weight:750;color:var(--clay);letter-spacing:.04em}
.toc ol{margin:0;padding-left:1.4em;font-size:14px;line-height:1.6}
.toc li{padding:5px 0}
.toc li::marker{color:#b8987f;font-size:12px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--clay);text-decoration:underline;text-underline-offset:3px}
.article{max-width:800px;min-width:0}

/* Blocks */
.block{padding:8px 0 48px;scroll-margin-top:calc(var(--header-h) + 16px)}
.block+.block{padding-top:48px;border-top:1px solid var(--line)}
.block-num{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;color:#a0664a}
.block h2{margin:4px 0 18px;font-size:clamp(24px,2.6vw,30px);line-height:1.45;letter-spacing:-.01em}
.block h3{font-size:19px;line-height:1.5;margin:32px 0 12px}
.block p{margin:0 0 14px;font-size:16.5px;line-height:1.95}
.block strong{color:#4a3027}
.note{padding:12px 16px;background:#fbf3ea;border-radius:8px;font-size:15px!important;line-height:1.85!important;color:var(--muted)}
dfn{font-style:normal;font-weight:750;color:var(--ink)}

/* Fig 1: chain */
.chain{margin:24px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.chain-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.chain-step{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;border-radius:12px;background:var(--cream)}
.chain-step:nth-child(2){background:#fbeae1}
.chain-step:nth-child(3){background:#eef0e1}
.chain-step+.chain-step::before{content:"＋";position:absolute;left:-23px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:800;color:#b8846a}
.chain-tag{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--clay)}
.chain-step strong{font-size:16px;line-height:1.5}
.chain-step>span:last-child{font-size:14px;line-height:1.7;color:var(--muted)}
.chain-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:22px;padding-top:20px;border-top:2px dashed #e2c9b6;position:relative}
.chain-result::before{content:"↓";position:absolute;top:-17px;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 10px;color:#b8846a;font-weight:800}
.chain-result-label{font-size:14px;font-weight:700;color:var(--muted)}
.chain-result-items{display:flex;flex-wrap:wrap;gap:8px}
.chain-result-items b{padding:6px 14px;border-radius:999px;background:#f4ddd2;color:#6b3626;font-size:14.5px}
figcaption{margin-top:16px;font-size:14px;line-height:1.75;color:var(--muted)}

/* Harm cards */
.harm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.harm-card{padding:16px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line);border-top:4px solid #e3b48f}
.harm-tamper{border-top-color:#d99a86}
.harm-stop{border-top-color:#b9bf98}
.harm-card p{font-size:14.5px!important;line-height:1.8!important;margin:0!important;color:var(--muted)}
.harm-card .harm-name{font-size:16.5px!important;font-weight:750;color:var(--ink);margin-bottom:6px!important}

/* Fig 2: zones */
.zones{display:grid;grid-template-columns:minmax(0,.8fr) 64px minmax(0,1fr) 84px minmax(0,1.25fr);align-items:stretch;margin:24px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.zones figcaption{grid-column:1/-1}
.zone{padding:16px;border-radius:12px;min-width:0}
.zone-net{background:#f3efe9;border:1px dashed #cdbfb1}
.zone-web{background:var(--cream)}
.zone-office{background:#eef0e1}
.zone-label{margin:0 0 6px!important;font-size:15px!important;font-weight:750;line-height:1.5!important}
.zone-body{margin:0!important;font-size:14px!important;line-height:1.7!important;color:var(--muted)}
.zone-sub{margin:10px 0 0!important;font-size:12.5px!important;line-height:1.65!important;color:var(--muted)}
.zone-layers{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.zone-layers li{padding:8px 10px;border-radius:8px;background:var(--paper);border-left:3px solid #b9bf98}
.zone-layers b,.zone-layers span{display:block}
.zone-layers b{font-size:13.5px;line-height:1.5}
.zone-layers span{font-size:12.5px;color:var(--muted);line-height:1.5}
.zone-arrow{display:flex;align-items:center;justify-content:center;position:relative}
.zone-arrow::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:2px solid #d0a88f}
.zone-arrow::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;border-top:2px solid #d0a88f;border-right:2px solid #d0a88f;transform:translateY(-50%) rotate(45deg);margin-top:0}
.zone-arrow span{position:relative;z-index:1;transform:translateY(-30px);font-size:12px;line-height:1.5;text-align:center;color:var(--muted);font-weight:700}
.zone-arrow-gate::before{border-top-style:dashed}

/* Two col */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 16px}
.col-card{padding:18px 20px;border-radius:12px;background:#eef0e1}
.col-card-warn{background:#fbeae1}
.col-card-inner{background:var(--cream)}
.block .col-title{margin:0 0 8px;font-size:16px}
.col-card ul{margin:0;padding-left:1.2em;font-size:15px;line-height:1.85;color:#4d3d35}
.col-card li+li{margin-top:4px}

/* Evidence details */
.evidence{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.evidence summary{cursor:pointer;padding:12px 16px;font-size:14.5px;font-weight:700;color:var(--clay);list-style:none;display:flex;align-items:center;gap:8px}
.evidence summary::-webkit-details-marker{display:none}
.evidence summary::before{content:"＋";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f5e3d6;font-size:13px}
.evidence[open] summary::before{content:"−"}
.evidence summary:focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:8px}
.evidence-body{padding:0 18px 14px;border-top:1px solid var(--line)}
.evidence-body p,.evidence-body li{font-size:14.5px!important;line-height:1.85!important;color:#4d3d35}
.evidence-body p{margin:12px 0 0!important}
.evidence-body ul{margin:12px 0 0;padding-left:1.2em}
.evidence-body a{color:var(--clay);text-underline-offset:3px}
.evidence-src{color:var(--muted)!important}

/* Entry map */
.entry-map{margin:20px 0 28px;padding:20px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.entry-map-site{padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff4e6,#fdeee6);border:1px solid #efd9c8}
.entry-map-title{margin:0 0 12px!important;font-size:14px!important;font-weight:750;color:var(--clay)}
.entry-map-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.entry-map-list a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:10px;background:var(--paper);border:1px solid #ecdccf;text-decoration:none;font-size:15px;font-weight:700}
.entry-map-list a:hover{border-color:#cfaa96;background:#fffaf4}
.entry-map-list span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--clay);color:var(--paper);font-size:13px}

/* Entry article */
.entry{margin-top:24px;padding:24px;border-radius:16px;background:var(--paper);border:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 16px)}
.entry-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.entry-num{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--clay);color:var(--paper);font-weight:800}
.block .entry-head h3{margin:0;font-size:21px}
.entry-steps{margin:0;display:grid;gap:0}
.step{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid #f0e5db}
.step dt{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:750;color:var(--clay);line-height:1.9}
.step dt::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:#e3b48f}
.step-risk dt::before{background:#d99a86}
.step-why dt::before{background:#c9b48a}
.step-who dt::before{background:#a8b086}
.step dd{margin:0;font-size:16px;line-height:1.9}
.step-who dd{padding:10px 14px;margin:-6px 0;border-radius:8px;background:#f2f3e7}

/* Callout */
.callout{padding:20px 22px;border-radius:12px;background:var(--cream)}
.callout-title{font-weight:750;font-size:15px!important;margin-bottom:10px!important}
.rank-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.rank-list li{display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--paper);border-radius:8px;font-size:15.5px}
.rank-list span{flex:none;min-width:3em;font-weight:800;color:var(--clay);font-size:14px}
.callout-note{margin:10px 0 0!important;font-size:13.5px!important;color:var(--muted)}
.callout-note a{color:var(--clay)}

/* Roles */
.roles{display:grid;gap:10px;margin:8px 0 20px;padding:0;list-style:none}
.role{display:flex;gap:16px;padding:18px 20px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.role-tag{display:grid;place-items:center;flex:none;width:40px;height:40px;margin:0!important;border-radius:10px;background:#f5e3d6;color:var(--clay);font-weight:800;font-size:16px!important}
.block .role h3{margin:0 0 4px;font-size:17px}
.role p{font-size:15px!important;line-height:1.85!important;margin:0!important;color:#4d3d35}
.caution{padding:18px 20px;border-radius:12px;background:#fbeae1;border:1px solid #efcdbd}
.caution-title{margin:0 0 6px!important;font-weight:750;font-size:15.5px!important;color:#6b3626}
.caution ul{margin:0;padding-left:1.2em;font-size:15px;line-height:1.85}
.caution li+li{margin-top:6px}

/* Glossary */
.glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.glossary div{padding:14px 16px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.glossary dt{font-weight:750;font-size:15.5px}
.glossary dd{margin:4px 0 0;font-size:14.5px;line-height:1.8;color:var(--muted)}

/* Sources */
.sources{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.sources li{padding:16px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 16px)}
.sources p{margin:0!important;font-size:14px!important;line-height:1.8!important;color:var(--muted)}
.sources .src-name{font-size:16px!important;font-weight:750;color:var(--ink)}
.sources .src-url{overflow-wrap:anywhere}
.sources a{color:var(--clay);text-underline-offset:3px}
.sources .src-caveat{margin-top:6px!important;padding-top:6px!important;border-top:1px dashed var(--line);font-size:13.5px!important}

/* Pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;padding-top:32px;border-top:1px solid var(--line)}
.pager a,.pager span{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:15.5px;text-decoration:none;line-height:1.6}
.pager small{font-size:12.5px;font-weight:700;color:var(--muted)}
.pager a:hover{border-color:#cfaa96}
.pager-next{text-align:right;color:var(--muted)}

/* Tablet */
@media (max-width:960px){
  .br-desk{display:none}
  .article-layout{grid-template-columns:1fr;gap:28px;padding-top:32px}
  .toc{position:static}
  .toc ol{columns:2;column-gap:28px}
  .article{max-width:none}
  .zones{grid-template-columns:1fr;gap:0}
  .zone-arrow{height:56px}
  .zone-arrow::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px solid #d0a88f}
  .zone-arrow-gate::before{border-left-style:dashed}
  .zone-arrow span{transform:none;margin-left:110px;text-align:left}
  .zone-arrow::after{left:50%;right:auto;top:auto;bottom:6px;transform:translateX(-50%) rotate(135deg)}
}

/* Phone */
@media (max-width:640px){
  .summary{padding:16px 18px}
  .summary-text{font-size:16px}
  .toc ol{columns:1}
  .block{padding-bottom:40px}
  .block+.block{padding-top:40px}
  .block p{font-size:16px}
  .chain{padding:18px}
  .chain-steps{grid-template-columns:1fr;gap:26px}
  .chain-step+.chain-step::before{left:50%;top:-22px;transform:translateX(-50%)}
  .harm-grid,.two-col,.glossary{grid-template-columns:1fr}
  .zones{padding:18px}
  .entry-map{padding:14px}
  .entry-map-site{padding:14px}
  .entry-map-list{grid-template-columns:1fr 1fr}
  .entry{padding:18px 16px}
  .step{grid-template-columns:1fr;gap:4px}
  .step-who dd{margin:0}
  .role{padding:16px;gap:12px}
  .pager{grid-template-columns:1fr}
  .pager-next{text-align:left}
}
@media (max-width:360px){
  .entry-map-list{grid-template-columns:1fr}
}

/* v2: このプロジェクトが扱う範囲 */
.scope{margin-top:20px;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.scope-title{margin:0;font-size:19px;line-height:1.5;font-weight:750}
.scope-intro{margin:6px 0 0;font-size:15.5px;line-height:1.85;color:var(--muted)}
.scope-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:16px}
.scope-card{padding:16px 18px;border-radius:12px}
.scope-in{background:var(--cream)}
.scope-out{background:#f3efe9;border:1px dashed #cdbfb1}
.scope-card-label{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;font-weight:750;color:var(--ink)}
.scope-mark{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper);font-size:13px;color:var(--clay)}
.scope-card ul{margin:0;padding-left:1.2em;font-size:15px;line-height:1.85;color:#4d3d35}
.scope-card li+li{margin-top:2px}
.scope-notes{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.scope-notes li{padding:12px 16px;border-radius:10px;background:#fbf3ea;font-size:15px;line-height:1.85;color:#4d3d35}
.scope-notes strong,.scope-card strong{color:#4a3027}
.zone-tag{display:inline-block;white-space:nowrap;margin:0 0 8px!important;padding:1px 10px;border-radius:999px;font-size:12px!important;line-height:1.7!important;font-weight:750}
.zone-tag-in{background:var(--clay);color:var(--paper)}
.zone-layers .zone-tag{display:inline-block;white-space:nowrap;margin:6px 0 0!important;font-style:normal}
.zone-tag-out{background:var(--paper);color:var(--muted);border:1px dashed #b9ae9f}
.block .scope-flag{display:inline-block;margin:-6px 0 16px;padding:2px 12px;border-radius:999px;border:1px dashed #b9ae9f;background:var(--paper);font-size:13px;line-height:1.7;font-weight:700;color:var(--muted)}
@media (max-width:640px){
  .scope{padding:18px 16px}
  .scope-grid{grid-template-columns:1fr}
}

/* v3: 図1を「3つの段階」の整理に変更（「＋」＝条件の重なり を廃止） */
.chain-step+.chain-step::before{content:"→";font-size:17px}
.chain-note{position:relative;margin:22px 0 0!important;padding:14px 18px;border-radius:10px;background:#fbeae1;border:1px solid #efcdbd;font-size:15px!important;line-height:1.85!important;color:#4d3d35}
.chain-note strong{display:block;margin-bottom:2px;color:#6b3626}

/* v3: 図2 公開Webサーバーと管理環境を分けて表示 */
.zone-stack{display:flex;flex-direction:column;gap:0;min-width:0}
.zone-stack .zone{flex:1}
.zone-admin{background:#fbeae1}
.zone-link{position:relative;margin:0!important;padding:14px 0;text-align:center;line-height:1.4!important}
.zone-link::before{content:"";position:absolute;left:50%;top:2px;bottom:2px;border-left:2px dotted #d0a88f}
.zone-link span{position:relative;z-index:1;padding:0 8px;background:var(--paper);font-size:12px;font-weight:700;color:var(--muted)}
.zone-tag-part{background:var(--paper);color:var(--clay);border:1px solid #cfaa96}

/* v3: 「詳しく」欄の入れ子リスト（関連するリスク分類の例） */
.evidence-body ul ul{margin:4px 0 2px;padding-left:1.1em;list-style:"– "}
.evidence-body ul ul li{font-size:14px!important;line-height:1.8!important}

@media (max-width:640px){
  .chain-step+.chain-step::before{content:"↓"}
}