@charset "utf-8";
/** 선물함 **/
.mypage_gift { padding-bottom: 50px; } 
.section_title { font-size: 20px; font-weight: 700; line-height: 28px; margin-bottom: 8px; } 

/* TAB */
.tab_nav { width: 100%; display: flex; justify-content: space-between; margin-top: 24px; } 
.tab_nav > li { width: 50%; font-size: var(--font-regular); font-weight: 700; color: var(--color-gray); line-height: 50px; text-align: center; border-bottom: 2px solid #D9DBE9; cursor: pointer; } 
.tab_nav > li.on { color: var(--color-main); border-bottom: 2px solid var(--color-main); } 
.tab_cont { margin-top: 24px; } 
.tab_cont .tab_box { display: none; width: 100%; } 
.tab_cont .tab_box.on { display: block; } 

/* LIST - 받은선물 */
.gift_receive_list ul li { margin-bottom: 16px; }
.gift_receive_list ul li:last-of-type { margin-bottom: 0; }
.gift_receive_list .item { position: relative; display: flex; flex-direction: column; width: 100%; padding: 16px 20px; background: #ffffff; border: 1px solid var(--gray-300) ; border-radius: var(--border-radius-s); overflow: hidden; }
.gift_receive_list .top { display: flex; justify-content: space-between; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--gray-300); }
.gift_receive_list .top .from { font-size: var(--font-regular); font-weight: 600; line-height: 18px; }
.gift_receive_list .top .date { font-size: 13px; font-weight: 400; color: var(--color-black-70); line-height: 18px; }
.gift_receive_list .info_box { display: flex; align-items: center; width: 100%; padding: 12px 0; }
.gift_receive_list .info_box .img_box { display: flex; flex-direction: column; justify-content: center; width: 60px; height: 60px; padding: 11px; background: #FFF; border: 1px solid var(--gray-300); border-radius: 4px; }
.gift_receive_list .info_box .text_box { flex: 1; width: calc(100% - 70px); margin-left: 8px; }
.gift_receive_list .info_box .text_box .name { display: flex; font-size: 18px; font-weight: 500; color: var(--gray-900); line-height: 22px; }
.gift_receive_list .info_box .text_box .name em { flex: 1; display: inline-block; font-size: 14px; font-weight: 500; color: var(--purple); vertical-align: 1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-left: 6px; }
.gift_receive_list .info_box .period { font-size: 14px; font-weight: 500; color: var(--gray-500); line-height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.gift_receive_list .detail { position: relative; width: 100%; padding-right: 80px; }
.gift_receive_list .detail .numb { font-size: 13px; font-weight: 400; color: var(--color-black-70); }
.gift_receive_list .detail .numb strong { font-weight: 400; color: var(--color-black); }
.gift_receive_list .detail .deadline { font-size: 13px; font-weight: 400; color: var(--color-main); margin-top: 4px; }
.gift_receive_list .detail .btn_use { position: absolute; right: 0; bottom: 0; display: inline-block; height: 34px; font-size: var(--font-small); font-weight: 500; color: var(--color-white); line-height: 34px; padding: 0 12px; background: var(--color-main); border-radius: 4px; z-index: 5; }
/*// complete */
.gift_receive_list .item.complete { background: #F9F9F9; }
.gift_receive_list .item.complete .info_box .img_box { background: var(--gray-50); }
.gift_receive_list .item.complete .info_box .img_box img { filter: grayscale(100%);}
.gift_receive_list .item.complete .top .from,
.gift_receive_list .item.complete .info_box .text_box .name,
.gift_receive_list .item.complete .detail .numb strong,
.gift_receive_list .item.complete .detail .deadline { color: var(--color-black-70); }
.gift_receive_list .item.complete .top .date,
.gift_receive_list .item.complete .info_box .text_box .name em,
.gift_receive_list .item.complete .detail .numb,
.gift_receive_list .item.complete .detail .btn_use { color: var(--color-black-40); }
.gift_receive_list .item.complete .detail .btn_use { background: transparent; pointer-events: none; }

/* LIST - 보낸선물 */
.gift_send_list ul li { margin-bottom: 16px; }
.gift_send_list ul li:last-of-type { margin-bottom: 0; }
.gift_send_list .item { display: flex; flex-direction: column; width: 100%; padding: 16px; background: #ffffff; border: var(--border); border-radius: var(--border-radius-s); overflow: hidden; }
.gift_send_list .top { display: flex; justify-content: space-between; width: 100%; padding: 8px 0; }
.gift_send_list .top .to { font-size: 16px; font-weight: 500; line-height: 18px; }
.gift_send_list .top .btn_view { display: inline-block; font-size: 13px; font-weight: 500; color: var(--color-black-70); line-height: 18px; }
.gift_send_list .top .btn_view::after { width: 13px; height: 13px; background: url(../../image/icon/icon_arrow_rt.svg) no-repeat center center; vertical-align: -2px; content: ''; display: inline-block; opacity: 0.8; margin-left: 4px; }
.gift_send_list .info_box { display: flex; width: 100%; margin-top: 16px; }
.gift_send_list .info_box .img_box { display: flex; flex-direction: column; justify-content: center; width: 96px; height: 96px; padding: 8px; background: #FAFAFA; border: 1px solid #EEECF2; border-radius: 4px; }
.gift_send_list .info_box .img_box img { max-height: 100%; max-height: 100%; }
.gift_send_list .info_box .text_box { flex: 1; width: calc(100% - 108px); margin-left: 12px; }
.gift_send_list .info_box .text_box .type { font-size: 13px; font-weight: 500; color: var(--color-black-70); line-height: 18px; }
.gift_send_list .info_box .text_box .name { font-size: 18px; font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 4px; }
.gift_send_list .info_box .text_box .period { font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 4px; }
.gift_send_list .info_box .text_box .desc { font-size: 16px; font-weight: 600; color: var(--purple); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 12px; }
.gift_send_list .detail { width: 100%; margin-top: 16px; }
.gift_send_list .detail p { font-size: 13px; font-weight: 400; color: var(--color-black-40); line-height: 20px; }
.gift_send_list .detail p strong { font-weight: 400; color: var(--color-black); }

/* 목록 없을 때 */
.none_data_box { width: 100%; text-align: center; background: #FAFAFA; padding: 14px; } 
.none_data_box i { display: inline-block; margin-bottom: 8px; }
.none_data_box i.icon_heart { width: 36px; height: 36px; background: url(../../image/icon/icon_heart.svg) no-repeat center center; background-size: contain; } 
.none_data_box i.icon_present { width: 36px; height: 46px; background: url(../../image/icon/icon_present.svg) no-repeat center center; background-size: contain; } 
.none_data_box p { font-size: var(--font-regular); font-weight: 500; line-height: 22px; word-break: keep-all; }