/* =====================================================
   style.css
   컴포넌트 스타일 정의
   색상·폰트는 theme.css 변수를 참조함
   ===================================================== */
 
/* ── 리셋 & 베이스 ───────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html {
  scroll-behavior: smooth;
}
 
/* body {
  background:             var(--color-bg-base);
  color:                  var(--color-text-primary);
  font-family:            var(--font-sans);
  font-size:              var(--text-base);
  line-height:            1.75;
  -webkit-font-smoothing: antialiased;
} */
 
/* ── 배경 블러 + 어두운 오버레이 ────────────────────
   body::before 로 배경 위에 효과를 덧씌움
   ─────────────────────────────────────────────────── */
body::before {
  content:    '';
  position:   fixed;           /* 스크롤해도 항상 화면 전체 덮음 */
  inset: 0 0 0 0;                      /* top/right/bottom/left 모두 0 */
  /* transform: translateY(-50px); */
  z-index:    -1;              /* 콘텐츠 뒤에 위치 */
 
  background-color:      #0a0a0a;              /* 사진 로딩 전 폴백 */
  background-image: url('/SPSOL/images/background/HET.jpg');
  background-size:       cover;
  background-position:   center center;
  background-attachment: fixed;
  background-repeat:     no-repeat;
 
  filter:     blur(3px) brightness(0.9);   /* 블러 강도 / 밝기 조절 */
  transform:  scale(1.4);                  /* 블러 시 가장자리 흰 테두리 방지 */
}
 
/* ── 어두운 오버레이 (블러 위에 추가) ───────────────
   투명도: 0.0(완전 투명) ~ 1.0(완전 검정)            */
body::after {
  content:    '';
  position:   fixed;
  inset:      0;
  z-index:    -1;
  background: rgba(0, 0, 0, 0.75);   /* ← 숫자 높일수록 더 어두움 */
}
 
/* 모바일 — scroll 로 변경 */
@media (max-width: 700px) {
  body {
    background-attachment: scroll;   /* ← 이게 핵심 수정 */
    background-position: center top;
  }
}
 
a {
  color: inherit;
  text-decoration: none;
}
 
img {
  display: block;
  max-width: 100%;
}
 
/* ── 스크롤바 ─────────────────────────────────────── */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb  { background: var(--color-border); }
 
/* ── 레이아웃 래퍼 ───────────────────────────────── */
/* .page {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--page-padding-x);
} */
 
.page {
  max-width:        var(--max-width);
  margin:           0 auto;
  padding:          0 var(--page-padding-x);
 
  /* 콘텐츠 영역 전체에 반투명 오버레이 */
  background:       rgba(0, 0, 0, 0.55);   /* ← 숫자 높일수록 더 어두움 */
  backdrop-filter:  blur(2px);              /* ← 콘텐츠 뒤 살짝 블러 */
}
/* =====================================================
   NAV
   ===================================================== */
.nav {
  position:        sticky;
  top:             0;
  z-index:         99;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0 var(--space-xl);
  height:          var(--nav-height);
  background:      rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-bottom:   1px solid var(--color-border);
}
 
.nav__brand {
  font-weight:    700;
  font-size:      var(--text-xl);
  /* font-size:      var(--text-base); */
  color:          var(--color-accent);
  letter-spacing: 0.02em;
}
 
.nav__links {
  display:    flex;
  gap:        0;
  list-style: none;
}
 
.nav__links a {
  display:        block;
  padding:        0 18px;
  font-family:    var(--font-heading);   /* Orbitron */ 
  height:         var(--nav-height);
  line-height:    var(--nav-height);
  font-size:      var(--text-base);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  border-left:    1px solid var(--color-border);
  transition:     color var(--transition-base);
}
 
.nav__links a:hover,
.nav__links a.active {
  color: var(--color-text-primary);
}
 
/* =====================================================
   HERO
   ===================================================== */
.hero {
  display:               grid;
  grid-template-columns: 1fr 220px;
  gap:                   var(--space-xl);
  align-items:           start;
  padding:               var(--space-2xl) var(--page-padding-x) var(--space-xl);
  border-bottom:         1px solid var(--color-border);
 
  /* 배경 이미지를 위한 설정 */
  position:   relative;
  /* page 래퍼 밖으로 꽉 차게 */
  margin-left:  calc(-1 * var(--page-padding-x));
  margin-right: calc(-1 * var(--page-padding-x));
  overflow:     hidden;
}
 
