/* 접근성: 검색엔진 최적화 및 화면 숨김 처리 (로고, 제목, 링크, 버튼은 aria-label과 title 권장) */
.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 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; min-height: 1lh; white-space: normal; word-break: break-all; }
.ellipsis--lines-2{ -webkit-line-clamp: 2; height: 2lh; }
.ellipsis--lines-3{ -webkit-line-clamp: 3; height: 3lh; }
.ellipsis--lines-4{ -webkit-line-clamp: 4; height: 4lh; }

/* 글자 굵기 */
.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(--fs18); }
.text-16{ font-size: var(--fs16); }

/* 글자 정렬 */
.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; }

/**
 * 대체 이미지 배경 (중첩 배경 구성)
 * 
 * 배경 이미지가 2개 겹쳐집니다:
 * 1) --bg-url: 메인 이미지 (url('...') 형태, 인라인 스타일 또는 JS로 설정)
 * 2) 플레이스홀더 로고: 회색 배경과 중앙에 최소 60% 크기로 표시
 * 
 * 사용법: .placeholder-logo 클래스에 --bg-url 변수만 지정하세요.
 * 예) <div class="placeholder-logo" style="--bg-url: url('/path/to/image.webp');"></div>
 */
.placeholder-logo{ background: var(--bg-url, none) no-repeat 50% / cover, #e0e0e0 url('/assets/images/layouts/placeholder-logo.svg') no-repeat 50% / min(60%, 200rem); }

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