/* ========================================
   Utilities CSS
   ユーティリティクラス
======================================== */

/* ========== Layout Utilities ========== */
.flex {
  display: flex;
}

.col {
  flex-direction: column;
}

.a-c {
  align-items: center;
}

.a-b {
  align-items: baseline;
}

.j-c {
  justify-content: center;
}

.j-b {
  justify-content: space-between;
}

.j-a {
  justify-content: space-around;
}

.container {
  width: 960px;
}

/* ========== Text Utilities ========== */
.text-center {
  text-align: center;
}

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

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

.text-bold {
  font-weight: bold;
}

.text-normal {
  font-weight: normal;
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-white {
  color: var(--color-text-white);
}

.text-black {
  color: var(--color-text-black);
}

.text-gray {
  color: var(--color-text-gray);
}

.text-blue {
  color: var(--color-blue-status);
}

.text-red {
  color: var(--color-status-red);
}

/* ========== Font Size Utilities ========== */
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-md {
  font-size: var(--font-size-md);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

/* ========== Spacing Utilities ========== */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

/* ========== Gap Utilities ========== */
.gap-0 { gap: 0; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }

/* ========== Width & Height Utilities ========== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-fit { height: fit-content; }

/* ========== Position Utilities ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

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

/* ========== Border Utilities ========== */
.border { border: 1px solid var(--color-border-light); }
.border-primary { border: 1px solid var(--color-primary); }
.border-secondary { border: 1px solid var(--color-secondary); }
.border-gray { border: 1px solid var(--color-border-primary); }

.border-t { border-top: 1px solid var(--color-border-light); }
.border-b { border-bottom: 1px solid var(--color-border-light); }
.border-l { border-left: 1px solid var(--color-border-light); }
.border-r { border-right: 1px solid var(--color-border-light); }

.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--border-radius-xs); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-round); }

/* ========== Background Utilities ========== */
.bg-white { background-color: var(--color-bg-white); }
.bg-black { background-color: var(--color-bg-black); }
.bg-gray { background-color: var(--color-bg-gray); }
.bg-gray-light { background-color: var(--color-bg-light-gray); }
.bg-gray-medium { background-color: var(--color-bg-gray-medium); }
.bg-gray-dark { background-color: var(--color-bg-gray-dark); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }

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

/* ========== Cursor Utilities ========== */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ========== Overflow Utilities ========== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========== Z-Index Utilities ========== */
.z-0 { z-index: 0; }
.z-10 { z-index: var(--z-index-dropdown); }
.z-20 { z-index: var(--z-index-modal); }
.z-30 { z-index: var(--z-index-tooltip); }

/* ========== Transition Utilities ========== */
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }

/* ========== Responsive Utilities ========== */
@media (max-width: 768px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:text-center { text-align: center; }
  .sm\:w-full { width: 100%; }
  .sm\:p-sm { padding: var(--spacing-sm); }
  .sm\:m-sm { margin: var(--spacing-sm); }
}

@media (max-width: 500px) {
  .xs\:hidden { display: none; }
  .xs\:block { display: block; }
  .xs\:flex { display: flex; }
  .xs\:text-center { text-align: center; }
  .xs\:w-full { width: 100%; }
  .xs\:p-xs { padding: var(--spacing-xs); }
  .xs\:m-xs { margin: var(--spacing-xs); }
}

/* ========== Special Utilities ========== */
.sentence-space {
  display: inline-block;
  width: 20px;
}

.no-decoration {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.pointer-events-none {
  pointer-events: none;
}

.select-none {
  user-select: none;
}

.touch-pan-x {
  touch-action: pan-x;
}

.touch-pan-y {
  touch-action: pan-y;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}