@charset "utf-8";
/* ============================================================
   liangxing.css —— 两性关系栏目页专属样式
   设计概念：「双视角对照」——左右分屏 / 差异对照墙 / 关系光谱
   主题色：靛蓝（--ink #22305c）+ 玫红（--accent #b83b63）
   ============================================================ */

.cp-page--liangxing {
  --ink: #22305c;
  --ink-2: #33477f;
  --ink-deep: #101a38;
  --accent: #b83b63;
  --accent-2: #d95f80;
  --accent-deep: #7d1f3d;
  --gold: #f0c26a;
  --bg: #f5f5f9;
  --bg-2: #eef0f7;
  --edge: #dfe2ee;
  --chip: #fbe4ec;
}
.cp-page--liangxing .cp-hero { background: linear-gradient(150deg, #f7f7fb 0%, #eef0f7 50%, #e7dde6 100%); }
.cp-page--liangxing .cp-hero__grid {
  background-image: linear-gradient(rgba(34, 48, 92, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 48, 92, .05) 1px, transparent 1px);
}

/* ---------- Hero 右侧：双面对照镜 ---------- */
.cp-mirror-card {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto; border-radius: 26px; background: #fff;
  border: 1px solid var(--edge); box-shadow: 0 10px 0 var(--edge), 0 30px 42px -28px rgba(34, 48, 92, .55);
  overflow: hidden;
}
.cp-mirror-card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--edge); }
.cp-mirror-card__head b { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.cp-mirror-card__head span { font-size: 12px; letter-spacing: .16em; color: var(--muted-2); }
.cp-mirror-card__cols { display: grid; grid-template-columns: 1fr 1fr; }
.cp-mirror-card__col { padding: 20px 18px 22px; }
.cp-mirror-card__col--her { background: linear-gradient(to bottom, #fdf3f6, #fff); border-right: 1px dashed var(--edge); }
.cp-mirror-card__col--him { background: linear-gradient(to bottom, #f2f5fd, #fff); }
.cp-mirror-card__col h3 { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.cp-mirror-card__col small { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .18em; color: var(--muted-2); }
.cp-mirror-card__col ul { margin-top: 14px; }
.cp-mirror-card__col li {
  position: relative; padding: 6px 0 6px 14px; font-size: 13px; line-height: 1.7; color: var(--muted);
}
.cp-mirror-card__col li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%;
}
.cp-mirror-card__col--her li::before { background: var(--accent-2); }
.cp-mirror-card__col--him li::before { background: var(--ink-2); }
.cp-mirror-card__foot {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--bg);
  font-size: 12.5px; color: var(--ink);
}
.cp-mirror-card__foot b { font-weight: 700; }

/* ---------- 模块 01：六维差异对照墙 ---------- */
.mirror { display: flex; flex-direction: column; gap: 18px; }
.mirror__row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "dim her him" "dim meet meet";
  border-radius: 22px; background: #fff; border: 1px solid var(--edge);
  box-shadow: 0 8px 0 var(--edge); overflow: hidden;
}
.mirror__dim {
  grid-area: dim; padding: 24px 20px; background: linear-gradient(to bottom, var(--bg), #fff);
  border-right: 1px solid var(--edge); position: relative;
}
.mirror__dim span { font-family: Georgia, serif; font-size: 12px; letter-spacing: .2em; color: var(--muted-2); }
.mirror__dim h3 { margin-top: 8px; font-family: var(--serif); font-size: 19px; font-weight: 900; color: var(--ink); }
.mirror__dim p { margin-top: 8px; font-size: 13px; line-height: 1.75; color: var(--muted); }
.mirror__side { padding: 24px 22px; }
.mirror__side--her { grid-area: her; background: linear-gradient(160deg, #fdf4f7, #fff 70%); border-right: 1px dashed var(--edge); }
.mirror__side--him { grid-area: him; background: linear-gradient(160deg, #f3f6fd, #fff 70%); }
.mirror__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; font-weight: 700; }
.mirror__side--her .mirror__label { color: var(--accent); }
.mirror__side--him .mirror__label { color: var(--ink-2); }
.mirror__label i { width: 16px; height: 2px; border-radius: 2px; }
.mirror__side--her .mirror__label i { background: var(--accent-2); }
.mirror__side--him .mirror__label i { background: var(--ink-2); }
.mirror__side p { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--ink); }
.mirror__meet {
  grid-area: meet; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 22px; background: var(--bg); border-top: 1px solid var(--edge);
}
.mirror__meet b { font-size: 12px; letter-spacing: .1em; color: var(--accent); }
.mirror__meet p { flex: 1 1 320px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.mirror__meet a { font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--edge); }
.mirror__meet a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 模块 02：差异从哪来 ---------- */
.origin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.origin__card {
  padding: 26px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--edge);
  box-shadow: 0 8px 0 var(--edge);
}
.origin__icon {
  width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ink-2), var(--ink)); color: #fff;
  font-size: 20px; box-shadow: 0 5px 0 var(--ink-deep);
}
.origin__card:nth-child(2) .origin__icon { background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 5px 0 var(--accent-deep); }
.origin__card h3 { margin-top: 16px; font-family: var(--serif); font-size: 19px; font-weight: 900; color: var(--ink); }
.origin__card p { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--muted); }

/* ---------- 模块 03：误解 vs 事实 ---------- */
.myth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.myth__card {
  position: relative; display: flex; flex-direction: column; gap: 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--edge); background: #fff; box-shadow: 0 8px 0 var(--edge);
}
.myth__bad, .myth__good { padding: 18px 22px 16px; }
.myth__bad { background: #fdf0f2; }
.myth__good { background: #f4f6fc; flex: 1 1 auto; }
.myth__bad b, .myth__good b { display: block; font-size: 12px; letter-spacing: .14em; margin-bottom: 6px; }
.myth__bad b { color: #b03a5b; }
.myth__good b { color: var(--ink-2); }
.myth__bad p { font-size: 15px; line-height: 1.75; color: #8c2c48; }
.myth__good p { font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.myth__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* ---------- 模块 04：关系光谱 ---------- */
.spectrum__scale { position: relative; margin: 34px 0 8px; }
.spectrum__track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #b9c1da 0%, #9aa6cc 26%, var(--accent-2) 52%, var(--ink-2) 78%, var(--ink) 100%); }
.spectrum__zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.spectrum__zones span { font-size: 12.5px; color: var(--muted); }
.spectrum__zones span:nth-child(2) { text-align: center; }
.spectrum__zones span:nth-child(3) { text-align: center; }
.spectrum__zones span:nth-child(4) { text-align: right; }
.spectrum__range { width: 100%; margin: 26px 0 0; -webkit-appearance: none; appearance: none; height: 34px; background: none; cursor: pointer; }
.spectrum__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--edge); }
.spectrum__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -11px;
  background: #fff; border: 4px solid var(--accent); box-shadow: 0 4px 10px rgba(34, 48, 92, .3);
}
.spectrum__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--edge); }
.spectrum__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
.spectrum__result { margin-top: 6px; padding: 24px 26px; border-radius: 22px; background: var(--bg); }
.spectrum__result-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.spectrum__result-top b { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.spectrum__result-top span { padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--accent); }
.spectrum__result p { margin-top: 10px; font-size: 14.5px; line-height: 1.9; color: var(--muted); }
.spectrum__result em { font-style: normal; color: var(--ink); font-weight: 700; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .mirror__row { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); }
  .origin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mirror__row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "dim" "her" "him" "meet";
  }
  .mirror__dim { border-right: 0; border-bottom: 1px solid var(--edge); padding: 20px 18px; }
  .mirror__side { padding: 18px; }
  .mirror__side--her { border-right: 0; border-bottom: 1px dashed var(--edge); }
  .mirror__meet { padding: 14px 18px; }
  .myth { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .spectrum__zones span { font-size: 11px; }
  .spectrum__result { padding: 18px; }
}