/* =========================================================
   교수 프로필 카드 (info-data1)
   ========================================================= */

/* ---------- 공통 (레이아웃과 무관 · 항상 유지) ---------- */

.info-data1 .tit .tit-name{
	display: inline-flex;
	align-items: center;
	gap: var(--ds-tit-gap);
}

/* LinkedIn 버튼 — 크기는 PC/모바일 블록의 변수로 조절 */
.info-data1 .btn-linkedin{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  var(--ds-li-size);
	height: var(--ds-li-size);
	border-radius: 50%;
	background: #5f6368;
	flex: 0 0 auto;
}
.info-data1 .btn-linkedin svg{
	width:  var(--ds-li-icon);
	height: var(--ds-li-icon);
	fill: #fff;
}
.info-data1 .tit .tit-name .btn-linkedin{
	position: relative;
	top: var(--ds-li-top);
	right: var(--ds-li-right);
}

.info-data1 .info{ display: block; }
.info-data1 .info dl{
	display: flex;
	gap: 9px;
	margin-bottom: 0px;
	width: 100%;
}

.info-data1 .info dl dd{ flex: 1; }

.info-data1 .info .position-item{ display: block; margin-bottom: 2px; }


/* 사진 필렛 제거 (.side에 걸려 있음) */
.info-data1 .side,
.info-data1 .side .img,
.info-data1 .side .img img{ border-radius: 0 !important;height: auto !important;aspect-ratio: auto !important; }

@media only screen and (min-width: 1025px) {
  .info-data1 .body-row .side {
    margin-left: 1.6rem !important;   /* ★ 밀 거리 */
    flex: 0 0 20rem;                  /* 폭 유지 */
  }
}
/* ═══════════════════════════════════════════════════════
   ▼▼▼ LAYOUT OVERRIDE 시작 ▼▼▼
   [이름 상단 전체폭 + 사진 왼쪽 · 정보 오른쪽] 
   ═══════════════════════════════════════════════════════ */
@media only screen and (min-width: 1025px){
	.info-data1{
	--el-img-size: 36em;   /* PC 사진 크기 */
}

	
	
	.info-data1{
		padding: 4.9rem 0 0 3.3rem !important;   
		min-height: 0 !important;               
		display: block;
	}
	.info-data1 .tit{ margin-bottom: 1.6rem; }

	.info-data1 .body-row{
		display: flex;
		align-items: flex-start;
		gap: 2.2rem;
	}
	
	
	.info-data1 .body-row .side{
		position: static !important;   /* 템플릿 absolute 해제 */
		top: auto !important;
		right: auto !important;
		left: auto !important;
		float: none !important;
		flex: 0 0 36rem;
		width: 36rem;
		height: 13.5rem !important;      
		min-height: 0 !important;      
		margin-top: 10rem;           
	}
	
	
	
	.info-data1 .body-row .main-col{
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 4rem;
	}
}


/* ═══════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════ */


/* ---------- 모바일 사진 크기 (레이아웃과 무관 · 유지) ---------- */
@media only screen and (max-width: 1024px) {
    .info-data1 {
        --el-img-size: 21em;  
    }
}

@media only screen and (max-width: 1024px){
	.info-data1 .body-row .side{
		width: var(--el-img-size) !important;
		max-width: var(--el-img-size) !important;
		flex: 0 0 auto !important;
		margin: 1rem 1rem 2rem 2rem !important;
	}
	
}


/* =========================================================
   교수 프로필 — 모바일 글씨 · 아이콘 크기
   ---------------------------------------------------------
   ★ 아래 숫자만 조절하세요 (1rem = 10px)
   ========================================================= */
@media only screen and (max-width: 1024px) {

  .info-data1 {
    /* --- 글씨 --- */
    --ds-m-label:    1.1rem;   /* ★ 라벨 (Tel : / E-mail :) */
    --ds-m-value:    1.1rem;   /* ★ 값 (전화번호 · 이메일 · 주소) */
    --ds-m-posline:  1.1rem;   /* ★ Position 1줄 (연도 + 직함) */
    --ds-m-role:     1.1rem;   /* ★ Position 2줄 (소속) */

    /* --- LinkedIn 버튼 --- */
    --ds-li-size:    2.2rem;   /* ★ 원 크기 */
    --ds-li-icon:    1.2rem;   /* ★ 로고 크기 */
    --ds-li-top:    -0.2rem;   /* ★ 위아래 미세조정 */
    --ds-tit-gap:    0.8rem;   /* ★ 이름 ↔ 아이콘 간격 */
  }

  /* 라벨 */
  .info-data1 .info dl dt {
    font-size: var(--ds-m-label) !important;
    line-height: 1.4 !important;
  }

  /* 값 */
  .info-data1 .info dl dd {
    font-size: var(--ds-m-value) !important;
    line-height: 1.4 !important;
  }

  /* Position — 1줄 (연도 + 직함) */
  .info-data1 .info .position-item .pos-line1,
  .info-data1 .info .position-item .title {
    font-size: var(--ds-m-posline) !important;
    line-height: 1.4 !important;
  }

  /* Position — 2줄 (소속) */
  .info-data1 .info .position-item .role {
    font-size: var(--ds-m-role) !important;
    line-height: 1.4 !important;
  }
}

/* =========================================================
   교수 프로필 — 모바일 라벨 ↔ 값 간격
   ★ 아래 두 숫자만 조절 (1rem = 10px)
   ========================================================= */
