/**
 * Utilities CSS
 * 汎用的なユーティリティクラス
 */

/* ========================================
   Display Utilities
======================================== */
.u-hidden {
  display: none !important;
}

.u-block {
  display: block !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-flex {
  display: flex !important;
}

.u-inline-flex {
  display: inline-flex !important;
}

.u-grid {
  display: grid !important;
}

/* Visibility */
.u-invisible {
  visibility: hidden !important;
}

.u-visible {
  visibility: visible !important;
}

/* ========================================
   Spacing Utilities
======================================== */

/* Margin */
.u-m-0 { margin: 0 !important; }
.u-m-auto { margin: auto !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-sm { margin-top: var(--wp--preset--spacing--sm) !important; }
.u-mt-md { margin-top: var(--wp--preset--spacing--base) !important; }
.u-mt-lg { margin-top: var(--wp--preset--spacing--lg) !important; }
.u-mt-xl { margin-top: var(--wp--preset--spacing--xl) !important; }
.u-mt-2xl { margin-top: var(--wp--preset--spacing--2-xl) !important; }
.u-mt-3xl { margin-top: var(--wp--preset--spacing--3-xl) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-sm { margin-bottom: var(--wp--preset--spacing--sm) !important; }
.u-mb-md { margin-bottom: var(--wp--preset--spacing--base) !important; }
.u-mb-lg { margin-bottom: var(--wp--preset--spacing--lg) !important; }
.u-mb-xl { margin-bottom: var(--wp--preset--spacing--xl) !important; }
.u-mb-2xl { margin-bottom: var(--wp--preset--spacing--2-xl) !important; }
.u-mb-3xl { margin-bottom: var(--wp--preset--spacing--3-xl) !important; }

.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.u-my-md { margin-top: var(--wp--preset--spacing--base) !important; margin-bottom: var(--wp--preset--spacing--base) !important; }
.u-my-lg { margin-top: var(--wp--preset--spacing--lg) !important; margin-bottom: var(--wp--preset--spacing--lg) !important; }
.u-my-xl { margin-top: var(--wp--preset--spacing--xl) !important; margin-bottom: var(--wp--preset--spacing--xl) !important; }

/* Padding */
.u-p-0 { padding: 0 !important; }
.u-p-sm { padding: var(--wp--preset--spacing--sm) !important; }
.u-p-md { padding: var(--wp--preset--spacing--base) !important; }
.u-p-lg { padding: var(--wp--preset--spacing--lg) !important; }
.u-p-xl { padding: var(--wp--preset--spacing--xl) !important; }
.u-p-2xl { padding: var(--wp--preset--spacing--2-xl) !important; }

.u-pt-0 { padding-top: 0 !important; }
.u-pt-sm { padding-top: var(--wp--preset--spacing--sm) !important; }
.u-pt-md { padding-top: var(--wp--preset--spacing--base) !important; }
.u-pt-lg { padding-top: var(--wp--preset--spacing--lg) !important; }
.u-pt-xl { padding-top: var(--wp--preset--spacing--xl) !important; }
.u-pt-2xl { padding-top: var(--wp--preset--spacing--2-xl) !important; }
.u-pt-3xl { padding-top: var(--wp--preset--spacing--3-xl) !important; }

.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-sm { padding-bottom: var(--wp--preset--spacing--sm) !important; }
.u-pb-md { padding-bottom: var(--wp--preset--spacing--base) !important; }
.u-pb-lg { padding-bottom: var(--wp--preset--spacing--lg) !important; }
.u-pb-xl { padding-bottom: var(--wp--preset--spacing--xl) !important; }
.u-pb-2xl { padding-bottom: var(--wp--preset--spacing--2-xl) !important; }
.u-pb-3xl { padding-bottom: var(--wp--preset--spacing--3-xl) !important; }

.u-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.u-px-md { padding-left: var(--wp--preset--spacing--base) !important; padding-right: var(--wp--preset--spacing--base) !important; }
.u-px-lg { padding-left: var(--wp--preset--spacing--lg) !important; padding-right: var(--wp--preset--spacing--lg) !important; }
.u-px-xl { padding-left: var(--wp--preset--spacing--xl) !important; padding-right: var(--wp--preset--spacing--xl) !important; }

.u-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-py-md { padding-top: var(--wp--preset--spacing--base) !important; padding-bottom: var(--wp--preset--spacing--base) !important; }
.u-py-lg { padding-top: var(--wp--preset--spacing--lg) !important; padding-bottom: var(--wp--preset--spacing--lg) !important; }
.u-py-xl { padding-top: var(--wp--preset--spacing--xl) !important; padding-bottom: var(--wp--preset--spacing--xl) !important; }
.u-py-2xl { padding-top: var(--wp--preset--spacing--2-xl) !important; padding-bottom: var(--wp--preset--spacing--2-xl) !important; }
.u-py-3xl { padding-top: var(--wp--preset--spacing--3-xl) !important; padding-bottom: var(--wp--preset--spacing--3-xl) !important; }

/* ========================================
   Text Utilities
======================================== */

/* Text Alignment */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-text-justify { text-align: justify !important; }

/* Font Size */
.u-text-xs { font-size: var(--wp--preset--font-size--xs) !important; }
.u-text-sm { font-size: var(--wp--preset--font-size--sm) !important; }
.u-text-base { font-size: var(--wp--preset--font-size--base) !important; }
.u-text-lg { font-size: var(--wp--preset--font-size--lg) !important; }
.u-text-xl { font-size: var(--wp--preset--font-size--xl) !important; }
.u-text-2xl { font-size: var(--wp--preset--font-size--2-xl) !important; }
.u-text-3xl { font-size: var(--wp--preset--font-size--3-xl) !important; }
.u-text-4xl { font-size: var(--wp--preset--font-size--4-xl) !important; }

/* Font Weight */
.u-font-normal { font-weight: var(--wp--custom--font-weight--normal) !important; }
.u-font-medium { font-weight: var(--wp--custom--font-weight--medium) !important; }
.u-font-semibold { font-weight: var(--wp--custom--font-weight--semibold) !important; }
.u-font-bold { font-weight: var(--wp--custom--font-weight--bold) !important; }

/* Text Color */
.u-text-primary { color: var(--wp--preset--color--text) !important; }
.u-text-secondary { color: var(--wp--preset--color--gray) !important; }
.u-text-light { color: var(--wp--preset--color--gray-light) !important; }
.u-text-white { color: var(--wp--preset--color--white) !important; }
.u-text-success { color: var(--wp--preset--color--success) !important; }
.u-text-warning { color: var(--wp--preset--color--warning) !important; }
.u-text-error { color: var(--wp--preset--color--danger) !important; }

/* ========================================
   Background Utilities
======================================== */
.u-bg-primary { background-color: var(--wp--preset--color--white) !important; }
.u-bg-secondary { background-color: var(--wp--preset--color--gray-lightest) !important; }
.u-bg-tertiary { background-color: var(--wp--preset--color--gray-lighter) !important; }
.u-bg-white { background-color: var(--wp--preset--color--white) !important; }
.u-bg-transparent { background-color: transparent !important; }

/* ========================================
   Flexbox Utilities
======================================== */
.u-flex-row { flex-direction: row !important; }
.u-flex-row-reverse { flex-direction: row-reverse !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-col-reverse { flex-direction: column-reverse !important; }

.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }
.u-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.u-justify-start { justify-content: flex-start !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-around { justify-content: space-around !important; }
.u-justify-evenly { justify-content: space-evenly !important; }

.u-items-start { align-items: flex-start !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-center { align-items: center !important; }
.u-items-baseline { align-items: baseline !important; }
.u-items-stretch { align-items: stretch !important; }

.u-gap-sm { gap: var(--wp--preset--spacing--sm) !important; }
.u-gap-md { gap: var(--wp--preset--spacing--base) !important; }
.u-gap-lg { gap: var(--wp--preset--spacing--lg) !important; }
.u-gap-xl { gap: var(--wp--preset--spacing--xl) !important; }

/* ========================================
   Position Utilities
======================================== */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-sticky { position: sticky !important; }
.u-static { position: static !important; }

.u-top-0 { top: 0 !important; }
.u-right-0 { right: 0 !important; }
.u-bottom-0 { bottom: 0 !important; }
.u-left-0 { left: 0 !important; }

.u-z-10 { z-index: 10 !important; }
.u-z-20 { z-index: 20 !important; }
.u-z-30 { z-index: 30 !important; }
.u-z-40 { z-index: 40 !important; }
.u-z-50 { z-index: 50 !important; }

/* ========================================
   Width & Height Utilities
======================================== */
.u-w-full { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-w-screen { width: 100vw !important; }

.u-h-full { height: 100% !important; }
.u-h-auto { height: auto !important; }
.u-h-screen { height: 100vh !important; }

.u-max-w-full { max-width: 100% !important; }
.u-max-w-none { max-width: none !important; }

/* ========================================
   Border Utilities
======================================== */
.u-border-0 { border: 0 !important; }
.u-border { border: 1px solid var(--wp--preset--color--border) !important; }
.u-border-t { border-top: 1px solid var(--wp--preset--color--border) !important; }
.u-border-r { border-right: 1px solid var(--wp--preset--color--border) !important; }
.u-border-b { border-bottom: 1px solid var(--wp--preset--color--border) !important; }
.u-border-l { border-left: 1px solid var(--wp--preset--color--border) !important; }

.u-rounded-none { border-radius: 0 !important; }
.u-rounded-sm { border-radius: var(--wp--custom--border-radius--sm) !important; }
.u-rounded-md { border-radius: var(--wp--custom--border-radius--md) !important; }
.u-rounded-lg { border-radius: var(--wp--custom--border-radius--lg) !important; }
.u-rounded-xl { border-radius: var(--wp--custom--border-radius--xl) !important; }
.u-rounded-full { border-radius: var(--wp--custom--border-radius--full) !important; }

/* ========================================
   Shadow Utilities
======================================== */
.u-shadow-none { box-shadow: none !important; }
.u-shadow-sm { box-shadow: var(--wp--custom--shadow--sm) !important; }
.u-shadow-md { box-shadow: var(--wp--custom--shadow--md) !important; }
.u-shadow-lg { box-shadow: var(--wp--custom--shadow--lg) !important; }
.u-shadow-xl { box-shadow: var(--wp--custom--shadow--xl) !important; }

/* ========================================
   Responsive Utilities
======================================== */

/* Tablet and up */
@media (min-width: 768px) {
  .u-md-hidden { display: none !important; }
  .u-md-block { display: block !important; }
  .u-md-flex { display: flex !important; }
  .u-md-inline-block { display: inline-block !important; }
  .u-md-text-left { text-align: left !important; }
  .u-md-text-center { text-align: center !important; }
  .u-md-text-right { text-align: right !important; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .u-lg-hidden { display: none !important; }
  .u-lg-block { display: block !important; }
  .u-lg-flex { display: flex !important; }
  .u-lg-inline-block { display: inline-block !important; }
  .u-lg-text-left { text-align: left !important; }
  .u-lg-text-center { text-align: center !important; }
  .u-lg-text-right { text-align: right !important; }
}

/* Mobile only */
@media (max-width: 767px) {
  .u-mobile-hidden { display: none !important; }
}

/* Desktop only */
@media (min-width: 768px) {
  .u-desktop-hidden { display: none !important; }
}