/* BASIC css start */
/* 모바일 상단 흘러가는 배너 */
.mTopMarquee{
  width: 100%;
  height: 36px;                 /* 모바일은 살짝 낮게 */
  background: #121212;
  color: #fff;

  display: flex;
  align-items: center;

  overflow: hidden;
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;

  /* 혹시 모를 가로 넘침 방지 */
  max-width: 100%;
}

.mMarquee{
  width: 100%;
  overflow: hidden;
}

.mMarquee__track{
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: mMarqueeMove 12s linear infinite;  /* 모바일은 조금 빠르게 */
}

.mMarquee__set{
  display: inline-flex;
  align-items: center;
}

.mMarquee__item{
  padding: 0 14px;              /* item 간 간격은 padding으로 */
}

.mMarquee__sep{
  opacity: .55;
  padding: 0 2px;
}

/* 모바일은 hover 없음 → 탭했을 때 멈추고 싶으면 아래 사용 */
.mTopMarquee:active .mMarquee__track{
  animation-play-state: paused;
}

/* 접근성: 모션 줄이기 설정 시 애니메이션 끄기 */
@media (prefers-reduced-motion: reduce){
  .mMarquee__track{ animation: none; }
}

/* set이 2개라서 -50% 이동 */
@keyframes mMarqueeMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* BASIC css end */