#split-anim { margin: 40px auto 8px; max-width: 480px; text-align: left; }
.split-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 16px; font-size: 16px;
  box-shadow: 0 6px 18px rgba(32,32,30,0.06);
  opacity: 0; transform: translateY(8px);
  transition: opacity 340ms ease, transform 340ms ease;
}
.split-card.revealed { opacity: 1; transform: none; }
/* 자식은 들여쓰기 + 왼쪽에 연결선 느낌의 세로 라인 */
.split-card + .split-card { margin-top: 10px; }
.split-card[data-depth="1"] { margin-left: 20px; }
.split-card[data-depth="2"] { margin-left: 40px; }
.split-card[data-depth="3"] { margin-left: 60px; }
.split-card[data-depth="4"] { margin-left: 80px; }
.split-card:not([data-depth="0"]) { border-left: 3px solid var(--grow-tint); }
.split-card .lead { color: var(--grow-deep); font-weight: 700; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) {
  .split-card { transition: none; }
}