* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;
  color:#0f172a;
  background:#f5f7fb;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(1200px, calc(100% - 48px)); margin:0 auto; }

.site-header{
  position: sticky; top:0; z-index:50;
  background: linear-gradient(180deg,#0b2c54 0%, #0a2445 100%);
  color:#fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.18);
}
.header-inner{
  display:flex; align-items:center; gap:18px;
  padding:12px 0;
}

.brand{
  display:flex; align-items:center; gap:12px;
}

.brand-text{ display:grid; gap:2px; line-height:1.1; }
.brand-title{ font-weight:800; letter-spacing:-0.02em; font-size:50px; }
.brand-subtitle{ font-size:14px; opacity:.82; }

/* ===== Desktop nav with dropdown ===== */
.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
}
.nav-item{
  position:relative;
}
.nav-link{
  display:inline-flex; align-items:center;
  height:36px; padding:0 12px;
  border-radius:10px;
  font-weight:700; font-size:14px;
  color:rgba(255,255,255,.92);
}
.nav-link:hover{ background: rgba(255,255,255,.10); }
.nav-link.active{ background: rgba(255,255,255,.18); }
.nav-link .caret{ margin-left:6px; font-size:12px; opacity:.85; }

/* dropdown panel */
/* dropdown */
.dropdown{
  position:absolute;
  top: calc(100% + 6px);  /* ✅ 부모(nav-item) 바로 아래에 붙임 */
  left: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  background: #0b2c54;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(2,6,23,.35);
  display:none;
  z-index: 999;
}


.dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  font-size: 13px;
}
.dropdown a:hover{ background: rgba(255,255,255,.10); }
.dropdown a.active{ background: rgba(255,255,255,.16); }

/* show dropdown on hover (desktop) */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  display:block;
}

/* ===== Mobile nav ===== */
.nav-toggle{
  display:none;
  margin-left:auto;
  height:40px; width:44px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.mobile-nav{
  display:none;
  border-top:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.mobile-nav.open{ display:block; }
.mobile-nav .m-link{
  display:block;
  padding:12px 18px;
  color:rgba(255,255,255,.95);
  font-weight:800;
}
.mobile-nav .m-link:hover{ background: rgba(255,255,255,.10); }
.mobile-nav .m-link.active{ background: rgba(255,255,255,.16); }
.mobile-nav .m-sub{
  padding: 0 0 10px 0;
}
.mobile-nav .m-sub a{
  display:block;
  padding:10px 28px;
  color: rgba(255,255,255,.92);
  font-weight:700;
  font-size: 13px;
  opacity:.95;
}
.mobile-nav .m-sub a:hover{ background: rgba(255,255,255,.10); }

/* ===== Hero (background placeholder) ===== */
.hero{ padding:16px 0 22px; }
.hero-frame{
  border-radius:18px;
  overflow:hidden;
  border:0px solid rgba(15,23,42,.08);
  box-shadow:                   /* ✅ 공중에 떠있는 느낌 */
    0 5px 10px rgba(15,23,42,.22),
    0 5px 10px rgba(15,23,42,.12);
  background:#0b1220;
  position:relative;
  min-height:380px;

    display: flex;                /* ✅ 내부 정렬용 */
  align-items: flex-end;
}
.hero-frame::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    url("https://i.ibb.co/Pvz1J4K3/hero-1.png"),
    radial-gradient(900px 420px at 15% 35%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 360px at 75% 35%, rgba(255,255,255,.12), transparent 62%);

  background-size: cover, auto, auto;        /* 이미지+그라데이션 각각 */
  background-position: right top, 15% 35%, 75% 35%;
  background-repeat: no-repeat;
}

.hero-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.30) 55%, rgba(2,6,23,.10) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:14px 36px;
  color:#fff;
  max-width:1200px;
}
.hero-title{
  margin:0 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-0.02em;
  max-width:1200px;
}
.hero-subtitle{
  margin:0 0 14px;
  font-size:18px;
  opacity:.9;
}
.hero-desc{
  margin:0;
  font-size:14px;
  opacity:.82;
  max-width:720px;
}