@media only screen and (max-width: 1024px) {

  .info-data1 {
    --ds-m-dl-gap:   0.8rem;   /* ★ 라벨과 값 사이 간격 */
    --ds-m-dt-width: 5.0rem;   /* ★ 라벨 칸 폭 (auto = 글자 폭만큼) */
  }

  .info-data1 .info dl {
    gap: var(--ds-m-dl-gap) !important;
  }

  .info-data1 .info dl dt {
    flex: 0 0 var(--ds-m-dt-width) !important;
    width: var(--ds-m-dt-width) !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .info-data1 .info dl dd {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   교수 프로필 — PC 글씨 · 아이콘 크기
   ---------------------------------------------------------
   ★ 아래 숫자만 조절하세요 (1rem = 10px)
   ※ 사진·레이아웃은 위쪽 그대로 (건드리지 않음)
   ========================================================= */
@media only screen and (min-width: 1025px) {

  .info-data1 {
    /* --- 글씨 --- */
    --ds-p-label:    1.5rem;   /* ★ 라벨 (Tel : / E-mail :) */
    --ds-p-value:    1.5rem;   /* ★ 값 (전화번호 · 이메일 · 주소) */
    --ds-p-posline:  1.5rem;   /* ★ Position 1줄 (연도 + 직함) */
    --ds-p-role:     1.5rem;   /* ★ Position 2줄 (소속) */

    /* --- LinkedIn 버튼 --- */
    --ds-li-size:    3.2rem;   /* ★ 원 크기 */
    --ds-li-icon:    1.6rem;   /* ★ 로고 크기 */
    --ds-li-top:    -0.2rem;   /* ★ 위아래 미세조정 */
	--ds-li-right:  -0.8rem;
    --ds-tit-gap:    2rem;   /* ★ 이름 ↔ 아이콘 간격 */
  }

  /* PRINCIPAL INVESTIGATOR 라벨 */
  .info-data1 .tit > span:first-child {
    font-size: 1.6rem !important;
	margin-bottom: 2.0rem !important;
  }

  /* 라벨 */
  .info-data1 .info dl dt {
    font-size: var(--ds-p-label) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;   /* 줄바꿈 방지 */
    flex: 0 0 auto !important;
  }

  /* 값 */
  .info-data1 .info dl dd {
    font-size: var(--ds-p-value) !important;
    line-height: 1.4 !important;
  }

  /* Position — 1줄 (연도 + 직함) */
  .info-data1 .info .position-item .pos-line1,
  .info-data1 .info .position-item .title {
    font-size: var(--ds-p-posline) !important;
    line-height: 1.4 !important;
  }

  /* Position — 2줄 (소속) */
  .info-data1 .info .position-item .role {
    font-size: var(--ds-p-role) !important;
    line-height: 1.4 !important;
  }
	

}


/* =========================================================
   교수 프로필 — 사진 세로 위치
   ★ 숫자만 조절 (1rem = 10px, 클수록 아래로)
   ※ 현재 적용값은 약 1.4rem (템플릿 기본)
   ========================================================= */
:root {
  --ds-photo-down:    12.5rem;   /* ★ PC   사진 내리는 거리 */
  --ds-photo-down-m:  1rem;   /* ★ 모바일 사진 내리는 거리 */
}

@media only screen and (min-width: 1025px) {
  .info-data1 .body-row .side {
    margin-top: var(--ds-photo-down) !important;
  }
}

@media only screen and (max-width: 1024px) {
  .info-data1 .body-row .side {
    margin-top: var(--ds-photo-down-m) !important;
  }
}



/* =========================================================
   교수 프로필 — Position 앞 불릿
   version : v1  (2026-09-02)
   사용법  : 교수 프로필 CSS 맨 아래에 "추가"
             (기존 .position-item 규칙보다 뒤에 있어야 함)
   ========================================================= */

/* ---------- 공통 구조 ---------- */
.info-data1 .info .position-item{
	position: relative;
	padding-left: var(--ds-bullet-indent);   /* 2줄째도 기호에 맞춰 들여쓰기 */
}

.info-data1 .info .position-item::before{
	content: var(--ds-bullet);
	position: absolute;
	left: 0;
	top: var(--ds-bullet-top);
	color: var(--ds-bullet-color);
	font-size: var(--ds-bullet-size);
	line-height: inherit;
}

/* ---------- PC ---------- */
@media only screen and (min-width: 1025px){
	.info-data1{
		/* ★ 여기 숫자·기호만 바꾸면 됩니다 */
		--ds-bullet:        " ·";          /* "-"  "▪"  "·"  도 가능 */
		--ds-bullet-indent: 1.2rem;       /* 들여쓰기 폭 */
		--ds-bullet-size:   1.5rem;       /* 기호 크기 (값 글씨와 동일) */
		--ds-bullet-color:  currentColor; /* 색. 포인트색 원하면 #e6007e 등 */
		--ds-bullet-top:    0;            /* 위아래 미세조정 (-0.1rem 등) */
	}
}

/* ---------- 모바일 ---------- */
@media only screen and (max-width: 1024px){
	.info-data1{
		--ds-bullet:        " ·";
		--ds-bullet-indent: 1.0rem;
		--ds-bullet-size:   1.1rem;
		--ds-bullet-color:  currentColor;
		--ds-bullet-top:    0;
	}
}