/* ---------------- Hero (Swiper) ---------------- */
.hero{
  position: relative;
  width:100%;
  height:400px;
  background:var(--c-gray-100);
  margin-top: 50px;
  border-radius: 8px;
  overflow: hidden; /* Swiper 내부 요소가 넘칠 때 숨김 */
  padding-inline: 0 !important; /* Swiper 내부에서 padding 조정 */  
}
.hero-swiper{
              
}
.hero-swiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:420px;        /* ← 원하는 값으로 조정 */
  padding: 40px 80px;
  padding-right: 120px;
}
/* 모든 슬라이드에 한 번만 선언 */
.hero-swiper .swiper-slide::before{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;        /* 클릭 투명 */
  background: var(--overlay,  /* 각 theme에서 덮어씀 */
    linear-gradient(to top,
      rgba(0,0,0,.55)   0%,
      rgba(0,0,0,.35)  40%,
      rgba(0,0,0,.1)   70%,
      transparent      100%)
  );
}
.hero-content {
  z-index: 1;
}
.hero-content .hero-badges{
  /* display:flex; */
  display: inline-flex;
  gap:8px;
  margin-bottom:16px;
}
.hero-content .hero-badge{
  width: auto;
  height: auto;
  color: var(--c-white);
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--c-white);
}
.hero-content .hero-title{
  font-size:42px;
  line-height:1.2;
  font-family:var(--ff-display);
  letter-spacing: -0.05rem;
  font-weight:800;
  color:var(--c-white);
  margin-bottom:.5rem;
}
.hero-content .hero-description{
  font-family:var(--ff-display);
  font-size:22px;
  font-weight:500;
  letter-spacing: -0.05rem;
  color:var(--c-white);
  margin-bottom:.5rem;
}
.hero-content .hero-description em{
  font-style: normal;
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:400;
  letter-spacing: -0.05rem;
  color:var(--c-gray-300);
}
.swiper-slide .hero-image{
  width:213px;
  height:auto; /* 높이 자동, 가로 180px */
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:.35s transform;
  z-index: -2;
}

@media (max-width:768px){
  /* ① 전체 높이를 자동으로, 여백 축소 */
  .hero{
    height:auto;                
    border-radius:0;            
    margin-top:0px;        
  }
  /* ② 슬라이드 안 배치 : 세로(column) */
  .hero-swiper .swiper-slide{
    flex-direction:column;      
    justify-content:flex-start;
    gap:20px;
    padding:32px 24px;          /* 좌우 여백 축소 */
    text-align:center;          /* 가운데 정렬 */
    height: auto;
    max-height: 90%;   /* 슬라이드 내부에서만 스케일 */
  }

  /* ③ 표지 썸네일 */
  .swiper-slide .hero-image{
    width:220px;                
    max-width:60%;              
    margin:0 auto;
  }

  /* ④ 배지·제목·설명 폰트 크기 ↓ */
  .hero-content .hero-badges{
    justify-content:center;
    flex-wrap:wrap;
  }
  .hero-content .hero-badge{
    font-size:12px;
    padding:1px 6px;
  }
  .hero-content .hero-title{
    font-size:28px;
    line-height:1.35;
  }
  .hero-content .hero-description{
    font-size:18px;
  }

  /* ⑤ 페이징 불렛 : 썸네일 “아래” 전체 폭 중앙 */
  .hero-bullets{
    gap:8px;
  }
  .hero-bullets .swiper-pagination-bullet{
    width:14px; 
    height:14px;    
  }
}



/* ----- Hero Pagination (밖으로 노출) ------------------- */
.hero-bullets{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-bottom: 34px;
  z-index: 1;
}

.hero-bullets .swiper-pagination-bullet{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--c-gray-300);
  /* opacity:.7; */
  transition:.25s;
}
.hero-bullets .swiper-pagination-bullet-active{
  background:var(--c-white);
  opacity:1;
  transform:scale(1.25);
}

/* ======== New Books & recommend-books ======== */
.recommend-books.container {
  margin-bottom: 100px;
}
.newbooks-swiper,
.recbooks-swiper{
  position: relative;
  padding: 10px !important;      /* 이미지 잘림 방지 */
  width: 100%;
}
.newbook-card,
.recbook-card{
  width: 100%;      
  display: flex;
  flex-direction: column;
}
.newbook-card img,
.recbook-card img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--c-gray-300);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: .25s transform;
  margin-bottom: 12px; /* 이미지와 제목 사이 여백 */
}
.newbook-card img:hover,
.recbook-card img:hover {
  transform: scale(1.05); /* 마우스 오버 시 확대 효과 */
}
/* ----- 책 정보 ----- */
.newbook-card .book-title,
.recbook-card .book-title{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-gray-800);
  margin-bottom: -2px; /* 제목과 저자 사이 여백 */
  /* 2줄 이후 말줄임 – 필요 시 삭제 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newbook-card .book-author,
.recbook-card .book-author{
  font-size: 14px;
  font-weight: 400;
  color: var(--c-gray-500);
  /* 2줄 이후 말줄임 – 필요 시 삭제 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width:768px){
  .newbooks-swiper,
  .recbooks-swiper{
    padding: 0px !important;     
  }
  .newbook-card img,
  .recbook-card img{
    margin-bottom: 8px;
  }
  .newbook-card img:hover,
  .recbook-card img:hover {
    transform: none; /* 모바일에서는 확대 효과 제거 */
  }
  .newbook-card .book-title{
    font-size: 16px;
    margin-bottom: -4px; /* 제목과 저자 사이 여백 */
  }
}

/* =====================Events===================== */
.events .section__header{
  margin-top: -20px !important;
  /* border: 1px solid var(--c-gray-300); */
}
.event-cards{
  display:flex;
  gap:18px; 
  flex-wrap:wrap;             /* 작은 화면에서는 다음 줄로 */
}
/* 개별 카드 */
.event-card{
  flex:1 1 49%;               /* 3장이면 약 32%씩 → 남은 여백은 gap */
  min-width:260px;            /* 너무 작아지지 않게 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 80px 0 40px;
  border-radius:8px;
  background:var(--c-gray-200);
  /* box-shadow:0 4px 12px rgba(0,0,0,.06); */
  position:relative;
  overflow:hidden;
}
/* 왼쪽 텍스트 */
.event-text{
  max-width:60%;              /* 이미지와 간격 확보 */
}
.event-title{
  font-family:var(--ff-display);
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.3;
  margin-bottom:.5rem;
}
.event-sub{
  font-family:var(-ff-display);
  font-size:.95rem;
  color:var(--c-gray-600);
}

/* 오른쪽 썸네일 */
.event-thumb{
  width:160px;
  height:auto;
  flex-shrink:0;
  border-radius:8px;
  box-shadow:0 8px 16px rgba(0,0,0,.50);
  transform:rotate(8deg);
  transition:.35s transform;
}
.event-thumb:hover {
  transform:rotate(0deg) scale(1.05);
}

/* -------- 반응형 -------- */
@media (max-width: 768px){
  .event-cards{
    gap:16px
  }
  .event-card{
    flex:1 1 100%;
    padding: 0 40px 0 20px;
  }
  .event-thumb{
    width:112px;
  }
  .event-title{
    font-size:1.2rem;
  }
  .event-thumb:hover {
    transform: rotate(8deg) scale(1.0);
  }
}