/* 
 * AutoLease Brand System v2
 * Palette: ColorHunt #0B2D72 / #0992C2 / #0AC4E0 / #F6E7BC
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

:root {
  /* === Sinchamong Blue Palette ===
   * #0F172A → Slate Dark (다크 백그라운드, 깊은 다크 텍스트)
   * #1E40AF → Royal Blue (브랜드 메인 대표색)
   * #2563EB → Bright Blue (메인 포인트, 주요 버튼)
   * #60A5FA → Light Blue (강조 배지, 테두리 등)
   */
  --cb-navy:       #0F172A;   /* 슬레이트 다크: 헤더BG, 텍스트 */
  --cb-blue:       #1E40AF;   /* 로열 블루: GNB 호버, 링크 */
  --cb-primary:    #2563EB;   /* 브라이트 블루: 주 버튼, 액센트 */
  --cb-accent:     #60A5FA;   /* 라이트 블루: 배지, 보더 등 */
  --cb-orange:     #F97316;   /* 엠버 오렌지: 핵심 CTA 버튼, 하이라이트 */
  --cb-gold:       #F59E0B;   /* 엠버 골드: 특가 뱃지, 강조 포인트 */
  --cb-mint-bg:    #EFF6FF;   /* 스카이 블루 라이트 (기존 민트색 배경 오버라이드) */
  --cb-blue-light: #DBEAFE;   /* 초경량 스카이블루 (배지 등 강조용) */

  /* Neutral */
  --cb-black:      #0F172A;
  --cb-gray-dark:  #334155;   /* Slate 700 */
  --cb-gray:       #64748B;   /* Slate 500 */
  --cb-gray-light: #94A3B8;   /* Slate 400 */
  --cb-border:     #E2E8F0;   /* Slate 200 */
  --cb-bg-light:   #F8FAFC;   /* Slate 50 */
  --cb-white:      #ffffff;

  /* Shadows (slate base) */
  --cb-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --cb-shadow:    0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
  --cb-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);

  /* Layout */
  --cb-radius:      12px;
  --cb-radius-pill: 9999px;
  --cb-max-width:   1200px;

  --cb-header-top: 70px;
  --cb-header-gnb: 44px;
}

/* === HEADER OVERRIDE (style.css 간섭 방지) === */
#header {
  height: auto !important;
  overflow: visible !important;
  transition: none !important;
}

/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  overflow-x: hidden;
  width: 100%;
}
body {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  font-size: 14px;
  color: #666;
  background: var(--cb-white);
  line-height: 1.6;
  font-weight: 500;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--cb-header-top) + var(--cb-header-gnb));
}
.m_gnb_top_area { display: none; }
a { text-decoration: none; color: inherit; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
img { max-width: 100%; height: auto; vertical-align: middle; }

.w_inner {
  max-width: var(--cb-max-width);
  margin: 0 auto;
  padding: 0 20px; /* 1200px 내에서 적절한 여백 */
  width: 100%;
}

/* === HEADER - Carbay Style: White Top + Navy GNB === */
#header, .pm-header, #pm-header {
  position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important;
  background: #fff !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(11, 45, 114, 0.12) !important;
}

/* 상단 로고+검색+유틸 영역: 흰색 */
.hd_top_wrap {
  height: var(--cb-header-top);
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--cb-border);
}
.hd_top_wrap .w_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
}

.brand_logo a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 900;
  color: var(--cb-navy);
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0; padding: 0;
  white-space: nowrap;
}
.brand_logo a span { color: var(--cb-blue); }
/* 이미지 로고 표시 허용 */
.brand_logo img { display: block !important; height: 75px; width: auto; object-fit: contain; }
.brand_logo i { display: none !important; }
#header h1 a, #header.on h1 a, #header:hover h1 a {
  background: none !important;
  height: auto;
  min-width: unset;
}

