/* ===== Tokens (단색 배경, 노 그라데이션) ===== */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --text:#1d2433;
  --muted:#586174;
  --line:#e6e8ef;
  --brand:#2f5d8c;
  --accent:#335ea7;

  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --container:1080px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Noto Sans, Apple SD Gothic Neo, Helvetica Neue, Arial;
  
  /* Section backgrounds */
  --section-hero:#f8fafc;
  --section-research:#f1f5f9;
  --section-publications:#fefefe;
  --section-experience:#f8fafc;
  --section-education:#f1f5f9;
  --section-references:#fefefe;
}

:root.dark{
  --bg:#0f1116;
  --surface:#161922;
  --text:#e8ecf3;
  --muted:#9aa5b5;
  --line:#232736;
  --brand:#6aa6ff;
  --accent:#7fc7ff;
  
  /* Section backgrounds for dark mode */
  --section-hero:#0a0d14;
  --section-research:#0f1419;
  --section-publications:#0a0d14;
  --section-experience:#0f1419;
  --section-education:#0a0d14;
  --section-references:#0f1419;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font);
  background:var(--bg); color:var(--text);
  font-size:18px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
html{scroll-behavior:smooth}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}

h1,h2,h3{margin:0 0 .6rem}
h2{font-size:1.4rem; letter-spacing:.02em}
p{margin:.2rem 0 0}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); transition:all 0.3s ease;
}
:root.dark .site-header{background:rgba(22,25,34,.95);}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{font-weight:800; color:var(--text); text-decoration:none; font-size:1.2rem}
.nav{display:flex; gap:24px}
.nav a{color:var(--text); opacity:.85; text-decoration:none; font-weight:600; padding:8px 16px; border-radius:8px; transition:all 0.3s ease}
.nav a:hover{opacity:1; background:var(--line); transform:translateY(-1px)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer; transition:all 0.3s ease;
  display:flex; align-items:center; justify-content:center; font-size:18px}
.icon-btn:hover{background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px)}

/* ===== Section 기본 ===== */
.section {
  padding: 0;
  transition: background-color 0.3s ease;
}
.section .container {
  padding: 60px 24px;
}

/* subtle vertical rhythm between sections */
.section + .section { margin-top: 32px; }
@media (max-width: 760px){
  .section + .section { margin-top: 24px; }
}


/* removed fullPage-specific auto-height */




/* Section-specific backgrounds (conservative tints) */
#about-research{background:var(--section-hero)}
#publications{background:var(--section-publications)}
#experience{background:var(--section-experience)}
#edu-leadership{background:var(--section-education)}
#contact{background:var(--section-references)}

/* legacy ids (safe to keep) */
#about{background:var(--section-hero)}
#research-animation{background:var(--section-research)}
#interests{background:var(--section-research)}
#references{background:var(--section-references)}

/* ===== About ===== */
.about{display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:flex-start}
.about > div{border-left:1px solid var(--line); padding-left:20px}
.about-right{min-height:240px; display:flex; flex-direction:column; justify-content:space-between}
.avatar{width:240px;height:240px;border-radius:12px;object-fit:cover;border:2px solid var(--line);background:#ddd; outline:1px solid var(--line); outline-offset:6px; box-shadow:0 4px 16px rgba(0,0,0,.06)}
.title{font-size:32px; letter-spacing:-.02em; margin:0 0 .2rem 0}
.subtitle{color:var(--muted); margin:.1rem 0 .6rem}
.affil{display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 .6rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); font-size:.95rem}
.badge .now-link{display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; color:inherit}
.badge .now-link:hover{text-decoration:underline}
.links{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.8rem}
.chip{display:flex;justify-content:center;gap:.4rem;align-items:center;padding:.5rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none}
.chip:hover{border-color:#cfd3db}



/* ===== Introduce (About 안) ===== */
.introduce {
  max-width: var(--container);
  margin: 10px auto 0;   /* 위쪽 여백만 살짝 */
  padding: 20px;
  border-top: 1px solid var(--line);  /* About 내용과 구분선 */
}

/* Hide read-more by default (desktop/tablet) */
.introduce .read-more{display:none}

.introduce h2 {
  font-size: 1.4rem;
  margin-bottom: .6rem;
}

.introduce .ri-box {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .9rem;
  box-shadow: var(--shadow);
  margin: .5rem 8px .5rem 0;
  width: calc((100% - 32px) / 3.2);
}

@media (max-width: 900px) {
  .introduce .ri-box {
    width: 100%;
    margin-right: 0;
  }
}


/* ===== Publications (Gallery 등) ===== */

/* ===== Publications Section 개선 ===== */
#publications {
  padding: 80px 0;
}

