/* 기본 스타일 */
body {
  margin: 0;
  font-family: Consolas, Arial, sans-serif; /* 폰트를 Consolas로 변경 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  user-select: none; /* 텍스트 선택 차단 */
}

header {
  background-color: #333;
  color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  flex-shrink: 0; /* 헤더가 축소되지 않도록 설정 */
  font-size: x-large;
  font-weight: bold;
}

#content {
  display: flex;
  flex: 1;
  height: calc(100vh - 60px);
}

/* ol CSS */
.ol-rotate {
  display: none;
}

.ol-zoom {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
  justify-content: flex-end;
}

/* 사이드 바 */
.sidebar {
  width: 250px;
  background-color: #f4f4f4;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 세로 스크롤 추가 */
}

.sidebar.hidden {
  transform: translateX(-100%);
}

/* 사이드바 컨텐츠 */

.radio-label {
  display: flex;
  align-items: center; /* 텍스트 줄 간격 조정 */
  /* border: 1px solid red; */
  padding-bottom: 2px;
}

.title {
  width: 100%;
  max-height: 30px;
  background-color: gray; /* 배경 색상 */
  text-align: center; /* 텍스트 가운데 정렬 */
  font-size: 14px; /* 폰트 크기 설정 */
  font-weight: bold; /* 폰트 굵게 설정 */
  color: white;
  padding: 4px 0px;
}

.catalog-radio-label {
  display: flex;
  align-items: center; /* 텍스트 줄 간격 조정 */
}

.catalog-radio-label::before {
  content: "•"; /* Bullet 표시 */
  margin-right: 8px; /* Bullet과 텍스트 사이의 간격 */
  color: black; /* Bullet 색상 */
  font-weight: bold; /* Bullet 굵기 */
}

/* section1 스타일 추가 */
#section1 {
  display: flex;
  flex-direction: column;
  background-color: #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* overflow-y: auto; 세로 스크롤 추가 */
  max-height: 115px;
  min-height: 115px;
  justify-content: flex-start; /* 상단부터 정렬 */
  align-items: center;
  padding-bottom: 10px;
  height: 5%;
}

#radioForm {
  display: flex;
  flex-direction: column;
  width: 80%;
  justify-content: space-between;
}

#radioContainer {
  display: flex;
  /* 위 오른쪽 아래 왼쪽 */
  padding: 10px 0px 0px 0px;
  width: 100%;
  justify-content: space-between;
}

#left-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#right-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 20px;
}

.separator {
  width: 100%;
  border-top: 1px solid #000;
  margin: 8px 0;
}

/* Section2 스타일 추가 */
#section2-1 {
  display: flex;
  flex-direction: column;
  background-color: #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 세로 스크롤 추가 */
  min-height: 100px;
  height: 55%;
  padding: 8px;
  justify-content: flex-start; /* 상단부터 정렬 */
  align-items: center;
}

#checkboxform {
  max-height: 420px;
  width: 85%;
  /* border: solid 1px red; */
}

#section2-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #e0e0e0;
  /* border: 1px solid red; */
  min-height: 70px;
  max-height: 70px;
  height: 5%;
  border-top: 1px solid darkgray;
}

#catalogselectionForm {
  display: flex;
  flex-direction: column;
  /* border: 1px solid blue; */
  width: 82%;
}
/* 레벨 라디오 박스 스타일 section2-3 */
.checkbox-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5%;
  min-height: 50px;
  max-height: 50px;
  background-color: #e0e0e0;
  border-top: 1px solid darkgray;
}
.level-container {
  width: 81%;
  display: flex;
  justify-content: space-between;
  display: flex;
}
/* catalogOptionToggleContainer section2-4 */

.catalogOptionToggleContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 5%;
  min-height: 30px;
  max-height: 30px;
  /* border: 1px solid red; */
  background-color: #e0e0e0;
  border-top: 1px solid darkgray;
}

#button-container {
  width: 80%;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid blue; */
}

