body {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--color-text);
  background-color: var(--surface-page);
  transition: background-color var(--dur-bg);
}
body.black { background-color: var(--color-bg-dark); }

.container { max-width: var(--container-max); margin: auto; }
.section { padding-left: var(--section-pad-x); padding-right: var(--section-pad-x); }
@media (max-width: 767px) {
  .section { padding-left: 30px; padding-right: 30px; }
}

/* Shared keyframes */
@keyframes gumSwapUp   { to { transform: translateY(-100%); } }
@keyframes gumSwapDown { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes gumMarquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }