/* =====================================================================
   custom.css  (Eyoom/그누 테마 커스터마이징)
   - 컨테이너 폭 조정
   - 좌우 사이드 배너
   - 헤더/드롭다운 겹침(밀림 방지)
   - 로그인 패널 폭 축소 방지
   ===================================================================== */

/* ===== 컨테이너 가로폭(데스크톱) 1000px로 고정 ===== */
@media (min-width: 1200px){
  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1000px !important;
  }
}

/* ===== 헤더 컨테이너는 원래 폭 유지(1140/1320) ===== */
@media (min-width:1200px){
  #hd .container,
  .eb-header .container,
  header .container,
  .header .container {
    max-width: 1140px !important;
  }
}
@media (min-width:1400px){
  #hd .container,
  .eb-header .container,
  header .container,
  .header .container {
    max-width: 1320px !important;
  }
}

/* =====================================================================
   좌우 사이드 배너
   ===================================================================== */
.side-banner{
  position: fixed;
  top: 250px;                /* 헤더와 겹치면 이 값만 조절 */
  width: 150px;
  z-index: 1000;             /* 헤더/드롭다운보다 낮게 */
}
.side-banner a,
.side-banner img { display:block; width:100%; height:auto; }

/* 본문(1000px) 기준에서 좌/우로 650px 이동  absolute fixed */
.side-banner.left{
  position: absolute !important;	
  left: 50%;
  margin-left: -648px;       /* 500(본문 반) + 150(배너폭) */
}
.side-banner.right{
  position: absolute !important;
  right: 50%;
  margin-right: -648px;
}

/* 1300px 이하에서는 미출력 */
@media (max-width:1300px){
  .side-banner{ display:none !important; }
}
.side-banner {
  transition: opacity .3s ease, transform .3s ease;
}
.side-banner.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px); /* 자연스럽게 밑으로 사라지는 효과 */
}

/* =====================================================================
   헤더/카테고리 레이어 우선순위 & 잘림 방지
   ===================================================================== */
#hd, .eb-header, .header, .gnb, .category, .category-wrap {
  position: relative !important;
  z-index: 2000 !important;
  overflow: visible !important;         /* 드롭다운 잘림 방지 */
}

/* 상단 네비가 flex일 때 줄바꿈/축소 방지(필요한 경우만 적용됨) */
.header-nav,
.gnb .gnb-wrap,
.category .category-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* =====================================================================
   드롭다운(추가메뉴/로그인 등) – 겹쳐뜨게 & 밀림/축소 방지
   ===================================================================== */

/* 드롭다운 트리거(.dropdown)는 기준 컨테이너 */
#hd .dropdown, .eb-header .dropdown, .header .dropdown,
.gnb .dropdown, .category .dropdown {
  position: relative !important;
}

/* 공통 드롭다운 박스 */
#hd .dropdown .dropdown-menu,
.eb-header .dropdown .dropdown-menu,
.header .dropdown .dropdown-menu,
.gnb .dropdown .dropdown-menu,
.category .dropdown .dropdown-menu {
  position: absolute !important;        /* 문서 흐름에서 제거 → 본문 밀림 방지 */
  top: 100% !important;                 /* 버튼 바로 아래 */
  right: 0 !important;                  /* 오른쪽 정렬(필요시 left:0로 변경) */
  z-index: 3000 !important;             /* 헤더보다 위 */
  min-width: 320px !important;          /* 좁아지는 문제 방지 */
  max-width: none !important;
  box-sizing: border-box !important;
  transform: none !important;           /* Popper/Bootstrap translate 제거 */
  /* display는 JS가 제어하므로 강제 지정 불필요. 특정 테마는 필요시 block */
}

/* flex 컨테이너 내에서 드롭다운 박스 축소 방지 */
#hd .dropdown .dropdown-menu,
.eb-header .dropdown .dropdown-menu,
.header .dropdown .dropdown-menu {
  flex: 0 0 auto !important;            /* shrink 0 취지 */
}

/* =====================================================================
   로그인 패널(폭 넉넉히) – 실제 클래스에 맞춰 우선 적용
   - 개발자도구(F12)로 확인한 로그인 드롭다운 래퍼 클래스가 있으면 아래에 추가
   ===================================================================== */
#hd .dropdown-menu.login,
#hd .member-login .dropdown-menu,
.eb-header .dropdown-menu.login,
.header .dropdown-menu.login,
.dropdown-menu.member-login,
.dropdown-menu.hd-login-box {
  width: 340px !important;
  min-width: 320px !important;
  flex: 0 0 340px !important;
}

