/* ============================================================
   utilities.css — インラインstyle=撲滅のためのユーティリティクラス
   ============================================================ */

/* ===== Container ===== */
.container      { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
.container--md  { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-5); }
.container--sm  { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--space-5); }

/* ===== Display ===== */
.hidden       { display: none; }
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

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

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

/* ===== Margin ===== */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }    .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }    .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }    .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }    .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }    .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }    .mb-6 { margin-bottom: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }    .mb-8 { margin-bottom: var(--space-8); }
.mt-10{ margin-top: var(--space-10); }   .mb-10{ margin-bottom: var(--space-10); }
.mt-12{ margin-top: var(--space-12); }   .mb-12{ margin-bottom: var(--space-12); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-4    { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-8    { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* ===== Padding ===== */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

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

/* ===== Text Color ===== */
.text-primary { color: var(--primary); }
.text-text    { color: var(--text); }
.text-mid     { color: var(--text-mid); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-white   { color: #fff; }

/* ===== Text Size ===== */
.text-xs   { font-size: var(--font-xs); }
.text-sm   { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md   { font-size: var(--font-md); }
.text-lg   { font-size: var(--font-lg); }
.text-xl   { font-size: var(--font-xl); }
.text-2xl  { font-size: var(--font-2xl); }
.text-3xl  { font-size: var(--font-3xl); }

/* ===== Font Weight ===== */
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

/* ===== Width ===== */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.max-w-sm { max-width: var(--container-sm); margin: 0 auto; }
.max-w-md { max-width: var(--container-md); margin: 0 auto; }

/* ===== Background ===== */
.bg-white       { background: var(--bg); }
.bg-muted       { background: var(--bg-muted); }
.bg-soft        { background: var(--bg-soft); }
.bg-primary     { background: var(--primary); }
.bg-primary-bg  { background: var(--primary-bg); }

/* ===== Border ===== */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

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

/* ===== Line Height ===== */
.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-loose  { line-height: 1.9; }

/* ===== Cursor ===== */
.cursor-pointer { cursor: pointer; }

/* ===== SR only ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}