/* HD SEARCH - Sophisticated Pill */
.hd_search_area {
  flex: 1;
  max-width: 580px;
  margin: 0 60px;
}
.hd_search_area .sch_box {
  display: flex;
  align-items: center;
  background: var(--cb-bg-light);
  border-radius: var(--cb-radius-pill);
  height: 48px;
  padding: 4px 4px 4px 20px;
  border: 1px solid var(--cb-border);
  transition: all 0.3s ease;
}
.hd_search_area .sch_box:focus-within {
  background: #fff;
  border-color: var(--cb-blue);
  box-shadow: 0 0 0 3px rgba(9, 146, 194, 0.15);
  transform: translateY(-1px);
}
.hd_search_area .sch_label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cb-navy);
  background: var(--cb-accent);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 12px;
  white-space: nowrap;
}
.hd_search_area input {
  background: none; border: 0;
  flex: 1; height: 100%;
  font-size: 15px; color: var(--cb-black);
  font-weight: 500;
  padding-bottom: 2px; /* 텍스트 살짝 아래로 조정 */
}
.hd_search_area input::placeholder { color: var(--cb-gray-light); }
/* HD UTILS - Premium Design */
.hd_top_utils { display: flex; align-items: center; gap: 12px; }

/* 신규: 신차몽매니저 리뷰 버튼 */
.btn_mgr_review {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: var(--cb-bg-light);
  color: var(--cb-navy) !important;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  font-size: 14px; font-weight: 700;
  transition: 0.3s;
}
.btn_mgr_review:hover {
  background: #fff;
  border-color: var(--cb-blue);
  box-shadow: 0 2px 8px rgba(11, 45, 114, 0.1);
}

.icon_btn_premium {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-blue) 100%);
  color: #fff !important;
  border-radius: var(--cb-radius);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(9, 146, 194, 0.3);
}
.icon_btn_premium .dot {
  width: 6px; height: 6px; background: #4ADE80;
  border-radius: 50%; display: block;
  box-shadow: 0 0 8px #4ADE80;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* 2. HD GNB: 카베이 스타일 - 네이비 배경 GNB 바 */
.hd_gnb_wrap {
  height: var(--cb-header-gnb);
  background: var(--cb-navy);
  position: relative;
  overflow: visible; /* 2차 메뉴가 보여야 하므로 visible */
}
.hd_gnb_wrap .w_inner {
  height: var(--cb-header-gnb);
  display: flex;
  align-items: center;
}

/* cb_gnb: 그누보드 JS 후킹 방지 전용 클래스명 */
.cb_gnb {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  margin: 0; padding: 0;
}
.cb_m1 { height: 100%; }
.cb_m1 > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cb-header-gnb);
  padding: 0 20px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;
  text-decoration: none;
  line-height: normal;
}
.cb_m1 > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 3px;
  background: var(--cb-accent);
  transition: all 0.25s;
  transform: translateX(-50%);
}
.cb_m1.active > a {
  background: rgba(255,255,255,0.15);
}
.cb_m1.active > a::after { width: 60%; }

