/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
#page-top .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
}

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

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

/* 말줄임표 */
#page-top .ellipsis {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ellipsis--lines-2:is(#page-top .ellipsis) {
  -webkit-line-clamp: 2;
}
.ellipsis--lines-3:is(#page-top .ellipsis) {
  -webkit-line-clamp: 3;
}
.ellipsis--lines-4:is(#page-top .ellipsis) {
  -webkit-line-clamp: 4;
}

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

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

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