.stst-live-section {
  --stst-live-yellow: #f0c800;
  --stst-live-ink: #232323;
  padding: 34px 0 30px;
  background: linear-gradient(180deg, rgba(255, 249, 220, .96), rgba(255, 255, 255, .96));
  border-top: 1px solid rgba(0, 0, 0, .08);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  overflow: hidden;
}

.stst-live-section[hidden] { display: none !important; }

.stst-live-section__inner { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.stst-live-section__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 74px; margin-bottom: 18px; }
.stst-live-section__title-img { display: block; width: min(620px, 68%); height: auto; object-fit: contain; margin: 0 auto; }
.stst-live-section__update-note { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; color: #686868; font-size: .9rem; white-space: nowrap; }

.stst-live-marquee { position: relative; overflow: hidden; padding: 4px 0 8px; mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); }
.stst-live-marquee__track { display: flex; width: max-content; animation: stst-live-scroll var(--stst-live-duration, 30s) linear infinite; will-change: transform; }
.stst-live-marquee:hover .stst-live-marquee__track { animation-play-state: paused; }
.stst-live-marquee__group { display: flex; gap: 14px; padding-right: 14px; }

@keyframes stst-live-scroll { to { transform: translateX(var(--stst-live-shift, -50%)); } }

.stst-live-card { width: 210px; flex: 0 0 210px; overflow: hidden; border-radius: 15px; background: #fff; color: var(--stst-live-ink); text-decoration: none; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 22px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.stst-live-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.13); }
.stst-live-card__visual { position: relative; height: 238px; display: grid; place-items: center; overflow: hidden; background: #fff8d8; }
.stst-live-card__image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.stst-live-now-badge, .stst-streamer-live-badge { display: inline-flex; align-items: center; gap: 5px; background: #202020; color: #fff; border: 2px solid var(--stst-live-yellow); border-radius: 999px; font-weight: 900; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,.24); }
.stst-live-now-badge { position: absolute; top: 9px; right: 9px; padding: 7px 9px; font-size: .78rem; }
.stst-live-now-badge i, .stst-streamer-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #ff3d32; box-shadow: 0 0 0 3px rgba(255,61,50,.18); }
.stst-live-platforms { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 16px); }
.stst-live-platform { padding: 4px 7px; border-radius: 999px; background: rgba(20,20,20,.88); color: #fff; font-size: .66rem; font-weight: 800; backdrop-filter: blur(4px); }
.stst-live-platform--radio { background: rgba(240,200,0,.94); color: #222; }
.stst-live-card__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 12px; }
.stst-live-card__body strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .94rem; }
.stst-live-card__body span { color: #777; font-size: .72rem; }
.stst-live-section__more { display: flex; justify-content: center; margin-top: 18px; }
.stst-live-section__more a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: #222; color: #fff; text-decoration: none; font-weight: 800; font-size: .88rem; }
.stst-live-section__more a:hover { background: #000; }

.thumb-wrapper { position: relative; }
.stst-streamer-live-badge { position: absolute; top: 8px; right: 8px; z-index: 30; padding: 6px 8px; font-size: .72rem; pointer-events: none; }

@media (max-width: 640px) {
  .stst-live-section { padding: 26px 0 24px; }
  .stst-live-section__head { min-height: 0; flex-direction: column; gap: 8px; }
  .stst-live-section__title-img { width: 90%; max-width: 560px; }
  .stst-live-section__update-note { position: static; transform: none; font-size: .8rem; }
  .stst-live-card { width: 164px; flex-basis: 164px; }
  .stst-live-card__visual { height: 190px; }
  .stst-live-marquee { mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stst-live-marquee { overflow-x: auto; }
  .stst-live-marquee__track { animation: none; }
  .stst-live-marquee__group:nth-child(2) { display: none; }
}