/* utilities-extended.css - 追加のユーティリティクラス */

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

.u-gtm-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* ===== Spacing Utilities ===== */
.u-gap-xs { gap: var(--spacing-xs) !important; }
.u-gap-sm { gap: var(--spacing-sm) !important; }
.u-gap-md { gap: var(--spacing-md) !important; }
.u-gap-lg { gap: var(--spacing-lg) !important; }
.u-gap-xl { gap: var(--spacing-xl) !important; }

.u-p-xs { padding: var(--spacing-xs) !important; }
.u-p-sm { padding: var(--spacing-sm) !important; }
.u-p-md { padding: var(--spacing-md) !important; }
.u-p-lg { padding: var(--spacing-lg) !important; }
.u-p-xl { padding: var(--spacing-xl) !important; }

.u-m-0 { margin: 0 !important; }
.u-p-0 { padding: 0 !important; }

/* ===== Text Size Utilities ===== */
.u-text-2xl { font-size: 2rem !important; }
.u-text-3xl { font-size: 2.5rem !important; }
.u-text-4xl { font-size: 3rem !important; }

/* Additional Responsive Text Sizes */
.u-text-responsive-lg {
  font-size: 1.5rem !important;
}

.u-text-responsive-xl {
  font-size: 2rem !important;
}

.u-text-responsive-2xl {
  font-size: 2.5rem !important;
}

@media (max-width: 768px) {
  .u-text-responsive-lg { font-size: 1.25rem !important; }
  .u-text-responsive-xl { font-size: 1.5rem !important; }
  .u-text-responsive-2xl { font-size: 1.75rem !important; }
}

