/* =========================================================
   assets/css/style.css  (FULL FILE)
   ========================================================= */

/* =========================
   Global / Variables
   ========================= */
:root{
  --bg:#ffffff;
  --text:#333;
  --accent:#007acc;
  --navbar-bg:#f5f5f5;

  /* Hello 섹션/Research Highlights 공통 색 */
  --unified-blue:#3b6683;

  /* 컨테이너 폭 */
  --container-max:1600px;
  --container-side-pad:clamp(16px,2vw,40px);
  --container-width:min(var(--container-max),96vw);

  /* Nav 높이(고정 헤더용) */
  --nav-h:56px;

  /* 모달 */
  --modal-radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0;}

/* ✅ 글씨 크기 가변 */
html{
  font-size:clamp(15px,0.35vw + 14px,18px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html,body{height:100%;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;

  /* ✅ fixed header 공간 확보 */
  padding-top:var(--nav-h);
}

body.modal-open{ overflow:hidden; }

a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* =========================
   Top Navigation (FIXED)
   ========================= */
.top-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:var(--navbar-bg);
  transition:background-color .2s ease;
  border-bottom:1px solid transparent;
}

.top-nav.scrolled{
  background:#f0f0f0;
  border-bottom:1px solid #eaeaea;
}

.top-nav-inner{
  max-width:var(--container-width);
  margin:0 auto;
  height:var(--nav-h);
  padding:0 var(--container-side-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.site-title{
  font-weight:600;
  font-size:1rem;
  color:#000;
  text-decoration:none;
}
.site-title:hover{ text-decoration:none; opacity:.9; }

.nav-links{
  display:flex;
  align-items:center;
}

.nav-links a{
  margin-left:20px;
  font-size:.76rem;
  color:#000;
  letter-spacing:.03em;
}

/* Mobile-only elements */
.hamburger-btn{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:24px;
  height:18px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  margin-left:20px;
}
.hamburger-btn span{
  width:100%;
  height:2px;
  background-color:#333;
  border-radius:2px;
}

/* 기본은 숨김, 모바일에서 open 시 팝업으로 보임 */
.mobile-dropdown{ display:none; }

/* =========================
   Background Image
   ========================= */
.background{ width:100%; background:#fff; }

.background-inner{
  max-width:var(--container-width);
  margin:8px auto 0;
  padding:0 var(--container-side-pad);
}

.background-img{
  width:100%;
  display:block;
  max-height:260px;
  object-fit:cover;
}

/* =========================
   Layout
   ========================= */
.page-wrapper{
  max-width:var(--container-width);
  margin:0 auto;
  padding:35px var(--container-side-pad) 60px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2px;
}

.sidebar{ position:relative; }

.profile-card{
  position:sticky;
  top:calc(var(--nav-h) + 32px);
  background:transparent;
  padding:0;
  text-align:left;
}

.profile-photo{
  display:block;
  max-width:180px;
  width:100%;
  border-radius:4px;
  object-fit:cover;
  margin:0 0 15px 0;
}

.profile-name{
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:4px;
}

.profile-role{
  font-size:clamp(.78rem,.25vw + .70rem,.95rem);
  color:#666;
  margin-bottom:24px;
  line-height:1.4;
}

/* Mobile-only button */
.related-links-btn{
  display:none;
  width:100%;
  padding:10px;
  background-color:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:.9rem;
  font-weight:600;
  color:#333;
  cursor:pointer;
  text-align:center;
  margin-bottom:15px;
}

/* ✅ 프로필 아래 링크/텍스트도 유동 폰트 */
.profile-info{
  list-style:none;
  font-size:clamp(.78rem,.25vw + .70rem,.95rem);
  color:#555;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.profile-info li{
  display:flex;
  align-items:center;
  gap:12px;
}

.inline-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  flex-shrink:0;
}

.sidebar-link{
  color:#555;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:inherit;
}
.sidebar-link:hover{
  color:var(--accent);
  text-decoration:underline;
}

.content{ min-width:0; }

/* =========================
   Sections / Typography
   ========================= */
.section{ margin-bottom:40px; }
.section + .section{ margin-top:16px; }

.section-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:14px;
}

.section p{
  font-size:.9rem;
  line-height:1.7;
  margin-bottom:.7em;
}

/* Home "Hello!" section style */
#about .section-title{
  color:var(--unified-blue);
  margin-bottom:1.2em;
  font-size:1.25rem;
}
#about a{
  font-weight:750;
  color:var(--unified-blue);
}