/* 배경 사진 — 블러 처리 */
.hero::before {
  content:    '';
  position:   absolute;                        /* absolute (원래크기), fixed (화면전체크기) */
  inset: 0;                      /* top/right/bottom/left 모두 0 */
  background: url('/SPSOL/images/research/MET.png') left center / cover no-repeat;
  filter:     blur(1px) brightness(1); /* 블러 강도: 숫자 높일수록 더 흐림 */
  transform:  scale(1.05);              /* 블러 시 가장자리 흰 테두리 방지 */
  z-index:    0;
}
 
/* 어두운 오버레이 */
.hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.5);     /* 0.0(투명) ~ 1.0(완전검정) */
  z-index:    1;
}
 
/* 콘텐츠가 배경 위에 오도록 */
.hero__left,
.hero__right {
  position: relative;
  z-index:  2;
}
 
.hero__eyebrow {
  font-size:      var(--text-base);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-md);
}
 
.hero__name {
  font-family:   var(--font-serif);
  font-size:     var(--text-3xl);
  font-weight:   700;
  color:         var(--color-text-primary);
  line-height:   1.05;
  margin-bottom: 6px;
}
 
.hero__position {
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  margin-bottom: 4px;
  font-weight:   400;
}
 
.hero__affil {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
 
.hero__bio {
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  line-height:   1.85;
  max-width:     520px;
  margin-bottom: var(--space-lg);
}
 
/* 히어로 버튼 & 아이콘 행 */
.hero__links {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-xs);
  align-items: center;
}
 
/* 히어로 오른쪽 (사진 + 연락처) */
.hero__right {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-md);
  padding-top:    8px;
}
 
/* 모바일 전용 사진 — PC에서는 숨김 */
.hero__mobile-photo {
  display: none;
}
 
/* 프로필 사진 */
.profile-wrap {
  position: relative;
  width:    180px;
}
 
.profile-photo {
  width:           160px;
  height:          200px;
  background:      var(--color-bg-card);
  border:          1px solid var(--color-border);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  color:           var(--color-text-faint);
  font-size:       var(--text-xs);
  letter-spacing:  0.08em;
  overflow:        hidden;
}
 
.profile-photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
 
/* 사진 뒤 장식 테두리 */
.profile-deco {
  position:   absolute;
  bottom:     -8px;
  right:      -8px;
  width:      100%;
  height:     100%;
  border:     1px solid var(--color-border);
  z-index:    -1;
}
 
/* 연락처 칩 (사진 아래) */
.hero-contacts {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
 
.contact-chip {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
}
 
.contact-chip svg {
  width:     13px;
  height:    13px;
  fill:      var(--color-accent-dim);
  flex-shrink: 0;
}
 
/* =====================================================
   BUTTONS & ICON LINKS
   ===================================================== */
 
/* 텍스트 버튼 (아웃라인) */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 18px;
  border:         1px solid var(--color-border-lighter);
  color:          var(--color-text-muted);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.05em;
  transition:     border-color var(--transition-base),
                  color        var(--transition-base);
  cursor:         pointer;
}
 
.btn:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}
 
/* 강조 버튼 (채워진) */
.btn--primary {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        #0a0a0a;
  font-weight:  600;
}
 
.btn--primary:hover {
  background:   var(--color-text-primary);
  border-color: var(--color-text-primary);
  color:        #0a0a0a;
}
 
/* 아이콘 전용 버튼 */
.icon-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border:          1px solid var(--color-border-lighter);
  color:           var(--color-text-muted);
  transition:      color         var(--transition-base),
                   border-color  var(--transition-base);
}
 
.icon-btn svg {
  width:  15px;
  height: 15px;
  fill:   currentColor;
}
 
.icon-btn:hover {
  color:        var(--color-accent);
  border-color: var(--color-accent);
}
 
/* =====================================================
   SECTION 공통
   ===================================================== */
.section {
  padding:       var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border);
}
 
