@layer components {
  .rules-page { max-width: 640px; }

  .rules-intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-600);
    margin-bottom: var(--s6);
  }

  .rules-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s5);
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    margin-bottom: var(--s6);
  }
  .rules-link-content {
    display: flex;
    align-items: center;
    gap: var(--s4);
  }
  .rules-link-icon { width: 28px; height: 28px; color: var(--ink-400); flex-shrink: 0; }
  .rules-link-title { font-weight: 600; font-size: 15px; color: var(--ink-800); }
  .rules-link-desc { font-size: 13px; color: var(--ink-500); margin-top: 2px; }

  .rules-agreement-box {
    padding: var(--s5);
    background: var(--forest-50);
    border: 1px solid var(--forest-200);
    border-radius: var(--r-md);
  }
  .rules-agreement-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: var(--s4);
  }

  @media (max-width: 768px) {
    .rules-link-card { padding: var(--s4); }

    .rules-agreement-box { padding: var(--s4); }
  }

  @media (max-width: 480px) {
    .rules-link-card {
      flex-direction: column;
      align-items: flex-start;
      padding: var(--s3);
    }

    .rules-agreement-box { padding: var(--s3); }
  }
}