/* ==========================================
   utility.css - ヘルパークラス
   - 汎用的な単一目的クラス
   - どこでも使える微調整用
========================================== */

/* ========== レスポンシブ表示切替 ========== */
.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

@media (min-width: 769px) {
  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
}

/* ========== テキスト調整 ========== */
/* letter-spacing */
.ls-tight {
  letter-spacing: -0.2em;
}

.ls-normal {
  letter-spacing: 0;
}

.ls-wide {
  letter-spacing: 0.05em;
}

/* 特殊な調整 */
.ls-pull-left {
  margin-left: -0.5em;
}

.ls-pull-right {
  margin-right: -0.5em;
}

/* ========== 余白調整 ========== */
/* margin-top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 32px; }

/* margin-bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: 8px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 32px; }

/* padding */
.p-0 { padding: 0; }
.p-xs { padding: 8px; }
.p-sm { padding: 12px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.p-xl { padding: 32px; }

/* ========== テキスト配置 ========== */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

/* ========== アクセシビリティ ========== */
/* スクリーンリーダー専用（視覚的に非表示） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}