/**
 * 헤더 전용 CSS
 * Kurly, Mint05 벤치마킹
 */

/* ============================
   1. 상단 작은 바 (PC only)
   ============================ */

.top-util-bar {
  display: none; /* 모바일에서는 숨김 */
  background-color: var(--color-bg);
  font-size: 0.75rem; /* 12px */
}

.top-util-bar__container {
  max-width: 1280px; /* 메인 헤더와 동일 */
  margin: 0 auto;
  padding: 0 5rem !important; /* 80px - 좌우 여백 */
  display: flex;
  align-items: center;
  min-height: 36px;
}

.top-util-bar__menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0 0 0 auto; /* 오른쪽 정렬 (패딩 존중) */
  padding: 0;
}

.top-util-bar__menu a {
  color: var(--color-text-secondary);
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.top-util-bar__menu a:hover {
  color: var(--color-text);
}

/* 회원가입 강조 */
.top-util-bar__menu a[href*="signup"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* 구분선 */
.top-util-bar__divider {
  width: 1px;
  height: 10px;
  background-color: var(--color-border);
}

/* 드롭다운 토글 */
.top-util-bar__dropdown {
  position: relative;
}

.top-util-bar__dropdown-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.top-util-bar__dropdown-toggle::after {
  content: '▼';
  font-size: 0.625rem; /* 10px */
}

.top-util-bar__dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  padding-top: 0.5rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 140px;
  display: none;
  z-index: 10000;
}

/* 드롭다운 메뉴 내부 컨텐츠 영역 */
.top-util-bar__dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  background: transparent;
}

.top-util-bar__dropdown:hover .top-util-bar__dropdown-menu,
.top-util-bar__dropdown-menu:hover {
  display: block;
}

/* 메뉴 클릭 시 hover 비활성화 및 강제로 숨김 */
.top-util-bar__dropdown.menu-closing:hover .top-util-bar__dropdown-menu,
.top-util-bar__dropdown.menu-closing .top-util-bar__dropdown-menu,
.top-util-bar__dropdown.menu-closing .top-util-bar__dropdown-menu:hover {
  display: none !important;
  pointer-events: none !important;
}

.top-util-bar__dropdown.menu-closing {
  pointer-events: auto !important;
}

.top-util-bar__dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  font-size: 0.8125rem; /* 13px */
  position: relative;
  z-index: 1;
}

.top-util-bar__dropdown-menu a:hover {
  background-color: #F5F5F5;
  color: var(--color-primary);
}

/* ============================
   2. 메인 헤더 (PC)
   ============================ */

.main-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 999;
}

.main-header__container {
  max-width: 1280px; /* 컨텐츠 최대 너비 */
  margin: 0 auto;
  padding: 0 5rem !important; /* 80px - 좌우 여백 증가 */
}

/* 큰 화면에서 여백 더 증가 */
@media (min-width: 1440px) {
  .main-header__container,
  .top-util-bar__container {
    padding: 0 6rem !important; /* 96px */
  }
}

/* GNB 영역 - Flex 레이아웃으로 일정한 간격 */
.main-header__nav {
  display: flex;
  align-items: center;
  min-height: 64px;
}

/* GNB와 로고를 함께 담는 컨테이너 */
.main-header__left {
  display: flex !important;
  align-items: center;
  gap: 3rem; /* 로고와 GNB 사이 간격 */
  flex: 1;
  justify-content: center; /* 중앙 정렬 유지 */
  margin-right: 3rem; /* 마지막 메뉴와 버튼 사이 간격 */
  margin-left: 9px !important; /* GNB 전체를 9px 오른쪽으로 */
}

/* 로고 (왼쪽) */
.main-header__logo {
  flex-shrink: 0;
}

.main-header__logo img {
  height: 27px; /* 26px + 1px */
  width: auto;
  display: block;
}

/* GNB (중앙) */
.main-header__gnb {
  display: flex;
  align-items: center;
  gap: 3rem; /* 48px - 메뉴 간 일정한 간격 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* CTA 버튼 (오른쪽) */
.main-header__cta {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-right: 0; /* 패딩에 맡김 */
}

.main-header__gnb-item {
  position: relative;
}

.main-header__gnb-link {
  display: flex;
  align-items: center;
  height: 60px;
  color: var(--color-text);
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.main-header__gnb-link:hover {
  color: var(--color-primary);
}

/* 하위 메뉴 드롭다운 */
.main-header__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  padding-top: 0.5rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 200px;
  display: none;
  z-index: 10000;
}

.main-header__submenu-section {
  padding: 0.5rem 0;
}

.main-header__submenu-section:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

/* 서브메뉴와 GNB 사이 hover 유지 영역 */
.main-header__submenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  background: transparent;
}

.main-header__gnb-item:hover .main-header__submenu,
.main-header__submenu:hover {
  display: block;
}

/* 메뉴 클릭 시 hover 비활성화 및 강제로 숨김 */
.main-header__gnb-item.menu-closing:hover .main-header__submenu,
.main-header__gnb-item.menu-closing .main-header__submenu,
.main-header__gnb-item.menu-closing .main-header__submenu:hover {
  display: none !important;
  pointer-events: none !important;
}

