/*

// 사용한 곳

1. megazine (board-list)
2. tip (board-list)
3. notice (board-list)

-------------------------------------------------------------------------------------

// boardList.css ( common ) 연동
add_stylesheet('<link rel="stylesheet" href="'.THEMA_URL.'/amt/sh1/sh1-common/css/boardList.css" type="text/css">',2);

-------------------------------------------------------------------------------------

// html

<li class="list">
	<a href="<?php echo $list[$i]['href']; ?>">
		<!-- 탑 웹 ( 프로필 & 시간 & 칩 ) -->
		<div class="top_wrap">
			<div class="profile">
				<div class="img_box">
					<img src="<?php echo THEMA_URL;?>/amt/sh1/sh1-common/img/img_profile.jpg">
				</div>
				
				<p class="nickname">우렁곽씌</p>
			</div>
			
			<p class="time">2시간 전</p>
			
			<div class="chip darkGray">
				<span>셀프케어</span>
			</div>
		</div>
		
		<!-- 이미지 & 텍스트 웹 -->
		<div class="img_text_wrap">
			<!-- 이미지 박스 -->
			<?php if($img['src']) { ?>
				<div class="img_box">
					<img src="<?php echo $img['src'];?>">
				</div>
			<?php } else{ ?>
				<div 
					class="img_box" 
					style="background:var(--dark-gray-color)"
				></div>
			<?php } ?>
			
			<!-- 텍스트 박스 -->
			<div class="text_box">
				<p class="list_title">
					<?php echo $list[$i]['subject']; ?>
				</p>
				
				<p class="list_body">
					<?php echo $list[$i]['content']; ?>
				</p>
			</div>
		</div>
	</a>
</li>

*/

/* ==================== 리스트 ==================== */
.list{
	display: block !important;
	padding: 25px 0;
	border-bottom:1px solid var(--light-gray-color) !important;
}

/* ===== 탑 웹 ( 프로필 & 시간 & 칩 ) ===== */
.top_wrap{
	position: relative;
	display: flex;
	align-items: center;
	gap:10px;
	margin-bottom:15px;
}

/* 프로필 */
.top_wrap .profile{
	display: flex;
	align-items: center;
	gap:10px;
}

.top_wrap .profile .img_box{
	width:30px;
	height:30px;
	border-radius: 50%;
}

.top_wrap .profile .img_box img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius: 50%;
}

.top_wrap .profile .nickname{
	margin:0;
	font-weight: 700;
	font-size: 13px;
	color: var(--black-color);
}

/* 작성 시간 */
.top_wrap .time{
	margin:0;
	font-weight: 400;
	font-size: 13px;
	color: var(--dark-gray-color);
}

/* 칩 */
.top_wrap .chip{
	position: absolute;
	right:0;
	top:50%;
	transform: translateY(-50%);
}

/* ===== 이미지 & 텍스트 웹 ===== */
.img_text_wrap{
	display: flex;
	align-items: start;
	justify-content: space-between;
}

/* 이미지 박스 */
.img_text_wrap .img_box{
	width:25%;
	height:90px;
	border-radius: 15px;
}

.img_text_wrap .img_box img{
	width:100%;
	height:100%;
	object-fit: cover;
	border-radius: 15px;
}

/* 텍스트 박스 */
.img_text_wrap .text_box{
	width:70%;
	padding:5px 0;
}

.list_title{
	margin: 0 0 5px;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.5em;
	color: var(--black-color);
	/* 말줄임 */
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img_text_wrap .text_box .list_body{
	margin:0;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2em;
	color: var(--dark-gray-color);
	/* 말줄임 */
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;      
    -webkit-box-orient: vertical;

}