/* ✅ Hello 문단: 왼쪽 정렬 */
#about p{
  line-height:1.5;
  margin-bottom:1.5em;
  text-align:left;
}

#research{ margin-top:60px; }
#research p{ text-align:justify; }

/* ✅ Home: Research Highlights 제목을 파란색으로 */
#research .section-title{
  color:var(--unified-blue);
  font-weight:650;
}

/* =========================
   Research Highlights (Home)
   ========================= */
.highlight-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.highlight-item{
  display:grid;
  grid-template-columns:500px 1fr;
  gap:20px;
  align-items:start;
}

.highlight-thumb{
  width:100%;
  border-radius:4px;
  object-fit:cover;
  display:block;
  border:1px solid #eee;
}

.highlight-title{
  font-weight:600;
  font-size:.75rem;
  margin-bottom:4px;
  color:#000;          /* ✅ 세미콜론 추가 (링크 파란색 상속 방지) */
  line-height:1.4;
}

.highlight-authors{
  font-size:.6rem;
  color:#444;
  margin-bottom:6px;
  line-height:1.4;
}

.highlight-bold-blue{
  font-weight:750;
  color:var(--unified-blue);
}

.highlight-links{
  margin-top:6px;
  font-size:.57rem;
}
.highlight-links a{
  margin-right:10px;
  font-weight:600;
  color:var(--unified-blue);
}

/* =========================
   CV-style tables (About / Publications)
   ========================= */
.cv-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.cv-table thead th{
  text-align:left;
  background:#f0f0f0;
  color:#333;
  font-weight:700;
  font-size:.9rem;
  padding:12px 14px;
  border-bottom:2px solid #cfcfcf;
}

.cv-table tbody td{
  padding:14px;
  border-bottom:1px solid #d9d9d9;
  vertical-align:top;
}

.cv-period{
  width:140px;
  color:#555;
  font-weight:500;
  white-space:nowrap;
}

.cv-role{
  font-weight:750;
  color:var(--unified-blue);
  margin-bottom:4px;
}

.cv-line{ color:#444; margin-top:2px; }
.cv-muted{ color:#666; margin-top:4px; }

.cv-bullets{
  margin-top:6px;
  margin-left:1.2rem;
  padding-left:0;
}
.cv-bullets li{ margin:3px 0; }

/* Research interests list base */
.interest-list{
  margin-left:1.2rem;
  padding-left:1.2rem;
}
.interest-list li{ margin:4px 0; }

/* =========================
   About page overrides
   ========================= */
.about-page .section-title{
  color:var(--unified-blue);
  font-weight:650;
}

.about-page .interest-list{
  padding-left:1.2rem;
  margin-left:1.2rem;
}
.about-page .interest-list ul{
  margin:2px 0 0 .9rem;
  padding-left:0;
  list-style:circle;
}
.about-page .interest-list ul ul{
  margin-left:.9rem;
  padding-left:0;
}

/* =========================
   Popup / Modal (공통)
   ========================= */
.ui-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.32);
  z-index:900;
  display:none;
  opacity:0;
  transition:opacity 160ms ease;
  touch-action:manipulation;
}
.ui-backdrop.show{ opacity:1; }

.ui-modal{
  position:fixed;
  left:50%;
  top:14vh;
  transform:translateX(-50%);
  width:min(520px,calc(100vw - 24px));
  background:#fff;
  border-radius:var(--modal-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:950;
  display:none;
  overflow:hidden;
}
.ui-modal.open{ display:block; }

.ui-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #eee;
}

.ui-modal-title{
  font-weight:700;
  font-size:.95rem;
  color:#111;
}

.ui-close-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:.85rem;
  cursor:pointer;
}
.ui-close-btn:hover{ background:#f7f7f7; }

.ui-modal-body{ padding:14px; }

/* 모달 안 리스트(Related Links) */
.modal-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
}

/* =========================
   Responsive (<= 900px)
   ========================= */
