@charset "utf-8";

/*
 * 카드형 게시판 IST-card 전용 스타일 (이벤트 IST-program 목록과 같은 배치 · 분류 메뉴)
 * 게시판 공통 배치(카드 목록 · 검색 · 보기 등)는 /css/ist/board.css, M3 토큰 · 컴포넌트는 /css/ist/m3.css
 * 썸네일 비율은 게시판 설정의 갤러리 이미지 크기 (--card-ratio, list.skin.php)
 */

/* 목록 : 왼쪽 분류 메뉴 (게시판 분류를 쓸 때) : 고르지 않음 = Outlined 버튼, 고름 = 테마 컬러 (IST-program 과 같음) */
.ist-card.has-cate {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.ist-card__main { min-width: 0; }

/* 넓은 화면 : 목록을 내려도 분류 메뉴가 따라온다. 사이트 머리가 화면에 고정이면 --board-sticky-top 을 머리 높이 + 여백으로 */
.ist-card.has-cate .ist-card__cate { position: sticky; top: var(--board-sticky-top, 24px); }

.ist-card__cate ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ist-card__cate .m3-button {
    width: 100%;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 1em;
    padding: 25px 15px;
}

.ist-card__cate .m3-button.is-selected {
    background: var(--theme-color);
    color: #fff;
}

.ist-card.has-cate .ist-board-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 카드 배경 : 흰색 (surface-container-lowest, 다른 IST- 스킨과 같음) */
.ist-card .m3-card { background: var(--m3-surface-container-lowest); }

/* 목록 카드 : 썸네일 비율 · 짧은 설명 · 날짜 (분류 글자는 공통 .ist-board-cate, /css/ist/board.css) */
.ist-card .ist-card__media { aspect-ratio: var(--card-ratio, 3 / 2); }
.ist-card__desc {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--m3-on-surface-variant);
}
.ist-card__date { color: var(--m3-on-surface-variant); }

/* 보기 : 제목 아래 짧은 설명 · 작성일 · 조회 */
.ist-card__view-desc { margin: 8px 0 0; color: var(--m3-on-surface-variant); }
.ist-card__view-info { margin-top: 12px; color: var(--m3-on-surface-variant); }

@media (max-width: 839px) {
    .ist-card.has-cate { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ist-card.has-cate .ist-card__cate { position: static; }
    .ist-card__cate ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ist-card.has-cate .ist-board-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .ist-card.has-cate .ist-board-cards { grid-template-columns: minmax(0, 1fr); }
}