/* ===== Page cards ===== */
.card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.06);
}
.page-wrap{ padding: 20px 0 38px; }
.page-hero{ padding:22px 22px; }
.page-title{ margin:0 0 6px; font-size:26px; letter-spacing:-0.02em; }
.page-lead{ margin:0; color:#475569; font-size:14px; }
.page-body{ margin-top:14px; padding:20px 22px; }
.page-body h2{ margin:0 0 10px; font-size:18px; }
.page-body p{ margin:0 0 12px; color:#334155; }
.page-body ul, .page-body ol{ margin:0; padding-left:18px; color:#334155; }

/* ===== Footer ===== */
.site-footer{
  background: linear-gradient(180deg,#0b2c54 0%, #0a2445 100%);
  color: rgba(255,255,255,.9);
  margin-top:24px;
}
.footer-inner{
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-small{ font-size:12px; opacity:.85; }

/* ===== Responsive ===== */
@media (max-width: 920px){
  .hero-title{ font-size:30px; }
}
@media (max-width: 760px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .hero-content{ padding:34px 18px; }
  .hero-frame{ min-height:320px; }
}

.nav-item{
  position: relative;
  padding-bottom: 10px; /* ← 링크 아래쪽에 hover 유지 구간(브릿지) */
}

.nav-item::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height: 10px;          /* 이 높이만큼 “틈”을 메워줌 */
}

.dropdown{
  position: absolute;
  top: 100%;            /* ← 부모 바로 아래에 붙임 (갭 제거) */
  left: 0;
  margin-top: 6px;      /* ← 살짝 띄우고 싶으면(선택) */
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  background: #0b2c54;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(2,6,23,.35);
  display: none;
  z-index: 999;         /* ← 다른 요소 위로 확실히 */
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  display: block;
}

.nav-item{
  position:relative;
  padding-bottom: 12px; /* ← 마우스가 내려갈 때 hover 끊김 방지 */
}


.empty{
  width: min(900px, 100%);
  padding:18px 22px;
  border-radius:14px;
  background:#e9edf3;
  margin:14px 0 24px;
  display:block;
}

/* ===== Layout: Sticky footer ===== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* 콘텐츠가 적어도 footer를 아래로 밀어냄 */
}

/* ===== Footer ===== */
.site-footer {
  background: linear-gradient(180deg, #0b2a4a, #071c33);
  color: #fff;
  padding: 18px 0;
  font-size: 14px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   NEWS (Archive)
========================= */

.news-list{
  display:flex;
  flex-direction:column;
  gap: 18px;
  padding: 12px 0 44px;
}

.news-card{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 18px 18px 16px;
}

.news-head{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-bottom: 8px;
}

.news-date{
  font-size: 13px;
  opacity: .7;
  font-weight: 600;
}

.news-title{
  font-size: 20px;
  margin: 0;
  font-weight: 800;
}

.news-body{
  margin-top: 6px;
}

.news-bullets{
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
}

.news-bullets li{
  margin: 4px 0;
}


.news-links{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.news-linkbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  text-decoration:none;
  font-weight: 700;
}

.news-empty{
  padding: 18px 20px;
  border-radius: 14px;
  background:#eef2f7;
  text-align:center;
  opacity:.75;
}


/* =========================
   News layout control
========================= */

/* 헤더와 콘텐츠 사이 여백 조절용 변수 */
:root{
  --news-top-gap: 5px;   /* ← 여기 숫자만 바꾸면 됨 */
}

/* 전체 페이지 배경 영역 */
.page-wrap-wide{
  padding: 0 24px;
}

/* 실제 뉴스 콘텐츠 컨테이너 */
.news-wrap{
  max-width: 1000px;          /* 뉴스 폭 조절 */
  margin: var(--news-top-gap) auto 72px;  /* 상 | 좌우(auto) | 하 */
}


@media (max-width: 640px){
  :root{
    --news-top-gap: 32px;
  }

  .page-wrap-wide{
    padding: 0 18px;
  }

  .news-wrap{
    margin-bottom: 48px;
  }
}


/* ===== Mobile submenu: 기본은 닫힘(강제) ===== */
#mobileNav .m-sub{
  display: none !important;
}

/* 클릭했을 때만 열리기 */
#mobileNav .m-sub.open{
  display: block !important;

  /* ✅ 색상 반전: 흰 배경 + 네이비 글씨 */
  background: #fff;
  color: #0b1b3a;
  border: 1px solid rgba(11,27,58,.18);
  border-radius: 12px;
  padding: 10px 10px;
  margin: 8px 0 12px;
}

/* 하위메뉴 링크도 네이비로 */
#mobileNav .m-sub.open a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #0b1b3a !important;
  text-decoration: none;
}

/* 호버/탭 느낌 */
#mobileNav .m-sub.open a:hover{
  background: rgba(11,27,58,.06);
}

/* (선택) People/Achievement 토글 링크도 구분감 */
#mobileNav .m-link[data-toggle="sub"]{
  font-weight: 800;
}