#publications .container {
  padding-top: 20px;
  padding-bottom: 40px;
}

#publications h2 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 1.8rem;
}

.publication-subsection {
  margin-bottom: 60px;
}

.publication-subsection:last-of-type {
  margin-bottom: 0;
}

.subsection-title {
  font-size: 1.2rem;
  margin-bottom: 28px;
  padding-left: 4px;
  font-weight: 600;
  color: var(--text);
  border-left: 4px solid var(--brand);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
}

.gcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.gcard:hover{transform:translateY(-3px); border-color:#cfd3db}
.gcard img{width:100%; aspect-ratio:16/10; object-fit:cover; background:#ddd}
.ginfo{padding:16px 18px; flex:1; display:flex; flex-direction:column}
.ginfo h3{font-size:1.1rem; margin:0 0 .3rem; font-weight:600}
.ginfo p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.4}
/* Paper Modal */
.paper-modal{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000;
  background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.paper-modal.active{opacity:1; visibility:visible}
.paper-modal-content{
  background:var(--surface); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3);
  max-width:1200px; width:100%; max-height:90vh; overflow-y:auto;
  transform:scale(.9); transition:transform .3s ease;
}
.paper-modal.active .paper-modal-content{transform:scale(1)}
.paper-modal-header{
  display:flex; justify-content:space-between; align-items:center; padding:20px 24px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.paper-modal-title{font-size:1.3rem; font-weight:600; margin:0}
.paper-modal-close{
  width:32px; height:32px; border-radius:50%; border:none; background:var(--line);
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.paper-modal-close:hover{background:var(--muted)}
.paper-modal-body{padding:24px}
.paper-modal-image{
  width:100%; max-width:700px; aspect-ratio:16/10; object-fit:cover;
  border-radius:12px; margin:0 auto 24px; display:block; background:#ddd;
}
.paper-modal-description{
  color:var(--muted); line-height:1.6; margin-bottom:24px; font-size:1rem;
}
.paper-modal-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.paper-modal-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
  border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); text-decoration:none; font-weight:500; cursor:pointer;
  transition:all .2s ease;
}
.paper-modal-btn:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.paper-modal-btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.paper-modal-btn.primary:hover{background:var(--accent); border-color:var(--accent)}

/* PDF viewer */
/* Inline PDF viewer inside publications */
.inline-pdf{grid-column:1 / -1; margin-top:8px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.inline-pdf .viewer-bar{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid var(--line)}
.inline-pdf .viewer-actions{display:flex; gap:8px}
.inline-pdf .btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.inline-pdf .btn.ghost{opacity:.85}
.inline-pdf .btn.danger{background:#ff4d5e; border-color:#ff4d5e; color:#fff}
.inline-pdf iframe{width:100%; height:640px; border:0}

/* ===== Education ===== */
.edu-list{display:grid; gap:12px}
.edu-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);
}
.edu-logo{width:54px;height:54px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line)}
.edu-content{flex:1; min-width:0}
.edu-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.period{white-space:nowrap; color:var(--muted); font-weight:600}
.edu-meta{color:var(--muted); margin-top:2px}

/* ===== Cards (Experience 등) ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.card-head{display:flex; justify-content:space-between; gap:8px; align-items:center}

/* ===== Experience (logo + content) ===== */
.xp-list {
  display: grid;
  gap: 12px;
}

