/* 폰트 적용 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Pretendard", sans-serif; }

.header { position: fixed; top: 0; width: 100%; z-index: 1000; background: #fff; }

/* 상단 유틸 바 */
.top-bar { background: #f8f9fa; border-bottom: 1px solid #eee; height: 40px; }
.top-bar .inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px; }
.top-bar a { font-size: 13px; color: #666; margin-left: 15px; }

/* 메인 헤더 */
.header-main { position: relative; border-bottom: 1px solid #eee; }
.header-main .inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; height: 80px; padding: 0 20px; }

.logo a { font-size: 24px; font-weight: 800; color: #0046A0; }

.gnb .depth1 { display: flex; margin-left: 80px; }
.gnb .depth1 li a { display: block; padding: 0 30px; font-size: 18px; font-weight: 700; color: #333; line-height: 80px; }

/* 전체 펼침 서브메뉴 디자인 */
.gnb-depth2-wrap {
  position: absolute; top: 80px; left: 0; width: 100%; background: #fff;
  border-top: 1px solid #eee; border-bottom: 2px solid #0046A0;
  height: 0; overflow: hidden; transition: 0.3s ease; /* 부드럽게 내려오는 효과 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 마우스 올렸을 때의 동작 */
.header-main:hover .gnb-depth2-wrap { height: 280px; }

.depth2-list { max-width: 1200px; margin: 0 auto; display: flex; padding: 30px 20px 40px 300px; }
.depth2-list li { width: 200px; display: flex; flex-direction: column; gap: 10px; }
.depth2-list li a { font-size: 15px; color: #666; transition: 0.2s; }
.depth2-list li a:hover { color: #0046A0; font-weight: 600; text-decoration: underline; }

/* PC/모바일 표시 제어 */
.pc-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 1024px) {
  .pc-only { display: none !important; }
  .mobile-only { display: block !important; }
  
  /* 모바일 햄버거 버튼 스타일 */
  .btn-menu-open { width: 30px; height: 24px; position: relative; background: none; border: none; cursor: pointer; }
  .btn-menu-open span { display: block; width: 100%; height: 2px; background: #333; margin-bottom: 6px; transition: 0.3s; }
  
  /* 모바일 메뉴 슬라이드 */
  .mobile-menu { position: fixed; top: 0; right: -100%; width: 85%; height: 100%; background: #fff; z-index: 1100; transition: 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
  .mobile-menu.active { right: 0; }
  .m-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 1050; }
  
  /* 모바일 탭 레이아웃 */
  .m-menu-body { display: flex; height: calc(100% - 150px); }
  .m-tab-nav { width: 35%; background: #F4F5F7; }
  .m-tab-nav li { padding: 20px 15px; border-bottom: 1px solid #eee; font-size: 15px; font-weight: 700; color: #666; cursor: pointer; }
  .m-tab-nav li.active { background: #fff; color: #0046A0; border-right: 2px solid #0046A0; }
  
  .m-tab-content { width: 65%; padding: 15px; overflow-y: auto; }
  .tab-pane { display: none; }
  .tab-pane.active { display: flex; flex-direction: column; }
  .tab-pane a { padding: 15px 10px; border-bottom: 1px solid #f5f5f5; font-size: 14px; color: #333; }
}

.quick-menu-wrap { background: #fff; border-bottom: 1px solid #e5e5e5; }
  .quick-menu-inner { max-width: 1200px; margin: 0 auto; display: flex; }
  .quick-item { flex: 1; text-align: center; padding: 22px 0; border-right: 1px solid #e5e5e5; transition: background-color 0.2s; text-decoration: none; }
  .quick-item:first-child { border-left: 1px solid #e5e5e5; }
  .quick-item:hover { background: #f8f9fa; }
  .quick-title { font-size: 16px; font-weight: 700; color: #333; transition: color 0.2s; }
  .quick-item:hover .quick-title { color: #0046A0; }

  /* 모바일에서는 2개씩 줄바꿈되도록 깔끔하게 처리 */
  @media (max-width: 768px) {
    .quick-menu-inner { flex-wrap: wrap; }
    .quick-item { flex: 0 0 50%; border-bottom: 1px solid #e5e5e5; border-left: none !important; border-right: 1px solid #e5e5e5; }
    .quick-item:nth-child(2n) { border-right: none !important; }
  }

.brands-wrap { max-width: 1200px; margin: 40px auto 60px; padding: 0 20px; }
  .brands-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #0046A0; padding-bottom: 12px; margin-bottom: 20px; }
  .brands-title { font-size: 18px; font-weight: 800; color: #111; margin: 0; }
  .brands-list { display: flex; gap: 20px; flex-wrap: wrap; }
  .brand-item { flex: 1; min-width: calc(25% - 15px); height: 90px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; background: #fff; text-decoration: none; transition: all 0.2s; }
  .brand-item:hover { border-color: #0046A0; box-shadow: 0 4px 10px rgba(0,70,160,0.1); transform: translateY(-3px); }
  .brand-name { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
  
  /* 브랜드별 포인트 컬러 */
  .color-spinzone { color: #0046A0; }
  .color-fitrex { color: #333; }
  .color-shipperman { color: #E5001A; }
  .color-oem { color: #666; }

  @media (max-width: 768px) {
    .brand-item { min-width: calc(50% - 10px); }
  }

/* 메인 배너 슬라이드 스타일 */
.banner-carousel { position: relative; overflow: hidden; width: 100%; }
.banner-carousel .carousel-slide { display: none; width: 100%; animation: fade 0.8s; }
.banner-carousel .carousel-slide.is-active { display: block; }
.site-banner-link img { width: 100%; display: block; object-fit: cover; }

@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}