/* 시즌 스트립 — 사이트 상단 고정 정보 밴드. 이 서비스에서 가장 중요한 사실 하나("이번 달 대회는
   지금 며칠 남았는가")를 모든 페이지에서 같은 자리에 같은 모양으로 보여준다.

   기존 흐르는 티커(.ticker-bar, marquee)를 대체한다 — 흐르는 텍스트는 읽으려면 기다려야 하고
   실제 정보량도 없었다. 여기서는 흐름 없이 고정 배치하고, 대신 수치를 tabular-nums로 세워
   "기록판" 톤을 만든다. 기획서 §5(오프라인대회 참가권 — 접수마감일 D-day 배너 노출),
   §5(월간대회 — 매달 1일 새로 시작)에서 요구한 요소를 상시 노출로 구현한 것.

   값 채우기는 shared/js/season.js 담당.

   .site-sticky-head — season-strip이 있는 화면은 이 밴드도 nav와 함께 늘 보이길 원해서(2026-08-03
   PM 요청) season-strip+nav.top을 함께 감싸 이 래퍼 하나만 sticky를 진다. 두 요소를 각자 따로
   sticky로 쌓으려면 season-strip의 실제 렌더 높이를 nav의 top 오프셋에 그대로 못박아야 하는데,
   폰트 로딩 지연이나 향후 padding 조정에 따라 어긋나기 쉬워 대신 래퍼로 묶는 방식을 택했다. */
.site-sticky-head { position: sticky; top: 0; z-index: 52; }
.season-strip { background: var(--primary-dark); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.season-strip .container { display: flex; align-items: center; gap: 0; padding-top: 0; padding-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.season-strip .container::-webkit-scrollbar { display: none; }
.season-track { display: flex; flex-shrink: 0; }
.season-track__dup { display: none; }

.season-item { display: flex; align-items: baseline; gap: 7px; padding: 9px 18px; white-space: nowrap; font-size: 12.5px; position: relative; }
.season-item + .season-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.16); }
.season-item:first-child { padding-left: 0; }
.season-item .k { color: rgba(255,255,255,.55); font-weight: 500; }
.season-item .v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 진행 중 표시 — 대회가 "지금 열려있다"는 게 이 밴드의 첫 메시지라 점 하나로만 표현 */
.season-item--live .k { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.75); font-weight: 700; }
.season-item--live .k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--game); box-shadow: 0 0 0 0 rgba(255,106,61,.7); animation: seasonPulse 2.4s ease-out infinite; }
@keyframes seasonPulse { 70%, 100% { box-shadow: 0 0 0 6px rgba(255,106,61,0); } }
@keyframes seasonTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .season-item--live .k::before { animation: none; } }

/* D-day — 이 밴드에서 유일하게 색을 쓰는 자리 */
.season-item--dday .v { color: var(--game); font-size: 13.5px; letter-spacing: -.01em; }

.season-item--link { margin-left: auto; padding-right: 0; }
.season-item--link a { color: rgba(255,255,255,.75); font-weight: 700; }
.season-item--link a:hover { color: #fff; }

@media (max-width: 860px) {
  .season-strip .container { padding-left: 20px; padding-right: 20px; }
  .season-item { padding: 8px 14px; font-size: 12px; }
  /* 좁은 화면에서는 밴드가 가로 스크롤되므로 오른쪽 링크를 끝으로 밀어붙이지 않는다 */
  .season-item--link { margin-left: 0; padding-right: 14px; }

  /* 모바일 전용 자동 티커 — 스크롤 가능 표시가 없어 항목이 잘려 보이던 문제 대신, 항목을 두 벌
     이어 붙여 끊김 없이 흐르게 한다(2026-08-05 PM 지시). 데스크톱은 항목 5개가 다 들어가서
     흐를 필요가 없어 그대로 정적 표시를 유지한다. */
  .season-strip .container { overflow: hidden; }
  .season-track__dup { display: flex; flex-shrink: 0; }
  .season-track { animation: seasonTicker 22s linear infinite; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .season-track { animation: none; }
  .season-track__dup { display: none; }
  .season-strip .container { overflow-x: auto; }
}