/* 섹션 제목 (오른쪽 구분선 포함) */
.section__title {
  font-family:   var(--font-serif);
  font-size:     var(--text-xl);
  font-weight:   700;
  color:         var(--color-text-primary);
  margin-bottom: var(--space-lg);
  display:       flex;
  align-items:   center;
  gap:           14px;
}
 
.section__title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}
 
/* =====================================================
   NEWS
   ===================================================== */
 
/* 배경 사진 — 블러 처리 */
.news-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}
 
.news-item {
  display:               grid;
  grid-template-columns: 110px 1fr;
  gap:                   var(--space-md);
  padding:               var(--space-sm) 0;
  border-bottom:         1px solid var(--color-border);
}
 
.news-item:last-child {
  border-bottom: none;
}
 
.news-item__date {
  font-size:      var(--text-xs);
  color:          var(--color-accent-dim);
  font-weight:    500;
  letter-spacing: 0.04em;
  padding-top:    2px;
  flex-shrink:    0;
}
 
.news-item__text {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: 1.75;
}
 
.news-item__text a {
  color: var(--color-accent);
}
 
.news-item__text a:hover {
  text-decoration: underline;
}
 
/* 뉴스 배지 */
.badge {
  display:        inline-block;
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        2px 8px;
  background:     var(--color-bg-card);
  color:          var(--color-text-muted);
  margin-right:   6px;
  vertical-align: middle;
}
 
.badge--accent {
  background: var(--color-accent-subtle);
  color:      var(--color-accent);
}
 
/* =====================================================
   RESEARCH GRID
   ===================================================== */
.research-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--color-border);
}
 
.research-card {
  background:  var(--color-bg-card);
  padding:     28px 26px;
  transition:  background var(--transition-base);
}
 
.research-card:hover {
  background: var(--color-bg-card-hover);
}
 
/* ── 카드 사진 영역 ──────────────────────────────── */
.research-card__img {
  width:       100%;
  height:      100px;          /* ← 사진 높이 조절 */
  object-fit:  fill;          
  object-position: center;
  display:     block;
  filter:      brightness(0.85);             /* 살짝 어둡게 */
  transition:  filter var(--transition-base);
}
 
.research-card:hover .research-card__img {
  filter: brightness(1.0);     /* 호버 시 원래 밝기로 */
}
 
/* ── 카드 텍스트 영역 ────────────────────────────── */
.research-card__body {
  padding: 22px 24px;
}
 
.research-card__tag {
  font-size:      var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-accent-dim);
  margin-bottom:  var(--space-xs);
}
 
.research-card__title {
  font-size:     var(--text-md);
  font-weight:   600;
  color:         var(--color-text-primary);
  margin-bottom: var(--space-xs);
}
 
.research-card__desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: 1.75;
}
 
/* =====================================================
   HIRING
   ===================================================== */
.hiring-box {
  border:   1px solid var(--color-border);
  padding:  var(--space-lg);
  position: relative;
}
 
.hiring-box::before {
  content:        'NOW HIRING';
  position:       absolute;
  top:            var(--space-sm);
  right:          var(--space-md);
  font-size:      10px;
  letter-spacing: 0.16em;
  color:          var(--color-accent-dim);
  opacity:        0.6;
}
 
.hiring-box p {
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  line-height:   1.85;
  margin-bottom: var(--space-sm);
}
 
.hiring-box strong {
  color: var(--color-text-primary);
}
 
.hiring-email {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-size:      var(--text-sm);
  color:          var(--color-accent);
  border-bottom:  1px solid var(--color-accent-dim);
  padding-bottom: 2px;
  transition:     color var(--transition-base);
}
 
.hiring-email svg {
  width: 14px;
  height: 14px;
  fill: var(--color-accent);
}
 
.hiring-email:hover {
  color: var(--color-text-primary);
}
 
/* =====================================================
   CONTACT
   ===================================================== */
.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.25fr;
  gap:                   48px;
  align-items:           start;
}
 
.contact-left {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}
 
.cinfo-label {
  font-size:      var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-accent-dim);
  margin-bottom:  6px;
}
 
.cinfo-value {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: 1.75;
}
 
