@charset "utf-8";

/* 장식 텍스트 레이어 */
.layer {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	font-family: 'Pretendard' !important;
	font-weight: 300;
}

/* 좌측 상단 그룹 */
.deco-left-top {
	position: absolute;
	top: 2%;
	left: 2%;
}

.deco-quote-main {
	color: #a9b0d6;
	font-size: 12pt;
	font-weight: 300;
	line-height: 1.4;
	margin: 0 0 35px 0;
}

.deco-ingredients {
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.deco-ingredients span {
	color: #a9b0d6;
	font-size: 12pt;
	font-weight: 300;
	line-height: normal;
}

/* 좌측 하단 */
.deco-left-bottom {
	position: absolute;
	bottom: 2%;
	left: 2%;
	color: #a9b0d6;
	font-size: 12pt;
	font-weight: 300;
	line-height: 1.3;
	margin: 0;
}

/* 우측 상단 그룹 */
.deco-right-top {
	position: absolute;
	top: 2%;
	right: 2%;
	text-align: right;
}

.deco-quote-right {
	color: #a9b0d6;
	font-size: 12pt;
	font-weight: 300;
	line-height: 1.4;
	margin: 0 0 20px 0;
	white-space: nowrap;
}

/* 별 아이콘 - 우측 상단 아래 */
.deco-stars {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	margin-top: 10px;
}

.deco-stars img {
	width: 16px;
	height: 16px;
	color: #A9B1D7;
}

/* 우측 중앙 세로 */
.deco-right-center {
	position: absolute;
	top: 50%;
	right: calc(2% + 5.5px);
	transform: rotate(90deg) translateX(50%);
	transform-origin: right center;
	color: #a9b0d6;
	font-size: 9pt;
	font-weight: 300;
	white-space: nowrap;
	margin: 0;
}

/* 우측 하단 */
.deco-right-bottom {
	position: absolute;
	bottom: 2%;
	right: 2%;
	color: #a9b0d6;
	font-size: 12pt;
	font-weight: 300;
	line-height: 1.3;
	text-align: right;
	margin: 0;
}

/* 반응형 - 작은 화면에서도 보이도록 유지 */
@media all and (max-width: 768px) {
	.deco-quote-main,
	.deco-ingredients span,
	.deco-quote-right {
		font-size: 12px;
	}
	
	.deco-left-bottom,
	.deco-right-bottom {
		font-size: 18px;
	}
	
	.deco-right-center {
		font-size: 10px;
	}
	
	.deco-ingredients {
		gap: 35px;
	}
	
	.deco-stars img {
		width: 12px;
		height: 12px;
	}
}