/* ===============================
   허브 전광판
=============================== */

.hub-notice-bar {
  width: 100%;
  height: 35px;
  /* padding: 30px 14px;  */
  display: flex;
  align-items: center;

  overflow: hidden;                /* ★ 핵심 */
  /* box-sizing: border-box; */
  margin-bottom: 3px;
}

.hub-notice-text {
  width: 100%;
  font-size: 18px;
  line-height: 1.2;
  padding-bottom: 17px;
  text-align: center;

  white-space: pre-wrap;
  word-break: keep-all;

  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}


/* ===============================
   FLOW MODE 전용
=============================== */
.hub-notice-text.flow {
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: notice-flow var(--flow-duration) linear infinite;
}

/* ===============================
   FLOW 애니메이션
=============================== */
@keyframes notice-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}