body {
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 200;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  overflow-y: auto; 
  scrollbar-gutter: stable;
}

header {
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
  position: relative; /* 햄버거 절대배치 기준 */
}

li::marker {
  color: #888;   /* 회색 점 */
}

.header-inner {
  max-width: 960px;     /* content, footer와 동일 폭 */
  margin: 0 auto;       /* 가운데 정렬 */
  padding: 0 1rem;
  display: flex;
  align-items: center;
  position: relative;   /* 햄버거 absolute 기준 */
  justify-content: space-between;
}

.nowrap {
  white-space: nowrap; /* 줄바꿈 금지: 항상 한 덩어리 */
}

.pure-menu {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;        /* 작은 화면에서는 100%로 꽉 차게 */
}

.pure-menu-heading {
  font-weight: 250;
  font-size: 1.2rem;
  margin-right: 1rem;
  text-transform: none !important;
}

.pure-menu-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pure-menu-link {
  color: #333;
  text-decoration: none;
}

.pure-menu-link:hover {
  background-color: #e2e2e2;
}

/* Hamburger button (desktop: 숨김) */
.hamburger {
  display: none;
  font-size: 1.8rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #333;
  background: none;
  border: 0;
}

/* iOS에서 label 클릭으로 토글되도록: 화면 밖으로만 치워두기 */
#menu-toggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Responsive styles (desktop) */
@media (min-width: 769px) {
  .pure-menu {
    padding: 0.5rem 0;       /* ← 좌우 0으로 */
  }
  /* Pure CSS가 주는 heading 좌우 padding 제거 */
  .pure-menu-heading {
    padding-left: 0;         /* ← 핵심 */
    padding-right: 0;
  }
  .pure-menu-horizontal .pure-menu-list {
    display: flex;        /* flex 보장 */
    flex-direction: row;
  }
  .pure-menu-item {
    width: auto;          /* 데스크톱에선 항목이 100% 폭을 차지하지 않게 */
  }
}

/* Responsive styles (mobile) */
@media (max-width: 768px) {
  /* 헤더: 항상 보이도록 상단 고정 + 충분한 높이 확보 */
  header {
    position: sticky;   /* 상단 고정 */
    top: 0;
    background: #f8f8f8;
    z-index: 1000;      /* 콘텐츠 위 */
    min-height: 56px;   /* 헤더 높이 보장 */
    overflow: visible;  /* 펼친 메뉴가 잘리지 않도록 */
  }

  /* 햄버거: 헤더 높이 기준 수직 중앙 정렬 */
  .hamburger { 
    position: absolute;
    left: 0.5rem; 
    top: 0; 
    bottom: 0;          /* 상하를 0으로 두고 */
    display: flex; 
    align-items: center;/* 내부 아이콘을 정확히 중앙 */
    transform: none;
    z-index: 1001;      /* 메뉴/콘텐츠보다 위 */
    font-size: 1.8rem; 
    padding: 0 0.75rem; /* 수직 패딩은 0으로 두는 게 중앙 정렬에 안전 */
    cursor: pointer; 
  }

  /* 네비 컨테이너: 햄버거 자리 확보 + 기준 컨테이너화 */
  .pure-menu {
    position: relative;                         /* ↓ 메뉴의 절대배치 기준 */
    z-index: 1;
    display: flex;
    align-items: center;                        /* 헤더 높이 내에서 수직 가운데 */
    padding: 0.25rem 1rem 0.25rem 3rem;         /* 햄버거 공간 확보 */
    max-width: 960px;                           /* 본문/푸터와 동일 폭 */
    margin: 0 auto;                             /* 중앙 정렬 */
    width: 100%;
    overflow: visible;                          /* 펼친 메뉴가 보이도록 */
  }

  /* 기본: 닫힘 상태 */
  .pure-menu .pure-menu-list { 
    display: none; 
    flex-direction: column; 
    width: 100%;

    /* 헤더 바로 아래에 정확히 붙도록 절대배치 */
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0;

    /* 가시성 향상 */
    background: #f8f8f8; 
    border-top: 1px solid #ddd;
    z-index: 1000;                             /* 콘텐츠 위 */
  }

  /* 체크되면 펼치기 — 일반 형제(~)로 견고하게 */
  #menu-toggle:checked ~ .pure-menu .pure-menu-list {
    display: flex;
  }

  /* 모바일 항목 스타일 */
  .pure-menu-item { width: 100%; }
  .pure-menu-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.06); /* 항목 구분선(선택) */
  }
}


