/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤
 * Rules 슬라이드 스타일
 * =====================================================
 * 규칙/안내 슬라이드
 * 번호 리스트, 아이콘 + 텍스트, 강조 박스
 */

/*
  사용 예시 HTML:
  <section class="slide slide--rules">
    <div class="slide__content">
      <header class="slide__header">
        <h2 class="slide__title">개발 규칙</h2>
      </header>
      <div class="rules-list">
        <div class="rules-item">
          <span class="rules-item__number">01</span>
          <div class="rules-item__content">
            <span class="rules-item__icon">⏰</span>
            <span class="rules-item__text">마감 시간: 19:40</span>
          </div>
        </div>
      </div>
      <div class="rules-highlight">
        <strong>주의!</strong> 마감 후에는 제출 불가
      </div>
    </div>
  </section>
*/

/* =====================================================
 * 규칙 슬라이드 레이아웃
 * ===================================================== */

.slide--rules .slide__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* =====================================================
 * 규칙 리스트
 * ===================================================== */

.rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  counter-reset: rules-counter;
}

/* =====================================================
 * 규칙 아이템
 * ===================================================== */

.rules-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--accent-primary);
  transition: var(--transition-normal);
  counter-increment: rules-counter;
}

.rules-item:hover {
  background: var(--bg-elevated);
  transform: translateX(8px);
}

/* =====================================================
 * 번호
 * ===================================================== */

.rules-item__number {
  font-size: var(--fs-title);
  font-weight: var(--fw-black);
  color: var(--accent-primary);
  min-width: 80px;
  line-height: 1;
  opacity: 0.8;
}

/* 자동 번호 */
.rules-list--auto .rules-item__number {
  display: none;
}

.rules-list--auto .rules-item::before {
  content: counter(rules-counter, decimal-leading-zero);
  font-size: var(--fs-title);
  font-weight: var(--fw-black);
  color: var(--accent-primary);
  min-width: 80px;
  line-height: 1;
  opacity: 0.8;
}

/* =====================================================
 * 콘텐츠
 * ===================================================== */

.rules-item__content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  flex: 1;
}

.rules-item__icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

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

.rules-item__text strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* =====================================================
 * 강조 아이템
 * ===================================================== */

.rules-item--highlight {
  border-left-color: var(--accent-purple);
  background: linear-gradient(
    90deg,
    rgba(123, 107, 158, 0.15) 0%,
    var(--bg-card) 100%
  );
}

.rules-item--highlight .rules-item__number,
.rules-item--highlight::before {
  color: var(--accent-purple);
}

/* 경고 아이템 */
.rules-item--warning {
  border-left-color: var(--color-warning);
  background: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.1) 0%,
    var(--bg-card) 100%
  );
}

.rules-item--warning .rules-item__number,
.rules-item--warning::before {
  color: var(--color-warning);
}

/* 위험 아이템 */
.rules-item--danger {
  border-left-color: var(--color-danger);
  background: linear-gradient(
    90deg,
    rgba(239, 68, 68, 0.1) 0%,
    var(--bg-card) 100%
  );
}

.rules-item--danger .rules-item__number,
.rules-item--danger::before {
  color: var(--color-danger);
}

/* =====================================================
 * 강조 박스
 * ===================================================== */

.rules-highlight {
  padding: var(--space-lg) var(--space-xl);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15) 0%,
    rgba(251, 191, 36, 0.1) 100%
  );
  border: 2px solid var(--color-warning);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  text-align: center;
}

.rules-highlight strong {
  color: var(--color-warning);
  font-weight: var(--fw-bold);
  margin-right: var(--space-sm);
}

/* 정보 박스 */
.rules-highlight--info {
  background: linear-gradient(
    135deg,
    rgba(106, 171, 191, 0.15) 0%,
    rgba(106, 171, 191, 0.05) 100%
  );
  border-color: var(--accent-primary);
}

.rules-highlight--info strong {
  color: var(--accent-primary);
}

/* 성공 박스 */
.rules-highlight--success {
  background: linear-gradient(
    135deg,
    rgba(132, 204, 22, 0.15) 0%,
    rgba(132, 204, 22, 0.05) 100%
  );
  border-color: var(--color-success);
}

.rules-highlight--success strong {
  color: var(--color-success);
}

/* =====================================================
 * 컴팩트 규칙 리스트
 * ===================================================== */

.rules-list--compact .rules-item {
  padding: var(--space-md);
}

.rules-list--compact .rules-item__number,
.rules-list--compact .rules-item::before {
  font-size: var(--fs-heading);
  min-width: 60px;
}

.rules-list--compact .rules-item__icon {
  font-size: 24px;
}

.rules-list--compact .rules-item__text {
  font-size: var(--fs-caption);
}

/* =====================================================
 * 2컬럼 규칙 리스트
 * ===================================================== */

.rules-list--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

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

.rules-list--checklist .rules-item {
  border-left: none;
  padding-left: var(--space-xl);
  position: relative;
}

.rules-list--checklist .rules-item::before {
  content: '☐';
  position: absolute;
  left: var(--space-md);
  font-size: var(--fs-heading);
  color: var(--text-muted);
}

.rules-list--checklist .rules-item--checked::before {
  content: '☑';
  color: var(--color-success);
}

.rules-list--checklist .rules-item__number {
  display: none;
}

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

.rules-item {
  animation: ruleReveal 0.4s ease-out both;
}

.rules-item:nth-child(1) { animation-delay: 0.1s; }
.rules-item:nth-child(2) { animation-delay: 0.15s; }
.rules-item:nth-child(3) { animation-delay: 0.2s; }
.rules-item:nth-child(4) { animation-delay: 0.25s; }
.rules-item:nth-child(5) { animation-delay: 0.3s; }
.rules-item:nth-child(6) { animation-delay: 0.35s; }

@keyframes ruleReveal {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.rules-highlight {
  animation: highlightReveal 0.5s ease-out 0.4s both;
}

@keyframes highlightReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
 * 반응형
 * ===================================================== */

@media (max-width: 1280px) {
  .rules-list--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .rules-item {
    flex-direction: column;
    gap: var(--space-md);
  }

  .rules-item__number,
  .rules-list--auto .rules-item::before {
    font-size: var(--fs-heading);
    min-width: auto;
  }
}