/* ===== Topbar (Menu Bar) ===== */
:root{
  --bg:#ffffff;
  --ink:#111827;
  --ink-dim:#9aa3ae;
  --brand:#111827;
  --container:1700px; --maxw:1700px; --cols:5;
  --gap:50px; --padX:30px;
  --radius-xl:36px; --radius-pill:250px;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-weight:400;
  line-height:1.45;
}

/* ===== Topbar ===== */ 
.topbar{ display:flex;align-items:center;justify-content:space-between; 
  padding:15px 55px 15px 70px; 
  width:100%; 
  margin-top:24px; /* 상단에서 아래로 내림 */ 
  margin-bottom:36px; /* 메뉴바와 본문 사이 간격 */ 
} 
.brand { flex-shrink:0; 
  text-decoration:none; 
  display:flex; 
  align-items:flex-start; 
} 

.brand img { height: 30px; /* 원하는 크기 */ 
  width: auto; 

} .nav { display:flex; 
  align-items:center; 
  gap:24px; 
} 

.nav a { text-decoration:none; 
  color:#87909c; /* 기본 회색 */ 
  font-weight:600; 
  transition: color .2s ease; 
} 

.nav a:hover { color:#111111; /* 마우스 오버 시 검은색 */ } 

.nav a.active { color:#111111; /* 현재 페이지도 분홍색 */ }

/* 색상 변수 바뀔 때 애니메이션 없이 즉시 반영 */
:root, .tab-btn, .tab-panel{ transition:none !important }

/* =============== Tabs (Index) =============== */
.tab-menu{
  display:flex; justify-content:center;
  gap:12px; padding:0 20px; margin:0;
  position:relative; z-index:2;
  font-family:var(--font);
}

.tab-btn{
  appearance:none; border:none;
  border-radius:14px 14px 0 0;
  padding:16px 28px; min-width:190px;
  font-size: 16px;
  font-weight:700; cursor:pointer;
  transform:translateY(8px);              /* 기본 아래 */
  background:var(--inactive-tab-bg);
  color:#111;
  position:relative;
  overflow:hidden;                         /* 라벨 마스킹 */
  font-family:inherit;
  transition:
    transform .15s ease,
    color .20s ease,
    padding .15s ease;                     /* background/opacity 트랜지션 제거 */
}

/* 글자 모션/불투명 전환 제거 */
.tab-label{
  display:inline-block;
  transform:none;
  opacity:1;
  transition:none;
}

/* hover: 색 고정, 위로만 이동 */
.tab-btn:not(.active):hover{
  transform:translateY(-8px);
  background:var(--inactive-tab-bg);
}
.tab-btn:not(.active):hover .tab-label{
  transform:none; opacity:1;
}

/* 활성 탭 */
.tab-btn.active{
  transform:translateY(-8px);
  background:var(--active-tab-bg);
  color:var(--active-tab-ink);
  box-shadow:none;
  z-index:3;
  padding-top:10px;        /* 라벨 시각적 위치 ↑ */
  padding-bottom:20px;
}
.tab-btn.active .tab-label{
  transform:none; opacity:1;
}

/* =============== Panels =============== */
.tab-panel{
  display:none;
  min-height:70vh;
  margin-top:-28px;
  padding:86px 40px 60px;
  position:relative; z-index:1;
  background:var(--panel-bg);
  font-family:var(--font);
}

/* 대비: 노랑=검정, 핑크·보라=흰색 (초록은 노랑과 동일 계열로 검정 글씨) */
#committee, #location { color:#111 }
#greeting, #concept  { color:#fff }

.tab-panel.active{ display:block }

/* 컨셉 패널 */
#concept .panel-center {
  max-width: 450px;        /* 🔹 글이 너무 퍼지지 않도록 너비 제한 (기존보다 좁게) */
  margin: 0 auto;
  text-align: center;      /* 가운데 정렬 유지 */
  margin-top: -40px;
  line-height: 1.8;        /* 줄 간격 조금 넉넉하게 */
}

#concept .panel-center h2 {
  font-size: 1.8em !important;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}


.conceptsub{
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 36px;     /* 아래 목록과 간격 넓게 */
  margin-top: -10px;
  letter-spacing: .5px;
  line-height: 1.2;
  font-family: 'Poppins','Pretendard',sans-serif;
}

/* 본문 문단 */
#concept .panel-center h5 {
  font-size: 18px;          /* 🔹 본문 크기 키움 */
  font-weight: 400;
  color: #fff;              /* 핑크 배경 대비용 */
  line-height: 2.1;         /* 읽기 편한 줄 간격 */
  word-break: keep-all;     /* 🔹 단어 단위로 끊기지 않게 */
  letter-spacing: 0.2px;    /* 살짝 간격 */
  margin-bottom: 20px;
  text-align: center;      /* 양쪽 정렬로 안정감 */
}

