/* ============================ 팝업 ============================ */
.suji-popups {
	position: fixed;
	/* 오른쪽 아래에는 바로가기 단추가 고정으로 있다. 겹치지 않게 왼쪽에 둔다 */
	left: 1.25rem;
	bottom: 1.25rem;
	top: 1.25rem;
	z-index: 210;
	/* 아래에서부터 쌓아 올린다. 여러 개일 때 위쪽이 잘리더라도 방금 올라온
	   팝업과 그 닫기 단추는 늘 화면 안에 있다 */
	justify-content: flex-end;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	/* 팝업 밖의 빈 자리는 뒤에 있는 화면을 가리지 않아야 한다 */
	pointer-events: none;
}

.suji-popup {
	/* 카드가 이미지를 감싸게 한다. 폭을 못박으면 세로로 긴 포스터의 좌우에
	   흰 여백이 남는다. 넓은 이미지는 정해 준 너비까지만 커진다 */
	width: fit-content;
	max-width: min(90vw, var(--suji-popup-w, 360px));
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
	/* 올라오기 전에는 보이지 않으므로 눌리지도 않아야 한다 */
	pointer-events: none;
	/* 처음에는 화면 밖. 자바스크립트가 is-open 을 붙여 올린다 */
	transform: translateY(calc(100% + 2rem));
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

.suji-popup.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.suji-popup[hidden] {
	display: none;
}

/* ---------------------------- 이미지 ---------------------------- */
.suji-popup-body {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 세로로 긴 포스터를 그대로 두면 화면을 넘겨 닫기 단추까지 밀려난다.
   높이를 묶되 폭을 100% 로 못박지 않는다. 그러면 비율이 찌그러진다. */
.suji-popup-image {
	display: block;
	max-width: 100%;
	max-height: 46vh;
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* ------------------------ 아래쪽 단추 두 개 ------------------------ */
.suji-popup-foot {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-top: 1px solid #ececE8;
	background: #fafaf8;
}

.suji-popup-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.7rem 0.95rem;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.83rem;
	color: #666;
	cursor: pointer;
}

.suji-popup-btn:hover {
	color: #111;
}

.suji-popup-btn.is-close {
	font-weight: 600;
	color: #333;
}

/* ---------------------------- 좁은 화면 ---------------------------- */
@media (max-width: 600px) {
	.suji-popups {
		left: 0.75rem;
		bottom: 0.75rem;
		gap: 0.5rem;
	}

	/* 오른쪽 아래 바로가기(46px + 여백)를 덮지 않을 만큼만 넓힌다 */
	.suji-popup {
		max-width: min(calc(100vw - 5.5rem), var(--suji-popup-w, 360px));
		border-radius: 12px;
	}

	.suji-popup-btn {
		padding: 0.65rem 0.75rem;
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.suji-popup {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

@media print {
	.suji-popups {
		display: none;
	}
}