/**
 * 메뉴 이미지 공통 4:3 비율
 * Safari: aspect-ratio만으로는 자식 height:100%가 안 잡히는 경우가 있어
 * wrap은 명시 크기/비율, img는 absolute로 채움
 */
.menu-img-43-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f5f5f5;
	isolation: isolate;
}

.menu-img-43-wrap > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* wrap 없이 단독 사용하는 경우 */
img.menu-img-43 {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 판매메뉴 목록 썸네일 — Safari용 명시 height(4rem × 3/4) */
.sale-menu-thumb {
	display: block;
	flex-shrink: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: 4px;
}

.sale-menu-thumb .menu-img-43-wrap {
	width: 4rem;
	height: 3rem;
	max-width: 4rem;
	max-height: 3rem;
	flex-shrink: 0;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
}

/* 배송 스케줄 카드 — 가로형(이미지 왼쪽) */
img.delivery-card-image {
	width: var(--fb-menu-thumb-w, var(--fb-regular-card-thumb, 68px));
	min-width: var(--fb-menu-thumb-w, var(--fb-regular-card-thumb, 68px));
	max-width: var(--fb-menu-thumb-w, var(--fb-regular-card-thumb, 68px));
	height: auto;
	aspect-ratio: 4 / 3;
	min-height: unset;
	max-height: unset;
	object-fit: cover;
	object-position: center;
	flex-shrink: 0;
	display: block;
}

/* 배송 스케줄 카드 — 세로형(이미지 상단) */
.delivery-card-admin .delivery-card-image,
.delivery-card-admin img.delivery-card-image {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.delivery-card-image--no-delivery {
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: unset;
}

/* 메뉴 선택 모달 카드 */
.menu-card-image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.menu-card-image-wrapper img,
.menu-card-image-wrapper .card-img-top,
#menuSelectModal .menu-select-grid-card .card-img-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

.menu-select-grid-card .menu-img-43-wrap {
	position: relative;
	overflow: hidden;
	background: #f5f5f5;
}

/* POS 개별주문 */
.pos .product .img,
.pos .modal-pos-product-img .img {
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}

/* 견적요청 정기메뉴 카드 */
.quotation-request-page .qr-rec-menu-card__img-wrap {
	flex: 0 0 96px;
	width: 96px;
	min-height: unset;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
}

.quotation-request-page .qr-rec-menu-card__img-wrap > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/**
 * 유부초밥 셋트
 * - 셋트 이미지: 단일 4:3 (좌우 변환·미러 없음)
 * - A=B: 단품 이미지 한 장
 * - 기본조합: 두 단품 사진을 사선으로 이어 붙임 (위 38% → 아래 69%, 안내선 없음)
 *   선택 순서가 바뀌면 좌·우에 올리는 단품만 교체(이미지는 뒤집지 않음)
 */
.menu-img-43-yubu-split {
	position: relative;
	display: block !important;
	overflow: hidden;
	padding: 0;
}

.menu-img-43-yubu-half {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	overflow: hidden;
	background: #f5f5f5;
}

.menu-img-43-yubu-half > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	-webkit-transform: none !important;
	transform: none !important;
}

/* 왼쪽 단품: 사선 왼쪽 (위 38% → 아래 69%) */
.menu-img-43-yubu-half--left {
	z-index: 2;
	clip-path: polygon(0 0, 38% 0, 69% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 38% 0, 69% 100%, 0 100%);
}

/* 오른쪽 단품: 사선 오른쪽 */
.menu-img-43-yubu-half--right {
	z-index: 1;
	clip-path: polygon(38% 0, 100% 0, 100% 100%, 69% 100%);
	-webkit-clip-path: polygon(38% 0, 100% 0, 100% 100%, 69% 100%);
}

.menu-img-43-yubu--thumb {
	width: 72px;
	height: 54px;
	max-width: 72px;
	max-height: 54px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
}

.menu-img-43-yubu--thumb.menu-img-43-yubu-split {
	width: 72px;
	height: 54px;
}

[data-bs-theme="dark"] .menu-img-43-yubu-half {
	background: #1e293b;
}