.catalogOptionToggleContainer button {
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid darkgray;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.catalogOptionToggleContainer button:hover {
  background-color: #e0e0e0;
}


/* catalogListToggleContainer section2-5 */
.catalogListToggleContainer {
  display: none;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 5%;
  min-height: 30px;
  max-height: 30px;
  /* border: 1px solid red; */
  background-color: #e0e0e0;
  border-top: 1px solid darkgray;
}

.catalogListToggleContainer button {
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid darkgray;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.catalogListToggleContainer button:hover {
  background-color: #e0e0e0;
}

/* Section3 스타일 추가 */
#section3 {
  display: flex;
  flex-direction: column;
  background-color: #e0e0e0;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 세로 스크롤 추가 */
  height: 35%;

  min-height: 100px;
  justify-content: flex-start; /* 상단부터 정렬 */
  align-items: center;
}

#mapoptioncheckboxform {
  max-height: 320px;
  width: 80%;
  /* border: 1px solid red; */
}

#radioDisplayCategoryForm {
  display: flex;
  padding-top: 5px;
  flex-direction: column;
  width: 80%;
  /* border: 1px solid red; */
  padding-bottom: 4px;
}

/* viewbyscale, Use Scamin/max */
#additionalOptionsForm {
  width: 100%;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
}
.additional-options-container {
  display: flex;
  width: 80%;
  flex-direction: column;
  /* border: 1px solid red; */
}

/* 맵 쪽 */
.map-container {
  flex: 1;
  position: relative;
}

#map {
  height: 100%;
  width: 100%;
}

.toggle-button {
  display: none; /* 기본적으로 숨김 */
  position: absolute;
  top: 8px;
  left: 15px;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  /* border: 1px solid white; */
}

#company-logo {
  width: 130px;
}

/* 모바일 스타일 */
@media screen and (max-width: 768px) {
  #main-title {
    padding-left: 40px;
    /* border: 1px solid white; */
    /* width: 500px; */
  }
  .sidebar {
    position: absolute;
    height: calc(100vh - 60px);
    transform: translateX(-100%);
    z-index: 10;
  }

  .sidebar.visible {
    transform: translateX(0);
  }

  .toggle-button {
    display: block; /* 모바일에서 표시 */
    color: white;
  }

  .map-container {
    flex: 1;
  }

  /* 모바일일 때 회사 로고 변경 */
  #company-logo {
    width: 30px;
    height: 30px;
    content: url("/images/hanulsoft_logo_mobile.png"); /* 모바일 전용 이미지로 변경 */
  }
}

/* 스케일 라인 */

.custom-scale-line {
  position: absolute;
  bottom: 25px;
  left: 10px;
  background-color: rgba(60, 153, 220, 0.9);
  /* padding: top right bottom left; */
  padding: 5px 0px 5px 0px;
  border-radius: 4px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}
.custom-scale-line .ol-scale-line-inner {
  border-top: 2px solid black;
}

/* :(콜론)은 의사 클래스(pseudo-class)나 의사 요소(pseudo-element)를 나타내기 위해 사용 */
.customScaleLine-inner > :not(:first-child) {
  display: none;
}


/* 선택된 카탈로그 팝업창 */



#popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}



.popup-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  
  /* border: 1px solid red; */
}

#modal-header {
  display: flex;
  /* border: 1px solid red; */
  justify-content: space-between;
  height: 10%;
  align-items: center;
}

#modal-table-container {
  overflow: auto; /* 세로 스크롤 추가 */
  /* border: 1px solid red; */
  height: 85%;
}



#modal-body{
  
}

#closePopup-container{
  display: flex;
  /* border: 1px solid red; */
  justify-content: center;
  align-items: center;
  height: 5%;
  padding-top: 15px;
}


table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
  text-align: center;
}

.modal-button {
  background-color: #007bff; /* 파란색 배경 */
  color: white; /* 흰색 글자 */
  border-radius: 4px; /* 테두리 둥글게 */
  padding: 5px 10px; /* 패딩 */
  font-size: 12px; /* 폰트 크기 */
  cursor: pointer; /* 커서 모양 */
  text-align: center; /* 텍스트 가운데 정렬 */
  display: inline-block; /* 인라인 블록 디스플레이 */
  height: 30px;
}

.modal-button:hover {
  background-color: #0056b3; /* 호버 시 어두운 파란색 배경 */
}