/* 首页公告条样式
 * --ys-notice-gap ：两份文案之间的间距（由 JS 按「视口宽 ÷ 份数」算好后回写）
 * --ys-notice-fade：两端淡出留白宽度（JS 用它算间距，保证份数正好铺满）
 */
.ys-notice {
  /* 兜底值，JS 加载后立刻按实际视口重算 */
  --ys-notice-gap: 88px;
  --ys-notice-fade: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 9px 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(150, 30, 90, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

.ys-notice-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  transform: scale(0.92);
}

.ys-notice-label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #be185d;
  background: #fce7f3;
  border: 1px solid #f9a8d4;
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 16px;
  white-space: nowrap;
}

.ys-notice-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 20px;
  /* 左右边缘淡出：文字滑入滑出不硬切 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ys-notice-fade), #000 calc(100% - var(--ys-notice-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--ys-notice-fade), #000 calc(100% - var(--ys-notice-fade)), transparent 100%);
}

.ys-notice-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  justify-content: flex-start;
}

/* 文字段：间距用 margin-right（循环步长 = 段宽 + 间距），
   不能用 padding-right，否则段末留白会在循环处形成空白断点。
   每段间距一致（含最后一段），保证各份之间的留白均匀 */
.ys-notice-text {
  font-size: 13px;
  font-weight: 700;
  color: #1a7f4b;
  letter-spacing: 0.2px;
  margin-right: var(--ys-notice-gap);
  line-height: 20px;
  flex-shrink: 0;
}

/* ── 手机端：整条改为上下两行 ──
   第一行：📢 + 温馨提示
   第二行：整行宽度的滚动文字（1 份文案完整显示，绝不被切成两半）
   断点 600px 与 JS 里的 targetCount() 保持一致 */
@media (max-width: 600px) {
  .ys-notice {
    --ys-notice-fade: 10px;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 5px;
    column-gap: 6px;
    margin: 9px 12px 0;
    padding: 8px 10px 9px;
  }
  .ys-notice-icon {
    font-size: 14px;
  }
  .ys-notice-label {
    font-size: 11px;
    padding: 1px 6px;
    line-height: 15px;
  }
  /* 独占一行，占满内容区宽度 */
  .ys-notice-viewport {
    flex: 0 0 100%;
  }
  .ys-notice-text {
    font-size: 11px;
    margin-right: 0;
  }
}

/* 超窄屏（≤360px）再缩一档字号，保证一整条文案仍能完整放下 */
@media (max-width: 360px) {
  .ys-notice {
    margin: 9px 10px 0;
    padding: 8px 8px 9px;
  }
  .ys-notice-text {
    font-size: 10px;
  }
}