@charset "UTF-8";
/* ============================================================
   client.css — 출강기관 페이지 전용
   기준 시안 : reference/designPage/SONGPRO Sub Institutions.dc.html
   인트로 · 지표 · 구분선 · 문의 CTA 는 common.css 를 사용한다.
   ============================================================ */

/* ------------------------------------------------------------
   1. 본문 레이아웃
   ------------------------------------------------------------ */
.client-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-block: 64px;
}

/* ------------------------------------------------------------
   2. 구분 필터
   ------------------------------------------------------------ */
.client-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 스크립트가 없으면 필터를 숨긴 채 전체 목록만 남긴다 */
.client-filter[hidden] {
    display: none;
}

.filter-chip {
    padding: 8px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    background: var(--c-bg);
    color: var(--c-text-sub);
    font-family: inherit;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background var(--t-dur) var(--t-ease),
                border-color var(--t-dur) var(--t-ease),
                color var(--t-dur) var(--t-ease);
}

.filter-chip:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.filter-chip.is-on,
.filter-chip.is-on:hover {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: var(--c-text-invert);
    font-weight: 700;
}

/* ------------------------------------------------------------
   3. 기관 목록
   ------------------------------------------------------------ */
.client-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.client-group[hidden] {
    display: none;
}

.client-group__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-text);
}

.client-group__name {
    font-size: 19px;
    line-height: 28.5px;
    font-weight: 700;
    color: var(--c-text);
}

.client-group__count {
    font-size: 13px;
    line-height: 19.5px;
    color: var(--c-text-faint);
}

.client-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.client-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text);
    text-align: center;
}

/* 로고 비율을 유지한 채 타일 안쪽에 맞춘다.
   최대 높이 38px = 타일 64px - 위아래 여백 24px - 위아래 테두리 2px */
.client-grid__logo {
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
}

.client-note {
    font-size: 13px;
    line-height: 19.5px;
    color: var(--c-text-faint);
    text-wrap: pretty;
}

/* ------------------------------------------------------------
   4. 반응형
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .client-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .client-main {
        padding-block: 56px;
    }

    .client-grid {
        grid-template-columns: 1fr;
    }
}