@charset "utf-8";
/* 公告css可調參數 */
:root{
  --marquee-height: 36px;   /* 跑馬燈高度 */
  --marquee-speed: 44s;     /* 原本一輪 22s；下方用 /3 變 3 倍速 */
  --marquee-gap: 4rem;      /* 兩則訊息間距 */
  --marquee-bg: #d40000;    /* 背景紅 */
  --marquee-color: #fff;    /* 文字白 */
}

.marquee{
  background: var(--marquee-bg);
  color: var(--marquee-color);
  height: var(--marquee-height);
  overflow: hidden;
  font-size: 14px;
  line-height: var(--marquee-height);
  font-weight: 700;
  letter-spacing: .5px;
  position: relative;
  user-select: none;
  z-index: 99;
}

.marquee__track{
  display: flex;
  width: max-content;              /* 讓內容依實際寬度展開 */
  gap: var(--marquee-gap);
  will-change: transform;
  /* 改成 右→左：direction: reverse；並把時間 /3 變 3 倍速 */
  animation-name: marquee-ltr;
  animation-duration: calc(var(--marquee-speed) / 3);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

/* 原本左→右的 keyframes 可保留，因為我們用 reverse 反向播放成 右→左 */
@keyframes marquee-ltr{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

.marquee:hover .marquee__track{ animation-play-state: paused; }

.marquee__group{
  display: inline-flex;
  white-space: nowrap;
  gap: var(--marquee-gap);
  padding-inline: 1rem;            /* 兩側留白 */
}

.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.marquee__dot{ font-size: 1.1em; }

@media (max-width: 576px){
  .marquee{ font-size: 13px; }
  :root{ --marquee-gap: 2rem; }
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}