.main-header__gnb-item.menu-closing {
  pointer-events: auto !important;
}

.main-header__submenu-item {
  list-style: none;
}

.main-header__submenu-link {
  display: block;
  padding: 0.625rem 1.25rem;
  color: var(--color-text);
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.main-header__submenu-link:hover {
  background-color: #F8F9FA;
  color: var(--color-primary);
  padding-left: 1.5rem;
}

/* 중첩 메뉴 (3depth) */
.main-header__submenu-item {
  position: relative;
}

.main-header__submenu-nested {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.25rem;
}

.main-header__submenu-nested .main-header__submenu-link {
  font-size: 0.875rem; /* 14px - 일반 메뉴와 동일 */
  font-weight: 500;
  color: var(--color-text);
}

.main-header__submenu-nested .main-header__submenu-link:hover {
  background-color: #F8F9FA;
  color: var(--color-primary);
  padding-left: 1.5rem;
}

/* 카테고리 제목 링크 (칼란 과정, 회화 과정, 후기, 브랜드 콘텐츠) */
.main-header__submenu-category {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #999;
  text-decoration: none;
  transition: color 0.2s;
}

.main-header__submenu-category:hover {
  color: var(--color-primary);
}

/* BEST 뱃지 스타일 */
.badge-best {
  display: inline-block;
  background-color: #F65F55;
  color: #FFFFFF;
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  padding: 0.125rem 0.375rem; /* 2px 6px */
  border-radius: 3px;
  margin-left: 0.375rem; /* 6px */
  vertical-align: middle;
  line-height: 1;
}

/* CTA 버튼 영역 */
.main-header__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1;
  position: relative;
}

.main-header__cta .btn {
  white-space: nowrap;
}

/* 나의 강의실 버튼 테두리 */
.main-header__cta .btn--secondary {
  border: 1px solid #EBEBEB;
}

/* ============================
   3. 모바일 헤더
   ============================ */

.mobile-header {
  display: none; /* PC에서는 숨김 */
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 999;
}

.mobile-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--spacing-md);
  min-height: 56px;
  gap: 10px; /* 6일체험과 햄버거 간격 10px */
}

.mobile-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.mobile-header__logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.mobile-header__logo img {
  height: 25px;
  width: auto;
}

.mobile-header__hamburger {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-shrink: 0;
}

.mobile-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: all 0.3s;
}

/* 모바일 인라인 CTA (6일 체험) - 햄버거 왼쪽 */
.mobile-header__inline-cta {
  display: none;
}

.mobile-header__inline-cta.is-visible {
  display: block;
  flex-shrink: 0;
  margin-left: auto; /* 햄버거 메뉴 왼쪽으로 자동 배치 */
}

.mobile-header__inline-cta .btn {
  font-size: 0.8125rem; /* 13px */
  padding: 0.5rem 0.875rem;
}

/* ============================
   4. 모바일 사이드 메뉴
   ============================ */

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: 9999;
  transition: left 0.3s ease-in-out;
}

.mobile-sidebar.is-open {
  left: 0;
}

.mobile-sidebar__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.mobile-sidebar__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  max-width: 400px;
  height: 100%;
  background-color: var(--color-bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 모바일 메뉴 헤더 */
.mobile-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--spacing-md);
  border-bottom: 1px solid #F4F3F8;
  background-color: var(--color-bg);
}

.mobile-sidebar__header img {
  height: 25px;
  width: auto;
}

.mobile-sidebar__close {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transform: rotate(0deg); /* 원래 방향 (왼쪽 화살표) */
}

.mobile-sidebar__login-btn {
  padding: 0.5rem 1rem;
  background-color: #F2F3F7;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  display: inline-block;
}


.mobile-sidebar__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 1차 메뉴 (왼쪽) */
.mobile-sidebar__primary {
  width: 126px;
  background-color: #F2F3F7;
  overflow-y: auto;
}

