/* ══ 실시간 지원금 지급 내역 티커 (독립 섹션 · 가운데 정렬) ══ */

.payout-panel {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 400px;
  background: linear-gradient(180deg, #ffffff, #faf9ff);
  border: 1.5px solid var(--border-card, #e5e3f5);
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(108, 63, 197, 0.07);
  overflow: hidden;
}
.payout-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #eceaf8);
}
.payout-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main, #18172b);
  letter-spacing: -0.2px;
}
.payout-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #e0453a;
  letter-spacing: 0.5px;
}
.payout-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0453a;
  box-shadow: 0 0 0 0 rgba(224, 69, 58, 0.5);
  animation: payoutPulse 1.4s infinite;
}
@keyframes payoutPulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 69, 58, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(224, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 69, 58, 0); }
}

.payout-labels {
  display: grid;
  grid-template-columns: 52px 46px 1fr 74px 132px;
  gap: 10px;
  padding: 9px 20px;
  background: #f6f3fe;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #a09dbb);
}
.payout-labels span:nth-child(2) { text-align: center; }
.payout-labels span:nth-child(3) { text-align: right; }
.payout-labels span:nth-child(4) { text-align: center; }
.payout-labels span:nth-child(5) { text-align: right; }

.payout-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.payout-track {
  display: flex;
  flex-direction: column;
  animation: payoutScroll linear infinite;
}
.payout-viewport:hover .payout-track { animation-play-state: paused; }
@keyframes payoutScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.payout-row {
  display: grid;
  grid-template-columns: 52px 46px 1fr 74px 132px;
  gap: 10px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f2effb;
  font-size: 14px;
  white-space: nowrap;
}
.payout-c-date { color: var(--text-muted, #a09dbb); font-size: 12px; font-variant-numeric: tabular-nums; }
.payout-c-gubun { text-align: center; }
.payout-c-amt {
  text-align: right;
  font-weight: 800;
  color: var(--purple, #6c3fc5);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.payout-c-amt em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--text-sub, #6b6880); margin-left: 1px; }
.payout-c-name { text-align: center; color: var(--text-main, #18172b); font-weight: 600; }
.payout-c-phone { text-align: right; color: var(--text-sub, #6b6880); font-variant-numeric: tabular-nums; font-size: 13px; }

@media (max-width: 768px) {
  .payout-panel { max-width: 100%; height: 360px; }
  .payout-labels, .payout-row { grid-template-columns: 44px 44px 1fr 48px 108px; gap: 8px; padding-left: 14px; padding-right: 14px; }
  .payout-row { font-size: 13px; }
}
@media (max-width: 380px) {
  .payout-labels, .payout-row { grid-template-columns: 38px 40px 1fr 42px 92px; gap: 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .payout-track { animation: none; }
  .payout-live::before { animation: none; }
}

/* ══ 실시간 신청 현황 + 지급 내역 50:50 나란히 + 신청현황 컬럼 ══ */
.ticker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ticker-row > div { min-width: 0; }
.ticker-row .payout-panel { max-width: none; margin: 0; }

.apply-labels {
  display: grid;
  grid-template-columns: 52px 46px 46px 1fr 132px;
  gap: 8px;
  padding: 9px 20px;
  background: #f6f3fe;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #a09dbb);
}
.apply-labels span:nth-child(3) { text-align: center; }
.apply-labels span:nth-child(4) { text-align: center; }
.apply-labels span:nth-child(5) { text-align: right; }

.apply-row {
  display: grid;
  grid-template-columns: 52px 46px 46px 1fr 132px;
  gap: 8px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f2effb;
  font-size: 14px;
  white-space: nowrap;
}
.apply-c-date { color: var(--text-muted, #a09dbb); font-size: 12px; font-variant-numeric: tabular-nums; }
.apply-c-time { color: var(--text-sub, #6b6880); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.apply-c-gubun { text-align: center; }
.apply-tag { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.apply-tag--mem { background: var(--purple-pale, #f3eeff); color: var(--purple, #6c3fc5); }
.apply-tag--easy { background: #e9f7ee; color: #2e9e52; }
.apply-c-name { text-align: center; color: var(--text-main, #18172b); font-weight: 700; }
.apply-c-phone { text-align: right; color: var(--text-sub, #6b6880); font-variant-numeric: tabular-nums; font-size: 13px; }

@media (max-width: 768px) {
  .ticker-row { grid-template-columns: 1fr; gap: 16px; }
  .apply-labels, .apply-row { grid-template-columns: 46px 42px 42px 1fr 116px; gap: 6px; padding-left: 14px; padding-right: 14px; }
  .apply-row { font-size: 13px; }
}
@media (max-width: 380px) {
  .apply-labels, .apply-row { grid-template-columns: 40px 38px 40px 1fr 100px; gap: 5px; font-size: 12px; }
  .apply-tag { padding: 2px 6px; font-size: 10px; }
}