/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤
 * 카운트다운 타이머 스타일
 * =====================================================
 */

/* =====================================================
 * 카운트다운 컨테이너
 * ===================================================== */

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* =====================================================
 * 카운트다운 디스플레이
 * ===================================================== */

.countdown-display {
  margin: var(--space-xl) 0;
}

/* CountdownRenderer용 디스플레이 */
.countdown__display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.countdown__unit {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.countdown__number {
  font-family: var(--font-family);
  font-size: clamp(72px, 10vw, 140px);
  font-weight: var(--fw-black);
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 2ch;
  text-align: right;
}

.countdown__current-session {
  font-size: var(--fs-subtitle);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-md);
}

.countdown__next-event {
  color: var(--accent-primary);
  font-weight: var(--fw-semibold);
}

/* 기존 countdown__time 스타일 (slideRenderer용) */
.countdown__time {
  font-family: var(--font-family);
  font-size: clamp(80px, 12vw, 180px);
  font-weight: var(--fw-black);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown__hours,
.countdown__minutes,
.countdown__seconds {
  min-width: 1.8ch;
  text-align: center;
}

.countdown__separator {
  font-size: clamp(48px, 6vw, 100px);
  color: var(--accent-primary);
  opacity: 0.5;
  animation: blink 1s ease-in-out infinite;
  font-weight: var(--fw-bold);
  align-self: center;
}

@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* =====================================================
 * 카운트다운 라벨
 * ===================================================== */

.countdown__label {
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
}

/* =====================================================
 * 프로그레스 바 (선택)
 * ===================================================== */

.countdown__progress {
  width: 100%;
  max-width: 600px;
  height: 8px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-lg);
}

.countdown__progress-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 100%
  );
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

/* =====================================================
 * 상태별 스타일
 * ===================================================== */

/* 정상 상태 */
.countdown--normal .countdown__time {
  color: var(--accent-primary);
}

/* 경고 상태 (10분 이하) */
.countdown--warning .countdown__time {
  color: var(--color-warning);
  animation: warningPulse 1s ease-in-out infinite;
}

.countdown--warning .countdown__progress-bar {
  background: var(--color-warning);
}

@keyframes warningPulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
  }
  50% {
    opacity: 0.8;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.5);
  }
}

/* 위험 상태 (5분 이하) */
.countdown--danger .countdown__time {
  color: var(--color-danger);
  animation: dangerPulse 0.5s ease-in-out infinite;
}

.countdown--danger .countdown__progress-bar {
  background: var(--color-danger);
}

@keyframes dangerPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
    text-shadow: 0 0 50px rgba(239, 68, 68, 0.7);
  }
}

/* 완료 상태 */
.countdown--complete .countdown__time {
  color: var(--color-success);
  animation: none;
}

.countdown--complete .countdown__progress-bar {
  background: var(--color-success);
  width: 100%;
}

/* =====================================================
 * 컴팩트 버전
 * ===================================================== */

.countdown--compact .countdown__time {
  font-size: clamp(48px, 8vw, 96px);
}

.countdown--compact .countdown__label {
  font-size: var(--fs-body);
}

/* =====================================================
 * 인라인 버전 (다른 요소와 함께 표시)
 * ===================================================== */

.countdown--inline {
  flex-direction: row;
  gap: var(--space-md);
}

.countdown--inline .countdown__time {
  font-size: var(--fs-title);
}

.countdown--inline .countdown__label {
  font-size: var(--fs-body);
}

/* =====================================================
 * 다음 일정 표시
 * ===================================================== */

.countdown__next {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin-top: var(--space-xl);
}

.countdown__next-label {
  color: var(--text-secondary);
}

.countdown__next-value {
  color: var(--accent-primary);
  font-weight: var(--fw-semibold);
}

.countdown__next-time {
  color: var(--text-muted);
}

/* =====================================================
 * 현재 세션 표시
 * ===================================================== */

.countdown__session {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.countdown__session-badge {
  padding: var(--space-xs) var(--space-md);
  background: rgba(106, 171, 191, 0.15);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  color: var(--accent-primary);
  font-weight: var(--fw-medium);
}

.countdown__session-name {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* =====================================================
 * 애니메이션
 * ===================================================== */

.countdown__time {
  animation: countdownReveal 0.6s ease-out;
}

@keyframes countdownReveal {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 숫자 변경 애니메이션 */
.countdown__digit-change {
  animation: digitChange 0.3s ease-out;
}

@keyframes digitChange {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}