/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* ================================== 
   Common
  ================================== */
/* 서체 굵기 유틸 (헤딩까지 포함) */
.fw-100, .fw-100 h1, .fw-100 h2, .fw-100 h3, .fw-100 h4, .fw-100 h5, .fw-100 h6 { font-weight:100!important; }
.fw-300, .fw-300 h1, .fw-300 h2, .fw-300 h3, .fw-300 h4, .fw-300 h5, .fw-300 h6 { font-weight:300!important; }
.fw-400, .fw-400 h1, .fw-400 h2, .fw-400 h3, .fw-400 h4, .fw-400 h5, .fw-400 h6 { font-weight:400!important; }
.fw-500, .fw-500 h1, .fw-500 h2, .fw-500 h3, .fw-500 h4, .fw-500 h5, .fw-500 h6 { font-weight:500!important; }
.fw-600, .fw-600 h1, .fw-600 h2, .fw-600 h3, .fw-600 h4, .fw-600 h5, .fw-600 h6 { font-weight:600!important; }
.fw-700, .fw-700 h1, .fw-700 h2, .fw-700 h3, .fw-700 h4, .fw-700 h5, .fw-700 h6 { font-weight:700!important; }
.fw-800, .fw-800 h1, .fw-800 h2, .fw-800 h3, .fw-800 h4, .fw-800 h5, .fw-800 h6 { font-weight:800!important; }
.fw-900, .fw-900 h1, .fw-900 h2, .fw-900 h3, .fw-900 h4, .fw-900 h5, .fw-900 h6 { font-weight:900!important; }

/* 투명도 */
.op-01, .h-op-01:hover { opacity: 0.1 !important; }
.op-02, .h-op-02:hover { opacity: 0.2 !important; }
.op-03, .h-op-03:hover { opacity: 0.3 !important; }
.op-04, .h-op-04:hover { opacity: 0.4 !important; }
.op-05, .h-op-05:hover { opacity: 0.5 !important; }
.op-06, .h-op-06:hover { opacity: 0.6 !important; }
.op-07, .h-op-07:hover { opacity: 0.7 !important; }
.op-08, .h-op-08:hover { opacity: 0.8 !important; }
.op-09, .h-op-09:hover { opacity: 0.9 !important; }
.op-10, .h-op-10:hover { opacity: 1 !important; }

/* Responsive Image View */
.desktop-image, .desktop-view { display: none !important; }
.mobile-image, .mobile-view { display: none !important; }
@media (min-width: 1000px) { .desktop-image, .desktop-view { display: block !important; } }
@media (max-width: 999px) { .mobile-image, .mobile-view { display: block !important; } }


/* ================================== 
   PRODUCT / CATEGORY / FILTER
   ================================== */
/* filter-side-custom scope */
.nectar-post-grid-wrap.filter-side-custom{
  --fs-font:15px;
  --fs-wrap-pt:0; --fs-wrap-pb:0; --fs-wrap-pl:0; --fs-wrap-pr:40px;
  --fs-sidebar-w:12vw;           /* ex) 260px or clamp(220px,20vw,280px) */
  --fs-sidebar-pr:30px;
}

/* padding & title */
.filter-side-custom .nectar-post-grid-filters{padding-top:var(--fs-wrap-pt);padding-bottom:var(--fs-wrap-pb);}
.filter-side-custom .nectar-post-grid-filters .n-sticky>h4{display:none!important;margin:0;padding:0;}

/* item text */
.filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left .nectar-post-grid-filters a{
  font-size:var(--fs-font)!important;
  line-height:18px!important; padding-top:1px; padding-bottom:1px;
}

/* grid side margins */
.filter-side-custom .nectar-post-grid[data-grid-spacing]{margin-left:0!important;margin-right:0!important;}

/* align with tabs (spacing-15px) */
.filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left.spacing-15px .nectar-post-grid-filters{
  padding-left:0!important;padding-right:0!important;
}

