/* ─────────────────────────────────────────────────────────────
   1) 기본 전체 스타일
──────────────────────────────────────────────────────────── */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #f9f9f9;
}

/* ─────────────────────────────────────────────────────────────
   2) 헤더 / 상단 내비게이션
──────────────────────────────────────────────────────────── */
header {
  background-color: #333;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

header nav ul li {
  margin: 0 1rem;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

header nav ul li a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   3) 메인 컨텐츠 (공통)
   - 흰 배경, 박스 테두리, 그림자 제거
   - 콘텐츠 폭을 더 넓게 사용
──────────────────────────────────────────────────────────── */
main {
  /* background-color: transparent; */  /* 기본 흰 배경 제거 */
  /* box-shadow: none; */               /* 그림자 제거 */
  /* border-radius: 0; */               /* 둥근 모서리 제거 */
  margin: 5rem auto 2rem;              /* 상단 헤더(≈60px) + 여유(4rem) */
  padding: 0 2rem;                     /* 좌우 여백 */
  max-width: 90%;                      /* 화면 폭의 90%까지 확장 */
  /* 배경색/그림자/테두리를 제거했으므로 별도 선언 없음 */
}

h1 {
  margin-top: 0;
  font-size: 2rem;
  color: #333;
}

/* ─────────────────────────────────────────────────────────────
   4) 포스트(News) 목록 스타일
──────────────────────────────────────────────────────────── */
.news-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  margin: 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}

.news-list .post-date {
  color: #999;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   5) 푸터
──────────────────────────────────────────────────────────── */
footer {
  background-color: #eee;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #666;
}

/* ─────────────────────────────────────────────────────────────
   6) Gallery 전용 스타일
   - 한 줄에 2개 사진 배치
   - 콘텐츠 폭 넓히고, 흰 배경 박스 제거
──────────────────────────────────────────────────────────── */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 한 줄에 사진 2개 */
  gap: 1rem;
  margin-top: 5rem;      /* 헤더 아래 여유 공간 */
  padding: 0 2rem;       /* 좌우 여백 */
  max-width: 90%;        /* 화면 폭의 90% 사용 */
  margin-left: auto;
  margin-right: auto;
  /* 배경색, 그림자, 테두리 없음(기본) */
}

.gallery-item {
  background-color: transparent; /* 흰 배경 제거 */
  border: none;                   /* 테두리 제거 */
  padding: 0.5rem 0;              /* 사진 위아래 약간 여백 */
  text-align: center;
}

.gallery-item img {
  width: 100%;     /* 사진이 칸 너비에 꽉 차도록 */
  max-width: 800px;/* 필요 시 개별 이미지 최대 너비 지정(옵션) */
  height: auto;
  border-radius: 4px;
  /* 테두리, 그림자 제거 */
  border: none;
}

.gallery-item figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}

/* ─────────────────────────────────────────────────────────────
   7) CV 전용 스타일 (두 열 레이아웃 + 사이드바 정상 표시)
   - 콘텐츠 배경 제거, 폭 넓히기
──────────────────────────────────────────────────────────── */
.cv-container {
  display: flex;
  flex-wrap: nowrap;
  margin: 5rem auto 2rem; /* 헤더 아래 여유 공간 및 중앙 정렬 */
  padding: 0 2rem;        /* 좌우 여백 */
  max-width: 90%;         /* 화면 폭의 90% 사용 */
  /* 배경색/그림자/테두리 없음(기본) */
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  margin-right: 2rem;
  position: sticky;
  top: 80px;               /* 헤더 높이(≈60px) + 여유(20px) */
  align-self: flex-start;  /* 상단에 붙도록 */
}

.sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;  /* 세로 정렬 */
}

.sidebar nav ul li {
  margin-bottom: 1rem;
}

.sidebar nav ul li a {
  text-decoration: none;
  color: #333 !important;    /* 흰색 배경에서 잘 보이도록 진한 회색 */
  font-weight: bold;
  font-size: 1rem;
}

