/**
 * Responsive utilities – 모바일/PC 표시 제어
 * Breakpoint 기준: 768px (이하 = 모바일, 초과 = PC)
 */

:root {
  /* Breakpoints (다른 CSS에서 var(--bp-mobile) 등으로 사용 가능) */
  --bp-mobile: 768px;
  --bp-tablet: 960px;
  --bp-desktop: 1200px;
}

/* ==========================================
   PC에서만 보이기 (.pc-only)
   모바일에서는 숨김, 768px 초과에서 표시
   ========================================== */

.pc-only {
  display: none !important;
}

@media (min-width: 769px) {
  .pc-only {
    display: block !important;
  }
}

/* inline 요소용 (span, a 등) */
.pc-only-inline {
  display: none !important;
}

@media (min-width: 769px) {
  .pc-only-inline {
    display: inline !important;
  }
}

/* flex 아이템용 */
.pc-only-flex {
  display: none !important;
}

@media (min-width: 769px) {
  .pc-only-flex {
    display: flex !important;
  }
}

/* ==========================================
   모바일에서만 보이기 (.mo-only)
   768px 이하에서만 표시, PC에서는 숨김
   ========================================== */

.mo-only {
  display: block !important;
}

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

.mo-only-inline {
  display: inline !important;
}

@media (min-width: 769px) {
  .mo-only-inline {
    display: none !important;
  }
}

.mo-only-flex {
  display: flex !important;
}

@media (min-width: 769px) {
  .mo-only-flex {
    display: none !important;
  }
}