/* ========================================================= 멤버 카드 (list-data1) + PI 카드 LinkedIn 공통 레이아웃 : 구분라벨 · 이름 (전체폭) └ .member-row = 사진(왼쪽) + .member-col(오른쪽) └ 이력 → 이메일 → 위치 → 연구관심 [1] 공통 (모든 화면) [2] PC (1025px 이상) [3] 모바일 (1024px 이하) ========================================================= */ /* ========================================================= [1] 공통 — 구조/규칙 (값은 [2][3]에서 지정) ========================================================= */ /* 멤버 카드 LinkedIn — 크기만 별도 조절 */ .list-data1 .btn-linkedin { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-li-size) !important; height: var(--ds-li-size) !important; border-radius: 50%; background: #5f6368; } .list-data1 .btn-linkedin svg { width: var(--ds-li-icon) !important; height: var(--ds-li-icon) !important; fill: #fff; } /* Location 핀 아이콘 */ .list-data1 .con.ic-loc:before { background-position: 0 -20.2rem; width: 2.1rem; height: 2.1rem; left: -0.2rem; } /* (이름 + 아이콘) 한 줄 */ .list-data1 .tit-row { display: flex; align-items: center; gap: var(--ds-tit-gap); margin-top: var(--ds-cate-gap); } .list-data1 .tit-row .tit { margin: 0; } /* 카드 상단 구분선 */ .list-data1 { border-top: 1px solid var(--line1) !important; } /* ═══════════════════════════════════════════════════════ ▼ LAYOUT : 사진 왼쪽 + 내용 오른쪽 ═══════════════════════════════════════════════════════ */ /* li — 템플릿의 사진 자리 + 위아래 여백 통제 */ .list-data1 > ul > li { position: relative; padding-right: 0 !important;; min-height: 0 !important; padding-top: var(--ds-li-padt) !important; padding-bottom: var(--ds-li-padb) !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 사진 + 내용 가로 배치 */ .list-data1 .member-row { display: flex; align-items: flex-start; gap: var(--ds-row-gap); margin-top: var(--ds-row-top); } /* 사진 — 템플릿 absolute 해제 */ .list-data1 .member-row .img { position: static !important; top: auto !important; right: auto !important; left: auto !important; float: none !important; flex: 0 0 var(--el-img-size); width: var(--el-img-size) !important; height: var(--el-img-size) !important; min-height: 0 !important; transform: translateY(var(--ds-img-down)) !important; transform: translateX(var(--ds-img-right)) !important; overflow: hidden; } /* 오른쪽 내용 칼럼 */ .list-data1 .member-row .member-col { flex: 1 1 auto; min-width: 0; max-width: var(--ds-col-maxw); padding-right: var(--ds-col-padr); padding-lefr: var(--ds-col-padl); box-sizing: border-box; } /* ═══════════════════════════════════════════════════════ */ /* ---------- info(dl) 공통 ---------- */ .list-data1 .info { margin: 0; } .list-data1 .info dd { margin-top: 0.4rem; margin-bottom: 0.8rem; max-width: var(--ds-dd-maxw) !important; white-space: normal; } /* Research Interests 제목 위 간격 */ .list-data1 .info dt:not(:empty) { margin-top: var(--ds-info-gap) !important; } /* 이력 ↔ 이메일 간격 */ .list-data1 .member-col .con.ic1 { margin-top: var(--ds-mail-gap); } /* ---------- 인턴 이름 (JSP의 history.text 필드) ----------*/ .list-data1 .intern-name { display: block !important; font-size: var(--ds-intern-name) !important; font-weight: 700 !important; color: var(--color1) !important; margin-bottom: var(--ds-intern-gap) !important; margin-top: var(--ds-interntop-gap) !important; } /* ---------- 글씨 크기 ---------- */ .list-data1 .cate { font-size: var(--ds-cate) !important; line-height: 1.5 !important; } .list-data1 .con.ic1 { font-size: var(--ds-mail) !important; line-height: 1.5 !important; } .list-data1 .con.ic-loc { font-size: var(--ds-loc) !important; line-height: 1.5 !important; } .list-data1 .info, .list-data1 .info dt, .list-data1 .info dd { font-size: var(--ds-info) !important; line-height: 1.5 !important; } /* ========================================================= [2] PC — 1025px 이상 ========================================================= */ @media only screen and (min-width: 1025px) { .list-data1 { /* --- 이름 영역 --- */ --ds-cate-gap: 1.0rem; /* ★ GRADUATE-STUDENTS ↔ 이름 */ --ds-tit-gap: 1.6rem; /* ★ 이름 ↔ LinkedIn 아이콘 */ --ds-li-size: 2.8rem; /* ★ LinkedIn 원 크기 */ --ds-li-icon: 1.4rem; /* ★ LinkedIn 로고 크기 */ /* --- 카드 여백 --- */ --ds-li-padt: 1.0rem; /* ★ 카드 위 여백 */ --ds-li-padb: 3.2rem; /* ★ 카드 아래 여백 */ /* --- 레이아웃 --- */ --el-img-size: 17rem; /* ★ 사진 가로 크기 */ --ds-row-gap: 3.5rem; /* ★ 사진 ↔ 내용 간격 */ --ds-row-top: 1.4rem; /* ★ 이름 ↔ (사진·내용) 간격 */ --ds-img-down: 0; /* ★ 사진만 아래로 (0 = 위 정렬) */ --ds-img-right: 1rem; --ds-col-maxw: none; /* 내용 칼럼 최대 폭 */ --ds-col-padr: 2.5rem; /* ★ 내용 오른쪽 여백 */ /* --- 글씨 크기 --- */ --ds-cate: 1.3rem; /* ★ 구분 (GRADUATE-STUDENTS) */ --ds-mail: 1.4rem; /* ★ E-mail */ --ds-loc: 1.4rem; /* ★ Location */ --ds-info: 1.4rem; /* ★ 학력 · Research Interests */ --ds-intern-name: 1.6rem; /* ★ 인턴 이름 크기 */ /* --- 간격 --- */ --ds-dd-maxw: none; /* 본문 줄 길이 (none = 칼럼 폭까지) */ --ds-mail-gap: 0.8rem; /* ★ 이력 ↔ 이메일 */ --ds-info-gap: 1.8rem; /* ★ 위치 ↔ RESEARCH INTERESTS */ --ds-intern-gap: 0.2rem; /* ★ 인턴 이름 ↔ 기간 */ --ds-interntop-gap: 1.2rem; } } /* ========================================================= [3] 모바일 — 1024px 이하 ========================================================= */ @media only screen and (max-width: 1024px) { .list-data1 { --ds-cate-gap: 0.6rem; --ds-tit-gap: 0.9rem; --ds-li-size: 2.0rem; --ds-li-icon: 1.0rem; --ds-li-padt: 1.3rem; --ds-li-padb: 1.5rem; /* --- 레이아웃 --- */ --el-img-size: 12rem; --ds-row-gap: 1.4rem; --ds-row-top: 1.4rem; --ds-img-down: 0; --ds-col-maxw: none; --ds-col-padr: 0.2rem; /* --- 글씨 크기 --- */ --ds-cate: 1.1rem; --ds-mail: 1.1rem; --ds-loc: 1.1rem; --ds-info: 1.1rem; --ds-intern-name: 1.2rem; /* --- 간격 --- */ --ds-dd-maxw: none; --ds-mail-gap: 1.1rem; --ds-info-gap: 1.1rem; --ds-intern-gap: 0.3rem; /* --- 아이콘 --- */ --ds-icon-x: 1.2rem; --ds-icon-y: -0.3rem; --ds-icon-pad: 2.3rem; } /* 봉투·핀 아이콘 0.6배 축소 + 위치 이동 */ .list-data1 .con.ic1:before, .list-data1 .con.ic-loc:before { transform: scale(0.7) translateX(var(--ds-icon-x)) translateY(var(--ds-icon-y));; transform-origin: left center; } /* 아이콘 축소분만큼 텍스트 당김 */ .list-data1 .con.ic1, .list-data1 .con.ic-loc { padding-left: var(--ds-icon-pad); } }