/**
 * css/foundation/utilities.css
 * ============================================================
 * A LEGEND 2：Utilities
 * ============================================================
 *
 * 役割：
 * - 小さな補助classを定義します。
 * - コンポーネントの責務に入らない汎用的な表示制御だけを置きます。
 */

.aleg2-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.aleg2-hidden {
	display: none !important;
}

.aleg2-text-center {
	text-align: center !important;
}

.aleg2-text-left {
	text-align: left !important;
}

.aleg2-text-right {
	text-align: right !important;
}

.aleg2-muted {
	color: var(--aleg2-color-text-muted) !important;
}

.aleg2-faint {
	color: var(--aleg2-color-text-faint) !important;
}

.aleg2-gradient-text {
	color: transparent !important;
	background:
		linear-gradient(
			120deg,
			var(--aleg2-color-primary),
			var(--aleg2-color-secondary),
			var(--aleg2-color-accent)
		);
	background-clip: text;
	-webkit-background-clip: text;
}

.aleg2-glass {
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	backdrop-filter: var(--aleg2-backdrop-glass);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * スクロールロック。
 *
 * mobile-menu.js は html と body の両方へ aleg2-no-scroll を同期します。
 * 汎用classとしての既存挙動も維持しつつ、html/body を明示対象にして、
 * ブラウザ差や外部CSSの影響で背面スクロールが残る可能性を下げます。
 *
 * iOS Safari向けの body fixed lock は、Lenis / Scroll Engine との競合を避けるため、
 * この汎用utilityでは行いません。必要になった場合は専用JSで段階的に拡張します。
 */
html.aleg2-no-scroll,
body.aleg2-no-scroll,
.aleg2-no-scroll {
	overflow: hidden !important;
}

.aleg2-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.aleg2-aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.aleg2-aspect-4-3 {
	aspect-ratio: 4 / 3;
}

.aleg2-aspect-1-1 {
	aspect-ratio: 1 / 1;
}

.aleg2-object-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aleg2-object-contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.aleg2-scrollbar-thin {
	scrollbar-width: thin;
	scrollbar-color: var(--aleg2-color-primary) transparent;
}

.aleg2-scrollbar-thin::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.aleg2-scrollbar-thin::-webkit-scrollbar-track {
	background: transparent;
}

.aleg2-scrollbar-thin::-webkit-scrollbar-thumb {
	background: var(--aleg2-color-primary);
	border-radius: var(--aleg2-radius-pill);
}

@media (max-width: 640px) {
	.aleg2-sp-hidden {
		display: none !important;
	}
}

@media (min-width: 641px) {
	.aleg2-pc-hidden {
		display: none !important;
	}
}