@charset "UTF-8";
.press-page .txt01 {
	text-align: left;
}
.press-page .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 24px;
}

.press-page .header_left {
    flex: 1 1 auto;
}

.press-page .header_right {
    flex: 0 0 320px;   /* 검색 박스 폭 */
}

.press-page .contents_search {
    margin: 0;  /* 위아래 여백 제거해서 컴팩트하게 */
}

.press-page .tab {
    margin-bottom: 24px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* =========================
   리스트 전체: 3열 그리드
   ========================= */
.press_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));  /* PC: 한 줄에 3개 */
    gap: 20px;
	margin-top: 2rem; /* 약 32px */
}

/* li – 별도 보더 필요 없음 */
.press_list > li {
    border: none;
}

/* 카드 전체 */
.press-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* hover 시 살짝만 강조 */
@media (hover: hover) {
    .press-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }
}

/* 썸네일: 여백 없이 딱 맞게 */
.press-thumb {
	position: relative;
    width: 100%;
    /* height: 150px;                 썸네일 세로 높이 (PC/모바일 공통 기본값) */
    background: #f5f5f5;
    overflow: hidden;
    aspect-ratio: 16 / 9;    /* 🔥 관리자 aspect-video 비슷한 효과 */
}

/* 16:9 비율 박스 만들기 */
.press-thumb::before {
    content: "";
    display: block;
    padding-top: 56.25%;  /* 9 / 16 * 100 = 56.25% */
}

/*
.press-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}*/
/* 이미지 절대 위치로 꽉 채우기 */
.press-thumb img {
    position: absolute;
    inset: 0;             /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 영역 */
.press-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;       /* 카드 안 기본 여백 */
    padding: 12px 12px 12px;
    min-width: 0;
}


/* 카테고리 뱃지 */
.press-category {
    align-self: flex-start;          /* 왼쪽 위에 붙이기 (flex 컨텍스트에서) */
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 6px;             /* 카테고리와 제목 사이 간격 */
    
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    
    color: #b70000;                  /* 메인 버건디 컬러 텍스트 */
    background: #FFF4EE;             /* 살짝 은은한 배경 */
    border: 1px solid rgba(183, 0, 0, 0.3);
    border-radius: 999px;            /* 알약 모양 */

    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;         /* 너무 긴 카테고리는 말줄임 */
}


/* 제목 */
.press-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;               /* 제목–요약 간 간격 */
    line-height: 1.5;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 요약 문구 */
.press-summary {
    margin: 0 0 6px;               /* 요약–날짜 간 간격 */
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 날짜 */
.press-meta {
    margin: 0;
    font-size: 0.8rem;
    color: #999;
    margin-top: auto;              /* 아래로 밀기 */
}

.press-date::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ddd;
    margin-right: 8px;
    margin-bottom: 2px;
}

/* 데이터 없을 때 */
.press-empty {
    grid-column: 1 / -1;           /* 전체 너비 차지 */
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 0.95rem;
}

/* =========================
   언론보도 리스트 페이지 전용 여백 튜닝
   (다른 페이지 영향 없음)
   ========================= */

/* PC 전용: 설명 아래 여백 좀 더 주기 */
@media (min-width: 769px) {
    .press-page .tit01 {
        margin-bottom: 6px;          /* 타이틀-설명 간 간격 살짝만 */
    }

}

/* =========================
   반응형
   ========================= */
/* 태블릿: 2열 */
@media (max-width: 1024px) {
    .press_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .press-thumb {
        height: 140px;
    }
}

/* 모바일: 1열 */
@media (max-width: 768px) {
    .press-page .header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .press-page .header_right {
        flex: 1 1 auto;
    }
/* 
    .tit01 {
        text-align: left;   모바일도 왼쪽 정렬 유지(더 자연스럽게 보임)
    }
 */
    .press-page .tab {
        margin-bottom: 16px;
    }
    
    .press_list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .press-item {
        border-radius: 10px;
    }
    
    .press-category {
        font-size: 0.7rem;
        padding: 2px 6px;
        margin-bottom: 4px;
    }

    /* 모바일에서도 그냥 고정 높이 사용 (레이아웃 안정) */
    .press-thumb {
        height: 150px;             /* 필요하면 140~160 사이로 미세조정 */
    }

    .press-body {
        padding: 10px 10px 12px;
    }

    .press-title {
        font-size: 0.9rem;
    }

    .press-summary {
        font-size: 0.82rem;
    }
    
    .press-page .press_list {
    	margin-top: 1.5rem;
  	}
  	
}