:root {
  --visit-ticker-height: 42px;
  --visit-shell-top: calc(50px + var(--visit-ticker-height));
}

.visit-ticker {
  position: fixed;
  z-index: 950;
  top: 50px;
  left: 0;
  right: 0;
  height: var(--visit-ticker-height);
  overflow: hidden;
  border-bottom: 1px solid #e2e9e5;
  background: #eef6f1;
  color: #43534b;
}

.visit-ticker-window {
  position: relative;
  width: min(1180px, 100%);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.visit-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
  will-change: transform;
}

.visit-ticker-track.is-ready {
  animation: visit-ticker-scroll var(--visit-ticker-duration, 30s) linear infinite;
}

.visit-ticker:hover .visit-ticker-track,
.visit-ticker:focus-within .visit-ticker-track {
  animation-play-state: paused;
}

.visit-ticker-group {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
  padding-right: 28px;
}

.visit-ticker-item {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 5px;
  min-width: max-content;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.visit-ticker-item::after {
  width: 1px;
  height: 12px;
  margin: 0 24px;
  background: #d6dfda;
  content: '';
}

.visit-ticker-item:last-child::after { margin-right: 0; }

.visit-ticker-label,
.visit-ticker-value {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.visit-ticker-label { color: #66756e; }
.visit-ticker-value {
  color: #283b32;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.visit-ticker-item:first-child .visit-ticker-label,
.visit-ticker-item:first-child .visit-ticker-value { color: #12633e; }

.visit-ticker-loading {
  width: 100%;
  padding: 0 20px;
  color: #738078;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

@keyframes visit-ticker-scroll {
  to { transform: translateX(-50%); }
}

/* 방문 현황 띠가 생긴 허브만 기존 보조 헤더와 본문을 그만큼 아래로 민다. */
.has-visit-ticker {
  --hh: var(--visit-shell-top);
  --cup-hh: var(--visit-shell-top);
}
.visit-ticker-flow > main.container { padding-top: var(--visit-shell-top) !important; }
.has-visit-ticker .tp-hd,
.has-visit-ticker .cm-hd,
.has-visit-ticker .cp-hd,
.has-visit-ticker .ct-hd,
.has-visit-ticker .sh-hd,
.has-visit-ticker .nl-head { top: var(--visit-shell-top) !important; }
.has-visit-ticker .tp-native-strip {
  top: calc(var(--visit-shell-top) + var(--tp-core-header-height, 150px)) !important;
}

@media (max-width: 600px) {
  .visit-ticker-window {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .visit-ticker-item { font-size: 14px; }
  .visit-ticker-item::after { margin: 0 18px; }
  .visit-ticker-group { padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .visit-ticker-window { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .visit-ticker-track.is-ready { animation: none; }
  .visit-ticker-group[aria-hidden="true"] { display: none; }
}