.contact-right {
  background:     var(--color-bg-card);
  border:         1px solid var(--color-border);
  padding:        var(--space-lg);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}
 
.contact-right__name {
  font-family:   var(--font-serif);
  font-size:     var(--text-lg);
  color:         var(--color-text-primary);
  margin-bottom: 4px;
}
 
.contact-right__pos {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}
 
/* 이름+직책 | 링크버튼 가로 배치 */
.contact-right__top {
  display:               grid;
  grid-template-columns: 1fr 1fr;      /* 2열 고정 */
  grid-template-rows:    auto auto;    /* 2행 — 자동 높이 */
  gap:                   var(--space-lg);
  align-items:           start;
}
 
/* 셀 위치 명시적 지정 */
.contact-right__cell:nth-child(1) { grid-column: 1; grid-row: 1; } /* 이름    */
.contact-right__cell:nth-child(2) { grid-column: 2; grid-row: 1; } /* 버튼    */
.contact-right__cell:nth-child(3) { grid-column: 1; grid-row: 2; } /* Phone   */
.contact-right__cell:nth-child(4) { grid-column: 2; grid-row: 2; } /* Office  */
 
/* 각 셀 */
.contact-right__cell {
  display:        flex;
  flex-direction: column;
  gap:            0;
}
 
/* 링크 버튼 세로 배치 */
.social-col {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex-shrink:    0;
}
 
.social-row {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
 
.cinfo-block {
  display:        flex;
  flex-direction: column;
}
 
.cinfo-value a {
  color:      var(--color-accent);
  transition: color var(--transition-fast);
}
 
.cinfo-value a:hover {
  color: var(--color-text-primary);
}
 
/* 지도 */
.contact-map {
  border:   1px solid var(--color-border);
  overflow: hidden;
  margin-top: 4px;
  filter:   grayscale(30%) brightness(0.85);  /* 어두운 테마에 맞게 */
  transition: filter var(--transition-base);
}
 
.contact-map:hover {
  filter: grayscale(0%) brightness(1);
}
 
/* 오른쪽 카드 프로필 사진 */
.contact-right__photo {
  width:  100%;
  height: 180px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
 
.contact-right__photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
  display:    block;
  transition: transform var(--transition-slow);
}
 
.contact-right__photo:hover img {
  transform: scale(1.03);
}
 
/* 채용 안내 박스 */
.contact-right__hiring {
  border-top:  1px solid var(--color-border);
  padding-top: var(--space-sm);
}
 
.contact-right__hiring p {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 8px;
}
 
/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-xs) 0;
}
 
.footer__left {
  font-size: var(--text-sm);
  color:     var(--color-text-faint);
}
 
.footer__right {
  font-size: var(--text-xs);
  color:     var(--color-text-faint);
}
 
.footer__right img {
  display:    block;
  height:     16px;
  width:      auto;
  object-fit: contain;
  opacity:    0.9;
}
 
/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 700px) {
  .nav {
    padding: 0 var(--space-md);
  }
 
  .nav__links a {
    padding:   0 12px;
    font-size: 10px;
  }
 
  .page {
    padding: 0 var(--space-sm);
  }
 
  .hero {
    grid-template-columns: 1fr;
    gap:                   var(--space-md);
    padding:               var(--space-xl) var(--page-padding-x) var(--space-lg);
  }
 
  /* 모바일에서 hero 배경사진 크기 고정 */
  .hero::before {
    background-size:       cover;
    background-position:   right center;
    background-attachment: scroll;   /* 모바일에서 fixed 제거 */
    transform:             scale(1); /* scale 제거 — 모바일에서 불필요 */
  }
 
  /* PC의 오른쪽 사진 영역 숨김 */
  .hero__right {
    display: none;
  }
 
  /* 모바일 전용 사진 표시 */
  .hero__mobile-photo {
    display:      block;
    float:        right;          /* 이름 옆 오른쪽에 배치 */
    margin-left:  var(--space-sm);
    margin-bottom: var(--space-sm);
    clear:        right;
  }
 
  .hero__mobile-photo img {
    width:      88px;
    height:     112px;
    object-fit: cover;
    border:     1px solid var(--color-border);
    display:    block;
  }
 
  .hero__name {
    font-size: 32px;
  }
 
  .research-grid {
    grid-template-columns: 1fr;
  }
 
  .contact-grid {
    grid-template-columns: 1fr;
  }
 
  .footer {
    flex-direction: column;
    gap:            var(--space-xs);
    text-align:     center;
  }
}
 
