/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-122688
* CODE : Dev - EV00021411 , Prod - EV00009061
* FILE : /kr/event/2026/05/01_lgdot_5th/css/event.css
* DESC : 5월 오!엘지닷_촛불 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2026/04/14				김기범				Created
************************************************************************************
**/

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'PyeojinGothic';
    src: url('https://jsdelivr.net') format('woff2');
    font-weight: normal;
    font-style: normal;
}
* {
    --width: 1380;
}
/* 포커싱 테두리 색상 임시 변환 */
/* .lgDotCake-container a:focus, 
.lgDotCake-container button:focus,
.lgDotCake-container [tabindex]:focus {
	outline: 2px solid #E24C47 !important;
} */
.lgDotCake-container {
	position: relative;
}
.cake-intro-inner {
	position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: min(calc(100vw * 1240 / 780), 1240px);
    height: auto;
    max-height: none;
    padding: calc(var(--evt-size-32)) calc(var(--evt-size-20));
    box-sizing: border-box;
    isolation: isolate;
}
.cake-intro-inner::after {
	content: "";
    position: absolute;
    inset: 0;
    background: url("/kr/event/2026/05/01_lgdot_5th/images/cake_intro_bg.png") no-repeat center top / 100% 100%;
    pointer-events: none;
    z-index: 0;
}
.cake-top {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
}
.cake-top {
	display: flex;
	flex-direction: column;
	gap: calc(var(--evt-size-16));
}
.cake-top .cake-title-label {
	font-family: 'PyeojinGothic';
	display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: calc(2 * var(--evt-size-36));
    height: calc(2 * var(--evt-size-13));
    margin: 0 auto;
    color: #FD312E;
    font-size: calc(var(--evt-size-14));
	font-weight: 900;
}
.cake-top .cake-title p {
	font-weight: 500;
	font-size: calc(var(--evt-size-16));
  	text-align: center;
}
.cake-top .cake-title h2 {
	display: flex;
	justify-content: center;
	font-size: calc(var(--evt-size-32));
	font-weight: 800;
	margin-top: calc(var(--evt-size-10));
	line-height: 1.3;
}
.cake-top .cake-desc {
	font-size: calc(var(--evt-size-14));
	line-height: 1.4;
	display: flex;
    justify-content: center;
    text-align: center;
}
.cake-top .cake-term {
	display: flex;
	justify-content: center;
	gap: calc(var(--evt-size-13));
	font-size: calc(var(--evt-size-13));
}
.cake-top .cake-term .cake-date .boldTxt, 
.cake-top .cake-term .cake-winner .boldTxt {
	font-weight: 600;
	margin-left: calc(var(--evt-size-8));
}
.cakeGiftList {
	padding: calc(var(--evt-size-32)) calc(var(--evt-size-20)) 0;
    background: #fff4f4;
}
.cake-notice {
	padding: calc(var(--evt-size-12)) calc(var(--evt-size-20)) calc(var(--evt-size-25));
    background: #fff4f4;
    width: 100%;
    text-align: center;
}
.cake-notice .evt-acco-head {
	padding-bottom: calc(var(--evt-size-14));
}
.evt-mo-mode .cake-notice .evt-acco-area.acco-text-type .evt-acco-cont.unfolded {
	margin-top: 0 !important;
}
.cake-notice .evt-acco-area.acco-text-type .evt-acco-btn {
	font-size: calc(var(--evt-size-13));
}
.cake-notice .evt-acco-cont .unfolded img {
    display: block;
    width: 100%;
    height: auto;
}
.cake-intro .cake-btn-wrap {
	display: flex;
    justify-content: center;
	background: #fff4f4;
}
.cake-intro #cakeStartBtn {
	width: calc(702 / 780 * 100%);
	height: calc(var(--evt-size-44));
	background: #000;
	border-radius: 890px;
	color: #fff;
	font-size: calc(var(--evt-size-16));
	font-weight: 700;
}
.cake-grow {
	position: relative;
	display: none;
	width: 100%;
	height: auto;
	max-height: 2334px;
	padding: var(--evt-size-32) 0 0;
}
.cake-grow::after {
	content: "";
    position: absolute;
    inset: 0;
    background: url("/kr/event/2026/05/01_lgdot_5th/images/cake_grow_bg_4pt.png") no-repeat center top / 100% 100%;
    pointer-events: none;
    z-index: 1;
	transition: background 0.0001s linear;
}
.cake-grow.is-high-level::after {
	background-image: url("/kr/event/2026/05/01_lgdot_5th/images/cake_grow_bg_5pt.png");
}
.cake-grow.is-cake-complete::after {
	background-image: url("/kr/event/2026/05/01_lgdot_5th/images/cake_grow_complete_bg.png");
}
.cake-grow .cake-onGoing-wrap {
	position: relative;
	z-index: 2;
	margin-top: calc(2.6 * var(--evt-size-27));
}
.cake-grow.is-high-level .cake-onGoing-wrap {
	margin-top: calc(2.5 * var(--evt-size-27));
}
.cake-grow.is-cake-complete .cake-onGoing-wrap {
	margin-top: 0;
}
.cake-onGoing-wrap > * + * {
	margin-top: calc(var(--evt-size-20));
}
.cakeQuestBoard > * + * {
	margin-top: calc(var(--evt-size-20));
}
.cake-grow .cakeLevelProgress {
	height: calc(2 * var(--evt-size-48));
    background: #fff;
    border-radius: calc(1 * var(--evt-size-16));
    padding: calc(var(--evt-size-16)) calc(var(--evt-size-24));
	box-shadow: 0px 2px 4px 0px #EDD8D8;
}
.cake-grow .title-cnt {
	display: flex;
    justify-content: space-between;
}
.cake-grow .title-cnt .title-cnt-inner {
    display: flex;
    align-items: center;
    gap: calc(var(--evt-size-4));
}
.cake-grow .title-cnt .title {
	font-size: calc(var(--evt-size-13));
}
.cake-grow .title-cnt .cakeCount .level {
	font-size: calc(var(--evt-size-16));
}
.refreshCakeLevel {
	width: calc(var(--evt-size-20));
	height: calc(var(--evt-size-18));;
	background: url("/kr/event/2026/05/01_lgdot_5th/images/refresh-level.svg") no-repeat center / contain;
	border: 0;
	cursor: pointer;
	text-indent: -9999px;
	overflow: hidden;
	align-items: center;
}
.lgDotCake-container .cake-grow .cakeCount .level {
	font-weight: 700;
}

