@charset "utf-8";

/*
 * 텍스트 리스트형 게시판 IST-text 전용 스타일
 * 게시판 공통 배치(표 목록 · 분류 칩 · 검색 · 보기 · 작은 화면 줄 모양 등)는 /css/ist/board.css, M3 토큰 · 컴포넌트는 /css/ist/m3.css
 */

/* 조회 칸 : 날짜와 같은 body/medium on-surface-variant */
.ist-board-table .ist-board-table__hit { width: 96px; }

.ist-board-table td.ist-board-table__hit {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: var(--m3-on-surface-variant);
}

.ist-text__hit-label { display: none; } /* 작은 화면에서만 "조회 182" 로 */

/* 제목 앞 분류 라벨 : secondary-container 바탕 작은 상자 (M3 에 글자 배지가 없어 label/medium + corner extra-small 로 만듦) */
.ist-text__cate {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--m3-corner-extra-small);
    background: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
    white-space: nowrap;
}

/* 보기 : 작성일 · 조회 */
.ist-text__view-info { margin-top: 12px; color: var(--m3-on-surface-variant); }

.m3-card.m3-card--outlined.ist-board-view__card { background: #fff; }

@media (max-width: 599px) {
    /* 줄 : 제목 한 줄 + 날짜 · 조회 (번호는 board.css 에서 숨김) */
    .ist-board-table td.ist-board-table__hit { order: 1; }
    .ist-text__hit-label { display: inline; }
}

/* 유튜브 영상 (wr_1) : 본문 위 16:9, 쇼츠는 가운데 9:16 (IST-youtube 와 같은 모양) */
.ist-text__player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: var(--m3-corner-medium);
    background: #000;
}

.ist-text__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ist-text__player.is-shorts {
    aspect-ratio: 9 / 16;
    width: min(100%, 360px);
    margin-inline: auto;
}