/* 2차 메뉴: 카베이 스타일 (JS 없이 Absolute 제어) */
.cb_sub_layer {
  position: absolute;
  top: 100%; left: 0;
  width: 100%;
  background: var(--cb-gray-dark);
  box-shadow: 0 4px 15px rgba(0,0,0,0.22);
  z-index: 100;
  display: none;
}
.cb_m1.active .cb_sub_layer {
  display: block;
}
.cb_sub_list {
  list-style: none;
  display: flex;
  align-items: center;
  max-width: var(--cb-max-width);
  margin: 0 auto;
  padding: 0 40px;
  height: 50px;
}
.cb_sub_list li {
  flex: initial;
}
.cb_sub_list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  transition: 0.2s;
  text-decoration: none;
}
.cb_sub_list li a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* === Car Cards & Figures (Common) === */
.card_figure {
  position: relative;
  height: 180px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.card_figure .car_img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover Effects */
.card_popular:hover .car_img,
.car_card_premium:hover .car_img {
  transform: scale(1.08) translateY(-5px);
}


#footer {
  background: var(--cb-navy);
  color: rgba(255,255,255,0.65);
  padding: 50px 0 40px;
  font-size: 13px;
  line-height: 1.8;
}
.ft_top_links {
  display: flex;
  gap: 25px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ft_top_links a {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8);
}
.ft_top_links a:hover { color: var(--cb-accent); }
.ft_info_area { color: rgba(255,255,255,0.55); }
.ft_info_area strong { color: var(--cb-accent); margin-right: 8px; }
.ft_corp_info, .ft_address { margin-bottom: 4px; }
.ft_corp_info span, .ft_address span { margin-right: 5px; }
.ft_copy { margin-top: 20px; font-size: 12px; color: #555; }
.ft_copy b { color: #888; }

/* === MAIN SECTIONS === */
section { padding: 40px 0; }
section + section { border-top: 1px solid #f5f5f5; }

.section_header {
  text-align: center;
  margin-bottom: 40px;
}
.section_header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--cb-black);
  margin-bottom: 8px;
}
.section_header p {
  font-size: 15px;
  color: var(--cb-gray);
}

/* === CARDS === */
.card {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  overflow: hidden;
  transition: 0.25s;
}
.card:hover {
  box-shadow: var(--cb-shadow-hover);
  transform: translateY(-2px);
}

/* === SUB PAGE === */
.sub_title_wrap {
  height: 200px;
  background-color: var(--cb-navy);
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  color: #fff;
}
.sub_title_wrap h2 {
  font-size: 36px; font-weight: 800; margin-bottom: 8px;
}
.sub_title_wrap p {
  font-size: 15px; opacity: 0.7; letter-spacing: 1px;
}
.sub_content { padding: 0px !important; }
.page_title { margin-bottom: 30px; }
.page_title h3 { font-size: 24px; font-weight: 700; }
.page_content { min-height: 300px; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--cb-radius-pill);
  font-size: 15px;
  font-weight: 700;
  transition: 0.2s;
  cursor: pointer;
  border: 0;
}
.btn-primary { background: var(--cb-primary); color: #fff; }
.btn-primary:hover { background: var(--cb-blue); color: #fff; }
.btn-red { background: var(--cb-navy); color: #fff; }
.btn-red:hover { background: var(--cb-primary); color: #fff; }
.btn-outline { background: #fff; color: var(--cb-primary); border: 1px solid var(--cb-primary); }
.btn-outline:hover { background: var(--cb-primary); color: #fff; }

/* === MOBILE TOGGLE BUTTON === */
.btn_m_menu_toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}
.btn_m_menu_toggle .line {
  width: 100%;
  height: 2px;
  background-color: var(--cb-navy);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.btn_m_menu_toggle.active .line_01 {
  transform: translateY(8px) rotate(45deg);
}
.btn_m_menu_toggle.active .line_02 {
  opacity: 0;
}
.btn_m_menu_toggle.active .line_03 {
  transform: translateY(-8px) rotate(-45deg);
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 1024px) {
  body { padding-top: 60px; }
  :root {
    --cb-header-total: 60px;
    --cb-header-top: 60px;
  }
  .hd_top_wrap { height: 60px; }
  .hd_search_area, .hd_top_utils { display: none; }
  .brand_logo a { font-size: 22px; }
  .brand_logo img { height: 32px !important; }
  .brand_logo { padding: 5px 0 !important; }
  
  .btn_m_menu_toggle {
    display: flex;
  }
  
  .w_inner {
    padding: 0 10px; /* 모바일 여백 극대화 */
  }
  
  /* Mobile Menu Drawer Overlay */
  .hd_gnb_wrap {
    position: fixed;
    top: var(--cb-header-top);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--cb-header-top));
    background: var(--cb-navy);
    z-index: 1000;
    display: none;
    flex-direction: column;
    padding: 24px 15px;
    overflow-y: auto;
  }
  .hd_gnb_wrap.active {
    display: flex;
  }
  .hd_gnb_wrap .w_inner {
    height: auto !important;
    display: block !important;
    padding: 0 !important;
  }
  
  /* 모바일 GNB 상단 검색 및 유틸 */
  .m_gnb_top_area {
    display: block;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .m_gnb_search {
    margin-bottom: 15px;
  }
  .m_sch_box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--cb-radius-pill);
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .m_sch_box input {
    background: none;
    border: 0;
    flex: 1;
    height: 100%;
    font-size: 14px;
    color: #fff;
    padding-bottom: 2px;
  }
  .m_sch_box input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  .btn_m_sch {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
  }
  .m_gnb_utils {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .btn_m_mgr_review, .m_btn_premium {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    width: 100%;
  }
  .btn_m_mgr_review {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .m_btn_premium {
    background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-blue) 100%);
    color: #fff !important;
    gap: 6px;
  }
  .m_dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 8px #4ADE80;
    animation: pulse 2s infinite;
  }
  
  .cb_gnb {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
  }
  .cb_m1 {
    width: 100%;
    height: auto;
  }
  .cb_m1 > a {
    width: 100%;
    justify-content: flex-start;
    height: 50px;
    padding: 0 10px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cb_m1 > a::after {
    display: none;
  }
  .cb_m1.active > a {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cb-accent);
  }
  
  .cb_sub_layer {
    position: static;
    width: 100%;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.15);
    display: block;
    border-radius: 8px;
    margin-top: 5px;
  }
  .cb_sub_list {
    flex-direction: column;
    height: auto;
    padding: 8px 15px;
    align-items: flex-start;
  }
  .cb_sub_list li {
    width: 100%;
  }
  .cb_sub_list li a {
    height: 36px;
    padding: 0 10px;
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
  }
  .cb_sub_list li a:hover {
    background: none;
    color: #fff;
  }
  
  section { padding: 40px 0; }
  .section_header h2 { font-size: 22px; }
  
  .sub_title_wrap { height: 140px; }
  .sub_title_wrap h2 { font-size: 24px; }
  
  body.no_scroll {
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .w_inner, .inner {
    padding: 0 10px; /* 모바일 여백 극대화 */
    margin: 0 auto;
  }
  .car_card_grid {
    gap: 12px; /* 카드 사이 갭 12px로 축소 */
  }
  
  .sub_title_wrap h2 { font-size: 22px; }
  .ft_top_links { flex-wrap: wrap; gap: 12px; }
  
  /* 브랜드 슬라이더 모바일 조율 */
  .brand_directory_sec {
    padding: 24px 0;
  }
  .brand_swiper_outer {
    padding: 0 15px; /* 양옆 패딩을 축소하여 가로 공간 확보 */
  }
  .brand_badge_card {
    width: 85px; /* 카드 너비 소폭 축소 */
    padding: 10px 5px;
    gap: 6px;
    border-radius: 10px;
  }
  .brand_badge_card img {
    width: 48px;
    height: 48px;
  }
  .brand_badge_card span {
    font-size: 11px;
  }
  .brand-swiper-prev, .brand-swiper-next {
    display: none !important; /* 모바일에서는 화살표를 감추어 삐져나감 방지 및 스와이프 유도 */
  }
  
  /* 메인 슬라이더 인물 이미지 복원 및 텍스트 정렬 */
  .slide_car_visual {
    display: flex !important; /* display: none에서 강제 복원 */
    right: 10px;
    bottom: 0;
    width: 42%;
    height: 75%;
    opacity: 0.85;
  }
  .slide_car_visual img {
    transform: scale(1.15);
    transform-origin: bottom right;
  }
  .slide_content {
    text-align: left;
    align-items: flex-start;
    padding: 24px 15px;
    width: 100%;
    max-width: 62%; /* 인물 이미지 영역 확보를 위해 텍스트 너비 제한 */
  }
  .slide_item h2 {
    font-size: 26px;
  }
}

/* === Glassmorphism & Brand Directory Grid (Phase 10) === */
.glass_card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08) !important;
}

.brand_directory_sec {
  background: #ffffff;
  padding: 25px 0;
  border-bottom: 1px solid var(--cb-border);
}
.brand_dir_title {
  text-align: center;
  margin-bottom: 25px;
}
.brand_dir_title h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--cb-gray);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.brand_grid_inner {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 15px;
  max-width: var(--cb-max-width);
  margin: 0 auto;
}
.brand_badge_card {
  background: var(--cb-bg-light);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  padding: 18px 10px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand_badge_card:hover {
  background: #ffffff;
  border-color: var(--cb-primary);
  transform: translateY(-4px);
  box-shadow: var(--cb-shadow-lg);
}
.brand_badge_card .logo_symbol {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cb-border);
  box-shadow: var(--cb-shadow-sm);
}
.brand_badge_card .logo_symbol img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.brand_badge_card span {
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-black);
}

