* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; 
    min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0;}
html { height: 100%;}
main {  flex: 1; padding-top: 40px;  max-width: 1200px;  margin: 0 auto;  padding: 100px 20px;  width: 100%;}
main h1{ text-align:center; margin:20px 0 20px;}
header { position: fixed; top: 0; width: 100%; background: #fff; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
header .container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 10px 10px 10px; position: relative;}
header .logo img { margin: 0px 30px; height: 60px; width: auto; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav ul li a { text-decoration: none; color: #333; font-weight: 500; font-size: 1.3rem; }
nav ul li a.active { color: #007bff; font-weight: bold;}
.nav-toggle { display: none; background: #ffffff; border: 1px solid #ddd; padding: 8px 12px; border-radius: 6px; font-size: 1.2rem; cursor: pointer; }
.page-wrapper { flex: 1;}

.hero { text-align: left; }
.hero h1 { font-size: clamp(24px, 4vw, 3rem); margin-bottom: 20px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }
.btn-group .btn { display: inline-block; padding: 10px 20px; margin-right: 10px; border-radius: 4px; text-decoration: none; }
.btn.primary { background: #000; color: #fff; }
.btn.secondary { border: 1px solid #000; color: #000; }

/* Hero notice (blend naturally, no box) */
.hero .notice { margin: 16px 0 20px; padding: 0; }
.hero .notice h2 { font-size: 1.2rem; margin: 0 0 6px; font-weight: 700; letter-spacing: .2px; }
.hero .notice p { margin: 6px 0; font-size: 1.1rem; line-height: 1.7; }

/* Hero banner with subtle image backdrop */
.hero-head {
  position: relative;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25)),
              url('../images/processor3.PNG') center/cover no-repeat;
}
.hero-head h1 {
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.news-item { display: flex; gap: 20px; margin-bottom: 40px; align-items: flex-start;}
.news-item img { width: 270px; height: auto; object-fit: cover; }
.news-content h2 { margin-bottom: 10px; }
.news-content { flex: 1;}

.pi { display: flex; gap: 20px; margin-bottom: 60px; }
.pi img { width: 200px; height: auto; border-radius: 8px; }
.pi .bio { max-width: 800px; }

.members-grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(200px, 250px)); 
  gap: 30px; margin-bottom: 60px; justify-content:space-between;;}
.member-card { background: transparent; border-radius: 0; padding: 10px; text-align: center;
    transition: transform 0.3s; display: flex; flex-direction: column; align-items: center; width: 200px;}
.members-grid-4 > .member-card,
.members-grid-4 > .member-link-card { width: auto;}
.member-card img{ width: 180px; height: 220px; border-radius: 20px; object-fit: cover; object-position: 50% 20%;
 margin-bottom: 15px; transition: box-shadow .3s;}
.member-card h3 {  margin: 10px 0 8px 0;  text-align: center; font-size: 1.3em; font-weight: 600; color: #333;}
.member-card p { text-align: center; margin: 0; font-size: 0.95em; color: #666; line-height: 1.5;}
.member-link-card {  text-decoration: none;  color: inherit;  display: block;}
.member-link-card:hover .member-card { transform: translateY(-5px);}
.member-link-card:hover .member-card img { box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.member-card-alumni { display: block; cursor: default; text-decoration: none; color: inherit;}
.member-card-alumni .member-card:hover { transform: none;}
.member-card-alumni .member-card img:hover { box-shadow: none;}

.member-detail { display: flex; gap: 40px; margin-top: 50px; margin-bottom: 80px; align-items: flex-start;}
.member-detail img { width: 180px; height: 220px; border-radius: 20px; object-fit: cover; object-position: 50% 20%; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.member-detail .member-bio { flex: 1;}
.member-detail .member-bio p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px;}
.member-detail .member-bio ul { list-style: disc; margin-left: 20px; margin-bottom: 15px;}
.member-detail .member-bio ul li { font-size: 1rem; margin-bottom: 5px;}
.member-detail .email-contact { font-size: 1rem; margin-top: 20px;}
.member-detail .email-contact a { color: #007bff; text-decoration: none;}
.member-detail .email-contact a:hover { text-decoration: underline;}

.research-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; padding: 20px; background: #fff; border: 1px solid #ddd; border-radius: 8px;}
.research-item-link { text-decoration: none; color: inherit; display: block; margin-bottom: 40px;}
.research-item-link:hover .research-item { box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.research-text { flex: 1;}
.research-text h2 { margin-top: 0;  margin-bottom: 12px;  font-size: 1.5rem;}
/* 이미지 컨테이너 추가 */
.research-image { flex-shrink: 0; /* 크기가 줄어들지 않도록 */ width: 300px; /* 고정 너비 */ height: 270px; /* 고정 높이 */ overflow: hidden; /* 넘치는 부분 숨김 */ border-radius: 4px;}
.research-image img { width: 100%; /* 컨테이너 너비에 맞춤 */ height: 100%; /* 컨테이너 높이에 맞춤 */ object-fit: cover; /* 비율 유지하며 채우기 */ border-radius: 4px; }

.publication-list { list-style: none; padding: 0; margin:0;}
.pub-page .publication-year{ text-align: center; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2rem); margin: 42px 0 18px; padding: 0; border: 0; color: #0f172a;}
.publication-item { border: none; border-top: 1px solid #eee; padding: 16px 0; display: flex; flex-direction: column; gap: 6px;} 
.publication-item:first-child { border-top: none;}
.publication-item a { font-weight: bold; font-size: 1rem; color: #333; text-decoration: none;}
.publication-meta { font-size: 0.9rem; color: #555;}
.publication-authors { font-size: 0.85rem; color: #777;}

.pub-tag { display: inline-block; border: 1px solid #333; border-radius: 4px; padding: 2px 6px; font-size: 0.75rem; font-weight: 500; margin-right: 6px;}
.pub-tag.tier { border-color: #d12; background: #ffe7e7; color: #d12;}

.memories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0;}
.memory-card { display: block; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s;}
.memory-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.memory-card img { width: 100%; /* 100px이 아닌 100%로 변경 */ height: 250px; /* 고정 높이 설정 */ object-fit: cover; display: block;}
.memory-card h3 { margin: 12px; font-size: 1.1rem; text-align: center}
.memory-card .memory-caption { margin: 12px; font-size: 0.98rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; hyphens: auto; }

.footer-banner { background-color: #000000; color: white; padding: 30px 0; width: 100%; margin-top: auto; flex-shrink: 0; display: flex; justify-content: center; /* 푸터 내용 중앙 정렬 (선택 사항, 필요에 따라 조정) */ align-items: center; /* 푸터 내용 세로 중앙 정렬 (선택 사항, 필요에 따라 조정) */}
.footer-content { max-width: 1200px; width:100%; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: flex-start; padding: 0 20px; gap: 30px;}
.footer-left { flex: 6 0 0; text-align: left; max-width: 550px;}
.footer-center { flex: 4 0 0; text-align: left; padding-left: 20px; max-width: 500px;}
.footer-right { flex: 1 0 0; text-align: right; min-width: 150px;}
.footer-left h3,
.site-info strong { display: block; margin: 0 0 10px 0; font-size: 18px; font-weight: bold;}
.footer-left p { margin: 0; font-size: 14px; line-height: 1.6;}
.footer-center h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: normal;}
.footer-center p { margin: 0; font-size: 14px; line-height: 1.6;}
.footer-right h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: normal;}
.footer-right p { margin: 0; font-size: 14px; line-height: 1.6;}
.footer-banner a { color: #3498db; text-decoration: none;}
.footer-banner a:hover { text-decoration: underline;}
.social-icons { margin-top: 10px;}
.social-icons a { display: inline-block; width: 30px; height: 30px; margin-right: 10px; background-color: #333333;
  border-radius: 50%; text-align: center; line-height: 30px; color: white; font-size: 16px;}
.social-icons a:hover { background-color: #3498db;}

/* Responsive: Mobile first adjustments */
@media (max-width: 767px) {
  header .logo img { height: 40px; margin: 0 10px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  header nav { display: none; position: absolute; top: 100%; right: 0; left: 0; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
  header nav.is-open { display: block; }
  header nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
  header nav ul li a { display: block; padding: 12px 16px; font-size: 1rem; }

  main { padding: 80px 16px 40px; }
  .hero { text-align: left; }
  .hero p { font-size: 1rem; }
  .btn-group { display: flex; flex-direction: column; gap: 10px; }
  .btn-group .btn { margin-right: 0; text-align: center; }

  .hero-head { height: 160px; padding: 16px; margin-bottom: 12px; }
  .hero-head h1 { font-size: clamp(20px, 6vw, 28px); }

  /* News page readability */
  .news-item { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .news-item img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }
  .news-content h2 { font-size: 1.1rem; margin: 4px 0; }
  .news-content p { font-size: 1rem; line-height: 1.7; }

  /* Members page readability */
  .pi { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .pi img { width: 180px; height: auto; border-radius: 12px; }
  .pi .bio { max-width: none; }

  .members-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; justify-content: stretch; }
  .member-card { width: 100%; padding: 8px; }
  .member-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
  .member-card h3 { font-size: 1rem; }
  .member-card p { font-size: .9rem; line-height: 1.5; }
  /* member detail (subpages) */
  .member-detail { flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; margin-bottom: 40px; }
  .member-detail img { width: 160px; height: auto; border-radius: 16px; }
  .member-detail .member-bio { width: 100%; text-align: center; }
  .member-detail .member-bio p { font-size: 1rem; line-height: 1.7; }
  .member-detail .email-contact { font-size: .95rem; margin-top: 12px; }
  @media (max-width: 420px) {
    .members-grid-4 { grid-template-columns: 1fr; }
  }

  /* Research page readability */
  .research-item { flex-direction: column-reverse; gap: 12px; padding: 16px; }
  .research-image { width: 100%; height: 200px; border-radius: 8px; }
  .research-image img { border-radius: 8px; }
  .research-text h2 { font-size: 1.2rem; margin-bottom: 8px; }
  .research-text p { font-size: 1rem; line-height: 1.7; }

  .footer-content { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-right { text-align: left; }
  
  /* Memories page readability */
  .memories-grid { grid-template-columns: 1fr; gap: 16px; }
  .memory-card img { height: 200px; }
  .memory-card .memory-caption { font-size: 1.02rem; padding: 10px 14px; }
}

/* Memories: two columns on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .memories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  /* Desktop/tablet: ensure nav and layout behave as before */
  header nav { display: block; position: static; box-shadow: none; border: 0; }
}