@charset "utf-8";

/* page - 마이페이지 */
.mypage-section .member-badge-box .title::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url(../../image/img_badge_01.png) no-repeat center center; background-size: contain; vertical-align: -3px; margin-right: 4px; }
.mypage-section .member-badge-box .link::after { content: ''; display: inline-block; width: 20px; height: 20px; background: url(../../image/icon/icon_arrow_right_black.svg) no-repeat center center; background-size: contain; vertical-align: -4px; }
.mypage-section .sub-link-box ul li a { position: relative; }
.mypage-section .sub-link-box ul li a::after { content: ''; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../../image/icon/icon_arrow_right_gray_700.svg) no-repeat center center; background-size: contain; }

/* page - 뱃지/캐시백 */
.badge-section .main-top-box .title-box { position: relative; padding-right: 80px; }
.badge-section .main-top-box .title-box::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 71px;
  height: 56px;
  background: url(../../image/img_badge_shine.webp) no-repeat center center;
  background-size: cover;
  z-index: 1;
}
.badge-section .main-top-box .btn::after { content: ''; display: inline-block; width: 18px; height: 18px; background: url(../../image/icon/icon_arrow_right_primary_500.svg) no-repeat center center; background-size: contain; vertical-align: -4px; margin-left: 4px; }
.badge-section .chart-box .x-label span:not(:first-of-type) { margin-right: -4px; }