.sidebar nav ul li a:hover {
  color: rgb(0, 65, 135) !important; /* 보라색 강조 */
}

.cv-content {
  flex: 1;
  /* 배경색/그림자/테두리 없음(기본) */
}

.cv-content h1 {
  margin-top: 0;
  font-size: 2.5rem;
  color: #333;
  border-bottom: 2px solid rgb(0, 65, 135);
  padding-bottom: 0.5rem;
}

.cv-content h2 {
  margin-top: 2rem;
  font-size: 1.75rem;
  color: rgb(0, 65, 135);
}

.cv-content ul,
.cv-content p,
.cv-content ol {
  line-height: 1.6;
}

.cv-content hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2rem 0;
}

/* ─────────────────────────────────────────────────────────────
   8) About 페이지 우측 사진 스타일
──────────────────────────────────────────────────────────── */
.about-photo {
  float: right;
  width: 200px;        /* 원하는 크기로 조정 가능 */
  height: auto;
  margin: 0 0 1rem 1rem; /* 우측 정렬 후 좌측에 여백 추가 */
  border-radius: 8px;  /* 둥근 모서리(옵션) */
}

/* ─────────────────────────────────────────────────────────────
   9) 반응형(옵션)
──────────────────────────────────────────────────────────── */
/* 900px 이하 화면 */
@media (max-width: 900px) {
  .gallery-container {
    grid-template-columns: 1fr; /* 한 줄에 사진 1개로 변경 */
  }
  .cv-container {
    flex-direction: column;
    margin-top: 5rem;
  }
  .sidebar {
    position: static;
    width: 100%;
    margin-right: 0;
    margin-bottom: 1.5rem;
    top: auto;
  }
  .about-photo {
    float: none;
    display: block;
    margin: 1rem auto 2rem; /* 중앙 정렬로 변경 */
    width: 50%;             /* 화면 폭의 50% 사용 */
  }
}

/* 600px 이하 화면 */
@media (max-width: 600px) {
  .about-photo {
    width: 80%; /* 화면 폭의 80% 사용 */
  }
}
/* ─────────────────────────────────────────────────────────────
   About 페이지 전용 레이아웃 (두 칸 정렬)
──────────────────────────────────────────────────────────── */
.about-container {
  display: flex;
  flex-wrap: nowrap;       /* 무조건 한 줄에 두 칸 */
  margin-top: 5rem;        /* 헤더(약 60px) + 여유(≈20px) */
  padding: 0 2rem;         /* 좌우 여백 */
  max-width: 90%;          /* 화면 폭의 90% 폭으로 조정 */
  margin-left: auto;
  margin-right: auto;
  /* 배경/테두리/그림자 없음 */
}

.about-text {
  flex: 1;                 /* 왼쪽 칸이 남은 가로폭을 모두 차지 */
  /* 필요 시 왼쪽 텍스트에 여백, 폰트 조정 등을 추가 가능 */
}

.about-image {
  flex-shrink: 0;          /* 오른쪽 칸은 축소되지 않음 */
  width: 250px;            /* 원하는 사진 영역 너비 (px 단위) */
  margin-left: 2rem;       /* 왼쪽 텍스트와 간격 */
  display: flex;
  justify-content: center; /* 사진을 가로 중앙에 배치 */
  align-items: flex-start; /* 사진 자체는 상단 정렬 */
}

.about-image img {
  width: 100%;             /* 부모 너비(250px)에 맞춰 늘려서 표시 */
  height: auto;
  border-radius: 8px;      /* 사진 모서리를 둥글게 (옵션) */
  /* 필요 시 테두리, 그림자 등을 제거/추가 가능 */
}

