@charset "utf-8";

@layer utilities {
    /* #region 글자 정렬 */
    .u-text-center {
        text-align: center;
    }
    .u-text-left {
        text-align: left;
    }
    .u-text-right {
        text-align: right;
    }
    /* #endregion 글자 정렬 */

    /* #region 글자 굵기 */
    .u-weight-100 {
        font-weight: var(--font-weight-100);
    }
    .u-weight-200 {
        font-weight: var(--font-weight-200);
    }
    .u-weight-300 {
        font-weight: var(--font-weight-300);
    }
    .u-weight-400 {
        font-weight: var(--font-weight-400);
    }
    .u-weight-500 {
        font-weight: var(--font-weight-500);
    }
    .u-weight-600 {
        font-weight: var(--font-weight-600);
    }
    .u-weight-700 {
        font-weight: var(--font-weight-700);
    }
    .u-weight-800 {
        font-weight: var(--font-weight-800);
    }
    .u-weight-900 {
        font-weight: var(--font-weight-900);
    }
    /* #endregion 글자 굵기 */

    /* #region 글자 색상 */
    .u-text-white {
        color: var(--color-white);
    }
    .u-text-black {
        color: var(--color-black);
    }
    .u-text-neutral-100 {
        color: var(--color-neutral-100);
    }
    .u-text-neutral-200 {
        color: var(--color-neutral-200);
    }
    .u-text-neutral-300 {
        color: var(--color-neutral-300);
    }
    .u-text-neutral-400 {
        color: var(--color-neutral-400);
    }
    .u-text-neutral-500 {
        color: var(--color-neutral-500);
    }
    .u-text-neutral-600 {
        color: var(--color-neutral-600);
    }
    .u-text-neutral-700 {
        color: var(--color-neutral-700);
    }
    .u-text-neutral-800 {
        color: var(--color-neutral-800);
    }
    .u-text-neutral-900 {
        color: var(--color-neutral-900);
    }

    .u-text-primary {
        color: var(--color-primary-base);
    }
    .u-text-primary-100 {
        color: var(--color-primary-100);
    }
    .u-text-primary-200 {
        color: var(--color-primary-200);
    }
    .u-text-primary-300 {
        color: var(--color-primary-300);
    }
    .u-text-primary-400 {
        color: var(--color-primary-400);
    }
    .u-text-primary-500 {
        color: var(--color-primary-500);
    }
    .u-text-primary-600 {
        color: var(--color-primary-600);
    }
    .u-text-primary-700 {
        color: var(--color-primary-700);
    }
    .u-text-primary-800 {
        color: var(--color-primary-800);
    }
    .u-text-primary-900 {
        color: var(--color-primary-900);
    }
    /* #endregion 글자 색상 */

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

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

    /* 가로 스크롤 영역 제어 */
    .u-scroll-x {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    /* 로딩 중 상호작용 및 표시 상태 제어 */
    .u-loading {
        opacity: 0.55;
        pointer-events: none;
        @media (prefers-reduced-motion: no-preference) {
            transition: opacity var(--duration-base);
        }
    }

    /* #region 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
    .u-hidden-below-sm {
        @media (width < 768px) {
            display: none;
        }
    }
    .u-hidden-below-md {
        @media (width < 1280px) {
            display: none;
        }
    }
    .u-hidden-above-sm {
        @media (width >= 768px) {
            display: none;
        }
    }
    .u-hidden-above-md {
        @media (width >= 1280px) {
            display: none;
        }
    }
    /* #endregion 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
}

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

    /* 접근성: hidden 속성 요소를 컴포넌트 레이어보다 높은 우선순위로 숨김 처리 */
    [hidden] {
        display: none;
    }
}