/**
 * ユーティリティクラス - みなと内科・呼吸器クリニック
 *
 * 読み込み順: variables.css → base.css → components.css → utilities.css
 *
 * 命名規則: .u-{プロパティ省略}-{値} 形式
 * 例: .u-mt-8 → margin-top: 8px
 *
 * 内容:
 *   01. テキスト配置
 *   02. テキスト色
 *   03. フォントウェイト
 *   04. フォントサイズ
 *   05. マージン（8px グリッド準拠）
 *   06. パディング（8px グリッド準拠）
 *   07. 表示制御（SP / PC 出し分け）
 *   08. フレックスボックスヘルパー
 *   09. グリッドヘルパー
 *   10. 幅・高さ
 *   11. その他（overflow / position / visual）
 *
 * 注意: ユーティリティは緊急時の調整用。基本はコンポーネントで管理する。
 *       !important は意図的に使用している（ユーティリティはコンポーネントを上書きするため）。
 */

/* =============================================
 * 01. テキスト配置
 * ============================================= */

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

/* SP時のみ中央揃え */
@media (max-width: 767px) {
  .u-text-center-sp {
    text-align: center !important;
  }
}

/* PC時のみ左揃え */
@media (min-width: 1024px) {
  .u-text-left-pc {
    text-align: left !important;
  }
}

.u-text-nowrap {
  white-space: nowrap !important;
}
.u-text-wrap {
  white-space: normal !important;
}
.u-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* =============================================
 * 02. テキスト色
 * ============================================= */

.u-color-primary {
  color: var(--color-primary) !important;
}
.u-color-secondary {
  color: var(--color-secondary) !important;
}
.u-color-accent {
  color: var(--color-accent) !important;
}
.u-color-text {
  color: var(--color-text) !important;
}
.u-color-text-light {
  color: var(--color-text-light) !important;
}
.u-color-white {
  color: var(--color-text-on-primary) !important;
}

/* =============================================
 * 03. フォントウェイト
 * ============================================= */

.u-fw-regular {
  font-weight: var(--font-weight-regular) !important;
}
.u-fw-medium {
  font-weight: var(--font-weight-medium) !important;
}
.u-fw-bold {
  font-weight: var(--font-weight-bold) !important;
}

/* =============================================
 * 04. フォントサイズ
 * ============================================= */

.u-fz-xs {
  font-size: var(--font-size-xs) !important;
}
.u-fz-sm {
  font-size: var(--font-size-sm) !important;
}
.u-fz-base {
  font-size: var(--font-size-base) !important;
}
.u-fz-h5 {
  font-size: var(--font-size-h5) !important;
}
.u-fz-h4 {
  font-size: var(--font-size-h4) !important;
}
.u-fz-h3 {
  font-size: var(--font-size-h3) !important;
}
.u-fz-h2 {
  font-size: var(--font-size-h2) !important;
}
.u-fz-h1 {
  font-size: var(--font-size-h1) !important;
}

/* =============================================
 * 05. マージン（8px グリッド）
 *
 * .u-mt-{n}  → margin-top
 * .u-mb-{n}  → margin-bottom
 * .u-ml-{n}  → margin-left
 * .u-mr-{n}  → margin-right
 * .u-mx-{n}  → margin-left + margin-right
 * .u-my-{n}  → margin-top + margin-bottom
 * n は px 値（8px グリッド準拠）
 * ============================================= */

/* margin-top */
.u-mt-0 {
  margin-top: 0 !important;
}
.u-mt-4 {
  margin-top: var(--space-1) !important;
} /* 4px */
.u-mt-8 {
  margin-top: var(--space-2) !important;
} /* 8px */
.u-mt-12 {
  margin-top: var(--space-3) !important;
} /* 12px */
.u-mt-16 {
  margin-top: var(--space-4) !important;
} /* 16px */
.u-mt-20 {
  margin-top: var(--space-5) !important;
} /* 20px */
.u-mt-24 {
  margin-top: var(--space-6) !important;
} /* 24px */
.u-mt-32 {
  margin-top: var(--space-8) !important;
} /* 32px */
.u-mt-40 {
  margin-top: var(--space-10) !important;
} /* 40px */
.u-mt-48 {
  margin-top: var(--space-12) !important;
} /* 48px */
.u-mt-56 {
  margin-top: var(--space-14) !important;
} /* 56px */
.u-mt-64 {
  margin-top: var(--space-16) !important;
} /* 64px */
.u-mt-80 {
  margin-top: var(--space-20) !important;
} /* 80px */

