/* 더큐브 테마 문제 해결 CSS */

/* 헤더 네비게이션 정상 표시 - 기본 스타일 유지 */
#header-main {
  display: block !important;
  visibility: visible !important;
}

#navi-header {
  display: block !important;
  visibility: visible !important;
}

.heade-meta {
  display: block !important;
  visibility: visible !important;
}

/* 데스크톱에서만 메뉴 패널 숨김 - 모바일 메뉴는 유지 */
@media (min-width: 768px) {
  /* 모바일 메뉴 패널은 숨기되, 헤더 네비게이션은 유지 */
  body.responsive-ux #menu-panel {
    display: none !important;
  }

  body.responsive-ux #menu-panel-bottom,
  body.responsive-ux .menu-panel-bottom-left,
  body.responsive-ux .menu-panel-bottom-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
  }

  body.responsive-ux .menu-panel-inn.fullscreen-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 검색 바 숨김 */
  body.responsive-ux .search-top-btn-class,
  body.responsive-ux .search_top_form {
    display: none !important;
  }

  /* 데스크톱에서 헤더 네비게이션 강제 표시 */
  body.responsive-ux #header-main,
  body.responsive-ux #navi-header,
  body.responsive-ux #navi-header .menu,
  body.responsive-ux .heade-meta {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* 모바일에서는 메뉴 패널 정상 작동 */
@media (max-width: 767px) {
  body.responsive-ux.show_mobile_menu #menu-panel {
    display: block !important;
  }

  body.responsive-ux.show_mobile_menu .menu-panel-inn.fullscreen-wrap {
    display: table !important;
  }

  /* 모바일에서 메뉴 하단 검색/소셜 영역도 표시 */
  body.responsive-ux.show_mobile_menu #menu-panel-bottom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Contact 페이지 특별 처리 */
  body.responsive-ux.no-animation.show_mobile_menu #menu-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  body.responsive-ux.no-animation.show_mobile_menu
    .menu-panel-inn.fullscreen-wrap {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.responsive-ux.no-animation.show_mobile_menu #menu-panel-bottom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }
}

body.responsive-ux .video-overlay.modal {
  display: none !important;
}

/* 애니메이션 효과 안정화 */
.text_block {
  opacity: 1 !important;
}

/* 카카오맵 주소 정보 숨김 */
.section.section_address,
.section_address.lst,
div.section_address,
.root_daum_roughmap .section_address,
.root_daum_roughmap .section.section_address.lst,
.root_daum_roughmap_landing .section.section_address.lst,
.root_daum_roughmap .section_address .address,
.root_daum_roughmap .section_address .phone {
  display: none !important;
  visibility: hidden !important;
}

/* 푸터 기본 표시 설정 */
#footer,
#footer.footer-cols-layout,
#footer.ux-hide-footer {
  position: static !important;
  z-index: 1 !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* #wrap 마진 강제 제거 */
#wrap {
  margin-bottom: 0px !important;
  padding-top: 140px;
}

/* 모바일에서 햄버거 메뉴 클릭 시 메뉴 글자 보이게 */
@media (max-width: 767px) {
  /* 햄버거 메뉴 패널 내 메뉴는 보이게 */
  #menu-panel #navi .menu,
  #menu-panel #navi .menu-navi-wrap,
  #menu-panel #navi .menu-item,
  #menu-panel #navi .menu-item a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333 !important;
  }

  /* 상단 네비게이션은 숨기기 */
  #navi-header .menu,
  #navi-header .menu-menu-1-container,
  .heade-meta {
    display: none !important;
  }

  /* 모바일에서 하단 검색창 영역 숨김 */
  #menu-panel-bottom,
  .menu-panel-bottom-left,
  .menu-panel-bottom-right {
    display: none !important;
  }
}

