/* ===== 相性ペアページ固有(sign.css と同系のトーン) ===== */
:root{--wrap:820px}
.brandrow{padding:22px 0}
main{padding:30px 0 20px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-dim);margin:0 0 14px}
.crumb .sep{opacity:.5}
.crumb a{color:var(--ink-dim)} .crumb a:hover{color:var(--primary)}
h1{font-size:clamp(26px,5.4vw,38px);font-weight:800;margin:0 0 .15em;display:flex;align-items:center;gap:.3em;flex-wrap:wrap}
.hglyph{color:var(--primary);font-size:.75em;letter-spacing:.1em}
.sub{color:var(--ink-dim);font-size:15px;margin:0 0 26px}

.block{margin:0 0 34px}
.block h2{font-size:20px;font-weight:700;margin:0 0 12px}
.block h3{font-size:15px;font-weight:700;margin:18px 0 10px}
.block p{margin:0 0 14px;line-height:1.9}
.block .note{font-size:13px;color:var(--ink-dim);line-height:1.8}

/* スコアバー */
.scores{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.score{display:grid;grid-template-columns:3.2em 1fr 2.2em;align-items:center;gap:12px}
.score span{font-size:13.5px;color:var(--ink-dim)}
.score b{font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.sbar{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:6px;background:var(--primary)}

/* 3軸リスト */
.axes{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:12px}
.axes li{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 18px;box-shadow:var(--elev)}
.axes li b{display:block;font-size:14.5px;margin-bottom:4px}
.axes li span{font-size:13.5px;color:var(--ink-dim);line-height:1.8}

/* 強み/注意(2カード) */
.swgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.swcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;box-shadow:var(--elev)}
.swcard h3{font-size:13.5px;font-weight:700;margin:0 0 8px}
.swcard.good h3{color:var(--cosmic)} .swcard.care h3{color:var(--econ)}
.swcard p{font-size:13.5px;color:var(--ink-dim);line-height:1.8;margin:0}

.matchlist{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:10px}
.matchlist a{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:9px 16px;font-weight:600;color:var(--ink)}
.matchlist a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}

.signgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.signgrid a{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 12px;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink)}
.signgrid a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}

footer{border-top:1px solid var(--border);margin-top:30px;padding:24px 0 48px;
  color:var(--ink-dim);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:520px){.swgrid{grid-template-columns:1fr}}