/* ========================================
   Right Navigation V2 - 세련된 퀵메뉴
   Glassmorphism, Minimal, Smooth
   모든 클래스명 -v2 접미사로 독립화
   ======================================== */

/* ==========================================
   V2 네비게이션 고립화 - 최소 리셋
   ========================================== */

/* 모든 하위 요소 기본 스타일 - 전역 reset 차단 */
#nav-v2,
#nav-v2 *,
#nav-v2 *::before,
#nav-v2 *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* 네비게이션 루트 요소 스타일 */
#nav-v2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-weight: 400;
  vertical-align: baseline;
  line-height: 1;
  letter-spacing: normal;
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001; /* 헤더(1000)보다 높게 */
}

/* 링크 기본 스타일 - 전역 a 스타일 차단 */
#nav-v2 a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  vertical-align: baseline;
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* 이미지 기본 스타일 - 전역 img 스타일 차단 */
#nav-v2 img {
  margin: 0;
  padding: 0;
  border: 0;
  border-style: none;
  vertical-align: middle;
  font-size: inherit;
}

/* btn 클래스 기본 스타일 - 전역 [class|='btn'] 선택자 차단 */
/* [class|='btn']은 클래스가 정확히 'btn' 또는 'btn-'으로 시작하는 요소만 매칭 */
#nav-v2 [class|='btn'] {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box !important;
  text-decoration: none;
  background-color: transparent;
  color: inherit;
  font-weight: inherit;
  text-align: inherit;
  vertical-align: baseline;
  box-shadow: none;
  white-space: normal;
}

/* btn 호버 시 검은색 오버레이 차단 */
#nav-v2 [class|='btn']::after,
#nav-v2 [class|='btn']:hover::after,
#nav-v2 [class|='btn']:focus::after {
  content: none !important;
  display: none !important;
}

/* 리스트 기본 스타일만 제거 */
#nav-v2 ul,
#nav-v2 ol {
  list-style: none;
}

#nav-v2 li::before,
#nav-v2 li::after {
  content: none;
  display: none;
}

/* ==========================================
   1. 기본 컨테이너
   ========================================== */

/* ==========================================
   2. 퀵메뉴 컨테이너
   ========================================== */

#nav-v2 .quick-menu-v2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  width: 90px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 14px;
  border: 1px solid #DFE0DA;
}

/* ==========================================
   3. 퀵메뉴 아이템
   ========================================== */

#nav-v2 .quick-item-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 70px;
  padding: 12px 8px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#nav-v2 .quick-item-v2:hover {
  background: rgba(64, 133, 255, 0.08);
  transform: translateY(-2px);
}

/* 아이콘 */
#nav-v2 .quick-icon-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

#nav-v2 .quick-item-v2:hover .quick-icon-v2 {
  transform: scale(1.1);
}

#nav-v2 .quick-icon-v2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}

#nav-v2 .quick-icon-v2 svg {
  width: 20px;
  height: 20px;
  color: #4085FF;
  transition: color 0.3s ease;
}

/* 라벨 */
#nav-v2 .quick-label-v2 {
  font-size: 12px;
  font-weight: 500;
  color: #373535;
  white-space: nowrap;
  margin-top: 6px;
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;
}

#nav-v2 .quick-item-v2:hover .quick-label-v2 {
  color: #4085FF;
}

/* ==========================================
   4. TOP 버튼 특별 스타일
   ========================================== */

#nav-v2 .quick-top-v2 {
  background: linear-gradient(135deg, #4085FF 0%, #5B9EFF 100%);
}

#nav-v2 .quick-top-v2:hover {
  background: linear-gradient(135deg, #2d6fe6 0%, #4085FF 100%);
  transform: translateY(-2px);
}

#nav-v2 .quick-top-v2 .quick-icon-v2 svg {
  color: #ffffff;
}

#nav-v2 .quick-top-v2 .quick-label-v2 {
  color: #ffffff;
  font-weight: 600;
}

#nav-v2 .quick-top-v2:hover .quick-label-v2 {
  color: #ffffff;
}

/* ==========================================
   5. 구분선
   ========================================== */

#nav-v2 .quick-divider-v2 {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e0e0e0 50%, transparent 100%);
  margin: 4px 0;
}

/* ==========================================
   6. 추천 장바구니 버튼
   ========================================== */

#nav-v2 .quick-direct-cart-wrapper-v2 {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
}

#nav-v2 .direct-cart-btn-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  min-height: 50px;
  padding: 8px;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

#nav-v2 .direct-cart-btn-v2:hover {
  background: linear-gradient(135deg, #e65c5c 0%, #FF6B6B 100%);
  transform: translateY(-2px);
}

#nav-v2 .direct-cart-icon-v2 {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

#nav-v2 .direct-cart-text-v2 {
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 4px;
  white-space: nowrap;
}