/* ─────────────────────────────────────────────────────────────
   반응형: 화면이 좁아질 때 처리
──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-container {
    flex-direction: column;   /* 세로로 쌓아 올림 */
    margin-top: 5rem;
  }
  .about-image {
    width: 50%;               /* 화면 폭의 50% */
    margin-left: 0;
    margin-bottom: 1.5rem;    /* 텍스트와 아래쪽 간격 */
    align-self: center;       /* 부모 컨테이너 안에서 중앙 정렬 */
  }
}

@media (max-width: 600px) {
  .about-image {
    width: 80%;               /* 화면 폭의 80% */
  }
}
/* ─────────────────────────────────────────────────────────────
   네비게이션 바의 소셜 아이콘 스타일
──────────────────────────────────────────────────────────── */
nav ul {
  list-style: none;
  display: flex;
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* 아이콘 전용 클래스(위에 <li class="social-icon"> 추가) */
nav ul li.social-icon {
  margin-left: 0.5rem;    /* 텍스트 링크와 간격 */
  margin-right: 0.5rem;   /* 양쪽 간격을 줄여서 아이콘들 모이게 */
}
nav ul li.social-icon a img {
  width: 24px;            /* 원하는 아이콘 가로 크기 */
  height: 24px;           /* 세로 크기를 동일하게 하면 정비례 */
  vertical-align: middle; /* 텍스트와 함께 있을 때 세로 중앙 정렬 */
}

/* 호버할 때 약간 불투명도를 떨어뜨려 시각적 피드백 주기(선택사항) */
nav ul li.social-icon a:hover img {
  opacity: 0.8;
}

/* Honors 2-컬럼 그리드 레이아웃 */
.honor-item.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

/* 왼쪽 정보 칸 */
.honor-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 오른쪽 메타 칸 */
.honor-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}

/* 제목 */
.honor-title {
  font-weight: bold;
}

/* 기관명 */
.honor-institution {
  font-style: italic;
  color: #333;
}

/* 날짜 */
.honor-date {
  font-weight: normal;
  color: #666;
  font-size: 0.9rem;
}

/* About 페이지: 텍스트와 이미지 2단 레이아웃 */
.about-container {
  display: flex;
  align-items: flex-start;   /* 텍스트와 이미지 상단 정렬 */
  gap: 2rem;                  /* 칸 사이 여백 */
  margin: 2rem 0;
}

.about-text {
  flex: 1;                    /* 텍스트 영역이 남는 공간을 차지 */
  line-height: 1.6;           /* 가독성 위한 행간 */
}

.about-text h1,
.about-text h2 {
  margin-top: 0;              /* 헤딩 위 여백 제거 */
}