/* Responsive GNB and Grid adjustments */
@media (max-width: 1024px) {
  .brand_grid_inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .brand_grid_inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* === SUB PAGE BREADCRUMBS === */
.sub_breadcrumb_wrap {
  background: var(--cb-bg-light);
  border-bottom: 1px solid var(--cb-border);
  padding: 12px 0;
}
.sub_breadcrumb {
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-gray);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
}
.sub_breadcrumb a {
  color: var(--cb-gray);
  text-decoration: none;
  transition: color 0.2s;
}
.sub_breadcrumb a:hover {
  color: var(--cb-black);
}
.sub_breadcrumb span.active {
  color: var(--cb-primary);
  font-weight: 700;
}

/* =============================================
   SINCHAMONG MEGAMENU & MOBILE DRAWER (PETMOA PORTED)
   ============================================= */

/* PC Header layout adjustment */
.pm-header.scrolled .pm-headwrap {
  height: 55px;
  line-height: 55px;
}
.pm-header.scrolled .pm-logo a {
  height: 55px;
  line-height: 55px;
}
.pm-header.scrolled .pm-logo a img {
  height: 40px;
}

.pm-headwrap {
  position: relative;
  height: 70px;
  line-height: 70px;
  max-width: var(--cb-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pm-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.pm-logo a {
  display: inline-block;
  height: 70px;
  line-height: 70px;
}
.pm-logo a img {
  height: 58px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  transition: height 0.3s, transform 0.3s;
}

.pm-util {
  display: flex;
  align-items: center;
}
.pm-util ul {
  display: flex;
  gap: 20px;
  list-style: none;
}
.pm-util li a {
  font-size: 12px;
  color: var(--cb-gray);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.pm-util li a:hover {
  color: var(--cb-primary);
}

/* 실시간 출고후기 캡슐 뱃지 스타일 */
.pm-badge-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pm-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  height: 42px;
  background: var(--cb-orange);
  color: #fff !important;
  border-radius: var(--cb-radius-pill);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
  transition: all 0.2s;
  text-decoration: none;
}
.pm-badge-link:hover {
  transform: translateY(-2px);
  background: #ea580c;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
}
.pm-badge-link .live_dot {
  width: 7px;
  height: 7px;
  background: #4ADE80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ADE80;
  animation: pulse 2s infinite;
}

/* PC GNB Megamenu styling */
.pm-gnb {
  position: relative !important;
  background-color: #406093 !important; /* GNB 바 변경된 배경색 */
}
.pm-gnb-inner {
  max-width: var(--cb-max-width);
  margin: 0 auto;
  padding: 0 20px;
}
.pm-gnb-list {
  display: flex !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.pm-gnb-item {
  position: static !important;
}
.pm-gnb-link {
  display: block;
  padding: 0 24px;
  line-height: 44px;
  font-size: 17px; /* 1차 메뉴 폰트 3px 축소 (20px -> 17px) */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: .5px;
  transition: all .2s;
  text-decoration: none;
}
.pm-gnb-item:hover .pm-gnb-link,
.pm-gnb-item.active .pm-gnb-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Mega dropdown container */
.pm-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1000;
  padding: 40px 0;
  border-top: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
}
.pm-gnb-item:hover .pm-mega-dropdown {
  opacity: 1;
  visibility: visible;
}
.pm-mega-inner {
  max-width: var(--cb-max-width);
  margin: 0 auto;
  padding: 0 20px;
}
.pm-mega-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mega card visual styling */
.pm-mega-card {
  display: flex;
  flex-direction: column;
  width: 220px;
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--cb-shadow-sm);
}
.pm-mega-card:hover {
  transform: translateY(-5px);
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-lg);
}
.pm-mega-card-img {
  width: 100%;
  height: 110px;
  overflow: hidden;
  background: var(--cb-bg-light);
}
.pm-mega-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pm-mega-card:hover .pm-mega-card-img img {
  transform: scale(1.06);
}
.pm-mega-card-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pm-mega-card-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--cb-black);
}
.pm-mega-card-desc {
  font-size: 12px;
  color: var(--cb-gray);
  margin-top: 6px;
  line-height: 1.4;
  flex: 1;
  min-height: 34px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-mega-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cb-bg-light);
  color: var(--cb-gray-light);
  font-size: 12px;
  margin-top: 10px;
  align-self: flex-end;
  transition: all .3s;
}
.pm-mega-card:hover .pm-mega-card-arrow {
  background: var(--cb-primary);
  color: #fff;
  transform: translateX(3px);
}