.site-header .brand .brand-title{
  font-size: 18px !important;
}
.site-header .brand .brand-subtitle{
  font-size: 14px !important;
}

/* ===== Home: Latest News (index) ===== */
.home-news { margin-top: 0px; padding-top: 0px; border-top: 0px solid rgba(0,0,0,0); }
.home-news-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.home-news-title { margin:0; font-size: 24px; font-weight: 800; }
.home-news-more { font-size: 14px; text-decoration:none; font-weight: 700; opacity: .85; }
.home-news-more:hover { opacity: 1; }

.home-news-list { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-news-item {
  cursor: pointer;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-news-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.10); }

.home-news-top { display:flex; flex-direction:column; gap: 6px; }
.home-news-date { font-size: 15px; opacity: .9; }
.home-news-item-title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.home-news-desc { margin-top: 8px; font-size: 15px; opacity: 1.0; line-height: 1.5; }
.home-news-thumb { width:100%; height: 130px; object-fit: contain; border-radius: 12px; margin-top: 10px; }
.home-news-empty { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.04); opacity: .8; }

@media (max-width: 720px){
  .home-news-list { grid-template-columns: 1fr; }
  .home-news-thumb { height: 160px; }
}

  .people-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    margin-top:16px;
  }
  .person-card{
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:14px;
    background:#fff;
  }
  .person-photo{
    width:100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius:12px;
    margin-bottom:10px;
  }
  .person-name{ font-weight:700; }
  .person-role{ opacity:.8; margin-top:4px; }
  .person-topic{ opacity:.8; margin-top:6px; font-size: .95rem; }
  .person-email{ display:inline-block; margin-top:5px; font-size:.95rem; }
  .people-empty{ opacity:.7; padding:12px 0; }

  /* =========================
    People: photo left / text right layout
  ========================= */

  .person-card{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 16px;
    background: #fff;
  }

  /* 오른쪽 텍스트 묶음 */
  .person-card > .person-name,
  .person-card > .person-role,
  .person-card > .person-topic,
  .person-card > .person-email{
    display: block;
  }

  /* 텍스트 영역 정리 */
  .person-name{
    font-size: 1.15rem;
    font-weight: 700;
  }

  .person-role{
    margin-top: 4px;
    font-weight: 500;
    opacity: 0.85;
  }

  .person-topic{
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.85;
  }

  .person-email{
    margin-top: 5px;
    font-size: 0.9rem;
    color: #000000;
    text-decoration: none;
  }

  /* 카드 간 간격 */
  .people-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (max-width: 640px){
    .person-card{
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .person-photo{
      width: 70%;
      height: auto;
      max-height: 260px;
    }
  }

  /* =========================
    Current members layout
  ========================= */

  /* ✅ 폭: 데스크탑 70%, 모바일 92% (150% 절대 금지) */
  .current-wrap{
    width: 70%;
    max-width: 1080px;
    margin: 0 auto;
  }
  @media (max-width: 900px){
    .current-wrap{ width: 92%; }
  }

  /* 카드 전체 */
  .person-card{
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    background: #fff;
  }

  /* 왼쪽 사진 */
  .person-photo{
    width: 210px;
    height: 270px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  /* 오른쪽 텍스트 영역 */
  .person-text{ flex: 1; min-width: 0; }

  /* 이름 */
  .person-name{
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  /* 학력 블록 */
  .person-edu{
    margin-top: 2px;
    margin-bottom: 12px;
    opacity: 0.85;
  }
  .edu-line{
    margin-top: 4px;
    line-height: 1.35;
    font-size: 0.98rem;
  }

  /* 공통: 라벨+값 한 줄 */
  .person-row,
  .person-research,
  .person-email{
    margin-top: 7px;
    line-height: 1.4;
    font-size: 1.02rem;
  }

  /* 라벨(Research:, Email: 등) → 굵게 */
  .person-row .label,
  .person-research .label,
  .person-email .label{
    font-weight: 800;
    opacity: 0.95;
    margin-right: 8px;
    white-space: nowrap;
  }

  /* 값 */
  .person-row .value,
  .person-research .value,
  .person-email .value{
    word-break: break-word;
    opacity: 0.92;
  }

  /* Research 줄은 약간 강조 */
  .person-research{
    margin-top: 14px;
  }

  /* Bio(자기소개) */
  .person-bio{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    line-height: 1.65;
    opacity: 0.88;
    white-space: pre-line;
    font-size: 1.02rem;
  }

  

  /* 빈 상태 */
  .people-empty{
    opacity: .7;
    padding: 12px 0;
  }

  /* 모바일: 사진 위 / 텍스트 아래 */
  @media (max-width: 640px){
    .person-card{
      flex-direction: column;
      align-items: center;
      text-align: left;
      padding: 18px;
    }
    .person-photo{
      width: 100%;
      height: auto;
      max-height: 320px;
    }
    .person-name{
      font-size: 1.5rem;
      margin-top: 6px;
      margin-bottom: 10px;
    }
  }

  /* =========================
   News image layout
========================= */

/* 이미지 갤러리 전체 */
.news-gallery{
  display: flex;
  justify-content: center;   /* ⬅️ 가운데 정렬 */
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* 이미지 링크 */
.news-imglink{
  display: block;
  max-width: 300px;          /* ⬅️ 이미지 최대 크기 */
  width: 100%;
}

/* 실제 이미지 */
.news-img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  object-fit: cover;
}

@media (max-width: 640px){
  .news-imglink{
    max-width: 100%;
  }

  .news-gallery{
    gap: 14px;
    margin-top: 18px;
  }
}

/* =========================
   News: Mobile Carousel
========================= */

/* 기본(데스크탑)에서는 기존 갤러리 스타일 유지 */
.news-gallery {
  margin-top: 18px;
}

/* ✅ 모바일에서만 캐러셀 활성화 */
@media (max-width: 640px){
  .news-gallery{
    margin-top: 18px;
  }

  /* 스크롤 트랙(가로 스와이프) */
  .news-track{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 10px;
    justify-content: flex-start; /* 가운데 말고 스냅이 자연스럽게 */
  }

  .news-track::-webkit-scrollbar{ display: none; }
  .news-track{ scrollbar-width: none; }

  /* 각 슬라이드 */
  .news-slide{
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* 이미지(크게) */
  .news-slide img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }

  /* dots */
  .news-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .news-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.25);
    padding: 0;
    cursor: pointer;
  }

  .news-dot.is-active{
    background: rgba(0,0,0,.70);
  }
}

/* =========================
   Photo page container
========================= */
.photo-wrap {
  margin-top: 5px; /* header와 간격 */
}

.photo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* 모바일 좌우 여백 */
  box-sizing: border-box;
}

