@charset "utf-8";

/* ======================== 공통 유틸 ======================== */
.secTit { font-size: var(--fs24); font-weight: 700; color:#000; margin-bottom: 24px; }
 
/* ======================== 프로필 섹션 ======================== */
.profile { border-radius:16px; background: linear-gradient(96deg, #0191B7 0.19%, #085C72 99.81%); padding: 60px 0 60px 110px; color: #fff; }
.profile .inner { display: flex; align-items: center; gap: 60px; position: relative; }
 
/* 사진 */
.profile .photo { flex-shrink: 0; width: 240px; height: 300px; border-radius: 16px; overflow: hidden; background: #fff; position: relative; z-index: 1; }
.profile .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
 
/* 정보 영역 */
.profile .info { flex: 1; }
.profile .name { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs40); font-weight: 800; line-height: 1.2;}
.profile .name span { font-size: var(--fs22); font-weight: 200; opacity: 0.9; }
.profile .position { font-size: var(--fs26); font-weight: 700; margin-bottom: 16px; padding-top:4px; line-height:1; }
.profile .school { font-size: var(--fs16); font-weight:100; letter-spacing:.8px; opacity: 0.75; margin-bottom: 36px; display: inline-block; border-bottom: 1px solid rgba(255,255,255,
20%); padding-bottom: 36px;}
.profile hr { border: none; border-top: 1px solid rgba(255,255,255,0.3); margin-bottom: 28px; }
 
/* 연락처 */
.profile .contact { display: grid; grid-template-columns: 60px 16px 1fr; row-gap: 2px; font-size: var(--fs16); }
.profile .contact dt { font-weight: 700; }
.profile .contact dd { font-weight: 100; letter-spacing:.8px; }
 
/* ======================== 정보 섹션 ======================== */
.professor .info .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 80px; align-items: start; margin-top:70px;}
 
/* ======================== Education ======================== */
.eduBox { padding-bottom: 60px; border-bottom: 1px solid var(--border1); margin-bottom: 60px; }
.eduList { display: flex; flex-direction: column; gap: 28px; }
.eduList li p:first-child { font-size: var(--fs16); font-weight: 700; color:#000; }
.eduList li p:last-child { font-size: var(--fs16); line-height: 1.6; font-weight: 300; color: var(--text1); }
.eduList em { font-weight: 700; color: var(--c_base2); font-style:normal; }
 
/* ======================== Research Fields ======================== */
.researchList { display: flex; flex-direction: column; gap: 14px; }
.researchList li { display: flex; align-items: center; gap: 10px; font-size: var(--fs16); color: var(--text1); line-height: 1.5; font-weight:300;}
.researchList li span {display:block; width: 40px; height: 40px; border-radius: 8px; background: var(--bg1); transition:.5s;}
.researchList li img { flex-shrink: 0; padding: 11px; }
.researchList li:hover span {background:var(--c_base2);}
.researchList li:hover img {filter: brightness(0) invert(1);}
 
/* ======================== Career ======================== */
.careerList { display: flex; flex-direction: column; }
.careerList li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: start; }
.careerList li+li {padding-top:12px;}
.careerList li span { display:inline-block; position:relative; padding-left:14px; font-size: var(--fs16); font-weight: 700; color: #000; white-space: nowrap; }
.careerList li span::before { content: ''; position:absolute; width:4px; height:4px; background:#000; border-radius:100px; left:0; top:10px; color: var(--c_base2); }
.careerList li p { font-size: var(--fs16); color: var(--text1); font-weight:300; line-height: 1.6; }
 
/* ======================== 반응형 - 1249px ======================== */
@media screen and (max-width: 1249px) {
    .profile { padding: 70px 40px; }
    .professor .info { padding: 0; }
    .professor .info .inner { gap: 40px 60px; margin-top:40px; }
    .profile .photo { width: 200px; height: 250px; }
    .profile .inner::before { width: 280px; height: 340px; }
}
 
/* ======================== 반응형 - 768px ======================== */
@media screen and (max-width: 768px) {
    .profile { padding: 40px; }
    .profile .inner { flex-direction: column; align-items: flex-start; gap: 30px; }
    .profile .inner::before { display: none; }
    .profile .photo { width: 160px; height: 200px; }
    .profile .name { flex-wrap: wrap; gap: 8px; }
    .professor .info { padding: 0;}
    .professor .info .inner { grid-template-columns: 1fr; gap: 50px; }
    .careerList li { grid-template-columns:1fr; gap: 0px; }
	.careerList li p {line-height: 1.4; padding-left: 15px;}
	.careerList li+li {padding-top: 8px;}
	
	.eduBox {padding-bottom:30px; margin-bottom:30px;}
	.eduList {gap: 16px;}
	.secTit {margin-bottom: 16px;}
}