/* =====================================================================
   테스트 상세페이지 히어로 — 안정화 리빌드 (2026-06)
   · 단일 CSS 그리드만으로 동작 (JS DOM 재배치 의존 제거)
   · .tl-stat-row 는 실제 마크업 그대로 .tl-meta 안에 위치
   · style.css 의 기본 .tl-hero 규칙 뒤에 로드되어 필요한 속성만 덮어씀
   ===================================================================== */

.tl-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  column-gap: 28px;
  row-gap: 16px;
  align-items: center;
}

/* 대표 이미지 — OG 비율(1200×630) 고정, 잘림 없이 안정적으로 표시 */
.tl-cover {
  width: 100%;
  aspect-ratio: 1200 / 630;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #fff2ef, #fff8ea 48%, #f1f7ff);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.tl-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.tl-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
}

.tl-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

.tl-stat-row {
  margin: 0 0 14px;
}

.btn-start {
  margin-top: 0;
}

/* 테스트 시작 시 히어로 숨김 (JS 가 .quiz-mode 부여) */
.tl-hero.quiz-mode {
  display: none !important;
}

/* 태블릿/모바일 — 세로 스택 */
@media (max-width: 760px) {
  .tl-hero {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .tl-cover {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .tl-meta {
    align-items: center;
    text-align: center;
  }
  .tl-stat-row {
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-start {
    align-self: center;
  }
}