/* =========================================================================
   相性診断 — 追加スタイル（ライトテーマ style.css の上に重ねる）
   ========================================================================= */

/* ===== 2人入力フォーム ===== */
/* ヒーローのチップ群とフォームの間にゆとりを */
.compat-form{ margin-top:clamp(26px,7vw,40px); }

.compat-form .person{
  border:1px solid var(--c-line);
  border-radius:14px;
  padding:clamp(22px,5vw,28px) clamp(16px,4vw,22px) clamp(24px,5vw,28px);
  margin:0;
  background:rgba(255,252,251,.6);
}
.person__label{ padding:0; margin-bottom:clamp(18px,4vw,22px); }
/* 各項目にゆとりを持たせる */
.compat-form .person .field{ margin-bottom:clamp(20px,5vw,26px); }
.compat-form .person .field:last-child{ margin-bottom:0; }
.compat-form .person .field > label{ margin-bottom:12px; }
/* フォームタイトルと1人目の間 */
.compat-form .form-title{ margin-bottom:clamp(18px,4vw,24px); }
.compat-form .person + .person-link{ margin-block:clamp(14px,4vw,18px); }
.person__badge{
  display:inline-block;
  font-family:var(--f-sans); font-weight:800; font-size:.82rem;
  letter-spacing:.06em; color:var(--c-on-accent);
  background:linear-gradient(135deg,#c89a52,#a9762f);
  padding:5px 14px; border-radius:999px;
}
.person__badge--b{ background:linear-gradient(135deg,#b56a86,#9c3a52); }

/* 1人目と2人目をつなぐ × */
.person-link{
  display:flex; align-items:center; justify-content:center;
  margin:10px 0;
}
.person-link span{
  width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--f-serif); font-weight:800; font-size:1.1rem;
  color:var(--c-accent); background:var(--c-surface);
  border:1px solid var(--c-gold-soft); border-radius:50%;
}

/* ===== 相性結果ヘッダー ===== */
.compat-result{ padding:clamp(40px,9vw,80px) 0; align-items:flex-start; }

.cmatch{
  display:flex; align-items:stretch; justify-content:center; gap:10px;
  margin:6px 0 clamp(18px,4vw,26px);
}
.cmatch__person{
  flex:1 1 0; max-width:200px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 10px; border-radius:12px;
  background:var(--c-surface); border:1px solid var(--c-line);
}
.cmatch__photo{
  width:clamp(76px,26vw,108px); aspect-ratio:1; margin-bottom:8px;
}
.cmatch__photo img{
  width:100%; height:100%; object-fit:contain;
}
.cmatch__nick{
  font-weight:800; color:var(--c-text); font-size:.96rem;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmatch__type{ font-size:.8rem; color:var(--c-text-mute); line-height:1.4; }
.cmatch__x{
  align-self:center; font-family:var(--f-serif); font-weight:800;
  color:var(--c-accent-2); font-size:1.2rem;
}

/* ===== スコアメーター ===== */
.cscore{ text-align:center; margin-top:clamp(8px,2vw,14px); }
.cscore__tier{
  display:inline-block; font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.1rem,4.8vw,1.4rem); letter-spacing:.04em;
  padding:4px 18px; border-radius:999px; margin-bottom:6px;
}
.cscore__tier.t5{ color:#fff; background:linear-gradient(135deg,#d4533f,#9c3a32); }
.cscore__tier.t4{ color:#fff; background:linear-gradient(135deg,#c89a52,#a9762f); }
.cscore__tier.t3{ color:var(--c-on-accent); background:linear-gradient(135deg,#cdb06a,#b4924f); }
.cscore__tier.t2{ color:var(--c-accent); background:rgba(169,118,47,.12); border:1px solid var(--c-gold-soft); }
.cscore__tier.t1{ color:var(--c-text-mute); background:rgba(120,90,40,.08); border:1px solid var(--c-line); }
.cscore__tier.t0{ color:#8a5a4a; background:rgba(120,60,40,.08); border:1px solid var(--c-line); }
.cscore__num{
  font-family:var(--f-serif); font-weight:800; color:var(--c-accent-2);
  line-height:1; margin:2px 0 10px;
}
.cscore__num span{ font-size:clamp(3.2rem,16vw,4.6rem); }
.cscore__num b{ font-size:1.1rem; font-weight:700; margin-left:4px; color:var(--c-text-mute); }
.cscore__bar{
  height:10px; border-radius:999px; overflow:hidden;
  background:rgba(120,90,40,.12);
  max-width:340px; margin:0 auto;
}
.cscore__bar i{
  display:block; height:100%; width:0;
  border-radius:999px; background:linear-gradient(90deg,#c89a52,#a9762f);
}
.cscore__bar i.is-t5{ background:linear-gradient(90deg,#e0735f,#9c3a32); }
.cscore__bar i.is-t4{ background:linear-gradient(90deg,#d9a85c,#a9762f); }
.cscore__bar i.is-t0,
.cscore__bar i.is-t1{ background:linear-gradient(90deg,#b89a7a,#8a6a4a); }

/* いい点 / 注意点 セクションのアクセント */
.rsec--good .rsec__no{ color:#2f7d6b; }
.rsec--caution .rsec__no{ color:#b5392f; }

/* LINE誘導（ライト・ロック装飾なし）*/
.compat-cta{
  margin-top:clamp(22px,5vw,32px);
  padding:clamp(22px,5vw,30px) clamp(18px,4vw,26px);
  text-align:center; border-radius:16px;
  background:linear-gradient(180deg, var(--c-bg-2), var(--c-surface));
  border:1px solid var(--c-gold-soft);
}
.compat-cta__lead{
  font-family:var(--f-serif); font-weight:800;
  font-size:clamp(1.08rem,4.6vw,1.34rem); line-height:1.5;
  color:var(--c-text); margin-bottom:14px;
}
.compat-cta__lead b{ color:var(--c-accent); }
.compat-cta .btn--line{ margin-inline:auto; }

/* もう一度占う：1ボタンなので中央寄せ（デスクトップの2カラムを打ち消す）*/
.compat-result .result__actions{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; }

@media (max-width:380px){
  .cmatch{ gap:6px; }
  .cmatch__person{ padding:10px 6px; }
}