.photo-grid{
  gap: 32px;
}

.album-card{
  position: relative; /* ✅ date absolute 기준 */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.album-header{
  margin: 0 0 12px;
}

.album-date{
  /* ✅ pill 제거: 그냥 텍스트 */
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;

  /* 스타일 */
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,.55);
  margin: 0 0 0px; /* 제목과 간격 */
}


.album-title{
  margin: 0;              /* ✅ header가 margin 관리 */
  font-size: 24px;
  letter-spacing: -0.02em;
}


.carousel-slide{
  aspect-ratio: 16 / 9;      /* 틀 고정 */
}

.carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ✅ 꽉 채우기(일부 잘릴 수 있음) */
  object-position: center;
  border-radius: 14px;
  display: block;
}
/* ===== SCI compact card overrides ===== */

.thumb{
  width: 84px;
  height: 84px;
  border-radius: 0px;
}

.pub-title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
}

.pub-authors{
  margin: 0 0 6px;
  font-size: 14px;
  color: rgba(0,0,0,.72);
  line-height: 1.45;
}

.pub-line{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(0,0,0,.78);
}

.pub-journal{ font-style: italic; font-size: 14px }
.pub-year{ font-weight: 850; font-size: 14px}
.pub-vol{ font-style: italic; font-size: 14 px}

