/* 纸盒海报：600×800 的版心缩进卡片。字号按卡片宽度比例走，不是正文字号。 */
.mycv-poster {
	container-type: size;
	--u: calc(100cqw / 600);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f5f5f5;
}

.mycv-poster-scene {
	position: absolute;
	inset: 0;
	transform-origin: center;
	transition: transform 0.3s ease;
	background: url('../cover/plate.svg') center / 100% 100% no-repeat;
}

.group:hover .mycv-poster-scene {
	transform: scale(1.05);
}

.mycv-poster-title,
.mycv-poster-tag {
	position: absolute;
	z-index: 1;
	margin: 0;
	color: #282828;
	line-height: 1;
	width: calc(440 * var(--u));
	max-width: calc(440 * var(--u));
	white-space: nowrap;
	/* 不裁下伸笔画。g、y 会画出字框底边，不能用 overflow:hidden。 */
	overflow: visible;
	transform: translateY(-100%);
}

.mycv-poster-title {
	left: calc(78 * var(--u));
	top: calc(330 * var(--u));
	font-size: calc(var(--title-size, 76) * var(--u));
	font-weight: 700;
}

.mycv-poster-tag1,
.mycv-poster-tag2 {
	left: calc(80 * var(--u));
	font-weight: 400;
}

.mycv-poster-tag1 {
	top: calc(428 * var(--u));
	font-size: calc(var(--tag1-size, 34) * var(--u));
}

.mycv-poster-tag2 {
	top: calc(490 * var(--u));
	font-size: calc(var(--tag2-size, 34) * var(--u));
}

/* 包装袋：底是 750×1000 的照片，字的坐标跟这张图对齐。 */
.mycv-poster--bag {
	--u: calc(100cqw / 750);
	background: #f6f6f6;
}

.mycv-poster--bag .mycv-poster-scene {
	background-image: url('../cover/bag.png');
}

.mycv-poster--bag .mycv-poster-title,
.mycv-poster--bag .mycv-poster-tag {
	width: calc(450 * var(--u));
	max-width: calc(450 * var(--u));
}

.mycv-poster--bag .mycv-poster-title {
	left: calc(150 * var(--u));
	top: calc(420 * var(--u));
	font-size: calc(var(--title-size, 68) * var(--u));
}

.mycv-poster--bag .mycv-poster-tag1,
.mycv-poster--bag .mycv-poster-tag2 {
	left: calc(150 * var(--u));
}

.mycv-poster--bag .mycv-poster-tag1 {
	top: calc(510 * var(--u));
	font-size: calc(var(--tag1-size, 32) * var(--u));
}

.mycv-poster--bag .mycv-poster-tag2 {
	top: calc(580 * var(--u));
	font-size: calc(var(--tag2-size, 32) * var(--u));
}

@media (prefers-reduced-motion: reduce) {
	.mycv-poster-scene {
		transition: none;
	}
	.group:hover .mycv-poster-scene {
		transform: none;
	}
}