/* ===== Color Utilities ===== */
.u-text-white { color: white !important; }
.u-text-muted { color: var(--color-text-light) !important; }
.u-text-warning { color: #f39c12 !important; }
.u-text-error { color: var(--color-error) !important; }
.u-text-info { color: #74b9ff !important; }

/* Background Colors with Specific Values */
.u-bg-warm-light { background-color: #FFF8DC !important; }
.u-bg-cool-light { background-color: #F0F8FF !important; }
.u-bg-mint-light { background-color: #F5F5DC !important; }
.u-bg-lavender-light { background-color: #F8F8FF !important; }
.u-bg-peach-light { background-color: #FFFAFA !important; }
.u-bg-sky-light { background-color: #E0F6FF !important; }

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

.u-max-w-xs { max-width: 20rem !important; }
.u-max-w-sm { max-width: 24rem !important; }
.u-max-w-md { max-width: 28rem !important; }
.u-max-w-lg { max-width: 32rem !important; }
.u-max-w-xl { max-width: 36rem !important; }
.u-max-w-2xl { max-width: 42rem !important; }
.u-max-w-3xl { max-width: 48rem !important; }
.u-max-w-4xl { max-width: 56rem !important; }
.u-max-w-5xl { max-width: 64rem !important; }
.u-max-w-full { max-width: 100% !important; }

/* Special Case */
.u-max-w-400 { max-width: 400px !important; }

/* ===== Z-index Utilities ===== */
.u-z-0 { z-index: 0 !important; }
.u-z-1 { z-index: 1 !important; }
.u-z-2 { z-index: 2 !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; }

/* ===== Position Utilities ===== */
.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-top-sm { top: var(--spacing-sm) !important; }
.u-right-sm { right: var(--spacing-sm) !important; }
.u-bottom-sm { bottom: var(--spacing-sm) !important; }
.u-left-sm { left: var(--spacing-sm) !important; }

/* ===== Flex Utilities Extended ===== */
.u-flex-grow { flex-grow: 1 !important; }
.u-flex-shrink-0 { flex-shrink: 0 !important; }

/* ===== Animation Utilities ===== */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* ===== Hover Effects ===== */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===== Form Utilities ===== */
.u-form-input {
  flex: 1;
  max-width: 400px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
}

/* ===== Card Image Utilities ===== */
.u-card-image-dog {
  object-fit: contain !important;
  background: #FFF8DC !important;
  padding: 15px !important;
}

.u-card-image-cat {
  object-fit: contain !important;
  background: #F0F8FF !important;
  padding: 15px !important;
}

.u-card-image-rabbit {
  object-fit: contain !important;
  background: #F5F5DC !important;
  padding: 15px !important;
}

.u-card-image-rabbit-alt {
  object-fit: contain !important;
  background: #F8F8FF !important;
  padding: 15px !important;
}

.u-card-image-exotic {
  object-fit: contain !important;
  background: #FFFAFA !important;
  padding: 15px !important;
}

.u-card-image-aquatic {
  object-fit: contain !important;
  background: #E0F6FF !important;
  padding: 15px !important;
}

/* ===== Button Utilities ===== */
.u-btn-ghost {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.u-btn-ghost-primary {
  background: none !important;
  border: none !important;
  color: #667eea !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.u-btn-close {
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
}

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

/* ===== Layout Utilities ===== */
.u-flex-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.u-grid-auto {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 2rem !important;
}

.u-grid-full {
  grid-column: 1/-1 !important;
}

/* ===== Height Utilities ===== */
.u-h-150 { height: 150px !important; }
.u-h-300 { height: 300px !important; }

/* ===== Border Radius Utilities ===== */
.u-rounded-lg { border-radius: 16px !important; }

/* ===== Margin/Padding Detailed ===== */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-xs { margin-bottom: 0.5rem !important; }
.u-mb-sm { margin-bottom: 1rem !important; }
.u-mb-md { margin-bottom: 1.5rem !important; }
.u-mb-lg { margin-bottom: 2rem !important; }

.u-mt-xs { margin-top: 0.5rem !important; }
.u-mt-sm { margin-top: 1rem !important; }
.u-mt-md { margin-top: 1.5rem !important; }
.u-mt-lg { margin-top: 2rem !important; }

.u-py-xs { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.u-py-sm { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.u-py-md { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.u-py-lg { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.u-py-xl { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.u-px-sm { padding-left: 1rem !important; padding-right: 1rem !important; }
.u-px-md { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.u-px-lg { padding-left: 2rem !important; padding-right: 2rem !important; }

/* ===== Text Utilities Extended ===== */
.u-text-xs { font-size: 0.7rem !important; }
.u-text-sm { font-size: 0.8rem !important; }
.u-text-base { font-size: 0.9rem !important; }
.u-text-lg { font-size: 1.1rem !important; }

.u-text-gray { color: #666 !important; }
.u-text-gray-light { color: #999 !important; }

/* ===== Max Width Specific ===== */
.u-max-w-280 { max-width: 280px !important; }

/* ===== Table Utilities ===== */
.u-table-full {
  width: 100% !important;
  border-collapse: collapse !important;
}

.u-table-header {
  background: #f8f9fa !important;
}

.u-table-cell {
  padding: 1rem !important;
}

.u-table-cell-left {
  padding: 1rem !important;
  text-align: left !important;
}

.u-table-cell-center {
  padding: 1rem !important;
  text-align: center !important;
}

.u-table-header-cell {
  padding: 1rem !important;
  text-align: left !important;
  border-bottom: 2px solid #dee2e6 !important;
}

.u-table-header-cell-center {
  padding: 1rem !important;
  text-align: center !important;
  border-bottom: 2px solid #dee2e6 !important;
}

.u-table-row {
  border-bottom: 1px solid #f0f0f0 !important;
}

.u-table-sticky-left {
  position: sticky !important;
  left: 0 !important;
  background: white !important;
}

.u-table-sticky-header {
  position: sticky !important;
  left: 0 !important;
  background: #f8f9fa !important;
}

/* ===== Card/Container Utilities ===== */
.u-card-white {
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.u-card-white-padded {
  background: white !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.u-overflow-x-auto {
  overflow-x: auto !important;
}

.u-min-w-800 {
  min-width: 800px !important;
}

.u-min-w-120 {
  min-width: 120px !important;
}

/* ===== Detailed Text and Font Utilities ===== */
.u-text-gray-dark { color: #333 !important; }
.u-font-weight-600 { font-weight: 600 !important; }
.u-text-1-1 { font-size: 1.1rem !important; }
.u-text-1-2 { font-size: 1.2rem !important; }

/* ===== Margin Detailed ===== */
.u-mr-xs { margin-right: 0.5rem !important; }
.u-mb-quarter { margin-bottom: 0.25rem !important; }
.u-mb-1-5 { margin-bottom: 1.5rem !important; }

/* ===== Button Style Extended ===== */
.u-btn-primary-small {
  background: #667eea !important;
  color: white !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
}

/* ===== Display Flex Detailed ===== */
.u-flex-center-gap {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* ===== Modal Button ===== */
.u-btn-modal-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
}