@charset "UTF-8";
/*
 * 산업 지원 시설·장비 목록 카드 (TK-346, 설계서 BMIP-AD-102)
 * 마크업 : WEB-INF/jsp/egovframework/bmip/usersys/indst/{fclt,eqpmnt}/list.jsp — ul.indst_card_lst > li.indst_card
 * 2열(1280 미만 1열 — 그보다 좁으면 주소가 너무 많이 접힌다). 카드 = 왼쪽 이미지 | 오른쪽 [이름 · 예약 바로가기/개별 문의] + 정보 목록 + 관심 버튼(오른쪽 아래)
 * 768 미만은 [이미지 | 이름·배지] 아래로 정보 목록을 카드 폭 전체에 편다.
 * 색은 다크모드(:root[data-theme="dark"])가 바꾸는 공용 변수를 쓴다.
 */
.indst_card_lst{display:grid;grid-template-columns:minmax(0,1fr);column-gap:4rem;margin:0;padding:0;list-style:none}
@media (min-width:1280px){
	.indst_card_lst{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.indst_card_lst > li.no_data{grid-column:1 / -1;padding:2rem 0}

.indst_card{position:relative;display:grid;grid-template-columns:20rem minmax(0,1fr);gap:2.4rem;align-items:stretch;padding:2.4rem 0;border-bottom:1px solid var(--color-gray20)}
@media (min-width:1280px){
	.indst_card{grid-template-columns:18rem minmax(0,1fr)}
}
@media (min-width:1440px){
	.indst_card{grid-template-columns:20rem minmax(0,1fr)}
}

/* 이미지 — 없으면 사이트 기본 썸네일(img_thumb.jpg, 깨진 이미지 onerror 와 같은 그림)을 상자 배경으로 */
.indst_card .card_img{align-self:start;aspect-ratio:4/3;overflow:hidden;border-radius:.4rem;background:#f2f2f2 url(/images/contents/img_thumb.jpg) no-repeat 50% / cover}
.indst_card .card_img img{display:block;width:100%;height:100%;object-fit:cover;background-color:#f2f2f2}

.indst_card .card_body{display:flex;flex-direction:column;gap:1.4rem;min-width:0}

/* 이름 · 예약 바로가기/개별 문의 */
.indst_card .card_head{display:flex;align-items:flex-start;gap:1.2rem}
.indst_card .card_head .tit{flex:1 1 auto;min-width:0;font-size:1.8rem;font-weight:var(--fws-semibold);line-height:1.4;color:var(--color-gray90);word-break:keep-all;overflow-wrap:anywhere}
.indst_card .card_head a.tit:hover{text-decoration:underline;color:var(--color-point-blue)}
.indst_card .card_head .badge{flex:0 0 auto;margin:0 0 0 auto}

/* 정보 — '항목 : 값'. 마지막 줄은 오른쪽 아래 관심 버튼 자리를 비운다 */
.indst_card .card_info{display:flex;flex-direction:column;gap:.6rem;margin:0;font-size:1.4rem;line-height:1.5}
.indst_card .card_info .item{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.6rem}
.indst_card .card_info .item:last-child{padding-right:8rem}
.indst_card .card_info dt{color:var(--color-gray60);white-space:nowrap}
.indst_card .card_info dt::after{content:' :'}
.indst_card .card_info dd{margin:0;color:var(--color-gray80);word-break:keep-all;overflow-wrap:anywhere}
.indst_card .card_info dd a{color:inherit}
.indst_card .card_info dd a:hover{text-decoration:underline}

/* 관심 버튼은 카드 아래 여백까지 내려 위 줄(주소 끝)과 겹치지 않게 */
.indst_card .card_itrst{position:absolute;right:0;bottom:1.2rem;padding:0}

/* 768 미만 — [이미지 | 이름·배지] 아래로 정보 목록 */
@media (max-width:767px){
	.indst_card{grid-template-columns:10rem minmax(0,1fr);gap:1.2rem 1.4rem;padding:2rem 0}
	.indst_card .card_body{display:contents}
	.indst_card .card_head{grid-column:2;grid-row:1;flex-direction:column;gap:.8rem}
	.indst_card .card_head .tit{font-size:1.6rem}
	.indst_card .card_head .badge{margin:0}
	.indst_card .card_info{grid-column:1 / -1;font-size:1.4rem}
	.indst_card .card_info .item{grid-template-columns:7.2rem minmax(0,1fr)}
	.indst_card .card_info .item:last-child{padding-right:6.4rem}
	.indst_card .card_itrst{bottom:1rem}
}

:root[data-theme="dark"] .indst_card{border-bottom-color:var(--color-gray80)}
:root[data-theme="dark"] .indst_card .card_head .tit{color:var(--color-text-title)}
:root[data-theme="dark"] .indst_card .card_info dt{color:var(--color-text-sub)}
:root[data-theme="dark"] .indst_card .card_info dd{color:var(--color-text-body)}