/* 카드 전체 */
.xp-card {
  display: flex;
  flex-direction: column;  /* 위(xp-top) + 아래(xp-btm) */
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

/* 상단 영역: 텍스트 + 로고 */
.xp-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* 좌측 정보 묶음 */
.xp-info {
  flex: 1;
  min-width: 0;
}

/* 제목 + 기간 */
.xp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* 내용 */
.xp-content {
  color: var(--muted);
  line-height: 1.6;
  margin-top: .35rem;
}

/* 로고 */
.xp-logo {
  width: 100px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

/* 하단 태그 */
.xp-btm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 태그 스타일 */
.tag {
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #eef1f7;
  color: #24324a;
  border: 1px solid #e1e5ee;
}

:root.dark .tag {
  background: #1e2533;
  color: #cfe0ff;
  border-color: #2a3347;
}

/* 기존 pill 유지 */
.pill {
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #eef1f7;
  color: #24324a;
  border: 1px solid #e1e5ee;
}
:root.dark .pill {
  background: #1e2533;
  color: #cfe0ff;
  border-color: #2a3347;
}

/* ===== Timeline (Education + Leadership) ===== */
.timeline{position:relative; margin-top:8px}
.timeline::before{content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:var(--line)}
.t-item{position:relative; padding-left:36px; margin:14px 0}
.t-dot{position:absolute; left:6px; top:.6rem; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(51,94,167,.12)}
.t-content{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:var(--shadow)}
.t-row{display:flex; justify-content:space-between; gap:10px; align-items:center}

@media (max-width:760px){
  .timeline::before{left:10px}
  .t-item{padding-left:30px}
  .t-dot{left:4px}
  .t-row{flex-direction:column; align-items:flex-start}
}

/* ===== Simple lists ===== */
.simple-list{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); padding:22px 0; text-align:center; color:var(--muted)}
/* ===== Responsive ===== */
@media (max-width:760px){
  .about{grid-template-columns:1fr; text-align:center}
  .avatar{width:200px;height:200px; margin:0 auto}
  .links{grid-template-columns:1fr}
  .about > div{border-left:none; padding-left:0}
  .about-right{min-height:auto}
  /* Hide header on mobile */
  .site-header{display:none}
  /* Clamp long intro text */
  .introduce .lead{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden;
  }
  .introduce.expanded .lead{
    display:block; -webkit-line-clamp:unset; overflow:visible;
  }
  .introduce .read-more{
    display:inline-block; margin-top:8px; color:var(--accent); font-weight:600; text-decoration:none;
  }
  .introduce .read-more:hover{text-decoration:underline}
}
@media (max-width:900px){
  .gallery{grid-template-columns:1fr}
}
@media (max-width:680px){
  .gcard img{aspect-ratio:4/3}
}

/* Responsive columns for gallery */
@media (max-width:900px){
  .gallery{grid-template-columns:1fr}
}
@media (max-width:680px){
  .gcard img{aspect-ratio:4/3}
}

.research-slides {
  position: relative;
  max-width: var(--container);
  margin: 40px auto 0;
  overflow: hidden;
  height: 420px; /* ensure visible height for absolute slides */
}

.research-slides .page {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(0);
  transition: opacity .35s ease, transform .35s ease;
}

.research-slides .page.active { opacity: 1; transform: translateX(0); }

/* Horizontal transition helpers */
.research-slides .page.enter-from-right { transform: translateX(40px); }
.research-slides .page.enter-from-left { transform: translateX(-40px); }
.research-slides .page.exit-to-left { transform: translateX(-40px); opacity: 0; }
.research-slides .page.exit-to-right { transform: translateX(40px); opacity: 0; }

.research-slides img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: block;
}

/* scale images to fit the fixed slides height */
.research-slides .page img{ max-height: 100%; width: auto; }

@media (max-width: 760px){
  .research-slides{ height: 300px; }
}

/* 화살표 버튼 */
.research-slides .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.research-slides .arrow:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.research-slides .arrow.prev { left: 20px; }
.research-slides .arrow.next { right: 20px; }

/* ===== Contact ===== */
#contact .container{padding-top:40px; padding-bottom:40px}
#contact h2{font-size:1.6rem; text-align:center; margin-bottom:22px}
#contact .contact-info{max-width:800px; margin:0 auto 10px; text-align:center}
#contact .contact-info .lead{margin-bottom:.25rem}
#contact .contact-info address{color:var(--muted)}
#contact .contact-info a{color:var(--accent); text-decoration:none; font-weight:600}
#contact .contact-info a:hover{text-decoration:underline}

#map{border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:#ddd}

/* ===== Right-side Section Nav ===== */
.section-nav{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:200;
}
.section-nav .dot{
  width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.15); border:1px solid var(--line);
  display:block; box-shadow:var(--shadow); position:relative; cursor:pointer;
}
.section-nav .dot.active{background:var(--brand); border-color:var(--brand)}
.section-nav .dot:hover{background:var(--accent); border-color:var(--accent)}

/* Hover tooltip showing section title */
.section-nav .dot::after{
  content: attr(title);
  position:absolute; right: 140%; top:50%; transform:translateY(-50%);
  background: var(--surface); color: var(--text);
  border:1px solid var(--line); border-radius:8px; padding:4px 8px;
  box-shadow: var(--shadow);
  opacity:0; visibility:hidden; transition: opacity .15s ease, transform .15s ease;
  white-space: nowrap; font-size:.85rem;
}
.section-nav .dot:hover::after{opacity:1; visibility:visible; transform:translateY(-50%) translateX(-2px)}