/* margin-bottom */
.u-mb-0 {
  margin-bottom: 0 !important;
}
.u-mb-4 {
  margin-bottom: var(--space-1) !important;
}
.u-mb-8 {
  margin-bottom: var(--space-2) !important;
}
.u-mb-12 {
  margin-bottom: var(--space-3) !important;
}
.u-mb-16 {
  margin-bottom: var(--space-4) !important;
}
.u-mb-20 {
  margin-bottom: var(--space-5) !important;
}
.u-mb-24 {
  margin-bottom: var(--space-6) !important;
}
.u-mb-32 {
  margin-bottom: var(--space-8) !important;
}
.u-mb-40 {
  margin-bottom: var(--space-10) !important;
}
.u-mb-48 {
  margin-bottom: var(--space-12) !important;
}
.u-mb-56 {
  margin-bottom: var(--space-14) !important;
}
.u-mb-64 {
  margin-bottom: var(--space-16) !important;
}
.u-mb-80 {
  margin-bottom: var(--space-20) !important;
}

/* margin-left */
.u-ml-0 {
  margin-left: 0 !important;
}
.u-ml-8 {
  margin-left: var(--space-2) !important;
}
.u-ml-16 {
  margin-left: var(--space-4) !important;
}
.u-ml-24 {
  margin-left: var(--space-6) !important;
}
.u-ml-auto {
  margin-left: auto !important;
}

/* margin-right */
.u-mr-0 {
  margin-right: 0 !important;
}
.u-mr-8 {
  margin-right: var(--space-2) !important;
}
.u-mr-16 {
  margin-right: var(--space-4) !important;
}
.u-mr-24 {
  margin-right: var(--space-6) !important;
}
.u-mr-auto {
  margin-right: auto !important;
}

/* margin x軸（左右） */
.u-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.u-mx-8 {
  margin-left: var(--space-2) !important;
  margin-right: var(--space-2) !important;
}
.u-mx-16 {
  margin-left: var(--space-4) !important;
  margin-right: var(--space-4) !important;
}
.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* margin y軸（上下） */
.u-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.u-my-8 {
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}
.u-my-16 {
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}
.u-my-24 {
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-6) !important;
}
.u-my-32 {
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-8) !important;
}
.u-my-48 {
  margin-top: var(--space-12) !important;
  margin-bottom: var(--space-12) !important;
}

/* =============================================
 * 06. パディング（8px グリッド）
 * ============================================= */

/* padding-top */
.u-pt-0 {
  padding-top: 0 !important;
}
.u-pt-4 {
  padding-top: var(--space-1) !important;
}
.u-pt-8 {
  padding-top: var(--space-2) !important;
}
.u-pt-16 {
  padding-top: var(--space-4) !important;
}
.u-pt-24 {
  padding-top: var(--space-6) !important;
}
.u-pt-32 {
  padding-top: var(--space-8) !important;
}
.u-pt-48 {
  padding-top: var(--space-12) !important;
}

/* padding-bottom */
.u-pb-0 {
  padding-bottom: 0 !important;
}
.u-pb-4 {
  padding-bottom: var(--space-1) !important;
}
.u-pb-8 {
  padding-bottom: var(--space-2) !important;
}
.u-pb-16 {
  padding-bottom: var(--space-4) !important;
}
.u-pb-24 {
  padding-bottom: var(--space-6) !important;
}
.u-pb-32 {
  padding-bottom: var(--space-8) !important;
}
.u-pb-48 {
  padding-bottom: var(--space-12) !important;
}

/* padding x軸（左右） */
.u-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.u-px-8 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}
.u-px-16 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}
.u-px-24 {
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
}

/* padding y軸（上下） */
.u-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.u-py-8 {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}
.u-py-16 {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}
.u-py-24 {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-6) !important;
}
.u-py-32 {
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-8) !important;
}
.u-py-48 {
  padding-top: var(--space-12) !important;
  padding-bottom: var(--space-12) !important;
}

/* =============================================
 * 07. 表示制御（SP / PC 出し分け）
 *
 * SP 専用 : 〜767px で表示、768px〜 で非表示
 * Tablet 専用: 768px〜1023px で表示
 * PC 専用 : 1024px〜 で表示、〜1023px で非表示
 * ============================================= */

/* SP専用: 768px以上では非表示 */
.u-sp-only {
  display: block !important;
}

@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

/* Tablet以下専用: 1024px以上では非表示 */
.u-sp-tablet-only {
  display: block !important;
}

@media (min-width: 1024px) {
  .u-sp-tablet-only {
    display: none !important;
  }
}

/* Tablet専用: SP・PCでは非表示 */
.u-tablet-only {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-tablet-only {
    display: block !important;
  }
}

/* PC専用: 1023px以下では非表示 */
.u-pc-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .u-pc-only {
    display: block !important;
  }
}

