@charset "utf-8";
/* 명예 · 퇴임교수 목록 (lab_emeritus) ******************************************
 * 카드 모양은 직원 목록(lab_member) 과 같다. 다만 명예 · 퇴임교수에는 담당업무가 없으므로
 * 카드 아래쪽 '담당업무' 칸을 쓰지 않고, 연락처 · 연구실 · 교수정보를 이름 옆에 모은다.
 * 사진이 작아(105x131 짜리도 있다) 크게 키우지 않는 것이 이 스킨을 따로 둔 까닭이다.
 * 본문 글자는 16px 아래로 내리지 않는다.
============================================================================== */
.lab-wrap.lab-em{max-width:none;--pad:0px;--point:#1b3b86;--point-tint:#f2f4f9;--point-line:#c9d3e4;}
.lab-em .lab-mb-head{padding-top:0;}
.lab-em .lab-listbar{margin-top:0;}
.lab-em i{font-weight:normal;}
.lab-em .lab-total,.lab-em .lab-listbar .lab-total{color:#7a8090;font-size:18px;font-weight:600;letter-spacing:-.5px;}
.lab-em .lab-btn i,.lab-em .lab-btn-point i{font-size:17px;vertical-align:-2px;}

/* ---------- 연구분야 필터 · 검색창 (전임교수 목록 · 연구실 목록 sub3_2 과 같은 값) ---------- */
.lab-em .fc-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.lab-em .fc-areas button{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border:1px solid #dde2ea;border-radius:999px;background:#fff;color:#4d525c;font-family:inherit;font-size:19px;font-weight:600;letter-spacing:-.5px;line-height:1;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.lab-em .fc-areas button:hover{border-color:#2a6de6;color:#2a6de6;}
.lab-em .fc-areas button.is-on{border-color:#1b3b86;background:#1b3b86;color:#fff;}
.lab-em .fc-areas em{font-family:var(--font-family2);font-size:15px;font-style:normal;font-weight:700;color:#98a0ae;}
.lab-em .fc-areas button.is-on em{color:rgba(255,255,255,.72);}

.lab-em .fc-search{position:relative;flex:0 0 auto;width:340px;}
.lab-em .fc-search input{width:100%;height:46px;padding:0 42px;border:1px solid #dde2ea;border-radius:999px;background:#fff;color:#222;font-family:inherit;font-size:17px;letter-spacing:-.5px;box-sizing:border-box;transition:border-color .2s ease;}
.lab-em .fc-search input:focus{outline:none;border-color:var(--main-bright);}
.lab-em .fc-search input::placeholder{color:#a3a9b5;}
.lab-em .fc-search input::-webkit-search-cancel-button{display:none;}
.lab-em .fc-search > i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#98a0ae;font-size:19px;pointer-events:none;}
.lab-em .fc-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:#eef1f5;color:#666;cursor:pointer;}
.lab-em .fc-search-clear[hidden]{display:none;}
.lab-em .fc-search-clear:hover{background:#dde2ea;color:#222;}
.lab-em .fc-search-clear i{font-size:16px;}
.lab-em .fc-noresult{margin:0;padding:80px 20px;color:#8a90a0;font-size:18px;text-align:center;}
.lab-em .fc-noresult[hidden]{display:none;}

/* ---------- 카드 (직원 목록 lab_member 와 같은 모양) ----------
   명예 · 퇴임교수는 담을 내용이 적어 한 줄에 3장씩 놓는다 */
.lab-em .lab-mb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;margin-top:30px;padding:0;}
.lab-em .em-card[hidden]{display:none;}
.lab-em .em-card .top{position:relative;z-index:1;display:flex;gap:26px;align-items:center;padding:30px 28px;}

/* 카드 오른쪽 아래에 연세대 심볼마크 (전임교수 카드 뒷면과 같은 구실).
   sb.png 는 흰색 이미지라 마스크로 찍어 연세 남색으로 물들인다.
   평소에는 감춰 두고 마우스를 올렸을 때만 부드럽게 떠오르게 한다. */
.lab-em .em-card:after{
	content:"";position:absolute;right:-12px;bottom:-16px;z-index:0;width:172px;height:172px;
	background:var(--point);
	-webkit-mask-image:url(../../../images/common/sb.png); mask-image:url(../../../images/common/sb.png);
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center;  mask-position:center;
	-webkit-mask-size:contain;     mask-size:contain;
	opacity:0;pointer-events:none;
	transition:opacity .45s ease,transform .45s ease;transform:translateY(10px);
}
.lab-em .em-card:hover:after{opacity:.12;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
	.lab-em .em-card:after{transition:opacity .2s ease;transform:none;}
	.lab-em .em-card:hover:after{transform:none;}
}
.lab-em .em-card .ph{width:160px;height:200px;flex:none;border-radius:14px;border:1px solid var(--line);background:linear-gradient(150deg,var(--point-tint),var(--line-2));background-size:cover;background-position:center 12%;overflow:hidden;display:block;}
.lab-em .em-card .ph.noimg{background-color:var(--point-tint);}
/* 줄 간격은 붙여 쓴다 (띄우면 성기게 보인다). 오른쪽은 동그란 화살표 자리를 비워 둔다 */
.lab-em .em-card .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;padding-right:40px;}

.lab-em .em-card .nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;font-size: 30px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink);}
.lab-em .em-card .nm small{color:#8a90a0;font-size:18px;font-weight:400;letter-spacing:-.3px;}
.lab-em .em-card .nm .fac-late{margin-right:4px;color:#8a90a0;font-weight:600;}

/* 직위 · 보직 · 연구분야 배지 */
.lab-em .em-card .bds{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 13px;}
.lab-em .em-card .bd{width:fit-content;padding:4px 14px;border-radius:999px;background:var(--point);color:#fff;font-size:14px;font-weight: 700;letter-spacing:-.3px;line-height:1.5;}
.lab-em .em-card .bd.is-role{background:var(--main-bright,#244fb2);}
.lab-em .em-card .bd.is-area{background:#fff;border:1px solid var(--point-line);color:var(--point);font-weight:700;}

.lab-em .em-card .em{display:flex;align-items:flex-start;gap:8px;min-width:0;color:var(--ink-2);font-size: 16px;font-weight: 500;letter-spacing: -.2px;line-height:1.45;word-break:keep-all;}
.lab-em .em-card .em + .em{margin-top:5px;}
.lab-em .em-card .em i{flex:none;color:var(--point);font-size:16px;line-height:1.45;}
.lab-em .em-card .em a{color:inherit;overflow-wrap:anywhere;}
.lab-em .em-card .em a:hover{color:var(--point);text-decoration:underline;}

/* 연세대 교수 DB 바로가기 — 전임교수 카드의 동그란 화살표와 같은 모양, 조금 작게 */
.lab-em .em-card .em-go{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--point-tint);color:var(--point);font-size:21px;transition:background .25s ease,color .25s ease,transform .25s ease;}
.lab-em .em-card .em-go i{font-weight:normal;}
.lab-em .em-card:hover .em-go{background:var(--point);color:#fff;}
.lab-em .em-card .em-go:hover{background:var(--main-bright,#244fb2);color:#fff;transform:rotate(45deg);}

/* 칸 수 : 3 → 2 → 1 */
@media (max-width:1439px){ .lab-em .lab-mb-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:980px){  .lab-em .lab-mb-grid{grid-template-columns:minmax(0,1fr);} }

/* 좁은 화면 : 사진을 위로 올리고 가운데 정렬 (lab_member 와 같은 방식) */
@media (max-width:640px){
	.lab-em .em-card .top{flex-direction:column;align-items:center;gap:24px;padding:28px 24px;}
	.lab-em .em-card .who{align-self:stretch;padding-right:0;}
	.lab-em .em-card .em-go{right:16px;bottom:16px;width:38px;height:38px;font-size:20px;}
	.lab-em .em-card .nm{justify-content:center;font-size:26px;}
	.lab-em .em-card .bds{justify-content:center;}
	.lab-em .em-card .em{justify-content:center;}
}

/* 관리자 수정 버튼 — 카드 오른쪽 위. 관리자에게만 나온다 (전임교수 · 직원 목록과 같은 모양) */
.lab-em .em-card .em-edit{position:absolute;right:16px;top:16px;z-index:4;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:16px;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.lab-em .em-card .em-edit i{font-weight:normal;}
.lab-em .em-card .em-edit:hover{border-color:var(--point);background:var(--point);color:#fff;}