/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤 - 레이아웃 시스템
 * =====================================================
 * 슬라이드 컨테이너, 그리드, 공통 컴포넌트
 */

/* =====================================================
 * 슬라이드 컨테이너
 * ===================================================== */

.slides-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent; /* 셰이더 배경이 비치도록 */
  z-index: 1;
}

/* =====================================================
 * 개별 슬라이드
 * ===================================================== */

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--slide-padding-y) var(--slide-padding-x);
  padding-bottom: 56px; /* 하단 네비게이션 여백 */
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out),
              visibility var(--duration-slow) var(--ease-out);
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: var(--z-content);
}

/* 슬라이드 배경 레이어 */
.slide__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  overflow: hidden;
}

/* 슬라이드 콘텐츠 레이어 */
.slide__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* =====================================================
 * 슬라이드 타입별 레이아웃
 * ===================================================== */

/* ----- Title 슬라이드 ----- */
.slide--title .slide__content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ----- Content 슬라이드 ----- */
.slide--content .slide__content {
  justify-content: flex-start;
  gap: var(--space-lg);
}

/* ----- Center 정렬 ----- */
.slide--center .slide__content {
  justify-content: center;
  align-items: center;
}

/* =====================================================
 * 슬라이드 헤더
 * ===================================================== */

.slide__header {
  margin-bottom: var(--space-xl);
}

.slide__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.slide__subtitle {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* 히어로 타이틀 (Title 슬라이드용) */
.slide__hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
}

/* =====================================================
 * 그리드 시스템
 * ===================================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
}

/* 컬럼 수 */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* 자동 맞춤 */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* =====================================================
 * 카드 컴포넌트
 * ===================================================== */

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card:hover {
  background: var(--bg-elevated);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.card__title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.card__description {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* 하이라이트 카드 (절제된 강조) */
.card--highlight {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(91, 202, 237, 0.15);
  background: linear-gradient(180deg, rgba(91, 202, 237, 0.08) 0%, rgba(36, 52, 71, 0.8) 100%);
}

/* =====================================================
 * 배지
 * ===================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.badge--accent {
  background: rgba(91, 202, 237, 0.2);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.badge--success {
  background: rgba(132, 204, 22, 0.2);
  color: var(--color-success);
}

.badge--warning {
  background: rgba(251, 191, 36, 0.2);
  color: var(--color-warning);
}

.badge--danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

/* =====================================================
 * 리스트 스타일
 * ===================================================== */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.list__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.list__item-icon {
  flex-shrink: 0;
  font-size: 24px;
}

.list__item-text {
  flex: 1;
}

/* 번호 리스트 */
.list--numbered .list__item {
  counter-increment: list-counter;
}

.list--numbered .list__item::before {
  content: counter(list-counter, decimal-leading-zero);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  color: var(--accent-primary);
  min-width: 48px;
}

/* =====================================================
 * 타임라인
 * ===================================================== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  padding-left: var(--space-xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bg-card);
}

.timeline__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) + 6px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
}

.timeline__item.active::before {
  background: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.timeline__time {
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  color: var(--accent-primary);
  min-width: 80px;
}

.timeline__label {
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

/* =====================================================
 * 버튼
 * ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn--primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.btn--primary:hover {
  background: var(--accent-secondary);
  box-shadow: var(--glow-cyan);
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--accent-primary);
}

.btn--secondary:hover {
  background: rgba(91, 202, 237, 0.1);
}

.btn--large {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--fs-heading);
}

/* =====================================================
 * 진행바
 * ===================================================== */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--accent-primary);
  z-index: var(--z-overlay);
  transition: width var(--duration-normal) var(--ease-out);
}

/* =====================================================
 * 슬라이드 네비게이션 (하단)
 * ===================================================== */

.slide-nav {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: var(--z-overlay);
}

.slide-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.slide-nav__dot:hover {
  background: var(--bg-elevated);
}

.slide-nav__dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 6px rgba(91, 202, 237, 0.5);
}

/* 네비게이션 닷 툴팁 */
.slide-nav__dot[data-tooltip] {
  position: relative;
}

.slide-nav__dot[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) var(--ease-out);
  pointer-events: none;
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-md);
}

/* 툴팁 화살표 */
.slide-nav__dot[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 5px solid transparent;
  border-top-color: var(--bg-card);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) var(--ease-out);
  pointer-events: none;
  z-index: var(--z-tooltip);
}

/* 호버 시 툴팁 표시 */
.slide-nav__dot[data-tooltip]:hover::before,
.slide-nav__dot[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================
 * 현재 시간 표시
 * ===================================================== */

.current-time {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-xl);
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  z-index: var(--z-overlay);
}

/* =====================================================
 * 슬라이드 번호 표시
 * ===================================================== */

.slide-counter {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--text-muted);
  z-index: var(--z-overlay);
}

.slide-counter__current {
  font-weight: var(--fw-bold);
  color: var(--accent-primary);
}

/* =====================================================
 * 반응형 (안전 장치)
 * ===================================================== */

