:root {
  --main-bg-color: #f5f5f5; /* 사이드바 배경색 (밝은 회색) */
  --header-bg-color: #333; /* 헤더 배경색 (진한 회색) */
  --header-text-color: #fff; /* 헤더 텍스트 색상 (흰색) */
  --primary-color: #7986cb; /* 주요 색상 (파스텔톤 남색) */
  --primary-hover-color: #5c6bc0; /* 주요 색상 호버 (약간 어두운 파스텔톤 남색) */
  --primary-color-lighter: #bbc8e4;
  --secondary-color: #fff; /* 보조 색상 (흰색) */
  --text-color: #555; /* 기본 텍스트 색상 (회색) */
  --light-gray: #fcfcfc; /* 밝은 회색 (#f0f0f0) */
  --user-light-gray: #dedbdb; /* 사용자 회색 (#f0f0f0) */
  --white-color: #fff; /* 흰색 */
  --border-color: #ddd; /* 경계선 색상 (밝은 회색) */
  --dark-gray: #777; /* 어두운 회색 (#777) */
  --overlay-bg-color: rgba(0, 0, 0, 0.2); /* 오버레이 배경 색상 (투명도 낮춤) */
}

#content {
  display: flex;
  flex: 1;
  height: calc(100vh - 125px);
  overflow: hidden !important; /* 💡 전체 윈도우 스크롤을 차단하여 내부 컨테이너(사이드바, 지도)만 독립 스크롤되도록 고정 */
}

/* ol CSS */
.ol-rotate {
  display: none;
}
/* 줌 버튼 */
.ol-zoom {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 0.2px solid var(--primary-hover-color);
}

.ol-zoom-in {
  border-bottom: 0.2px solid var(--primary-hover-color) !important;
}

.ol-zoom-in,
.ol-zoom-out {
  background-color: var(--primary-color);
  color: var(--white-color);
  width: 30px;
  height: 30px;
  border: none;
  font-size: 15px;
  text-align: center;
  font-weight: 900;
}

.ol-zoom-in:hover,
.ol-zoom-out:hover {
  background-color: lightblue; /* hover 시 밝은 파랑색 */
  color: var(--white-color);
}

/* 사이드 바 */
.sidebar {
  width: 300px;
  background-color: var(--secondary-color); /* 사이드바 배경을 흰색으로 변경하여 하단 빈 공간이 자연스럽게 블렌딩되도록 유지 */
  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; /* 💡 창 높이가 작아졌을 때 사이드바 전체 스크롤 허용 */
  height: 100% !important; /* 💡 부모 컨테이너(#content) 높이에 사이드바 높이를 100% 동기화 */
  max-height: 100% !important;
  z-index: 100;
}

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

/* 사이드바 컨텐츠 */

.radio-label {
  display: flex;
  font-size: 13px;
  align-items: center;
}

.radio-label input {
  margin-right: 3px; /* 라벨과 입력 요소 사이의 간격을 조정합니다 */
}

.radio-label button {
  border: 1px solid var(--light-gray);
  background-color: var(--white-color);
}

.radio-label.type {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.title {
  width: 100%;
  max-height: 30px;
  background-color: var(--primary-color); /* 배경 색상 */
  font-size: 14px; /* 폰트 크기 설정 */
  font-weight: bold; /* 폰트 굵게 설정 */
  color: var(--header-text-color);
  padding: 4px 0px 4px 0px;
  text-align: center;
}

/* section-1 스타일 추가(Lang) 내용 없음*/

/* section-2 스타일 추가 */
#section-2 {
  display: flex;
  flex-direction: column;
  background-color: var(--secondary-color);

  justify-content: space-evenly; /* 상단부터 정렬 */
  align-items: center;
  overflow-y: auto;
}

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

#radioContainer {
  display: flex;
  padding: 5px 0px 0px 0px;
  width: 100%;
  justify-content: space-between;
}

#left-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 39%;
}

#right-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 39%;
}

.separator {
  width: 100%;
  border-top: 1px solid var(--text-color);
  margin: 8px 0;
}

#sharedViewContainer {
  display: flex;
  width: 85%;
}

