/*#################################################################################################
#########	홍보형 썸네일 (2026-10-26) — 상품 데이터로 그리는 카드 썸네일 (include/main.promo.php mainPromoThumb · mainPromoThumbB)
#########	- v5 메인(main5.css 다음)과 관리자 상품 등록 미리보기(Form/_adm/form/item.form.html)가 같이 씀 — 사이트 변수(--font-ko 등)가 없는 곳도 되게 기본값을 둠
#########	- 썸네일을 담는 칸에 container-type: inline-size 가 있어야 함 (모든 크기를 칸 폭 기준 cqw 로) : .promo-frame 또는 v5 카드 칸
#################################################################################################*/
.promo-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; background: #0e1623; container-type: inline-size; }	/* 관리자 미리보기 · 이미지 저장용 칸 */
/* 홍보형 썸네일 (include/main.promo.php, $main5CardAr = promo) — 5:4, 모든 크기를 카드 폭 기준(cqw)으로 잡아 카드가 작아져도 같은 구도
   · 2026-10-26 차분하게 : 빛번짐 · 그라데이션 글자 · 기울임 · 마우스 올림 움직임 없음, 상품 색은 상품명 끝 단어에만, 화면은 아래로 잘려 나가는 구도
   · 배경 : 격자 없이 상품 색이 아주 옅게 스민 짙은 그라데이션 + 위에서 내려오는 부드러운 빛 / 글자 : 카드가 작아져도(4열) 최소 크기 유지, 상품명은 상품마다 같은 크기
   · 왼쪽 정렬, 업데이트일은 오른쪽 위 칩, 화면은 오른쪽 · 아래로 잘려 나감, 오른쪽 아래에 아이콘 하나만 */
