.nav-box {
	display: flex;
	justify-content: space-around;
	width: 90%;
	/* 平板/PC端限制最大宽度 */
	margin: 0 auto;
	background-color: #fff;
	border-radius: 3.125rem;
	/* 50px→3.125rem */
	box-shadow: 0 0.125rem 0.9375rem rgba(0, 0, 0, 0.05);
	/* 2px→0.125rem，15px→0.9375rem */
	position: relative;
	z-index: 1;
	padding: 0.625rem 0;
	/* 10px→0.625rem（原内边距不变） */
	overflow: visible;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	/* 10px→0.625rem */
	cursor: pointer;
	padding: 0.625rem 0 1.25rem;
	/* 10px→0.625rem，20px→1.25rem */
	position: relative;
	z-index: 2;
	flex: 1;
	min-width: 3rem;
	/* 48px→3rem（适配14px根字体） */
	max-width: 5rem;
	/* 80px→5rem */
	text-align: center;
}

.nav-item img {
	width: 4rem;
	height: 4rem;
	/* 60px→3.75rem（16px基准），14px根字体下≈52.5px，仍清晰 */
	object-fit: contain;
	border-radius: 0.75rem;
	/* 12px→0.75rem */
	position: absolute;
	top: -3.125rem;
	/* -50px→-3.125rem（14px根字体下≈43.75px，超出效果不变） */
	transform: translateY(0.625rem);
	/* 10px→0.625rem */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-item:hover img {
	transform: translateY(0.3125rem);
	/* 5px→0.3125rem */
}

.nav-item:active img {
	transform: translateY(0.4375rem);
	/* 7px→0.4375rem */
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}

/* 关键：文字单独控制，确保最小12px */
.nav-item p {
	margin: 0;
	/* PC端：15px→0.9375rem（16px根字体） */
	font-size: 0.9375rem;
	color: #37373e;
	font-weight: 500;
	position: relative;
	z-index: 3;
	top: 1.125rem;
	/* 18px→1.125rem */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 0.125rem;
}

/* 平板端文字：14px→0.9375rem（15px根字体下=14px） */
@media (max-width: 1023px) and (min-width: 768px) {
	.nav-item p {
		font-size: 0.9375rem;
	}
}

/* 移动端文字：强制12px（用px兜底，避免rem计算后过小） */
@media (max-width: 767px) {
	.nav-item p {
		font-size: 12px;
		/* 直接用px固定最小尺寸，优先级最高 */
		font-size: clamp(12px, 0.857rem, 0.9375rem);
		/* 增强版：最小12px，默认0.857rem（14px根字体下≈12px），最大0.9375rem */
	}
}