@media (max-width: 1280px) {
  :root {
    --slide-padding-x: 48px;
    --slide-padding-y: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --slide-padding-x: 24px;
    --slide-padding-y: 24px;
  }

  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
 * 데코레이션 도형 (배경 장식)
 * ===================================================== */

.deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.35;
  z-index: var(--z-background);
}

.deco img,
.deco svg {
  width: 100%;
  height: 100%;
  filter: brightness(0) saturate(100%);
}

/* 색상 필터 */
.deco--cyan img,
.deco--cyan svg {
  filter: brightness(0) saturate(100%) invert(70%) sepia(20%) saturate(400%) hue-rotate(152deg) brightness(90%) contrast(85%);
}

.deco--purple img,
.deco--purple svg {
  filter: brightness(0) saturate(100%) invert(47%) sepia(12%) saturate(1236%) hue-rotate(218deg) brightness(94%) contrast(87%);
}

.deco--white img,
.deco--white svg {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 사이즈 */
.deco--sm { width: 48px; height: 48px; }
.deco--md { width: 80px; height: 80px; }
.deco--lg { width: 120px; height: 120px; }
.deco--xl { width: 160px; height: 160px; }

/* 플로팅 애니메이션 */
.deco--float {
  animation: decoFloat 6s ease-in-out infinite;
}

.deco--float-delay-1 { animation-delay: -1s; }
.deco--float-delay-2 { animation-delay: -2s; }
.deco--float-delay-3 { animation-delay: -3s; }
.deco--float-delay-4 { animation-delay: -4s; }

@keyframes decoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* 느린 회전 */
.deco--spin {
  animation: decoSpin 20s linear infinite;
}

@keyframes decoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =====================================================
 * 카운트다운 디스플레이 (기본 스타일)
 * ===================================================== */

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

.countdown__time {
  font-family: var(--font-family);
  font-size: clamp(80px, 10vw, 160px);
  font-weight: var(--fw-black);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

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

.countdown__separator {
  opacity: 0.5;
  animation: blink 1s ease-in-out infinite;
}

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

/* =====================================================
 * 슬롯머신 (기본 스타일)
 * ===================================================== */

.slotmachine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 600px;
}

.slotmachine__display {
  width: 100%;
  height: 120px;
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--glow-cyan);
}

.slotmachine__reel {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 120px;
}

.slotmachine__button {
  min-width: 200px;
}

.slotmachine__results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  min-height: 60px;
}

.slotmachine__result-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
}

.slotmachine__result-order {
  color: var(--accent-primary);
  font-weight: var(--fw-bold);
}

/* =====================================================
 * 시상식 기본 스타일
 * ===================================================== */

.slide--award {
  position: relative;
}

.award-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.light-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(212, 175, 55, 0.1) 10deg,
    transparent 20deg,
    transparent 30deg,
    rgba(212, 175, 55, 0.1) 40deg,
    transparent 50deg,
    transparent 60deg,
    rgba(212, 175, 55, 0.1) 70deg,
    transparent 80deg,
    transparent 90deg,
    rgba(212, 175, 55, 0.1) 100deg,
    transparent 110deg,
    transparent 120deg,
    rgba(212, 175, 55, 0.1) 130deg,
    transparent 140deg,
    transparent 150deg,
    rgba(212, 175, 55, 0.1) 160deg,
    transparent 170deg,
    transparent 180deg,
    rgba(212, 175, 55, 0.1) 190deg,
    transparent 200deg,
    transparent 210deg,
    rgba(212, 175, 55, 0.1) 220deg,
    transparent 230deg,
    transparent 240deg,
    rgba(212, 175, 55, 0.1) 250deg,
    transparent 260deg,
    transparent 270deg,
    rgba(212, 175, 55, 0.1) 280deg,
    transparent 290deg,
    transparent 300deg,
    rgba(212, 175, 55, 0.1) 310deg,
    transparent 320deg,
    transparent 330deg,
    rgba(212, 175, 55, 0.1) 340deg,
    transparent 350deg,
    transparent 360deg
  );
  animation: rotateRays 30s linear infinite;
}

@keyframes rotateRays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.center-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.2) 0%,
    rgba(212, 175, 55, 0.05) 40%,
    transparent 70%
  );
  filter: blur(30px);
  opacity: 0;
}

.award-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-lg);
}

.award-title--gold {
  background: linear-gradient(
    135deg,
    var(--gold-base) 0%,
    var(--gold-light) 25%,
    var(--gold-base) 50%,
    var(--gold-dark) 75%,
    var(--gold-light) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShine 3s ease-in-out infinite;
}

.award-title--silver {
  background: linear-gradient(
    135deg,
    var(--silver-base) 0%,
    var(--silver-light) 25%,
    var(--silver-base) 50%,
    var(--silver-dark) 75%,
    var(--silver-light) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShine 3s ease-in-out infinite;
}

.award-title--champion {
  background: linear-gradient(
    135deg,
    var(--gold-bright) 0%,
    var(--gold-light) 20%,
    var(--gold-base) 40%,
    var(--gold-light) 60%,
    var(--gold-bright) 80%,
    var(--gold-light) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShine 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
}

.award-team-name {
  color: var(--text-primary);
}

.award-prize {
  color: var(--accent-primary);
}