/* ─────────────── 相性ページ固有スタイル ─────────────── */
    .compat-hero { padding: 3rem 0 2rem; text-align: center; }
    .compat-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; margin-bottom: 1rem; }

    .compat-forms {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 1.5rem;
      align-items: start;
      margin-bottom: 2rem;
    }
    @media (max-width: 640px) {
      .compat-forms { grid-template-columns: 1fr; }
      .compat-vs { display: none; }
    }

    .compat-vs {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
    }
    .compat-type-label {
      display: flex; align-items: center; gap: 0.5rem; cursor: pointer; 
      padding: 0.75rem 1.5rem; border: 2px solid var(--border-subtle); 
      border-radius: 999px; background: var(--white); transition: border-color 0.2s;
    }
    .compat-type-label:has(input:checked) {
      border-color: var(--ebi);
    }

    .person-label {
      text-align: center;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: var(--text-accent);
    }

    .compat-card {
      background: var(--bg-card);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-xl);
      padding: 1.5rem;
    }

    /* スコアリング */
    .compat-score-ring {
      position: relative;
      width: 180px; height: 180px;
      margin: 0 auto 1.5rem;
    }
    .compat-score-ring svg {
      transform: rotate(-90deg);
    }
    .score-track { fill: none; stroke: var(--border); stroke-width: 12; }
    .score-fill  { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1); }
    .score-label {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .score-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; }
    .score-unit   { font-size: 0.75rem; color: var(--text-muted); }

    /* 相性詳細 */
    .compat-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 480px) {
      .compat-detail-grid { grid-template-columns: 1fr; }
    }
    .compat-detail-item {
      padding: 1rem;
      background: var(--white);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
    }
    .compat-detail-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
    .compat-detail-value { font-size: 0.95rem; font-weight: 600; }

    /* 相性バー */
    .compat-bar-wrap { margin: 1rem 0; }
    .compat-bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
    .compat-bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
    .compat-bar-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(0.4,0,0.2,1); }
    #compatResult.active { display: block !important; }