.legal-main {
  width: min(980px, calc(100% - 24px));
  margin: 24px auto 20px;
}

.legal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 4vw, 34px);
}

.legal-back {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}

.legal-back:hover {
  color: var(--text);
}

.legal-title {
  font-size: clamp(30px, 4.8vw, 52px);
  line-height: 0.98;
  margin-bottom: 8px;
}

.legal-updated {
  color: var(--muted);
  margin-bottom: 18px;
}

.legal-note {
  background: #f6f3e9;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 14px 0 18px;
}

.legal-body {
  color: #2a3832;
}

.legal-body h2 {
  font-size: clamp(20px, 3vw, 30px);
  margin: 24px 0 10px;
}

.legal-body p {
  margin: 0 0 12px;
}

.legal-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-body li {
  margin: 0 0 7px;
}

.legal-footer {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 12px auto 24px;
}

@media (max-width: 640px) {
  .legal-main {
    width: calc(100% - 14px);
    margin-top: 12px;
  }

  .legal-card {
    border-radius: 15px;
    padding: 18px 14px;
  }
}