@charset "utf-8";

/* 구성원 리스트 */
.memberList { }
.memberList .inner { }
.memberList ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.memberList li { display: flex; align-items: center; gap: 40px; padding: 40px; border: 1px solid var(--border1); border-radius: 30px; background: #fff; transition: all .3s ease; }
.memberList li:hover { box-shadow: 0 10px 30px -5px rgba(0,0,0,.08); border-color: #d9d9d9; }
 
.memberPhoto { flex-shrink: 0; width: 140px; height: 180px; border-radius: 16px; overflow: hidden; background: #f1f1f1; }
.memberPhoto img { width: 100%; height: 100%; object-fit: cover; }
 
.memberInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.memberRole { display: inline-flex; align-self: flex-start; padding: 7px 18px; border-radius: 100px; background: #F7F8FA; border:1px solid #E4E5E6; font-size: var(--fs14); font-weight: 300; color: #9AA0AD; line-height: 1.2; }
.memberName { padding-bottom: 20px; border-bottom: 1px solid var(--border1); font-size: var(--fs24); font-weight: 700; color:#000; line-height: 1.3; transition:.3s; }

.memberList li:hover .memberName {color:var(--c_base2);}

.memberName em { margin-left: 8px; font-style: normal; font-size: var(--fs18); font-weight: 400; color: #888; }
.memberMail { display: flex; align-items: center; gap: 10px; font-size: var(--fs15); color: #9AA0AD; font-weight:300; }
.memberMail img { width: 18px; height: 18px; flex-shrink: 0; }
 
/* 활성 상태 */
.memberList li.on .memberName { color: var(--c_base1); }
 
/* 반응형 - 1249px */
@media screen and (max-width: 1249px) {
	.memberList ul { grid-template-columns: 1fr; gap: 20px; }
	.memberList li { padding: 25px 30px; gap: 30px; }
	.memberList li:hover { box-shadow: none; border-color: var(--c_border1); }
	.memberPhoto { width: 120px; height: 160px; }
}
 
/* 반응형 - 768px */
@media screen and (max-width: 768px) {
	.memberList li { padding: 20px; gap: 20px; border-radius: 14px; align-items: flex-start; flex-direction: column; }
	.memberPhoto { width: 95px; height: 125px; border-radius: 8px; }
	.memberInfo { gap: 10px; width: 100%; }
	.memberRole { padding: 5px 14px; }
	.memberName { padding-bottom: 12px; }
	.memberName em { display: block; margin-left: 0; margin-top: 2px; }
	.memberMail img { width: 16px; height: 16px; }
}