/* ===================================================================
 * 한그루클래스 썸네일 템플릿 4종 스타일
 * 프로그램 · 강의 · 전자책 · 교구
 *
 * 설계 원칙:
 * - 1:1 정사각 / 브랜드 그린 / 상단 배지
 * - 프로그램은 메인 상품이라 대담한 다크 톤(좌상단 텍스트만)
 * - 강의·전자책·교구는 동일 레이아웃(배지 + 중앙 이미지 + 하단 카피).
 *   배경 톤만 각 카테고리별로 달리해 시각 청킹.
 * 프리뷰는 400×400, 내보내기 실측은 1200×1200 (html2canvas scale:3)
 * =================================================================== */

:root {
  --brand-green: #07553B;
  --brand-green-dark: #032B1E;
  --brand-green-light: #1A8862;
  --point-red: #FF5449;
  --point-yellow: #FFE66D;
}

.card {
  width: 600px;
  height: 600px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: #fff;
}

/* ===== 1. 프로그램 템플릿 (메인 상품, 다크 텍스트 중심) ===== */
.card-program {
  background: linear-gradient(135deg, var(--prog-bg-from, var(--brand-green)) 0%, var(--prog-bg-to, var(--brand-green-dark)) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 42px;
}

.card-program::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(26, 136, 98, .3) 0%, transparent 70%);
  pointer-events: none;
}

.program-badge {
  display: inline-block;
  background: var(--prog-badge-bg, var(--point-red));
  color: var(--prog-badge-color, #fff);
  font-size: 20px;
  font-weight: 700;
  padding: 8px 15px;
  border-radius: 6px;
  letter-spacing: -0.45px;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
}

.program-subtitle {
  font-size: var(--prog-subtitle-size, 22px);
  font-weight: 500;
  color: var(--prog-subtitle-color, #B8E4CE);
  letter-spacing: -0.45px;
  position: relative;
  z-index: 2;
}

.program-title {
  font-size: var(--prog-title-size, 51px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.8px;
  margin-top: 9px;
  position: relative;
  z-index: 2;
}

.program-title .accent {
  color: var(--prog-accent, var(--point-yellow));
  display: block;
}

.program-image-wrap {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.program-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .35));
}

.program-image-wrap .placeholder {
  width: 140px;
  height: 140px;
  background: rgba(255, 230, 109, .1);
  border: 2px dashed rgba(255, 230, 109, .25);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 230, 109, .5);
  text-align: center;
  letter-spacing: 0.5px;
}

/* =============================================================
 * 공통: 강의·전자책·교구 — 동일 레이아웃, 배경 톤만 차별
 *   배지(상단 좌측) + 중앙 이미지 + 하단 카피(title + desc)
 * ============================================================= */

.card-lecture,
.card-ebook,
.card-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 42px;
  position: relative;
  overflow: hidden;
}

/* 공통 배지 */
.tpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
}

/* 공통 이미지 래퍼 */
.tpl-image-wrap {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.tpl-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .15));
}

.tpl-image-wrap .placeholder {
  font-size: 100px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .12));
}

/* 공통 하단 카피 */
.tpl-bottom {
  position: relative;
  z-index: 2;
  text-align: left;
}

.tpl-title {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.25;
}

.tpl-desc {
  font-size: 25px;
  font-weight: 500;
  margin-top: 12px;
  letter-spacing: -0.3px;
}

/* ===== 2. 강의 템플릿 (연한 세이지 톤) ===== */
.card-lecture {
  background: linear-gradient(180deg, var(--lec-bg-from, #EEF5F0) 0%, var(--lec-bg-to, #DCE9DF) 100%);
}

.card-lecture::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(7, 85, 59, .08) 0%, transparent 50%);
  pointer-events: none;
}

.card-lecture .tpl-badge {
  background: var(--lec-badge-bg, var(--brand-green));
}

.card-lecture .tpl-title {
  color: var(--lec-title-color, #0f2e21);
  font-size: var(--lec-title-size, 45px);
}
.card-lecture .tpl-desc {
  color: var(--lec-desc-color, #4a5c53);
  font-size: var(--lec-desc-size, 25px);
}

/* ===== 3. 전자책 템플릿 (크림 톤) ===== */
.card-ebook {
  background: var(--eb-bg, #FDF9F0);
}

.card-ebook::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(7, 85, 59, .08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 84, 73, .06) 0%, transparent 50%);
  pointer-events: none;
}

.card-ebook .tpl-badge {
  background: var(--eb-badge-bg, #C17A5C);
}

.card-ebook .tpl-title {
  color: var(--eb-title-color, #3a2a1e);
  font-size: var(--eb-title-size, 45px);
}
.card-ebook .tpl-desc {
  color: var(--eb-desc-color, #6e5a48);
  font-size: var(--eb-desc-size, 25px);
}

/* ===== 4. 교구 템플릿 (베이지 톤) ===== */
.card-product {
  background: linear-gradient(180deg, var(--pr-bg-from, #F5EEE2) 0%, var(--pr-bg-to, #E8DCC8) 100%);
}

.card-product .tpl-badge {
  background: var(--pr-badge-bg, #3A332A);
}

.card-product .tpl-title {
  color: var(--pr-title-color, #2a2620);
  font-size: var(--pr-title-size, 45px);
}
.card-product .tpl-desc {
  color: var(--pr-desc-color, #6b635a);
  font-size: var(--pr-desc-size, 25px);
}