/* ===== 메뉴 섹션 전용 리셋 (섹션 자체 여백 제거) ===== */
section.container.section-title {
  margin: 0 !important;           /* 인접 섹션/푸터와 간격 제거 */
  padding: 16px 0 !important;     /* 섹션 내부 위/아래 여백 최소화 */
  box-sizing: border-box;
}

/* ===== 메뉴 컨테이너 (가로 정렬 & 여백 최소화) ===== */
section.container.section-title > .menu-container {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: right !important; /* flex-end보다 덜 밀림 */
  align-items: center !important;
  transform: translateX(-15%);        /* ⬅ 전체를 약간 왼쪽으로 이동 */
  gap: 50px;
}


/* ===== 메뉴 아이템 (여백/라인 높이로 생기는 틈 제거) ===== */
section.container.section-title > .menu-container > .menu-item {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  line-height: 0;                 /* 인라인 간격으로 생기는 미세 틈 제거 */
}

/* ===== 링크 기본 스타일 (필요 최소) ===== */
section.container.section-title > .menu-container > .menu-item > a {
  text-decoration: none;
  color: inherit;
  display: block;
  line-height: 0;                 /* 이미지 주변 빈 공간 방지 */
}

/* ===== 이미지 (정확한 크기 & 하단 공백 제거) ===== */
section.container.section-title > .menu-container img {
  width: 300px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

/* ===== 인접 섹션/푸터와의 간격 강제 제거 (보호장치) ===== */
/* 히어로 섹션 클래스가 hero, hero-section 등일 수 있어 대비용 두 줄 */
.hero + section.container.section-title,
.hero-section + section.container.section-title {
  margin-top: 0 !important;
}

/* 메뉴 섹션 아래에 바로 푸터가 붙을 때 */
section.container.section-title + footer {
  margin-top: 0 !important;
}

/* ===== 반응형 미세 조정 ===== */
@media (max-width: 640px) {
  section.container.section-title { padding: 12px 0 !important; }
  section.container.section-title > .menu-container { gap: 16px; }
  section.container.section-title > .menu-container img { width: 120px; }
}

/* ===== 메뉴 섹션 중앙 정렬 보정 ===== */
section.container.section-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column; /* 섹션 내부 수직 정렬 */
}

/* 메뉴 컨테이너도 섹션 안에서 수평 완전 중앙 고정 */
section.container.section-title > .menu-container {
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  width: fit-content; /* 내용 크기에 맞게 정렬 */
}

/* === 썸네일들을 오른쪽으로 정렬 === */
section.container.section-title {
  display: block !important; /* 섹션은 그냥 블록으로 */
}

section.container.section-title > .menu-container {
  width: 100% !important;           /* 컨테이너를 가로로 꽉 채움 */
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important; /* ⬅ 오른쪽으로 붙이기 */
  align-items: center !important;
}

/* 혹시 이전에 넣었던 fit-content를 완전히 무력화 */
section.container.section-title > .menu-container {
  inline-size: 100% !important; /* 일부 브라우저 호환 보강 */
}