.article-infographic {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: oklch(0.99 0.006 82);
}

.safety-visual {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: safety-step;
}

.safety-visual li {
  position: relative;
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 150px;
  border-top: 5px solid var(--forest);
  border-radius: 8px;
  padding: 16px;
  background: white;
  counter-increment: safety-step;
}

.safety-visual li::before {
  content: counter(safety-step, decimal-leading-zero);
  color: var(--forest);
  font-size: .74rem;
  font-weight: 900;
}

.safety-visual li:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: -15px;
  color: var(--muted);
  font-weight: 900;
  transform: translateY(-50%);
}

.safety-visual .is-limit { border-top-color: #b98432; }
.safety-visual .is-act { border-top-color: #a94735; background: #fff8f5; }
.safety-visual strong { color: var(--ink); }
.safety-visual span { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.visual-note { color: var(--muted) !important; font-size: .88rem !important; }

@media (max-width: 760px) {
  .safety-visual { grid-template-columns: 1fr; gap: 10px; }
  .safety-visual li { min-height: 0; }
  .safety-visual li:not(:last-child)::after { content: '↓'; top: auto; right: 18px; bottom: -15px; transform: none; z-index: 1; }
}