/* Section2 스타일 추가 */
#section2-1 {
  display: flex;
  flex-direction: column;
  background-color: rgba(187, 200, 228, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 250px; /* 💡 250px로 고정하여 흔들림 방지 */
  max-height: 250px; /* 💡 250px로 고정하여 흔들림 방지 */
  flex: 0 0 auto;    /* 💡 동적 수축/팽창을 방지하여 다른 UI가 위아래로 튀는 현상 해결 */
  padding: 8px;
  justify-content: flex-start;
  align-items: center;
}

#checkboxform {
  max-height: 420px;
  width: 85%;
}

#checkboxform p {
  font-size: 13px;
}

#section2-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary-color);
  border-top: 1px solid var(--user-light-gray);
  padding-top: 6px;
}

#catalogselectionForm {
  display: flex;
  flex-direction: column;
  width: 82%;
}

.catalog-text {
  width: 90px;
}

/* 레벨 라디오 박스 스타일 section2-3 */
.checkbox-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--secondary-color);
  border-top: 1px solid var(--dark-gray);
  font-size: 13px;
  padding-top: 5px;
}

.level-container {
  width: 84%;
  display: flex;
  justify-content: space-evenly;
  display: flex;
}

.level-container label {
  width: 100px;
}

/* 공통 스타일 */
.toggleDivContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 5%;
  min-height: 36px;
  max-height: 36px;
  background-color: var(--white-color);
  border-bottom: 1px solid var(--primary-color);
  padding: 2px;
}

.toggleDivContainer button {
  padding: 3px 10px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  background-color: var(--primary-color);
  color: var(--white-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.toggleDivContainer button:hover {
  background-color: var(--primary-hover-color);
}

/* catalogOptionToggleContainer section2-4 */
.catalogOptionToggleContainer {
  /* 기존 스타일 외에 필요한 스타일 추가 */
}

/* catalogListToggleContainer section2-5 */
.catalogListToggleContainer {
  display: none;
  /* 기존 스타일 외에 필요한 스타일 추가 */
}

/* unSelectedcatalogListToggleContainer section2-6 */
.unSelectedcatalogListToggleContainer {
  display: none;
  /* 기존 스타일 외에 필요한 스타일 추가 */
}

#button-container {
  width: 85%;
  display: flex;
  justify-content: flex-start;
}

/* Section3 스타일 추가 */
#section3 {
  display: flex;
  flex-direction: column;
  background-color: var(--secondary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 세로 스크롤 추가 */
  min-height: 100px;
  flex: 1 1 auto; /* 💡 고정 높이 대신 남는 여백에 맞게 늘어나도록 flex 적용 */
  justify-content: flex-start; /* 상단부터 정렬 */
  align-items: center;
}

#mapoptioncheckboxform {
  height: auto;
  width: 85%;
}

#radioDisplayCategoryForm {
  display: flex;
  padding-top: 5px;
  flex-direction: column;
  width: 85%;
  padding-bottom: 4px;
}

/* OSM Form Area */
#checkOSMForm {
  width: 85%;
}

/* Use Scamin/max */
#additionalOptionsForm {
  width: 100%;
  display: flex;
  justify-content: center;
}

.additional-options-container {
  display: flex;
  width: 85%;
  flex-direction: column;
}

/* 경로 부분 */
#intersection-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
#intersection-items {
  width: 85%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

#intersection-items :first-child {
  /* margin-top: 5px; */
  padding-top: 5px;
}
#intersection-items > * {
  margin-bottom: 2px;
}

#intersection-items button {
  max-width: 120px; /* 최대 너비 */
  max-height: 30px; /* 최대 높이 */
  font-size: 10px; /* 글꼴 크기 */
  padding: 3px 6px; /* 안쪽 여백 */
  border: none; /* 테두리 제거 */
  border-radius: 5px; /* 둥근 모서리 */
  background-color: var(--primary-color); /* 배경색 */
  color: var(--white-color); /* 글자색 */
  cursor: pointer; /* 커서 모양 변경 */
  transition: background-color 0.3s ease; /* 부드러운 배경색 변화 */
}

#intersection-items button:hover {
  background-color: var(--primary-hover-color); /* 호버 시 배경색 */
}

#intersection-items button:disabled {
  background-color: var(--user-light-gray); /* 비활성화 시 배경색 */
  color: var(--dark-gray); /* 비활성화 시 글자색 */
  cursor: not-allowed; /* 비활성화 시 커서 모양 변경 */
}

