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

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

.reverse-selection::selection,
.reverse-selection *::selection {
    background: var(--white, #fff);
    color: var(--primary);
}

/* 긴 글자 말줄임 처리 */
.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 .font-thin {
    font-weight: 100;
}

#page-top .font-extralight {
    font-weight: 200;
}

#page-top .font-light {
    font-weight: 300;
}

#page-top .font-normal {
    font-weight: 400;
}

#page-top .font-medium {
    font-weight: 500;
}

#page-top .font-semibold {
    font-weight: 600;
}

#page-top .font-bold {
    font-weight: 700;
}

#page-top .font-extrabold {
    font-weight: 800;
}

#page-top .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;
}

/* 글자 색상 */
#page-top .text-primary {
    color: var(--primary);
}

#page-top .text-secondary {
    color: var(--secondary);
}

#page-top .text-black {
    color: var(--black);
}

#page-top .text-blue {
    color: var(--blue);
}

#page-top .text-green {
    color: var(--green);
}

#page-top .text-red {
    color: var(--red);
}

#page-top .text-yellow {
    color: var(--yellow);
}

/* 배경 색상 */
.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) --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);
    background-blend-mode: normal, luminosity;
}