/* ════════════════════════════════════════════════════════════════
   sidebar-menu.css — index.html/list.html 좌측 "매물종류/테마종류" 사이드바
   (2026-08-31 신규) sidebar-menu.js가 #sbm-mount에 렌더링하는 마크업 전용 스타일.
   admin "사이드바 메뉴 관리"에서 꺼두면 #sbm-mount가 비어있는 채로 display:none 처리되므로
   .sbm-sidebar 관련 스타일은 항상 로드해둬도 무해하다.
════════════════════════════════════════════════════════════════ */
.sbm-sidebar {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
}
/* 섹션 구분선 — 예전 8px 두께 회색 띠 대신 1px 얇은 선으로 바꿔 항목 간 여백을 줄였다. */
.sbm-section + .sbm-section {
  border-top: 1px solid #edf1f5;
}
.sbm-section-title {
  background: var(--color-accent-dark, #d9870b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: -.1px;
}
/* 항목 목록 — li를 벽 끝까지 채우던 풀블리드 막대 대신 좌우 여백을 둔 둥근 칩으로 바꾸고,
   세로 패딩도 줄여(10px→8px) 전체적으로 더 촘촘하고 정돈된 느낌을 준다. */
.sbm-list {
  list-style: none;
  margin: 0;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sbm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: #46536b;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.sbm-item:hover { background: #f2f5f9; color: #1e293b; }
/* 선택 상태 — 배경색만이 아니라 얇은 테두리 링도 함께 둬서 더 또렷하게 보이게 했다. */
.sbm-item.active {
  background: #fef3e2;
  color: var(--color-accent-dark, #d9870b);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(249,162,31,.22);
}
.sbm-item-icon { font-size: 17px; color: #9aa7b8; flex-shrink: 0; transition: color .12s; }
.sbm-item:hover .sbm-item-icon { color: #64748b; }
.sbm-item.active .sbm-item-icon { color: var(--color-accent-dark, #d9870b); }
.sbm-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 선택 표시 — 배경색만으로는 눈에 잘 안 띌 수 있어(색맹/저시력, 빠르게 훑어볼 때 등)
   선택된 항목에는 체크 아이콘을 추가로 보여준다(active일 때만 마크업에 존재).
   브랜드 accent 색(주황, base.css --color-accent)을 써서 파란색 선택배경과도
   또렷하게 구분되게 했다. */
.sbm-item-check { font-size: 17px; color: var(--color-accent, #f9a21f); flex-shrink: 0; }
/* 화살표 — 평소엔 숨겨뒀다가 hover/active일 때만 살짝 미끄러져 나타나서 "클릭하면
   이동한다"는 힌트로 쓰이게 했다(예전엔 항상 흐릿하게 떠 있기만 해서 장식처럼 보였다). */
.sbm-item-chevron {
  color: #cbd5e1;
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .12s, transform .12s;
}
.sbm-item:hover .sbm-item-chevron,
.sbm-item.active .sbm-item-chevron { opacity: 1; transform: translateX(0); }
.sbm-item.active .sbm-item-chevron { color: var(--color-accent-dark, #d9870b); }

/* 레이아웃 — 2026-09-01(2차 수정): position:fixed(화면에 계속 떠있는 방식)는 스크롤해도
   안 움직여서 "기존 매물카드처럼 스크롤에 반응"하지 않는다는 피드백을 받아 되돌린다.
   본문(index.html)과 폭을 나눠 쓰지 않는 원칙은 그대로 유지 — #sbm-mount는 여전히
   본문 왼쪽 여백에 얹히지만, 이제는 문서 흐름 기준 position:absolute라서 페이지를
   스크롤하면 매물카드들과 똑같이 같이 움직여 사라진다.
   #sbm-mount-anchor(index.html에서만 #sbm-mount를 감싸는 높이 0 기준점, position:relative)가
   "다양한 종류별 매물" 섹션 바로 위, 원래 있던 문서상 위치를 그대로 잡아주므로
   #sbm-mount는 top:0만으로 그 자리에서 시작한다.
   본문(.section)이 max-width:1200px로 가운데 정렬되므로, 그 왼쪽 여백에 사이드바(220px)가
   겹치지 않고 들어갈 만큼 뷰포트가 넓을 때만(대략 1700px 이상) 보이고, 그보다 좁으면 숨긴다.
   list.html은 #sbm-mount-anchor가 없고, 자기만의 레이아웃(list.css의 .lp-body #sbm-mount,
   특정도가 더 높음)을 써서 이 규칙들을 항상 덮어쓰므로 영향받지 않는다. */
@media (min-width: 1700px) {
  #sbm-mount-anchor { position: relative; height: 0; }
  #sbm-mount {
    position: absolute;
    /* .sec-wrap padding-top:30px(index.css)만큼 내려서 "전체매물 지도로 보기" 카드
       상단과 높이를 맞춘다 */
    top: 30px;
    right: calc(50% + 620px); /* 가운데 정렬된 1200px 본문의 왼쪽 끝에서 20px 띄운 위치 */
    width: 220px;
  }
}
@media (max-width: 1699px) {
  #sbm-mount { display: none; }
}