/* 내용 */
.panel-inner{
  display:flex; gap:40px; align-items:flex-start; justify-content:center;
}
.photo img{
  max-width:420px; border-radius:10px; display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.text ul{ list-style:none; padding:0; margin:0 }
.text li{ margin-bottom:6px }
.panel-center{ max-width:1000px; margin:0 auto; text-align:center }
.panel-center h2{ margin-bottom:20px }

/* 지도 */
.map-wrap{
  margin-top:20px; width:100%; max-width:860px;
  aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.map-wrap iframe{ width:100%; height:100%; border:none }

/* 접근성용 숨김 라디오 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 축사 영역 레이아웃 */
.greet-slides{
  margin:-50px auto 18px;
  max-width:1100px;
  text-align:center;
}

/* ✅ 폰트 크기 조절 추가 */
.greet-slide {
  font-size: 20px;      /* 본문 크기 */
  line-height: 1.7;     /* 줄 간격 */
}

/* 교수님 이름 + 직함 */
.greet-slide h3 {
  font-size: 28px;      /* 이름 기본 크기 */
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.4;
}

/* 이름은 한 줄 전체 차지 (자동 줄바꿈용) */
.greet-slide h3 strong {
  display: block;        /* 블록 처리 → 다음 줄로 자동 내려감 */
  font-weight: 700;
}

/* 직함(학과장, 지도교수 등) */
.greet-slide h3 .title-sub {
  display: block;        /* 자동으로 다음 줄 배치 */
  font-size: 20px;      /* 이름보다 살짝 작게 */
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.9;          /* 살짝 투명하게 보조 느낌 */
}

.greet-slide, .greet-slide p {
  word-break: keep-all;
}

/* ================================
   GREETING 슬라이드 애니메이션 개선
   ================================ */

/* 처음엔 숨김 상태 */
.greet-slide {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

/* 활성화될 때 등장 애니메이션 */
.greet-slide.is-active {
  display: block;
  animation: fadeUpGreeting 0.8s ease forwards;
}

/* 스르륵 위로 등장 */
@keyframes fadeUpGreeting {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 각 문단, 문장 순차 등판 */
.greet-slide > * {
  opacity: 0;
  transform: translateY(12px);
}
.greet-slide.is-active > *:nth-child(1) { animation: fadeUpGreeting .55s ease forwards .10s; } /* 이름 */
.greet-slide.is-active > *:nth-child(2) { animation: fadeUpGreeting .55s ease forwards .25s; } /* 첫 문장 */
.greet-slide.is-active > *:nth-child(3) { animation: fadeUpGreeting .55s ease forwards .40s; } /* 본문 */
.greet-slide.is-active > *:nth-child(4) { animation: fadeUpGreeting .55s ease forwards .55s; } /* 마지막 문단 */


/* 도트 컨트롤을 하단에 고정 */
.greet-controls {
  position: absolute;        /* 부모(.tab-panel#greeting) 기준으로 고정 */
  bottom: 40px;              /* 아래에서 40px 위쪽 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  z-index: 10;               /* 내용 위에 표시 */
}

/* 축사 패널 부모 요소는 상대 위치로 설정 (고정 기준이 되도록) */
#greeting.tab-panel {
  position: relative;
  min-height: 70vh;         /* 화면 높이만큼 확보 */
  overflow: hidden;
}


.greet-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

/* 도트 스타일: 기본 흰색 테두리 원, 선택 시 채워짐 */
.greet-dot{
  --size:15px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  border:2px solid #fff;   /* 흰색 테두리 */
  background:transparent;  /* 기본은 비어 있음 */
  cursor:pointer;
  transition:background .2s ease, transform .15s ease, opacity .15s ease;
  opacity:.9;
}
.greet-dot:hover{
  transform:scale(1.1);
  opacity:1;
}

/* 선택된 도트 */
#greet1:checked + .greet-dot,
#greet2:checked + .greet-dot,
#greet3:checked + .greet-dot,
#greet4:checked + .greet-dot{
  background:#fff; /* 내부 채움 */
}

/* ===== committee 전용 레이아웃/스타일 오버라이드 ===== */

/* 사진+텍스트 2열: 왼쪽(사진) 넓게 */
#committee .panel-inner {
  display: grid;
  grid-template-columns: minmax(600px, 1.5fr) 1fr;
  align-items: start;
  position: relative;
  top: -10px;
  justify-content: center;  /* 가운데 정렬 */
  gap: 150px;
  max-width: 1300px;        /* 중앙 기준선 제한 */
  margin: 0 auto;           /* 자동으로 양쪽 여백 균등 */
  padding-left: 60px;       /* 약간 오른쪽으로 여유 */
}

/* --- 글 영역 등장 애니메이션 --- */
/* --- 커뮤니티 텍스트 전체 스르륵 등장 --- */
#committee .text {
  opacity: 0;
  transform: translateY(20px);  /* 살짝 아래에서 시작 */
  animation: fadeUp 0.8s ease forwards 0.1s; /* 약간 딜레이 후 등장 */
}

