/* Page common (sdgo_memorial_test_stickybar)
   Shared UI styles used across multiple content pages. */

/* Share buttons (base). Mosaic pages may override with body.mosaic-page scope. */
.share-btns {
	max-width: 1000px;
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	color: #fff;
}
.share-btns__ttl {
	position: relative;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	margin: 0;
	padding-right: 18px;
}
.share-btns__ttl:before {
	content: "";
	position: absolute;
	top: -30%;
	right: 6px;
	width: 1px;
	height: 160%;
	background-color: #fff;
	opacity: 0.9;
}
.share-list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 12px;
}
.share-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}
.share-list svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

/* Shared MV background for sub pages currently using .mv--history */
.mv--history .mv__inner {
	background: url("../../img/shared/common/mv-header.webp");
}
@media (max-width: 768px) {
	/* Ensure MV background is visible on mobile */
	.mv--history .mv__inner {
		min-height: 35vh;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
	}
	.share-btns { padding-top: 20px; }
	.share-btns__ttl { font-size: 12px; }
	.share-list svg { width: 20px; height: 20px; }
}

/* -------------------------------------------
  Record metrics (common, minimal)
-------------------------------------------- */
.recordMetrics {
	max-width: 1000px;
	margin: 0 auto;
	padding: 22px 20px 60px;
}

.recordMetrics__select {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
}

.recordMetrics__label {
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}

.recordMetrics__selectInput {
	width: 100%;
	max-width: 520px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
}

.recordMetrics__panel {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	padding: 18px 18px;
}

.recordMetrics__title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.82);
}

.recordMetrics__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.recordMetricsCard {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.12);
	padding: 16px 16px;
	text-align: center;
}

.recordMetricsCard__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
}

.recordMetricsCard__note {
	margin: 0 0 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.recordMetricsCard__value {
	margin: 0;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
}

.recordMetricsCard__unit {
	margin: 6px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
	.recordMetrics {
		padding: 18px 16px 50px;
	}
	.recordMetrics__grid {
		grid-template-columns: 1fr;
	}
	.recordMetricsCard__value {
		font-size: 36px;
	}
}