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

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

/* 긴 글자 말줄임 처리 */
.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; }

/* 글자 굵기 */
#main-content .font-thin { font-weight: 100; }
#main-content .font-extralight { font-weight: 200; }
#main-content .font-light { font-weight: 300; }
#main-content .font-normal { font-weight: 400; }
#main-content .font-medium { font-weight: 500; }
#main-content .font-semibold { font-weight: 600; }
#main-content .font-bold { font-weight: 700; }
#main-content .font-extrabold { font-weight: 800; }
#main-content .font-black { font-weight: 900; }

/* 글자 크기 */
#main-content .text-large { font-size: 1.25em; }
#main-content .text-small { font-size: 0.75em; }
#main-content .text-18 { font-size: var(--font-size-18); }
#main-content .text-16 { font-size: var(--font-size-16); }

/* 글꼴 */
.font-gulim { font-family: "Gulim", sans-serif; }

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

/* 글자 색상 */
#main-content .text-primary { color: var(--primary); }
#main-content .text-black { color: var(--black); }
#main-content .text-blue { color: var(--blue); }
#main-content .text-green { color: var(--green); }
#main-content .text-red { color: var(--red); }

/* 배경 색상 */
#main-content .bg-gray { background: #fafafa; }

/* 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
@media (min-width: 768px) {
	#page-top .show-mob { display: none; }
}
@media (min-width: 1280px) {
	#page-top .show-tab { display: none; }
}
@media (min-width: 2561px) {
	#page-top .show-qhd { display: none; }
}
@media (max-width: 2560px) {
	#page-top .hide-qhd { display: none; }
}
@media (max-width: 1279px) {
	#page-top .hide-tab { display: none; }
}
@media (max-width: 767px) {
	#page-top .hide-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 { 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); }