/* 전세·월세 + 매물 카테고리 버튼 (PC·모바일 공통)
   메인(parts/category_bar.ejs, home.ejs, mobile.ejs)과 아파트·전월세 앱(views/index.ejs)이 같이 쓴다.
   1줄: 토지 · 전원주택 · 상가·건물·사무실 · 창고·공장 / 2줄: 전세 [통합검색] · 월세 [통합검색] · 아파트 · 빌라·연립 */
.cm-box { padding: 6px; border: 1px solid #666; border-radius: 6px; box-sizing: border-box; background: #fff; }
.cm-row { display: flex; gap: 8px; }
.cm-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 42px;
  padding: 0 8px; border-radius: 6px; box-sizing: border-box; background: var(--cm-bg); color: #fff !important;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px; line-height: 1; white-space: nowrap; text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .1); transition: filter .15s, transform .15s; }
.cm-btn:hover { filter: brightness(1.12); }
.cm-btn:active { transform: translateY(1px); }
.cm-btn small { font-size: 13px; font-weight: 500; opacity: .92; }
/* 색: 같은 묶음은 같은 색 */
.cm-sell { --cm-bg: linear-gradient(180deg, #d27684, #bf6070); }  /* 전세·월세: 로즈 */
.cm-apt { --cm-bg: linear-gradient(180deg, #4fb0b8, #3b9aa3); }   /* 아파트·빌라: 청록 */
.cm-cat { --cm-bg: linear-gradient(180deg, #6b8fb5, #577ba2); }   /* 토지·전원주택·상가·창고: 스카이 블루 */

/* 모바일: 모든 버튼 이름을 한 줄로. 1줄·2줄이 같은 4칸(표처럼)을 함께 써서 위아래 세로줄이 맞음.
   칸 폭은 두 줄 중 긴 이름에 맞춰 정해짐 (상가·건물·사무실 칸이 가장 넓음) */
.cm-m { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 4px; padding: 8px 6px; }
.cm-m .cm-row { display: contents; }
.cm-m .cm-btn { height: 40px; padding: 0 3px; gap: 2px; font-size: min(13px, 3.4vw); letter-spacing: -.6px; }
.cm-m .cm-btn small { font-size: min(11px, 2.9vw); letter-spacing: -.7px; }