/* =====================================================
   utilities.css - Utility / Helper Classes
   ===================================================== */

/* ─── Display ─── */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

/* ─── Flex Utilities ─── */
.flex-row        { flex-direction: row !important; }
.flex-col        { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }
.flex-1          { flex: 1 !important; }
.flex-auto       { flex: auto !important; }
.flex-none       { flex: none !important; }
.flex-shrink-0   { flex-shrink: 0 !important; }
.flex-grow-1     { flex-grow: 1 !important; }

.items-start     { align-items: flex-start !important; }
.items-center    { align-items: center !important; }
.items-end       { align-items: flex-end !important; }
.items-stretch   { align-items: stretch !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }

.self-start  { align-self: flex-start !important; }
.self-center { align-self: center !important; }
.self-end    { align-self: flex-end !important; }

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

/* ─── Grid ─── */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
}

@media (max-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
}

@media (max-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
}

/* ─── Margin ─── */
.m-0  { margin: 0 !important; }
.m-1  { margin: var(--space-1) !important; }
.m-2  { margin: var(--space-2) !important; }
.m-3  { margin: var(--space-3) !important; }
.m-4  { margin: var(--space-4) !important; }
.m-6  { margin: var(--space-6) !important; }
.m-8  { margin: var(--space-8) !important; }
.m-auto { margin: auto !important; }

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-5  { margin-top: var(--space-5) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-auto { margin-bottom: auto !important; }

.ml-0  { margin-left: 0 !important; }
.ml-1  { margin-left: var(--space-1) !important; }
.ml-2  { margin-left: var(--space-2) !important; }
.ml-3  { margin-left: var(--space-3) !important; }
.ml-4  { margin-left: var(--space-4) !important; }
.ml-auto { margin-left: auto !important; }

.mr-0  { margin-right: 0 !important; }
.mr-1  { margin-right: var(--space-1) !important; }
.mr-2  { margin-right: var(--space-2) !important; }
.mr-3  { margin-right: var(--space-3) !important; }
.mr-4  { margin-right: var(--space-4) !important; }
.mr-auto { margin-right: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0    { margin-left: 0 !important; margin-right: 0 !important; }

.my-0    { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-4    { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-6    { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }

/* ─── Padding ─── */
.p-0  { padding: 0 !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-8  { padding: var(--space-8) !important; }

.pt-0  { padding-top: 0 !important; }
.pt-2  { padding-top: var(--space-2) !important; }
.pt-4  { padding-top: var(--space-4) !important; }
.pt-6  { padding-top: var(--space-6) !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-2  { padding-bottom: var(--space-2) !important; }
.pb-4  { padding-bottom: var(--space-4) !important; }
.pb-6  { padding-bottom: var(--space-6) !important; }

.pl-0  { padding-left: 0 !important; }
.pl-2  { padding-left: var(--space-2) !important; }
.pl-4  { padding-left: var(--space-4) !important; }

.pr-0  { padding-right: 0 !important; }
.pr-2  { padding-right: var(--space-2) !important; }
.pr-4  { padding-right: var(--space-4) !important; }

.px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.px-2  { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3  { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4  { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-6  { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }

.py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-2  { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3  { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4  { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-6  { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* ─── Typography ─── */
.text-xs    { font-size: var(--font-size-xs) !important; }
.text-sm    { font-size: var(--font-size-sm) !important; }
.text-base  { font-size: var(--font-size-base) !important; }
.text-lg    { font-size: var(--font-size-lg) !important; }
.text-xl    { font-size: var(--font-size-xl) !important; }
.text-2xl   { font-size: var(--font-size-2xl) !important; }
.text-3xl   { font-size: var(--font-size-3xl) !important; }

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

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

.text-primary   { color: var(--color-primary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-white     { color: var(--color-white) !important; }
.text-dark      { color: var(--color-text) !important; }

.leading-tight   { line-height: var(--line-height-tight) !important; }
.leading-normal  { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-all  { word-break: break-all !important; }
.break-word { word-break: break-word !important; overflow-wrap: break-word !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre    { white-space: pre !important; }

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

.underline    { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* ─── Backgrounds ─── */
.bg-white     { background-color: var(--color-white) !important; }
.bg-primary   { background-color: var(--color-primary) !important; }
.bg-surface   { background-color: var(--color-surface) !important; }
.bg-base      { background-color: var(--color-bg) !important; }
.bg-primary-pale { background-color: var(--color-primary-pale) !important; }
.bg-success-pale { background-color: var(--color-success-pale) !important; }
.bg-warning-pale { background-color: var(--color-warning-pale) !important; }
.bg-danger-pale  { background-color: var(--color-danger-pale) !important; }
.bg-info-pale    { background-color: var(--color-info-pale) !important; }
.bg-transparent  { background-color: transparent !important; }

/* ─── Border ─── */
.border       { border: 1px solid var(--color-border) !important; }
.border-0     { border: none !important; }
.border-top   { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded      { border-radius: var(--radius-base) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-0    { border-radius: 0 !important; }

/* ─── Shadow ─── */
.shadow-none { box-shadow: none !important; }
.shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }

/* ─── Width / Height ─── */
.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; }
.min-w-0    { min-width: 0 !important; }
.max-w-full { max-width: 100% !important; }

/* ─── Position ─── */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

/* ─── Overflow ─── */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ─── Visibility ─── */
.visible   { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

/* ─── Cursor ─── */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ─── Pointer Events ─── */
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ─── User Select ─── */
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all  { user-select: all !important; }

/* ─── Object Fit ─── */
.object-cover   { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }

/* ─── Z-Index ─── */
.z-0    { z-index: 0 !important; }
.z-10   { z-index: 10 !important; }
.z-50   { z-index: 50 !important; }
.z-100  { z-index: 100 !important; }

/* ─── Responsive Visibility ─── */
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

/* 사이드바 메뉴 클릭 즉시 '선택됨'으로 표시(로딩 바 없이 네비게이션 대기 체감 제거) */
.nav-link.nav-loading,
.nav-sub-link.nav-loading {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: var(--font-weight-semibold);
}

/* ═══ 컨텐츠 위→아래 순차 reveal (로딩 완료된 폼이 위에서부터 순서대로 나타남) ═══ */
@keyframes contentRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.main-content > * { animation: contentRise 300ms cubic-bezier(.22,.61,.36,1) both; }
.main-content > *:nth-child(1) { animation-delay: 0ms; }
.main-content > *:nth-child(2) { animation-delay: 70ms; }
.main-content > *:nth-child(3) { animation-delay: 140ms; }
.main-content > *:nth-child(4) { animation-delay: 210ms; }
.main-content > *:nth-child(5) { animation-delay: 280ms; }
.main-content > *:nth-child(n+6) { animation-delay: 340ms; }
@media (prefers-reduced-motion: reduce) {
  .main-content > * { animation: none !important; }
}

/* ═══ 네비게이션 오버레이 + 스피너 (loading.js — 페이지 가져오기가 느릴 때) ═══ */
@keyframes navSpin { to { transform: rotate(360deg); } }
.nav-loading-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
.nav-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: navSpin 0.7s linear infinite;
}