/* =========================================================
   utilities.css
   역할: 단일 목적의 보조 유틸리티 클래스 모음
   ========================================================= */

/* ===== 1. Accessibility Utilities ===== */
.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;
}

.skip-to-content {
   position: absolute;
   top: -100px;
   left: 0;
   background: var(--brand-600);
   color: white;
   padding: 12px 24px;
   z-index: 10000;
   transition: top 0.3s;
}

.skip-to-content:focus {
   top: 0;
}

/* ===== 2. Spacing Utilities ===== */
.mt-0 {
   margin-top: 0 !important;
}
.mt-1 {
   margin-top: 0.25rem !important;
}
.mt-2 {
   margin-top: 0.5rem !important;
}
.mt-3 {
   margin-top: 1rem !important;
}
.mt-4 {
   margin-top: 1.5rem !important;
}
.mt-5 {
   margin-top: 2rem !important;
}
.mt-6 {
   margin-top: 3rem !important;
}

.mb-0 {
   margin-bottom: 0 !important;
}
.mb-1 {
   margin-bottom: 0.25rem !important;
}
.mb-2 {
   margin-bottom: 0.5rem !important;
}
.mb-3 {
   margin-bottom: 1rem !important;
}
.mb-4 {
   margin-bottom: 1.5rem !important;
}
.mb-5 {
   margin-bottom: 2rem !important;
}
.mb-6 {
   margin-bottom: 3rem !important;
}

.mx-auto {
   margin-inline: auto !important;
}
.my-auto {
   margin-block: auto !important;
}

.p-0 {
   padding: 0 !important;
}
.p-1 {
   padding: 0.25rem !important;
}
.p-2 {
   padding: 0.5rem !important;
}
.p-3 {
   padding: 1rem !important;
}
.p-4 {
   padding: 1.5rem !important;
}
.p-5 {
   padding: 2rem !important;
}

.px-0 {
   padding-inline: 0 !important;
}
.py-0 {
   padding-block: 0 !important;
}

/* ===== 3. Alignment Utilities ===== */
.text-left {
   text-align: left !important;
}
.text-center {
   text-align: center !important;
}
.text-right {
   text-align: right !important;
}

.flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

.flex-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.flex-column {
   display: flex;
   flex-direction: column;
}

.grid-center {
   display: grid;
   place-items: center;
}

/* ===== 4. Display/Visibility Utilities ===== */
.hidden {
   display: none !important;
}

.invisible {
   visibility: hidden !important;
}

.visible {
   visibility: visible !important;
}

.show {
   display: block !important;
}

.inline-block {
   display: inline-block !important;
}

/* Responsive Display */
@media (max-width: 640px) {
   .hide-mobile {
      display: none !important;
   }
   .show-mobile {
      display: block !important;
   }
}

@media (min-width: 641px) {
   .hide-desktop {
      display: none !important;
   }
   .show-desktop {
      display: block !important;
   }
}

/* ===== 5. Layout Utilities ===== */
.w-full {
   width: 100% !important;
}
.w-auto {
   width: auto !important;
}
.w-fit {
   width: fit-content !important;
}

.h-full {
   height: 100% !important;
}
.h-auto {
   height: auto !important;
}
.h-screen {
   height: 100vh !important;
}

.max-w-xs {
   max-width: 20rem !important;
}
.max-w-sm {
   max-width: 24rem !important;
}
.max-w-md {
   max-width: 28rem !important;
}
.max-w-lg {
   max-width: 32rem !important;
}
.max-w-xl {
   max-width: 36rem !important;
}
.max-w-2xl {
   max-width: 42rem !important;
}
.max-w-full {
   max-width: 100% !important;
}

.overflow-hidden {
   overflow: hidden !important;
}
.overflow-auto {
   overflow: auto !important;
}
.overflow-scroll {
   overflow: scroll !important;
}

/* ===== 6. Text Utilities ===== */
.text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.font-bold {
   font-weight: var(--fw-bold) !important;
}
.font-semibold {
   font-weight: var(--fw-semibold) !important;
}
.font-normal {
   font-weight: 400 !important;
}

.text-sm {
   font-size: var(--fs-12) !important;
}
.text-base {
   font-size: var(--fs-14) !important;
}
.text-lg {
   font-size: var(--fs-16) !important;
}

.uppercase {
   text-transform: uppercase !important;
}
.lowercase {
   text-transform: lowercase !important;
}
.capitalize {
   text-transform: capitalize !important;
}

/* ===== 7. State Utilities ===== */
.is-active {
   opacity: 1 !important;
   pointer-events: auto !important;
}

.is-disabled {
   opacity: 0.5 !important;
   pointer-events: none !important;
   cursor: not-allowed !important;
}

.is-loading {
   cursor: wait !important;
   opacity: 0.6 !important;
}

.is-hidden {
   display: none !important;
}

/* ===== 8. Image/Media Utilities ===== */
.img-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.img-contain {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.aspect-square {
   aspect-ratio: 1 / 1;
}

.aspect-video {
   aspect-ratio: 16 / 9;
}

.aspect-4-3 {
   aspect-ratio: 4 / 3;
}

/* ===== 9. Color Utilities ===== */
.text-brand {
   color: var(--brand-600) !important;
}
.text-accent {
   color: var(--accent-500) !important;
}
.text-muted {
   color: var(--text-400) !important;
}

.bg-brand {
   background-color: var(--brand-600) !important;
}
.bg-accent {
   background-color: var(--accent-500) !important;
}
.bg-light {
   background-color: var(--bg-50) !important;
}

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

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

.z-0 {
   z-index: 0 !important;
}
.z-10 {
   z-index: 10 !important;
}
.z-20 {
   z-index: 20 !important;
}
.z-50 {
   z-index: 50 !important;
}
.z-max {
   z-index: 9999 !important;
}

/* ===== 11. Border Utilities ===== */
.rounded-sm {
   border-radius: var(--radius-sm) !important;
}
.rounded-full {
   border-radius: 9999px !important;
}
.rounded-none {
   border-radius: 0 !important;
}

.border {
   border: 1px solid var(--line-200) !important;
}
.border-0 {
   border: none !important;
}

/* ===== 12. Shadow Utilities ===== */
.shadow-sm {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.shadow-none {
   box-shadow: none !important;
}

/* ===== 13. Interaction Utilities ===== */
.pointer-events-none {
   pointer-events: none !important;
}

.pointer-events-auto {
   pointer-events: auto !important;
}

.cursor-pointer {
   cursor: pointer !important;
}

.cursor-not-allowed {
   cursor: not-allowed !important;
}

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

/* ===== 14. Animation Utilities ===== */
.transition {
   transition: all 0.3s ease !important;
}

.transition-none {
   transition: none !important;
}

.animate-fade-in {
   animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.animate-slide-up {
   animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
   from {
      transform: translateY(20px);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* ===== 15. Debug Utilities (Development Only) ===== */
.debug-outline * {
   outline: 1px solid red !important;
}

.debug-grid {
   background-image:
      repeating-linear-gradient(
         0deg,
         rgba(255, 0, 0, 0.1) 0px,
         transparent 1px,
         transparent 20px
      ),
      repeating-linear-gradient(
         90deg,
         rgba(255, 0, 0, 0.1) 0px,
         transparent 1px,
         transparent 20px
      );
}