/* 지역별 매물 페이지(서버에서 그리는 HTML) — style.css 와 같은 TDS 값, 라이트 모드 고정
   글자 크기는 t3 22 · t5 17 · t6 15 · t7 13 넷, 굵기는 400 · 700 둘 */
:root {
  color-scheme: light;
  --grey-50: #f9fafb; --grey-100: #f2f4f6; --grey-200: #e5e8eb; --grey-500: #8b95a1; --grey-600: #6b7684;
  --grey-700: #4e5968; --grey-800: #333d4b; --grey-900: #191f28;
  --accent-50: #e8f3ff; --accent-500: #3182f6; --accent-600: #2272eb; --white: #ffffff;
  --t3: 22px; --t3-lh: 31px; --t5: 17px; --t5-lh: 25.5px; --t6: 15px; --t6-lh: 22.5px; --t7: 13px; --t7-lh: 19.5px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r-sm: 8px; --r-md: 12px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--grey-900); font-family: var(--font); font-size: var(--t6); line-height: var(--t6-lh);
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  height: 64px; padding: 0 var(--s5); background: var(--white); border-bottom: 1px solid var(--grey-100); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; white-space: nowrap; }
.logo { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--accent-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l6-5.2 6 5.2V18H6z' fill='white'/%3E%3C/svg%3E") center / 24px no-repeat; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 var(--s4); border-radius: 10px;
  font-size: var(--t6); font-weight: 700; white-space: nowrap; }
.btn.primary { background: var(--accent-500); color: var(--white); }
.btn.primary:hover { background: var(--accent-600); }
.btn.weak { background: var(--accent-50); color: var(--accent-600); }

.wrap { max-width: 760px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s8); }
.crumbs { font-size: var(--t7); line-height: var(--t7-lh); color: var(--grey-500); }
.crumbs a { color: var(--grey-600); }
.crumbs a:hover { color: var(--accent-600); }
h1 { margin-top: var(--s3); font-size: var(--t3); line-height: var(--t3-lh); font-weight: 700; }
.lead { margin-top: var(--s2); color: var(--grey-700); }
section { margin-top: var(--s8); }
h2 { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
h2 a:hover { color: var(--accent-600); }
h2 .n { font-size: var(--t7); font-weight: 400; color: var(--grey-500); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.chips a { display: inline-flex; align-items: center; gap: var(--s1); height: 36px; padding: 0 var(--s3); border-radius: var(--r-sm);
  background: var(--grey-100); color: var(--grey-700); font-size: var(--t7); }
.chips a:hover { background: var(--accent-50); color: var(--accent-600); }
.chips b { color: var(--grey-900); }
.chips a:hover b { color: inherit; }

.rows { margin-top: var(--s2); }
.row { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--grey-100); }
.thumb { flex: none; width: 88px; height: 88px; border-radius: var(--r-md); overflow: hidden; background: var(--grey-100); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--t7); color: var(--grey-500); }
.body { min-width: 0; }
.price { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
.ttl { margin-top: 2px; font-size: var(--t6); line-height: var(--t6-lh); font-weight: 400; color: var(--grey-800); }
.ttl a:hover { color: var(--accent-600); text-decoration: underline; }
.meta { margin-top: 2px; font-size: var(--t7); line-height: var(--t7-lh); color: var(--grey-600); }
.meta span { white-space: nowrap; }
.more { margin-top: var(--s5); }
.more a:not(.btn) { color: var(--accent-600); font-weight: 700; }

.foot { padding: var(--s6) var(--s5) var(--s8); background: var(--grey-50); font-size: var(--t7); line-height: var(--t7-lh); color: var(--grey-600); }
.foot p { max-width: 720px; margin: 0 auto var(--s1); }
.foot a { color: var(--grey-700); text-decoration: underline; }

@media (max-width: 480px) {
  .bar { padding: 0 var(--s4); }
  .brand { font-size: var(--t6); }
  .wrap { padding: var(--s4) var(--s4) var(--s8); }
  .thumb { width: 72px; height: 72px; }
}