/* =====================================================
   utilities.css — Small helper utilities (Mobile-first)
   Depends on: variables.css, base.css
   ===================================================== */

/* -------- Container -------- */
.container{
  width: min(var(--container-max), 100% - (var(--container-gutter) * 2));
  margin-inline: auto;
}

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

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

.grid{ display:grid !important; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }

/* -------- Gap (Flex/Grid共通) -------- */
.gap-2{ gap: var(--space-2) !important; }
.gap-3{ gap: var(--space-3) !important; }
.gap-4{ gap: var(--space-4) !important; }
.gap-6{ gap: var(--space-6) !important; }
.gap-8{ gap: var(--space-8) !important; }

/* -------- Spacing -------- */
.mt-2{ margin-top: var(--space-2) !important; }
.mt-3{ margin-top: var(--space-3) !important; }
.mt-4{ margin-top: var(--space-4) !important; }
.mt-6{ margin-top: var(--space-6) !important; }
.mt-8{ margin-top: var(--space-8) !important; }

.mb-2{ margin-bottom: var(--space-2) !important; }
.mb-3{ margin-bottom: var(--space-3) !important; }
.mb-4{ margin-bottom: var(--space-4) !important; }
.mb-6{ margin-bottom: var(--space-6) !important; }
.mb-8{ margin-bottom: var(--space-8) !important; }

.p-2{ padding: var(--space-2) !important; }
.p-3{ padding: var(--space-3) !important; }
.p-4{ padding: var(--space-4) !important; }
.p-6{ padding: var(--space-6) !important; }
.p-8{ padding: var(--space-8) !important; }

.px-2{ padding-inline: var(--space-2) !important; }
.px-3{ padding-inline: var(--space-3) !important; }
.px-4{ padding-inline: var(--space-4) !important; }
.py-2{ padding-block: var(--space-2) !important; }
.py-3{ padding-block: var(--space-3) !important; }
.py-4{ padding-block: var(--space-4) !important; }

/* -------- Text -------- */
.text-center{ text-align:center !important; }
.text-right{ text-align:right !important; }
.text-muted{ color: var(--c-fg-muted) !important; }
.text-inverse{ color: var(--c-fg-inverse) !important; }

/* -------- Background / Border / Radius / Shadow -------- */
.bg-muted{ background: var(--c-bg-muted) !important; }
.bg-surface{ background: var(--c-surface) !important; }
.border{ border:1px solid var(--c-border) !important; }
.border-top{ border-top:1px solid var(--c-border) !important; }
.rounded-sm{ border-radius: var(--radius-sm) !important; }
.rounded-md{ border-radius: var(--radius-md) !important; }
.rounded-lg{ border-radius: var(--radius-lg) !important; }
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.shadow-md{ box-shadow: var(--shadow-md) !important; }
.shadow-lg{ box-shadow: var(--shadow-lg) !important; }

/* -------- Size / Position helpers -------- */
.w-full{ width:100% !important; }
.overflow-hidden{ overflow:hidden !important; }
.relative{ position:relative !important; }
.absolute{ position:absolute !important; }

/* -------- Z-index (設計準拠) -------- */
.z-sticky{ z-index: var(--z-sticky) !important; }
.z-fixed{  z-index: var(--z-fixed)  !important; }
.z-overlay{ z-index: var(--z-overlay) !important; }

/* -------- Responsive helpers (md+) -------- */
@media (min-width: 768px){
  .md\\:grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .md\\:grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .md\\:flex-row{ flex-direction: row !important; }
  .md\\:gap-6{ gap: var(--space-6) !important; }
  .md\\:p-6{ padding: var(--space-6) !important; }
}