/* --------------------------------------------------------------------------
   모바일 Hero 슬라이더 컨트롤
   - 데스크톱 규칙은 건드리지 않고 모바일에서만 버튼을 축소합니다.
   - 좌우 이동 버튼은 28px, PAUSE 버튼은 48px 폭으로 유지합니다.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero-slider-controls {
    right: 10px !important;
    left: auto !important;
    width: max-content;
    gap: 4px;
    justify-content: flex-end;
  }

  .hero-slider-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 12px;
  }

  .hero-slider-pause {
    width: 48px;
    min-width: 48px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    font-size: 8px;
    letter-spacing: .06em;
  }

  .hero-slider-status {
    margin-left: 2px;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .hero-slider-controls {
    right: 8px !important;
    gap: 3px;
  }

  .hero-slider-button {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    font-size: 11px;
  }

  .hero-slider-pause {
    width: 44px;
    min-width: 44px;
    height: 26px;
    min-height: 26px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider-button,
  .hero-slider-pause {
    transition: none;
  }
}