.content {
  padding: 2rem 1rem;
  max-width: 960px;
  margin: 0 auto;
}

/* Sticky footer 레이아웃 */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main.content {
  flex: 1;
}

h1 {
  margin-bottom: 1.25rem;
  font-weight: 200;
}

h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem; 
  font-weight: 250;
}

h3 {
  font-size: 1.1rem; 
  font-weight: 250;
}
  
/* --- Footer styles --- */
.footer {
  background: #f8f8f8;
  border-top: 1px solid #ddd;
  padding: 1.5rem 1rem;
  font-size: 0.8rem;
  color: #555;
}

.footer-inner {
  max-width: 960px;       /* main.content와 동일한 폭 */
  margin: 0 auto;         /* 중앙 정렬 */
  display: flex;
  justify-content: space-between; /* 좌우 끝으로 배치 */
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;        /* 좁은 화면에서는 세로로 쌓임 */
}

.footer-left {
  flex: 1 1 540px;
}

.footer-right {
  flex: 1 1 180px;
  text-align: right;      /* 오른쪽 끝 정렬 */
}

.footer a {
  color: #555;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.highlight-footer {
  color: #000;
  font-weight: 300;
}

/* --- Fade slider (uniform, N-agnostic) --- */
.gallery {
  max-width: 800px;
  margin: 1.5rem auto;
}

/* 4:3 고정 비율 + 중앙 크롭 */
.slider-viewport {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f3f3;
  position: relative;
}

.slider-fade {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

/* 모든 슬라이드를 겹쳐두고, active만 보이게 */
.slider-fade li {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;   /* 부드러운 페이드 */
}

.slider-fade li.active {
  opacity: 1;
  pointer-events: auto;
}

/* 이미지: 중앙 기준으로 꽉 채우되 비율 유지(중앙 크롭) */
.slider-fade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .slider-fade li { transition: none; }
}

/* ===== Professor page layout ===== */
.prof-grid {
  display: grid;
  grid-template-columns: 420px 1fr; /* 좌측 고정폭 슬라이더 + 우측 내용 */
  align-items: start;
}

/* 우측만 여백 */
.prof-slider {
  margin: 0;           /* 좌측 슬라이드 여백 제거 */
}
.prof-bio {
  padding-left: 24px;  /* 우측만 여백 확보 */
}

@media (max-width: 768px) {
  .prof-grid {
    grid-template-columns: 1fr; /* 모바일에서는 세로 스택 */
  }
  .prof-bio {
    padding-left: 0;   /* 모바일에서는 여백 제거 */
    margin-top: 1rem;
  }
}

