/* 모바일 메뉴 래퍼 (오버레이 및 메뉴) */
#mobile-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  pointer-events: none; /* 초기에는 이벤트 무시 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: flex-end; /* 메뉴를 오른쪽에 붙임 */
}

/* 메뉴가 열렸을 때 */
body.mobile-menu-open {
  overflow: hidden; /* 배경 스크롤 방지 */
}
body.mobile-menu-open #mobile-menu-wrapper {
  pointer-events: auto; /* 메뉴 열리면 이벤트 허용 */
  opacity: 1;
  visibility: visible;
}

/* 검정 오버레이 */
.mobile-menu-overlay {
  position: fixed; /* 뷰포트 기준 고정 */
  top: 0;
  left: 0;
  width: 100%; /* 화면 전체를 덮도록 100% */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 투명하고 어두운 배경 */
  cursor: pointer;
  z-index: 1060; /* aside 메뉴 패널(1065)보다 아래 */
}

/* 모바일 메뉴 (aside) */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0; /* 오른쪽에서 나타나도록 */
  width: 80%; /* 화면의 80% 너비 */
  max-width: 320px; /* 최대 너비 제한 (너무 커지지 않게) */
  height: 100%;
  background-color: #ffffff; /* 흰색 배경 */
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1065; /* 오버레이보다 위 */
  transform: translateX(100%); /* 초기엔 오른쪽 밖으로 숨김 */
  transition: transform 0.3s ease;
  padding: 24px 20px; /* 위 아래 패딩 조정 */
  display: flex;
  flex-direction: column;
}
body.mobile-menu-open .mobile-menu {
  transform: translateX(0); /* 왼쪽으로 슬라이드 인 */
}

/* 모바일 메뉴 헤더 (로고만 남음, 닫기 버튼 삭제) */
.mobile-menu-header {
  display: flex;
  justify-content: flex-start; /* 로고 왼쪽 정렬 */
  align-items: center;
  padding-bottom: 20px; /* 로고 아래 패딩 */
  border-bottom: 1px solid #ccc; /* 구분선 */
  margin-bottom: 20px; /* 메뉴 목록과의 간격 */
  position: relative;
}
.mobile-menu-logo {
  max-width: 100px; /* 로고 크기 축소 */
  height: auto;
}

/* 외부 닫기 버튼 (색상 하얀색, 검정 오버레이 왼쪽 상단에 고정) */
.mobile-menu-close-outer {
  position: fixed;
  top: 15px;
  right: 335px; /* ★★★ 멍하니님이 제공해주신 위치 그대로 유지 ★★★ */
  font-size: 3rem;
  background: none;
  border: none;
  color: #fff; /* 하얀색 */
  cursor: pointer;
  user-select: none;
  z-index: 1100;
}

/* 닫기 버튼 숨김 처리 (JS에서 hidden 속성 제어) */
.mobile-menu-close-outer[hidden] {
  display: none;
}

/* 모바일 내비게이션 */
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}
.mobile-nav li {
  margin-bottom: 25px; /* 메뉴 항목 간격 넓힘 */
}
.mobile-nav li:last-child {
  margin-bottom: 0;
}
.mobile-nav a {
  font-size: 1.2rem; /* 폰트 크기 조정 */
  font-weight: 300; /* 폰트 두께 조정 */
  text-decoration: none;
  color: #111;
  border-bottom: none; /* 메뉴 구분선 (줄) 제거 */
  padding-bottom: 8px; /* 패딩 축소 */
  display: block;
}
.mobile-nav a:hover {
  font-weight: 500;
}

/* 모바일 메뉴 하단 문의 섹션 */
.mobile-menu-contact {
  margin-top: auto; /* 하단에 붙도록 자동 마진 */
  font-size: 1.1rem; /* 상담 문의 폰트 크기 키움 */
  color: #222;
  line-height: 1.5;
  border-top: 1px solid #eee; /* 상단 구분선 */
  padding-top: 15px; /* 상단 패딩 */
}
.mobile-menu-contact p {
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 상담 문의 아이콘 (원본 컬러 SVG로 변경) */
.mobile-menu-contact p span {
  display: inline-block;
  width: 18px; /* 아이콘 크기 축소 */
  height: 18px; /* 아이콘 크기 축소 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mobile-menu-contact .icon-kakao { background-image: url('../img/icons/kakao.svg'); }
.mobile-menu-contact .icon-naver { background-image: url('../img/icons/naver-reserve.svg'); }
.mobile-menu-contact .icon-phone { background-image: url('../img/icons/phone.svg'); }

/* 데스크탑에서는 aside 메뉴와 오버레이, 외부 닫기 버튼을 완전히 숨김 */
@media (min-width: 768px) {
  #mobile-menu-wrapper {
    display: none; /* 데스크탑에서 모바일 메뉴 관련 모든 요소 숨김 */
  }
  .mobile-menu-close-outer { /* 데스크탑에서 외부 닫기 버튼 강제 숨김 */
    display: none !important;
  }
}

/* SM (Small / 576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .mobile-menu {
    width: 70%; /* 조금 더 좁게 */
  }
  .mobile-menu-logo {
    max-width: 80px;
  }
  .mobile-nav a {
    font-size: 1.1rem; /* 폰트 크기 조정 */
    padding-bottom: 6px;
  }
  .mobile-menu-contact {
    font-size: 0.8rem;
  }
  .mobile-menu-contact p span {
    width: 16px;
    height: 16px;
  }
}

/* XS (Extra Small / 575px 이하) */
@media (max-width: 575px) {
  .mobile-menu {
    width: 85%; /* 더 작은 화면에서는 더 넓게 사용 */
    padding: 15px;
  }
  .mobile-menu-logo {
    max-width: 70px;
  }
  .mobile-nav li {
    margin-bottom: 10px;
  }
  .mobile-nav a {
    font-size: 1rem; /* 폰트 크기 조정 */
    padding-bottom: 5px;
  }
  .mobile-menu-contact {
    font-size: 0.75rem;
    gap: 8px;
    padding-top: 10px;
  }
  .mobile-menu-contact p span {
    width: 14px;
    height: 14px;
  }
}