.about-image {
  flex: 0 0 300px;            /* 너비 고정 (사진 가로 크기) */
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Education 섹션 */
.education-item {
  margin-bottom: 1.5rem;
}

.education-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.degree {
  font-weight: bold;
  font-size: 1rem;
}

.edu-date {
  font-weight: normal;
  color: #666;
  font-size: 0.9rem;
}

.edu-institution {
  margin-left: 0.5rem;
  font-style: italic;
  color: #333;
  margin-top: 0.25rem;
}

.thesis-title {
  margin-left: 0.5rem;
  color: #444;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
/* 세부사항 줄 */
.edu-details {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.25rem;
  /* Italic 또는 다른 스타일이 필요하면 아래 주석을 해제하세요 */
  /* font-style: italic; */
}
/* 2-컬럼 그리드 레이아웃 */
.employment-item.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  row-gap: 0.25rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* 왼쪽 컬럼: info */
.employment-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 오른쪽 컬럼: meta */
.employment-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
  white-space: nowrap;
}

/* 스타일 재정의 */
.job-title {
  font-weight: bold;
  font-size: 1rem;
  color: #222;
}

.job-institution {
  font-style: italic;
  color: #333;
}

.job-details { font-size: 0.9rem; color: #444; white-space: pre-line; /* 줄바꿈(\n) 인식 */ line-height: 1.5; /* 줄 간격 조금 넉넉하게 */ }

.job-date {
  font-weight: normal;
  font-size: 0.95rem;
  color: #999;
}

.job-location {
  font-weight: normal;
  font-size: 0.9rem;
  color: #999;
}
/* ─────────────────────────────────────────────────────────────
   Basics 섹션: 2열 그리드 레이아웃
──────────────────────────────────────────────────────────── */
.basics-grid {
  display: grid;
  grid-template-columns: 120px auto;
  row-gap: 0.5rem;
  column-gap: 1rem;
  margin-bottom: 2rem;
}

.basic-row {
  display: contents; /* grid-item 역할만 수행 */
}

.basic-label {
  font-weight: bold;
  color: #222;
  text-align: right;
  padding-right: 0.5rem;
}

.basic-value {
  color: #555;
  line-height: 1.4;
}

.basic-value a {
  color: #0066cc;
  text-decoration: none;
}

.basic-value a:hover {
  text-decoration: underline;
}
/* ─────────────────────────────────────────────────────────────
   Interests 섹션 스타일
──────────────────────────────────────────────────────────── */
.interests-list {
  margin: 1rem 0 2rem;
}

.interest-item {
  margin-bottom: 1rem;
}

.interest-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.interest-title {
  font-weight: bold;
  color: #222;
}

.interest-type {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.interest-type.research {
  background-color: rgba(0, 122, 204, 0.1);
  color: #007acc;
}

.interest-type.interest {
  background-color: rgba(85, 85, 85, 0.1);
  color: #555;
}

.interest-details {
  margin-top: 0.25rem;
  margin-left: 0.5rem;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.4;
}
.interest-details p {
  margin: 0;       /* 단락 위아래 여백 삭제 */
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   Publications 2-컬럼 레이아웃
──────────────────────────────────────────────────────────── */
.publication-item.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.publication-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.publication-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
  white-space: nowrap;
}

/* 제목 */
.publication-title a {
  font-weight: bold;
  font-size: 1.05rem;
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.publication-title a:hover {
  opacity: 0.7;
  transform: translateX(2px);
}

/* 저자와 저널 */
.publication-authors,
.publication-journal {
  font-size: 0.95rem;
  color: #444;
}

/* 날짜 */
.publication-date {
  font-size: 0.9rem;
  color: #999;
}

/* (선택) 장소 */
.publication-location {
  font-size: 0.85rem;
  color: #999;
}

/* ─────────────────────────────────────────────────────────────
   Presentations 2-컬럼 레이아웃 (아이콘 없이 링크 적용)
──────────────────────────────────────────────────────────── */
.presentation-item.grid {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  align-items: start;
  margin-bottom: 1.8rem;
}

.presentation-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.presentation-title {
  font-weight: bold;
  font-size: 1.05rem;
  line-height: 1.3;
  word-break: break-word;       /* 긴 제목 줄바꿈 */
}

.presentation-title a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}

.presentation-title a:hover {
  opacity: 0.7;
}

.presentation-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
  white-space: nowrap;
}

.presentation-date {
  font-size: 0.9rem;
  color: #999;
}

.presentation-location {
  font-size: 0.85rem;
  color: #999;
}

.presentation-author,
.presentation-conference {
  font-size: 0.95rem;
  color: #444;
  margin-top: 0.25rem;
}

/* 발표 태그 (Oral / Poster) */
.presentation-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.presentation-tag.oral {
  background-color: rgba(0, 122, 204, 0.1);
  color: #007acc;
}

.presentation-tag.poster {
  background-color: rgba(204, 85, 0, 0.1);
  color: #cc5500;
}

/* 기존 .presentation-meta 유지 */
.presentation-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  white-space: nowrap;
}

.presentation-date {
  font-size: 0.9rem;
  color: #999;
}

.presentation-location {
  font-size: 0.85rem;
  color: #999;
}