/* =====================================================
   PAGE HEADER  (publications, people, projects, teaching 공통)
   ===================================================== */
.page-header {
  padding:       var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
 
.page-header__eyebrow {
  font-size:      var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-accent-dim);
  margin-bottom:  var(--space-sm);
}
 
.page-header__title {
  font-family:    var(--font-heading);   /* Orbitron */
  font-size:      var(--text-2xl);       /* Orbitron은 넓어서 한 단계 줄임 */
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--color-text-primary);
  margin-bottom:  var(--space-sm);
  line-height:    1.15;
}
 
.page-header__desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: 1.8;
  max-width:   600px;
}
 
.page-header__desc a {
  color: var(--color-accent);
}
 
/* =====================================================
   PEOPLE — PI 섹션 (사진 왼쪽, 설명 오른쪽)
   ===================================================== */
.people-pi {
  display:               grid;
  grid-template-columns: 133px 1fr;   /* 사진 고정 너비 | 설명 나머지 */
  gap:                   var(--space-xl);
  align-items:           start;
}
 
.pi-photo {
  flex-shrink: 0;
}
 
.pi-photo img {
  display:    block;
  border:     1px solid var(--color-border);
}
 
.pi-name {
  font-family:   var(--font-serif);
  font-size:     var(--text-xl);
  font-weight:   700;
  color:         var(--color-text-primary);
  margin-bottom: 6px;
  line-height:   1.2;
}
 
.pi-name-ko {
  font-family: var(--font-sans);
  font-size:   var(--text-lg);
  font-weight: 400;
  color:       var(--color-text-muted);
  margin-left: 8px;
}
 
.pi-title {
  font-size:      var(--text-sm);
  font-weight:    600;
  color:          var(--color-accent-dim);
  letter-spacing: 0.04em;
  margin-bottom:  4px;
}
 
.pi-affil {
  font-size:     var(--text-sm);
  color:         var(--color-text-faint);
  margin-bottom: var(--space-md);
}
 
.pi-bio {
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  line-height:   1.85;
  margin-bottom: var(--space-md);
}
 
.pi-links {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
}
 
/* 반응형 — 모바일에서 세로 배치 */
@media (max-width: 600px) {
  .people-pi {
    grid-template-columns: 1fr;
  }
 
  .pi-photo img {
    width:  110px !important;
    height: 140px !important;
  }
}
 
/* =====================================================
   Publication 공통
   ===================================================== */
.pub-item {
  border:   1px solid var(--color-border);
  padding:  var(--space-lg);
  position: relative;
}
 
.pub-item__body {
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  line-height:   1.85;
  margin-bottom: var(--space-sm);
}
 
.pub-item strong {
  color: var(--color-text-primary);
}
 
.pub-filter {
  display:        inline-block;
  font-size:      10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        2px 8px;
  background:     var(--color-bg-card);
  color:          var(--color-text-muted);
  margin-right:   6px;
  vertical-align: middle;
}
 
.pub-filter__btn {
  background: var(--color-accent-subtle);
  color:      var(--color-accent);
}
 
/* =====================================================
   Project 공통
   ===================================================== */
.project-list {
  border:   1px solid var(--color-border);
  padding:  var(--space-lg);
  position: relative;
}
 
.project-card__body {
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  line-height:   1.85;
  margin-bottom: var(--space-sm);
}
 
.project-card__body strong {
  color: var(--color-text-primary);
}
 
/* =====================================================
   CV PAGE
   ===================================================== */
 
/* 헤더 행 — 제목 + PDF 버튼 가로 배치 */
.cv-header-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-md);
}
 
/* ── Basics 테이블 ─────────────────────────────────── */
.cv-table-wrap {
  border: 1px solid var(--color-border);
}
 
.cv-table {
  width:           100%;
  border-collapse: collapse;
}
 
.cv-table tr {
  border-bottom: 1px solid var(--color-border);
}
 