/* desktop */
@media (min-width:1000px){
  .full-width-content .span_12 .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left.spacing-15px .nectar-post-grid-filters{
    padding-left:0!important;padding-right:0!important;
  }
  .full-width-content .span_12 .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left.spacing-15px .nectar-post-grid-filters,
  .full-width-content .span_12 .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left .nectar-post-grid-filters{
    padding-left:var(--fs-wrap-pl); padding-right:var(--fs-wrap-pr);
  }
  .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left .nectar-post-grid-filters{
    flex:0 0 var(--fs-sidebar-w)!important; width:var(--fs-sidebar-w)!important; max-width:var(--fs-sidebar-w)!important; min-width:0!important; padding-right:var(--fs-sidebar-pr);
  }
  .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left .load-more-wrap{
    padding-left:calc(var(--fs-sidebar-w) + var(--fs-sidebar-pr))!important;
  }
  .full-width-content .span_12 .filter-side-custom.nectar-post-grid-wrap--fl-sidebar_left .nectar-post-grid-filters{
    flex:0 0 var(--fs-sidebar-w)!important; width:var(--fs-sidebar-w)!important; max-width:var(--fs-sidebar-w)!important;
  }
}

/* mobile */
@media (max-width:1000px){
  .filter-side-custom .nectar-post-grid-filters{padding-left:20px;padding-right:20px;}
  .filter-side-custom .nectar-post-grid-filters select{display:none!important;}
  .filter-side-custom .nectar-post-grid-filters .controls,
  .filter-side-custom .nectar-post-grid-filters .filter-list,
  .filter-side-custom .nectar-post-grid-filters>.n-sticky>div{display:block!important;}
  .filter-side-custom .nectar-post-grid-filters .n-sticky>div{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;}
}

/* tabs (inactive dim) */
.wpb_content_element.tabs-side-custom{--tab-inactive:rgba(0,0,0,.3);--tab-hover:rgba(0,0,0,.7);}
.wpb_content_element.tabs-side-custom .wpb_tabs_nav li:not(.active-tab)>a{color:var(--tab-inactive)!important;transition:color .2s ease;}
.wpb_content_element.tabs-side-custom .wpb_tabs_nav li:not(.active-tab)>a:hover{color:var(--tab-hover)!important;}



/* ================================== 
   POST / CATEGORY
   ================================== */

/* 디자인 톤 조절용 변수 */
.subtabs__list{
  --subtabs-gap: 12px;
  --subtabs-baseline: rgba(0,0,0,.10);         /* 컨테이너 전체 얇은 라인 */
  --subtabs-active: #333;                      /* 활성 글자/밑줄 색 */
  --subtabs-inactive: rgba(0,0,0,.3);         /* 비활성 글자 색 */
  --subtabs-underline-h: 3px;                  /* 활성 밑줄 두께 */
  --subtabs-underline-offset: -1px;            /* 활성 밑줄 위치(아래쪽) */
}

/* 레이아웃 & 베이스라인 */
.subtabs__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:flex-end;
  gap:var(--subtabs-gap);
  position:relative;
  border-bottom:1px solid var(--subtabs-baseline); /* 컨테이너 전체 얇은 밑줄 */
}

/* 링크 */
.subtabs__list a{
  position:relative;
  display:inline-block;
  padding:18px 17px;
  text-decoration:none;
  color:var(--subtabs-inactive);
  font-size: 18px;
  transition:color .2s ease;
}

/* 활성 */
.subtabs__list a.is-active{
  color:var(--subtabs-active);
}

/* 활성 밑줄(짧은 라인: 텍스트 너비만) */
.subtabs__list a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;                /* 텍스트 폭에 맞춰짐 */
  bottom:var(--subtabs-underline-offset);
  height:var(--subtabs-underline-h);
  background:currentColor;
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease, opacity .25s ease;
}
.subtabs__list a.is-active::after{
  opacity:1;
  transform:scaleX(1);
}

/* 모바일에서 간격 조금 줄이고 싶으면 */
@media (max-width: 768px){
  .subtabs__list{ gap:14px; }
  .subtabs__list a {padding: 12px;}

}



/* ================================== 
   PRODUCT / DETAIL(1) / ICON
   ================================== */

