/* =========================================
   utilities.css
   - Spacing / Text helpers / Visibility
   - Minimal, precise, Porsche-like utilities
========================================= */

/* -----------------------------------------
   1. Spacing helpers（4px グリッド基準）
----------------------------------------- */

/* margin-top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; } /* 4px */
.mt-2 { margin-top: 0.5rem !important; }  /* 8px */
.mt-3 { margin-top: 0.75rem !important; } /* 12px */
.mt-4 { margin-top: 1rem !important; }    /* 16px */

/* margin-bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }

/* 余白を縦方向まとめて消したいとき */
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------
   2. Text helpers
----------------------------------------- */

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

/* 一段だけ文字を落とす（キャプションなど） */
.text-small  {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* サブ情報（色はトークンに揃える） */
.text-muted  {
  color: var(--jp-color-text-muted, #9ca3af) !important;
}

/* ラベル類で軽く大文字化したいとき（ヘッダーなどで使用） */
.text-upper {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

/* -----------------------------------------
   3. Display / Visibility
----------------------------------------- */

/* 完全非表示 */
.hidden {
  display: none !important;
}

/* スクリーンリーダーのみ向け（視覚的には非表示） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* モバイル（〜768px）でのみ非表示 */
@media (max-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
}

/* タブレット以上（769px〜）でのみ非表示 */
@media (min-width: 769px) {
  .hidden-md-up {
    display: none !important;
  }
}