/* インライン要素のSP/PC切り替え */
.u-sp-inline-only {
  display: inline !important;
}

@media (min-width: 768px) {
  .u-sp-inline-only {
    display: none !important;
  }
}

.u-pc-inline-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .u-pc-inline-only {
    display: inline !important;
  }
}

/* 完全非表示（アクセシビリティ保持のため aria-hidden と併用すること） */
.u-hidden {
  display: none !important;
}

/* 視覚的に非表示だがスクリーンリーダーには読ませる（base.css の .sr-only と同等） */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============================================
 * 08. フレックスボックスヘルパー
 * ============================================= */

.u-flex {
  display: flex !important;
}
.u-inline-flex {
  display: inline-flex !important;
}

.u-flex-col {
  flex-direction: column !important;
}
.u-flex-row {
  flex-direction: row !important;
}
.u-flex-wrap {
  flex-wrap: wrap !important;
}
.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

.u-items-start {
  align-items: flex-start !important;
}
.u-items-center {
  align-items: center !important;
}
.u-items-end {
  align-items: flex-end !important;
}
.u-items-stretch {
  align-items: stretch !important;
}

.u-justify-start {
  justify-content: flex-start !important;
}
.u-justify-center {
  justify-content: center !important;
}
.u-justify-end {
  justify-content: flex-end !important;
}
.u-justify-between {
  justify-content: space-between !important;
}
.u-justify-around {
  justify-content: space-around !important;
}

.u-flex-1 {
  flex: 1 !important;
}
.u-flex-auto {
  flex: auto !important;
}
.u-flex-none {
  flex: none !important;
}
.u-flex-shrink-0 {
  flex-shrink: 0 !important;
}

/* gap（8px グリッド） */
.u-gap-4 {
  gap: var(--space-1) !important;
}
.u-gap-8 {
  gap: var(--space-2) !important;
}
.u-gap-12 {
  gap: var(--space-3) !important;
}
.u-gap-16 {
  gap: var(--space-4) !important;
}
.u-gap-24 {
  gap: var(--space-6) !important;
}
.u-gap-32 {
  gap: var(--space-8) !important;
}

/* =============================================
 * 09. グリッドヘルパー
 * ============================================= */

.u-grid {
  display: grid !important;
}

/* 汎用グリッドカラム（レスポンシブ） */
.u-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--grid-gap) !important;
}

@media (min-width: 768px) {
  .u-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.u-grid-3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--grid-gap) !important;
}

@media (min-width: 768px) {
  .u-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .u-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.u-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--grid-gap-sm) !important;
}

@media (min-width: 768px) {
  .u-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--grid-gap) !important;
  }
}

@media (min-width: 1024px) {
  .u-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* =============================================
 * 10. 幅・高さ
 * ============================================= */

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

.u-max-w-sm {
  max-width: 480px !important;
}
.u-max-w-md {
  max-width: var(--container-narrow) !important;
}
.u-max-w-lg {
  max-width: var(--container-max) !important;
}
.u-max-w-none {
  max-width: none !important;
}

/* =============================================
 * 11. その他
 * ============================================= */

/* オーバーフロー */
.u-overflow-hidden {
  overflow: hidden !important;
}
.u-overflow-auto {
  overflow: auto !important;
}
.u-overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ポジション */
.u-relative {
  position: relative !important;
}
.u-absolute {
  position: absolute !important;
}
.u-sticky {
  position: sticky !important;
}

/* ボーダー */
.u-border-t {
  border-top: 1px solid var(--color-border) !important;
}
.u-border-b {
  border-bottom: 1px solid var(--color-border) !important;
}
.u-border {
  border: 1px solid var(--color-border) !important;
}
.u-border-none {
  border: none !important;
}

/* 背景色 */
.u-bg-white {
  background-color: var(--color-bg-white) !important;
}
.u-bg-base {
  background-color: var(--color-bg) !important;
}
.u-bg-primary {
  background-color: var(--color-primary) !important;
}
.u-bg-primary-light {
  background-color: var(--color-primary-light) !important;
}

/* 角丸 */
.u-rounded {
  border-radius: var(--radius-card) !important;
}
.u-rounded-sm {
  border-radius: var(--radius-btn) !important;
}
.u-rounded-full {
  border-radius: var(--radius-pill) !important;
}

/* シャドウ */
.u-shadow {
  box-shadow: var(--shadow-card) !important;
}
.u-shadow-none {
  box-shadow: none !important;
}

/* カーソル */
.u-cursor-pointer {
  cursor: pointer !important;
}
.u-cursor-default {
  cursor: default !important;
}

/* 印刷時に非表示 */
@media print {
  .u-no-print {
    display: none !important;
  }
}