/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-121818
* CODE : Dev - EV00021361 , Prod - EV00009021
* CODE : Dev - PE00461001 , Prod - PE00884006
* FILE : kr/event/2026/03/31_lgdotcom_sns/css/event.css
* DESC : 브랜딩 연계 공유하기 이벤트(카톡공유, 즉성당첨)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2026/03/17				김기범				Created
************************************************************************************
**/
.lgdotcomSns-container .share-content .btn-wrap, .heart-count-wrap,.lgdotcomSns-container .img-size-normal{
	position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}
.share-content .btn-share-wrap {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(770 / 1380 * 100%);
    bottom: calc(0 / 1380 * 100%);
    gap: calc(9 / 1380 * 100%);
}
.share-content .btn-share-wrap a {
	width: calc(260 / 820 * 100%);
}
.share-content .guide-wrap {
	margin-top: calc(20 / 1380 * 100%);
}
.share-content .confirm-wrap {
	margin: calc(19 / 1380 * 100%) 0 calc(32 / 1380 * 100%) 0;
}
.share-content .confirm-wrap #confirmBtnA {
	font-size: 12px;
    font-weight: 500;
}
.lgdotcomSns-container .img-size-normal.mt32 {
	margin-top: 32px;
	padding-bottom: 64px;
}
.lgdotcomSns-container .evt-acco-area.acco-text-type {
	margin-top: calc(32 / 1380 * 100%);
}	
/* ========== 일일 하트  ========== */
.daily-heart-limit {
	display: flex;
	position: absolute;
    bottom: calc(28.5 / 149 * 100%);
    right: calc(79 / 820 * 100%);
}
.hearts-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* 하트 공통 */
.heart, .heart1, .heart2, .heart3 {
	display: block;
	flex-shrink: 0;
	width: 92px;
	height: 92px;
	background-color: transparent;
	background-image: url("/kr/event/2026/03/31_lgdotcom_sns/images/heart_grey.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	text-indent: -9999px;
	overflow: hidden;
}
/* 하트 빨간색 */
.daily-heart-limit .heart:first-child,
.daily-heart-limit .heart.on,
.daily-heart-limit .heart1.on,
.daily-heart-limit .heart2.on,
.daily-heart-limit .heart3.on {
	background-image: url("/kr/event/2026/03/31_lgdotcom_sns/images/heart_red.png");
}
.refresh-heart {
	position: absolute;
	top: calc(28.5 / 149 * 100%);
    right: calc(29 / 820 * 100%);
	width: 32px;
	height: 32px;
	background: url("/kr/event/2026/03/31_lgdotcom_sns/images/refresh-heart.png") no-repeat center / contain;
	border: 0;
	cursor: pointer;
	text-indent: -9999px;
	overflow: hidden;
}

/* ========== 팝업  ========== */
#prdCheckPop{
	max-width:324px;
    min-height: 343px !important;
	border-radius: 16px;
}
#prdCheckPop.popup-wrap .pop-conts{
    padding: 32px 20px;
}

#prdCheckPop.lose {
	min-height: auto !important;
	height: auto !important;
	max-height: none;
}
#prdCheckPop.popup-wrap .pop-conts .gift-product {
	gap: 30px;
    display: flex;
    flex-direction: column
}
#prdCheckPop.popup-wrap .pop-conts .gift-spot-result {
	display: flex;
    flex-direction: column;
}
#prdCheckPop.popup-wrap .pop-conts .gift-spot-result .gift-img{
    align-items: center;
    justify-content: center;
    display: flex;
}
/* win: gift-txt 숨김 */
#prdCheckPop.popup-wrap .pop-conts .gift-spot-result.win .gift-txt{
	display: none;
}
/* lose: gift-img 숨김, gift-txt 표시 */
#prdCheckPop.popup-wrap .pop-conts .gift-spot-result.lose .gift-img{
	display: none;
}
#prdCheckPop.popup-wrap .pop-conts .gift-spot-result.lose .gift-txt{
	display: block;
}
#prdCheckPop #giftPhrase {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: 'Pretendard';
}
#prdCheckPop #giftPhrase .main-txt {
	font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
#prdCheckPop #giftPhrase .sub-txt {
	font-size: 12px;
    color: #777777;
    line-height: 1.35;
}
#prdCheckPop.popup-wrap .pop-conts .btn-group{
	width:100%;
	text-align: center
}
#prdCheckPop.lose.popup-wrap .pop-conts .btn-group {
	position: static;
	left: auto;
	bottom: auto;
	margin-top: 1.25em;
	padding: 0 1.875em 2em;
	flex-shrink: 0;
}
#prdCheckPop.popup-wrap .pop-conts .btn-group button {
	width: 100%;
	height: 56px;
	padding: 8px 24px;
	border-radius: 8px;
	background: #111111;
	color: #fff;
	font-family: Pretendard;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.64px;
}
#prdCheckPop.popup-wrap>.btn-close{
	top: 20px;
	right: 20px;
}
#prdCheckPop .share-limit .btn-pop-close{
    display: none;
}
#prdCheckPop .share-limit[data-count="3"] #reShowGift, #prdCheckPop .share-limit.share-out #reShowGift{
    display: none;
}
#prdCheckPop .share-limit[data-count="3"] .btn-pop-close, #prdCheckPop .share-limit.share-out .btn-pop-close{
    display: inline-block;
}

@media screen and (max-width: 900px) {
	.heart, .heart1, .heart2, .heart3 {
		width: 10.2vw;
		height: 10.2vw;
	}
	.refresh-heart {
		width: 3.5vw;
		height: 3.5vw;
	}
}

@media screen and (max-width: 767px) {
	.share-content .btn-share-wrap {
		width: 90%;
		height: calc(167 / 390 * 100%);
        bottom: calc(72 / 390 * 100%);
        gap: calc(11 / 390 * 100%);
		margin-left: var(--evt-size-20);
	}
	.share-content .btn-share-wrap a {
		width: 100%;
		height: 100%;
	}
	.share-content .guide-wrap {
		margin-bottom: calc(12 / 390 * 100%);
	}
	.share-content .confirm-wrap {
		margin: var(--evt-size-2) 0 var(--evt-size-20);
	}
	.share-content .confirm-wrap #confirmBtnA {
		font-size: var(--evt-size-12);
	}
	.heart-count-wrap, .lgdotcomSns-container .img-size-normal {
		padding: 0 var(--evt-size-20);
	}
	.daily-heart-limit {
		bottom: calc(32 / 241 * 100%);
		left: calc(73 / 720 * 100%);
	}
	.hearts-wrap {
		gap: calc(5 / 390 * 100vw);
	}
	.heart, .heart1, .heart2, .heart3 {
		width: calc(74 / 390 * 100vw);
        height: calc(74 / 390 * 100vw);
	}
	.refresh-heart {
		top: calc(21.5 / 241 * 100vw);
        right: calc(40 / 350 * 100vw);
		width: calc(5.6vw + 0.6rem);
        height: calc(5.6vw + 0.6rem);
	}
	.lgdotcomSns-container .evt-acco-area.acco-text-type {
		margin-top: calc(32 / 700 * 100%);
	}	

	#prdCheckPop {
		max-width: 308px;
        min-height: 332px !important;
        top: 50% !important;
        left: 50% !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
	}
	#prdCheckPop.lose.popup-wrap .pop-conts{
		height: 100%;
    	max-height: 100%;
	}
	#prdCheckPop.popup-wrap .pop-conts .btn-group button {
		width: 211px;
		height: 54px;
	}
}