/* BASIC css start */
/* 초기화 */
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

/* 상단 메뉴 컨테이너 */
#topMenuContainer {
  /* 화면 상단에 고정 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  
  /* 가로배치, 줄바꿈 가능 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  /* 디자인 */
  background-color: #f5f5f5;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  z-index: 100; /* 다른 요소들보다 위에 오도록 */
}

#topMenuContainer .topMenuList {
  /* 메뉴 항목 가로 배치 */
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px; /* 메뉴간 간격 */
}

#topMenuContainer .topMenuList li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

/* 중앙 영역 */
#middleContainer {
  /* 상단/하단 메뉴 높이를 빼고, 남은 영역 전체를 중앙 정렬 영역으로 사용 */
  /* 예: 상단 메뉴 높이(70px) + 하단 메뉴 높이(100px) = 170px */
  min-height: calc(100vh - 170px);

  /* 수직/수평 중앙 정렬 */
  display: flex;
  flex-direction: column;       /* 위아래로 요소를 쌓습니다 */
  justify-content: center;      /* 수직 중앙 정렬 */
  align-items: center;          /* 수평 중앙 정렬 */

  /* 기존에 있던 margin-top, margin-bottom은 제거 */
  margin: 0;
  padding: 0;

  /* 시각적으로 구분하기 위한 스타일 (선택) */
  /* background-color: #fafafa; */
}


.tlogo img {
  display: block;
  margin: 0 auto;
  /* 혹은 필요 시 max-width: XXpx; 등으로 조정 */
}

#middleContainer .searchArea {
  margin-top: 20px;
}

#middleContainer .search input {
  width: 200px;
  padding: 8px;
  font-size: 14px;
}

/* 하단 정보 컨테이너 */
/* 기존 초기화/기본 스타일은 생략, 하단 컨테이너 중심으로 보여드립니다 */

/* 하단 정보 컨테이너 */
#bottomInfoContainer {
  /* 화면 하단 고정 */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* 디자인 */
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  z-index: 100;
  
  /* 세로 스크롤은 필요 없고, 가로 스크롤을 허용하기 위해 overflow-x 사용 가능 */
  /* 하지만 실제 스크롤 박스는 자식 .bottomInfoScroll에 줄 수도 있습니다. */
  /* overflow-x: auto; */
}

/* 실제 스크롤 영역: 가로로 쭉 나열하되 넘치면 수평 스크롤 */
.bottomInfoScroll {
  /* 수평 스크롤 */
  white-space: nowrap;   /* 줄바꿈 없이 한 줄로 나열 */
  overflow-x: auto;      /* 넘치면 가로 스크롤바 생성 (또는 터치 스와이프 가능) */

  /* 모바일에서 부드러운 스크롤 효과 */
  -webkit-overflow-scrolling: touch;
  
  /* 왼쪽 정렬 */
  text-align: left;

  /* 높이가 달라지지 않도록(이미지가 너무 커도 줄바꿈하지 않는다) */
  display: block; 
}

/* 내부 이미지를 inline-block으로 하여 가로로 배치 */
.bottomInfoScroll img {
  display: inline-block;
  max-width: none;  /* 가로 스크롤이므로, 너비 제한이 필요 없다면 none */
  //height: 40px;     /* 필요 시 높이 고정(또는 auto) */
  margin-right: 10px; /* 이미지 간격 */
}

/* 스크롤바를 숨기고 싶다면(모바일 터치 스크롤 전용) - 선택사항 */
.bottomInfoScroll::-webkit-scrollbar {
  display: none; /* 사파리/크롬 등 웹킷 브라우저에서 스크롤바 숨김 */
}


a img {
  border: none;
}

/* 링크 혹은 a 태그 안의 이미지를 탭했을 때 하이라이트를 없앰 */
a, a img {
  -webkit-tap-highlight-color: transparent; /* 또는 rgba(0, 0, 0, 0) */
}
/* BASIC css end */