/* ========================================
   Utility Classes
   ======================================== */

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

/* Writing Mode */
.u-writing-vertical-rl { writing-mode: vertical-rl !important; }
.u-writing-vertical-lr { writing-mode: vertical-lr !important; }
.u-writing-horizontal-tb { writing-mode: horizontal-tb !important; }
.u-writing-vertical { writing-mode: vertical-rl !important; }
.u-writing-horizontal { writing-mode: horizontal-tb !important; }

/* Display */
.u-block { display: block !important; }
.u-inline { display: inline !important; }
.u-inline-block { display: inline-block !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-hidden { display: none !important; }

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

/* Flexbox */
.u-flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.u-flex-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.u-flex-column { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-align-center { align-items: center !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }

/* Margins - Percentage based */
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }

/* 1% spacing */
.u-m-1 { margin: 1% !important; }
.u-mt-1 { margin-top: 1% !important; }
.u-mr-1 { margin-right: 1% !important; }
.u-mb-1 { margin-bottom: 1% !important; }
.u-ml-1 { margin-left: 1% !important; }

/* 2% spacing */
.u-m-2 { margin: 2% !important; }
.u-mt-2 { margin-top: 2% !important; }
.u-mr-2 { margin-right: 2% !important; }
.u-mb-2 { margin-bottom: 2% !important; }
.u-ml-2 { margin-left: 2% !important; }

/* 3% spacing */
.u-m-3 { margin: 3% !important; }
.u-mt-3 { margin-top: 3% !important; }
.u-mr-3 { margin-right: 3% !important; }
.u-mb-3 { margin-bottom: 3% !important; }
.u-ml-3 { margin-left: 3% !important; }

/* 5% spacing */
.u-m-5 { margin: 5% !important; }
.u-mt-5 { margin-top: 5% !important; }
.u-mr-5 { margin-right: 5% !important; }
.u-mb-5 { margin-bottom: 5% !important; }
.u-ml-5 { margin-left: 5% !important; }

/* 7% spacing */
.u-m-7 { margin: 7% !important; }
.u-mt-7 { margin-top: 7% !important; }
.u-mr-7 { margin-right: 7% !important; }
.u-mb-7 { margin-bottom: 7% !important; }
.u-ml-7 { margin-left: 7% !important; }

/* 10% spacing */
.u-m-10 { margin: 10% !important; }
.u-mt-10 { margin-top: 10% !important; }
.u-mr-10 { margin-right: 10% !important; }
.u-mb-10 { margin-bottom: 10% !important; }
.u-ml-10 { margin-left: 10% !important; }

/* 14% spacing */
.u-m-14 { margin: 14% !important; }
.u-mt-14 { margin-top: 14% !important; }
.u-mr-14 { margin-right: 14% !important; }
.u-mb-14 { margin-bottom: 14% !important; }
.u-ml-14 { margin-left: 14% !important; }

/* Paddings - Percentage based */
.u-p-0 { padding: 0 !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pr-0 { padding-right: 0 !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pl-0 { padding-left: 0 !important; }

/* 1% padding */
.u-p-1 { padding: 1% !important; }
.u-pt-1 { padding-top: 1% !important; }
.u-pr-1 { padding-right: 1% !important; }
.u-pb-1 { padding-bottom: 1% !important; }
.u-pl-1 { padding-left: 1% !important; }

/* 2% padding */
.u-p-2 { padding: 2% !important; }
.u-pt-2 { padding-top: 2% !important; }
.u-pr-2 { padding-right: 2% !important; }
.u-pb-2 { padding-bottom: 2% !important; }
.u-pl-2 { padding-left: 2% !important; }

/* 3% padding */
.u-p-3 { padding: 3% !important; }
.u-pt-3 { padding-top: 3% !important; }
.u-pr-3 { padding-right: 3% !important; }
.u-pb-3 { padding-bottom: 3% !important; }
.u-pl-3 { padding-left: 3% !important; }

/* 5% padding */
.u-p-5 { padding: 5% !important; }
.u-pt-5 { padding-top: 5% !important; }
.u-pr-5 { padding-right: 5% !important; }
.u-pb-5 { padding-bottom: 5% !important; }
.u-pl-5 { padding-left: 5% !important; }

/* 8% padding */
.u-p-8 { padding: 8% !important; }
.u-pt-8 { padding-top: 8% !important; }
.u-pr-8 { padding-right: 8% !important; }
.u-pb-8 { padding-bottom: 8% !important; }
.u-pl-8 { padding-left: 8% !important; }

/* 10% padding */
.u-p-10 { padding: 10% !important; }
.u-pt-10 { padding-top: 10% !important; }
.u-pr-10 { padding-right: 10% !important; }
.u-pb-10 { padding-bottom: 10% !important; }
.u-pl-10 { padding-left: 10% !important; }

/* 14% padding */
.u-p-14 { padding: 14% !important; }
.u-pt-14 { padding-top: 14% !important; }
.u-pr-14 { padding-right: 14% !important; }
.u-pb-14 { padding-bottom: 14% !important; }
.u-pl-14 { padding-left: 14% !important; }

/* Width & Height */
.u-w-full { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-h-full { height: 100% !important; }
.u-h-auto { height: auto !important; }

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

/* Font Weight */
.u-font-normal { font-weight: normal !important; }
.u-font-bold { font-weight: bold !important; }
.u-font-light { font-weight: 300 !important; }

/* Font Size - Responsive */
.u-text-xs { font-size: clamp(10px, 2.5vw, 12px) !important; }
.u-text-sm { font-size: clamp(12px, 3vw, 14px) !important; }
.u-text-base { font-size: clamp(14px, 3.5vw, 16px) !important; }
.u-text-lg { font-size: clamp(16px, 4vw, 18px) !important; }
.u-text-xl { font-size: clamp(18px, 4.5vw, 20px) !important; }
.u-text-2xl { font-size: clamp(20px, 5vw, 24px) !important; }
.u-text-3xl { font-size: clamp(24px, 6vw, 30px) !important; }
.u-text-4xl { font-size: clamp(30px, 7vw, 40px) !important; }
.u-text-5xl { font-size: clamp(36px, 8vw, 48px) !important; }
.u-text-6xl { font-size: clamp(48px, 10vw, 64px) !important; }

/* Responsive Utilities */
@media (max-width: 767px) {
  .u-hidden-sp { display: none !important; }
  .u-block-sp { display: block !important; }
  .u-text-center-sp { text-align: center !important; }
  .u-text-left-sp { text-align: left !important; }
  .p10-sp { padding-top: 10% !important; }
}

@media (min-width: 768px) {
  .u-hidden-pc { display: none !important; }
  .u-block-pc { display: block !important; }
  .u-text-center-pc { text-align: center !important; }
  .u-text-left-pc { text-align: left !important; }
}