.v5-m3 .item--promo .item__thumb, .all-item__visual--promo { aspect-ratio: 5 / 4; background: #0e1623; container-type: inline-size; }	/* BEST 3 카드 · 전체 프로그램 목록 카드 */	/* 크기 기준(cqw) = 썸네일 칸 폭 — 안쪽 상자의 여백까지 같은 기준으로 */
/* 배치 : 위에서부터 차례로 (소개 · 업데이트 줄 → 상품명 → 프로그램 화면) — 기준 여백 하나(--pad, 카드 폭 7%)로 위 · 좌우 · 아이콘 여백을 맞춤
   · 간격 : 소개 ↔ 상품명은 좁게(1.8cqw), 상품명 ↔ 화면은 넓게(--pad) / 화면은 남는 높이를 채우고 오른쪽 · 아래로 잘려 나감 (위 글자 : 화면 ≈ 3 : 5) */
.promo-thumb { --pad: 7cqw; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: var(--pad) var(--pad) 0; isolation: isolate; color: #fff; text-align: left; background: radial-gradient(90% 60% at 50% -12%, rgba(255, 255, 255, .09), transparent 70%), linear-gradient(180deg, var(--promo-bg) 0%, #0d131c 78%); }
.promo-thumb__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 3cqw; min-width: 0; }
.promo-thumb__head { min-width: 0; font-size: max(13px, 4cqw); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-thumb--head-s .promo-thumb__head { font-size: max(12px, 3.8cqw); }	/* 긴 소개 문구 */
.promo-thumb__update { display: flex; flex: none; align-items: center; gap: 1cqw; padding: 1.3cqw 2.4cqw 1.3cqw 2cqw; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: max(11px, 3.1cqw); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, .62); white-space: nowrap; }	/* 소개 줄 오른쪽 업데이트일 (같은 높이 가운데) */
.promo-thumb__update svg { width: max(10px, 3cqw); height: max(10px, 3cqw); color: rgba(255, 255, 255, .5); }
.promo-thumb__update time { font-family: var(--font-en, 'Montserrat', 'Pretendard', sans-serif); font-size: max(11px, 3.3cqw); font-weight: 600; color: rgba(255, 255, 255, .9); }
.promo-thumb__name { flex: none; margin-top: 1.8cqw; font-family: 'Google Sans Flex', var(--font-ko, 'Pretendard', system-ui, sans-serif);	/* DB 탭(A형)만 Google Sans Flex — B형(블로그 · SNS)은 프리텐다드 */ font-size: max(24px, 8.6cqw); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.promo-thumb--name-s .promo-thumb__name { font-size: max(20px, 7.2cqw); }	/* 18자 이상 아주 긴 이름만 */
.promo-thumb__name em { font-style: normal; color: var(--promo-text); }
.promo-thumb__shot { flex: 1 1 0; min-height: 0; margin: var(--pad) calc(-1 * var(--pad) - 4cqw) 0 0; overflow: hidden; border-radius: 1.4cqw 0 0 0; border: .25cqw solid rgba(255, 255, 255, .12); border-right: 0; border-bottom: 0; background: #0d1522; box-shadow: -1cqw -1cqw 5cqw rgba(0, 0, 0, .3); }	/* 남는 높이를 채우고 오른쪽 · 아래로 잘려 나감 */
.promo-thumb__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo-thumb::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 42%; background: linear-gradient(180deg, rgba(12, 18, 28, 0) 0%, rgba(12, 18, 28, .28) 45%, rgba(12, 18, 28, .62) 100%); pointer-events: none; }	/* 아래쪽을 살짝 어둡게 (화면 위로 천천히 깔림) */
.promo-thumb__icon { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 2; width: 15cqw; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .14), 0 1.6cqw 4cqw rgba(0, 0, 0, .5); }	/* 오른쪽 아래 아이콘 하나 — 기준 여백과 같은 자리 */
.promo-thumb--noshot .promo-thumb__icon { right: 50%; bottom: 14cqw; width: 24cqw; transform: translateX(50%); }	/* 화면 이미지가 없으면 가운데 크게 */
.promo-thumb__icon .product-icon { display: block; width: 100%; height: 100%; border-radius: 22%; }
/* 홍보형 B (블로그 · SNS 탭, mainPromoThumbB) — 참고 썸네일 구도 : 남색 격자 + 가운데 소개 · 상품명 / 가운데 프로그램 화면 / 왼쪽 아래 업데이트일 상자 / 오른쪽 아래 큰 아이콘 */
.promo-thumb--b { display: block; padding: 0; text-align: center; background: radial-gradient(55% 60% at 80% 80%, var(--promo-light), transparent 72%), radial-gradient(45% 38% at 50% 56%, var(--promo-soft), transparent 72%), linear-gradient(145deg, var(--promo-bg0) 0%, var(--promo-bg1) 42%, var(--promo-end) 100%); }	/* 시안 그라데이션을 상품 색으로 : 왼쪽 위 상품 색이 짙게 가라앉은 어두운 색 → 오른쪽 아래 밝은 상품 색 빛 (바탕 · 빛 · 격자 모두 상품마다) */
.promo-thumb--b::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--promo-grid) 1px, transparent 1px) 0 0 / 1.7cqw 1.7cqw, linear-gradient(90deg, var(--promo-grid) 1px, transparent 1px) 0 0 / 1.7cqw 1.7cqw; -webkit-mask-image: linear-gradient(145deg, rgba(0, 0, 0, .35) 10%, #000 85%); mask-image: linear-gradient(145deg, rgba(0, 0, 0, .35) 10%, #000 85%); pointer-events: none; }	/* 촘촘한 격자 — 왼쪽 위는 옅게, 오른쪽 아래로 갈수록 선명하게 */
.promo-thumb--b::after { content: none; }
.promo-thumb--b .promo-thumb__head { position: absolute; top: 7.2cqw; right: 6cqw; left: 6cqw; font-size: max(14px, 4.6cqw); font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; color: #fff; }
.promo-thumb--b.promo-thumb--head-s .promo-thumb__head { font-size: max(13px, 4cqw); }
.promo-thumb--b .promo-thumb__name { position: absolute; top: 15.4cqw; right: 5cqw; left: 5cqw; margin: 0; font-family: var(--font-ko, 'Pretendard', system-ui, sans-serif); font-size: max(22px, 8.6cqw); font-weight: 700; line-height: 1.2; overflow: visible; background: linear-gradient(180deg, #fff 30%, var(--promo-name) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1.4cqw var(--promo-soft)); }	/* 시안처럼 흰색 → 아래로 상품 색이 살짝 스밈 */
.promo-thumb--b.promo-thumb--name-s .promo-thumb__name { font-size: max(19px, 7cqw); }	/* 21자 이상만 */
.promo-thumb--b .promo-thumb__shot { position: absolute; top: 30cqw; left: 18.6cqw; width: 62.8cqw; height: 41cqw; margin: 0; border: .2cqw solid var(--promo-edge); border-radius: 1.2cqw; box-shadow: 0 0 3.6cqw var(--promo-glow), 0 2.4cqw 6cqw rgba(0, 0, 0, .45); }	/* 시안 비율 (폭 약 62%) · 정가운데 · 원본처럼 상품 색 빛 그림자 + 깊은 그림자 (box-shadow 라 가벼움) */
/* 화면 이미지 옅게 (2026-10-27) — 썸네일이 여러 장 모이면 시선이 흩어져서, 화면은 옅게 두고 카드에 마우스를 올리면 또렷하게
   - 사이트 카드에만 (관리자 미리보기 · 이미지로 저장 결과는 선명하게), 마우스가 있는 기기에만 (휴대폰은 올릴 수 없으니 늘 선명)
   - 값은 사용자 결정 (2026-10-27 : 흐림 · 채도 빼고 투명도 .65 만 (.5 에서 올림) — 앞서 흐림 1.6px→.6px · 채도 .5 · 투명도 .8 을 거쳐 정함)
   - 컨테이너(.promo-thumb__shot)가 아니라 img 에 거는 이유 : 칸마다 이미지가 1장이라 그리는 양은 같고, 컨테이너에 걸면 테두리 · 상품 색 빛 그림자까지 옅어짐 */
@media (hover: hover) {
	.v5-m3 .item--promo .promo-thumb--b .promo-thumb__shot img, .all-item__visual--promo .promo-thumb--b .promo-thumb__shot img { opacity: .65; transition: opacity .45s ease; }
	.v5-m3 .item--promo:hover .promo-thumb__shot img, .v5-m3 .item--promo:focus-within .promo-thumb__shot img, .all-item__link:hover .promo-thumb__shot img, .all-item__link:focus-within .promo-thumb__shot img { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.v5-m3 .item--promo .promo-thumb--b .promo-thumb__shot img, .all-item__visual--promo .promo-thumb--b .promo-thumb__shot img { transition: none; }
}
.promo-thumb--b .promo-thumb__stamp { position: absolute; bottom: 5.8cqw; left: 5.2cqw; z-index: 2; display: flex; align-items: center; gap: 1cqw; margin: 0; padding: 1.5cqw 2.6cqw 1.5cqw 2.2cqw; border: .2cqw solid rgba(255, 255, 255, .2); border-radius: 1.3cqw; background: rgba(6, 10, 18, .88); font-size: max(11px, 3.2cqw); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: rgba(255, 255, 255, .72); white-space: nowrap; }	/* 왼쪽 아래 업데이트일 (두 줄 문구 상자 자리, 같은 각진 상자) */
.promo-thumb--b .promo-thumb__stamp svg { width: max(10px, 3.1cqw); height: max(10px, 3.1cqw); color: rgba(255, 255, 255, .55); }
.promo-thumb--b .promo-thumb__stamp time { font-family: var(--font-en, 'Montserrat', 'Pretendard', sans-serif); font-size: max(12px, 3.5cqw); font-weight: 700; color: #fff; }
.promo-thumb--b .promo-thumb__icon { right: 6cqw; bottom: 5.4cqw; width: 16cqw; box-shadow: none; filter: drop-shadow(0 0 2.4cqw var(--promo-glow)) drop-shadow(0 1.6cqw 2.6cqw rgba(0, 0, 0, .5)); transform: rotate(var(--promo-icon-tilt, 0deg)); }	/* 아이콘 기울기 : 지금은 정방향 0deg — 시안처럼 기울이려면 .promo-thumb--b { --promo-icon-tilt: 5deg; } (2026-10-26 기록, 시계 방향 5도였음) */	/* 시계 방향 5도, 깊은 그림자 + 은은한 테두리 빛 (크기는 시안보다 작게 16%) */
.promo-thumb--b.promo-thumb--noshot .promo-thumb__icon { right: 50%; bottom: auto; top: 32cqw; width: 24cqw; transform: translateX(50%); }	/* 화면 이미지가 없으면 가운데 */