.legal-matter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1280px;
  margin: auto;
}

.legal-matter {
  position: relative;
  min-height: 515px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: var(--soft);
  box-shadow: 0 8px 28px rgba(23, 68, 91, .07);
  outline: none;
}

.legal-card-front,
.legal-card-detail {
  position: absolute;
  inset: 0;
  padding: 34px 30px;
  transition: opacity .35s ease, transform .4s ease;
}

.legal-card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.legal-card-front > span {
  position: absolute;
  top: 20px;
  left: 25px;
  color: #9aabb2;
  font: 800 .68rem "Montserrat";
}

.legal-card-front small {
  color: var(--blue);
  font: 800 .59rem "Montserrat";
  letter-spacing: .09em;
}

.legal-card-front h3,
.legal-card-detail h3 {
  color: var(--navy);
  font: 700 1.22rem/1.35 "Montserrat";
}

.legal-card-front p { color: var(--muted); font-size: .88rem; }
.legal-card-front b { margin-top: 15px; color: var(--coral); font-size: .78rem; }

.legal-card-detail {
  overflow: auto;
  color: #fff;
  background: var(--blue-dark);
  opacity: 0;
  transform: translateY(25px);
}

.legal-card-detail h3 { margin-top: 0; color: #fff; }
.legal-card-detail ul { margin: 14px 0; padding-left: 19px; }
.legal-card-detail li { margin: 8px 0; font-size: .82rem; line-height: 1.45; }
.legal-card-detail p { padding: 11px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: .78rem; line-height: 1.5; }
.legal-card-detail .mini-note { padding: 11px 0 0; border-top: 1px solid rgba(255,255,255,.2); border-radius: 0; background: transparent; font-size: .7rem; }

.legal-matter:hover .legal-card-front,
.legal-matter:focus .legal-card-front,
.legal-matter:focus-within .legal-card-front { opacity: 0; transform: translateY(-20px); }

.legal-matter:hover .legal-card-detail,
.legal-matter:focus .legal-card-detail,
.legal-matter:focus-within .legal-card-detail { opacity: 1; transform: none; }

.legal-matter.voluntary .matter-icon { background: #fff6d5; color: #d79500; }
.legal-matter.voluntary .legal-card-front small { color: #a87505; }
.legal-matter.voluntary .legal-card-detail { background: #a87505; }
.legal-matter.prohibited .matter-icon { background: #fff0ef; color: var(--coral); }
.legal-matter.prohibited .legal-card-front small { color: var(--coral); }
.legal-matter.prohibited .legal-card-detail { background: #b93d47; }
.legal-disclaimer { margin: 24px auto 0; color: var(--muted); font-size: .72rem; text-align: center; }

@media (max-width: 1050px) {
  .legal-matter-grid { grid-template-columns: 1fr; }
  .legal-matter { min-height: 460px; }
}

@media (max-width: 700px) {
  .legal-matter { min-height: auto; }
  .legal-card-front, .legal-card-detail { position: relative; inset: auto; }
  .legal-card-front { min-height: 300px; }
  .legal-card-front b { display: none; }
  .legal-card-detail { opacity: 1; transform: none; }
}