#drawingMessage-container {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 255, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--white-color);
  font-weight: bold;
  display: none; /* Initially hidden */
  font-size: small;
  z-index: 5;
}

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

/* 기여자 표시 */
.ol-attribution button {
  display: none !important;
}
.ol-attribution {
  position: absolute;
  bottom: 0;
  right: 5px;
  list-style: none;
}
.ol-attribution li {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.toggle-button {
  display: none; /* 기본적으로 숨김 */
  position: absolute;
  bottom: 85px;
  right: 15px;
  background-color: var(--primary-color);
  color: var(--white-color);
  border: none;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 동그랗게 만듭니다 */
  font-size: 15px;
  cursor: pointer;
  z-index: 10;
}

.toggle-button:hover {
  background-color: var(--primary-hover-color);
}

.toggle-button:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#company-logo {
  width: 130px;
}

/* 모바일 스타일 */
@media screen and (max-width: 1024px) {
  #main-title {
    padding-left: 40px;
  }
  .sidebar {
    position: absolute;
    height: calc(100vh - 125px);
    transform: translateX(-100%);
  }

  .sidebar.visible {
    transform: translateX(0);
    z-index: 9000;
  }

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

  .map-container {
    flex: 1;
  }
}

/* 스케일 라인 */

.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: var(--white-color);
  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;
}

.customScaleLine-inner > :first-child {
  position: absolute;
  bottom: 54px;
  left: 15px;
  font-size: 12px;
}

.ol-scale-text {
  color: black; /* 글자 색상 검정 */
  font-weight: bold;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white;
  width: auto; /* 텍스트 길이에 따라 width 자동 조정 */
  white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
}

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

#popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: var(--overlay-bg-color);
  z-index: 10000;
  overflow: hidden; /* 바깥 팝업 스크롤 차단 - 이중 스크롤바 원천 제거 */
}

.popup-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: min(70%, 95vw);   /* 화면이 좁아져도 뷰포트 95% 이상 넘어가지 않도록 */
  height: 72%;
  min-width: 0;            /* 고정 min-width 제거 - 뷰포트 밖 삐져나감 방지 */
  max-width: 1500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white-color);
  padding: 15px;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;  /* padding 포함한 width 계산 */
}

#modal-header {
  display: flex;
  justify-content: space-between;
  height: auto;
  align-items: center;
  padding-bottom: 10px;
}

#modal-table-container {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden; /* 바깥 컨테이너 스크롤 완전 차단 */
  margin-bottom: 10px;
}

#closePopup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 5px;
}

#modal-table-container table {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#modal-table-container thead {
  flex: 0 0 auto !important;
  width: 100% !important;
}

#modal-table-container tbody {
  display: block !important;
  flex: 1 1 0 !important;
  overflow-y: auto !important; /* tbody 영역 단독 스크롤바 활성화 */
  width: 100% !important;
}

#modal-table-container thead,
#modal-table-container tr {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important; /* 컬럼 정렬 일치 */
}

#modal-table-container th,
#modal-table-container td {
  border: 1px solid var(--border-color) !important;
}

#modal-table-container thead th {
  background-color: #34495e !important; /* 투명도 없는 다크 슬레이트 솔리드 배경 */
  color: #ffffff !important;
  font-weight: bold !important;
}

th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid var(--border-color);
  text-align: center;
}

.modal-button {
  background-color: var(--primary-color);
  color: var(--white-color);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  height: 30px;
  border: none;
}

.modal-button:hover {
  background-color: var(--primary-hover-color);
}

/* 화면이 작은 경우 */
@media (max-width: 600px) {
  #popup {
    font-size: 8px;
  }
}

/* 화면이 중간 크기인 경우 */
@media (min-width: 601px) and (max-width: 1200px) {
  #popup {
    font-size: 10px;
  }
}

/* 화면이 큰 경우 */
@media (min-width: 1201px) {
  #popup {
    font-size: 14px;
  }
}

/* show scale */

#showScale {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

/* 카탈로그 검색 영역 */
#seach-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0px;
  background-color: var(--white-color);
}

#searchInput {
  width: 198px;
  margin-right: 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

#searchButton {
  width: 40px;
  padding: 5px;
  background-color: var(--primary-color);
  color: var(--white-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#searchButton:hover {
  background-color: var(--primary-hover-color);
}

