/* ==========================================================================
📁 menu_style.css
📌 모두CMS 상단 메뉴 및 반응형 메뉴 스타일 정의
작성 목적: _head.php 내부 인라인 스타일을 외부 CSS로 분리하여 유지보수 효율 향상
작성 일자: 2025-06
========================================================================== */

/* --------------------------------------------------------------------------
🔹 #at_menu: 상단 고정 메뉴의 기본 스타일 (PC 기준)
→ 스크롤 시 .nav-solid 클래스와 함께 동작
--------------------------------------------------------------------------- */
#at_menu {
  position: fixed;          /* 항상 상단에 고정 */
  top: 0;
  left: 0;
  right: 0;
  height: 70px;             /* PC 기준 메뉴 높이 */
  z-index: 9999;            /* 다른 요소보다 위에 위치 */
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,0.4);  /* 반투명 배경 (기본) */
  border-bottom: 1px solid #ddd;
  transition: background 0.3s ease; /* 스크롤 시 부드러운 전환 효과 */ */
}

/* 📌 메뉴 항목 기본 스타일 */
#at_menu a {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Noto Sans KR', sans-serif;
  color: #fff !important;
  text-decoration: none;
  line-height: 70px;        /* 메뉴 높이와 일치 */
  padding: 0 16px;
  position: relative;       /* 밑줄을 위한 기준 위치 */
}

/* 📌 hover 시 배경 제거 (강제 적용) */
#at_menu a:hover {
  background: none !important;
}

/* 📌 선택된 메뉴 또는 hover 상태에 강조 밑줄 */
#at_menu a.hovering::after,
#at_menu a.active:not([href="#"])::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: currentColor;  /* 글자색과 동일한 색으로 표시 */
}

/* ✅ nav-solid 클래스: 스크롤 발생 시 적용됨 (배경 흰색 + 글자 검정) */
#at_menu.nav-solid {
  background: #fff;
}
#at_menu.nav-solid a {
  color: #000 !important;
}
#at_menu.nav-solid .json_site_name {
  color: #000;
}

/* --------------------------------------------------------------------------
🏷️ 로고 이미지 및 사이트명 텍스트
→ 사용자 정의 로고(json_site_name-img), 텍스트(json_site_name) 사용
--------------------------------------------------------------------------- */
.json_site_name-img {
  height: 36px;            /* 로고 이미지 높이 */
  vertical-align: middle;
}

.json_site_name {
  margin-right: 0px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: normal;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1px;         /* 수직 정렬 보정 */
}

/* 로고(예: 홈으로 이동)를 감싼 링크(.json_site_name-link)에 대한 우측 여백 */
.json_site_name-link {
  line-height: 70px;
  margin-right: 8px;
  padding-right: 10px;
}

/* --------------------------------------------------------------------------
📦 메뉴 wrapper: 로고 + 메뉴 정렬을 위한 container
--------------------------------------------------------------------------- */
.menu-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;  /* 수직 정렬 */
  height: 70px; /* PC 기준 높이 */
}

/* 로고 영역이 줄어들지 않도록 설정 */
.nav_fixed_home {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
📜 메뉴 항목 wrapper (.nav_inner_scroll)
→ 모바일에서는 좌우 스크롤 허용
--------------------------------------------------------------------------- */
.nav_inner_scroll {
  display: flex;
  overflow-x: auto;             /* 모바일에서 좌우 스크롤 허용 */
  white-space: nowrap;          /* 줄바꿈 방지 */
  scroll-snap-type: x mandatory; /* 스크롤 시 부드럽게 정렬 */
  flex: 1; /* 나머지 공간을 모두 채움 */
}
.nav_inner_scroll::-webkit-scrollbar {
  display: none;
}
.nav_inner_scroll a {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 70px;
  padding: 0 16px;
  display: inline-block;
  color: #fff;
  position: relative;
  text-decoration: none;
}
.nav_inner_scroll a:hover {
  background: none;
}

/* ▶️ 선택된 항목 강조선 (PC) (색상은 theme-color) */
.nav_inner_scroll a.active:not([href="#"])::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--theme-color);
}

/* --------------------------------------------------------------------------
🏠 모바일에서만 표시되는 홈 링크 텍스트
--------------------------------------------------------------------------- */
.home-link {
  display: none;
}

/* --------------------------------------------------------------------------
📱 모바일 반응형 스타일 (768px 이하)
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 메뉴 높이 변경 */
  #at_menu {
    height: 60px;                /* 메뉴 높이 PC보다 축소 */
  }

  /* 메뉴 항목 폰트 및 높이 재조정 */
  #at_menu a {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
    padding: 0 12px;
  }

  /* 밑줄 위치 보정 */
  #at_menu a.hovering::after,
  #at_menu a.active:not([href="#"])::after {
    left: 12px;
    right: 12px;
  }

  /* nav-solid 배경 및 텍스트 재정의 */
  #at_menu.nav-solid {
    background: var(--theme-color) !important;
  }
  #at_menu.nav-solid a {
    color: #fff !important;
  }

  .menu-inner {
    height: 60px;
  }

  /* 모바일 전용 홈 링크 표시 */
  .home-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 0px 12px 0px 4px !important;
    line-height: 60px;
    text-decoration: none;
  }

  /* 로고/텍스트 숨김 처리 */
  .json_site_name,
  .json_site_name-link {
    display: none;
  }

  /* 메뉴 항목 padding 조정 */
  .nav_inner_scroll a {
    font-size: 16px;
    font-weight: 600;
    padding: 0 12px;
    line-height: 60px;
  }

  /* 선택된 항목 밑줄 위치 보정 */
  .nav_inner_scroll a.active:not([href="#"])::after {
    left: 12px;
    right: 12px;
  }
}