/* =============================================================
 * utilities.css — 자주 쓰는 유틸 클래스 모음.
 * 섹션 CSS 에서 호출하기 좋은 작은 헬퍼만. 컴포넌트 스타일은 두지 말 것.
 * ============================================================= */

/* 스크린리더 전용 (시각적으로 숨김, 접근성 텍스트)
   .screen-reader-text — 워프 표준 클래스 이름.
   .sr-only            — 흔히 쓰이는 별칭. 두 이름 모두 동일 효과. */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 1줄 줄임표 */
.ws-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* n줄 줄임표 — line-clamp */
.ws-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ws-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 강제 숨김/표시 */
.is-hidden { display: none !important; }

/* breakpoint 별 노출 (mobile-first) */
.is-pc-only { display: none; }
.is-mobile-only { display: block; }

@media (min-width: 1024px) {
    .is-pc-only { display: block; }
    .is-mobile-only { display: none; }
}

/* 시안에 자주 등장하는 No image 플레이스홀더의 기본 골격.
   실제 디자인은 컴포넌트 CSS (post-card.css 등) 에서 보강. */
.ws-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--ws-color-bg-tag);
    color: var(--ws-color-text-grey);
    font-family: var(--ws-font-body);
    font-size: var(--ws-fs-caption);
    border-radius: var(--ws-radius-sm);
}