.pub-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 640px){
  .year-section{ width: min(92%, 100%); }
  .pub-card{ grid-template-columns: 1fr; }
  .thumb{ width: 100%; height: 170px; }
}


/* ===== FIX: year-section / year-title / empty box size ===== */
.year-section{
  width: min(900px, 70%) !important;   /* 섹션 전체 폭 줄이기 */
  margin: 26px auto !important;         /* 섹션 상하 여백 줄이기 */
}

.year-title{
  width: 100% !important;               /* 70% 강제 제거 */
  margin: 0 0 10px !important;          /* 큰 margin 제거 */
  text-align: left !important;
}

.year-section .empty{
  width: 100% !important;               /* 70% 강제 제거 */
  margin: 8px 0 0 !important;           /* auto 가운데 + 큰 margin 제거 */
  padding: 12px 14px !important;        /* 빈 박스 자체도 컴팩트 */
  border-radius: 12px !important;
}

/* ===== Home News Carousel ===== */
.home-news-carousel{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-top: 10px;
  background: rgba(0,0,0,.04); /* ✅ 여백 보일 때 자연스럽게 */
}

.home-news-track{
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}

.home-news-slide{
  min-width: 100%;
  flex-shrink: 0;

  /* ✅ 가운데 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-news-slide img{
  /* ❗ 핵심: 100% 금지 → 원본 유지(큰 것만 축소) */
  width: auto;
  height: auto;

  max-width: min(520px, 92%);  /* 카드 폭보다 작게만(확대 X) */
  max-height: 260px;           /* 세로 사진도 다 보이게 */
  object-fit: contain;         /* 잘림 방지 */
  object-position: center;

  display: block;
  background: transparent;     /* 회색/흰 배경 싫으면 transparent */
}

@media (max-width: 640px){
  .home-news-slide img{
    max-width: 96%;
    max-height: 240px;
  }
}


/* dots */
.home-news-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.home-news-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d0d0;
  border: none;
}

.home-news-dot.active{
  background: #6bbf45; /* 포인트 컬러 */
}

@media (max-width: 640px){
  .home-news-slide img{
    height: 160px;
  }
}

.home-news-carousel,
.home-news-slide{
  background: #fff !important;
}

/* ===== Hero: fluid typography (붙여넣기 전용) ===== */
/* 기존 .hero-title/.hero-subtitle/.hero-desc 폰트 지정(44px 등)을 clamp로 덮어씀 */
.hero-content{
  /* 화면이 줄면 패딩도 같이 줄어들게 */
  padding: clamp(14px, 2.6vw, 34px) clamp(16px, 3.2vw, 40px);
  max-width: min(1200px, 92vw);
}

