/* 상품 라벨 공통 (daysend.css와 분리 — #daysend / daysend_label 미사용)
 *
 * 기준: 상품 이미지 컨테이너 가로 224px 일 때
 *  - 키프데이·당일발송·순위 배지 높이 26px
 *  - 벌크 가로 66px
 * 컨테이너(.goods-label-thumb) 크기에 비례해 축소·확대 (원본 비율 유지)
 * 예: 148px ≈ 66%, 178px ≈ 80%, 224px = 100%
 * 벌크 우·하 여백 5px 고정
 *
 * !important: 페이지의 `.imgarea img{width:…}` 등 공통 img 규칙이
 * 라벨까지 덮어쓰지 않도록 크기만 방어 (위치·여백은 일반 우선순위)
 */

.goods-label-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	/* 컨테이너 가로 기준 스케일 (cqw) */
	container-type: inline-size;
	container-name: goods-label-thumb;
	/* 224px 기준 → 현재 컨테이너 가로에 비례 */
	--goods-label-h: calc(26 / 224 * 100cqw);
	--goods-label-bulk-w: calc(66 / 224 * 100cqw);
	--goods-label-rank-crown: calc(8 / 224 * 100cqw);
	--goods-label-rank-font: calc(12 / 224 * 100cqw);
}

.goods-label {
	position: absolute;
	z-index: 2;
	border: 0 !important;
	margin: 0;
	padding: 0;
	pointer-events: none;
	/* 페이지 img width/max-height 충돌 차단 */
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
}

/* 키프데이: 좌상단 밀착 — 높이 스케일, 가로 비율 유지 */
.goods-label--friday {
	top: 0;
	left: 0;
	width: auto !important;
	height: 26px; /* cqw 미지원 폴백 (224px 기준) */
	height: var(--goods-label-h) !important;
}

/* 당일발송: 우상단 밀착 — 높이 스케일, 가로 비율 유지 */
.goods-label--sameday {
	top: 0;
	right: 0;
	width: auto !important;
	height: 26px;
	height: var(--goods-label-h) !important;
}

/* 벌크: 우하단, 여백 5px 고정, 가로 스케일·비율 유지 */
.goods-label--bulk {
	right: 5px;
	bottom: 5px;
	width: 66px;
	width: var(--goods-label-bulk-w) !important;
	height: auto !important;
}

/*
 * 순위 배지(.label_1)가 있는 썸네일 전용
 * - 순위 HTML·색상(label_1/label_2)·순위 숫자는 페이지 기존 출력 유지
 * - 높이는 키프데이와 동일, 너비=높이(1:1), 숫자는 가로·세로 중앙
 * - 키프데이는 순위 div 오른쪽에 여백 없이 배치
 * - 이 클래스가 없는 페이지는 위 기본 좌상단 키프데이 배치 유지
 */
.goods-label-thumb--with-rank .label_1 {
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
	top: 0 !important;
	left: 0 !important;
	width: 26px !important;
	height: 26px !important;
	width: var(--goods-label-h) !important;
	height: var(--goods-label-h) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	text-align: center !important;
	z-index: 3;
	overflow: hidden;
}

.goods-label-thumb--with-rank .label_1 > img {
	max-height: 8px;
	max-height: var(--goods-label-rank-crown);
	width: auto;
	border: 0 !important;
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.goods-label-thumb--with-rank .label_1 > p {
	color: #fff;
	font-size: 12px;
	font-size: var(--goods-label-rank-font);
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.goods-label-thumb--with-rank .goods-label--friday {
	top: 0;
	left: 26px;
	left: var(--goods-label-h);
	height: 26px;
	height: var(--goods-label-h) !important;
	width: auto !important;
}