/* 공통 키프레임 (이미 있다면 중복 정의 X) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 제목과 영문 부제: 서로는 가깝게, 목록과는 널찍하게 */
#committee h2{
  margin-bottom: 2px;
  line-height: 1.1;
}
#committee .sub-en{
  font-size: .9em;
  font-weight: 500;
  color: #666;
  margin: 0 0 36px;     /* 아래 목록과 간격 넓게 */
  letter-spacing: .5px;
  line-height: 1.2;
  font-family: 'Poppins','Pretendard',sans-serif;
}

/* 목록 행간 넓게 + 역할은 작고 연하게, 이름은 굵게 */
#committee .committee{
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2.6;     /* 행간 넉넉하게 */
}
#committee .committee li{ margin-bottom: 6px; }
#committee .committee .role{
  font-size: .9em;      /* 역할(직책) 작게 */
  font-weight: 500;
  color: #777;          /* 연하게 */
}
#committee .committee strong{
  font-weight: 700;     /* 이름 강조 */
  color: #2e2315;
  font-size: 1.2em;
}

/* 사진: 그림자 제거 + 컨테이너 안에 꽉 채우기 + hover 시 대체 이미지 전환 */
#committee .photo {
  position: relative;
  display: block;
  width: clamp(1000px, 80vw, 1500px); /* 💥 전체적으로 확대 */
  max-width: 105%;
  margin: 0;
  border-radius: 12px;
  box-shadow: none;
  background: none;
}

/* 이미지: 전체 표시 (잘림 없음) */
#committee .photo img {
  position: relative;
  display: block;
  width: 102%;
  height: auto;
  max-width: none;
  object-fit: contain; 
  box-shadow: none;    /* ✅ 잘림 없이 표시 */
}

/* hover용 이미지 */
#committee .photo .hover {
  position: absolute;
  inset: 0;
  width: 102%;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* hover 시 전환 */
#committee .photo:hover .main {
  opacity: 0;
  transform: scale(1.02);
}
#committee .photo:hover .hover {
  opacity: 1;
  transform: scale(1.02);
}

/* ===== EXHIDITION(전시장) 레이아웃 ===== */
#exhidition { color:#fff; } /* 초록 배경 위 흰 글자 유지 */

/* ===== 전시장 패널 높이 축소 ===== */
#exhidition.tab-panel {
  min-height: auto;       /* 🔹 기본 70vh 등의 고정 높이 해제 */
  padding-bottom: 20px;   /* 🔹 아래쪽 여백 줄이기 (기존보다 확실히 컴팩트) */
  padding-top: 40px;      /* 위쪽도 약간 줄여서 균형 맞추기 */
}



#exhidition .exh-wrap{
  display:grid;
  grid-template-columns: 1.5fr 1fr;  /* 왼쪽 지도 크게 */
  position: relative;
  top: -10px;
  gap:130px;
  align-items:start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 50px 36px 70px;
}

/* 왼쪽 지도 이미지 */
#exhidition .exh-map{
  margin:0;
  margin-top: 100px;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
#exhidition .exh-map img{
  display:block;
  width:100%;
  height:auto;
}

/* 오른쪽 정보영역 */
#exhidition .exh-info{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* 로고 대신 제목 스타일 */
#exhidition .exh-title {
  font-size: 34px;       /* 제목 크기 */
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px 0;
  text-align: left;
}


/* 얇은 구분선 */
#exhidition .exh-divider{
  border:0;
  border-top: 2px solid #fff;
  height:0;
  margin: 4px 0 1px 0;
}

/* 메타 텍스트 (날짜, 주소 등) */
#exhidition .exh-meta{
  display:flex; 
  flex-direction:column; 
  gap:14px;
  font-size: 18px;
  line-height: 1.8;
}
#exhidition .exh-row{
  display:flex; 
  justify-content:space-between; 
  gap:16px; 
  flex-wrap:wrap;
  font-size: 18px;
}
#exhidition .exh-row strong{ font-weight:700; }
#exhidition .exh-col-when{ white-space:nowrap; opacity:.9; }
#exhidition .exh-addr{ 
  font-style:normal; 
  font-size: 18px;
  line-height: 1.8;
  margin-top: 4px;
  font-weight: 700;     /* 🔹 글자 굵게 */
}

/* 🚇 지하철 안내 */
#exhidition .exh-subway {
  font-size: 18px;         /* 💡 살짝만 강조 */
  line-height: 1.9;
  color: #fff;
  opacity: 0.96;
  margin: 16px 0 30px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