/* 모바일에서 메인 메뉴 텍스트 숨기기 */
@media (max-width: 768px) {
  #navi-header .menu,
  #navi-header .menu-menu-1-container {
    display: none !important;
  }

  #navi .menu,
  #navi .menu-navi-wrap {
    display: none !important;
  }

  .heade-meta {
    display: none !important;
  }
}

.footer-info,
#footer .footer-info {
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-container,
#footer .footer-container {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* 포트폴리오 이미지 lazy loading 문제 해결 */
.ux-lazyload-bgimg[data-bg] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 모든 포트폴리오 이미지를 즉시 로드 */
.grid-item .ux-lazyload-bgimg {
  opacity: 1 !important;
}

.grid-item-inside {
  opacity: 1 !important;
}

/* 포트폴리오 상세페이지 이미지 문제 해결 */
.single-fullwidth-slider-carousel-img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.owl-carousel .item {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.blog-unit-gallery-wrap {
  opacity: 1 !important;
  visibility: visible !important;
}

.carousel-img-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* owl-carousel 강제 표시 */
.owl-carousel {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.owl-stage-outer {
  opacity: 1 !important;
  visibility: visible !important;
}

.owl-stage {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.owl-item {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: auto !important;
  margin-right: 30px !important;
}

/* 포트폴리오 뷰 스킨4 전용 스타일 */
.single-portfolio-simple .portfolio-images-wrap {
  opacity: 1 !important;
  visibility: visible !important;
}

.single-portfolio-simple .portfolio-image-item {
  opacity: 1 !important;
  visibility: visible !important;
  margin-bottom: 40px !important;
}

.single-portfolio-simple .portfolio-main-image {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 뷰 스킨4 제목 영역 스타일 */
.single-portfolio-simple .text-center {
  opacity: 1 !important;
  visibility: visible !important;
}

.single-portfolio-simple h1 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 뷰 스킨4 반응형 */
@media (max-width: 768px) {
  .single-portfolio-simple .portfolio-main-image {
    max-width: 100% !important;
    padding: 0 15px !important;
  }

  .single-portfolio-simple .py-40 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* 뷰 스킨4에서 + 버튼(목록으로 가기) 숨김 */
.single-portfolio-simple .post-navi-go-back {
  display: none !important;
}

.single-portfolio-simple .post-navi-go-back-a {
  display: none !important;
}

/* 포트폴리오 리스트 스킨4 전용 스타일 */
.portfolio-list-skin4 .portfolio-item-skin4 {
  margin-bottom: 20px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: none;
  break-inside: avoid;
}

.portfolio-list-skin4 .portfolio-item-skin4:hover {
  transform: none;
  box-shadow: none;
}

/* masonry 레이아웃 대신 CSS Grid 사용 */
.portfolio-list-skin4 .masonry-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  position: static !important;
  height: auto !important;
}

.portfolio-list-skin4 .grid-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 5번째부터 시작하는 두 번째 줄에 여백 추가 */
.portfolio-list-skin4 .grid-item:nth-child(n + 5) {
  margin-top: 50px !important;
}

/* 첫 번째 줄(1-4번째) 아이템은 여백 제거 */
.portfolio-list-skin4 .grid-item:nth-child(-n + 4) {
  margin-top: 0 !important;
}

.portfolio-list-skin4 .portfolio-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 15px;
}

.portfolio-list-skin4 .portfolio-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio-list-skin4 .portfolio-link {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-list-skin4 .portfolio-info {
  padding: 0;
}

.portfolio-list-skin4 .portfolio-category {
  margin-bottom: 5px;
}

.portfolio-list-skin4 .category-tag {
  display: inline-block;
  background: transparent;
  color: #999;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
}

.portfolio-list-skin4 .portfolio-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
}

.portfolio-list-skin4 .portfolio-title a {
  color: #333;
  text-decoration: none;
  transition: none;
}

.portfolio-list-skin4 .portfolio-title a:hover {
  color: #333;
}

.portfolio-list-skin4 .portfolio-content {
  color: #666;
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
  font-weight: 400;
  letter-spacing: -1px;
}

/* 스킨4 반응형 Grid */
@media (max-width: 1024px) {
  .portfolio-list-skin4 .masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 태블릿에서는 3번째부터 두 번째 줄 */
  .portfolio-list-skin4 .grid-item:nth-child(n + 5) {
    margin-top: 0 !important;
  }

  .portfolio-list-skin4 .grid-item:nth-child(n + 3) {
    margin-top: 50px !important;
  }

  .portfolio-list-skin4 .grid-item:nth-child(-n + 2) {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .portfolio-list-skin4 .masonry-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 15px !important;
  }

  /* 모바일에서는 2번째부터 각각 여백 */
  .portfolio-list-skin4 .grid-item:nth-child(n + 3) {
    margin-top: 0 !important;
  }

  .portfolio-list-skin4 .grid-item:nth-child(n + 2) {
    margin-top: 50px !important;
  }

  .portfolio-list-skin4 .grid-item:nth-child(1) {
    margin-top: 0 !important;
  }

  .portfolio-list-skin4 .portfolio-info {
    padding: 0;
  }

  .portfolio-list-skin4 .portfolio-title {
    font-size: 16px;
  }
}

/* 메인 페이지 top-slider 영역 숨김 */
.top-slider.top-slider-text {
  display: none !important;
}

/* 혹시 다른 곳에서 사용되는 경우를 위한 추가 선택자 */
body.page .top-slider.top-slider-text {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
}

.portfolio-list-skin4 .masonry-grid {
  margin-top: 0 !important;
}

/* 카테고리 버튼 스타일 정리 */
.filters-ul li a.port-btn {
  padding: 8px 16px !important;
  margin: 0 5px !important;
  border-radius: 20px !important;
  background: #f5f5f5 !important;
  color: #666 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.filters-ul li.active a.port-btn,
.filters-ul li a.port-btn:hover {
  background: #333 !important;
  color: #fff !important;
}

/* 스킨4 이미지 즉시 로딩 */
.portfolio-list-skin4 .portfolio-image-wrap,
.portfolio-list-skin4 .portfolio-image {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 포트폴리오 리스트 스킨4 페이지네이션 */
.portfolio-list-skin4 #page_num {
  margin-top: 10px;
  padding: 10px 0;
}

.portfolio-list-skin4 .pagenums {
  margin-top: 10px;
  padding: 10px 0;
}

.portfolio-list-skin4 .ux-page-load-more {
  background: #333;
  color: #fff;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.portfolio-list-skin4 .ux-page-load-more:hover {
  background: #000;
  color: #fff;
}

/* =========================
   INDEX 페이지만 수정 (정확한 타겟팅)
   ========================= */

/* INDEX 페이지에서만 카테고리 숨기기 */
body:not([class*="pn-"]) .filters-ul {
  display: none !important;
}

/* INDEX 페이지에서만 특정 clearfix 숨기기 - 프로젝트 리스트는 제외 */
body:not([class*="pn-"]) .filters-ul.clearfix {
  display: none !important;
}

/* INDEX 페이지에서만 포트폴리오 위치 조정 */
body:not([class*="pn-"]) .portfolio-list-skin4 {
  padding-top: 80px !important;
  margin-top: -40px !important;
}

/* 메인 페이지만 포트폴리오 컨테이너 하단 여백 */
body:not([class*="pn-"]) .container-masonry {
  margin-top: -120px !important;
  margin-bottom: 110px !important;
}

/* 푸터 하위 요소 표시 */
#footer *,
.footer-info *,
.footer-container *,
#footer .socialmeida,
#footer .socialmeida-li,
#footer .company-name,
#footer .address,
#footer .contact,
#footer .copyright,
#footer #logo-footer {
  opacity: 1 !important;
  visibility: visible !important;
}