/* 폼 요소는 100% 채움 */
#hd .dropdown-menu input,
#hd .dropdown-menu button,
#hd .dropdown-menu .form-control,
.header .dropdown-menu input,
.header .dropdown-menu button,
.header .dropdown-menu .form-control {
  width: 100% !important;
}

/* 아이콘/라벨이 줄바꿈되며 폭을 밀어내는 테마 대응 */
#hd .dropdown-menu .row,
.header .dropdown-menu .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =====================================================================
   보완: 특정 테마에서 드롭다운 조상에 overflow:hidden 있는 경우 대비
   ===================================================================== */
#hd *, .header *, .gnb *, .category * {
  /* 필요시 개별 요소에만 지정하세요. 전역 지정은 과할 수 있음 */
  /* overflow: visible !important; */
}

/* =====================================================================
   모바일 대응(선택)
   ===================================================================== */
@media (max-width: 768px){
  /* 로그인/큰 드롭다운은 화면 폭에 맞게 */
  #hd .dropdown-menu,
  .header .dropdown-menu {
    right: 8px !important;
    left: auto !important;
    min-width: min(92vw, 360px) !important;
    width: auto !important;
  }
}

.half-space {
  height: 0.5em;  /* 글자 크기의 절반만큼 간격 */
}
/* 버튼 공통: 기존 230px → 180px로 축소 */
#sit_ov_btn #sit_btn_buy,
#sit_ov_btn #sit_btn_cart {
  width: 150px !important;
  min-width: 0 !important;       /* 혹시 프레임워크가 min-width 주면 무력화 */
  box-sizing: border-box;
  font-size: 15px;                /* 필요 시 글자도 살짝 축소 */
  padding-left: 14px; padding-right: 14px;
}

/* ‘이 상품 문의하기’는 더 작게 */
#sit_ov_btn #sit_btn_inquiry {
  display: inline-block;
  width: 110px !important;
  height: 45px;                   /* 살짝 더 낮게 */
  line-height: 46px;
  margin-left: 25px;               /* 장바구니 오른쪽에 붙일 때 여백 */
  border: 1px solid #3f4678;
  color: #3f4678;
  background: #fff;
  font-weight: 700;
  text-align: center;
  float: none !important;
}

/* 모바일 구간에서 너무 커 보이면 추가로 더 줄임(선택) */
@media (max-width: 1199px){
  #sit_ov_btn #sit_btn_buy,
  #sit_ov_btn #sit_btn_cart { width: 160px !important; }
  #sit_ov_btn #sit_btn_inquiry { width: 140px !important; }
}

/* header 고정 테이블용 */
.table_f {border-collapse: collapse; border:1px solid #E5E5E5; border-spacing: 0px; table-layout:fixed;}
.table_f th {background-color: #FDFCFD; font-weight: bold; border:1px solid #E5E5E5;padding:3px 0px 3px 0px;}	
.table_f td {border:1px solid #F7F7F7; border-bottom:1px solid #E5E5E5; overflow:hidden;text-overflow: ellipsis;white-space:nowrap;text-align:center;padding:4px 0px 4px 0px;}
.table_f tr:hover {background-color: #edf6e1;}
.table_f td:hover {font-weight: bold;white-space: normal; overflow: visible;text-shadow: 0px 0px 5px #FF8080;z-index: 101;}

/* 페이징 버튼 */
.btn_page_select {display:inline-block;background-color:#3F96FD;border:1px solid #3F96FD;font-size:8pt;font-weight:bold;color:#FFFFFF;border-radius:4px;padding:4px 7px 4px 7px;margin:1px;text-align:center;}
.btn_page {display:inline-block;background-color:#FFFFFF;border:1px solid #EAEAEA;font-size:8pt;color:#373842;border-radius:4px;padding:4px 7px 4px 7px;margin:1px;text-align:center;}
.btn_page:hover {background-color:#EAEAEA;}

/* 검색 및 취소 버튼 */
.btn_search {height:21px;font-size:9pt;padding:0px 5px 0px 5px;background-color:#D9D9D9;border:1px solid #808080;font-weight:bold;border-radius:3px;cursor:pointer;}
.btn_search:hover {background-color:#F1F1F1;}
.btn_search_cancel {height:21px;font-size:9pt;padding:0px 5px 0px 5px;background-color:#ECECEC;border:1px solid #808080;border-radius:3px;cursor:pointer;}
.btn_search_cancel:hover {background-color:#F7F7F7;}

/* 기본 버튼 */
.btn_basic {
  height: 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 8pt;
  font-weight: bold;
  color: #FFFFFF;
  cursor: pointer;
  background-color: #008000;
}
.btn_basic:hover {
  filter: saturate(1.5);
}