.cv-table tr:last-child {
  border-bottom: none;
}
 
.cv-table__label {
  width:          130px;
  padding:        12px 20px;
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent-dim);
  background:     var(--color-bg-card);
  vertical-align: top;
  white-space:    nowrap;
}
 
.cv-table__value {
  padding:     12px 20px;
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: 1.75;
}
 
.cv-table__value a {
  color:      var(--color-accent);
  transition: color var(--transition-fast);
}
 
.cv-table__value a:hover {
  color: var(--color-text-primary);
}
 
/* ── CV 항목 리스트 ────────────────────────────────── */
.cv-list {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--color-border);
}
 
.cv-item {
  display:               grid;
  grid-template-columns: 160px 1fr;
  gap:                   var(--space-lg);
  padding:               var(--space-md) var(--space-lg);
  background:            var(--color-bg-card);
  transition:            background var(--transition-base);
}
 
.cv-item:hover {
  background: var(--color-bg-card-hover);
}
 
.cv-item__period {
  font-size:      var(--text-xs);
  color:          var(--color-accent-dim);
  font-weight:    500;
  letter-spacing: 0.04em;
  padding-top:    2px;
  white-space:    nowrap;
}
 
.cv-item__title {
  font-size:     var(--text-base);
  font-weight:   600;
  color:         var(--color-text-primary);
  margin-bottom: 4px;
  line-height:   1.4;
}
 
.cv-item__title a {
  color:      var(--color-text-primary);
  transition: color var(--transition-fast);
}
 
.cv-item__title a:hover {
  color: var(--color-accent);
}
 
.cv-item__org {
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  margin-bottom: 2px;
}
 
.cv-item__dept {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  margin-bottom: 2px;
}
 
.cv-item__location {
  font-size: var(--text-xs);
  color:     var(--color-text-faint);
}
 
.cv-item__note {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  margin-top:  6px;
  font-style:  italic;
  line-height: 1.6;
}
 
/* ── Research Interests ────────────────────────────── */
.cv-interests {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--color-border);
}
 
.cv-interest-group {
  background: var(--color-bg-card);
  padding:    var(--space-md);
}
 
.cv-interest-group__title {
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-accent-dim);
  margin-bottom:  var(--space-sm);
}
 
.cv-interest-group__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}
 
.cv-tag {
  display:        inline-block;
  font-size:      var(--text-xs);
  color:          var(--color-text-secondary);
  border:         1px solid var(--color-border-light);
  padding:        4px 10px;
  letter-spacing: 0.03em;
  transition:     border-color var(--transition-fast),
                  color        var(--transition-fast);
}
 
.cv-tag:hover {
  border-color: var(--color-accent-dim);
  color:        var(--color-text-primary);
}
 
/* ── 반응형 ────────────────────────────────────────── */
@media (max-width: 700px) {
  .cv-header-row {
    flex-direction: column;
    align-items:    flex-start;
  }
 
  .cv-item {
    grid-template-columns: 1fr;
    gap:                   6px;
  }
 
  .cv-item__period {
    color: var(--color-accent);
  }
 
  .cv-table__label {
    width: 90px;
  }
 
  .cv-interests {
    grid-template-columns: 1fr;
  }
}
 
/* =====================================================
   GALLERY PAGE
   ===================================================== */
 
/* ── 필터 탭 ─────────────────────────────────────────── */
.gallery-filter {
  display:    flex;
  gap:        1px;
  background: var(--color-border);
  margin:     var(--space-lg) 0;
}
 
.gallery-filter__btn {
  flex:           1;
  padding:        10px;
  background:     var(--color-bg-card);
  border:         none;
  color:          var(--color-text-muted);
  font-size:      var(--text-xs);
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor:         pointer;
  font-family:    var(--font-sans);
  transition:     background var(--transition-base),
                  color      var(--transition-base);
}
 
.gallery-filter__btn:hover {
  background: var(--color-bg-card-hover);
  color:      var(--color-text-primary);
}
 
.gallery-filter__btn.active {
  background: var(--color-accent-subtle);
  color:      var(--color-accent);
}
 