/* 기본 변수 (필요하면 값만 바꿔 쓰기) */
.pt-detail-icon{
  --gap: 18px;        /* 카드 사이 간격 */
  --min: 120px;       /* 카드 최소 너비(그리드 칼럼 기준) */
  --icon: 80px;       /* 데스크톱 아이콘 크기 */
  --icon-sm: 52px;    /* 모바일 아이콘 크기 */
  --txt: 14px;        /* 데스크톱 텍스트 크기 */
  --txt-sm: 13px;     /* 모바일 텍스트 크기 */
  --txt-color: #444;  /* 텍스트 색상 */
}

/* 래퍼를 CSS Grid로 전환: 남는 폭에 맞춰 자동 열 개수 */
.pt-detail-icon .vc_column-inner > .wpb_wrapper{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), var(--min)));
  justify-content: start; /* 남는 공간 가운데 정렬 */
  gap: var(--gap);
}

/* 카드(아이콘+텍스트) – 세로 스택 */
.pt-detail-icon .iwithtext{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
  gap: 12px;                    /* 아이콘-텍스트 간격 */
  margin: 0 !important;         /* 테마 기본 마진 제거 */
  box-sizing: border-box;
}

/* 테마 기본 레이아웃 무력화(절대배치/패딩-left) */
.pt-detail-icon .iwithtext .iwt-icon{
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
}
.pt-detail-icon .iwithtext .iwt-text{
  padding-left: 0 !important;
  float: none !important;
  font-size: var(--txt);
  color: var(--txt-color);
  line-height: 1.45;
}

/* 테마의 35px 고정 규칙/이미지 전역 규칙 무력화 + 아이콘 크기 적용 */
.pt-detail-icon .iwithtext .iwt-icon img,
.pt-detail-icon .row .col .iwithtext .iwt-icon img:not([srcset]){
  width: var(--icon) !important;
  height: auto !important;
  max-width: none !important;
  display: block;
  margin: 0 !important;
}

/* 불필요한 clear 제거 */
.pt-detail-icon .iwithtext .clear{ display: none !important; }

/* 카드 외 여백 충돌 방지 */
.pt-detail-icon .wpb_wrapper > *{ margin-bottom: 0 !important; }

/* -------- 반응형 -------- */
@media (max-width: 1024px){
  .pt-detail-icon{ --min: 140px; }
}
@media (max-width: 680px){
  .pt-detail-icon{
    --min: 120px;
    --icon: var(--icon-sm);
    --txt: var(--txt-sm);
  }
}

/* ===== (선택) 모바일에서 ‘정확히’ 2/3열로 강제하고 싶을 때 =====
   Row에 보조 클래스를 추가해 쓰세요: m-cols-2 또는 m-cols-3  */
