/* Utility Classes - prefix: u- */

/* --- Display --- */
.u-hidden { display: none; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-grid { display: grid; }

/* --- Text Align --- */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* --- Margin Top --- */
.u-mt-0 { margin-top: 0; }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-16 { margin-top: var(--space-16); }
.u-mt-24 { margin-top: var(--space-24); }
.u-mt-32 { margin-top: var(--space-32); }
.u-mt-48 { margin-top: var(--space-48); }
.u-mt-64 { margin-top: var(--space-64); }
.u-mt-80 { margin-top: var(--space-80); }

/* --- Margin Bottom --- */
.u-mb-0 { margin-bottom: 0; }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-16 { margin-bottom: var(--space-16); }
.u-mb-24 { margin-bottom: var(--space-24); }
.u-mb-32 { margin-bottom: var(--space-32); }
.u-mb-48 { margin-bottom: var(--space-48); }
.u-mb-64 { margin-bottom: var(--space-64); }

/* --- Padding --- */
.u-p-16 { padding: var(--space-16); }
.u-p-24 { padding: var(--space-24); }
.u-p-32 { padding: var(--space-32); }
.u-px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.u-py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); }
.u-py-80 { padding-top: var(--space-80); padding-bottom: var(--space-80); }

/* --- Width --- */
.u-w-full { width: 100%; }

/* --- Font --- */
.u-font-en { font-family: var(--font-family-en); }
.u-font-cat { font-family: var(--font-family-cat); }

/* --- SP Only / PC Only --- */
@media (min-width: 768px) {
    .u-sp-only { display: none !important; }
}
@media (max-width: 767px) {
    .u-pc-only { display: none !important; }
}