/* ---------------------------------------------------------------------------
 * Form_Menu.xfdl 변환본 — 좌측 사이드바 enhancement + reference fragment 스타일.
 *
 * 원본 시각 요소:
 *   - 270px 폭 좌측 패널 (Static01 background=#20202e)
 *   - 상단 3-탭 (btnSystem/btnWork/btnBookmark, 각 90×40)
 *   - 검색 입력 (edt_search, 250×30, placeholder="폼코드를 입력하세요.")
 *   - 검색 결과 ListBox 드롭다운 (div_searchMenu, 245×129)
 *   - 닫기 버튼 (btnClose, ◀ 50×85)
 *
 * gift-was-mvc 의 .admin-sidebar 가 사이드바 컨테이너 역할은 이미 함.
 * 본 CSS 는 (a) 상단 모드 탭, (b) 검색 박스 + 드롭다운, (c) 닫기 버튼,
 * (d) reference fragment 의 매핑 표 스타일을 추가.
 * --------------------------------------------------------------------------- */

/* (a) 모드 탭 — btnSystem/btnWork/btnBookmark 대응 */
.sidebar-mode-tabs {
  display: flex;
  border-bottom: 1px solid #2a2c3a;
}
.sidebar-mode-tabs .mode-btn {
  flex: 1 1 0;
  height: 40px;
  background: #1a1b25;
  color: #c0c6d4;
  border: 0;
  border-right: 1px solid #2a2c3a;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-mode-tabs .mode-btn:last-child {
  border-right: 0;
}
.sidebar-mode-tabs .mode-btn:hover {
  background: #232532;
  color: #ffffff;
}
.sidebar-mode-tabs .mode-btn.is-active {
  background: #20202e;
  color: #ffffff;
  font-weight: 600;
  position: relative;
}
.sidebar-mode-tabs .mode-btn.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #4f6b96;
}

/* (b) 검색 박스 — edt_search 대응 */
.sidebar-search {
  position: relative;
  padding: 12px 10px;
  background: #1a1b25;
}
.sidebar-search-input {
  width: 100%;
  height: 30px;
  padding: 4px 32px 4px 10px;
  border: 1px solid #6a7088;
  border-radius: 5px;
  background: #3f4357;
  color: #ffffff;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.sidebar-search-input::placeholder {
  color: #d6dbe4;
  opacity: 1; /* Firefox 기본 placeholder 투명도 보정 */
}
.sidebar-search-input:focus {
  border-color: #4f6b96;
}
.sidebar-search-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #4f6b96;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
}
.sidebar-search-btn:hover {
  background: rgba(79, 107, 150, 0.18);
}

/* 검색 드롭다운 — div_searchMenu + ListBox#lst_search 대응 */
.sidebar-search-dropdown {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 46px;
  max-height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #b8c0cf;
  border-radius: 4px;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.25);
}
.sidebar-search-dropdown.is-open {
  display: block;
}
.sidebar-search-dropdown .item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 13px;
  color: #1f2a44;
  cursor: pointer;
  border-bottom: 1px solid #eef0f3;
}
.sidebar-search-dropdown .item:last-child { border-bottom: 0; }
.sidebar-search-dropdown .item:hover,
.sidebar-search-dropdown .item.is-highlight {
  background: #eceefa;
}
.sidebar-search-dropdown .item .code {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: #4f6b96;
  margin-right: 8px;
}
.sidebar-search-dropdown .empty {
  padding: 16px;
  text-align: center;
  color: #888;
  font-size: 12px;
}

/* (c) 닫기 버튼 — btnClose ◀ 대응 — 사이드바 우상단 */
/* RHPT-74: 밝은 사이드바에 맞춰 닫기(◀) 버튼도 라이트 테마로 (다크 배경용 흰색 → 회색 아이콘). */
.sidebar-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
}
.sidebar-close:hover {
  background: #eceefa;
  color: #0c27c1;
}

/* 사이드바 접힘 상태 */
.admin-sidebar.is-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-right: 0;
}

/* RHPT-74: 긴 메뉴명(예: "리하우스 제휴점 미수 제외 계약 관리")이 2줄로 줄바꿈되지 않도록 메뉴 트리(사이드바) 폭 확대.
   layout.css 기본 240px 을 290px 로 오버라이드하고, 헤더 토글 숨김 마진(.is-hide)도 새 폭에 맞춰 동기화. */
.admin-sidebar .sidebar-cont {
  width: 290px;
}
.admin-sidebar.is-hide {
  margin-left: -290px;
}

/* (d) form-menu reference fragment — Form_Top 매핑표와 동일 톤 */
.form-menu-fragment {
  padding: 24px;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #1f2a44;
}
.form-menu-fragment h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #2c4368;
}
.form-menu-fragment p.lead {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
.form-menu-mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 24px;
}
.form-menu-mapping th,
.form-menu-mapping td {
  border: 1px solid #d0d4dc;
  padding: 8px 12px;
  vertical-align: top;
}
.form-menu-mapping thead th {
  background: #eceefa;
  color: #1f2a44;
  font-weight: 600;
}
.form-menu-mapping td code {
  background: #f5f6f8;
  padding: 1px 5px;
  border-radius: 2px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  color: #2c4368;
}
.form-menu-fragment .demo-box {
  background: #fbfbfc;
  border: 1px dashed #b8c0cf;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #1f2a44;
}
.form-menu-fragment .demo-box strong { color: #2c4368; }