/* ── 갤러리 그리드 ───────────────────────────────────── */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);  /* 한 줄에 3장 */
  gap:                   4px;
  margin-bottom:         var(--space-xl);
}
 
/* ── 갤러리 아이템 ───────────────────────────────────── */
.gallery-item {
  position:    relative;
  overflow:    hidden;
  cursor:      pointer;
  aspect-ratio: 4 / 3;  /* 가로:세로 비율 고정 */
  background:  var(--color-bg-card);
}
 
.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-slow);
}
 
.gallery-item:hover img {
  transform: scale(1.05);   /* 호버 시 살짝 확대 */
}
 
/* 호버 오버레이 */
.gallery-item__overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  transform:  translateY(100%);        /* 기본: 숨김 */
  transition: transform var(--transition-base);
}
 
.gallery-item:hover .gallery-item__overlay {
  transform: translateY(0);            /* 호버 시 올라옴 */
}
 
.gallery-item__title {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--color-text-primary);
  margin-bottom: 4px;
}
 
.gallery-item__location {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
}
 
.gallery-item__location svg {
  width:  11px;
  height: 11px;
  fill:   var(--color-accent-dim);
  flex-shrink: 0;
}
 
/* 사진 없을 때 placeholder */
.gallery-item img[src=""],
.gallery-item img:not([src]) {
  display: none;
}
 
.gallery-item:has(img[src=""]),
.gallery-item:not(:has(img[src])) {
  background: var(--color-bg-elevated);
}
 
/* ── 라이트박스 ─────────────────────────────────────── */
.lightbox {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999;
  background:      rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  align-items:     center;
  justify-content: center;
}
 
.lightbox.active {
  display: flex;
}
 
.lightbox__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  max-width:      880px;
  width:          90%;
  gap:            var(--space-md);
}
 
.lightbox__img {
  max-width:  100%;
  max-height: 65vh;
  object-fit: contain;
  display:    block;
  border:     1px solid var(--color-border);
}
 
.lightbox__info {
  width:      100%;
  text-align: center;
}
 
.lightbox__title {
  font-size:     var(--text-md);
  font-weight:   600;
  color:         var(--color-text-primary);
  margin-bottom: 6px;
}
 
.lightbox__desc {
  font-size:     var(--text-sm);
  color:         var(--color-text-secondary);
  line-height:   1.7;
  margin-bottom: 8px;
}
 
.lightbox__location {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  font-size:       var(--text-xs);
  color:           var(--color-text-muted);
}
 
.lightbox__location svg {
  width:  12px;
  height: 12px;
  fill:   var(--color-accent-dim);
}
 
/* 닫기 버튼 */
.lightbox__close {
  position:    fixed;
  top:         20px;
  right:       24px;
  background:  none;
  border:      1px solid var(--color-border-light);
  color:       var(--color-text-muted);
  font-size:   18px;
  width:       40px;
  height:      40px;
  cursor:      pointer;
  font-family: var(--font-sans);
  transition:  color        var(--transition-fast),
               border-color var(--transition-fast);
  display:     flex;
  align-items: center;
  justify-content: center;
}
 
.lightbox__close:hover {
  color:        var(--color-text-primary);
  border-color: var(--color-text-primary);
}
 
/* 이전/다음 버튼 */
.lightbox__prev,
.lightbox__next {
  position:    fixed;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      1px solid var(--color-border-light);
  color:       var(--color-text-muted);
  font-size:   28px;
  width:       48px;
  height:      48px;
  cursor:      pointer;
  font-family: var(--font-sans);
  line-height: 1;
  transition:  color        var(--transition-fast),
               border-color var(--transition-fast);
  display:     flex;
  align-items: center;
  justify-content: center;
}
 
.lightbox__prev { left:  16px; }
.lightbox__next { right: 16px; }
 
.lightbox__prev:hover,
.lightbox__next:hover {
  color:        var(--color-accent);
  border-color: var(--color-accent);
}
 
/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
 
  .gallery-filter {
    flex-wrap: wrap;
  }
 
  .gallery-filter__btn {
    flex: none;
    width: calc(50% - 1px);
  }
 
  .lightbox__prev { left:  4px; }
  .lightbox__next { right: 4px; }
}
 
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}