:root {
  /* Gap Scale */
  --gap-3xs: 4px;
  --gap-2xs: 8px;
  --gap-xs:  12px;
  --gap-s:   12px;
  --gap-ms:  16px;
  --gap-m:   20px;
  --gap-ml:  24px;
  --gap-l:   32px;
  --gap-xl:  40px;
  --gap-2xl: 48px;
  --gap-3xl: 64px;
  --gap-4xl: 80px;
  --gap-5xl: 120px;
}

/* ─────────────────────────────────────────
   HStack (가로 배치) — 기본 align-items: center
───────────────────────────────────────── */
[class*="hstack"] {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hstack      { gap: 0; }
.hstack-3xs  { gap: var(--gap-3xs); }
.hstack-2xs  { gap: var(--gap-2xs); }
.hstack-xs   { gap: var(--gap-xs);  }
.hstack-s    { gap: var(--gap-s);   }
.hstack-ms   { gap: var(--gap-ms);  }
.hstack-m    { gap: var(--gap-m);   }
.hstack-ml   { gap: var(--gap-ml);  }
.hstack-l    { gap: var(--gap-l);   }
.hstack-xl   { gap: var(--gap-xl);  }
.hstack-2xl  { gap: var(--gap-2xl); }
.hstack-3xl  { gap: var(--gap-3xl); }
.hstack-4xl  { gap: var(--gap-4xl); }
.hstack-5xl  { gap: var(--gap-5xl); }

/* HStack alignment — 세로축(cross axis) 정렬 */
[class*="hstack"].top    { align-items: flex-start; }
[class*="hstack"].bottom { align-items: flex-end;   }
[class*="hstack"].center { align-items: center;     }

/* ─────────────────────────────────────────
   VStack (세로 배치) — 기본 align-items: flex-start
───────────────────────────────────────── */
[class*="vstack"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vstack      { gap: 0; }
.vstack-3xs  { gap: var(--gap-3xs); }
.vstack-2xs  { gap: var(--gap-2xs); }
.vstack-xs   { gap: var(--gap-xs);  }
.vstack-s    { gap: var(--gap-s);   }
.vstack-ms   { gap: var(--gap-ms);  }
.vstack-m    { gap: var(--gap-m);   }
.vstack-ml   { gap: var(--gap-ml);  }
.vstack-l    { gap: var(--gap-l);   }
.vstack-xl   { gap: var(--gap-xl);  }
.vstack-2xl  { gap: var(--gap-2xl); }
.vstack-3xl  { gap: var(--gap-3xl); }
.vstack-4xl  { gap: var(--gap-4xl); }
.vstack-5xl  { gap: var(--gap-5xl); }

/* VStack alignment — 가로축(cross axis) 정렬 */
[class*="vstack"].leading  { align-items: flex-start; }
[class*="vstack"].trailing { align-items: flex-end;   }
[class*="vstack"].center   { align-items: center;     }

/* ─────────────────────────────────────────
   Self alignment — 자식 아이템 개별 정렬
───────────────────────────────────────── */
.self-stretch  { align-self: stretch;    }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end;   }
.self-center   { align-self: center;     }

/* Spacer — 남은 공간을 모두 차지 */
.spacer { flex: 1; }
.divider { height: 1px; }