.mobile-sidebar__primary-item {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.mobile-sidebar__primary-item.is-active {
  background-color: white;
  color: black;
}

/* 2차 메뉴 (오른쪽) */
.mobile-sidebar__secondary {
  flex: 1;
  background-color: white;
  overflow-y: auto;
  padding: 0.75rem 0;
}

.mobile-sidebar__secondary-title {
  padding: 0.875rem 1.875rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-sidebar__secondary-item {
  padding: 0.875rem 1.875rem;
}

.mobile-sidebar__secondary-link {
  color: rgba(0, 0, 0, 0.9);
  font-size: 0.9375rem;
  text-decoration: none;
  display: block;
}

/* 모바일 하단 챗봇 버튼 */
.mobile-sidebar__footer {
  padding: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.mobile-sidebar__chatbot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-primary);
  border-radius: 50px;
  border: 1px solid #EBEBEB;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  justify-content: center;
}

.mobile-sidebar__chatbot-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 카카오톡 상담 버튼 (메뉴 하단) */
.mobile-sidebar__kakao-consult {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #FEE500; /* 카카오 옐로우 */
  border-radius: 50px;
  border: 1px solid #EBEBEB;
  color: #3C1E1E; /* 카카오 브라운 */
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-sidebar__kakao-consult:hover {
  background-color: #FDD835;
  transform: translateY(-1px);
}

.mobile-sidebar__kakao-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar__kakao-icon svg {
  width: 22px;
  height: 22px;
}

/* ============================
   5. 반응형
   ============================ */

/* 데스크탑 (1024px 이상) - GNB가 세로로 정렬되지 않도록 */
@media (min-width: 1024px) {
  .top-util-bar {
    display: block;
  }
  
  .main-header {
    display: block;
  }
  
  .mobile-header {
    display: none;
  }
}

/* iPad Pro 및 작은 데스크톱 (1024px ~ 1279px) - 헤더 간격 조정 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-header__container,
  .top-util-bar__container {
    padding: 0 2rem !important; /* 80px → 32px로 줄임 */
  }
  
  .main-header__left {
    gap: 1.5rem; /* 48px → 24px로 줄임 */
    margin-right: 1.5rem; /* 48px → 24px로 줄임 */
    margin-left: 0 !important; /* 9px 이동 제거 */
  }
  
  .main-header__gnb {
    gap: 1.5rem; /* 48px → 24px로 줄임 */
  }
  
  .main-header__gnb-link {
    font-size: 0.875rem; /* 15px → 14px로 줄임 */
  }
  
  .main-header__logo img {
    height: 24px; /* 27px → 24px로 줄임 */
  }
}

/* 태블릿/모바일 (1023px 이하) - 바로 햄버거 메뉴로 전환 */
@media (max-width: 1023px) {
  .top-util-bar {
    display: none;
  }
  
  .main-header {
    display: none;
  }
  
  .mobile-header {
    display: block;
  }
}

/* ============================
   다크 히어로 섹션용 투명 헤더
   (body.dark-hero일 때만 적용)
   ============================ */

body.dark-hero .top-util-bar {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

body.dark-hero .main-header {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border-bottom: none !important;
}

body.dark-hero .mobile-header {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border-bottom: none !important;
}

/* PC 헤더 - 다크 모드 텍스트 */
body.dark-hero .top-util-bar__menu a {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-hero .top-util-bar__menu a:hover {
  color: #FFFFFF !important;
}

body.dark-hero .top-util-bar__menu a[href*="signup"] {
  color: #7CFB84 !important;
}

body.dark-hero .top-util-bar__dropdown-toggle {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-hero .top-util-bar__dropdown:hover .top-util-bar__dropdown-toggle {
  color: #FFFFFF !important;
}

body.dark-hero .main-header__gnb-link {
  color: #FFFFFF !important;
}

body.dark-hero .main-header__gnb-link:hover {
  color: #7CFB84 !important;
}

/* PC 헤더 - 다크 모드 로고 */
body.dark-hero .main-header__logo img {
  filter: brightness(0) invert(1) !important;
}

/* PC 드롭다운 - 다크 모드 */
body.dark-hero .top-util-bar__dropdown-menu {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 1px solid rgba(124, 251, 132, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-hero .top-util-bar__dropdown-menu a {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-hero .top-util-bar__dropdown-menu a:hover {
  background-color: rgba(124, 251, 132, 0.1) !important;
  color: #7CFB84 !important;
}

body.dark-hero .main-header__submenu {
  background-color: rgba(0, 0, 0, 0.85) !important;
  border: 1px solid rgba(124, 251, 132, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-hero .main-header__submenu-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-hero .main-header__submenu-link:hover {
  background-color: rgba(124, 251, 132, 0.1) !important;
  color: #7CFB84 !important;
}

body.dark-hero .main-header__submenu-nested .main-header__submenu-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-hero .main-header__submenu-nested .main-header__submenu-link:hover {
  background-color: rgba(124, 251, 132, 0.1) !important;
  color: #7CFB84 !important;
}

body.dark-hero .main-header__submenu-category {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-hero .main-header__submenu-category:hover {
  color: #7CFB84 !important;
}

/* PC CTA 버튼 - 다크 모드 */
body.dark-hero .main-header__cta .btn {
  color: #FFFFFF !important;
}

body.dark-hero .main-header__cta .btn--secondary {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 모바일 헤더 - 다크 모드 */
body.dark-hero .mobile-header__logo img {
  filter: brightness(0) invert(1) !important;
}

body.dark-hero .mobile-header__hamburger span {
  background-color: #FFFFFF !important;
}

/* ============================
   반응형: 모바일/태블릿
   ============================ */

/* 태블릿 이하에서 PC 헤더 숨기기 */
@media (max-width: 1023px) {
  .main-header,
  .top-util-bar {
    display: none !important;
  }
}

/* PC에서 모바일 헤더 숨기기 */
@media (min-width: 1024px) {
  .mobile-header,
  .mobile-sidebar {
    display: none !important;
  }
}