@media (max-width: 680px){
  .pt-detail-icon.m-cols-2 .vc_column-inner > .wpb_wrapper{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pt-detail-icon.m-cols-3 .vc_column-inner > .wpb_wrapper{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


/* ================================== 
   PRODUCT / DEFAULT / LIST 
   ================================== */

/* 리스트 페이지 전용 변수 */
:root {
  --list-spec-gap: 10px;
  --list-spec-label-w: 60px;
  --list-spec-fw-label: 600;
  --list-spec-lh: 1.5;
}

/* 영역 컨테이너: 타이틀과의 간격 + 수직 스택 */
.nectar-post-grid-item__custom-fields {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--list-spec-gap);
  line-height: var(--list-spec-lh);
}

/* 기본 p에 들어오는 경우 패딩 제거 */
.nectar-post-grid-item__custom-field {
  padding: 0;
  margin: 0;
  line-height: inherit;
}

/* 한 줄 Key–Value */
.nectar-post-grid-item__custom-field .spec {
  display: flex;
  align-items: flex-start;
  margin: 0;
  gap: 10px;
}

.nectar-post-grid-item__custom-field .spec__label {
  flex: 0 0 var(--list-spec-label-w);
  font-weight: var(--list-spec-fw-label);
}

.nectar-post-grid-item__custom-field .spec__value {
  flex: 1;
  text-align: left;
  min-width: 0;
  color: #666666 !important;
}

/* 리스트 페이지 반응형 */
@media (max-width: 768px) {
  :root {
    --list-spec-label-w: 60px;
    --list-spec-gap: 10px;
  }
  
  .nectar-post-grid-item__custom-field .spec {
    align-items: flex-start;
  }
}

/* -------------------------------
   이미지 호버 전환 효과 
   ------------------------------- */
/* ==========================================================================
   Portfolio 이미지 호버 전환 효과 (세컨더리 이미지가 있는 아이템만)
   - 세컨더리 이미지를 전체 크기로 표시
   - 마우스 오버 시 메인 → 세컨더리 이미지로 부드럽게 전환
   ========================================================================== */

/* 세컨더리 이미지 - 전체 크기로 오버라이드 (세컨더리 이미지가 있는 아이템만) */
.main-content .nectar-post-grid-item__has-secondary .nectar-post-grid-item__overlaid-img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

/* 컨테이너 - 기본 오버레이 레이아웃 제거 */
.overlay-secondary-project-image-left .nectar-post-grid-item__has-secondary .nectar-post-grid-item-bg-wrap-inner {
    padding-left: 0 !important;
    position: relative;
    overflow: hidden;
}

/* 메인 이미지 - 배경으로 배치 (세컨더리 이미지가 있는 아이템만) */
.nectar-post-grid-item__has-secondary .nectar-post-grid-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.nectar-post-grid-item__has-secondary .nectar-post-grid-item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 호버 효과 - 이미지 전환 (세컨더리 이미지가 있는 아이템만) */
.nectar-post-grid-item__has-secondary:hover .nectar-post-grid-item__overlaid-img {
    opacity: 1;
}

.nectar-post-grid-item__has-secondary:hover .nectar-post-grid-item-bg {
    opacity: 0;
}

/* ================================== 
   PRODUCT / DEFAULT / DETAIL  
   ================================== */

/* 디테일 페이지 전용 변수 */
:root {
  --detail-spec-label-w: 100px;
  --detail-spec-gap: 24px;
  --detail-spec-line: rgba(0,0,0,.08);
  --detail-spec-label: rgba(0,0,0,.85);
  --detail-spec-text: rgba(0,0,0,.85);
  --detail-spec-link: inherit;
  --detail-spec-link-hover: var(--nectar-accent-color);
}

/* 리스트 틀 + 위/아래 라인 */
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--detail-spec-line);
  border-bottom: 1px solid var(--detail-spec-line);
}

/* 행: 2열 그리드 (좌 라벨 / 우 값) */
.spec-item {
  display: grid;
  grid-template-columns: var(--detail-spec-label-w) 1fr;
  column-gap: var(--detail-spec-gap);
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--detail-spec-line);
}

.spec-item:first-child {
  border-top: 0;
}

/* 좌/우 텍스트 */
.spec-label {
  font-weight: 600;
  color: var(--detail-spec-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spec-value {
  color: var(--detail-spec-text);
  min-width: 0;
  line-height: 1.45;
}


/* 기존 언더라인 버튼도 유지 (필요시) */
.spec-item .nectar-button-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--detail-spec-link);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
}

.spec-item .nectar-button-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--detail-spec-link-hover);
  transition: width 0.3s ease;
}

.spec-item .nectar-button-underline:hover::after {
  width: 100%;
}

.spec-item .nectar-button-underline:hover {
  color: var(--detail-spec-link-hover);
}

/* 디테일 페이지 반응형 */
@media (max-width: 768px) {
  :root {
    --detail-spec-label-w: 80px;
    --detail-spec-gap: 16px;
  }
  
  .spec-item {
    padding: 12px 0;
  }
}


/* ==========================================
Post Loop Builder - 모바일에서도 인라인 필터  
============================================= */
@media only screen and (max-width: 999px) {
  .mobile-inline-filter .nectar-post-grid-filters h4 {
    display: none !important; /* 토글 버튼 숨김 */
  }

  .mobile-inline-filter .nectar-post-grid-filters div {
    display: block !important; /* 필터 목록 항상 노출 */
    margin-top: 0 !important;
  }

  .mobile-inline-filter .nectar-post-grid-filters {
    max-width: none;
    /*padding: 20px 0;*/
    text-align: left; /* PC와 동일하게 왼쪽 정렬 */
  }

  .mobile-inline-filter .nectar-post-grid-filters a {
    display: inline-block !important;
    line-height: 1.1;
  }
}