/* 모달 카탈로그 이미지 */

.popup-catalog-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white-color);
  padding: 20px;
  border-radius: 5px;
  min-width: 380px;
  max-width: 700px;
  overflow: auto;
  height: auto;
}

#modal-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal-img-container img {
  width: 100%;
}

/* 전체 버튼 이벤트 관련  */
.button:focus {
  background-color: skyblue;
}

select {
  appearance: none; /* 기본 드롭다운 버튼 숨기기 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--white-color); /* 배경 제거 */
  border: 1px solid var(--border-color); /* 경계선 추가 */
  padding: 2px 16px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}

/* Chart Type Combobox Styling */
#chartTypeComboboxContainer {
  width: 85%; /* Match other sections */
  margin: 10px auto; /* Center and provide vertical spacing */
  padding: 5px 0;
}

#chartTypeCombobox {
  width: 100%;
  background-color: var(--secondary-color); /* Use a variable for consistency */
  padding: 8px 10px; /* Adjust padding */
  border: 1px solid var(--border-color); /* Use a variable for consistency */
  border-radius: 4px;
  font-size: 13px; /* Adjust font size */
  color: var(--text-color); /* Use a variable for consistency */
  cursor: pointer;
  -webkit-appearance: none; /* Remove default browser styling */
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* 전체 중 현재 선택된 차트 갯수 알림창 */
/* 검색된 데이터 알림창 */
.chartInformText-container {
  background-color: var(--white-color);
  display: flex;
  justify-content: center;
}

.informValue {
  width: 80%;
  font-size: 12px;
  padding: 2px 0px;
}

.selected-list-btn-container {
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  background-color: var(--white-color);
}

.selected-list-btn-container button {
  width: 100%;
  padding: 8px;
  background-color: #34495e; /* 다른 버튼들과 차별화되는 고급스러운 다크 차콜 네이비 */
  color: var(--white-color);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.selected-list-btn-container button:hover {
  background-color: #233240;
}
/* loading overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent !important; /* 💡 전체 지도를 흐리게 덮지 않고 완전 투명화 */
  display: none; /* 처음에는 숨김 상태 */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.overlay.show {
  display: flex; /* 오버레이가 보이는 상태 */
}

/* 💡 스피너 뒤에 둥둥 떠있는 정적 반투명 블랙 미니 카드 */
.overlay::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.35) !important; /* 💡 투명도를 높여(0.75 -> 0.35) 지도 투과율 극대화 */
  backdrop-filter: blur(4px); /* 💡 카드 내부에만 미세 블러 서리유리 질감 */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 14px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 💡 투명도에 맞춰 더 은은해진 그림자 */
  border: 1px solid rgba(255, 255, 255, 0.08); /* 💡 테두리도 더 부드럽게 감쇠 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
}

.spinner-border {
  width: 34px !important;
  height: 34px !important;
  border: 3.5px solid rgba(255, 255, 255, 0.18) !important; /* 💡 투명한 화이트 트랙 */
  border-top: 3.5px solid #ffffff !important; /* 💡 선명하게 대비되는 순백색 회전 스피너 */
  border-radius: 50% !important;
  animation: spinner-border 1s linear infinite !important;
  box-shadow: none !important;
  z-index: 9999; /* 💡 미니 카드 위에 배치 */
  position: relative;
}

/* 아코디언 */
.accordion-section {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto; /* 💡 기본 상태는 수축/팽창하지 않음 */
}

/* 💡 전시 옵션 아코디언이 열렸을 때 축소되지 않고 자연스럽게 늘어나 스크롤을 유도하도록 flex 설정 조정 */
.accordion-section:has(.enc-option-accordion-content.open) {
  flex: 0 0 auto !important;
}

/* 전자해도 목록 */

