/* ============================================================================
   테마 썸네일 그라데이션 — 공통 헬퍼 (단일 소스)
   ----------------------------------------------------------------------------
   theme.html (.th-thumb) 과 index.html (.tf-thumb) 이 함께 사용하는
   테마별 배경색 클래스입니다. 색상 변경 시 이 파일만 수정하면 두 페이지에
   동시에 반영되므로 두 곳이 어긋날 수 없습니다.
   (백엔드 /js 정적 라우트로 서빙 — 서버 재시작 불필요)

   사용법:
     theme.html:  <div class="th-thumb th-1">...
     index.html:  <a class="tf-thumb th-1">...
   ============================================================================ */
.th-thumb.th-1, .tf-thumb.th-1, .td-thumb.th-1 { background: linear-gradient(160deg, #1f6f6b, #8fc07a); }
.th-thumb.th-2, .tf-thumb.th-2, .td-thumb.th-2 { background: linear-gradient(160deg, #b34a2e, #e5a75b); }
.th-thumb.th-3, .tf-thumb.th-3, .td-thumb.th-3 { background: linear-gradient(160deg, #39406e, #d97a5e); }
.th-thumb.th-4, .tf-thumb.th-4, .td-thumb.th-4 { background: linear-gradient(160deg, #7a3b2e, #b9824a); }
.th-thumb.th-5, .tf-thumb.th-5, .td-thumb.th-5 { background: linear-gradient(160deg, #1e5a8a, #55a7bd); }
.th-thumb.th-6, .tf-thumb.th-6, .td-thumb.th-6 { background: linear-gradient(160deg, #5b3a6e, #b088c8); }
.th-thumb.th-7, .tf-thumb.th-7, .td-thumb.th-7 { background: linear-gradient(160deg, #8a5a2e, #e0b060); }
.th-thumb.th-8, .tf-thumb.th-8, .td-thumb.th-8 { background: linear-gradient(160deg, #2e5a4a, #7ac0a0); }

/* 작업 12 — 히어로/썸네일 배경 이미지 (heroImage) — 이미지 + 그라데이션 반투명 합성 */
/* 사용법: 배경 이미지가 있으면 data-hero-img="URL"을 주고, JS 프리로드 성공 시 has-hero 클래스를 추가 */
.th-thumb.has-hero, .tf-thumb.has-hero, .td-thumb.has-hero {
  background-image: linear-gradient(160deg, rgba(255,255,255,.06), rgba(28,26,22,.42)), var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
}
.th-thumb.has-hero > span, .tf-thumb.has-hero > span:not(.tf-tag), .td-thumb.has-hero > span { visibility: hidden; }
/* 이미지가 로드되기 전까지는 기존 그라데이션 유지 (has-hero 없음) — 실패 시 폴백 */