/* 프로그레스바 */
.board-display .progress-bar {
	position: relative;
	margin-bottom: 20px;
}

.board-display .progress-track {
	position: relative;
	width: 100%;
	height: calc(var(--evt-size-12));
	background-color: #EFEFEF;
	border-radius: 999px;
	margin-top: calc(var(--evt-size-14));;
}

.board-display .gsap {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	transition: none !important;
	background: #E24C47;
	border-radius: 999px;
}

.board-display .progress-dots {
	position: absolute;
	left: calc(var(--evt-size-3));
	right: calc(var(--evt-size-3));
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.board-display .dot {
	width: calc(var(--evt-size-6));
	height: calc(var(--evt-size-6));
	border-radius: 50%;
	opacity: 0.6;
}

.board-display .dot.is-filled {
    background: #fff;
    opacity: 1;
}

.board-display .progress-steps {
	position: absolute;
	left: calc(var(--evt-size-3));
	right: calc(var(--evt-size-3));
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.board-display .step-dot {
	position: absolute;
	justify-content: center;
	font-family: 'Isamanru';
}

.board-display .step-dot[data-step="0"] {
	left: 0%;
}

.board-display .step-dot[data-step="20"] {
	left: 20%;
}

.board-display .step-dot[data-step="40"] {
	left: 40%;
}

.board-display .step-dot[data-step="60"] {
	left: 60%;
}
.board-display .step-dot[data-step="80"] {
	left: 80%;
}
.board-display .step-dot[data-step="100"] {
	left: 100%;
}

.board-display .step-origin {
	width: 0;
	height: 0;
	background: transparent;
}

.board-display .step-dot.is-hidden {
	background: transparent;
}

.board-display .step-dot.is-hidden .step-inner {
	display: none;
}

.board-display .step-dot::after {
	content: attr(data-label);
	position: absolute;
	top: calc(var(--evt-size-15));
	left: 50%;
	transform: translateX(-50%);
	font-size: calc(var(--evt-size-10));
	color: #aaa;
	white-space: nowrap;
	font-weight: 600;
}

.board-display .step-dot.is-label-active::after {
	color: #ff4343;
	font-weight: 600;
}

.board-display .progress-thumb {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-150%, -50%);
	width: calc(var(--evt-size-6));
	height: calc(var(--evt-size-6));
	border-radius: 50%;
	background: #fff;
	transition: none !important;
	z-index: 2;
}

.board-display .progress-thumb.is-zero {
	transform: translate(0, -50%);
}

.board-display .thumb-inner {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
}

.cakeImgWrap {
	padding: 0 calc(var(--evt-size-20));
}
.cakeImgWrap.is-point-25,
.cakeImgWrap.is-point-25 > img,
.cakeImgWrap.is-point-25 img {
	padding: 0;
	/* margin-bottom: calc(var(--evt-size-46)); */
}
.cakeImgWrap > img,
.cakeImgWrap img {
	margin: 0 auto;
	transition: opacity 0.0001s linear, filter 0.0001s linear;
	padding: 0 calc(var(--evt-size-20));
}
.cakeQuestBoard {
	padding: 0 calc(var(--evt-size-20));
}
/* 케이크 아이템 (on/off 이미지 5개) */
.cakeItemWrap {
	height: calc(4 * var(--evt-size-42));
    background: #fff;
    border-radius: calc(1 * var(--evt-size-16));
    padding: calc(var(--evt-size-16)) calc(var(--evt-size-24));
	box-shadow: 0px 2px 4px 0px #EDD8D8;
}
.cakeItemWrap .cakeItemTitle {
	line-height: 1.6;
}
.cakeItemWrap .cakeItemTitle-inner {
	display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--evt-size-10));
}
.cakeItemWrap .cakeItemTitle p:nth-child(1){
	font-size: calc(var(--evt-size-18));
	font-weight: 700;
}
.cakeItemWrap .cakeItemTitle .cakeItemDesc {
	font-size: calc(var(--evt-size-14));
}
.itemWrap {
	display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px auto;
}
.cakeItem {
	width: calc(2 * var(--evt-size-27));
}
.cakeItem img {
	width: 100%;
	display: block;
	border-radius: 8px;
}
/* 케이크 버튼 영역 */
.cakeMissionWrap {
	background: #fff;
	border-radius: calc(1 * var(--evt-size-16));
	padding: calc(var(--evt-size-24));
	box-shadow: 0px 2px 4px 0px #EDD8D8;
}
.cakeMissionTitle {
	margin: 0 0 calc(var(--evt-size-18));
	font-size: calc(var(--evt-size-18));
	font-weight: 700;
	text-align: center;
	color: #000;
}
.cakeMissionRow {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.cakeMissionCol {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}
.cakeMissionIcon {
	margin-bottom: calc(var(--evt-size-10));
}
.cakeMissionIcon .img-responsive {
	display: block;
	margin: 0 auto;
	width: calc(var(--evt-size-28));;
	height: auto;
}
.cakeMissionLabel {
	margin: 0 0 calc(var(--evt-size-4));
	font-size: calc(var(--evt-size-16));
	font-weight: 500;
	color: #000;
}
.cakeMissionSub {
	margin: 0 0 calc(var(--evt-size-16));
	font-size: calc(var(--evt-size-13));
}
.cakeMissionDivider {
	flex: 0 0 auto;
	width: 1px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 calc(var(--evt-size-6));
	box-sizing: content-box;
}
.cakeMissionDivider img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: calc(8 * var(--evt-size-10));
	object-fit: fill;
}
#cakeAppBtn,
#cakeKakaoShareBtn {
	width: 100%;
	max-width: calc(10 * var(--evt-size-12));
	padding: calc(var(--evt-size-8)) calc(var(--evt-size-14));
	background-color: #000;
	color: #fff;
	border: 0;
	border-radius: calc(var(--evt-size-6));
	font-size: calc(var(--evt-size-12));
	font-weight: 500;
	cursor: pointer;
	line-height: 1.3;
}
#cakeAppBtn.disabled {
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	color: #fff;
	background-color: #CBCBCB;
	cursor: default;
	/* cursor: not-allowed; */
}
#cakeAppBtn.disabled::after {
	content: "미션 완료";
	font-size: calc(var(--evt-size-12));
	line-height: 1.3;
	color: inherit;
}

@media screen and (max-width: 768px) {
	.cake-grow .cake-onGoing-wrap {
		margin-top: calc(3 * var(--evt-size-27));
	}
	.cake-grow.is-high-level .cake-onGoing-wrap {
		margin-top: calc(3 * var(--evt-size-27));
	}
	.cake-grow.is-cake-complete .cake-onGoing-wrap {
		margin-top: calc(0.5 * var(--evt-size-27));
	}
	
	.cake-intro #cakeStartBtn {
		top: calc(305 / 780 * 100%);
	}
}