/* 이름/타이틀/소속 */
.prof-name { margin: 0 0 0.25rem; font-size: 1.6rem; font-weight: 200; }
.prof-title { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 250; color: #333; }
.prof-affil { margin: 0 0 1rem; }
.prof-period { color: #666; font-size: 0.95rem; }
.prof-contact a { color: #333; text-decoration: none; }
.prof-contact a:hover { text-decoration: underline; }

/* CV lists */
.prof-cv { margin-top: 2rem; }
.cv-list { margin: 0; padding-left: 1rem; }
.cv-list li { margin: 0 0 0.9rem; }

/* ===== Small fade slider (3:4 비율, transition 방식) ===== */
.prof-slider .slider-viewport {
  aspect-ratio: 3 / 4;        /* index의 4:3과 다른 비율 */
  width: 100%;                /* 좌측 컬럼 너비(420px)에 맞춤 */
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
  position: relative;
}

.prof-slider .slider-fade img {
  width: 100%; height: 100%;
  object-fit: cover;          /* 작은 슬라이더는 꽉 채우는 쪽이 보기 좋음 */
  object-position: center;
  display: block;
}

/* ===== People page ===== */
/* =========================
   동일 카드 크기 + 반응형 열 수
   모바일 1열(308px) → 태블릿 2열(2×308px) → 데스크톱 3열(3×308px)
   ========================= */
   

/* 아래 grid는 가운데 정렬 */
.people-section .people-grid {
  margin-left: auto;
  margin-right: auto;
}


.people-grid {
  display: grid;
  gap: 16px;
  justify-content: space-evenly;           /* 좌우 여백 균등 */
  grid-template-columns: 308px;            /* 기본 1열, 고정 폭(통일된 카드 크기) */
}

@media (min-width: 600px) {
  .people-grid {
    grid-template-columns: repeat(2, 308px);
  }
}
@media (min-width: 980px) {
  .people-grid {
    grid-template-columns: repeat(3, 308px); /* 최대 3열 */
  }
}

/* Professor 한 줄 (항상 1열 중앙) */
.people-grid--center {
  justify-content: center;
  grid-template-columns: 308px !important;  /* 다른 미디어쿼리보다 우선 */
}

/* 사람 카드: 사진(1행) / 이름(2행) / 학위·기간(3행) — 모든 섹션 동일 크기 유지 */
.person {
  width: 308px;                              /* 카드 크기 통일 */
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 0px;
  /* border: 1px solid #eee;
  border-radius: 8px; */
  background: #fff;
  text-align: center;
  text-decoration: none;     /* 링크 밑줄 제거 */
  color: inherit;            /* 글자색 상속 */
}

.person-photo {
  width: 308px;
  height: 308px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.person-photo img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  display: block;
  border-radius: 9px;   /* 이미지 픽셀 모서리 둥글게 */
}



/* 이름, 메타 */
.person-name {
  font-weight: 350;
}
.person-meta {
  color: #666;
  font-size: 0.9rem;
}


.pubs a {
  color: #555;
  text-decoration: none;
}

.pubs a:hover {
  text-decoration: underline;
}


.courses a {
  color: #555;
  text-decoration: none;
}

.courses a:hover {
  text-decoration: underline;
}

/* Courses: 3열 고정(각 308px), 데스크톱에서 폭 꽉 채우기 */
.courses .cv-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 0.5rem 16px;               /* 행/열 간격 */
  justify-content: center;        /* 총폭을 중앙 정렬 */
  grid-template-columns: repeat(3, 308px); /* 기본 3열 */
}

/* 화면이 좁아지면 2열 */
@media (max-width: 955px) {
  .courses .cv-list {
    grid-template-columns: repeat(2, 308px);
  }
}

/* 모바일은 1열 */
@media (max-width: 631px) {
  .courses .cv-list {
    grid-template-columns: 1fr;  /* 1열, 폭 100% */
    justify-content: stretch;    /* 좌우 꽉 채우도록 */
  }
}

/* 더미 확장 요소: 섹션 폭을 넓히되, 모바일에서 가로 스크롤 안 나게 */
.section-stretcher {
  display: block;
  height: 0;
  overflow: hidden;          /* 화면 표시 막기 */
  width: 100%;               /* 컨테이너 기준으로만 넓힘 */
  max-width: 100%;           /* 뷰포트 밖으로 못 나가게 */

  /* 핵심: ‘무조건 줄바꿈 허용’로 초장문자(점열) 때문에 min-content가 커지는 걸 차단 */
  white-space: normal;
  overflow-wrap: anywhere;   /* 최신 표준: 임의 지점에서도 줄바꿈 허용 */
  word-break: break-all;     /* 레거시 브라우저 보강 */
}

/* 추가 안전장치: 혹시 상위가 flex/grid라면, 자식이 줄어들 수 있게 */
.content, .people-section, .people-grid {
  min-width: 0;
}