@charset "utf-8";

/** 추천결과지 (결제전 + 결제후) **/
.pack_info { margin-top: 32px; }
.pack_info .pack_info_title { font-size: 20px; font-weight: 700; }
.pack_info .right { width: 100%; font-size: var(--font-large); font-weight: 700; text-align: right; margin-top: 8px; }
.pack_info .right .price { display: inline-block; color: var(--color-main); margin-left: 4px; }

.guide_box { margin-top: 24px; }
.guide_box > li { display: flex; align-items: center; width: 100%; padding: 24px; background: #ffffff; border: var(--border); border-radius: var(--border-radius); margin-bottom: 8px; } 
.guide_box > li:last-of-type { margin-bottom: 0; }
.guide_box .icon_box { display: inline-block; width: 48px; height: 48px; }
.guide_box .icon_sleep { background: url(../../image/icon/icon_sleep.webp) no-repeat center center; background-size: contain; }
.guide_box .icon_clock { background: url(../../image/icon/icon_clock_red.webp) no-repeat center center; background-size: contain; }
.guide_box dl { width: calc(100% - 60px); margin-left: 12px; }
.guide_box dl dt { font-size: var(--font-medium); font-weight: 700; line-height: 26px; }
.guide_box dl dd { font-size: var(--font-regular); font-weight: 500; color: var(--color-black-70); line-height: 22px; margin-top: 4px; }

.share_box { position: relative; width: 100%; padding: 105px 20px 20px; background: #34364D; border-radius: var(--border-radius); margin-top: 140px; }
.share_box::before { position: absolute; left: 54%; top: -100px; transform: translateX(-50%); width: 270px; height: 180px; background: url(../../image/sub_mypage/img_share.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 5; }
.share_box .text { text-align: center; }
.share_box .text h3 { font-size: 20px; font-weight: 700; color: var(--color-white); line-height: 26px; }
.share_box .text p { font-size: var(--font-regular); font-weight: 500; color: var(--color-white); line-height: 20px; margin-top: 8px; }
.share_box .text p b { font-weight: 700; color: var(--color-kakao); }
.share_box .btn_box { display: flex; justify-content: space-between; margin-top: 24px; }
.share_box .btn_box button { display: block; height: 56px; font-size: var(--font-regular); font-weight: 700; line-height: 56px; text-align: center; border-radius: var(--border-radius); }
.share_box .btn_box .btn_url { width: 38%; background: #ffffff; }
.share_box .btn_box .btn_kakao { width: 60%; background: var(--color-kakao); }
.share_box .btn_box .btn_kakao::before { width: 20px; height: 19px; background: url(../../image/icon/icon_kakao_s.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-right: 8px; }