/* =========================================================
   Unified Challenge Box Overlay (Safe-Overlay Strategy)
   - 기존 CSS 무변경, 정확한 클래스명 기반
   - 순위 보기 ↔ 명예의 전당 3대 챌린지 박스 완전 통일
   - 회장님 스펙: 240×220px 고정
   ========================================================= */

:root {
  /* PC 기본 규격 */
  --challenge-width: 240px;
  --challenge-height: 220px;
  --lift: -12px;
  --scale: 1.08;
  --glow: 0 -3px 40px rgba(100, 181, 246, 0.40);
  
  /* 성능 최적화 */
  --transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 반응형 대응 */
@media (max-width: 768px) {
  :root {
    --challenge-width: 200px;
    --challenge-height: 180px;
    --lift: -8px;
    --scale: 1.05;
  }
}

@media (max-width: 480px) {
  :root {
    --challenge-width: calc(100vw - 60px);
    --challenge-height: 160px;
    --lift: -4px;
    --scale: 1.02;
  }
}

/* ===== 핵심: 정확한 클래스명 기반 통일 규격 ===== */
.premium-tab-card.challenge-tab-relay,
.premium-tab-card.challenge-tab-ai-battle,
.premium-tab-card.challenge-tab-story {
  /* 크기 완전 고정 */
  width: var(--challenge-width) !important;
  height: var(--challenge-height) !important;
  min-width: var(--challenge-width) !important;
  min-height: var(--challenge-height) !important;
  max-width: var(--challenge-width) !important;
  max-height: var(--challenge-height) !important;
  
  /* Netflix Ultra Hover 기본 상태 */
  transform: translateY(var(--lift)) scale(var(--scale)) !important;
  box-shadow: var(--glow) !important;
  
  /* 부드러운 트랜지션 */
  transition: var(--transition) !important;
  
  /* 성능 최적화 */
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}

/* 활성 상태도 동일 규격 유지 */
.premium-tab-card.challenge-tab-relay.active,
.premium-tab-card.challenge-tab-ai-battle.active,
.premium-tab-card.challenge-tab-story.active {
  /* 크기는 동일, 효과만 기존 CSS가 처리 */
  width: var(--challenge-width) !important;
  height: var(--challenge-height) !important;
}

/* 호버 효과는 기존 JavaScript 인라인 스타일이 처리하므로 건드리지 않음 */

/* === 박스 간 간격 조정 - 호버 확대 고려하여 더 축소 === */
.premium-ranking-tabs.tab-grid {
  gap: 1rem !important; /* 호버 시 8% 확대를 고려하여 1rem으로 축소 */
}

@media (max-width: 768px) {
  .premium-ranking-tabs.tab-grid {
    gap: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  .premium-ranking-tabs.tab-grid {
    gap: 0.6rem !important;
  }
}

/* === 공간 효율성 극대화 레이아웃 === */

/* 전체 내부 컨테이너 최적화 - flexbox 제거 */
.premium-tab-card .premium-tab-content,
.premium-tab-card .tab-content,
.premium-tab-card .challenge-content {
  padding: 0.8rem 1rem !important; /* 내부 여백 최적화 */
  height: 100% !important;
  /* flexbox 제거 - 자연스러운 흐름 */
}

/* 1. 이모지: 3대 타이틀과 간격 50% 축소 - 강제 적용 */
.premium-tab-card .premium-tab-icon,
.premium-tab-card .challenge-icon,
.premium-tab-card .tab-icon,
div.premium-tab-icon,
div.challenge-icon,
div.tab-icon {
  font-size: 1.8rem !important; 
  transform: scale(0.63) !important; 
  margin: 0 !important; /* 완전히 제거 */
  margin-bottom: 0 !important; /* 하단 간격 완전 제거 */
  padding-bottom: 0 !important; /* 패딩도 제거 */
  display: block !important;
  text-align: center !important;
}

/* 2. 메인 타이틀: 폰트 크기 80%로 줄이기 */
.premium-tab-card .premium-tab-title,
.premium-tab-card .challenge-title,
.premium-tab-card .tab-title {
  font-size: 0.79rem !important; /* 0.88rem → 0.79rem (90%로 추가 축소) */
  font-weight: 600 !important; 
  line-height: 1.2 !important; 
  margin: 0 !important; 
  color: #ffffff !important; 
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  width: auto !important; 
  max-width: 100% !important;
  text-align: center !important;
  word-break: normal !important; 
  padding: 0.2rem !important; 
}

/* 3. 하단 텍스트: 1줄로 + 30% 작게 */
.premium-tab-card .premium-tab-subtitle,
.premium-tab-card .challenge-subtitle,
.premium-tab-card .tab-subtitle {
  font-size: 0.245rem !important; /* 0.35rem의 70% (30% 축소) */
  font-weight: 300 !important; 
  opacity: 0.8 !important; 
  margin: 0 0 0.15rem 0 !important; 
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important; /* 1줄 강제 */
}

/* 4. 하단 카테고리: 박스 하단에 확실히 표시 */
.premium-tab-card .tab-category,
.premium-tab-card .challenge-category,
.premium-tab-card .premium-tab-category {
  font-size: 0.3rem !important; /* 20% 축소 */
  font-weight: 400 !important; /* 조금 더 굵게 (가독성) */
  opacity: 0.7 !important; 
  white-space: nowrap !important; /* 1줄 */
  text-align: center !important;
  margin-top: auto !important; /* 자동으로 하단 배치 */
  padding: 0.2rem 0 0 0 !important;
  color: #ffffff !important;
  background: rgba(0,0,0,0.3) !important; /* 약간의 배경 (가독성) */
  border-radius: 4px !important;
}

/* === 핵폭탄 CSS - 모든 것을 덮어쓰기 === */
html .premium-tab-card .premium-tab-title,
body .premium-tab-card .premium-tab-title,
div .premium-tab-card .premium-tab-title,
.premium-tab-card h3.premium-tab-title,
h3.premium-tab-title {
  width: 100% !important;
  max-width: none !important;
  min-width: auto !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  display: block !important;
}

/* 부모 컨테이너도 강제 확장 */
html .premium-tab-card .premium-tab-content,
body .premium-tab-card .premium-tab-content,
div .premium-tab-card .premium-tab-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0.5rem !important;
}

/* === NEO 새로운 텍스트 박스 - 완전히 독립적 === */
.neo-title-container {
  width: 100% !important;
  height: auto !important;
  padding: 1rem 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.neo-title-box {
  width: 100% !important;
  max-width: 180px !important; /* 200px 패딩 고려해서 180px */
  text-align: center !important;
  line-height: 1.2 !important;
}

.neo-line1, .neo-line2 {
  color: #ffffff !important;
  font-family: var(--font-title) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important; /* 크기 축소 */
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  margin: 0 !important;
  padding: 0.1rem 0 !important;
  /* white-space와 ellipsis 제거 - 자연스러운 배치 */
  word-break: keep-all !important;
  line-height: 1.3 !important;
}

/* 반응형 대응 */
@media (max-width: 768px) {
  .neo-title-box {
    max-width: 150px !important;
  }
  .neo-line1, .neo-line2 {
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .neo-title-box {
    max-width: 120px !important;
  }
  .neo-line1, .neo-line2 {
    font-size: 0.9rem !important;
  }
}

/* === 작품 제목 굵기 조정 === */
.ranking-section-title {
  font-weight: 600 !important; /* 800에서 600으로 두 단계 하향 */
}



/* === 수정 포인트 기록 (향후 모바일 대응용) === */
/*
  모바일 크기 조정 필요시 이 지점에서 CSS 변수값 수정:
  - 라인 15-17: --challenge-width, --challenge-height
  - 라인 22-28: 태블릿 브레이크포인트 
  - 라인 32-38: 모바일 브레이크포인트
  - 라인 88-110: 내부 요소 크기 (이모지 30%, 텍스트 50%)
*/