/* ════════════════════════════════════════════════════════════════
   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;
}
/* 2026-09: "매물 종류" 타이틀 옆 전체/매매/월세 세그먼트 탭 — 타이틀과 한 줄에 나란히
   배치되도록 이 타이틀만 flex로 바꾼다(다른 섹션 타이틀은 기존 block 유지). */
.sbm-section-title-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* 주황 타이틀 바탕 위에 얹는 반투명 흰색 알약(pill) 그룹 — 선택된 탭만 흰 배경으로
   또렷하게 떠 보이게 해서 눌러도 되는 버튼임을 바로 알 수 있게 한다. */
.sbm-tx-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.sbm-tx-tab {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.sbm-tx-tab:hover { color: #fff; }
.sbm-tx-tab.active {
  background: #fff;
  color: var(--color-accent-dark, #d9870b);
}
/* 항목 목록 — 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는 그 섹션의 padding-top만큼만 내려서 그 자리에서 시작한다.
   (2026-09 사용자 피드백 "사이드바를 이달의 추천부동산 상단 라인에 맞춰줘": 이전엔 앵커가
   "다양한 종류별 매물"(cat-grid) 섹션 바로 위에 있어서 top:30px(그 섹션의 기본
   padding-top)이었는데, 앵커를 "이달의 추천 부동산" 섹션 바로 위로 옮기면서 그 섹션
   자체의 padding-top(24px, index.html의 인라인 style="padding: 24px 0 30px")에 맞춰
   top 값도 24px로 함께 바꿨다 — 사이드바 상단이 "이달의 추천 부동산" 타이틀 줄과
   나란히 시작하게 하기 위함.)
   본문(.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:24px(index.html 인라인 style)만큼
       내려서 그 섹션 타이틀 줄과 상단 높이를 맞춘다 */
    top: 24px;
    right: calc(50% + 620px); /* 가운데 정렬된 1200px 본문의 왼쪽 끝에서 20px 띄운 위치 */
    width: 220px;
  }
}
@media (max-width: 1699px) {
  #sbm-mount { display: none; }
}