@charset "utf-8";
/* ============================================================
   chugui.css —— 「丈夫出轨」与「婚外情处理」两个服务页专属模块
   依赖站内已有 /skin/css/column-base.css（复用页头/Hero/面包屑/页脚/悬浮条/吸底条）
   写法：移动优先，基础样式面向手机，min-width 640 / 900 / 1100 向上增强
   · .pg-a 丈夫出轨 —— 分诊式：处境切换 / 事实对照 / 决策矩阵 / 72 小时清单 / 话术卡
   · .pg-b 婚外情处理 —— 路线图式：路线对比表 / 五节点流程 / 谈判原则 / 边界清单 / 分支走向
   ============================================================ */

/* ============================================================
   A 页主题：靛蓝 + 朱砂（"止血与判断"的气质）
   ============================================================ */
.cp-page--chugui{
  --ink:#1b2743; --ink-2:#2c3c60; --ink-deep:#0b1226;
  --accent:#b03a2e; --accent-2:#cf6a4d; --accent-deep:#7d241c;
  --gold:#c8a45c; --bg:#f6f3ee; --bg-2:#f2ece2; --edge:#e5dccd; --chip:#fbe6e1;
  --muted-2:#636871;
}

/* ---------- A1. 处境切换（纯 CSS 单选） ---------- */
.pick__radio{position:absolute;opacity:0;pointer-events:none}
.cp-crumb__sep{color:var(--muted-2)}
.pick__tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:none}
.pick__tabs::-webkit-scrollbar{display:none}
.pick__tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;
  background:#fff;border:1px solid var(--edge);box-shadow:0 4px 0 var(--edge);cursor:pointer;user-select:none;
  font-size:14.5px;font-weight:700;color:var(--muted);transition:.2s}
.pick__tab i{font-style:normal;font-family:Georgia,serif;font-size:12px;color:var(--accent)}
.pick__panel{display:none}
#s1:checked ~ .pick__tabs .pick__tab[for="s1"],
#s2:checked ~ .pick__tabs .pick__tab[for="s2"],
#s3:checked ~ .pick__tabs .pick__tab[for="s3"]{
  color:#fff;background:linear-gradient(180deg,var(--ink-2),var(--ink));border-color:transparent;box-shadow:0 4px 0 var(--ink-deep)}
