/* ============================================================
   ng.liuxia.xin/diag/cases · 全景案例集「案例地图」视觉
   二次加工（D5）：每个类型不是长篇大论，是一张"案例地图"——
   报头速览 → 六步推理导线 → 目标格子 → 过渡路径 → 关键风险
   色板沿用 NG：墨绿扛结构、琥珀做判断/洞察
   ============================================================ */

.diag-scan{
  max-width:900px; margin:0 auto; padding:48px 24px 80px;
  position:relative;
}

/* ---------- 报头：类型速览卡 ---------- */
.case-head{
  position:relative; background:var(--ng-cream-deep);
  border:1px solid var(--ng-line); border-radius:16px;
  padding:32px 30px; margin-bottom:44px; overflow:hidden;
}
.case-head .ch-tag{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:10px; letter-spacing:.26em;
  color:var(--ng-amber-deep); margin-bottom:12px; display:block;
}
.case-head h1{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:clamp(26px,5vw,38px);
  color:var(--ng-fg); margin:0 0 14px; font-weight:700; line-height:1.25;
}
.case-head .ch-one{
  font-size:16.5px; line-height:1.8; color:var(--ng-fg); margin:0 0 20px; max-width:620px;
}
.case-head .ch-one b{ color:var(--ng-amber-deep); }

/* 速览五指标（核心资本/当前困局/目标路径/关键轴/周期） */
.ch-meta{
  border-top:1px dashed var(--ng-line); padding-top:18px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
}
.ch-meta .m-item{ }
.ch-meta .m-item .m-k{
  font-size:10.5px; letter-spacing:.16em; color:var(--ng-fg-muted); font-weight:700; display:block; margin-bottom:6px;
}
.ch-meta .m-item .m-v{ font-size:14px; line-height:1.7; color:var(--ng-fg); }
.ch-meta .m-item .m-v b{ color:var(--ng-green-deep); }

/* ---------- 六步推理导线 ---------- */
.case-sec{ margin:0 0 54px; }
.case-sec .cs-kicker{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:10px; letter-spacing:.26em;
  color:var(--ng-fg-muted); margin-bottom:8px;
}
.case-sec h2{
  font-family:"Songti SC","STSong","SimSun",serif; font-size:24px; color:var(--ng-fg);
  margin:0 0 8px; font-weight:700;
}
.case-sec h2 .amber{ color:var(--ng-amber-deep); }
.case-sec .cs-sub{ font-size:15px; color:var(--ng-fg-muted); margin:0 0 26px; line-height:1.8; }

/* 六步导线：纵向 step 卡片，左刻度 */
.step-chain{ position:relative; padding-left:34px; }
.step-chain::before{
  content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px;
  background:repeating-linear-gradient(var(--ng-line) 0 6px, transparent 6px 12px);
}
.step{
  position:relative; margin-bottom:16px; padding:18px 20px;
  background:#fff; border:1px solid var(--ng-line); border-radius:12px;
}
.step .st-no{
  position:absolute; left:-31px; top:18px; width:28px; height:28px; border-radius:50%;
  background:var(--ng-green); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:"SFMono-Regular","Consolas",monospace;
}
.step:nth-child(6n) .st-no{ background:var(--ng-amber); }
.step h3{
  font-size:15.5px; color:var(--ng-green-deep); margin:0 0 8px; font-weight:700;
}
.step h3 .s-tag{ color:var(--ng-fg-muted); font-weight:400; font-size:12.5px; }
.step p{ margin:0 0 8px; font-size:14.5px; line-height:1.85; color:var(--ng-fg); }
.step p:last-child{ margin-bottom:0; }
.step p b{ color:var(--ng-fg); }
.step ul{ margin:6px 0 0; padding-left:18px; }
.step li{ font-size:14px; line-height:1.8; margin:4px 0; }
.step li b{ color:var(--ng-green-deep); }

/* 导线内小代码块（轴/目标格子） */
.step .mono{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:12.5px; line-height:1.9;
  background:var(--ng-cream-deep); border:1px solid var(--ng-line); border-radius:8px;
  padding:12px 14px; margin:8px 0 0; white-space:pre-line; color:var(--ng-fg);
}

/* 洞察句（每类收尾） */
.insight{
  margin-top:6px; padding:20px 24px; background:var(--ng-green-deep); color:#fff;
  border-radius:14px; font-size:15.5px; line-height:1.85; position:relative;
}
.insight::before{
  content:"类型洞察"; position:absolute; top:-10px; left:20px;
  font-family:"SFMono-Regular","Consolas",monospace; font-size:9.5px; letter-spacing:.22em;
  background:var(--ng-amber); color:#fff; padding:3px 10px; border-radius:5px;
}
.insight b{ color:var(--ng-amber); }

/* 对照总表导航卡（type 页尾 → 其他类型） */
.type-nav{
  margin-top:44px; padding:22px; background:var(--ng-green-soft); border-radius:14px;
}
.type-nav .tn-t{ font-size:12px; letter-spacing:.18em; color:var(--ng-green-deep); font-weight:700; margin-bottom:14px; }
.type-nav .tn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.type-nav a{
  display:block; font-size:13.5px; color:var(--ng-green-deep); text-decoration:none;
  padding:9px 12px; background:#fff; border:1px solid var(--ng-line); border-radius:9px;
  transition:all .15s;
}
.type-nav a:hover{ border-color:var(--ng-amber); color:var(--ng-amber-deep); transform:translateY(-1px); }
.type-nav a.on{ background:var(--ng-green); color:#fff; border-color:var(--ng-green); }

/* 案例集封面：八类型总览网格 */
.type-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.type-card{
  display:block; padding:22px 20px; background:#fff; border:1px solid var(--ng-line);
  border-radius:13px; text-decoration:none; color:var(--ng-fg); position:relative;
  transition:transform .18s ease-out, box-shadow .18s ease-out, border-color .18s;
}
.type-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(31,69,51,.09); border-color:var(--ng-green); }
.type-card .tc-tag{
  font-family:"SFMono-Regular","Consolas",monospace; font-size:9.5px; letter-spacing:.2em;
  color:var(--ng-amber-deep); display:block; margin-bottom:10px;
}
.type-card h3{ font-family:"Songti SC","STSong","SimSun",serif; font-size:19px; color:var(--ng-fg); margin:0 0 8px; }
.type-card .tc-one{ font-size:13px; line-height:1.7; color:var(--ng-fg-muted); margin:0 0 14px; }
.type-card .tc-foot{ font-size:11.5px; color:var(--ng-green-deep); font-weight:700; letter-spacing:.05em; }

/* 进场动效（CSS-only） */
.srv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease-out, transform .6s ease-out; }
.srv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .srv{ opacity:1; transform:none; transition:none; } }

/* 移动端 */
@media(max-width:640px){
  .diag-scan{ padding:34px 16px 56px; }
  .case-head{ padding:24px 20px; }
  .step-chain{ padding-left:30px; }
  .step .st-no{ left:-27px; width:25px; height:25px; font-size:11px; }
}