@media (max-width:900px){

  .page-wrapper{
    grid-template-columns:1fr;
    padding:12px var(--container-side-pad) 40px;
    gap:20px;
  }

  .background-inner{ margin:0 auto 0; }

  .background-img{
    height:110px;
    object-fit:cover;
  }

  /* Nav */
  .nav-links a.desktop-only{ display:none; }
  .hamburger-btn{ display:flex; }

  /* ✅ 햄버거 메뉴 */
  .mobile-dropdown{
    position:fixed;
    top:calc(var(--nav-h) + 8px);
    right:12px;
    left:12px;
    display:none;
    flex-direction:column;
    gap:14px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:var(--modal-radius);
    padding:12px 14px 14px;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
    z-index:950;
  }
  .mobile-dropdown.open{ display:flex; }
  .mobile-dropdown a{
    font-size:1rem;
    color:#111;
    font-weight:600;
    padding:6px 2px;
  }

  /* Profile card */
  .profile-card{
    position:relative;
    top:0;
    border-bottom:1px solid #eee;
    padding-bottom:18px;
    margin-top:0;
    margin-bottom:6px;
  }

  .profile-photo{ max-width:90px; }

  .profile-role{
    font-size:clamp(.95rem,1.2vw + .8rem,1.05rem);
  }

  .related-links-btn{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:auto;
    min-width:120px;
    margin:0;
    padding:6px 12px;
  }

  /* mobile에서는 profile-info 숨김(모달로) */
  .profile-info{ display:none; }

  /* Content */
  .section-title{ font-size:1.3rem; }

  .section p{
    font-size:1rem;
    text-align:left;
  }

  /* Research highlights */
  .highlight-item{
    grid-template-columns:1fr;
    gap:10px;
  }
  .highlight-title{ font-size:1rem; }
  .highlight-authors{ font-size:.85rem; }
  .highlight-links{ font-size:.85rem; }

  /* 모달 위치 */
  .ui-modal{
    top:12vh;
    width:min(560px,calc(100vw - 24px));
  }

  /* About 페이지 Period 폭 */
  .about-page .cv-period{
    width:96px;
    white-space:nowrap;
  }
}

/* =========================================================
   Research page (DESKTOP + MOBILE)
   ========================================================= */
.research-page .section-title{
  color:var(--unified-blue);
  font-weight:650;
}

.research-page #research-scope strong{ font-weight:700; }

/* =========================================================
   Shared Video Components (Research + More)
   ========================================================= */
.research-page figure.video-card,
.more-page figure.video-card{
  margin:0;
  min-width:0;
}

.research-page .video-frame,
.more-page .video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:8px;
  overflow:hidden;
}

.research-page .video-frame iframe,
.more-page .video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.research-page .video-caption,
.more-page .video-caption{
  margin-top:10px;
  font-size:.9rem;
  line-height:1.7;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.research-page .video-desc,
.more-page .video-desc{
  font-weight:650;
  font-size:1em;
  color:#111;
  margin-bottom:0;
}

.research-page .video-cite,
.more-page .video-cite{
  font-size:.67em;
  color:#444;
}

/* 2개 한 줄 */
.research-page .video-grid-2col,
.more-page .video-grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:18px;
  align-items:start;
}

/* Research 전용(2+1 레이아웃) */
.research-page .video-grid-2plus1{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:18px;
  align-items:start;
}
.research-page .video-left-bottom{ grid-column:1; }
.research-page .video-grid-2col.video-single .video-card{ grid-column:1; }

/* More 페이지 제목 */
.more-page .section-title{
  color:var(--unified-blue);
  font-weight:650;
}

/* 모바일에서는 1열 */
@media (max-width:900px){
  .research-page .video-grid-2col,
  .research-page .video-grid-2plus1,
  .more-page .video-grid-2col{
    grid-template-columns:1fr;
  }

  .research-page .video-left-bottom{ grid-column:auto; }
  .research-page .video-grid-2col.video-single .video-card{ grid-column:auto; }

  .research-page .video-caption,
  .more-page .video-caption{
    font-size:1rem;
  }
}

/* =========================================================
   Publications page tweaks
   ========================================================= */
.publications-page .section-title{
  color: var(--unified-blue);
  font-weight: 650;
}

.publications-page .cv-period{
  width: 96px;
  white-space: nowrap;
}

/* [pdf] 링크 스타일(볼드 제거 + 글씨 2/3) */
.publications-page .pdf-link{
  margin-left: 8px;
  font-weight: 400;
  font-size: 0.67em;
  color: var(--unified-blue);
  text-decoration: none;
}
.publications-page .pdf-link:hover{
  text-decoration: underline;
}

@media (max-width: 900px){
  .publications-page .cv-period{
    width: 84px;
  }
}

/* =========================================================
   More page adjustments
   ========================================================= */
.more-page .more-video-wrap{
  width: 75%;
}
@media (max-width: 900px){
  .more-page .more-video-wrap{
    width: 100%;
  }
}
.more-page .name-blue{
  color: var(--unified-blue);
  font-weight: inherit;
}