@layer utilities {
	/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
	.visually-hidden { position: absolute; width: 0; height: 0; contain: content; clip-path: rect(0 0 0 0); }

	/* 선택 영역 스타일 (드래그 시 배경색/글자색 설정) */
	.reverse-selection::selection, .reverse-selection *::selection { color: var(--color-primary); background: var(--color-white, #fff); }

	/* 레이아웃 컨테이너 */
	.container { position: relative; width: calc(var(--grid-width-scale) * 100%); max-width: calc(var(--grid-width-base) * 1rem); margin-inline: auto;
		&.container--narrow { max-width: calc(var(--grid-width-narrow) * 1rem); }
		&.container--wide { max-width: calc(var(--grid-width-wide) * 1rem); }
		&.container--fluid { width: auto; max-width: none; }
	}

	/* 긴 글자 말줄임 처리 */
	.ellipsis { display: -webkit-box; overflow: hidden; white-space: normal; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
		&.ellipsis--lines-2 { -webkit-line-clamp: 2; }
		&.ellipsis--lines-3 { -webkit-line-clamp: 3; }
		&.ellipsis--lines-4 { -webkit-line-clamp: 4; }
	}

	/* 글자 정렬 */
	.text-center { text-align: center; }
	.text-left { text-align: left; }
	.text-right { text-align: right; }

	/* 글자 색상 */
	.text-primary { color: var(--color-primary); }
	.text-secondary { color: var(--color-secondary); }
	.text-tertiary { color: var(--color-tertiary); }
	.text-white { color: var(--color-white); }
	.text-black { color: var(--color-black); }

	/* 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
	@media (width >= 768px) {
		.visible-mob { display: none; }
	}
	@media (width >= 1280px) {
		.visible-tab { display: none; }
	}
	@media (width >= 2560px) {
		.visible-qhd { display: none; }
	}
	@media (width < 2560px) {
		.hidden-qhd { display: none; }
	}
	@media (width < 1280px) {
		.hidden-tab { display: none; }
	}
	@media (width < 768px) {
		.hidden-mob { display: none; }
	}

	/**
	 * 이미지 플레이스홀더 유틸리티 클래스
	 *
	 * 역할:
	 * - 메인 이미지가 없거나 로딩 실패 시 플레이스홀더 배경을 표시합니다.
	 * - 중첩 배경 구성으로:
	 *   1) --placeholder-thumbnail-url : 메인 이미지 (url('...') 형태, 인라인 스타일/JS로 설정)
	 *   2) --placeholder-image-* 변수 : 회색 배경 + 중앙 로고
	 *
	 * 변수 관리:
	 * - --placeholder-image-* 변수는 layout.css 에서 사이트 전역으로 설정합니다.
	 *   디자인 컨셉 유지와 접근성(빈 공간 방지)을 위해 공통 변수로 관리함.
	 *
	 * 사용 예:
	 * <div class="placeholder-image" style="--placeholder-thumbnail-url: url('/path/to/image.webp');"></div>
	 *
	 * 파일 경로:
	 * - SVG/PNG 파일은 /assets/images/utilities/ 에 위치.
	 *
	 * 사이트 공통 이미지 플레이스홀더 변수
	 * 
	 * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
	 * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
	 * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
	 */
	:root {
		--placeholder-image-bg: #e0e0e0;
		--placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
		--placeholder-image-size: min(60%, 200rem);
	}
	.placeholder-image { background: var(--placeholder-thumbnail-url, none) no-repeat 50% / cover, var(--placeholder-image-bg) var(--placeholder-image-url, none) no-repeat 50% / var(--placeholder-image-size); }
}