@charset "utf-8";

/* ===== 레이아웃 ===== */
.memberLayout { display: grid; grid-template-columns: 330px 1fr; gap: 60px; align-items: start; }
.tabSide { position: sticky; top: 120px; }
 
/* ===== 탭 메뉴 (제공 CSS 기반 · 세로 배치로 조정) ===== */
.tabWrap ul { display: flex; flex-direction: column; gap: 8px; }
.tabWrap ul li a { padding: 0 24px; display:inline-block; width: 330px; height: 56px; line-height: 53px; border-radius: 8px; color: #B0BBC9; border: 1px solid #D1DBE6; background: #F7F8F9; text-align: left;  position: relative; transition: .3s; }

.tabWrap ul li a::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: .3s; }
.tabWrap ul li .active { color: #fff; border: 1px solid var(--c_base1); background: var(--c_base1); }
.tabWrap ul li a:hover { color: #fff; border: 1px solid var(--c_base1); background: var(--c_base1); }
 
/* ===== 페이지 타이틀 ===== */
.pageTit { margin-bottom: 30px; font-size: var(--fs32); font-weight: 700; color: #000; }
 
/* ===== 구성원 리스트 (기존 member.css 재사용) ===== */
.memberList ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.memberList li { display: flex; align-items: flex-start; gap: 40px; padding: 40px 60px; 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; }
.memberInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.memberName { font-size: var(--fs24); font-weight: 700; color: #000; line-height: 1.3; }
.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; }
 
/* ===== 카드 내부 신규 영역 ===== */
.infoHead { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--border1); }
.workPlace { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.workTit { font-size: var(--fs16); font-weight: 700; color: #000; line-height: 1.5; }
.workTit::before { content: "- "; }
.workDesc { font-size: var(--fs15); color: #666; line-height: 1.6; }
.yearTag { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; 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; }
.yearTag .bar { color:#9AA0AD; }
 
/* ===== 반응형 - 1249px (태블릿 이하 : 가로 탭으로 전환) ===== */
@media screen and (max-width: 1249px) {
	.memberLayout { grid-template-columns: 1fr; gap: 30px; }
	.tabSide { position: static; top: auto; }
	.tabWrap ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
	.tabWrap ul li a { width: 330px; height: 50px; line-height: 47px; text-align: center; padding: 0; }
	.tabWrap ul li a::after { display: none; }
	.tabWrap ul li a:hover { color: #B0BBC9; border: 1px solid #D1DBE6; background: #F7F8F9; }
	.tabWrap ul li .active, .tabWrap ul li .active:hover { color: #fff; border: 1px solid var(--c_base1); background: var(--c_base1); }
	.memberList ul { grid-template-columns: 1fr; gap: 20px; }
	.memberList li { padding: 30px; gap: 20px; }
	.memberList li:hover { box-shadow: none; border-color: var(--border1); }
}
 
/* ===== 반응형 - 768px ===== */
@media screen and (max-width: 768px) {
	.tabWrap ul li { flex: 100%; }
	.tabWrap ul li a { width: 100%; height: 56px; line-height: 56px; }
	.memberList li { padding: 24px; border-radius: 20px; }
	.memberInfo { gap: 16px; }
	.infoHead { padding-bottom: 16px; }
	.memberName em { display: block; margin-left: 0; margin-top: 2px; }
	.pageTit {margin-bottom:10px;}
}