#exhidition .exh-subway strong {
  font-weight: 700;
  color: #fff;
}

/* 장식선 */
#exhidition .exh-subway::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #fff;
  margin-bottom: 12px;
  opacity: 0.35;
}

/* 버튼 */
#exhidition .btn-route{
  align-self:flex-start;
  display:inline-flex; 
  align-items:center; 
  gap:10px;
  padding: 10px 20px;
  border: 2px solid #fff;
  border-radius: 8px;
  text-decoration:none;
  color:#fff; 
  font-weight:600;
  font-size: 16px;
  transition: transform .15s ease, background .25s ease;
  background: transparent;
}
#exhidition .btn-route:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.12);
}
#exhidition .btn-route .arrow{ font-size: 18px; }

/* 반응형 */
@media (max-width: 1024px){
  #exhidition .exh-wrap{
    grid-template-columns: 1fr;
    gap:28px;
    padding: 40px 24px 60px;
  }
  #exhidition .exh-logo{ margin: 0; }
  #exhidition .exh-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  #exhidition .exh-subway{ font-size: 18px; }
}

/* 공통 키프레임 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   COMMITTEE : 오른쪽 텍스트 블록만 부드럽게 등장
   ========================================================= */
#committee .text{
  opacity: 0; transform: translateY(20px);
}
#committee.tab-panel.active .text{
  animation: fadeUp .8s ease forwards .15s; /* 0.15s 지연 후 등장 */
}

/* =========================================================
   CONCEPT : 중앙 컨테이너 전체가 살짝 빠르게 등장 + 문단 순차 등판
   ========================================================= */
#concept .panel-center{
  opacity: 0; transform: translateY(16px);
}
#concept.tab-panel.active .panel-center{
  animation: fadeUp .7s ease-out forwards .1s;
}
/* 문단과 제목 순차 등장 (선택: 더 깔끔한 리듬) */
#concept .panel-center > *{
  opacity: 0; transform: translateY(12px);
}
#concept.tab-panel.active .panel-center > *:nth-child(1){ animation: fadeUp .55s ease forwards .10s; }
#concept.tab-panel.active .panel-center > *:nth-child(2){ animation: fadeUp .55s ease forwards .22s; }
#concept.tab-panel.active .panel-center > *:nth-child(3){ animation: fadeUp .55s ease forwards .34s; }
#concept.tab-panel.active .panel-center > *:nth-child(4){ animation: fadeUp .55s ease forwards .34s; }

/* =========================================================
   EXHIDITION : 오른쪽 정보영역은 블록으로 + 내부 요소는 스태거
   ========================================================= */
#exhidition .exh-info{
  opacity: 0; transform: translateY(18px);
}
#exhidition.tab-panel.active .exh-info{
  animation: fadeUp .8s ease forwards .15s;
}

/* 내부 요소(제목/구분선/메타/지하철/버튼) 순차 등장 */
#exhidition .exh-info > *{
  opacity: 0; transform: translateY(14px);
}
#exhidition.tab-panel.active .exh-info > *:nth-child(1){ animation: fadeUp .55s ease forwards .18s; } /* 전시장 위치(제목) */
#exhidition.tab-panel.active .exh-info > *:nth-child(2){ animation: fadeUp .55s ease forwards .28s; } /* 구분선 */
#exhidition.tab-panel.active .exh-info > *:nth-child(3){ animation: fadeUp .6s  ease forwards .38s; } /* exh-meta */
#exhidition.tab-panel.active .exh-info > *:nth-child(4){ animation: fadeUp .6s  ease forwards .52s; } /* 지하철 안내 */
#exhidition.tab-panel.active .exh-info > *:nth-child(5){ animation: fadeUp .6s  ease forwards .68s; } /* 버튼 */


/* ===== 구분선 ===== */
.section-divider{
  width:min(100%, var(--container));
  height:1px; background:#e5e7eb; margin:6px auto 16px; opacity:.9;
}

/* ===== Footer ===== */
.footer{ padding-block:12px 20px; margin-top:auto; font-family:var(--font) }
.footer-inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  width:100%; max-width:none; padding:0 40px;
}
.footer .addr{ margin-left:50px; color:var(--brand) }
.footer .sns{ margin-right:30px; transform:translateY(-25px) }
.sns img{ margin-left:7px; width:auto; height:23px; display:inline-block; margin-right:20px; object-fit:contain }
.addr p{ margin:2px 0 6px 0 }
.addr .copy{ margin-top:30px; color:var(--brand); font-size:13px }

/* 충돌 방지: 상단 네비 우선순위 */
.topbar .nav{ transform:translateX(-15px) }

.nav-toggle{ display:none; }