/* ===== .charge-bonus pre 내용 레이아웃 정리 ===== */

/* 추가혜택 영역: span(라벨)과 pre(혜택 내용) 가로 정렬 */
.charge-bonus {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	line-height: normal;
	padding: 8px 0px 8px 20px;
}

/* pre 기본값(고정폭 폰트, 공백 보존, 기본 margin) 제거 */
.charge-bonus pre {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	white-space: normal;
	word-break: keep-all;
	background: transparent;
	border: 0;
	line-height: 1.4;
}

/* pre 안에서 감싸는 래퍼 */
.charge-bonus pre .ac {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.charge-bonus pre .pos_r {
	position: relative;
}

/* 혜택 리스트 공통: 가로 플렉스 정렬 + 리스트 스타일 제거 */
.charge-bonus .cash_benefit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.charge-bonus .cash_benefit>li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

/* 아이콘 */
.charge-bonus .cash_benefit .picon img,
.charge-bonus .cash_benefit .icon_sortL {
	display: block;
	max-height: 18px;
	width: auto;
	vertical-align: middle;
}

/* 포인트(기본) */
.charge-bonus .cash_benefit .point strong {
	font-weight: 600;
	color: #222;
}

/* × 3배 같은 배수 표기 */
.charge-bonus .cash_benefit .times strong {
	font-weight: 600;
	color: #4fa651;
	margin: 0 2px;
}

/* = 3,000P 같은 결과 표기 (원본 inline style 대체용) */
.charge-bonus .cash_benefit li strong {
	display: inline-block;
}

/* 쿠폰 관련 */
.charge-bonus .cash_benefit .coupon,
.charge-bonus .cash_benefit .coupon_num {
	color: #444;
}

/* 정렬 유틸(원본에서 사용되던 클래스) */
.charge-bonus .cash_benefit .ar {
	justify-content: flex-end;
	text-align: right;
}

.charge-bonus .cash_benefit .ac {
	justify-content: center;
	text-align: center;
}

.charge-bonus .cash_benefit .al {
	justify-content: flex-start;
	text-align: left;
}