/* Google Fonts Import: Montserrat (400, 500, 700 weights) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/* Basic Styles */
body, td, th, tr, p, a, li {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.5px;
}

a { color: #1772d0; text-decoration: none; }
a:focus, a:hover { color: #f09228; text-decoration: none; }
strong { font-weight: 500; }

/* Heading and Title Styles */
heading, name {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 400;
}

papertitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; /* 제목 폰트 살짝 키움 */
  font-weight: 700; /* 제목 더 굵게 */
  color: #333;
}

name { font-size: 32px; color: #333333; }

/* List Styles */
ul { padding-left: 3em; list-style-position: inside; margin-top: 0.5em; }

/* Layout and Effects */
hr {
  border: 0;
  height: 1px;
  background-color: #e0e0e0;
  margin: 10px 0;
}

/* Research Row Style (Hover Effect) */
.paper-row {
  transition: background-color 0.2s ease-in-out;
}
.paper-row:hover {
  background-color: #f0f5fc; /* 마우스 올렸을 때 배경색 변경 */
}

/* Footer Styles */
.footer-credit {
  text-align: right;
  font-size: 11px;
  color: #888888;
}
.footer-credit a { font-size: 11px; }

/* --- 모바일 반응형 설정 (맨 아래에 추가) --- */
@media screen and (max-width: 768px) {
  /* 표의 칸(Cell)을 블록으로 바꿔서 위아래로 쌓이게 함 */
  .paper-row td {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important; /* 위아래 간격 조정 */
    text-align: center; /* 모바일에서는 이미지 가운데 정렬 */
  }

  /* 이미지 크기 조정 */
  .paper-row img, 
  .paper-row video {
    width: 70% !important; /* 모바일에서 이미지 꽉 차게 (너무 크면 80% 정도로 조절) */
    max-width: 300px; /* 너무 커지지 않게 제한 */
    margin: 0 auto; /* 가운데 정렬 */
  }

  /* 텍스트 정렬 다시 왼쪽으로 (이미지 밑 설명) */
  .paper-row td:last-child {
    text-align: left;
  }
}


/* --- News & Videos 그리드 스타일 (새로 추가됨) --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 한 줄에 3개 */
  gap: 30px; /* 아이템 사이 간격 */
  padding: 0 20px 20px 20px; /* 좌우 여백 */
  max-width: 100%;
}

.news-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 가운데 정렬 */
}

/* 정사각형 이미지 컨테이너 */
.news-thumb {
  width: 100%;
  position: relative;
  aspect-ratio: 1 / 1; /* 강제로 1:1 비율(정사각형) 유지 */
  overflow: hidden;
  border-radius: 10px; /* 모서리 둥글게 */
  border: 1px solid #eee; /* 얇은 테두리 (선택사항) */
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* 살짝 그림자 */
  margin-bottom: 12px;
}

/* 이미지 스타일 */
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 유지하며 꽉 채우기 (찌그러짐 방지) */
  transition: transform 0.3s ease; /* 마우스 올렸을 때 효과용 */
}

.news-thumb:hover img {
  transform: scale(1.05); /* 마우스 올리면 살짝 확대 */
}

/* 설명 텍스트 */
.news-desc {
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 5px;
  word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 날짜 텍스트 */
.news-date {
  font-size: 12px;
  color: #888;
  text-align: center;
}


/* --- 모바일 반응형 설정 (기존 코드 대체 또는 아래 내용 추가) --- */
@media screen and (max-width: 768px) {
  /* 논문 리스트 모바일 설정 (기존 유지) */
  .paper-row td {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-align: center;
  }
  .paper-row img, 
  .paper-row video {
    width: 70% !important;
    max-width: 300px;
    margin: 0 auto;
  }
  .paper-row td:last-child {
    text-align: left;
  }

  /* [새로 추가] News 그리드 모바일 설정 */
  .news-grid {
    grid-template-columns: 1fr; /* 모바일에서는 한 줄에 1개씩 */
    gap: 40px;
  }
  
  .news-thumb {
    width: 80%; /* 모바일에서는 이미지를 조금 줄여서 중앙에 */
  }
}