/* Background overlay for megamenu */
.pm-mega-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.15);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  pointer-events: none;
}
.pm-mega-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* =============================================
   MOBILE DRAWER & NAVIGATION
   ============================================= */

/* Mobile top bar toggle */
.pm-m-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.pm-m-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cb-navy);
  border-radius: 1px;
  transition: .3s;
}

/* Horizontal scrollbar GNB for mobile viewports */
.pm-m-gnb-scroll {
  border-bottom: 1px solid var(--cb-border);
  overflow: hidden;
  background: #fff;
  display: none;
}
.pm-m-gnb-list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding: 0 10px;
  scrollbar-width: none;
  list-style: none;
}
.pm-m-gnb-list::-webkit-scrollbar {
  display: none;
}
.pm-m-gnb-list li {
  flex-shrink: 0;
}
.pm-m-gnb-list li a {
  display: block;
  padding: 0 15px;
  line-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-gray-dark);
  letter-spacing: .3px;
  text-decoration: none;
}
.pm-m-gnb-list li a.active,
.pm-m-gnb-list li a:hover {
  color: var(--cb-primary);
  border-bottom: 2px solid var(--cb-primary);
}

/* Mobile drawer style rules */
.pm-m-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
}
.pm-m-drawer-overlay.show {
  opacity: 1;
  visibility: visible;
}

