/* ============================================================
   Clash中文网 · 客户端对比页专属样式
   对照总表注记 / 逐款点评双栏条目 / 场景与结论区。
   ============================================================ */

/* 区块间距:只声明纵向,与 .wrap 同挂时不清横向 */
.cmp-sec + .cmp-sec{margin-top:76px}

/* 总表下方图注小楷 */
.cmp-note{margin-top:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cmp-note a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.cmp-note a:hover{color:var(--moon);border-bottom-color:var(--moon)}

/* ---------- 逐款点评:左侧档案栏 + 右侧评注 ---------- */
.cmp-list{display:flex;flex-direction:column;gap:18px}
.cmp-item{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  background:var(--silk-panel);border:1px solid var(--line);
}
.cmp-item:hover{border-color:var(--gold-soft)}
.cmp-side{
  padding:24px 24px 26px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.cmp-name{font-size:19px;letter-spacing:.06em;line-height:1.5}
.cmp-en{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--moon-dim)}
.cmp-badges{display:flex;gap:8px;flex-wrap:wrap}
.cmp-facts{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--moon-line-soft);padding-top:14px}
.cmp-facts span{
  font-size:12px;letter-spacing:.04em;color:var(--moon-dim);
  display:flex;gap:10px;line-height:1.7;
}
.cmp-facts b{
  font-weight:400;flex:none;width:2.4em;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--gold);
  padding-top:.35em;
}
.cmp-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.14em;color:var(--moon-dim);
}
.cmp-link:hover{color:var(--moon)}
.cmp-link .arr{font-size:11px;opacity:.75}
.cmp-body{padding:26px 30px;min-width:0}
.cmp-body p{font-size:13.5px;line-height:2.05;color:var(--moon-dim);letter-spacing:.02em;margin-bottom:12px}
.cmp-body p:last-child{margin-bottom:0}
.cmp-body strong{color:var(--gold);font-weight:600}
.cmp-body a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.cmp-body a:hover{color:var(--moon);border-bottom-color:var(--moon)}

/* ---------- 场景选型:callout 双列 ---------- */
.cmp-scenes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-scenes .callout{margin-bottom:0}

/* ---------- 结论面板 ---------- */
.cmp-final{display:flex;align-items:center;gap:34px;flex-wrap:wrap;padding:36px 38px}
.cmp-final-main{flex:1;min-width:260px}
.cmp-final-main .sec-title{font-size:clamp(24px,2.8vw,32px)}
.cmp-final-main .sec-desc{margin-bottom:0}
.cmp-final-actions{display:flex;flex-direction:column;gap:14px;flex:none}
.cmp-final-actions .btn-primary,.cmp-final-actions .btn-secondary{justify-content:center;text-align:center}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .cmp-item{grid-template-columns:1fr}
  .cmp-side{border-right:none;border-bottom:1px solid var(--line)}
  .cmp-link{margin-top:4px}
  .cmp-final{padding:30px 26px}
}
@media (max-width:640px){
  .cmp-sec + .cmp-sec{margin-top:56px}
  .cmp-scenes{grid-template-columns:1fr}
  .cmp-final-actions{width:100%}
  .cmp-final-actions .btn-primary,.cmp-final-actions .btn-secondary{width:100%}
}