/* ========================================
   Margin
======================================== */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   Padding
======================================== */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }

.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }

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

.text-main { color: var(--color-text-main); }
.text-sub { color: var(--color-text-sub); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }

.font-sm { font-size: var(--font-sm); }
.font-md { font-size: var(--font-md); }
.font-lg { font-size: var(--font-lg); }
.font-xl { font-size: var(--font-xl); }
.font-xxl { font-size: var(--font-xxl); }

.font-normal { font-weight: 400; }
.font-bolder { font-weight: 700; }
.font-bold { font-weight: 900; }

.line-tight { line-height: 1.3; }
.line-normal { line-height: 1.6; }

/* ========================================
   Background
======================================== */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-gray { background-color: var(--color-bg-gray); }
.bg-white { background-color: var(--color-white); }

/* ========================================
   Display / Visibility
======================================== */
.is-hidden {
  display: none !important;
}

.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* ========================================
   Width
======================================== */
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* ========================================
   Flexbox
======================================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.align-center { align-items: center; }

/* ========================================
   Gap
======================================== */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

/* ========================================
   Position
======================================== */
.relative { position: relative; }
.absolute { position: absolute; }

/* ========================================
   Z-index
======================================== */
.z-base { z-index: var(--z-base); }
.z-header { z-index: var(--z-header); }
.z-modal { z-index: var(--z-modal); }

/* ========================================
   Border / Radius
======================================== */
.border {
  border: 1px solid #ddd;
}

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* ========================================
   Shadow
======================================== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* ========================================
   Image
======================================== */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* ========================================
   Transition / Hover
======================================== */
.transition-opacity {
  transition: opacity 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

.hover-opacity:hover {
  opacity: 0.7;
}

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

/* ========================================
   Text utility
======================================== */
.text-underline { text-decoration: underline; }
.text-none { text-decoration: none; }

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ========================================
   Layout
======================================== */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.container-narrow {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-padding {
  padding: 4rem 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 2rem 0;
  }
}