feat(listings): Listings shell+스타일+라우트 배선 + 청약 교차링크 + 문서

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UHXzpsZQxKG9hQmNRfZjRS

src/pages/listings/Listings.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import ListingsTab from './components/ListingsTab';
+import ToolsTab from './components/ToolsTab';
+import CriteriaTab from './components/CriteriaTab';
+import './Listings.css';
+
+const TABS = [
+  { id: 'listings', label: '매물' },
+  { id: 'tools', label: '판정 도구' },
+  { id: 'criteria', label: '조건' },
+];
+
+const Listings = () => {
+  const [tab, setTab] = useState('listings');
+  return (
+    <div className="lst">
+      <header className="lst-header">
+        <div>
+          <p className="lst-kicker">실매물 · 안전마진</p>
+          <h1>매물 · 안전마진</h1>
+          <p className="lst-sub">매매/전세 실매물 수집 · 전세가율·호가율 판정 · 예산 계산.</p>
+        </div>
+        <Link className="lst-filter-btn" to="/realestate">청약으로 →</Link>
+      </header>
+
+      <div className="lst-tabbar">
+        {TABS.map((t) => (
+          <button key={t.id} type="button"
+            className={`lst-tabbtn ${tab === t.id ? 'is-active' : ''}`}
+            onClick={() => setTab(t.id)}>{t.label}</button>
+        ))}
+      </div>
+
+      {tab === 'listings' && <ListingsTab />}
+      {tab === 'tools' && <ToolsTab />}
+      {tab === 'criteria' && <CriteriaTab />}
+
+      <p className="lst-foot-disclaimer">
+        ※ 모든 판정·계산은 참고용 근사치입니다. 등기부 선순위·토지거래허가·정책 수치는 반드시 원문/전문가로 확인하세요.
+      </p>
+    </div>
+  );
+};
+
+export default Listings;