.hero-title{
  font-size: clamp(26px, 4.2vw, 48px);  /* 최소 26px ~ 최대 54px */
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero-subtitle{
  font-size: clamp(16px, 1.8vw, 26px);  /* 최소 14px ~ 최대 20px */
  line-height: 1.35;
}

.hero-desc{
  font-size: clamp(12px, 1.4vw, 16px);  /* 최소 12px ~ 최대 16px */
  line-height: 1.55;
  max-width: min(720px, 92vw);
}

/* (선택) 아주 작은 화면에서 가독성 개선 */
@media (max-width: 520px){
  .hero-frame{ min-height: 300px; }
  .hero-content{ padding: 18px 16px; }
}

/* ===== FINAL OVERRIDE: index latest news images NEVER crop (desktop 포함) ===== */
.home-news-carousel { overflow: hidden !important; } /* 캐러셀 기능 유지 */

.home-news-slide{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:100% !important;
  flex-shrink:0 !important;
}

.home-news-slide img{
  width: auto !important;          /* ✅ 폭 강제 확대 금지 */
  height: auto !important;         /* ✅ 높이 강제 고정 금지 */
  max-width: 92% !important;       /* ✅ 카드 안에서만 축소 */
  max-height: 300px !important;    /* ✅ 데스크탑에서 세로 사진 넉넉히 */
  object-fit: contain !important;  /* ✅ 절대 안 잘림 */
  object-position: center center !important;
  display:block !important;
  background: transparent !important;
}

/* 모바일만 살짝 낮춤 */
@media (max-width: 640px){
  .home-news-slide img{
    max-height: 240px !important;
  }
}

.pub-authors .lab-author{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== Latest News carousel: fill like photo album ===== */

/* 캐러셀 영역을 고정 프레임으로 */
.home-news-carousel{
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* 1) 슬라이드 = 프레임(틀) */
.home-news-slide{
  aspect-ratio: 16 / 9;
  width: 100%;
  flex: 0 0 100%;
  overflow: hidden;         /* ✅ 프레임 밖 잘리는 부분 숨김 */
  border-radius: 12px;      /* 선택(카드 느낌 맞추기) */
}

/* 2) 이미지 = 프레임을 채우되, 기준은 항상 "정중앙" */
.home-news-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%; /* ✅ center를 더 명시적으로 */
}

/* 모바일은 더 덜 잘리게 비율 변경 (선택) */
@media (max-width: 640px){
  .home-news-slide{ aspect-ratio: 4 / 3; }
}

/* ===== FIX: Home Latest News carousel 이미지를 카드 가로폭 꽉 채우기 ===== */
.home-news-carousel{
  width: 100% !important;
}

.home-news-track{
  width: 100% !important;
}

.home-news-slide{
  width: 100% !important;
  flex: 0 0 100% !important;
  aspect-ratio: 16 / 9 !important;  /* 포토앨범처럼 프레임 */
  overflow: hidden !important;
  border-radius: 14px !important;
}

.home-news-slide img{
  width: 100% !important;
  height: 100% !important;

  /* ✅ "가로 안 꽉참" 원인 제거 */
  max-width: none !important;
  max-height: none !important;

  display: block !important;
  object-fit: cover !important;          /* 꽉 채우기(잘릴 수 있음) */
  object-position: 50% 50% !important;
}

/* ===== Home Latest News: 가로는 꽉, 세로는 유동(안잘림) ===== */
.home-news-slide{
  aspect-ratio: auto !important;   /* ✅ 프레임 고정 제거 */
  height: auto !important;
  overflow: visible !important;    /* 잘림 방지 */
}

.home-news-slide img{
  width: 50% !important;          /* ✅ 가로 꽉 */
  height: auto !important;         /* ✅ 세로는 이미지 비율대로 */
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;  /* ✅ 절대 안 잘림 */
  display: block !important;
  border-radius: 14px !important;
}

.news-desc{
  white-space: pre-wrap;   /* \n 줄바꿈 그대로 표시 */
}

@media (max-width: 640px){
  .people-grid .person-photo{
    width: 100% !important;
    max-width: 420px !important;
    max-height: 320px !important;
    object-fit: contain !important;  /* ✅ 안 잘림 */
    background: #fff;                /* 여백 배경 */
  }
}

/* ===============================
   Mobile: reduce side gutters HARD
   =============================== */
@media (max-width: 640px){



  /* 2) 섹션/블록이 자체적으로 좌우 padding을 갖는 경우 제거 */
  section,
  .section,
  .home-section,
  .content,
  .page-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3) 히어로/큰 카드가 width 제한/중앙정렬로 답답하게 보이는 경우 */
.hero,
.hero-card,
.home-hero,
.main-hero,
.top-hero{
  max-width: none !important;
  width: calc(100% - 20px) !important; /* ✅ 좌우 10px씩 여백 */
  margin-left: auto !important;
  margin-right: auto !important;
}


}

/* ===============================
   Mobile: page-hero side padding fix
   =============================== */
@media (max-width: 640px) {
  .card.page-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}