/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.20.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


/* ================================
   Product Anchor Tabs — FINAL
   (Flatsome · Single Product only)
   ================================ */

/* A. sticky가 막히지 않도록 조상 속성 해제 (single-product 범위로 한정) */
.single-product .product-container,
.single-product .product-main,
.single-product .product-footer,
.single-product .product-container .container,
.single-product .product-container .row,
.single-product .product-container .col {
  overflow: visible !important;
  transform: none !important;
}

/* B. 탭바 래퍼: 상단 부착 + 풀폭 + 반투명 배경 */
.single-product .fm-tabs-outer{
  position: -webkit-sticky; position: sticky;
  top: var(--fm-sticky-top, 0px);
  z-index: 1000;
  left: 0; right: 0; width: auto;            /* 왼쪽 쏠림/폭변경 방지 */
  transform: none;
  background: rgba(255,255,255,.70);         /* 반투명 전체 배경 */
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.06);
}

/* C. 내부 래퍼는 완전 투명 (반투명은 바깥 래퍼만) */
.single-product .fm-tabs-outer .container,
.single-product .fm-tabs-outer .row,
.single-product .fm-tabs-outer .col,
.single-product .fm-tabs-outer .col-inner,
.single-product .fm-tabs{
  background: transparent !important;
  box-shadow: none !important;
}

/* D. 탭 줄 */
.single-product .fm-tabs{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 16px);
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* E. 버튼: 배경/테두리/의사요소 제거 + 활성 탭 표시 */
.single-product .fm-tabs .button,
.single-product .fm-tabs .button:hover,
.single-product .fm-tabs .button:focus,
.single-product .fm-tabs .button:active{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin: 0 !important;                      /* 전역 margin-bottom 보정 */
  display: inline-flex; white-space: nowrap;
  padding: 12px 18px; font-weight: 600;
  border-bottom: 3px solid transparent;
  color: #111;
}
.single-product .fm-tabs .button::before,
.single-product .fm-tabs .button::after{
  display: none !important; content: none !important;
}
.single-product .fm-tabs .button.is-active{
  border-bottom-color: #4B54FF !important;
}

/* F. 모바일 보정 */
@media (max-width: 549px){
  .single-product .fm-tabs{ gap: 12px; }
  .single-product .fm-tabs .button{ padding: 10px 14px; font-size: .95rem; }
}

/* ▶ 탭바를 화면 가로로 꽉 차게(풀블리드) — 흔들림 없이 안정 */
.single-product .fm-tabs-outer{
  /* 기존 sticky/투명/그림자 값은 유지되고, 폭/정렬만 오버라이드 */
  left:auto; right:auto; transform:none;          /* translateX hack 금지 */
  width:100vw; max-width:100vw; box-sizing:border-box;
  margin-left: calc(50% - 50vw);                  /* 뷰포트 좌측에 정확히 맞춤 */
  margin-right: calc(50% - 50vw);                 /* 뷰포트 우측에 정확히 맞춤 */

  /* iOS 세이프에어리아 + 약간의 좌우 여백(원하면 숫자 줄여도 됨) */
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* 풀블리드가 바깥으로 1px 튀어나가 생기는 가로 스크롤 방지 */
.single-product{ overflow-x: clip; }  /* (hidden 말고 clip: 레이아웃 점프 없음) */

/* 스티키 탭: 관리자바 + 안전영역 합산하여 정확히 상단 부착 */
.single-product .fm-tabs-outer{
  top: calc(var(--fm-sticky-top, 0px) + env(safe-area-inset-top, 0px)) !important;
  margin-top: 0 !important; /* 혹시 모를 상단 여백 차단 */
}

/* 기본: 밑줄 공간은 box-shadow로 컨트롤 (border 사용 안 함) */
.single-product .fm-tabs a.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  box-shadow: inset 0 -0px 0 0 transparent !important; /* ← 밑줄 기본 감춤 */
  outline:0 !important;
  font-weight:600;
  color:#333 !important;         /* 기본 글자색 */
  padding:12px 18px;
  transition: color .25s ease, box-shadow .2s ease;
}

/* 데스크탑 호버: 텍스트 색상은 그대로, 밑줄만 표시 */
@media (hover:hover){
  .single-product .fm-tabs a.button:hover{
    box-shadow: inset 0 -4px 0 0 #4B54FF !important;  /* ← 밑줄 */
  }
}

/* 활성 탭: 색상 변경 + 볼드 강화 */
.single-product .fm-tabs a.button.is-active{
  color:#4B54FF !important;
  font-weight:800 !important;       /* ← 기존보다 더 볼드 */
  box-shadow: inset 0 -0px 0 0 transparent !important; /* 활성 상태는 밑줄 없음 */
}



/* 상품 상세 — 파란 패널(오프캔버스)의 그림자 제거 */
body.single-product .preorder-offcanvas,
body.single-product .preorder-offcanvas.is-active {
  box-shadow: none !important;         /* 외곽 그림자 제거 */
  filter: none !important;             /* 혹시 남는 drop-shadow 대비 */
}