@layer utilities {
    /* 접근성: 검색엔진 최적화 및 화면 숨김 처리 */
    .visually-hidden { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0); 
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* 선택 영역 스타일 */
    .reverse-selection::-webkit-selection, 
    .reverse-selection *::-webkit-selection { 
        color: var(--color-primary); 
        background: var(--color-white, #fff); 
    }
    .reverse-selection::selection, 
    .reverse-selection *::selection { 
        color: var(--color-primary); 
        background: var(--color-white, #fff); 
    }

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

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

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

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

    /* 반응형 화면 표시/숨김 제어 */
    @media (min-width: 768px) {
        .visible-mob { display: none; }
    }
    @media (min-width: 1280px) {
        .visible-tab { display: none; }
    }
    @media (min-width: 2560px) {
        .visible-qhd { display: none; }
    }
    @media (max-width: 2559.98px) {
        .hidden-qhd { display: none; }
    }
    @media (max-width: 1279.98px) {
        .hidden-tab { display: none; }
    }
    @media (max-width: 767.98px) {
        .hidden-mob { display: none; }
    }

    /* 이미지 플레이스홀더 유틸리티 클래스  */
    :root {
        --placeholder-image-bg: #e0e0e0;
        --placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
        --placeholder-image-size: min(60%, 200px);
    }
    .placeholder-image { 
        background-color: var(--placeholder-image-bg);
        background-image: var(--placeholder-thumbnail-url, none), var(--placeholder-image-url, none);
        background-position: 50% 50%, 50% 50%;
        background-repeat: no-repeat, no-repeat;
        background-size: cover, var(--placeholder-image-size);
    }
}