.enc-list-accordion-content {
  max-height: 0;
  overflow: hidden;
  border-top: none;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.enc-list-accordion-content.open {
  max-height: 1000px; /* 💡 650px에서 1000px로 상향하여 아래 빈 공간을 완전히 덮을 수 있도록 확장 허용 */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 전자해도 옵션 */
.enc-option-accordion-content {
  max-height: 0;
  overflow: hidden;
  border-top: none;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.enc-option-accordion-content.open {
  max-height: none !important; /* 💡 높이 제한을 완전히 풀어 모든 내용이 노출되도록 개선 */
  display: flex;
  flex-direction: column;
  flex: 0 0 auto !important; /* 💡 flex 수축을 비활성화하여 내용물 전체 높이를 보존 */
  min-height: 0;
  overflow: visible !important;
}

/* 해도유형 */

.enc-type-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.enc-type-accordion-content.open {
  max-height: 500px;
}
/* 경로 */
.intersection-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.intersection-accordion-content.open {
  max-height: 300px;
}

/* wp list ovelay */
#wpOverlay {
  position: absolute;
  width: 25%;
  top: 0; /* 헤더 높이 만큼 내려서 위치 조정 */
  right: 0;
  display: none;
  z-index: 5;
  background-color: var(--white-color);
  max-height: 100%; /* 화면 높이에서 헤더 높이만큼 뺀 최대 높이 설정 */
  overflow-y: auto; /* 내용이 넘칠 경우 수직 스크롤바 표시 */
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead {
  width: 100%;
  background-color: #f8f9fa;
}

/* tbody의 display:block + overflow-y:auto 제거 */
/* → 스크롤은 #modal-table-container 에서만 단독 처리 */
tbody {
  width: 100%;
}

tr {
  width: 100%;
}


@media (max-width: 1200px) {
  #overLayContent th,
  #overLayContent td {
    font-size: 12px;
  }
}
@media (max-width: 992px) {
  #overLayContent th,
  #overLayContent td {
    font-size: 10px;
  }
}
@media (max-width: 576px) {
  #wpOverlay {
    position: absolute;
    width: 100%;
    background-color: var(--white-color);
    max-height: 12%;
    overflow-y: auto; /* 내용이 넘칠 경우 수직 스크롤바 표시 */
  }
  #overLayContent th,
  #overLayContent td {
    font-size: 8px;
  }
}

/* 스크롤바 */
::-webkit-scrollbar {
  width: 8px; /* 스크롤바 너비 설정 (기존 2px에서 확장) */
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.04); /* 은은한 트랙 배경 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 투명한 썸 색상 설정 */
  border-radius: 4px;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4); /* 마우스 호버 시 조금 더 어둡게 처리하여 마우스 드래그 편의 개선 */
}

/* 사용설명서 모달 스타일 */
.manual-modal {
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.manual-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 1250px;
  height: 88%;
  max-height: 820px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.manual-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f9fa;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.manual-modal-title {
  margin: 0;
  font-weight: bold;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #333;
}

.manual-modal-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.manual-tabs {
  width: 200px;
  border-right: 1px solid #eee;
  background-color: #fcfcfc;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.manual-tab-link {
  background: none;
  border: none;
  padding: 12px 15px;
  text-align: left;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.manual-tab-link:hover {
  background-color: #f1f3f5;
  color: #000;
}

.manual-tab-link.active {
  background-color: #e9ecef;
  color: #1a73e8;
  font-weight: bold;
  border-left-color: #1a73e8;
}

.manual-tab-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.manual-tab-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.manual-tab-panel.active {
  display: flex;
}

.manual-tab-panel h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #111;
  border-bottom: 2px solid #f1f3f5;
  padding-bottom: 8px;
}

.manual-tab-panel p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  white-space: pre-line;
}

.manual-img-placeholder {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 5px;
}

.placeholder-text {
  display: none;
}

.manual-img-placeholder img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f8fafc;
}

/* 2번째 열(차트 이름) 줄바꿈 가독성 개선 */
#modal-table-container td:nth-child(2) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 💡 선택 목록 팝업 내 데이터 행(tbody tr)에만 부드러운 블루 파스텔톤 호버 색상 반영 (헤더 hover 무반응 조치) */
#modal-table-container tbody tr:hover {
  background-color: #f0f2fd !important;
  opacity: 1 !important;
  transition: background-color 0.15s ease;
}


#modal-table-container thead tr:hover {
  background-color: transparent !important;
}

/* 🎨 각 레이어별 고유 색상 박스 외곽선 및 프리미엄 스타일링 */
.layer-color-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.layer-color-box:hover {
  transform: scale(1.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
}


#selectDeleteBtn:disabled,
#moveToSelectedCell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}