/* ========== Base ========== */
:root{
  --iu-crimson: #990000;
  --cream: #f7f2e7;
  --ink: #2c2c2c;
  --muted: #666;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

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

html, body{ height:100%; }

body{
  font-family:'Source Sans Pro',sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
}

/* ========== Shell ========== */
.container{
  max-width:1180px;
  margin:0 auto;
  background:var(--card);
  min-height:100vh;
  box-shadow:var(--shadow);
  padding:0 1.5rem;
}

/* ========== Hero ========== */
.hero{
  color:var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,.95), rgba(247,242,231,.92)),
    url('images/beshkar-background.png');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:1rem 1.25rem 0.5rem 1.25rem;
}

.hero .content-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2.5rem;
  max-width:1180px;
  margin:0 auto;
}

/* --- Left column: text + photo --- */
.left{
  flex:1 1 0;
  display:flex;
  justify-content:center;
}

.profile-card{
  width:100%;
  max-width:460px;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.profile-card h1{
  font-family:'Crimson Text',serif;
  font-size:2.75rem;
  font-weight:600;
  letter-spacing:.2px;
  text-align:center;
  text-shadow:2px 2px 4px rgba(0,0,0,.25);
}

.card-body{
  display:flex;
  align-items:center;
  gap:1.25rem;
}

.card-info{
  flex:1 1 0;
  text-align:left;
}

.card-info p{
  font-size:1.12rem;
  margin-bottom:.35rem;
}

.card-info .email{
  font-style:italic;
  opacity:.95;
}

.card-info .email a{
  color:inherit;
  text-decoration:underline;
}

.card-info .email a:hover{ color:#a00; }

.prof-photo{
  display:block;
  width:190px;
  height:auto;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* 소셜 아이콘 */
.social-icons{
  display:flex;
  justify-content:flex-start;
  gap:0.9rem;
}

.social-icons a{
  text-decoration:none;
}

.social-icons i{
  font-size:1.6rem;
  color:var(--iu-crimson);
  filter:drop-shadow(0 0 2px rgba(0,0,0,0.4));
  transition:transform 0.15s ease, opacity 0.15s ease;
}

.social-icons i:hover{
  transform:translateY(-2px);
  opacity:0.8;
}

/* --- Right column: graph / carousel --- */
.right{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.graph-block{
  width:100%;
  max-width:700px;
  padding:0.8rem;
  margin:0 auto;
  text-align:center;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* 그래프 이미지 기본 크기 */
.hero-graph{
  width:100%;
  height:350px;         /* 세로 높이 조절 포인트 */
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  object-fit:fill;      /* 약간 찌그러져도 OK */
  display:block;
  margin:0 auto;
}

.graph-link{
  display:block;
}

/* ========== Carousel ========== */
.carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.carousel-track{
  overflow:hidden;
  margin-bottom: 0;
  padding-bottom: 0;
}

.carousel-slide{
  display:none !important;
}

.carousel-slide.active{
  display:block !important;
}

.carousel-btn{
  background:rgba(0,0,0,0.4);
  border:none;
  color:#fdf7ea;
  font-size:1.6rem;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0.5rem;
  transition:background 0.15s ease, transform 0.15s ease;
}

.carousel-btn:hover{
  background:rgba(0,0,0,0.6);
  transform:translateY(-1px);
}

/* ========== Nav ========== */
.main-nav{
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  z-index:1000;
}

nav{
  background:var(--iu-crimson);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--cream);
  font-size:1rem;
  font-weight:600;
  padding:0.85rem 1rem;
  cursor:pointer;
  align-items:center;
  gap:0.6rem;
}

.menu-toggle:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:2px;
}

.menu-icon{
  width:20px;
  height:2px;
  background:currentColor;
  display:inline-block;
  position:relative;
}

.menu-icon::before,
.menu-icon::after{
  content:'';
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:currentColor;
}

.menu-icon::before{ top:-6px; }
.menu-icon::after{ top:6px; }

.nav-tabs{
  display:flex;
  list-style:none;
}

.nav-tabs li{ flex:1; }

.nav-tabs .tab-btn{
  display:block;
  width:100%;
  padding:1rem;
  background:none;
  border:0;
  color:var(--cream);
  font-size:1rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}

.nav-tabs .tab-btn:hover{
  background-color:rgba(247,242,231,.12);
  transform:translateY(-1px);
}

.nav-tabs .tab-btn.active{
  background:var(--cream);
  color:var(--iu-crimson);
  font-weight:600;
}

/* ========== Content ========== */
.content{ padding:2rem; }

.tab-content{ display:none; }
.tab-content.active{ display:block; }

.section{
  margin-bottom:2rem;
  animation:fadeIn .45s ease-in;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.section h2{
  font-family:'Crimson Text',serif;
  color:var(--iu-crimson);
  border-bottom:3px solid var(--cream);
  padding-bottom:.4rem;
  margin-bottom:1rem;
  font-size:1.6rem;
  font-weight:600;
}

/* ========== Publication Cards ========== */
.publication{
  background:#fdfdfd;
  border-left:4px solid var(--cream);
  border-radius:6px;
  padding:1rem;
  margin-bottom:1rem;
  transition:box-shadow .2s ease, border-color .2s ease;
}

.publication:hover{
  border-left-color:var(--iu-crimson);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

.publication-title{
  font-family:'Crimson Text',serif;
  color:var(--iu-crimson);
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:.35rem;
}

.publication-details{
  color:var(--muted);
  font-style:italic;
  font-size:.96rem;
}

/* ========== Contact Card ========== */
.contact-info{
  background:#fafafa;
  border:1px solid var(--cream);
  border-radius:10px;
  padding:1.5rem;
}

.contact-info p{ margin-bottom:.75rem; font-size:1.05rem; }
.contact-info strong{ color:var(--iu-crimson); }

.page-title{
  font-family:'Crimson Text',serif;
  font-size:2.15rem;
  color:var(--iu-crimson);
  margin-bottom:1.5rem;
  text-align:center;
}

.graph-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-bottom:1.5rem;
}

.graph-gallery figure{
  flex:1 1 240px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  padding:0.75rem;
  text-align:center;
}

.graph-gallery img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:0.5rem;
}

.graph-gallery figcaption{
  font-size:0.95rem;
  color:var(--muted);
}

.graph-description p{
  margin-bottom:1rem;
}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .hero{
    background-attachment:scroll;
  }
  .hero .content-row{
    flex-direction:column;
    gap:1.25rem;
  }
  .left{ width:100%; }
  .profile-card{
    max-width:100%;
  }
  .card-body{
    flex-direction:column;
    text-align:center;
  }
  .social-icons{
    justify-content:center;
  }
  .graph-title{ white-space:normal; }
}

@media (max-width: 640px){
  .hero{ padding:1.5rem 0.5rem; }
  .profile-card h1{ font-size:2.2rem; }
  .prof-photo{ width:220px; }
  .content{ padding:1.25rem; }
  .menu-toggle{ display:flex; }
  .nav-tabs{
    flex-direction:column;
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border-top:1px solid rgba(255,255,255,.25);
  }
  .nav-tabs.open{
    max-height:500px;
  }
  .nav-tabs li{ flex:none; }
  .nav-tabs .tab-btn{
    text-align:left;
    padding:0.85rem 1.25rem;
  }
}