/**!
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* #floating-menu 컨테이너 설정: 고정 위치, 오른쪽 7%, 상단 200px, z-index로 최상위 표시 */
#floating-menu {
  position: fixed;
  right: 7%;
  top: 200px;
  z-index: 2000;
}

/* #floating-menu 내부의 메뉴 리스트 스타일 초기화 및 최대 너비 지정 */
#floating-menu #floating-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;  /* 기본 리스트 점 제거 */
  max-width: 100px;  /* 최대 너비 100px 제한 */
}

/* 각 메뉴 아이템 기본 스타일 설정 */
#floating-menu #floating-menu-list li.menu-item {
  background-color: transparent; /* 배경 투명 */
  box-shadow: none;              /* 그림자 없음 */
  font-size: 0.8em;              /* 폰트 크기 조정 */
  line-height: 0.5em;            /* 줄 높이 */
  margin: 0;
  padding: 4px 0 2px;            /* 상하 패딩 조정 */
  text-align: center;            /* 텍스트 가운데 정렬 */
}

/* 메뉴 아이템 중 round 클래스가 붙은 다음 메뉴 아이템에는 위쪽 마진 추가 (간격 조절) */
#floating-menu #floating-menu-list li.menu-item + li.menu-item.round {
  margin-top: 5px;
}

/* 첫 번째 메뉴 아이템의 상단 테두리 제거 */
#floating-menu #floating-menu-list li.menu-item:first-child {
  border-top: 0;
}

/* floating-menu-round 클래스가 붙은 메뉴 아이템은 원형 모양 및 패딩 조정 */
#floating-menu #floating-menu-list li.menu-item.floating-menu-round {
  background-color: initial;
  box-shadow: none;
  border-radius: 50%; /* 둥근 원 형태 */
  padding: 0 0 5px;
}

/* 아이콘 밑 텍스트 숨기기 시작 */
/* 메뉴 아이템 내부 a태그 텍스트를 투명하게 하고 폰트 크기를 0으로 설정 */
#floating-menu #floating-menu-list li.menu-item a {
  color: transparent;   /* 글자 숨김 */
  font-size: 0;         /* 크기 0 */
  line-height: 0;       /* 줄 높이 0 */
  text-decoration: none; /* 밑줄 제거 */
}

/* 아이콘 이미지(백그라운드 이미지로 설정) 스타일 */
#floating-menu #floating-menu-list li.menu-item a .float-menu-image {
  font-size: initial;       /* 기본 폰트 크기 복원 */
  line-height: normal;      /* 기본 줄 높이 */
  background-position: center; /* 배경 이미지 가운데 정렬 */
  background-repeat: no-repeat; /* 배경 반복 안함 */
  background-size: cover;    /* 배경 꽉 채우기 */
  box-shadow: none;          /* 그림자 없음 */
  min-height: 50px;          /* 최소 높이 50px */
  margin-bottom: 2px;        /* 아래쪽 마진 2px */
}
/* 아이콘 밑 텍스트 숨기기 끝 */

/* 정사각형 아이콘 이미지의 위쪽 마진 조절 */
#floating-menu #floating-menu-list li.menu-item a .float-menu-image-square {
  margin-top: -12px;
}

/* 원형 아이콘 이미지에 둥근 테두리 적용 */
#floating-menu #floating-menu-list li.menu-item a .float-menu-image-round {
  border-radius: 50%;
}

/* 아이콘 크기 및 마진 설정 */
#floating-menu #floating-menu-list li.menu-item a .float-menu-icon {
  max-height: 1em;
  max-width: 1em;
  width: 8px;
  margin-right: 5px;
}

/* 서브 메뉴 리스트 스타일 초기화 및 상단 마진 조절 */
#floating-menu #floating-menu-list .sub-menu {
  list-style: none;
  margin-top: 20px;
}

/* 모바일 화면 (767px 이하) 에서 #floating-menu 숨김 처리 */
@media only screen and (max-width: 767px) {
  #floating-menu {
    display: none;
  }
}

/* 태블릿 소형 (768px ~ 991px) 화면에서 오른쪽 위치를 5%로 조정 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #floating-menu {
    right: 5%;
  }
}

/* 중형 화면 (992px ~ 1199px) 에서 오른쪽 위치를 10%로 조정 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #floating-menu {
    right: 10%;
  }
}