@charset "utf-8";

/* 브랜드톡 미리보기 전용 CSS */
/* 에뮬레이터 */
.templateWrap{display: flex; gap: 164px;}
.templateWrap .templMockupWrap{position: sticky; top: 0; align-self: flex-start; height: auto; width: 290px;}
.templateWrap .templMockupWrap .phoneWrap{width: 290px; min-height: 568px; background-color: #B2C2D2; border: 6px solid #000; border-radius: 40px; margin: 0; padding: 36px 0px 19px 19px;}
.templateWrap .templMockupWrap .phoneWrap::before{ content: ''; display: block; width: 12px; height: 12px; background-color: #000; border-radius: 50%; position: absolute; top: 22px; left: 50%;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap{position: relative; min-height: 80px; padding-left: 35px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap::before { content: ''; position: absolute; left: 0; width: 26px; height: 26px; background: url('../images/emulicon_logo.png') no-repeat center / auto 26px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .agentname{font-size: 8px; font-weight: bold;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox {width: 204px; border-radius: 10px; overflow: hidden; margin-top: 5px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox .simulatorImgWrap .simulatorImg {height: 272px; width: 100%; background:url('../images/emulicon_default2.png'); background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .text-sub_2{ font-size: 7px; color: #333333; margin: 3px 25px 0 0; text-align: right;}
.phoneWrap .simulatorBtnWrap {display: flex; margin: 0 6px; gap: 2px;}
.phoneWrap .simulatorBtnWrap .btnStyle11 {padding: 6px 10px; border-radius: 4px; height: 28px; overflow: hidden; text-overflow: ellipsis; font-size: 11px;text-align: center; width: 100%;}
.phoneWrap .simulatorBtnWrap .btnStyle11.NewLgray {background-color: #E6E6E6; color: #333333 !important;}
.phoneWrap .simulatorBtnWrap .btnStyle11.NewLyellow {background-color: #FEE500; color: #000000 !important;}
.templateWrap .templMockupWrap .phoneWrap .phonebodybox .text-sub-wrap{min-height: 80px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodybox .text-sub-wrap .simulatorTextWrap {padding: 10px 6px; min-height: 80px; background: #fff;}

/*이미지형*/
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.default .simulatorImgWrap .simulatorImg{height: 196px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.default .simulatorTextWrap pre{padding: 0 8px 5px 8px; font-size: 12px;}

/*와이드아이템리스트형*/
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem{background: #fff; padding: 10px 12px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .text-sub-wrap h5 {text-align: center; font-size: 10px; font-weight: bold; margin: 0; }
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorListWrap {margin: 5px 0;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorListWrap .simulatorList li{display: flex; gap: 8px; align-items: flex-start; margin-top: 5px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorImgWrap{position: relative;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorImgWrap .simulatorImg{height: 95px; width: 100%; background:url('../images/emulicon_default.png');}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorImgWrap .simulatorImgText {font-size: 12px; font-weight: bold; position: absolute; bottom: 6px; left: 8px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorListWrap .simulatorList li .simulatorImgWrap .simulatorImg{background-size: auto 30px; height: 30px; width: 30px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorListWrap .simulatorList li .simulatorImgText {font-size: 12px; letter-spacing: -1px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; display: block; flex: 1;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.wideitem .simulatorBtnWrap{margin: 15px 0 0 0;}

/*커머스형*/
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap {padding: 10px 8px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap .simulatorPrice {display: flex; gap: 4px; align-items: center;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap .simulatorPrice .price{font-size: 10px;text-decoration: line-through;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap .simulatorPrice p{color: #FF3300; font-size: 10px;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap .simulatorPrice + p {
	font-size: 11px; 
	color: #a5a5a5; 
	padding: 5px 0;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.4;
	overflow: visible;
}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap .simulatorBtnWrap{margin: 5px 6px 0 6px;}

/* 커머스형 상품 제목 여러 줄 표시 */
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .phonebodybox.commc .text-sub-wrap .simulatorTextWrap > p.font-size13.color333 {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.4;
	overflow: visible;
}

/*캐러셀 커머스형*/
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .phonebodybox .simulatorTextWrap .intro{width: 20px; height: 2px; background-color: #E1E1E1; display: block;}

/*캐러셀피드형*/
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .swiper-slide {width: 196px !important;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .phonebodybox {padding: 0; background: transparent; height: auto;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .phonebodybox .text-sub-wrap{height: 100%;}
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .phonebodybox .text-sub-wrap .simulatorTextWrap{height: 100%;}

/* 캐러셀 피드형 제목 여러 줄 표시 */
.templateWrap .templMockupWrap .phoneWrap .phonebodyWrap .carofdSwiper .phonebodybox.video .text-sub-wrap .simulatorTextWrap>h5 {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.4;
	overflow: visible;
}

/* 캐러셀 첫 번째 카드 왼쪽 여백 (짤림 방지) */
.carofdSwiper .swiper-slide:first-child {
	margin-left: 20px !important;
}

.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap {display: flex; justify-content: space-between; position: absolute; bottom: -10%; width: 100%; left: 0; align-items: center;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap .swiper-pagination {position: unset;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap .swiper-pagination .swiper-pagination-bullet{background: #E1E1E1 !important;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap .swiper-pagination .swiper-pagination-bullet-active{background: #FD014E !important;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap [class^="swiper-button"] {background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 2px; width: 28px; height: 28px; position: unset; color: #A5A5A5; margin: 0;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap [class^="swiper-button"]::after {font-size: 8px;}
.templateWrap .templMockupWrap .phoneWrap .swiperBtnWrap .swiper-button-disabled { opacity: 1; background-color: #CCCCCC;}
.templateWrap .templMockupWrap .phoneWrap.no-profile {padding: 36px 0px 19px 0px;}
.templateWrap .templMockupWrap .phoneWrap.no-profile .phonebodyWrap{padding: 0;}
.templateWrap .templMockupWrap .phoneWrap.no-profile .phonebodyWrap::before{content: none;}
.templateWrap .templMockupWrap .phoneWrap.no-profile .phonebodyWrap .carofdSwiper.has-tail::before{content: ''; width: 35px; height: 35px; border-radius: 50%; position: absolute; right: 22px; top: 42%; background: #00000033 url('../images/emulicon_arrow.png') no-repeat center;}
.templateWrap .templMockupWrap .phoneWrap.no-profile .phonebodyWrap .carofdSwiper.has-tail::after{content: '더보기'; color: #00000066; font-size: 8px; position: absolute; right: 28px; top: 54%;}

/*프리미엄 동영상형*/
.video.phonebodybox .text-sub-wrap .simulatorTextWrap>h5{font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid #E6E6E6; margin: 0;}
.video.phonebodybox .text-sub-wrap .simulatorTextWrap>p{font-size: 11px; padding: 5px 0 15px 0;}
.video.phonebodybox .text-sub-wrap .simulatorImgWrap.videoImg .simulatorImg{background:url('../images/emulicon_default3.png') no-repeat center / auto 95px;}

/* 프리미엄 동영상형 제목 여러 줄 표시 (에뮬레이터 밖으로 나가지 않도록) */
.phonebodybox.video .simulatorTextWrap > h5 {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.4;
	overflow: visible;
}

/* 버튼 세로 정렬 (기본) */
.simulatorBtnWrap.vertical-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.simulatorBtnWrap.vertical-buttons .btnStyle11 {
	width: 100%;
}

/* 버튼 가로 정렬 (버튼 2개일 때) */
.simulatorBtnWrap.horizontal-buttons {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.simulatorBtnWrap.horizontal-buttons .btnStyle11 {
	flex: 1;
	min-width: 0; /* flex 아이템이 축소될 수 있도록 */
	width: auto !important; /* width: 100% 오버라이드 */
	overflow: visible; /* 텍스트가 잘리지 않도록 */
	white-space: normal; /* 여러 줄 표시 허용 */
	word-break: break-word; /* 긴 단어 줄바꿈 */
	text-overflow: clip; /* ellipsis 제거 */
	height: auto; /* 높이 자동 조정 */
	min-height: 28px; /* 최소 높이 유지 */
}

/* 쿠폰 스타일 */
.coupon,
.coupon * {
	box-sizing: border-box;
}

.coupon {
	background: var(--wireframe-gray-90, #e6e6e6);
	border-radius: 3px;
	padding: 1px;
	display: flex;
	flex-direction: row;
	gap: 1px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex-shrink: 0;
	position: relative;
	margin-top: 6px;
	min-height: 36px;
}

.coupon .frame {
	background: var(--wireframe-white, #ffffff);
	border-radius: 3px;
	padding: 6px 8px;
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	position: relative;
}

.coupon .div {
	color: var(--wireframe-gray-60, #999999);
	text-align: left;
	position: relative;
	flex: 1;
	line-height: 1.3;
}

.coupon .div-span {
	font-family: var(--hub-caption-r-12-font-family, 'Pretendard');
	font-size: var(--hub-caption-r-12-font-size, 12px);
	font-weight: var(--hub-caption-r-12-font-weight, 400);
	color: var(--wireframe-gray-60, #999999);
}

.coupon .div-span2 {
	font-family: var(--hub-caption-r-12-font-family, 'Pretendard');
	font-size: var(--hub-caption-r-12-font-size, 10px);
	font-weight: var(--hub-caption-r-12-font-weight, 400);
	color: var(--wireframe-gray-70, #666666);
}

.coupon .frame2 {
	background: var(--wireframe-white, #ffffff);
	border-radius: 3px;
	padding: 6px 8px;
	display: flex;
	flex-direction: row;
	gap: 4px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}

.coupon .ic-download {
	flex-shrink: 0;
	position: relative;
	overflow: visible;
}

.coupon .coupon2 {
	color: var(--fc-5, #016ad9);
	text-align: center;
	font-family: var(--hub-caption-m-12-font-family, 'Pretendard');
	font-size: var(--hub-caption-m-12-font-size, 10px);
	font-weight: var(--hub-caption-m-12-font-weight, 600);
	position: relative;
}

.coupon .vector {
	position: absolute;
	left: calc(100% * 206 / 272);
	right: calc(100% * 64 / 272);
	top: calc(100% * 4 / 42);
	bottom: calc(100% * -4 / 42);
	overflow: visible;
}

/* 휴대폰 가이드 */
.phoneGuideWrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.phoneGuideWrap img {
	width: 100%;
	height: auto;
}

/* minHeight570 */
.minHeight570 {
	min-height: 570px !important;
}

/* 유틸리티 클래스 */
.font-size13 {
	font-size: 13px !important;
}

.color333 {
	color: #333 !important;
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: inherit;
	margin: 0;
	padding: 0;
}

/* 메시지상세 등: 바깥 휴대폰 프레임 유지, 안쪽 BrandTalkPreview 폰 테두리만 제거 */
.brandTalkPreviewEmbedded .templateWrap { display: block; gap: 0; width: 100%; }
.brandTalkPreviewEmbedded .templMockupWrap { width: 100%; position: static; height: auto; }
.brandTalkPreviewEmbedded .phoneWrap {
	width: 100% !important;
	min-height: auto !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}
.brandTalkPreviewEmbedded .phoneWrap::before { display: none !important; }
.brandTalkPreviewEmbedded .phonebodyWrap { padding-left: 35px; min-height: 80px; }
.brandTalkPreviewEmbedded .phonebodybox { width: 100% !important; max-width: 204px; overflow: visible !important; }
.brandTalkPreviewEmbedded .agentname { font-size: 11px !important; }
.brandTalkPreviewEmbedded .text-sub_2 { font-size: 10px !important; }
.brandTalkPreviewEmbedded .phonebodybox.default .simulatorTextWrap pre { font-size: 15px !important; }
.brandTalkPreviewEmbedded .simulatorTextWrap pre,
.brandTalkPreviewEmbedded .simulatorTextWrap p,
.brandTalkPreviewEmbedded .font-size13 { font-size: 15px !important; }
.brandTalkPreviewEmbedded .phonebodybox.wideitem .text-sub-wrap h5 { font-size: 13px !important; }
.brandTalkPreviewEmbedded .phonebodybox.wideitem .simulatorImgText,
.brandTalkPreviewEmbedded .phonebodybox.wideitem .simulatorListWrap .simulatorList li .simulatorImgText { font-size: 14px !important; }
.brandTalkPreviewEmbedded .simulatorBtnWrap .btnStyle11 { font-size: 13px !important; }
.brandTalkPreviewEmbedded .video.phonebodybox .simulatorTextWrap > h5 { font-size: 15px !important; }
.brandTalkPreviewEmbedded .video.phonebodybox .simulatorTextWrap > p { font-size: 14px !important; }
/* 커머스형: 상세팝업에서 이미지(272px)에 제목/가격/버튼이 가려지지 않도록 */
.brandTalkPreviewEmbedded .phonebodybox.commc .simulatorImgWrap .simulatorImg {
	height: 180px !important;
}
.brandTalkPreviewEmbedded .phonebodybox.commc .text-sub-wrap,
.brandTalkPreviewEmbedded .phonebodybox.commc .simulatorTextWrap {
	overflow: visible !important;
	height: auto !important;
	min-height: 0 !important;
}