/* BASIC css start */
/* CSS */
.mq {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #fff;
  color: #000;
  /* 커스텀 변수 */
  --gap: 200px;     /* 항목 간 간격 */
  --dur: 30s;      /* 전체 루프 시간 (짧을수록 빠름) */
}

.mq__track {
  display: flex;
  width: max-content;      /* 내용 길이만큼만 가로 확장 */
  gap: var(--gap);
  white-space: nowrap;     /* 줄바꿈 방지 */
  will-change: transform;  /* GPU 합성 힌트 */
  animation: mq-scroll var(--dur) linear infinite;
  transform: translate3d(0, 0, 0);
}

.mq__track p {
  margin: 0;
  font-size: 12px;
  flex: 0 0 auto;          /* 줄바꿈/축소 방지 */
}

/* 트랙 전체를 왼쪽으로 절반(-50%)만큼 이동 */
@keyframes mq-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* 접근성: 모션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
}

/* BASIC css end */