/* BASIC css start */
/* ==========================================
   Global & Header Base Styles (Fixed Top Navigation)
   ========================================== */

/* fixed 헤더로 인해 본문 컨텐츠가 가려지지 않도록 상단 여백 확보 */
body {
  padding-top: 60px !important;
}

#site-header {
  position: fixed; /* 화면 상단에 완벽 고정 */
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1024px;
  background-color: #0d0d0d; /* 미니멀 블랙 배경 */
  border-bottom: 1px solid #1f1f1f;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Pretendard", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-sizing: border-box;
}

#site-header *,
#site-header *::before,
#site-header *::after,
.search-modal-overlay * {
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 40px;
  max-width: 1920px;
  margin: 0 auto;
}

/* 텍스트 줄바꿈 방지 공통 규칙 */
#site-header a,
#site-header li,
#site-header span,
#site-header button {
  white-space: nowrap;
}

/* 헤더 공통 링크 스타일 */
#site-header a {
  color: #ffffff; /* 화이트 폰트 */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

#site-header a:hover {
  opacity: 0.5;
}

/* ------------------------------------------
   1. Left Section (Logo + Nav)
   ------------------------------------------ */
.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

/* 로고 (HAVEN 스타일: 좌측 배치) */
.header-logo a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #ffffff;
  display: inline-block;
}

/* 메인 메뉴 */
.nav-main .main-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  height: 60px;
  display: flex;
  align-items: center;
}

.menu-link {
  font-weight: 500;
}

/* ------------------------------------------
   Full-Width Dropdown Panel (White Theme)
   ------------------------------------------ */
.has-dropdown {
  position: static;
}

.dropdown-panel {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100vw;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 36px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  z-index: 999;
}

.dropdown-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 대분류 가로 그리드 정렬 */
.main_m {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 30px 24px;
}

.cate-group {
  display: flex;
  flex-direction: column;
}

/* 대분류 제목 */
.cate1-title {
  font-weight: 700 !important;
  color: #111111 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
}

/* 중분류 세로 리스트 */
.sub_m {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub_m a {
  font-weight: 400 !important;
  color: #666666 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em;
  display: inline-block;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sub_m a:hover {
  color: #000000 !important;
  transform: translateX(3px);
}

/* SHOP 호버 시 드롭다운 패널 열기 */
.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}





/* ------------------------------------------
   2. Right Section & Search Overlay Modal
   ------------------------------------------ */
   
 .search-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}  
   
.header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-right .utility-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.util-item {
  display: flex;
  align-items: center;
  color: #ffffff;
}

/* 돋보기 검색 버튼 */

/* search-modal-overlay에 active 클래스가 들어갔을 때 강력하게 강제 표시 */
.search-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.search-trigger-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: opacity 0.2s ease;
}

.search-trigger-btn:hover {
  opacity: 0.5;
}

/* ------------------------------------------
   Cart Red Badge (2/3 미니 사이즈 & 자동 0 표기)
   ------------------------------------------ */
.cart-link {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;        /* 2/3 사이즈 (12px) */
  height: 12px;
  padding: 0 3px;
  background-color: #ff3b30;
  color: #ffffff !important;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50px;
  letter-spacing: 0;
  box-shadow: 0 2px 4px rgba(255, 59, 48, 0.25);
  transition: transform 0.2s ease;
}

/* ★ 핵심: 치환값이 빈값(null)일 때 자동으로 "0"을 출력해 줍니다 ★ */
.cart-badge:empty::before {
  content: "0";
}

.cart-link:hover .cart-badge {
  transform: scale(1.15);
}

/* ==========================================
   3. Search Overlay Modal (풀스크린/레이어)
   ========================================== */

.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 140px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.search-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-modal-container {
  position: relative;
  width: 100%;
  max-width: 650px;
  padding: 0 20px;
}

.close-search-btn {
  position: absolute;
  top: -60px;
  right: 20px;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.close-search-btn:hover {
  opacity: 0.6;
  transform: rotate(90deg);
}

.search-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-modal-title {
  color: #777777;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin: 0;
  font-weight: 500;
}

.search-modal-form {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 8px;
}

.modal-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;
}

.modal-input::placeholder {
  color: #444444;
}

.modal-submit-btn {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.modal-submit-btn:hover {
  opacity: 0.5;
}




/* ==========================================
   [완전 해결본] 슬라이드 장바구니 레이어 CSS
   ========================================== */

/* ★ 장바구니 열렸을 때 메인 전체 스크롤바 강제 숨김 클래스 */
body.cart-drawer-opened {
  overflow: hidden !important;
}

/* 1. 어두운 배경 딤 */
#cartDrawerBg {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 99998 !important;
}

/* 2. 슬라이드 서랍 레이어 (가로 1150px) */
#cartDrawer {
  position: fixed !important;
  top: 0 !important;
  right: -1150px !important;
  width: 1150px !important;
  max-width: 100% !important;
  height: 100% !important;
  background: #ffffff !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  padding: 20px 20px 0 20px !important;
  transition: right 0.3s ease-in-out !important;
  box-shadow: -5px 0 25px rgba(0,0,0,0.15) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3. 장바구니 열렸을 때 */
#cartDrawer.is-active {
  right: 0 !important;
}

/* 4. 상단 헤더 */
.cart-drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 15px !important;
  border-bottom: 2px solid #111111 !important;
  flex-shrink: 0 !important;
}

.cart-drawer-header h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #111111 !important;
}

#cartDrawerClose {
  background: none !important;
  border: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #111111 !important;
  padding: 0 5px !important;
}

/* 5. 아이프레임 영역 (지저분한 하단 스크롤 방지를 위해 overflow auto 제어) */
.cart-drawer-content {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#cartIframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* ★ 내부 세로 스크롤만 안전하게 허용 */
}


/* ==========================================
   장바구니 레이어 및 내부 가로 스크롤바 강제 제거
   ========================================== */

/* 1. 레이어 박스 자체의 가로 스크롤 차단 */
#cartDrawer {
  overflow-x: hidden !important;
}

/* 2. 아이프레임 영역 가로 스크롤 차단 */
.cart-drawer-content, 
#cartIframe {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* 3. (핵심) 장바구니 페이지 내부의 전체 가로 스크롤 강제 차단 */
#cartDrawer iframe {
  width: 100% !important;
}
/* BASIC css end */