@charset "utf-8";

/* 초기화 및 글로벌 박스 모델 설정 */
.xns_youtube_gallery2,
.xns_youtube_gallery2 div,
.xns_youtube_gallery2 span,
.xns_youtube_gallery2 a,
.xns_youtube_gallery2 table,
.xns_youtube_gallery2 tr,
.xns_youtube_gallery2 th,
.xns_youtube_gallery2 td,
.xns_youtube_gallery2 ul,
.xns_youtube_gallery2 li {
  padding: 0px;
  margin: 0px;
  line-height: normal;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.xns_youtube_gallery2 ul,
.xns_youtube_gallery2 li {
  list-style: none;
}

/* 
   [핵심수정 1] 메인 컨테이너 
   - 배경색을 #f3f0ea로 변경하고 테두리 톤 매칭
   - 마우스 오버 시 부드러운 전환을 위한 transition 추가
*/
.xns_youtube_gallery2 {
  position: relative;
  overflow: hidden;
  background-color: #f3f0ea; /* 💥 요청하신 차분한 샌드 베이지 배경색 적용 */
  border: 1px solid #cfc7a4;   /* 💥 배경색에 어울리도록 테두리선 한 단계 또렷하게 조정 */
  border-radius: 8px;          /* 모서리 라운딩 처리 */
  padding: 15px;               /* 내부 여백 */
  margin-bottom: 20px;         /* 하단 여백 */
  width: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; /* 부드러운 애니메이션 */
}

/* [핵심수정 2] 전체 박스 마우스 올렸을 때 그림자 효과 */
.xns_youtube_gallery2:hover {
  transform: translateY(-3px); /* 💥 마우스 올렸을 때 입체감 있게 살짝 상승 */
  box-shadow: 0 10px 22px rgba(60, 58, 54, 0.18); /* 💥 세련되고 깊이감 있는 음영 그림자 효과 */
  border-color: #8c8368; /* 마우스 오버 시 테두리색 강조 */
}

/* 상단 타이틀 영역 (그라데이션 없이 기존의 깔끔한 라인 형태 유지) */
.xns_youtube_gallery2 .title_center {
  position: relative;
  height: 33px;
  padding-bottom: 0px;
  overflow: hidden;
  border-bottom: 2px solid #8b8d90;
  text-align: left;
  text-shadow: 1px 1px 1px #aaa;
}
.xns_youtube_gallery2 .title_center .btn_more {
  position: absolute;
  bottom: 3px;
  right: 0px;
  font-size: 15px;
  display: inline-block;
}
.xns_youtube_gallery2 .title_center span {
  position: relative;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  border-radius: 0px;
  line-height: 30px;
  font-size: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  display: inline-block;
  color: #333; /* 글자색 단정하게 유지 */
}
.xns_youtube_gallery2 .title_center span > i {
  font-size: 16px;
}

/* 갤러리 리스트 전체 영역 */
.xns_youtube_gallery2 .gallery_list {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  width: 100%;
}

/* OwlCarousel 호환을 위해 부모의 flex/float 속성 완전 제거 */
.xns_youtube_gallery2 .gallery_list > ul {
  position: relative;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

/* 개별 리스트 아이템 카드 설정 (너비 설정을 OwlCarousel에 위임) */
.xns_youtube_gallery2 .gallery_list li {
  position: relative;
  overflow: hidden;
  border: 1px solid #dcd7c9 !important; /* 내부 카드 테두리도 전체 톤에 맞춰 베이지 브라운 계열로 변경 */
  border-radius: 4px;
  background-color: #ffffff;
  width: 100% !important; 
}

.xns_youtube_gallery2 .gallery_list li > a {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* 이미지 비율을 4:3으로 변경하여 썸네일 크기를 더 크게 노출 */
.xns_youtube_gallery2 .gallery_list li > a .thumbnail_area {
  position: relative;
  overflow: hidden;
  background: #efefef;
  width: 100%;
  aspect-ratio: 4 / 3; 
}

.xns_youtube_gallery2 .gallery_list li > a .thumbnail_area img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

/* 텍스트 내용 영역 */
.xns_youtube_gallery2 .gallery_list li > a .content_area {
  position: relative;
  padding: 8px 6px;
  overflow: hidden;
  border-top: 1px solid #e3dec3; /* 내부 구분선 베이지 톤 매칭 */
  width: 100%;
}
.xns_youtube_gallery2 .gallery_list li > a .content_area > div {
  position: relative;
  overflow: hidden;
}

/* 게시물 제목 글자 크기 13px 및 높이 2줄 제한 고정 */
.xns_youtube_gallery2 .gallery_list li > a .content_area > div.gallery_title {
  font-size: 13px; 
  font-weight: bold;
  line-height: 1.4;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 2.8em; 
  color: #333;
}

/* New 아이콘 스타일 */
.xns_youtube_gallery2 .gallery_list li > a .content_area > div.gallery_title .icon_new {
  padding: 0px 3px;
  margin-top: -2px;
  border-radius: 3px;
  line-height: 12px;
  font-size: 9px;
  color: #fff;
  vertical-align: middle;
  background: #e63946; /* 조금 더 화사하고 세련된 레드로 변경 */
  display: inline-block;
}

/* 하단 좌우 이동 동그라미(인디케이터 점) 완벽하게 정가운데(Center) 정렬 */
.xns_youtube_gallery2 .owl-theme .owl-dots {
  text-align: center !important;
  margin-top: 15px !important;
  line-height: 0 !important;
  width: 100% !important;
  display: block !important;
}

.xns_youtube_gallery2 .owl-theme .owl-dots .owl-dot {
  display: inline-block !important;
  margin: 0 4px !important;
}