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

#page-top{
	/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
	.visually-hidden{ contain: content; position: absolute; width: 0; height: 0; clip-path: rect(0 0 0 0); }
	
	/* 선택 영역 스타일 (드래그 시 배경색/글자색 설정) */
	::selection{ background: var(--primary); color: var(--black, #111); }
	.reverse-selection::selection, .reverse-selection *::selection{ background: var(--black, #111); color: var(--primary); outline-color: var(--black); }
	
	/* 글자 굵기 */
	.font-thin{ font-weight: 100; }
	.font-extralight{ font-weight: 200; }
	.font-light{ font-weight: 300; }
	.font-normal{ font-weight: 400; }
	.font-medium{ font-weight: 500; }
	.font-semibold{ font-weight: 600; }
	.font-bold{ font-weight: 700; }
	.font-extrabold{ font-weight: 800; }
	.font-black{ font-weight: 900; }
	
	/* 글자 크기 */
	.text-large{ font-size: 1.25em; }
	.text-small{ font-size: .75em; }
	.text-18{ font-size: var(--font-size-18); }
	.text-16{ font-size: var(--font-size-16); }
	
	/* 글자 정렬 */
	.text-center{ text-align: center; }
	.text-left{ text-align: left; }
	.text-right{ text-align: right; }
	
	/* 글자 색상 */
	.text-primary{ color: var(--primary); }
	.text-black{ color: var(--black); }
	.text-blue{ color: var(--blue); }
	.text-green{ color: var(--green); }
	.text-red{ color: var(--red); }
	
	/* 배경 색상 */
	.bg-gray{ background: #FAFAFA; }
	
	/* 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
	@media(min-width: 768px){
		.show-mob{ display: none; }
	}
	@media(min-width: 1280px){
		.show-tab{ display: none; }
	}
	@media(min-width:2561px){
		.show-qhd{ display: none; }
	}
	@media(max-width:2560px){
		.hide-qhd{ display: none; }
	}
	@media(max-width: 1279px){
		.hide-tab{ display: none; }
	}
	@media(max-width: 767px){
		.hide-mob{ display: none; }
	}
	
	/**
	 * 이미지 플레이스홀더 유틸리티 클래스
	 *
	 * 역할:
	 * - 메인 이미지가 없거나 로딩 실패 시 플레이스홀더 배경을 표시합니다.
	 * - 중첩 배경 구성으로:
	 *   1) --bg-url : 메인 이미지 (url('...') 형태, 인라인 스타일/JS로 설정)
	 *   2) --image-placeholder-* 변수 : 회색 배경 + 중앙 로고
	 *
	 * 변수 관리:
	 * - --image-placeholder-* 변수는 layout.css 에서 사이트 전역으로 설정합니다.
	 *   디자인 컨셉 유지와 접근성(빈 공간 방지)을 위해 공통 변수로 관리함.
	 *
	 * 사용 예:
	 * <div class="image-placeholder" style="--bg-url: url('/path/to/image.webp');"></div>
	 *
	 * 파일 경로:
	 * - SVG/PNG 파일은 /assets/images/utilities/ 에 위치.
	 */
	.image-placeholder{ background: var(--bg-url, none) no-repeat 50% / cover, var(--image-placeholder-bg) var(--image-placeholder-url, none) no-repeat 50% / var(--image-placeholder-size); }
}