/*!
 * 네이버 중개소 매물 호가 표 — 상세페이지 공용 (2026-09-18)
 * 놓이는 곳: /www/detail_page/hoga.css
 *
 * ★★ 이 두 줄이 없으면 머리글과 본문 칸이 어긋난다.
 *    상세페이지에는 좁은 화면 대비로 아래 규칙이 들어 있다:
 *       .m-sec table{ display:block; overflow-x:auto; }
 *       .m-sec table thead, .m-sec table tbody{ display:table; width:100%; min-width:520px; }
 *    그러면 머리글과 본문이 **각각 독립된 표**가 되어 칸 폭을 따로 계산한다.
 *    칸이 2~3개인 표에서는 티가 안 났지만 7~8개인 호가표에서는 최대 210px 어긋났다.
 *    → 호가표만 제자리로 돌리고, 가로 스크롤은 감싸는 .hoga-scroll 이 맡는다
 *      (표 자신에게 overflow 를 주면 같은 문제가 되풀이된다).
 */
.hoga-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.m-sec table.hoga { display: table; width: 100%; min-width: 620px; }
.m-sec table.hoga thead { display: table-header-group; width: auto; min-width: 0; }
.m-sec table.hoga tbody { display: table-row-group;    width: auto; min-width: 0; }

table.hoga { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 6px; }

/* 머리글 색은 표마다 다르다 (2026-09-18 사장님 지시 — 파랑 하나로 통일했더니
   세 표가 구별되지 않았다). 상세페이지가 원래 쓰던 색 그대로다:
   매매=빨강 · 전세=파랑 · 월세=초록. 바탕은 옅은 톤, 글씨는 진한 톤. */
table.hoga th { border: 1px solid #e3e8ef; padding: 12px 10px;
                font-weight: 700; letter-spacing: -.2px; }
table.hoga.t-sale  th { background: #fdecea; color: #c0392b; border-color: #f2cdc7; }
table.hoga.t-jeon  th { background: #e9f0fe; color: #2563eb; border-color: #c9daf9; }
table.hoga.t-month th { background: #e9f5ed; color: #1e7e34; border-color: #c7e4d1; }

table.hoga td { padding: 12px 10px; border: 1px solid #e3e8ef; text-align: center; }
table.hoga td.no { width: 34px; background: #fbfcfe; color: #8b94a3; font-weight: 700; }
table.hoga td.tc { font-weight: 800; color: #1f2937; }
table.hoga td.bold { font-weight: 700; color: #1f2937; }

/* 표 아래 꼬리말 — 공개 26개 사이트와 같은 문구·같은 자리(오른쪽) */
.hoga-foot { display: flex; justify-content: flex-end; gap: 20px;
             font-size: 12.5px; margin: 0 0 34px; }
.hoga-foot .brand { color: #c0392b; font-weight: 700; }
.hoga-foot .ref { color: #8b94a3; }

@media (max-width: 600px) {
  table.hoga { font-size: 12.5px; }
  table.hoga th { padding: 9px 5px; }
  table.hoga td { padding: 9px 5px; }
  table.hoga td.no { width: 24px; }
}

/* 한 섹션 안에서 갈래를 나누는 작은 제목 (2026-09-18)
   더퍼스트 A/B블럭, 메트로블 도시형/오피스텔처럼 호가가 두 벌인 페이지에서 쓴다.
   ★ 페이지마다 있던 .hoga-sub 를 여기로 모았다 — 더퍼스트에는 아예 없어서
     글자가 맨몸으로 나왔다. 공용 CSS 에 두면 어느 페이지에 붙여도 같게 보인다.
   ★ h3 가 아니라 p 로 쓴다. 큰 제목을 하나 더 만들면 목차 생성이 섹션으로 오해한다. */
/* 선택자를 .m-sec 아래로 한 단계 올렸다 (2026-09-18).
   그냥 `.hoga-sub` 로 두었더니 더퍼스트에서 페이지 자신의 `.m-sec p` 규칙이 이겨
   굵게(800)도 안 되고 크기도 16px 로 나왔다. `.m-sec .hoga-sub` 는 그보다 세다. */
.m-sec .hoga-sub {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #37424e;
  letter-spacing: -.3px;
}
.m-sec .hoga-sub::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background: #4263eb;
  border-radius: 2px;
}