#s1:checked ~ .pick__tabs .pick__tab[for="s1"] i,
#s2:checked ~ .pick__tabs .pick__tab[for="s2"] i,
#s3:checked ~ .pick__tabs .pick__tab[for="s3"] i{color:var(--gold)}
#s1:checked ~ .pick__panels .pick__panel:nth-child(1),
#s2:checked ~ .pick__panels .pick__panel:nth-child(2),
#s3:checked ~ .pick__panels .pick__panel:nth-child(3){display:block}
.pick__panel{border-radius:22px;padding:20px 18px;background:#fff;border:1px solid var(--edge);box-shadow:0 8px 0 var(--edge)}
.pick__h{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;color:var(--ink)}
.pick__h span{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-size:14px;box-shadow:0 3px 0 var(--accent-deep)}
.pick__p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.8}
.pick__grid{display:grid;gap:10px;margin-top:14px}
.pick__box{padding:14px 15px;border-radius:14px}
.pick__box b{display:block;font-size:12px;letter-spacing:.06em;margin-bottom:7px}
.pick__box li{position:relative;padding-left:15px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.pick__box li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:1px}
.pick__do{background:#f1f6f3}
.pick__do b{color:#2f6b53}
.pick__do li::before{background:#2f6b53}
.pick__dont{background:#fdf1ef}
.pick__dont b{color:var(--accent)}
.pick__dont li::before{background:var(--accent)}
.pick__next{margin-top:14px;font-size:13.5px;color:var(--ink-2);padding:11px 14px;border-radius:12px;
  background:linear-gradient(180deg,#fbf7ef,#fff);border-left:3px solid var(--gold)}
.pick__next b{color:var(--gold)}

/* ---------- A2. 事实与猜测 对照 ---------- */
.fg{display:grid;gap:10px}
.fg__row{display:grid;grid-template-columns:1fr;border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:#fff}
.fg__c{padding:13px 15px;font-size:14px;line-height:1.8}
.fg__c--fact{background:#f1f6f3;color:var(--ink)}
.fg__c--guess{background:#fdf1ef;color:#8a3b31}
.fg__c em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;margin-bottom:4px}
.fg__c--fact em{color:#2f6b53}
.fg__c--guess em{color:#7d3128}

/* ---------- A3. 决策矩阵 ---------- */
.mx{display:grid;grid-template-columns:1fr;gap:10px}
.mx__i{position:relative;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--edge);box-shadow:0 6px 0 var(--edge)}
.mx__i span{font-size:11.5px;letter-spacing:.1em;color:var(--muted-2)}
.mx__i b{display:block;margin-top:6px;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.5}
.mx__i p{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.75}
.mx__i--key{background:linear-gradient(165deg,#fff,#f9f0e4);border-color:rgba(176,58,46,.28)}
.mx__i--key b{color:var(--accent-deep)}

/* ---------- A4. 72 小时清单（可勾选） ---------- */
.ck{display:grid;gap:8px}
.ck__i{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:14px;background:#fff;
  border:1px solid var(--edge);cursor:pointer;transition:.18s}
.ck__i input{position:absolute;opacity:0;pointer-events:none}
.ck__b{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:7px;border:2px solid var(--edge);
  display:flex;align-items:center;justify-content:center;transition:.18s}
.ck__b::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);opacity:0;margin-top:-2px}
.ck__i input:checked + .ck__b{background:var(--ink);border-color:var(--ink)}
.ck__i input:checked + .ck__b::after{opacity:1}
.ck__i:has(input:checked){background:#f4f7f3}
.ck__t{font-size:14px;line-height:1.7;color:var(--ink)}
.ck__t small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.ck__bar{margin-top:14px;height:8px;border-radius:999px;background:var(--edge);overflow:hidden}
.ck__bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .3s}
.ck__sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}
.ck__sum b{font-family:var(--serif);font-size:22px;color:var(--ink)}

/* ---------- A5. 话术卡 ---------- */
.say{display:grid;gap:10px}
.say__i{border-radius:16px;background:#fff;border:1px solid var(--edge);overflow:hidden}
.say__i summary{display:flex;gap:12px;align-items:flex-start;padding:16px;cursor:pointer;list-style:none;min-height:52px}
.say__i summary::-webkit-details-marker{display:none}
.say__i summary b{flex:1 1 auto;font-size:14.5px;color:var(--ink);line-height:1.6}
.say__i summary i{flex:0 0 auto;position:relative;width:15px;height:15px;margin-top:5px}
.say__i summary i::before,.say__i summary i::after{content:"";position:absolute;background:var(--accent);transition:.2s}
.say__i summary i::before{left:0;top:7px;width:15px;height:1.5px}
.say__i summary i::after{left:7px;top:0;width:1.5px;height:15px}
.say__i[open] summary i::after{transform:rotate(90deg)}
.say__b{padding:0 16px 16px}
.say__q{font-family:var(--serif);font-size:16px;line-height:1.7;color:var(--ink);padding:12px 14px;border-radius:12px;
  background:linear-gradient(180deg,#fbf7ef,#fff);border-left:3px solid var(--gold)}
.say__why{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.85}
.say__why b{color:var(--ink-2)}

/* ============================================================
   B 页主题：墨绿 + 铜金（"处理与收尾"的气质）
   ============================================================ */
.cp-page--chuli{
  --ink:#14332a; --ink-2:#1f4d3f; --ink-deep:#0a1f19;
  --accent:#a8792c; --accent-2:#c9a05a; --accent-deep:#6f4d15;
  --gold:#d8bb84; --bg:#f5f4ee; --bg-2:#eef1e8; --edge:#dee3d4; --chip:#f5ecd8;
  --muted-2:#636871;
}

/* ---------- B1. 三条路线对比表（移动端转卡片） ---------- */
.route{display:grid;gap:12px}
.route__c{position:relative;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--edge);box-shadow:0 6px 0 var(--edge)}
.route__c h3{font-family:var(--serif);font-size:17px;color:var(--ink);display:flex;align-items:center;gap:9px}
.route__c h3 i{font-style:normal;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--ink-2),var(--ink));box-shadow:0 3px 0 var(--ink-deep)}
.route__c:nth-child(2) h3 i{background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 3px 0 var(--accent-deep)}
.route__c dl{margin-top:12px;display:grid;gap:8px}
.route__c dt{font-size:11.5px;letter-spacing:.12em;color:var(--muted-2)}
.route__c dd{font-size:13.5px;color:var(--ink-2);line-height:1.8}
.route__c--key{background:linear-gradient(165deg,#fff,#f3f7ee);border-color:rgba(31,77,63,.3)}

/* ---------- B2. 五节点流程 ---------- */
.rail{position:relative;display:grid;gap:0}
.rail__i{position:relative;display:flex;gap:14px;padding-bottom:20px}
.rail__i:last-child{padding-bottom:0}
.rail__i::before{content:"";position:absolute;left:19px;top:44px;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--edge) 0 7px,transparent 7px 14px)}
.rail__i:last-child::before{display:none}
.rail__n{position:relative;z-index:1;flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));box-shadow:0 4px 0 var(--ink-deep),0 10px 18px -10px rgba(10,31,25,.7)}
.rail__b{flex:1 1 auto;padding-top:2px}
.rail__b b{display:block;font-family:var(--serif);font-size:16.5px;color:var(--ink)}
.rail__b p{margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.8}
.rail__m{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rail__m span{padding:3px 9px;border-radius:999px;font-size:11.5px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--edge)}

/* ---------- B3. 谈判原则 ---------- */
.rule{display:grid;gap:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--edge)}
.rule__i{display:flex;gap:14px;padding:15px 16px;border-bottom:1px solid var(--edge)}
.rule__i:last-child{border-bottom:0}
.rule__i em{flex:0 0 auto;font-style:normal;font-family:Georgia,serif;font-size:19px;color:var(--accent-deep);width:30px;line-height:1.3}
.rule__i b{display:block;font-size:14.5px;color:var(--ink)}
.rule__i p{margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.8}

/* ---------- B4. 边界清单（两条分支） ---------- */
.edge2{display:grid;gap:10px}
.edge2__c{padding:16px;border-radius:16px}
.edge2__c h3{font-family:var(--serif);font-size:16.5px;display:flex;align-items:center;gap:8px}
.edge2__c h3 i{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:13px;color:#fff}
.edge2__c ul{margin-top:10px;display:grid;gap:7px}
.edge2__c li{position:relative;padding-left:15px;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.edge2__c li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:1px}
.edge2__c--ok{background:#f1f6f2;border:1px solid #d5e6db}
.edge2__c--ok h3 i{background:#2f6b53}
.edge2__c--ok li::before{background:#2f6b53}
.edge2__c--no{background:#fdf3f1;border:1px solid #f0d8d2}
.edge2__c--no h3 i{background:#a83a2c}
.edge2__c--no li::before{background:#a83a2c}

/* ---------- B5. 分支走向 ---------- */
.fork{display:grid;gap:12px}
.fork__c{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--edge);box-shadow:0 6px 0 var(--edge)}
.fork__c b{font-family:var(--serif);font-size:17px;color:var(--ink);display:block}
.fork__c p{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.8}
.fork__c ul{margin-top:10px;display:grid;gap:6px}
.fork__c li{position:relative;padding-left:15px;font-size:13.5px;color:var(--ink-2);line-height:1.8}
.fork__c li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.fork__c--a{background:linear-gradient(165deg,#fff,#f5f9f3)}
.fork__c--b{background:linear-gradient(165deg,#fff,#fbf6ea)}
.fork__c h3{margin:0 0 4px;font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--muted-2);font-weight:400}

/* ---------- 公共：小标题与提示 ---------- */
.mini-h{display:flex;align-items:center;gap:9px;margin:22px 0 12px;font-family:var(--serif);font-size:17px;color:var(--ink)}
.mini-h::before{content:"";width:20px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--gold))}
.tipbox{margin-top:14px;padding:13px 15px;border-radius:12px;font-size:12.5px;line-height:1.9;
  background:#fdf7ec;border:1px dashed #e8d8b6;color:#7c6329}

/* ============================================================
   断点增强
   ============================================================ */
@media (min-width:640px){
  .pick__grid{grid-template-columns:1fr 1fr}
  .fg__row{grid-template-columns:1fr 1fr}
  .fg__c--fact{border-right:1px solid var(--edge)}
  .mx{grid-template-columns:1fr 1fr}
  .route{grid-template-columns:repeat(2,minmax(0,1fr))}
  .edge2{grid-template-columns:1fr 1fr}
  .fork{grid-template-columns:1fr 1fr}
  .say{grid-template-columns:1fr}
}
@media (min-width:900px){
  .pick__tabs{overflow:visible}
  .pick__panel{padding:24px 22px}
  .mx{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .route{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .rail__i{display:block;padding-bottom:0}
  .rail__i::before{left:10px;top:52px;right:-16px;bottom:auto;width:auto;height:2px;
    background:repeating-linear-gradient(90deg,var(--edge) 0 7px,transparent 7px 14px)}
  .rail__i:last-child::before{display:block;right:0}
  .rail__n{margin-bottom:12px}
  .rail__b{padding-top:0}
  .rule__i em{font-size:22px;width:34px}
  .edge2{gap:14px}
  .fork{gap:14px}
  .ck{grid-template-columns:1fr 1fr}
  .say{grid-template-columns:1fr 1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
}

/* ---------- 图标尺寸修正：内联 <use> 需显式尺寸 ---------- */
.cp-btn svg,.cp-mcta svg,.cp-fixbar__item svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cp-btn--ghost svg{stroke:var(--ink)}
.cp-mcta a svg,.cp-mcta button svg{width:16px;height:16px}
.cp-mcta button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* 站内基础样式覆盖后的小修 */
.cp-hero__actions{align-items:center}
.cp-page .cp-btn{display:inline-flex}