@charset "UTF-8";
/*
 * 교사 메인(모바일) - 진로교육 추천자료/최신자료 카드 좌우 레이아웃
 * 데스크톱(w/css/main-teacher-data.css)과 동일 구성.
 * 적용 범위: .main-md-section.teacher 의 카드(.com-card2)
 * m/css/main.css 뒤에 로드되어 해당 부분만 덮어씁니다.
 */

/* 카드: 세로 스택 → 좌(이미지) / 우(텍스트) 2단 */
.main-md-section.teacher .com-card2 .con-box {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;                       /* 이미지-텍스트 간격 없음 */
	padding: 0;                   /* 이미지가 카드 모서리에 딱 붙도록 여백 제거 */
	min-height: 240px;
	height: 274px;                /* 카드 높이 - 조정 가능 */
}

/* 이미지 쪽(좌측) 카드 흰 프레임 모서리 각지게 - 우측(텍스트)은 라운드 유지 */
.main-md-section.teacher .com-card2 {
	border: 0;                    /* 카드 앵커의 1px 흰 테두리 제거 → 회색 테두리 이미지가 카드 외곽에 딱 맞물림 */
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* 좌측: 이미지 - con-box 모서리에 딱 맞게 채움 (여백 없음) */
.main-md-section.teacher .com-card2 .con-box .img-box {
	width: 48%;                   /* 좌우 비율 - 조정 가능 */
	height: auto;
	max-height: none;
	flex-shrink: 0;
	align-self: stretch;
	border: 1.2px solid #00A4C0;    /* 이미지 테두리 색 */
	border-radius: 0;             /* 좌측 이미지 모서리 라운드 없음 */
}
.main-md-section.teacher .com-card2 .con-box .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;            /* 잘림 싫으면 contain */
	aspect-ratio: auto;           /* 모바일 기본 aspect-ratio(3/1.7) 해제 */
}

/* 우측: 텍스트 컬럼 (제목 → 배지 → 유형) - 여백은 여기서만 */
.main-md-section.teacher .com-card2 .con-box .con-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 50px 16px 16px 16px; /* 상:추천/관심 버튼 자리 */
}

/* 제목: 한 줄 말줄임 → 여러 줄 표시 */
.main-md-section.teacher .com-card2 .con-box .con-info .title {
	white-space: normal;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;        /* 최대 줄 수 - 조정 가능 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
}

/* 배지(초등/중등/고등) 영역 - 제목 아래 */
.main-md-section.teacher .com-card2 .con-box .con-info .con-tp {
	width: auto;
	justify-content: flex-start;
}

/* 유형 */
.main-md-section.teacher .com-card2 .con-box .con-info .type {
	white-space: normal;
	line-height: 1.35;
	width: 100%;
}