/* page - 뱃지/캐시백-정보 */
.badge-info-section .main-top-box { position: relative; padding: 28px 20px; margin-top: 62px; }
.badge-info-section .main-top-box::before { content: ''; display: block; position: absolute; left: 50%; top: -62px; transform: translateX(-50%); width: 60px; height: 80px; background: url(../../image/img_badge_01.png) no-repeat center center; background-size: contain; z-index: 1; }
.badge-info-section .day-info-text { position: relative; padding-left: 22px; }
.badge-info-section .day-info-text .numb { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; font-size: 12px; font-weight: 700; color: var(--white); line-height: 16px; text-align: center; background: #20150c; border-radius: 50%; }
.badge-info-section .day-info-box { width: 100%; text-align: center; }
.badge-info-section .day-info-box > span { position: relative; display: block; width: 100%; font-size: 12px; color: var(--white); padding: 10px; background: #20150c; border-radius: 8px 8px 0 0; }
.badge-info-section .day-info-box > span::before,
.badge-info-section .day-info-box > span::after { content: ''; display: block ; position: absolute; top: -12px; width: 12px; height: 24px; background: #20150c; border: 1px solid var(--white); border-radius: 12px; z-index: 5; }
.badge-info-section .day-info-box > span::before { left: 40px; }
.badge-info-section .day-info-box > span::after { right: 40px; }
.badge-info-section .day-info-box ul { display: flex; width: 100%; padding: 10px 0; background: var(--gray-400); border-radius: 0 0 8px 8px; }
.badge-info-section .day-info-box ul li { width: 33.33%; padding: 20px 0 16px; }
.badge-info-section .day-info-box ul li:nth-of-type(2) { min-width: 120 px; }
.badge-info-section .day-info-box ul li + li { border-left: 1px solid rgba(32, 21, 12, 0.09); }
.badge-info-section .day-info-box ul li strong { display: inline-block; position: relative; font-size: 20px; font-weight: 500; color: #20150c; line-height: 120%; letter-spacing: -0.4px; }
.badge-info-section .day-info-box ul li:nth-of-type(2) strong::before { content: ''; display: block ; position: absolute; left: -15px; top: -17px; width: 17px; height: 24px; background: url(../../image/landing/PL1121/img_point_star.png) no-repeat center center; background-size: contain; }
.badge-info-section .day-info-box ul li p { position: relative; color: #20150c; }
.badge-info-section .day-info-box ul li p::after { content: ''; display: block ; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 94px; height: 9px; background: url(../../image/landing/PL1121/img_point_underscore.svg) no-repeat center center; background-size: contain; }
.badge-info-section .my-account-box .text { width: 55px; }
.badge-info-section .my-account-box .btn-eye { display: inline-block; width: 32px; height: 32px; background: url(../../image/btn/btn_eye_off.svg) no-repeat center center; background-size: 20px; text-indent: -9999px; overflow: hidden; }
.badge-info-section .my-account-box .btn-eye.on { background: url(../../image/btn/btn_eye_on.svg) no-repeat center center; background-size: 20px; }

/* page - 구독 해지 */
.answer-list-box li .btn { position: relative; border-bottom: 1px solid var(--primary-500); }
.answer-list-box li .btn::after { content: ''; display: block; position: absolute; right: -22px; top: 1px; width: 22px; height: 18px; background: url(../../image/icon/icon_arrow_right_primary_500.svg) no-repeat right center; background-size: contain; }
.popup-unsubscribe-coupon .coupon-box { display: inline-block; width: 178px; padding: 14px; background: url(../../image/bg_unsubscribe_coupon.svg) no-repeat center center; background-size: contain; }
.popup-unsubscribe-coupon .coupon-box .title { font-size: 10px; font-weight: 300; }
.popup-unsubscribe-coupon .coupon-box .price { font-size: 20px; }

/* page - 친구 초대 */
.invite-section .title-box { background: url(../../image/img_friends_highfive.png) no-repeat right bottom, linear-gradient(180deg, #FFF 0%, #F1FBF5 100%); background-size: 124px; }
.invite-section .benefit-box dl { position: relative; }
.invite-section .benefit-box dl:first-of-type::after { content: ''; display: block; position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); width: 32px; height: 32px; background: url(../../image/img_plus_circle.svg) no-repeat center center; background-size: contain; z-index: 1; }
.invite-section .benefit-box dl dt { border-radius: 8px 8px 0 0; }
.invite-section .benefit-box dl dd { border-radius: 0 0 8px 8px; }

/* page - 계좌정보 등록 */
.popup-bank-select .popup-inner { max-height: 432px; }
.popup-bank-select .bank-list-box li { width: calc(33.33% - 6px); margin-right: 9px; }
.popup-bank-select .bank-list-box li:nth-of-type(3n) { margin-right: 0; }
.popup-bank-select .bank-list-box li input + label { display: block; width: 100%; padding: 10px; background: var(--gray-400); border: 1px solid var(--gray-400); border-radius: 8px; }
.popup-bank-select .bank-list-box li input:checked + label { background: var(--primary-100); border: 1px solid var(--primary-500); }
.popup-account-info ul li { text-align: left; }
.popup-account-info ul li span { width: 55px; }
.popup-account-info ul li strong { width: calc(100% - 67px); }

/* page - 계좌정보등록 완료 */
.account-register-section .info-box ul li:last-of-type { border-left: 1px solid var(--gray-500); }

/* page - 쿠폰 */
.coupon-section .btn-add::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url(../../image/icon/icon_plus_primary.svg); background-size: contain; vertical-align: -4px; margin-right: 4px; }
.coupon-section .coupon-list .coupon-item { position: relative; }
.coupon-section .coupon-list .coupon-item .btn-use { position: absolute; right: 16px; bottom: 16px; }
.coupon-section .coupon-list .coupon-item .btn-use::after { content: ''; display: inline-block; width: 16px; height: 16px; background: url(../../image/icon/icon_arrow_right_black.svg); background-size: contain; vertical-align: -3px; margin-left: 4px; }

/* 섭취기록, 마케팅동의 팝업 */
.popup.on {display: block;}
.popup-wrap.type-normal {top:50%; transform: translate(-50%, -50%); max-width: 320px; padding: 24px 20px; border-radius: 12px; height: fit-content;}
.popup-wrap .popup-text {margin-bottom: 24px;}
.popup-wrap .popup-text h3 {font-size: 18px; font-weight: 700; line-height: 130%; letter-spacing: -0.36px; color: #222; text-align: center;}
.popup-wrap.type-normal .popup-button {padding: 0;}
.popup .popup-button .btn-popup {width: 100%; height: auto; border-radius: 8px; text-align: center; padding: 16px 20px; font-weight: 700; line-height: 140%; letter-spacing: -0.36px;}
.popup .popup-button .btn-popup.btn-line-primary {display: inline-block; width: 100%; margin-top: 8px; color: var(--primary-500); border: 1px solid var(--primary-500);}