.pm-m-drawer {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: left .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.pm-m-drawer.open {
  left: 0;
}
.pm-m-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb-border);
}
.pm-m-drawer-logo img {
  height: 28px;
}
.pm-m-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--cb-navy);
  cursor: pointer;
}

.pm-m-drawer-auth {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--cb-border);
}
.pm-m-auth-btn {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pm-m-auth-btn.join {
  background: var(--cb-primary);
  color: #fff;
}
.pm-m-auth-btn.login {
  background: var(--cb-navy);
  color: #fff;
}

/* Accordion drawer navigation GNB */
.pm-m-drawer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pm-m-menu-item {
  border-bottom: 1px solid var(--cb-border);
}
.pm-m-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cb-black);
  text-decoration: none;
}
.pm-m-menu-toggle {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--cb-gray-light);
  cursor: pointer;
}
.pm-m-submenu {
  display: none;
  background: var(--cb-bg-light);
  padding: 10px;
}
.pm-m-submenu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--cb-border);
  border-left: 1px solid var(--cb-border);
  background: #fff;
}
.pm-m-submenu-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border-right: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
  text-decoration: none;
  min-height: 44px;
}
.pm-m-sub-icon {
  font-size: 14px;
  color: var(--cb-gray);
  margin-right: 6px;
}
.pm-m-sub-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-gray-dark);
}

.pm-m-drawer-quick {
  display: flex;
  gap: 8px;
  padding: 20px;
  border-top: 1px solid var(--cb-border);
  margin-top: 10px;
}
.pm-m-quick-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pm-m-quick-item.kakao {
  background: #fee500;
  color: #3c1e1e;
}
.pm-m-quick-item.phone {
  background: var(--cb-primary);
  color: #fff;
}

/* Responsive GNB display controls */
@media screen and (max-width: 1024px) {
  .pm-headwrap {
    height: 60px;
    line-height: 60px;
  }
  .pm-logo a {
    height: 60px;
    line-height: 60px;
  }
  .pm-logo a img {
    height: 32px;
  }
  .pm-util, .pm-search-box, .pm-gnb {
    display: none !important;
  }
  .pm-m-hamburger {
    display: flex;
  }
  .pm-m-gnb-scroll {
    display: block;
  }
}