/*
 * 월별 가변 스타일
 * N/HOT 배지, 플랜 버튼 배지, 상품 라벨처럼 소식지 구성에 따라 자주 추가·변경되는 요소만 관리합니다.
 */

/* 플랜 버튼의 Click 배지 */
.plan-switch-btn--badge { position: relative; }
.plan-switch-btn--badge::before {content: "Click"; position: absolute; top: 10px; left: 12px; padding: 4px 10px; border-radius: 8px; background: #a28d79; color: #fff; font-size: 20px; font-weight: 700; line-height: 1;}
.plan-switch-btn--badge:hover::before,
.plan-switch-btn--badge:focus-visible::before,
.plan-switch-btn--badge.is-active::before { background: #fff; color: #181818;}

/* 탭의 N / HOT 배지 */
.tab-new { display: flex; align-items: center; justify-content: center; gap: 4px;}
.new { display: inline-flex;align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; color: #fff; background-color: #e44242; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0; clip-path: polygon(50% 0%, 68% 24%, 96% 35%, 78% 63%, 79% 92%, 50% 82%, 21% 92%, 22% 63%, 4% 35%, 32% 24%); transform: translateY(1px);}
.new:not(.hot) { font-size: 0; }
.new:not(.hot)::before { content: "N"; display: block; font-size: 9px; font-weight: 700; line-height: 1; transform: translateY(1px);}
.new.hot { width: auto; min-width: 32px; height: 20px; padding: 0 5px; border-radius: 999px; clip-path: none; font-size: 10px;}

/* 상품명 옆 프로모션 라벨 */
.product-label {
  --label-bg: #fff;
  --label-color: #a28d79;

  display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; padding: 2px 9px; background: var(--label-bg); color: var(--label-color); border: 1px solid currentColor; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; vertical-align: 2px; white-space: nowrap;}
.product-label.pick { --label-bg: #615a53; --label-color: #fde5a4; }
.product-label.max { --label-bg: #f9dec4; --label-color: #db822e; }
.product-label.limited { --label-bg: #fde5a4; --label-color: #615a53; }
.product-label.package { --label-bg: #dcc7ec; --label-color: #705783; }
.product-label.reopen { --label-bg: #f1cbcc; --label-color: #854545; }

@media (max-width: 640px) {
  .plan-switch-btn--badge::before { top: 8px; left: 10px; padding: 3px 8px; border-radius: 7px; font-size: 11px;}
  .new { width: 15px; height: 15px; font-size: 10px; }
  .new:not(.hot) { width: 22px; height: 22px; }
  .new:not(.hot)::before { font-size: 8px; }
  .new.hot { min-width: 25px; padding: 0 3px; font-size: 8px; }
}