/**
 * 共通ユーティリティクラス
 * 依存: なし（独立）
 * 機能: 全体で再利用可能なユーティリティクラス
 */

/* ==========================================================================
   Spacing Utilities - スペーシング
   ========================================================================== */

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

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

/* ==========================================================================
   Display Utilities - 表示
   ========================================================================== */

.u-hidden { display: none !important; }
.u-visible { display: block !important; }
.u-invisible { visibility: hidden !important; }

.u-flex { display: flex !important; }
.u-flex-center { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
}
.u-flex-between { 
    display: flex !important; 
    justify-content: space-between !important; 
}
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }

/* ==========================================================================
   Text Utilities - テキスト
   ========================================================================== */

.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }
.u-text-right { text-align: right !important; }

.u-text-bold { font-weight: bold !important; }
.u-text-normal { font-weight: normal !important; }
.u-text-light { font-weight: 300 !important; }

.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }

.u-text-nowrap { white-space: nowrap !important; }
.u-text-break { word-break: break-all !important; }

/* ==========================================================================
   Size Utilities - サイズ
   ========================================================================== */

.u-width-full { width: 100% !important; }
.u-width-auto { width: auto !important; }
.u-height-full { height: 100% !important; }
.u-height-auto { height: auto !important; }

.u-max-width-full { max-width: 100% !important; }
.u-min-height-0 { min-height: 0 !important; }

/* ==========================================================================
   Position Utilities - 位置
   ========================================================================== */

.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-static { position: static !important; }

.u-z-index-1 { z-index: 1 !important; }
.u-z-index-10 { z-index: 10 !important; }
.u-z-index-100 { z-index: 100 !important; }
.u-z-index-1000 { z-index: 1000 !important; }

/* ==========================================================================
   Border Utilities - ボーダー
   ========================================================================== */

.u-border-0 { border: 0 !important; }
.u-border-radius-0 { border-radius: 0 !important; }
.u-border-radius-sm { border-radius: 4px !important; }
.u-border-radius-md { border-radius: 8px !important; }
.u-border-radius-lg { border-radius: 16px !important; }
.u-border-radius-full { border-radius: 50% !important; }

/* ==========================================================================
   Shadow Utilities - シャドウ
   ========================================================================== */

.u-shadow-none { box-shadow: none !important; }
.u-shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; }
.u-shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; }
.u-shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; }

/* ==========================================================================
   Overflow Utilities - オーバーフロー
   ========================================================================== */

.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto { overflow: auto !important; }
.u-overflow-scroll { overflow: scroll !important; }
.u-overflow-visible { overflow: visible !important; }

/* ==========================================================================
   Responsive Utilities - レスポンシブ
   ========================================================================== */

@media (max-width: 768px) {
    .u-hidden-mobile { display: none !important; }
    .u-visible-mobile { display: block !important; }
}

@media (min-width: 769px) {
    .u-hidden-desktop { display: none !important; }
    .u-visible-desktop { display: block !important; }
}

/* ==========================================================================
   Color Utilities - カラー（基本のみ）
   ========================================================================== */

.u-text-white { color: white !important; }
.u-text-black { color: black !important; }
.u-bg-white { background-color: white !important; }
.u-bg-black { background-color: black !important; }
.u-bg-transparent { background-color: transparent !important; }

/* ==========================================================================
   Interaction Utilities - インタラクション
   ========================================================================== */

.u-pointer-events-none { pointer-events: none !important; }
.u-pointer-events-auto { pointer-events: auto !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-cursor-default { cursor: default !important; }
.u-user-select-none { user-select: none !important; }