.expand-box {
  transform-origin: center;
  overflow: hidden;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

/* 通用展開時 */
.expand-box.expanded {
  transform: scaleY(1);
  opacity: 1;
}

/* ↓ 從上往下展開 */
.expand-from-top {
  transform: scaleY(0);
  transform-origin: top;
}

/* ↑ 從下往上展開 */
.expand-from-bottom {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* → 從左往右展開 */
.expand-from-left {
  transform: scaleX(0);
  transform-origin: left;
}

/* ← 從右往左展開 */
.expand-from-right {
  transform: scaleX(0);
  transform-origin: right;
}