diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index 7d3c40e..4a872b7 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -71,3 +71,27 @@ export const IconTodo = () =>
             <line x1="17" y1="12" x2="21" y2="12" />
         </>
     );
+
+export const IconSubscription = () =>
+    svg(
+        <>
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14,2 14,8 20,8" />
+            <polyline points="9,15 11,17 15,13" />
+            <line x1="9" y1="10" x2="15" y2="10" />
+        </>
+    );
+
+export const IconBuilding = () =>
+    svg(
+        <>
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M9 21V9" />
+            <rect x="6" y="6" width="3" height="3" />
+            <rect x="11" y="6" width="3" height="3" />
+            <rect x="16" y="6" width="2" height="3" />
+            <rect x="11" y="11" width="3" height="3" />
+            <rect x="16" y="11" width="2" height="3" />
+            <rect x="11" y="16" width="3" height="3" />
+        </>
+    );
diff --git a/src/index.css b/src/index.css
index cedc139..a324804 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,12 +82,15 @@
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
     /* ── Page Accent Colors ──────────────────────────────────────────── */
-    --accent-home:   #00d4ff;
-    --accent-blog:   #c084fc;
-    --accent-lotto:  #34d399;
-    --accent-stock:  #38bdf8;
-    --accent-travel: #fb923c;
-    --accent-lab:    #fbbf24;
+    --accent-home:        #00d4ff;
+    --accent-blog:        #c084fc;
+    --accent-lotto:       #34d399;
+    --accent-stock:       #38bdf8;
+    --accent-realestate:    #f43f5e;
+    --accent-subscription:  #f43f5e;
+    --accent-todo:          #f472b6;
+    --accent-travel:      #fb923c;
+    --accent-lab:         #fbbf24;
 
     /* ── Convenience alias ───────────────────────────────────────────── */
     --accent: var(--neon-cyan);
diff --git a/src/pages/realestate/RealEstate.css b/src/pages/realestate/RealEstate.css
new file mode 100644
index 0000000..7baa493
--- /dev/null
+++ b/src/pages/realestate/RealEstate.css
@@ -0,0 +1,1026 @@
+/* ═══════════════════════════════════════════════════════════════════════
+   RealEstate.css — 부동산 청약 관리 페이지
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.re {
+    display: grid;
+    gap: 28px;
+    width: 100%;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.re-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    gap: 24px;
+    align-items: center;
+}
+
+.re-kicker {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 12px;
+    color: var(--accent-realestate, #f59e0b);
+    margin: 0 0 10px;
+}
+
+.re-header h1 {
+    margin: 0 0 12px;
+    font-family: var(--font-display);
+    font-size: clamp(30px, 4vw, 40px);
+}
+
+.re-sub {
+    margin: 0;
+    color: var(--muted);
+    font-size: 14px;
+}
+
+.re-header-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 18px;
+    flex-wrap: wrap;
+}
+
+/* ── 스탯 바 ──────────────────────────────────────────────────────────── */
+
+.re-stats-bar {
+    display: flex;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+    align-self: center;
+}
+
+.re-stat-item {
+    padding: 18px 22px;
+    text-align: center;
+    border-right: 1px solid var(--line);
+    flex: 1;
+}
+
+.re-stat-item:last-child {
+    border-right: none;
+}
+
+.re-stat-item__value {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--text-bright);
+    margin: 0;
+    letter-spacing: -0.03em;
+    line-height: 1;
+}
+
+.re-stat-item__label {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin: 6px 0 0;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+/* ── 탭 바 ────────────────────────────────────────────────────────────── */
+
+.re-tabs-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.re-tabs {
+    display: flex;
+    gap: 2px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 4px;
+}
+
+.re-tab {
+    padding: 8px 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-dim);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.2s var(--ease-out);
+    white-space: nowrap;
+}
+
+.re-tab:hover {
+    color: var(--text-bright);
+    background: var(--surface-raised);
+}
+
+.re-tab.is-active {
+    color: var(--text-bright);
+    background: var(--bg-tertiary);
+    box-shadow: 0 0 0 1px var(--line);
+}
+
+/* ── 필터 ─────────────────────────────────────────────────────────────── */
+
+.re-filter {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.re-filter-btn {
+    padding: 5px 14px;
+    border: 1px solid var(--line);
+    background: transparent;
+    color: var(--text-dim);
+    border-radius: 100px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: var(--font-body);
+    transition: all 0.15s;
+}
+
+.re-filter-btn:hover {
+    border-color: var(--line-bright);
+    color: var(--text);
+}
+
+.re-filter-btn.is-active {
+    background: rgba(245, 158, 11, 0.12);
+    border-color: rgba(245, 158, 11, 0.4);
+    color: #f59e0b;
+}
+
+/* ── 목록 레이아웃 ────────────────────────────────────────────────────── */
+
+.re-list-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 20px;
+    align-items: start;
+}
+
+.re-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 14px;
+}
+
+/* ── 우측 패널 (지도 + 상세) ──────────────────────────────────────────── */
+
+.re-right-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    position: sticky;
+    top: 24px;
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+}
+
+.re-panel--map {
+    flex-shrink: 0;
+}
+
+.re-mini-map-wrap {
+    height: 240px;
+    position: relative;
+}
+
+.re-map-label {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 800;
+    background: rgba(7, 11, 25, 0.85);
+    backdrop-filter: blur(6px);
+    border: 1px solid var(--line-bright);
+    border-radius: var(--radius-sm);
+    padding: 4px 10px;
+    font-size: 11px;
+    color: var(--text-dim);
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    pointer-events: none;
+}
+
+/* ── 단지 카드 ────────────────────────────────────────────────────────── */
+
+.re-card {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 18px;
+    background: var(--surface);
+    cursor: pointer;
+    transition: all 0.2s var(--ease-out);
+    display: grid;
+    gap: 9px;
+    position: relative;
+    overflow: hidden;
+    animation: fadeIn 0.3s var(--ease-out) both;
+}
+
+.re-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #f59e0b, #f97316);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.re-card:hover {
+    border-color: var(--line-bright);
+    background: var(--surface-raised);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.re-card:hover::before,
+.re-card.is-selected::before {
+    opacity: 1;
+}
+
+.re-card.is-selected {
+    border-color: rgba(245, 158, 11, 0.4);
+    background: var(--surface-raised);
+    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12), 0 0 60px rgba(245, 158, 11, 0.04);
+}
+
+.re-card__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.re-card__name {
+    font-family: var(--font-display);
+    font-size: 15px;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text-bright);
+    line-height: 1.3;
+}
+
+.re-card__address {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.re-card__stats {
+    font-size: 13px;
+    color: var(--text-dim);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.re-card__dot {
+    color: var(--text-muted);
+}
+
+.re-card__dday {
+    font-family: var(--font-display);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+}
+
+.re-priority-star {
+    color: #f59e0b;
+    font-size: 14px;
+    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
+}
+
+/* ── 뱃지 & 칩 ────────────────────────────────────────────────────────── */
+
+.re-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 9px;
+    border-radius: 100px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.re-badge--lg {
+    padding: 4px 12px;
+    font-size: 11px;
+}
+
+.re-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: var(--radius-xs);
+    font-size: 11px;
+    background: rgba(245, 158, 11, 0.1);
+    color: #f59e0b;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.re-chip--lg {
+    padding: 5px 12px;
+    font-size: 12px;
+}
+
+.re-chip--tag {
+    background: var(--neon-purple-muted);
+    color: var(--neon-purple);
+    border-color: rgba(139, 92, 246, 0.2);
+}
+
+.re-chip-group {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+/* ── 상세 패널 ────────────────────────────────────────────────────────── */
+
+.re-detail {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+    animation: fadeIn 0.2s var(--ease-out);
+}
+
+.re-detail--empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 24px;
+    gap: 12px;
+    color: var(--text-muted);
+    font-size: 13px;
+    min-height: 320px;
+}
+
+.re-detail__empty-icon {
+    font-size: 44px;
+    opacity: 0.3;
+}
+
+.re-detail__header {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    border-bottom: 1px solid var(--line);
+    background: var(--surface-raised);
+}
+
+.re-detail__name {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 700;
+    margin: 8px 0 4px;
+    color: var(--text-bright);
+}
+
+.re-detail__address {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.re-detail__header-actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.re-detail__section {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--line-subtle);
+}
+
+.re-detail__section:last-of-type {
+    border-bottom: none;
+}
+
+.re-detail__section-title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0 0 10px;
+}
+
+.re-detail__stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+.re-stat {
+    text-align: center;
+}
+
+.re-stat__label {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 0 0 4px;
+}
+
+.re-stat__value {
+    font-family: var(--font-display);
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text-bright);
+    margin: 0;
+}
+
+.re-detail__memo {
+    font-size: 13px;
+    color: var(--text-dim);
+    margin: 0;
+    line-height: 1.7;
+}
+
+.re-detail__actions {
+    padding: 16px 20px;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+/* ── 타임라인 ─────────────────────────────────────────────────────────── */
+
+.re-timeline {
+    display: grid;
+    gap: 0;
+}
+
+.re-timeline__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 8px 0;
+    position: relative;
+}
+
+.re-timeline__item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 22px;
+    bottom: -8px;
+    width: 1px;
+    background: var(--line);
+}
+
+.re-timeline__dot {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: 2px solid var(--line-bright);
+    background: var(--bg);
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.re-timeline__dot--start {
+    background: var(--neon-cyan);
+    border-color: var(--neon-cyan);
+    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+}
+
+.re-timeline__dot--result {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
+}
+
+.re-timeline__label {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin: 0 0 2px;
+}
+
+.re-timeline__date {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-bright);
+    margin: 0;
+}
+
+/* ── 패널 ─────────────────────────────────────────────────────────────── */
+
+.re-panel {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+}
+
+.re-panel__head {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.re-panel__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+    font-size: 10px;
+    color: var(--accent-realestate, #f59e0b);
+    margin: 0 0 6px;
+}
+
+.re-panel__head h3 {
+    margin: 0 0 4px;
+    font-family: var(--font-display);
+    font-size: 18px;
+}
+
+.re-panel__sub {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-muted);
+}
+
+/* ── 지도 ─────────────────────────────────────────────────────────────── */
+
+.re-map-container {
+    height: 520px;
+}
+
+.re-map {
+    width: 100%;
+    height: 100%;
+}
+
+/* Leaflet popup 커스텀 */
+.leaflet-popup-content-wrapper {
+    background: #0d1427 !important;
+    border: 1px solid rgba(0, 212, 255, 0.25) !important;
+    border-radius: 10px !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
+    color: #ccd6f6 !important;
+}
+
+.leaflet-popup-tip {
+    background: #0d1427 !important;
+}
+
+.re-popup {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    font-family: 'Inter', 'Noto Sans KR', sans-serif;
+    min-width: 160px;
+}
+
+.re-popup strong {
+    font-size: 13px;
+    color: #e8f0fe;
+    font-weight: 600;
+}
+
+.re-popup span {
+    font-size: 11px;
+    color: #8892b0;
+}
+
+/* ── 일정 뷰 ──────────────────────────────────────────────────────────── */
+
+.re-schedule {
+    padding: 24px;
+    display: grid;
+    gap: 28px;
+}
+
+.re-schedule-section {
+    display: grid;
+    gap: 0;
+}
+
+.re-schedule-section__title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0 0 14px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--line);
+}
+
+.re-schedule-section__title--past {
+    opacity: 0.5;
+}
+
+.re-schedule-item {
+    display: grid;
+    grid-template-columns: 100px 12px 1fr;
+    gap: 0 16px;
+    align-items: center;
+    padding: 14px 0;
+    border-bottom: 1px solid var(--line-subtle);
+}
+
+.re-schedule-item:last-child {
+    border-bottom: none;
+}
+
+.re-schedule-item__date {
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+}
+
+.re-schedule-item__dday {
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
+
+.re-schedule-item__datestr {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+.re-schedule-item__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    justify-self: center;
+    flex-shrink: 0;
+}
+
+.re-schedule-item__content {
+    display: grid;
+    gap: 2px;
+}
+
+.re-schedule-item__complex {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-bright);
+    margin: 0;
+}
+
+.re-schedule-item__label {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin: 0;
+}
+
+/* ── 분석 뷰 ──────────────────────────────────────────────────────────── */
+
+.re-analysis {
+    display: grid;
+    gap: 20px;
+}
+
+.re-analysis__stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+}
+
+.re-stat-card {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 20px;
+    background: var(--surface);
+    text-align: center;
+}
+
+.re-stat-card__label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    margin: 0 0 8px;
+}
+
+.re-stat-card__value {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-bright);
+    margin: 0;
+    letter-spacing: -0.03em;
+}
+
+.re-chart-wrapper {
+    padding: 8px 8px 20px;
+}
+
+.re-chart-tooltip {
+    background: var(--bg-secondary);
+    border: 1px solid var(--line-bright);
+    border-radius: var(--radius-sm);
+    padding: 10px 14px;
+    font-family: var(--font-body);
+    font-size: 13px;
+    color: var(--text);
+    box-shadow: var(--shadow-md);
+}
+
+.re-chart-tooltip__value {
+    color: #f59e0b;
+    font-weight: 700;
+    font-family: var(--font-display);
+    font-size: 15px;
+    margin-top: 3px;
+}
+
+/* ── 비교 테이블 ──────────────────────────────────────────────────────── */
+
+.re-table-wrapper {
+    padding: 0 24px 24px;
+    overflow-x: auto;
+}
+
+.re-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+.re-table th {
+    text-align: left;
+    padding: 10px 14px;
+    color: var(--text-muted);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    border-bottom: 1px solid var(--line);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.re-table td {
+    padding: 13px 14px;
+    color: var(--text);
+    border-bottom: 1px solid var(--line-subtle);
+    white-space: nowrap;
+}
+
+.re-table tr:last-child td {
+    border-bottom: none;
+}
+
+.re-table tr:hover td {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.re-table__name {
+    font-weight: 600;
+    color: var(--text-bright) !important;
+    white-space: normal !important;
+}
+
+/* ── 모달 ─────────────────────────────────────────────────────────────── */
+
+.re-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(7, 11, 25, 0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
+.re-modal {
+    background: var(--bg-secondary);
+    border: 1px solid var(--line-bright);
+    border-radius: var(--radius-xl);
+    width: 100%;
+    max-width: 620px;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg), 0 0 60px rgba(245, 158, 11, 0.06);
+    animation: fadeIn 0.2s var(--ease-out);
+}
+
+.re-modal__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--line);
+    position: sticky;
+    top: 0;
+    background: var(--bg-secondary);
+    z-index: 1;
+}
+
+.re-modal__header h3 {
+    font-family: var(--font-display);
+    font-size: 18px;
+    margin: 0;
+}
+
+.re-modal__close {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 16px;
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: var(--radius-xs);
+    transition: color 0.15s, background 0.15s;
+    line-height: 1;
+}
+
+.re-modal__close:hover {
+    color: var(--text-bright);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.re-modal__form {
+    padding: 0;
+}
+
+.re-form-section {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--line-subtle);
+    display: grid;
+    gap: 14px;
+}
+
+.re-form-section:last-of-type {
+    border-bottom: none;
+}
+
+.re-form-section__title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.re-form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+}
+
+.re-form-row--three {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.re-form-label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-dim);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+.re-form-input {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 9px 12px;
+    color: var(--text-bright);
+    font-family: var(--font-body);
+    font-size: 13px;
+    transition: border-color 0.15s;
+    width: 100%;
+}
+
+.re-form-input:focus {
+    outline: none;
+    border-color: rgba(245, 158, 11, 0.5);
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
+}
+
+.re-form-input option {
+    background: var(--bg-secondary);
+}
+
+.re-form-textarea {
+    resize: vertical;
+    min-height: 72px;
+}
+
+.re-modal__footer {
+    padding: 16px 24px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    border-top: 1px solid var(--line);
+    background: var(--bg-secondary);
+    position: sticky;
+    bottom: 0;
+}
+
+/* ── 빈 상태 ──────────────────────────────────────────────────────────── */
+
+.re-empty {
+    color: var(--text-muted);
+    font-size: 13px;
+    text-align: center;
+    padding: 48px 24px;
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 1100px) {
+    .re-list-layout {
+        grid-template-columns: 1fr 340px;
+    }
+}
+
+@media (max-width: 900px) {
+    .re-list-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .re-right-panel {
+        position: static;
+        max-height: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .re-header {
+        grid-template-columns: 1fr;
+    }
+
+    .re-stats-bar {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .re-stat-item {
+        border-right: none;
+        border-bottom: 1px solid var(--line);
+    }
+
+    .re-stat-item:nth-child(1),
+    .re-stat-item:nth-child(2) {
+        border-right: 1px solid var(--line);
+    }
+
+    .re-stat-item:nth-child(3),
+    .re-stat-item:nth-child(4) {
+        border-bottom: none;
+    }
+
+    .re-analysis__stats {
+        grid-template-columns: 1fr;
+    }
+
+    .re-form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .re-form-row--three {
+        grid-template-columns: 1fr;
+    }
+
+    .re-modal {
+        max-height: 95vh;
+    }
+
+    .re-mini-map-wrap {
+        height: 200px;
+    }
+
+    .re-tabs-bar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .re-schedule-item {
+        grid-template-columns: 80px 10px 1fr;
+        gap: 0 12px;
+    }
+}
diff --git a/src/pages/realestate/RealEstate.jsx b/src/pages/realestate/RealEstate.jsx
new file mode 100644
index 0000000..44e1dcc
--- /dev/null
+++ b/src/pages/realestate/RealEstate.jsx
@@ -0,0 +1,909 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import {
+    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
+    ResponsiveContainer, Cell,
+} from 'recharts';
+import { apiGet, apiPost, apiPut, apiDelete } from '../../api';
+import 'leaflet/dist/leaflet.css';
+import './RealEstate.css';
+
+// ── 샘플 데이터 ────────────────────────────────────────────────────────────────
+const SAMPLE_COMPLEXES = [
+    {
+        id: 1,
+        name: '래미안 원베일리',
+        address: '서울 서초구 반포동',
+        lat: 37.5065,
+        lng: 126.9942,
+        units: 2990,
+        types: ['59㎡', '84㎡', '114㎡'],
+        avgPricePerPyeong: 9500,
+        subscriptionStart: '2024-01-08',
+        subscriptionEnd: '2024-01-10',
+        resultDate: '2024-01-15',
+        status: '완료',
+        priority: 'high',
+        tags: ['강남권', '한강뷰', '역세권', '브랜드'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '반포동 재건축 단지. 경쟁률 수백대 1 예상.',
+    },
+    {
+        id: 2,
+        name: '올림픽파크 포레온',
+        address: '서울 강동구 둔촌동',
+        lat: 37.5284,
+        lng: 127.1340,
+        units: 12032,
+        types: ['39㎡', '49㎡', '59㎡', '84㎡'],
+        avgPricePerPyeong: 3800,
+        subscriptionStart: '2022-12-05',
+        subscriptionEnd: '2022-12-07',
+        resultDate: '2022-12-12',
+        status: '완료',
+        priority: 'high',
+        tags: ['대단지', '역세권', '재건축'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '역대 최대 규모 재건축 단지.',
+    },
+    {
+        id: 3,
+        name: '힐스테이트 동탄',
+        address: '경기 화성시 동탄2신도시',
+        lat: 37.2001,
+        lng: 127.0724,
+        units: 1534,
+        types: ['59㎡', '74㎡', '84㎡'],
+        avgPricePerPyeong: 1850,
+        subscriptionStart: '2026-04-10',
+        subscriptionEnd: '2026-04-12',
+        resultDate: '2026-04-17',
+        status: '청약예정',
+        priority: 'normal',
+        tags: ['동탄2', '신도시', 'SRT'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '동탄 핵심 입지. 교통 개선 기대.',
+    },
+    {
+        id: 4,
+        name: '롯데캐슬 마곡',
+        address: '서울 강서구 마곡동',
+        lat: 37.5626,
+        lng: 126.8295,
+        units: 868,
+        types: ['59㎡', '84㎡'],
+        avgPricePerPyeong: 4200,
+        subscriptionStart: '2026-03-20',
+        subscriptionEnd: '2026-03-22',
+        resultDate: '2026-03-27',
+        status: '청약중',
+        priority: 'high',
+        tags: ['마곡', '9호선', '공항철도'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '마곡 업무지구 직주근접. 강서 핵심 입지.',
+    },
+];
+
+const STATUS_CONFIG = {
+    '청약예정': { color: '#00d4ff', bg: 'rgba(0,212,255,0.12)' },
+    '청약중':   { color: '#34d399', bg: 'rgba(52,211,153,0.12)' },
+    '결과발표': { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
+    '완료':     { color: '#6b7280', bg: 'rgba(107,114,128,0.10)' },
+};
+
+const PRIORITY_LABELS = { high: '★ 최우선', normal: '보통', low: '낮음' };
+
+const EMPTY_FORM = {
+    name: '', address: '', lat: '', lng: '',
+    units: '', types: '', avgPricePerPyeong: '',
+    subscriptionStart: '', subscriptionEnd: '', resultDate: '',
+    status: '청약예정', priority: 'normal',
+    tags: '', naverUrl: '', floorPlanUrl: '', memo: '',
+};
+
+const TABS = ['목록', '일정', '분석'];
+
+// ── 유틸 함수 ──────────────────────────────────────────────────────────────────
+const formatDate = (d) => {
+    if (!d) return '-';
+    return new Date(d).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
+};
+
+const formatPrice = (v) => {
+    if (!v) return '-';
+    return `${v.toLocaleString()}만원`;
+};
+
+const getDDays = (dateStr) => {
+    if (!dateStr) return null;
+    const target = new Date(dateStr);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    target.setHours(0, 0, 0, 0);
+    const diff = Math.ceil((target - today) / (1000 * 60 * 60 * 24));
+    if (diff === 0) return 'D-Day';
+    if (diff > 0) return `D-${diff}`;
+    return `D+${Math.abs(diff)}`;
+};
+
+const createMarkerIcon = (status, isSelected = false) => {
+    const cfg = STATUS_CONFIG[status] || STATUS_CONFIG['완료'];
+    const size = isSelected ? 18 : 12;
+    return L.divIcon({
+        className: '',
+        html: `<div style="
+            width:${size}px;height:${size}px;border-radius:50%;
+            background:${cfg.color};
+            box-shadow:0 0 ${isSelected ? 16 : 8}px ${cfg.color};
+            border:2px solid rgba(255,255,255,${isSelected ? 0.6 : 0.25});
+            transition:all 0.2s;
+        "></div>`,
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2],
+        popupAnchor: [0, -(size / 2 + 4)],
+    });
+};
+
+// ── 지도 중심 이동 (react-leaflet 내부 훅) ────────────────────────────────────
+const MapFlyTo = ({ position, zoom }) => {
+    const map = useMap();
+    useEffect(() => {
+        if (position) {
+            map.flyTo(position, zoom ?? 14, { duration: 1.0 });
+        }
+    }, [position, zoom, map]);
+    return null;
+};
+
+// ── 단지 카드 ──────────────────────────────────────────────────────────────────
+const ComplexCard = ({ complex, isSelected, onClick }) => {
+    const cfg = STATUS_CONFIG[complex.status] || STATUS_CONFIG['완료'];
+    const dday = getDDays(complex.subscriptionStart);
+    const isUpcoming = complex.status === '청약예정' || complex.status === '청약중';
+
+    return (
+        <div className={`re-card ${isSelected ? 'is-selected' : ''}`} onClick={onClick}>
+            <div className="re-card__top">
+                <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
+                    {complex.status}
+                </span>
+                {complex.priority === 'high' && <span className="re-priority-star">★</span>}
+            </div>
+            <h3 className="re-card__name">{complex.name}</h3>
+            <p className="re-card__address">{complex.address}</p>
+            <div className="re-card__stats">
+                <span>{complex.units.toLocaleString()}세대</span>
+                <span className="re-card__dot">·</span>
+                <span style={{ color: '#f59e0b' }}>{formatPrice(complex.avgPricePerPyeong)}/평</span>
+            </div>
+            <div className="re-chip-group">
+                {complex.types.map((t) => (
+                    <span key={t} className="re-chip">{t}</span>
+                ))}
+            </div>
+            {isUpcoming && dday && (
+                <div className="re-card__dday" style={{ color: cfg.color }}>
+                    청약 {dday}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ── 인라인 지도 + 단지 상세 패널 ──────────────────────────────────────────────
+const RightPanel = ({ complexes, selectedComplex, onSelectComplex, onEdit, onDelete }) => {
+    const cfg = selectedComplex
+        ? STATUS_CONFIG[selectedComplex.status] || STATUS_CONFIG['완료']
+        : null;
+
+    const mapCenter = useMemo(() => {
+        if (selectedComplex) return [selectedComplex.lat, selectedComplex.lng];
+        if (complexes.length === 0) return [37.5665, 126.9780];
+        return [
+            complexes.reduce((s, c) => s + c.lat, 0) / complexes.length,
+            complexes.reduce((s, c) => s + c.lng, 0) / complexes.length,
+        ];
+    }, []); // 초기 중심값만 계산 (flyTo로 이후 이동)
+
+    return (
+        <div className="re-right-panel">
+            {/* ── 지도 ── */}
+            <div className="re-panel re-panel--map">
+                <div className="re-mini-map-wrap">
+                    <MapContainer
+                        key="inline-map"
+                        center={mapCenter}
+                        zoom={10}
+                        className="re-map"
+                        scrollWheelZoom
+                        zoomControl={false}
+                    >
+                        <MapFlyTo
+                            position={selectedComplex ? [selectedComplex.lat, selectedComplex.lng] : null}
+                            zoom={14}
+                        />
+                        <TileLayer
+                            url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+                            attribution='&copy; <a href="https://carto.com">CartoDB</a>'
+                        />
+                        {complexes.map((c) => (
+                            <Marker
+                                key={c.id}
+                                position={[c.lat, c.lng]}
+                                icon={createMarkerIcon(c.status, selectedComplex?.id === c.id)}
+                                eventHandlers={{ click: () => onSelectComplex(c) }}
+                            >
+                                <Popup>
+                                    <div className="re-popup">
+                                        <strong>{c.name}</strong>
+                                        <span>{c.address}</span>
+                                        <span>{c.status} · {c.units.toLocaleString()}세대</span>
+                                        <span>{formatPrice(c.avgPricePerPyeong)}/평</span>
+                                    </div>
+                                </Popup>
+                            </Marker>
+                        ))}
+                    </MapContainer>
+                    {selectedComplex && (
+                        <div className="re-map-label">
+                            <span style={{ color: cfg.color }}>●</span> {selectedComplex.name}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* ── 상세 패널 ── */}
+            {selectedComplex ? (
+                <div className="re-detail" key={selectedComplex.id}>
+                    <div className="re-detail__header">
+                        <div>
+                            <span className="re-badge re-badge--lg" style={{ color: cfg.color, background: cfg.bg }}>
+                                {selectedComplex.status}
+                            </span>
+                            <h2 className="re-detail__name">{selectedComplex.name}</h2>
+                            <p className="re-detail__address">{selectedComplex.address}</p>
+                        </div>
+                        <div className="re-detail__header-actions">
+                            <button className="button ghost small" onClick={onEdit}>편집</button>
+                            <button className="button danger small" onClick={onDelete}>삭제</button>
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <div className="re-detail__stats-grid">
+                            <div className="re-stat">
+                                <p className="re-stat__label">세대수</p>
+                                <p className="re-stat__value">{selectedComplex.units.toLocaleString()}</p>
+                            </div>
+                            <div className="re-stat">
+                                <p className="re-stat__label">평당가</p>
+                                <p className="re-stat__value" style={{ color: '#f59e0b' }}>
+                                    {formatPrice(selectedComplex.avgPricePerPyeong)}
+                                </p>
+                            </div>
+                            <div className="re-stat">
+                                <p className="re-stat__label">우선순위</p>
+                                <p className="re-stat__value" style={{ fontSize: 13 }}>
+                                    {PRIORITY_LABELS[selectedComplex.priority]}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <p className="re-detail__section-title">평형대</p>
+                        <div className="re-chip-group">
+                            {selectedComplex.types.map((t) => (
+                                <span key={t} className="re-chip re-chip--lg">{t}</span>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <p className="re-detail__section-title">청약 일정</p>
+                        <div className="re-timeline">
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot re-timeline__dot--start" />
+                                <div>
+                                    <p className="re-timeline__label">청약 시작</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionStart)}</p>
+                                </div>
+                            </div>
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot" />
+                                <div>
+                                    <p className="re-timeline__label">청약 마감</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionEnd)}</p>
+                                </div>
+                            </div>
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot re-timeline__dot--result" />
+                                <div>
+                                    <p className="re-timeline__label">당첨 발표</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.resultDate)}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {selectedComplex.tags.length > 0 && (
+                        <div className="re-detail__section">
+                            <p className="re-detail__section-title">특징</p>
+                            <div className="re-chip-group">
+                                {selectedComplex.tags.map((tag) => (
+                                    <span key={tag} className="re-chip re-chip--tag">{tag}</span>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {selectedComplex.memo && (
+                        <div className="re-detail__section">
+                            <p className="re-detail__section-title">메모</p>
+                            <p className="re-detail__memo">{selectedComplex.memo}</p>
+                        </div>
+                    )}
+
+                    <div className="re-detail__actions">
+                        {selectedComplex.naverUrl ? (
+                            <a href={selectedComplex.naverUrl} target="_blank" rel="noreferrer" className="button primary small">
+                                네이버 부동산 →
+                            </a>
+                        ) : (
+                            <a
+                                href={`https://new.land.naver.com/search?query=${encodeURIComponent(selectedComplex.name)}`}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="button ghost small"
+                            >
+                                네이버 검색 →
+                            </a>
+                        )}
+                        {selectedComplex.floorPlanUrl && (
+                            <a href={selectedComplex.floorPlanUrl} target="_blank" rel="noreferrer" className="button ghost small">
+                                평면도 보기
+                            </a>
+                        )}
+                    </div>
+                </div>
+            ) : (
+                <div className="re-detail re-detail--empty">
+                    <div className="re-detail__empty-icon">🏢</div>
+                    <p>카드 또는 지도 마커를 클릭하면<br />단지 상세 정보가 표시됩니다</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ── 청약 일정 타임라인 ─────────────────────────────────────────────────────────
+const ScheduleView = ({ complexes }) => {
+    const events = complexes
+        .filter((c) => c.subscriptionStart)
+        .flatMap((c) => [
+            { date: c.subscriptionStart, label: '청약 시작', complex: c, type: 'start' },
+            { date: c.subscriptionEnd, label: '청약 마감', complex: c, type: 'end' },
+            { date: c.resultDate, label: '당첨 발표', complex: c, type: 'result' },
+        ])
+        .filter((e) => e.date)
+        .sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const upcoming = events.filter((e) => new Date(e.date) >= today);
+    const past = events.filter((e) => new Date(e.date) < today).reverse();
+
+    const EventItem = ({ event }) => {
+        const cfg = STATUS_CONFIG[event.complex.status] || STATUS_CONFIG['완료'];
+        const dday = getDDays(event.date);
+        return (
+            <div className={`re-schedule-item re-schedule-item--${event.type}`}>
+                <div className="re-schedule-item__date">
+                    <span className="re-schedule-item__dday" style={{ color: cfg.color }}>{dday}</span>
+                    <span className="re-schedule-item__datestr">{formatDate(event.date)}</span>
+                </div>
+                <div className="re-schedule-item__dot" style={{ background: cfg.color, boxShadow: `0 0 6px ${cfg.color}` }} />
+                <div className="re-schedule-item__content">
+                    <p className="re-schedule-item__complex">{event.complex.name}</p>
+                    <p className="re-schedule-item__label">{event.label}</p>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="re-schedule">
+            {upcoming.length > 0 && (
+                <div className="re-schedule-section">
+                    <h4 className="re-schedule-section__title">예정 일정</h4>
+                    {upcoming.map((e, i) => <EventItem key={i} event={e} />)}
+                </div>
+            )}
+            {past.length > 0 && (
+                <div className="re-schedule-section">
+                    <h4 className="re-schedule-section__title re-schedule-section__title--past">지난 일정</h4>
+                    {past.map((e, i) => <EventItem key={i} event={e} />)}
+                </div>
+            )}
+            {events.length === 0 && <p className="re-empty">등록된 청약 일정이 없습니다.</p>}
+        </div>
+    );
+};
+
+// ── 가격 분석 ──────────────────────────────────────────────────────────────────
+const PriceAnalysis = ({ complexes }) => {
+    const chartData = [...complexes]
+        .filter((c) => c.avgPricePerPyeong > 0)
+        .sort((a, b) => b.avgPricePerPyeong - a.avgPricePerPyeong)
+        .map((c) => ({
+            name: c.name.length > 9 ? c.name.slice(0, 9) + '…' : c.name,
+            price: c.avgPricePerPyeong,
+            status: c.status,
+            fullName: c.name,
+        }));
+
+    const CustomTooltip = ({ active, payload }) => {
+        if (!active || !payload?.length) return null;
+        return (
+            <div className="re-chart-tooltip">
+                <p>{payload[0].payload.fullName}</p>
+                <p className="re-chart-tooltip__value">{payload[0].value.toLocaleString()}만원/평</p>
+            </div>
+        );
+    };
+
+    const prices = complexes.map((c) => c.avgPricePerPyeong).filter((v) => v > 0);
+    const avg = prices.length ? Math.round(prices.reduce((s, v) => s + v, 0) / prices.length) : 0;
+    const max = prices.length ? Math.max(...prices) : 0;
+    const min = prices.length ? Math.min(...prices) : 0;
+
+    return (
+        <div className="re-analysis">
+            <div className="re-analysis__stats">
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">평균 평당가</p>
+                    <p className="re-stat-card__value">{formatPrice(avg)}</p>
+                </div>
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">최고 평당가</p>
+                    <p className="re-stat-card__value" style={{ color: '#f59e0b' }}>{formatPrice(max)}</p>
+                </div>
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">최저 평당가</p>
+                    <p className="re-stat-card__value" style={{ color: '#34d399' }}>{formatPrice(min)}</p>
+                </div>
+            </div>
+
+            <div className="re-panel">
+                <div className="re-panel__head">
+                    <div>
+                        <p className="re-panel__eyebrow">가격 비교</p>
+                        <h3>단지별 평당가</h3>
+                        <p className="re-panel__sub">관심 단지의 평당 분양가를 비교합니다.</p>
+                    </div>
+                </div>
+                <div className="re-chart-wrapper">
+                    <ResponsiveContainer width="100%" height={280}>
+                        <BarChart data={chartData} margin={{ top: 10, right: 20, left: 10, bottom: 50 }}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
+                            <XAxis
+                                dataKey="name"
+                                stroke="var(--text-dim)"
+                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
+                                angle={-20}
+                                textAnchor="end"
+                                height={60}
+                            />
+                            <YAxis
+                                stroke="var(--text-dim)"
+                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
+                                tickFormatter={(v) => `${(v / 1000).toFixed(1)}k`}
+                                width={44}
+                            />
+                            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(255,255,255,0.03)' }} />
+                            <Bar dataKey="price" radius={[4, 4, 0, 0]}>
+                                {chartData.map((entry, index) => {
+                                    const cfg = STATUS_CONFIG[entry.status] || STATUS_CONFIG['완료'];
+                                    return <Cell key={index} fill={cfg.color} fillOpacity={0.75} />;
+                                })}
+                            </Bar>
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+
+            <div className="re-panel">
+                <div className="re-panel__head">
+                    <div>
+                        <p className="re-panel__eyebrow">비교표</p>
+                        <h3>단지 상세 비교</h3>
+                    </div>
+                </div>
+                <div className="re-table-wrapper">
+                    <table className="re-table">
+                        <thead>
+                            <tr>
+                                <th>단지명</th>
+                                <th>상태</th>
+                                <th>세대수</th>
+                                <th>평형대</th>
+                                <th>평당가</th>
+                                <th>청약 시작</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {complexes.map((c) => {
+                                const cfg = STATUS_CONFIG[c.status] || STATUS_CONFIG['완료'];
+                                return (
+                                    <tr key={c.id}>
+                                        <td className="re-table__name">{c.name}</td>
+                                        <td>
+                                            <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
+                                                {c.status}
+                                            </span>
+                                        </td>
+                                        <td>{c.units.toLocaleString()}</td>
+                                        <td>{c.types.join(', ')}</td>
+                                        <td style={{ color: '#f59e0b', fontWeight: 600 }}>
+                                            {formatPrice(c.avgPricePerPyeong)}
+                                        </td>
+                                        <td>{formatDate(c.subscriptionStart)}</td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ── 단지 추가/편집 모달 ────────────────────────────────────────────────────────
+const ComplexModal = ({ complex, onClose, onSave }) => {
+    const [form, setForm] = useState(
+        complex
+            ? {
+                ...complex,
+                types: complex.types.join(', '),
+                tags: complex.tags.join(', '),
+                lat: String(complex.lat),
+                lng: String(complex.lng),
+                units: String(complex.units),
+                avgPricePerPyeong: String(complex.avgPricePerPyeong),
+            }
+            : { ...EMPTY_FORM }
+    );
+
+    const set = (field) => (e) => setForm((prev) => ({ ...prev, [field]: e.target.value }));
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSave({
+            ...form,
+            lat: parseFloat(form.lat) || 37.5665,
+            lng: parseFloat(form.lng) || 126.9780,
+            units: parseInt(form.units) || 0,
+            avgPricePerPyeong: parseInt(form.avgPricePerPyeong) || 0,
+            types: form.types.split(',').map((t) => t.trim()).filter(Boolean),
+            tags: form.tags.split(',').map((t) => t.trim()).filter(Boolean),
+        });
+    };
+
+    return (
+        <div className="re-modal-overlay" onClick={onClose}>
+            <div className="re-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="re-modal__header">
+                    <h3>{complex ? '단지 편집' : '새 단지 추가'}</h3>
+                    <button className="re-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <form className="re-modal__form" onSubmit={handleSubmit}>
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">기본 정보</p>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                단지명 *
+                                <input className="re-form-input" value={form.name} onChange={set('name')} placeholder="단지명 입력" required />
+                            </label>
+                            <label className="re-form-label">
+                                상태
+                                <select className="re-form-input" value={form.status} onChange={set('status')}>
+                                    {Object.keys(STATUS_CONFIG).map((s) => (
+                                        <option key={s} value={s}>{s}</option>
+                                    ))}
+                                </select>
+                            </label>
+                        </div>
+                        <label className="re-form-label">
+                            주소
+                            <input className="re-form-input" value={form.address} onChange={set('address')} placeholder="서울 서초구 반포동" />
+                        </label>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                위도 (lat)
+                                <input className="re-form-input" value={form.lat} onChange={set('lat')} placeholder="37.5665" type="number" step="0.0001" />
+                            </label>
+                            <label className="re-form-label">
+                                경도 (lng)
+                                <input className="re-form-input" value={form.lng} onChange={set('lng')} placeholder="126.9780" type="number" step="0.0001" />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">단지 정보</p>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                세대수
+                                <input className="re-form-input" value={form.units} onChange={set('units')} placeholder="2990" type="number" />
+                            </label>
+                            <label className="re-form-label">
+                                평당가 (만원)
+                                <input className="re-form-input" value={form.avgPricePerPyeong} onChange={set('avgPricePerPyeong')} placeholder="4500" type="number" />
+                            </label>
+                        </div>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                평형대 (쉼표 구분)
+                                <input className="re-form-input" value={form.types} onChange={set('types')} placeholder="59㎡, 84㎡, 114㎡" />
+                            </label>
+                            <label className="re-form-label">
+                                우선순위
+                                <select className="re-form-input" value={form.priority} onChange={set('priority')}>
+                                    <option value="high">★ 최우선</option>
+                                    <option value="normal">보통</option>
+                                    <option value="low">낮음</option>
+                                </select>
+                            </label>
+                        </div>
+                        <label className="re-form-label">
+                            특징 태그 (쉼표 구분)
+                            <input className="re-form-input" value={form.tags} onChange={set('tags')} placeholder="강남권, 역세권, 브랜드" />
+                        </label>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">청약 일정</p>
+                        <div className="re-form-row re-form-row--three">
+                            <label className="re-form-label">
+                                청약 시작
+                                <input className="re-form-input" type="date" value={form.subscriptionStart} onChange={set('subscriptionStart')} />
+                            </label>
+                            <label className="re-form-label">
+                                청약 마감
+                                <input className="re-form-input" type="date" value={form.subscriptionEnd} onChange={set('subscriptionEnd')} />
+                            </label>
+                            <label className="re-form-label">
+                                당첨 발표
+                                <input className="re-form-input" type="date" value={form.resultDate} onChange={set('resultDate')} />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">링크 & 메모</p>
+                        <label className="re-form-label">
+                            네이버 부동산 URL
+                            <input className="re-form-input" value={form.naverUrl} onChange={set('naverUrl')} placeholder="https://new.land.naver.com/complexes/..." />
+                        </label>
+                        <label className="re-form-label">
+                            평면도 URL
+                            <input className="re-form-input" value={form.floorPlanUrl} onChange={set('floorPlanUrl')} placeholder="https://..." />
+                        </label>
+                        <label className="re-form-label">
+                            메모
+                            <textarea
+                                className="re-form-input re-form-textarea"
+                                value={form.memo}
+                                onChange={set('memo')}
+                                placeholder="관심 포인트, 분석 내용 등"
+                                rows={3}
+                            />
+                        </label>
+                    </div>
+
+                    <div className="re-modal__footer">
+                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
+                        <button type="submit" className="button primary">{complex ? '저장' : '추가'}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+// ── 메인 컴포넌트 ──────────────────────────────────────────────────────────────
+const RealEstate = () => {
+    const [complexes, setComplexes] = useState(SAMPLE_COMPLEXES);
+    const [selectedComplex, setSelectedComplex] = useState(null);
+    const [activeTab, setActiveTab] = useState('목록');
+    const [filterStatus, setFilterStatus] = useState('전체');
+    const [showModal, setShowModal] = useState(false);
+    const [editingComplex, setEditingComplex] = useState(null);
+
+    useEffect(() => {
+        apiGet('/api/realestate/complexes')
+            .then((data) => {
+                if (Array.isArray(data) && data.length > 0) setComplexes(data);
+            })
+            .catch(() => {});
+    }, []);
+
+    const handleAdd = async (data) => {
+        const newComplex = { ...data, id: Date.now() };
+        setComplexes((prev) => [...prev, newComplex]);
+        setShowModal(false);
+        try { await apiPost('/api/realestate/complexes', data); } catch {}
+    };
+
+    const handleUpdate = async (data) => {
+        setComplexes((prev) => prev.map((c) => (c.id === data.id ? data : c)));
+        if (selectedComplex?.id === data.id) setSelectedComplex(data);
+        setEditingComplex(null);
+        setShowModal(false);
+        try { await apiPut(`/api/realestate/complexes/${data.id}`, data); } catch {}
+    };
+
+    const handleDelete = async (id) => {
+        if (!confirm('삭제하시겠습니까?')) return;
+        setComplexes((prev) => prev.filter((c) => c.id !== id));
+        if (selectedComplex?.id === id) setSelectedComplex(null);
+        try { await apiDelete(`/api/realestate/complexes/${id}`); } catch {}
+    };
+
+    const handleModalSave = (data) => {
+        if (editingComplex) {
+            handleUpdate({ ...editingComplex, ...data });
+        } else {
+            handleAdd(data);
+        }
+    };
+
+    const filteredComplexes = useMemo(() => {
+        if (filterStatus === '전체') return complexes;
+        return complexes.filter((c) => c.status === filterStatus);
+    }, [complexes, filterStatus]);
+
+    const stats = useMemo(() => ({
+        total: complexes.length,
+        upcoming: complexes.filter((c) => c.status === '청약예정').length,
+        active: complexes.filter((c) => c.status === '청약중').length,
+        avgPrice: complexes.length
+            ? Math.round(complexes.reduce((s, c) => s + c.avgPricePerPyeong, 0) / complexes.length)
+            : 0,
+    }), [complexes]);
+
+    return (
+        <div className="re">
+            {/* 헤더 */}
+            <header className="re-header">
+                <div>
+                    <p className="re-kicker">부동산 정보</p>
+                    <h1>관심 단지 관리</h1>
+                    <p className="re-sub">관심 있는 아파트 단지 정보를 수집하고 분석합니다.</p>
+                    <div className="re-header-actions">
+                        <button
+                            className="button primary"
+                            onClick={() => { setEditingComplex(null); setShowModal(true); }}
+                        >
+                            + 단지 추가
+                        </button>
+                        <Link to="/realestate" className="button ghost">← 청약 대시보드</Link>
+                        <a href="https://www.applyhome.co.kr" target="_blank" rel="noreferrer" className="button ghost">
+                            청약홈 →
+                        </a>
+                    </div>
+                </div>
+                <div className="re-stats-bar">
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value">{stats.total}</p>
+                        <p className="re-stat-item__label">관심 단지</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#00d4ff' }}>{stats.upcoming}</p>
+                        <p className="re-stat-item__label">청약 예정</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#34d399' }}>{stats.active}</p>
+                        <p className="re-stat-item__label">청약 중</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#f59e0b' }}>
+                            {stats.avgPrice.toLocaleString()}만
+                        </p>
+                        <p className="re-stat-item__label">평균 평당가</p>
+                    </div>
+                </div>
+            </header>
+
+            {/* 탭 바 */}
+            <div className="re-tabs-bar">
+                <div className="re-tabs">
+                    {TABS.map((tab) => (
+                        <button
+                            key={tab}
+                            className={`re-tab ${activeTab === tab ? 'is-active' : ''}`}
+                            onClick={() => setActiveTab(tab)}
+                        >
+                            {tab}
+                        </button>
+                    ))}
+                </div>
+                {activeTab === '목록' && (
+                    <div className="re-filter">
+                        {['전체', ...Object.keys(STATUS_CONFIG)].map((s) => (
+                            <button
+                                key={s}
+                                className={`re-filter-btn ${filterStatus === s ? 'is-active' : ''}`}
+                                onClick={() => setFilterStatus(s)}
+                            >
+                                {s}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* 목록 탭 — 카드 + 지도/상세 */}
+            {activeTab === '목록' && (
+                <div className="re-list-layout">
+                    <div className="re-card-grid">
+                        {filteredComplexes.length === 0 ? (
+                            <p className="re-empty">등록된 단지가 없습니다.</p>
+                        ) : (
+                            filteredComplexes.map((c) => (
+                                <ComplexCard
+                                    key={c.id}
+                                    complex={c}
+                                    isSelected={selectedComplex?.id === c.id}
+                                    onClick={() => setSelectedComplex(c)}
+                                />
+                            ))
+                        )}
+                    </div>
+                    <RightPanel
+                        complexes={complexes}
+                        selectedComplex={selectedComplex}
+                        onSelectComplex={setSelectedComplex}
+                        onEdit={() => { setEditingComplex(selectedComplex); setShowModal(true); }}
+                        onDelete={() => handleDelete(selectedComplex.id)}
+                    />
+                </div>
+            )}
+
+            {activeTab === '일정' && (
+                <div className="re-panel">
+                    <div className="re-panel__head">
+                        <div>
+                            <p className="re-panel__eyebrow">캘린더</p>
+                            <h3>청약 일정</h3>
+                            <p className="re-panel__sub">청약 시작·마감·당첨 발표일을 타임라인으로 확인합니다.</p>
+                        </div>
+                    </div>
+                    <ScheduleView complexes={complexes} />
+                </div>
+            )}
+
+            {activeTab === '분석' && (
+                <PriceAnalysis complexes={complexes} />
+            )}
+
+            {showModal && (
+                <ComplexModal
+                    complex={editingComplex}
+                    onClose={() => { setShowModal(false); setEditingComplex(null); }}
+                    onSave={handleModalSave}
+                />
+            )}
+        </div>
+    );
+};
+
+export default RealEstate;
diff --git a/src/pages/subscription/Subscription.css b/src/pages/subscription/Subscription.css
new file mode 100644
index 0000000..ac9cce7
--- /dev/null
+++ b/src/pages/subscription/Subscription.css
@@ -0,0 +1,1167 @@
+/* ═══════════════════════════════════════════════════════════════════════
+   Subscription.css — 청약 관리 페이지
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.sub {
+    display: grid;
+    gap: 24px;
+    width: 100%;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.sub-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    gap: 24px;
+    align-items: center;
+}
+
+.sub-kicker {
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    font-size: 12px;
+    color: var(--accent-subscription, #f43f5e);
+    margin: 0 0 10px;
+}
+
+.sub-header h1 {
+    margin: 0 0 10px;
+    font-family: var(--font-display);
+    font-size: clamp(28px, 4vw, 38px);
+}
+
+.sub-desc {
+    margin: 0;
+    color: var(--muted);
+    font-size: 14px;
+}
+
+.sub-header-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+}
+
+/* ── 스탯 바 ──────────────────────────────────────────────────────────── */
+
+.sub-stats-bar {
+    display: flex;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+    align-self: center;
+}
+
+.sub-stat-item {
+    padding: 16px 20px;
+    text-align: center;
+    border-right: 1px solid var(--line);
+    flex: 1;
+}
+
+.sub-stat-item:last-child { border-right: none; }
+
+.sub-stat-item__value {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--text-bright);
+    margin: 0;
+    letter-spacing: -0.03em;
+    line-height: 1;
+}
+
+.sub-stat-item__label {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin: 6px 0 0;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+/* ── 내 조건 카드 ─────────────────────────────────────────────────────── */
+
+.sub-profile-card {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 24px;
+    align-items: center;
+    border: 1px solid rgba(244, 63, 94, 0.25);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(135deg, rgba(244,63,94,0.05) 0%, rgba(139,92,246,0.05) 100%);
+    padding: 20px 24px;
+    position: relative;
+    overflow: hidden;
+}
+
+.sub-profile-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #f43f5e, #8b5cf6);
+}
+
+.sub-profile-card__title-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.sub-profile-card__label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.sub-profile-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.sub-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: 100px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.sub-tag.is-pass {
+    background: rgba(52, 211, 153, 0.12);
+    color: #34d399;
+    border: 1px solid rgba(52, 211, 153, 0.2);
+}
+
+.sub-tag.is-fail {
+    background: rgba(248, 113, 113, 0.1);
+    color: #f87171;
+    border: 1px solid rgba(248, 113, 113, 0.2);
+}
+
+.sub-tag.is-neutral {
+    background: var(--neon-cyan-muted);
+    color: var(--neon-cyan);
+    border: 1px solid rgba(0, 212, 255, 0.15);
+}
+
+.sub-tag.is-special {
+    background: rgba(244, 63, 94, 0.1);
+    color: #f43f5e;
+    border: 1px solid rgba(244, 63, 94, 0.2);
+}
+
+.sub-profile-card__right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-shrink: 0;
+}
+
+.sub-profile-score {
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.sub-profile-score__number {
+    font-family: var(--font-display);
+    font-size: 40px;
+    font-weight: 700;
+    color: #f43f5e;
+    line-height: 1;
+    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.4));
+}
+
+.sub-profile-score__label {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 4px;
+}
+
+.sub-profile-score__breakdown {
+    display: grid;
+    gap: 8px;
+    min-width: 200px;
+}
+
+.sub-score-row {
+    display: grid;
+    grid-template-columns: 60px 1fr 40px;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-dim);
+}
+
+.sub-score-bar {
+    height: 5px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 100px;
+    overflow: hidden;
+}
+
+.sub-score-bar__fill {
+    height: 100%;
+    border-radius: 100px;
+    transition: width 0.5s var(--ease-out);
+}
+
+.sub-score-val {
+    text-align: right;
+    color: var(--text-dim);
+    font-size: 10px;
+}
+
+/* ── 탭 바 ────────────────────────────────────────────────────────────── */
+
+.sub-tabs-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.sub-tabs {
+    display: flex;
+    gap: 2px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 4px;
+}
+
+.sub-tab {
+    padding: 8px 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-dim);
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.2s var(--ease-out);
+    white-space: nowrap;
+}
+
+.sub-tab:hover { color: var(--text-bright); background: var(--surface-raised); }
+
+.sub-tab.is-active {
+    color: var(--text-bright);
+    background: var(--bg-tertiary);
+    box-shadow: 0 0 0 1px var(--line);
+}
+
+/* ── 필터 ─────────────────────────────────────────────────────────────── */
+
+.sub-filter {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.sub-filter-btn {
+    padding: 4px 12px;
+    border: 1px solid var(--line);
+    background: transparent;
+    color: var(--text-dim);
+    border-radius: 100px;
+    cursor: pointer;
+    font-size: 12px;
+    font-family: var(--font-body);
+    transition: all 0.15s;
+}
+
+.sub-filter-btn:hover { border-color: var(--line-bright); color: var(--text); }
+
+.sub-filter-btn.is-active {
+    background: rgba(244, 63, 94, 0.1);
+    border-color: rgba(244, 63, 94, 0.35);
+    color: #f43f5e;
+}
+
+/* ── 목록 레이아웃 ────────────────────────────────────────────────────── */
+
+.sub-list-layout {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    gap: 20px;
+    align-items: start;
+}
+
+.sub-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+    gap: 14px;
+}
+
+/* ── 청약 카드 ────────────────────────────────────────────────────────── */
+
+.sub-card {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 16px;
+    background: var(--surface);
+    cursor: pointer;
+    display: grid;
+    gap: 8px;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s var(--ease-out);
+    animation: fadeIn 0.25s var(--ease-out) both;
+}
+
+.sub-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #f43f5e, #8b5cf6);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.sub-card:hover { border-color: var(--line-bright); background: var(--surface-raised); transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.sub-card:hover::before, .sub-card.is-selected::before { opacity: 1; }
+.sub-card.is-selected { border-color: rgba(244, 63, 94, 0.4); background: var(--surface-raised); box-shadow: 0 0 20px rgba(244,63,94,0.1); }
+
+.sub-card__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sub-card__badges {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.sub-card__name {
+    font-family: var(--font-display);
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text-bright);
+    line-height: 1.3;
+}
+
+.sub-card__address {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.sub-card__info {
+    font-size: 12px;
+    color: var(--text-dim);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.sub-card__dot { color: var(--text-muted); }
+
+.sub-card__bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.sub-card__dday {
+    font-family: var(--font-display);
+    font-size: 11px;
+    font-weight: 700;
+    color: var(--text-dim);
+}
+
+/* ── 뱃지류 ───────────────────────────────────────────────────────────── */
+
+.sub-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 100px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+}
+
+.sub-badge--lg { padding: 3px 10px; font-size: 11px; }
+
+.sub-type-badge {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+}
+
+.sub-type-badge--lg { font-size: 12px; }
+
+.sub-special-badge {
+    font-size: 10px;
+    background: rgba(244, 63, 94, 0.1);
+    color: #f43f5e;
+    border-radius: 100px;
+    padding: 1px 6px;
+}
+
+.sub-eligibility {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 100px;
+}
+
+.sub-eligibility.is-ok { color: #34d399; background: rgba(52,211,153,0.1); }
+.sub-eligibility.is-warn { color: #f59e0b; background: rgba(245,158,11,0.1); }
+.sub-eligibility--badge { font-size: 10px; }
+
+/* ── 상세 패널 ────────────────────────────────────────────────────────── */
+
+.sub-detail-panel {
+    position: sticky;
+    top: 24px;
+}
+
+.sub-detail {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+    animation: fadeIn 0.2s var(--ease-out);
+}
+
+.sub-detail--empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 24px;
+    gap: 12px;
+    color: var(--text-muted);
+    font-size: 13px;
+    min-height: 300px;
+    text-align: center;
+}
+
+.sub-detail__empty-icon { font-size: 44px; opacity: 0.3; }
+
+.sub-detail__header {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    border-bottom: 1px solid var(--line);
+    background: var(--surface-raised);
+}
+
+.sub-detail__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.sub-detail__name {
+    font-family: var(--font-display);
+    font-size: 17px;
+    font-weight: 700;
+    margin: 0 0 4px;
+    color: var(--text-bright);
+}
+
+.sub-detail__address {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.sub-detail__actions {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.sub-detail__price {
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.sub-detail__price-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+}
+
+.sub-detail__price-value {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 700;
+    color: #f59e0b;
+}
+
+.sub-detail__price-loan {
+    font-size: 11px;
+    color: var(--text-dim);
+}
+
+/* ── 상세 섹션 탭 ─────────────────────────────────────────────────────── */
+
+.sub-detail__sections { }
+
+.sub-section-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--line);
+    padding: 0 12px;
+}
+
+.sub-section-tab {
+    padding: 10px 14px;
+    border: none;
+    background: transparent;
+    color: var(--text-dim);
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all 0.15s;
+    font-family: var(--font-body);
+}
+
+.sub-section-tab:hover { color: var(--text); }
+
+.sub-section-tab.is-active {
+    color: #f43f5e;
+    border-bottom-color: #f43f5e;
+}
+
+.sub-detail__section-content { padding: 16px 20px; }
+
+.sub-detail__memo {
+    padding: 14px 20px;
+    border-top: 1px solid var(--line-subtle);
+}
+
+.sub-detail__memo-title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--text-muted);
+    margin: 0 0 6px;
+}
+
+.sub-detail__memo p {
+    font-size: 13px;
+    color: var(--text-dim);
+    margin: 0;
+    line-height: 1.7;
+}
+
+/* ── 요건 비교표 ──────────────────────────────────────────────────────── */
+
+.sub-compare {
+    display: grid;
+    gap: 0;
+}
+
+.sub-compare__row {
+    display: grid;
+    grid-template-columns: 90px 1fr 1fr 20px;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 0;
+    border-bottom: 1px solid var(--line-subtle);
+    font-size: 12px;
+}
+
+.sub-compare__row:last-of-type { border-bottom: none; }
+
+.sub-compare__label {
+    color: var(--text-muted);
+    font-size: 11px;
+}
+
+.sub-compare__required {
+    color: var(--text-dim);
+}
+
+.sub-compare__mine {
+    font-weight: 600;
+}
+
+.sub-compare__row.is-pass .sub-compare__mine { color: #34d399; }
+.sub-compare__row.is-fail .sub-compare__mine { color: #f87171; }
+
+.sub-compare__icon {
+    font-size: 13px;
+    font-weight: 700;
+    text-align: right;
+}
+
+.sub-compare__row.is-pass .sub-compare__icon { color: #34d399; }
+.sub-compare__row.is-fail .sub-compare__icon { color: #f87171; }
+
+.sub-compare__notes {
+    margin: 10px 0 0;
+    font-size: 12px;
+    color: var(--text-dim);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--radius-xs);
+    padding: 8px 10px;
+    border-left: 2px solid rgba(244,63,94,0.4);
+}
+
+.sub-empty-sm {
+    color: var(--text-muted);
+    font-size: 12px;
+    padding: 12px 0;
+}
+
+/* ── 일정 미니 ────────────────────────────────────────────────────────── */
+
+.sub-schedule-mini {
+    display: grid;
+    gap: 0;
+}
+
+.sub-schedule-mini__item {
+    display: grid;
+    grid-template-columns: 10px 1fr auto;
+    gap: 10px;
+    align-items: center;
+    padding: 9px 0;
+    border-bottom: 1px solid var(--line-subtle);
+    font-size: 12px;
+}
+
+.sub-schedule-mini__item:last-child { border-bottom: none; }
+
+.sub-schedule-mini__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.sub-schedule-mini__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.sub-schedule-mini__label { color: var(--text-dim); font-size: 12px; }
+.sub-schedule-mini__date { color: var(--text-bright); font-size: 12px; font-weight: 500; }
+.sub-schedule-mini__dday { font-family: var(--font-display); font-size: 11px; font-weight: 700; white-space: nowrap; }
+
+/* ── 자금 섹션 ────────────────────────────────────────────────────────── */
+
+.sub-finance {
+    display: grid;
+    gap: 14px;
+}
+
+.sub-finance__total {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
+.sub-finance__total-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+}
+
+.sub-finance__total-value {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-bright);
+}
+
+.sub-finance__breakdown { }
+
+.sub-finance__bar {
+    display: flex;
+    height: 8px;
+    border-radius: 100px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    gap: 1px;
+}
+
+.sub-finance__bar > div {
+    border-radius: 0;
+    transition: width 0.4s var(--ease-out);
+}
+
+.sub-finance__bar > div:first-child { border-radius: 100px 0 0 100px; }
+.sub-finance__bar > div:last-child { border-radius: 0 100px 100px 0; }
+
+.sub-finance__legend {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 12px;
+    color: var(--text-dim);
+}
+
+.sub-finance__legend span {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+}
+
+.sub-finance__legend em {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex-shrink: 0;
+    font-style: normal;
+}
+
+.sub-finance__fund {
+    border-top: 1px solid var(--line-subtle);
+    padding-top: 12px;
+    display: grid;
+    gap: 6px;
+}
+
+.sub-finance__fund-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-dim);
+    align-items: center;
+}
+
+.sub-finance__fund-row--warn {
+    color: #f87171;
+}
+
+.sub-finance__fund-type {
+    font-size: 10px;
+    background: rgba(255,255,255,0.05);
+    border-radius: 4px;
+    padding: 1px 6px;
+    color: var(--text-muted);
+}
+
+/* ── 일정 탭 ──────────────────────────────────────────────────────────── */
+
+.sub-sched-panel {
+    padding: 24px;
+    display: grid;
+    gap: 28px;
+}
+
+.sub-sched-group {
+    display: grid;
+    gap: 0;
+}
+
+.sub-sched-group__title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0 0 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--line);
+}
+
+.sub-sched-group__title--past { opacity: 0.5; }
+
+.sub-sched-row {
+    display: grid;
+    grid-template-columns: 110px 10px 1fr;
+    gap: 0 16px;
+    align-items: center;
+    padding: 13px 0;
+    border-bottom: 1px solid var(--line-subtle);
+}
+
+.sub-sched-row:last-child { border-bottom: none; }
+
+.sub-sched-row__dates {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+}
+
+.sub-sched-row__dday {
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.sub-sched-row__date {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+.sub-sched-row__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    justify-self: center;
+    flex-shrink: 0;
+}
+
+.sub-sched-row__content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.sub-sched-row__complex {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-bright);
+}
+
+.sub-sched-row__label {
+    font-size: 12px;
+    color: var(--text-dim);
+}
+
+/* ── 자금 탭 ──────────────────────────────────────────────────────────── */
+
+.sub-finance-tab {
+    display: grid;
+    gap: 20px;
+}
+
+.sub-finance-summary {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+}
+
+.sub-fin-stat {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 18px 20px;
+    background: var(--surface);
+    text-align: center;
+}
+
+.sub-fin-stat__label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    margin: 0 0 8px;
+}
+
+.sub-fin-stat__value {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-bright);
+    margin: 0;
+    letter-spacing: -0.02em;
+}
+
+/* ── 패널 공통 ────────────────────────────────────────────────────────── */
+
+.sub-panel {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    overflow: hidden;
+}
+
+.sub-panel__head {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.sub-panel__eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+    font-size: 10px;
+    color: var(--accent-subscription, #f43f5e);
+    margin: 0 0 6px;
+}
+
+.sub-panel__head h3 {
+    margin: 0 0 3px;
+    font-family: var(--font-display);
+    font-size: 18px;
+}
+
+.sub-panel__sub {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-muted);
+}
+
+.sub-panel__body {
+    padding: 20px 24px;
+}
+
+/* ── 모달 공통 ────────────────────────────────────────────────────────── */
+
+.sub-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(7, 11, 25, 0.85);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
+.sub-modal {
+    background: var(--bg-secondary);
+    border: 1px solid rgba(244, 63, 94, 0.3);
+    border-radius: var(--radius-xl);
+    width: 100%;
+    max-width: 500px;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg), 0 0 60px rgba(244,63,94,0.06);
+    animation: fadeIn 0.2s var(--ease-out);
+}
+
+.sub-modal--wide { max-width: 640px; }
+
+.sub-modal__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 24px;
+    border-bottom: 1px solid var(--line);
+    position: sticky;
+    top: 0;
+    background: var(--bg-secondary);
+    z-index: 1;
+}
+
+.sub-modal__header h3 { font-family: var(--font-display); font-size: 17px; margin: 0; }
+
+.sub-modal__score {
+    font-family: var(--font-display);
+    font-size: 15px;
+    font-weight: 700;
+    color: #f43f5e;
+}
+
+.sub-modal__close {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 15px;
+    cursor: pointer;
+    padding: 6px 8px;
+    border-radius: var(--radius-xs);
+    transition: color 0.15s, background 0.15s;
+    line-height: 1;
+}
+
+.sub-modal__close:hover { color: var(--text-bright); background: rgba(255,255,255,0.06); }
+
+.sub-modal__tabs {
+    display: flex;
+    border-bottom: 1px solid var(--line);
+    padding: 0 16px;
+    background: var(--bg-secondary);
+    position: sticky;
+    top: 57px;
+    z-index: 1;
+}
+
+.sub-modal__tab {
+    padding: 10px 14px;
+    border: none;
+    background: transparent;
+    color: var(--text-dim);
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: all 0.15s;
+    font-family: var(--font-body);
+}
+
+.sub-modal__tab:hover { color: var(--text); }
+.sub-modal__tab.is-active { color: #f43f5e; border-bottom-color: #f43f5e; }
+
+.sub-modal__form { padding: 0; }
+
+.sub-modal__footer {
+    padding: 16px 24px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    border-top: 1px solid var(--line);
+    background: var(--bg-secondary);
+    position: sticky;
+    bottom: 0;
+}
+
+/* ── 폼 요소 ──────────────────────────────────────────────────────────── */
+
+.sub-form-section {
+    padding: 18px 24px;
+    display: grid;
+    gap: 12px;
+}
+
+.sub-form-section__title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.sub-form-section__hint {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.sub-form-section__sub {
+    font-size: 11px;
+    color: var(--text-dim);
+    margin: 4px 0 0;
+    font-weight: 600;
+}
+
+.sub-form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+}
+
+.sub-form-row--three { grid-template-columns: 1fr 1fr 1fr; }
+
+.sub-form-label {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 11px;
+    color: var(--text-dim);
+    font-weight: 500;
+}
+
+.sub-form-input {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 8px 11px;
+    color: var(--text-bright);
+    font-family: var(--font-body);
+    font-size: 13px;
+    transition: border-color 0.15s;
+    width: 100%;
+}
+
+.sub-form-input:focus {
+    outline: none;
+    border-color: rgba(244, 63, 94, 0.5);
+    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08);
+}
+
+.sub-form-input option { background: var(--bg-secondary); }
+
+.sub-form-textarea { resize: vertical; min-height: 64px; }
+
+.sub-form-checks {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.sub-form-check-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+}
+
+.sub-form-check {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--text);
+    cursor: pointer;
+}
+
+.sub-form-check input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    accent-color: #f43f5e;
+    cursor: pointer;
+}
+
+/* ── 공통 ─────────────────────────────────────────────────────────────── */
+
+.sub-empty {
+    color: var(--text-muted);
+    font-size: 13px;
+    text-align: center;
+    padding: 48px 24px;
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 1100px) {
+    .sub-list-layout { grid-template-columns: 1fr 360px; }
+}
+
+@media (max-width: 900px) {
+    .sub-list-layout { grid-template-columns: 1fr; }
+    .sub-detail-panel { position: static; }
+    .sub-profile-card { grid-template-columns: 1fr; }
+    .sub-profile-card__right { flex-direction: column; align-items: flex-start; }
+    .sub-profile-score__breakdown { min-width: 0; width: 100%; }
+}
+
+@media (max-width: 768px) {
+    .sub-header { grid-template-columns: 1fr; }
+    .sub-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); }
+    .sub-stat-item { border-right: none; border-bottom: 1px solid var(--line); }
+    .sub-stat-item:nth-child(1), .sub-stat-item:nth-child(2) { border-right: 1px solid var(--line); }
+    .sub-stat-item:nth-child(3), .sub-stat-item:nth-child(4) { border-bottom: none; }
+    .sub-finance-summary { grid-template-columns: 1fr; }
+    .sub-form-row { grid-template-columns: 1fr; }
+    .sub-form-row--three { grid-template-columns: 1fr; }
+    .sub-form-check-grid { grid-template-columns: repeat(2, 1fr); }
+    .sub-tabs-bar { flex-direction: column; align-items: flex-start; }
+    .sub-sched-row { grid-template-columns: 90px 10px 1fr; gap: 0 10px; }
+    .sub-compare__row { grid-template-columns: 70px 1fr 1fr 16px; }
+}
diff --git a/src/pages/subscription/Subscription.jsx b/src/pages/subscription/Subscription.jsx
new file mode 100644
index 0000000..4eed0d5
--- /dev/null
+++ b/src/pages/subscription/Subscription.jsx
@@ -0,0 +1,1214 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { apiGet, apiPost, apiPut, apiDelete } from '../../api';
+import './Subscription.css';
+
+// ── 상수 ───────────────────────────────────────────────────────────────────────
+const STATUS_CONFIG = {
+    '검토중':   { color: '#94a3b8', bg: 'rgba(148,163,184,0.1)' },
+    '신청예정': { color: '#00d4ff', bg: 'rgba(0,212,255,0.1)' },
+    '신청완료': { color: '#8b5cf6', bg: 'rgba(139,92,246,0.1)' },
+    '당첨':     { color: '#34d399', bg: 'rgba(52,211,153,0.12)' },
+    '탈락':     { color: '#f87171', bg: 'rgba(248,113,113,0.1)' },
+    '포기':     { color: '#6b7280', bg: 'rgba(107,114,128,0.1)' },
+};
+
+const TYPE_CONFIG = {
+    '줍줍': { color: '#fbbf24' },
+    '특공': { color: '#f43f5e' },
+    '일반': { color: '#60a5fa' },
+};
+
+const SPECIAL_TYPES = ['신혼부부', '생애최초', '다자녀', '노부모부양', '기관추천'];
+const LOAN_TYPES = ['중도금대출', '잔금대출', '혼합', '자기자금'];
+const SUPPLY_TYPES = ['가점', '추첨', '혼합'];
+const RESIDENCE_AREAS = ['서울', '경기', '인천', '수도권', '부산', '대구', '대전', '광주', '전국'];
+const SPECIAL_QUALS = ['신혼부부', '생애최초', '다자녀', '노부모부양', '기관추천'];
+const TABS = ['청약 목록', '일정', '자금'];
+
+const DEFAULT_PROFILE = {
+    isHouseholdHead: true,
+    isHomeless: true,
+    homelessPeriod: 60,
+    savingsMonths: 84,
+    savingsCount: 84,
+    dependents: 2,
+    residencyArea: '서울',
+    isMarried: true,
+    marriageMonths: 36,
+    monthlyIncome: 600,
+    specialQuals: ['신혼부부'],
+};
+
+const SAMPLE_ITEMS = [
+    {
+        id: 1,
+        complexName: '힐스테이트 동탄',
+        address: '경기 화성시 동탄2신도시',
+        pyeong: '84㎡',
+        totalPrice: 55000,
+        type: '일반',
+        specialType: '',
+        supplyType: '가점',
+        status: '신청예정',
+        priority: 'high',
+        req_householdHead: true,
+        req_noHomePeriod: 24,
+        req_savingsCount: 24,
+        req_residencyArea: '수도권',
+        req_incomeLimit: 160,
+        req_dependentMin: 0,
+        req_notes: '수도권 2년 이상 거주 우선',
+        applicationStart: '2026-04-10',
+        applicationEnd: '2026-04-12',
+        winnerAnnouncement: '2026-04-17',
+        contractStart: '2026-05-01',
+        contractEnd: '2026-05-03',
+        interim1Date: '2026-10-01', interim1Ratio: 10,
+        interim2Date: '2027-04-01', interim2Ratio: 10,
+        interim3Date: '2027-10-01', interim3Ratio: 10,
+        balanceDate: '2028-06-01',
+        depositRatio: 10,
+        interimRatio: 60,
+        balanceRatio: 30,
+        loanAmount: 30000,
+        loanType: '중도금대출',
+        ownFunds: 25000,
+        memo: '동탄 핵심 입지, 가점으로 충분히 도전 가능.',
+    },
+    {
+        id: 2,
+        complexName: '롯데캐슬 마곡',
+        address: '서울 강서구 마곡동',
+        pyeong: '59㎡',
+        totalPrice: 72000,
+        type: '특공',
+        specialType: '신혼부부',
+        supplyType: '추첨',
+        status: '신청예정',
+        priority: 'high',
+        req_householdHead: false,
+        req_noHomePeriod: 0,
+        req_savingsCount: 6,
+        req_residencyArea: '서울',
+        req_incomeLimit: 130,
+        req_dependentMin: 0,
+        req_notes: '혼인 7년 이내, 무주택 세대',
+        applicationStart: '2026-03-20',
+        applicationEnd: '2026-03-22',
+        winnerAnnouncement: '2026-03-27',
+        contractStart: '2026-04-10',
+        contractEnd: '2026-04-12',
+        interim1Date: '2026-09-15', interim1Ratio: 10,
+        interim2Date: '2027-03-15', interim2Ratio: 10,
+        interim3Date: '', interim3Ratio: 10,
+        balanceDate: '2027-12-01',
+        depositRatio: 10,
+        interimRatio: 60,
+        balanceRatio: 30,
+        loanAmount: 40000,
+        loanType: '혼합',
+        ownFunds: 32000,
+        memo: '신혼부부 특공. 소득 요건 130% 확인 필요.',
+    },
+];
+
+const EMPTY_ITEM = {
+    complexName: '', address: '', pyeong: '', totalPrice: '',
+    type: '일반', specialType: '', supplyType: '가점', status: '검토중', priority: 'normal',
+    req_householdHead: true, req_noHomePeriod: 24, req_savingsCount: 24,
+    req_residencyArea: '수도권', req_incomeLimit: 160, req_dependentMin: 0, req_notes: '',
+    applicationStart: '', applicationEnd: '', winnerAnnouncement: '',
+    contractStart: '', contractEnd: '',
+    interim1Date: '', interim1Ratio: 10,
+    interim2Date: '', interim2Ratio: 10,
+    interim3Date: '', interim3Ratio: 10,
+    balanceDate: '',
+    depositRatio: 10, interimRatio: 60, balanceRatio: 30,
+    loanAmount: '', loanType: '중도금대출', ownFunds: '', memo: '',
+};
+
+// ── 가점 계산 ─────────────────────────────────────────────────────────────────
+const calcHomelessScore = (isHomeless, months) => {
+    if (!isHomeless) return 0;
+    const years = Math.floor((months || 0) / 12);
+    return Math.min((years + 1) * 2, 32);
+};
+
+const calcSavingsScore = (months) => {
+    const m = months || 0;
+    if (m < 6) return 1;
+    if (m < 12) return 2;
+    return Math.min(Math.floor(m / 12) + 2, 17);
+};
+
+const calcDependentScore = (count) => Math.min(5 + (count || 0) * 5, 35);
+
+const calcTotalScore = (p) => (
+    calcHomelessScore(p.isHomeless, p.homelessPeriod) +
+    calcSavingsScore(p.savingsMonths) +
+    calcDependentScore(p.dependents)
+);
+
+// ── 요건 비교 ─────────────────────────────────────────────────────────────────
+const checkRequirements = (item, profile) => {
+    const results = [];
+
+    if (item.req_householdHead) {
+        results.push({
+            label: '세대주',
+            required: '세대주 필요',
+            mine: profile.isHouseholdHead ? '세대주' : '세대원',
+            pass: profile.isHouseholdHead,
+        });
+    }
+
+    if (item.req_noHomePeriod > 0) {
+        const reqYr = Math.floor(item.req_noHomePeriod / 12);
+        const myYr = Math.floor((profile.homelessPeriod || 0) / 12);
+        results.push({
+            label: '무주택 기간',
+            required: `${reqYr}년 이상`,
+            mine: profile.isHomeless ? `${myYr}년` : '유주택',
+            pass: profile.isHomeless && (profile.homelessPeriod || 0) >= item.req_noHomePeriod,
+        });
+    }
+
+    if (item.req_savingsCount > 0) {
+        results.push({
+            label: '청약통장 납입',
+            required: `${item.req_savingsCount}회 이상`,
+            mine: `${profile.savingsCount || 0}회`,
+            pass: (profile.savingsCount || 0) >= item.req_savingsCount,
+        });
+    }
+
+    if (item.req_residencyArea && item.req_residencyArea !== '전국') {
+        const areaMap = {
+            '수도권': ['서울', '경기', '인천'],
+            '서울': ['서울'],
+        };
+        const valid = areaMap[item.req_residencyArea] || [item.req_residencyArea];
+        const pass = valid.some((a) => (profile.residencyArea || '').includes(a) || (profile.residencyArea || '') === a);
+        results.push({
+            label: '거주 지역',
+            required: `${item.req_residencyArea} 거주`,
+            mine: profile.residencyArea || '-',
+            pass,
+        });
+    }
+
+    if (item.req_dependentMin > 0) {
+        results.push({
+            label: '부양가족',
+            required: `${item.req_dependentMin}명 이상`,
+            mine: `${profile.dependents || 0}명`,
+            pass: (profile.dependents || 0) >= item.req_dependentMin,
+        });
+    }
+
+    if (item.type === '특공' && item.specialType) {
+        const hasQual = (profile.specialQuals || []).includes(item.specialType);
+        results.push({
+            label: '특공 자격',
+            required: item.specialType,
+            mine: hasQual ? item.specialType : '해당없음',
+            pass: hasQual,
+        });
+        if (item.specialType === '신혼부부') {
+            const reqMonths = 84; // 7년
+            results.push({
+                label: '혼인 기간',
+                required: '7년 이내',
+                mine: profile.marriageMonths ? `${Math.floor(profile.marriageMonths / 12)}년` : '-',
+                pass: (profile.marriageMonths || 0) <= reqMonths,
+            });
+        }
+    }
+
+    return results;
+};
+
+// ── 유틸 ──────────────────────────────────────────────────────────────────────
+const fmt = (d) => {
+    if (!d) return '-';
+    return new Date(d).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
+};
+
+const fmtFull = (d) => {
+    if (!d) return '-';
+    return new Date(d).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
+};
+
+const fmtPrice = (v) => v ? `${Number(v).toLocaleString()}만원` : '-';
+
+const getDDays = (d) => {
+    if (!d) return null;
+    const diff = Math.ceil((new Date(d) - new Date().setHours(0, 0, 0, 0)) / 86400000);
+    if (diff === 0) return 'D-Day';
+    return diff > 0 ? `D-${diff}` : `D+${Math.abs(diff)}`;
+};
+
+// ── 내 조건 카드 ───────────────────────────────────────────────────────────────
+const ProfileCard = ({ profile, onEdit }) => {
+    const total = calcTotalScore(profile);
+    const hScore = calcHomelessScore(profile.isHomeless, profile.homelessPeriod);
+    const sScore = calcSavingsScore(profile.savingsMonths);
+    const dScore = calcDependentScore(profile.dependents);
+
+    const ScoreBar = ({ value, max, color }) => (
+        <div className="sub-score-bar">
+            <div
+                className="sub-score-bar__fill"
+                style={{ width: `${(value / max) * 100}%`, background: color }}
+            />
+        </div>
+    );
+
+    return (
+        <div className="sub-profile-card">
+            <div className="sub-profile-card__left">
+                <div className="sub-profile-card__title-row">
+                    <p className="sub-profile-card__label">내 청약 조건</p>
+                    <button className="button ghost small" onClick={onEdit}>편집</button>
+                </div>
+                <div className="sub-profile-tags">
+                    <span className={`sub-tag ${profile.isHouseholdHead ? 'is-pass' : 'is-fail'}`}>
+                        {profile.isHouseholdHead ? '세대주' : '세대원'}
+                    </span>
+                    <span className={`sub-tag ${profile.isHomeless ? 'is-pass' : 'is-fail'}`}>
+                        {profile.isHomeless ? `무주택 ${Math.floor((profile.homelessPeriod || 0) / 12)}년` : '유주택'}
+                    </span>
+                    <span className="sub-tag is-neutral">{profile.residencyArea}</span>
+                    <span className="sub-tag is-neutral">통장 {Math.floor((profile.savingsMonths || 0) / 12)}년</span>
+                    <span className="sub-tag is-neutral">부양 {profile.dependents}명</span>
+                    {(profile.specialQuals || []).map((q) => (
+                        <span key={q} className="sub-tag is-special">{q}</span>
+                    ))}
+                </div>
+            </div>
+            <div className="sub-profile-card__right">
+                <div className="sub-profile-score">
+                    <div className="sub-profile-score__number">{total}</div>
+                    <div className="sub-profile-score__label">가점 / 84점</div>
+                </div>
+                <div className="sub-profile-score__breakdown">
+                    <div className="sub-score-row">
+                        <span>무주택</span>
+                        <ScoreBar value={hScore} max={32} color="#00d4ff" />
+                        <span className="sub-score-val">{hScore}/32</span>
+                    </div>
+                    <div className="sub-score-row">
+                        <span>부양가족</span>
+                        <ScoreBar value={dScore} max={35} color="#8b5cf6" />
+                        <span className="sub-score-val">{dScore}/35</span>
+                    </div>
+                    <div className="sub-score-row">
+                        <span>통장기간</span>
+                        <ScoreBar value={sScore} max={17} color="#f59e0b" />
+                        <span className="sub-score-val">{sScore}/17</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ── 청약 카드 ─────────────────────────────────────────────────────────────────
+const SubCard = ({ item, isSelected, onClick, profile }) => {
+    const scfg = STATUS_CONFIG[item.status] || STATUS_CONFIG['검토중'];
+    const tcfg = TYPE_CONFIG[item.type] || TYPE_CONFIG['일반'];
+    const checks = checkRequirements(item, profile);
+    const passCount = checks.filter((c) => c.pass).length;
+    const allPass = checks.length > 0 && passCount === checks.length;
+    const dday = getDDays(item.applicationStart);
+
+    return (
+        <div className={`sub-card ${isSelected ? 'is-selected' : ''}`} onClick={onClick}>
+            <div className="sub-card__top">
+                <span className="sub-badge" style={{ color: scfg.color, background: scfg.bg }}>
+                    {item.status}
+                </span>
+                <div className="sub-card__badges">
+                    <span className="sub-type-badge" style={{ color: tcfg.color }}>
+                        {item.type}
+                    </span>
+                    {item.specialType && <span className="sub-special-badge">{item.specialType}</span>}
+                </div>
+            </div>
+            <h3 className="sub-card__name">{item.complexName}</h3>
+            <p className="sub-card__address">{item.address}</p>
+            <div className="sub-card__info">
+                <span>{item.pyeong || '-'}</span>
+                <span className="sub-card__dot">·</span>
+                <span style={{ color: '#f59e0b' }}>{fmtPrice(item.totalPrice)}</span>
+            </div>
+            <div className="sub-card__bottom">
+                {checks.length > 0 && (
+                    <span className={`sub-eligibility ${allPass ? 'is-ok' : 'is-warn'}`}>
+                        {allPass ? `✓ 요건 충족 (${passCount}/${checks.length})` : `△ ${passCount}/${checks.length} 충족`}
+                    </span>
+                )}
+                {dday && <span className="sub-card__dday">{dday}</span>}
+            </div>
+        </div>
+    );
+};
+
+// ── 요건 비교표 ────────────────────────────────────────────────────────────────
+const RequirementComparison = ({ item, profile }) => {
+    const checks = checkRequirements(item, profile);
+    if (checks.length === 0) {
+        return <p className="sub-empty-sm">요건 정보가 입력되지 않았습니다.</p>;
+    }
+    return (
+        <div className="sub-compare">
+            {checks.map((c) => (
+                <div key={c.label} className={`sub-compare__row ${c.pass ? 'is-pass' : 'is-fail'}`}>
+                    <span className="sub-compare__label">{c.label}</span>
+                    <span className="sub-compare__required">{c.required}</span>
+                    <span className="sub-compare__mine">{c.mine}</span>
+                    <span className="sub-compare__icon">{c.pass ? '✓' : '✗'}</span>
+                </div>
+            ))}
+            {item.req_notes && (
+                <p className="sub-compare__notes">📌 {item.req_notes}</p>
+            )}
+        </div>
+    );
+};
+
+// ── 일정 섹션 (상세 패널) ─────────────────────────────────────────────────────
+const ScheduleSection = ({ item }) => {
+    const events = [
+        { label: '청약 시작', date: item.applicationStart, type: 'start' },
+        { label: '청약 마감', date: item.applicationEnd, type: 'mid' },
+        { label: '당첨 발표', date: item.winnerAnnouncement, type: 'winner' },
+        { label: '계약 시작', date: item.contractStart, type: 'contract' },
+        { label: '계약 마감', date: item.contractEnd, type: 'mid' },
+        item.interim1Date && { label: `중도금 1차 (${item.interim1Ratio}%)`, date: item.interim1Date, type: 'interim' },
+        item.interim2Date && { label: `중도금 2차 (${item.interim2Ratio}%)`, date: item.interim2Date, type: 'interim' },
+        item.interim3Date && { label: `중도금 3차 (${item.interim3Ratio}%)`, date: item.interim3Date, type: 'interim' },
+        { label: '잔금 납부', date: item.balanceDate, type: 'balance' },
+    ].filter(Boolean).filter((e) => e.date);
+
+    const typeColor = {
+        start: '#00d4ff', mid: '#94a3b8', winner: '#34d399',
+        contract: '#8b5cf6', interim: '#f59e0b', balance: '#f43f5e',
+    };
+
+    return (
+        <div className="sub-schedule-mini">
+            {events.map((e, i) => (
+                <div key={i} className="sub-schedule-mini__item">
+                    <div className="sub-schedule-mini__dot" style={{ background: typeColor[e.type] }} />
+                    <div className="sub-schedule-mini__content">
+                        <span className="sub-schedule-mini__label">{e.label}</span>
+                        <span className="sub-schedule-mini__date">{fmtFull(e.date)}</span>
+                    </div>
+                    <span className="sub-schedule-mini__dday" style={{ color: typeColor[e.type] }}>
+                        {getDDays(e.date) || ''}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+// ── 자금 섹션 (상세 패널) ─────────────────────────────────────────────────────
+const FinanceSection = ({ item }) => {
+    const total = Number(item.totalPrice) || 0;
+    const deposit = Math.round(total * (item.depositRatio || 10) / 100);
+    const interim = Math.round(total * (item.interimRatio || 60) / 100);
+    const balance = total - deposit - interim;
+    const loan = Number(item.loanAmount) || 0;
+    const own = Number(item.ownFunds) || 0;
+    const loanRatio = total > 0 ? Math.round((loan / total) * 100) : 0;
+    const ownRatio = total > 0 ? Math.round((own / total) * 100) : 0;
+
+    return (
+        <div className="sub-finance">
+            <div className="sub-finance__total">
+                <span className="sub-finance__total-label">분양가</span>
+                <span className="sub-finance__total-value">{fmtPrice(total)}</span>
+            </div>
+            <div className="sub-finance__breakdown">
+                <div className="sub-finance__bar">
+                    <div style={{ width: `${item.depositRatio || 10}%`, background: '#8b5cf6' }} title={`계약금 ${item.depositRatio}%`} />
+                    <div style={{ width: `${item.interimRatio || 60}%`, background: '#f59e0b' }} title={`중도금 ${item.interimRatio}%`} />
+                    <div style={{ width: `${item.balanceRatio || 30}%`, background: '#f43f5e' }} title={`잔금 ${item.balanceRatio}%`} />
+                </div>
+                <div className="sub-finance__legend">
+                    <span><em style={{ background: '#8b5cf6' }} /> 계약금 {item.depositRatio}% — {fmtPrice(deposit)}</span>
+                    <span><em style={{ background: '#f59e0b' }} /> 중도금 {item.interimRatio}% — {fmtPrice(interim)}</span>
+                    <span><em style={{ background: '#f43f5e' }} /> 잔금 {item.balanceRatio}% — {fmtPrice(balance)}</span>
+                </div>
+            </div>
+            <div className="sub-finance__fund">
+                <div className="sub-finance__fund-row">
+                    <span>대출 계획</span>
+                    <span className="sub-finance__fund-type">{item.loanType}</span>
+                    <span style={{ color: '#60a5fa' }}>{fmtPrice(loan)} ({loanRatio}%)</span>
+                </div>
+                <div className="sub-finance__fund-row">
+                    <span>자기자금</span>
+                    <span />
+                    <span style={{ color: '#34d399' }}>{fmtPrice(own)} ({ownRatio}%)</span>
+                </div>
+                {total > 0 && loan + own !== total && (
+                    <div className="sub-finance__fund-row sub-finance__fund-row--warn">
+                        <span>미확보 자금</span>
+                        <span />
+                        <span style={{ color: '#f87171' }}>{fmtPrice(total - loan - own)}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// ── 상세 패널 ─────────────────────────────────────────────────────────────────
+const SubDetail = ({ item, profile, onEdit, onDelete }) => {
+    const [section, setSection] = useState('요건');
+    const sections = ['요건', '일정', '자금'];
+
+    if (!item) {
+        return (
+            <div className="sub-detail sub-detail--empty">
+                <div className="sub-detail__empty-icon">📋</div>
+                <p>청약 항목을 선택하면<br />상세 정보가 표시됩니다</p>
+            </div>
+        );
+    }
+
+    const scfg = STATUS_CONFIG[item.status] || STATUS_CONFIG['검토중'];
+    const tcfg = TYPE_CONFIG[item.type] || TYPE_CONFIG['일반'];
+    const checks = checkRequirements(item, profile);
+    const allPass = checks.length > 0 && checks.every((c) => c.pass);
+
+    return (
+        <div className="sub-detail" key={item.id}>
+            <div className="sub-detail__header">
+                <div>
+                    <div className="sub-detail__badges">
+                        <span className="sub-badge sub-badge--lg" style={{ color: scfg.color, background: scfg.bg }}>
+                            {item.status}
+                        </span>
+                        <span className="sub-type-badge sub-type-badge--lg" style={{ color: tcfg.color }}>
+                            {item.type}{item.specialType ? ` · ${item.specialType}` : ''}
+                        </span>
+                        {checks.length > 0 && (
+                            <span className={`sub-eligibility sub-eligibility--badge ${allPass ? 'is-ok' : 'is-warn'}`}>
+                                {allPass ? '✓ 요건충족' : '△ 확인필요'}
+                            </span>
+                        )}
+                    </div>
+                    <h2 className="sub-detail__name">{item.complexName}</h2>
+                    <p className="sub-detail__address">{item.address} · {item.pyeong || '-'}</p>
+                </div>
+                <div className="sub-detail__actions">
+                    <button className="button ghost small" onClick={onEdit}>편집</button>
+                    <button className="button danger small" onClick={onDelete}>삭제</button>
+                </div>
+            </div>
+
+            <div className="sub-detail__price">
+                <span className="sub-detail__price-label">분양가</span>
+                <span className="sub-detail__price-value">{fmtPrice(item.totalPrice)}</span>
+                <span className="sub-detail__price-loan">대출 {fmtPrice(item.loanAmount)} · 자기자금 {fmtPrice(item.ownFunds)}</span>
+            </div>
+
+            <div className="sub-detail__sections">
+                <div className="sub-section-tabs">
+                    {sections.map((s) => (
+                        <button
+                            key={s}
+                            className={`sub-section-tab ${section === s ? 'is-active' : ''}`}
+                            onClick={() => setSection(s)}
+                        >
+                            {s}
+                        </button>
+                    ))}
+                </div>
+                <div className="sub-detail__section-content">
+                    {section === '요건' && <RequirementComparison item={item} profile={profile} />}
+                    {section === '일정' && <ScheduleSection item={item} />}
+                    {section === '자금' && <FinanceSection item={item} />}
+                </div>
+            </div>
+
+            {item.memo && (
+                <div className="sub-detail__memo">
+                    <p className="sub-detail__memo-title">메모</p>
+                    <p>{item.memo}</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ── 일정 탭 ────────────────────────────────────────────────────────────────────
+const ScheduleTab = ({ items }) => {
+    const eventTypeColor = {
+        start: '#00d4ff', end: '#94a3b8', winner: '#34d399',
+        contract: '#8b5cf6', interim: '#f59e0b', balance: '#f43f5e',
+    };
+
+    const events = items.flatMap((item) => {
+        const list = [
+            { date: item.applicationStart, label: '청약 시작', type: 'start', item },
+            { date: item.applicationEnd, label: '청약 마감', type: 'end', item },
+            { date: item.winnerAnnouncement, label: '당첨 발표', type: 'winner', item },
+            { date: item.contractStart, label: '계약 시작', type: 'contract', item },
+            { date: item.contractEnd, label: '계약 마감', type: 'end', item },
+            item.interim1Date && { date: item.interim1Date, label: `중도금 1차 (${item.interim1Ratio}%)`, type: 'interim', item },
+            item.interim2Date && { date: item.interim2Date, label: `중도금 2차 (${item.interim2Ratio}%)`, type: 'interim', item },
+            item.interim3Date && { date: item.interim3Date, label: `중도금 3차 (${item.interim3Ratio}%)`, type: 'interim', item },
+            { date: item.balanceDate, label: '잔금 납부', type: 'balance', item },
+        ].filter(Boolean).filter((e) => e.date);
+        return list;
+    }).sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    const today = new Date().setHours(0, 0, 0, 0);
+    const upcoming = events.filter((e) => new Date(e.date) >= today);
+    const past = events.filter((e) => new Date(e.date) < today).reverse();
+
+    const EventRow = ({ e }) => {
+        const color = eventTypeColor[e.type];
+        const scfg = STATUS_CONFIG[e.item.status] || STATUS_CONFIG['검토중'];
+        return (
+            <div className="sub-sched-row">
+                <div className="sub-sched-row__dates">
+                    <span className="sub-sched-row__dday" style={{ color }}>{getDDays(e.date)}</span>
+                    <span className="sub-sched-row__date">{fmtFull(e.date)}</span>
+                </div>
+                <div className="sub-sched-row__dot" style={{ background: color }} />
+                <div className="sub-sched-row__content">
+                    <span className="sub-sched-row__complex">{e.item.complexName}</span>
+                    <span className="sub-sched-row__label">{e.label}</span>
+                    <span className="sub-badge" style={{ color: scfg.color, background: scfg.bg, marginLeft: 8 }}>
+                        {e.item.status}
+                    </span>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="sub-sched-panel">
+            {upcoming.length > 0 && (
+                <div className="sub-sched-group">
+                    <h4 className="sub-sched-group__title">예정 일정</h4>
+                    {upcoming.map((e, i) => <EventRow key={i} e={e} />)}
+                </div>
+            )}
+            {past.length > 0 && (
+                <div className="sub-sched-group">
+                    <h4 className="sub-sched-group__title sub-sched-group__title--past">지난 일정</h4>
+                    {past.map((e, i) => <EventRow key={i} e={e} />)}
+                </div>
+            )}
+            {events.length === 0 && <p className="sub-empty">등록된 일정이 없습니다.</p>}
+        </div>
+    );
+};
+
+// ── 자금 탭 ────────────────────────────────────────────────────────────────────
+const FinanceTab = ({ items }) => {
+    const totalAll = items.reduce((s, i) => s + (Number(i.totalPrice) || 0), 0);
+    const loanAll = items.reduce((s, i) => s + (Number(i.loanAmount) || 0), 0);
+    const ownAll = items.reduce((s, i) => s + (Number(i.ownFunds) || 0), 0);
+
+    return (
+        <div className="sub-finance-tab">
+            <div className="sub-finance-summary">
+                <div className="sub-fin-stat">
+                    <p className="sub-fin-stat__label">총 분양가 합계</p>
+                    <p className="sub-fin-stat__value">{fmtPrice(totalAll)}</p>
+                </div>
+                <div className="sub-fin-stat">
+                    <p className="sub-fin-stat__label">총 대출 계획</p>
+                    <p className="sub-fin-stat__value" style={{ color: '#60a5fa' }}>{fmtPrice(loanAll)}</p>
+                </div>
+                <div className="sub-fin-stat">
+                    <p className="sub-fin-stat__label">총 자기자금</p>
+                    <p className="sub-fin-stat__value" style={{ color: '#34d399' }}>{fmtPrice(ownAll)}</p>
+                </div>
+            </div>
+
+            {items.map((item) => {
+                const total = Number(item.totalPrice) || 0;
+                const deposit = Math.round(total * (item.depositRatio || 10) / 100);
+                const interim = Math.round(total * (item.interimRatio || 60) / 100);
+                const balance = total - deposit - interim;
+                const loan = Number(item.loanAmount) || 0;
+                const own = Number(item.ownFunds) || 0;
+                const scfg = STATUS_CONFIG[item.status] || STATUS_CONFIG['검토중'];
+
+                return (
+                    <div key={item.id} className="sub-panel">
+                        <div className="sub-panel__head">
+                            <div>
+                                <p className="sub-panel__eyebrow">자금 계획</p>
+                                <h3>{item.complexName}</h3>
+                                <p className="sub-panel__sub">{item.address} · {item.pyeong}</p>
+                            </div>
+                            <span className="sub-badge sub-badge--lg" style={{ color: scfg.color, background: scfg.bg }}>
+                                {item.status}
+                            </span>
+                        </div>
+                        <div className="sub-panel__body">
+                            <div className="sub-finance">
+                                <div className="sub-finance__total">
+                                    <span className="sub-finance__total-label">분양가</span>
+                                    <span className="sub-finance__total-value">{fmtPrice(total)}</span>
+                                </div>
+                                <div className="sub-finance__breakdown">
+                                    <div className="sub-finance__bar">
+                                        <div style={{ width: `${item.depositRatio || 10}%`, background: '#8b5cf6' }} />
+                                        <div style={{ width: `${item.interimRatio || 60}%`, background: '#f59e0b' }} />
+                                        <div style={{ width: `${item.balanceRatio || 30}%`, background: '#f43f5e' }} />
+                                    </div>
+                                    <div className="sub-finance__legend">
+                                        <span><em style={{ background: '#8b5cf6' }} /> 계약금 {item.depositRatio}% — {fmtPrice(deposit)}</span>
+                                        <span><em style={{ background: '#f59e0b' }} /> 중도금 {item.interimRatio}% — {fmtPrice(interim)}</span>
+                                        <span><em style={{ background: '#f43f5e' }} /> 잔금 {item.balanceRatio}% — {fmtPrice(balance)}</span>
+                                    </div>
+                                </div>
+                                <div className="sub-finance__fund">
+                                    <div className="sub-finance__fund-row">
+                                        <span>대출 ({item.loanType})</span>
+                                        <span />
+                                        <span style={{ color: '#60a5fa' }}>{fmtPrice(loan)}</span>
+                                    </div>
+                                    <div className="sub-finance__fund-row">
+                                        <span>자기자금</span>
+                                        <span />
+                                        <span style={{ color: '#34d399' }}>{fmtPrice(own)}</span>
+                                    </div>
+                                    {total > 0 && loan + own !== total && (
+                                        <div className="sub-finance__fund-row sub-finance__fund-row--warn">
+                                            <span>미확보 자금</span>
+                                            <span />
+                                            <span style={{ color: '#f87171' }}>{fmtPrice(total - loan - own)}</span>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+// ── 내 조건 편집 모달 ─────────────────────────────────────────────────────────
+const ProfileModal = ({ profile, onClose, onSave }) => {
+    const [form, setForm] = useState({ ...profile });
+    const set = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.value }));
+    const setNum = (f) => (e) => setForm((p) => ({ ...p, [f]: Number(e.target.value) }));
+    const setBool = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.checked }));
+    const toggleQual = (q) => setForm((p) => ({
+        ...p,
+        specialQuals: p.specialQuals.includes(q)
+            ? p.specialQuals.filter((x) => x !== q)
+            : [...p.specialQuals, q],
+    }));
+
+    const handleSubmit = (e) => { e.preventDefault(); onSave(form); };
+    const score = calcTotalScore(form);
+
+    return (
+        <div className="sub-modal-overlay" onClick={onClose}>
+            <div className="sub-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="sub-modal__header">
+                    <h3>내 청약 조건 편집</h3>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                        <span className="sub-modal__score">가점 {score}점</span>
+                        <button className="sub-modal__close" onClick={onClose}>✕</button>
+                    </div>
+                </div>
+                <form className="sub-modal__form" onSubmit={handleSubmit}>
+                    <div className="sub-form-section">
+                        <p className="sub-form-section__title">기본 자격</p>
+                        <div className="sub-form-checks">
+                            <label className="sub-form-check">
+                                <input type="checkbox" checked={form.isHouseholdHead} onChange={setBool('isHouseholdHead')} />
+                                세대주
+                            </label>
+                            <label className="sub-form-check">
+                                <input type="checkbox" checked={form.isHomeless} onChange={setBool('isHomeless')} />
+                                무주택자
+                            </label>
+                            <label className="sub-form-check">
+                                <input type="checkbox" checked={form.isMarried} onChange={setBool('isMarried')} />
+                                기혼
+                            </label>
+                        </div>
+                        <div className="sub-form-row">
+                            <label className="sub-form-label">
+                                무주택 기간 (개월)
+                                <input className="sub-form-input" type="number" value={form.homelessPeriod} onChange={setNum('homelessPeriod')} min="0" />
+                            </label>
+                            <label className="sub-form-label">
+                                거주 지역
+                                <select className="sub-form-input" value={form.residencyArea} onChange={set('residencyArea')}>
+                                    {RESIDENCE_AREAS.map((a) => <option key={a} value={a}>{a}</option>)}
+                                </select>
+                            </label>
+                        </div>
+                        <div className="sub-form-row">
+                            <label className="sub-form-label">
+                                부양가족 수 (명)
+                                <input className="sub-form-input" type="number" value={form.dependents} onChange={setNum('dependents')} min="0" />
+                            </label>
+                            <label className="sub-form-label">
+                                혼인 기간 (개월)
+                                <input className="sub-form-input" type="number" value={form.marriageMonths} onChange={setNum('marriageMonths')} min="0" />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="sub-form-section">
+                        <p className="sub-form-section__title">청약 통장</p>
+                        <div className="sub-form-row">
+                            <label className="sub-form-label">
+                                가입 기간 (개월)
+                                <input className="sub-form-input" type="number" value={form.savingsMonths} onChange={setNum('savingsMonths')} min="0" />
+                            </label>
+                            <label className="sub-form-label">
+                                납입 횟수 (회)
+                                <input className="sub-form-input" type="number" value={form.savingsCount} onChange={setNum('savingsCount')} min="0" />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="sub-form-section">
+                        <p className="sub-form-section__title">소득 · 특공 자격</p>
+                        <label className="sub-form-label">
+                            월 소득 (만원)
+                            <input className="sub-form-input" type="number" value={form.monthlyIncome} onChange={setNum('monthlyIncome')} />
+                        </label>
+                        <div className="sub-form-check-grid">
+                            {SPECIAL_QUALS.map((q) => (
+                                <label key={q} className="sub-form-check">
+                                    <input
+                                        type="checkbox"
+                                        checked={(form.specialQuals || []).includes(q)}
+                                        onChange={() => toggleQual(q)}
+                                    />
+                                    {q}
+                                </label>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="sub-modal__footer">
+                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
+                        <button type="submit" className="button primary">저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+// ── 청약 추가/편집 모달 ───────────────────────────────────────────────────────
+const SubModal = ({ item, onClose, onSave }) => {
+    const [form, setForm] = useState(item ? { ...item, totalPrice: String(item.totalPrice || ''), loanAmount: String(item.loanAmount || ''), ownFunds: String(item.ownFunds || '') } : { ...EMPTY_ITEM });
+    const [tab, setTab] = useState('기본');
+    const MODAL_TABS = ['기본', '요건', '일정', '자금'];
+
+    const set = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.value }));
+    const setNum = (f) => (e) => setForm((p) => ({ ...p, [f]: Number(e.target.value) }));
+    const setBool = (f) => (e) => setForm((p) => ({ ...p, [f]: e.target.checked }));
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSave({ ...form, totalPrice: Number(form.totalPrice) || 0, loanAmount: Number(form.loanAmount) || 0, ownFunds: Number(form.ownFunds) || 0 });
+    };
+
+    return (
+        <div className="sub-modal-overlay" onClick={onClose}>
+            <div className="sub-modal sub-modal--wide" onClick={(e) => e.stopPropagation()}>
+                <div className="sub-modal__header">
+                    <h3>{item ? '청약 편집' : '새 청약 추가'}</h3>
+                    <button className="sub-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <div className="sub-modal__tabs">
+                    {MODAL_TABS.map((t) => (
+                        <button key={t} className={`sub-modal__tab ${tab === t ? 'is-active' : ''}`} onClick={() => setTab(t)} type="button">
+                            {t}
+                        </button>
+                    ))}
+                </div>
+                <form className="sub-modal__form" onSubmit={handleSubmit}>
+                    {tab === '기본' && (
+                        <div className="sub-form-section">
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">
+                                    단지명 *
+                                    <input className="sub-form-input" value={form.complexName} onChange={set('complexName')} placeholder="단지명" required />
+                                </label>
+                                <label className="sub-form-label">
+                                    상태
+                                    <select className="sub-form-input" value={form.status} onChange={set('status')}>
+                                        {Object.keys(STATUS_CONFIG).map((s) => <option key={s} value={s}>{s}</option>)}
+                                    </select>
+                                </label>
+                            </div>
+                            <label className="sub-form-label">
+                                주소
+                                <input className="sub-form-input" value={form.address} onChange={set('address')} placeholder="서울 강서구 마곡동" />
+                            </label>
+                            <div className="sub-form-row sub-form-row--three">
+                                <label className="sub-form-label">
+                                    청약 유형
+                                    <select className="sub-form-input" value={form.type} onChange={set('type')}>
+                                        {['줍줍', '특공', '일반'].map((t) => <option key={t} value={t}>{t}</option>)}
+                                    </select>
+                                </label>
+                                {form.type === '특공' && (
+                                    <label className="sub-form-label">
+                                        특공 종류
+                                        <select className="sub-form-input" value={form.specialType} onChange={set('specialType')}>
+                                            <option value="">선택</option>
+                                            {SPECIAL_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+                                        </select>
+                                    </label>
+                                )}
+                                <label className="sub-form-label">
+                                    공급 방식
+                                    <select className="sub-form-input" value={form.supplyType} onChange={set('supplyType')}>
+                                        {SUPPLY_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+                                    </select>
+                                </label>
+                                <label className="sub-form-label">
+                                    평형
+                                    <input className="sub-form-input" value={form.pyeong} onChange={set('pyeong')} placeholder="84㎡" />
+                                </label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">
+                                    우선순위
+                                    <select className="sub-form-input" value={form.priority} onChange={set('priority')}>
+                                        <option value="high">★ 최우선</option>
+                                        <option value="normal">보통</option>
+                                        <option value="low">낮음</option>
+                                    </select>
+                                </label>
+                            </div>
+                            <label className="sub-form-label">
+                                메모
+                                <textarea className="sub-form-input sub-form-textarea" value={form.memo} onChange={set('memo')} rows={3} placeholder="청약 관련 특이사항, 전략 등" />
+                            </label>
+                        </div>
+                    )}
+
+                    {tab === '요건' && (
+                        <div className="sub-form-section">
+                            <p className="sub-form-section__hint">이 청약에 요구되는 자격 조건을 입력하세요.</p>
+                            <div className="sub-form-checks">
+                                <label className="sub-form-check">
+                                    <input type="checkbox" checked={form.req_householdHead} onChange={setBool('req_householdHead')} />
+                                    세대주 요건
+                                </label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">
+                                    무주택 기간 요건 (개월)
+                                    <input className="sub-form-input" type="number" value={form.req_noHomePeriod} onChange={setNum('req_noHomePeriod')} min="0" placeholder="0 = 무관" />
+                                </label>
+                                <label className="sub-form-label">
+                                    청약통장 납입 요건 (회)
+                                    <input className="sub-form-input" type="number" value={form.req_savingsCount} onChange={setNum('req_savingsCount')} min="0" />
+                                </label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">
+                                    거주 지역 요건
+                                    <select className="sub-form-input" value={form.req_residencyArea} onChange={set('req_residencyArea')}>
+                                        {['전국', ...RESIDENCE_AREAS].map((a) => <option key={a} value={a}>{a}</option>)}
+                                    </select>
+                                </label>
+                                <label className="sub-form-label">
+                                    소득 기준 (%)
+                                    <input className="sub-form-input" type="number" value={form.req_incomeLimit} onChange={setNum('req_incomeLimit')} placeholder="도시근로자 평균 대비 %" />
+                                </label>
+                            </div>
+                            <label className="sub-form-label">
+                                최소 부양가족 (명)
+                                <input className="sub-form-input" type="number" value={form.req_dependentMin} onChange={setNum('req_dependentMin')} min="0" />
+                            </label>
+                            <label className="sub-form-label">
+                                기타 요건 비고
+                                <textarea className="sub-form-input sub-form-textarea" value={form.req_notes} onChange={set('req_notes')} rows={2} placeholder="혼인 7년 이내, 생애최초 등 기타 요건" />
+                            </label>
+                        </div>
+                    )}
+
+                    {tab === '일정' && (
+                        <div className="sub-form-section">
+                            <p className="sub-form-section__hint">청약 접수부터 잔금까지 일정을 입력하세요.</p>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">청약 시작<input className="sub-form-input" type="date" value={form.applicationStart} onChange={set('applicationStart')} /></label>
+                                <label className="sub-form-label">청약 마감<input className="sub-form-input" type="date" value={form.applicationEnd} onChange={set('applicationEnd')} /></label>
+                            </div>
+                            <label className="sub-form-label">당첨 발표<input className="sub-form-input" type="date" value={form.winnerAnnouncement} onChange={set('winnerAnnouncement')} /></label>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">계약 시작<input className="sub-form-input" type="date" value={form.contractStart} onChange={set('contractStart')} /></label>
+                                <label className="sub-form-label">계약 마감<input className="sub-form-input" type="date" value={form.contractEnd} onChange={set('contractEnd')} /></label>
+                            </div>
+                            <p className="sub-form-section__sub">중도금 납입일</p>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">1차 일자<input className="sub-form-input" type="date" value={form.interim1Date} onChange={set('interim1Date')} /></label>
+                                <label className="sub-form-label">1차 비율 (%)<input className="sub-form-input" type="number" value={form.interim1Ratio} onChange={setNum('interim1Ratio')} /></label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">2차 일자<input className="sub-form-input" type="date" value={form.interim2Date} onChange={set('interim2Date')} /></label>
+                                <label className="sub-form-label">2차 비율 (%)<input className="sub-form-input" type="number" value={form.interim2Ratio} onChange={setNum('interim2Ratio')} /></label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">3차 일자<input className="sub-form-input" type="date" value={form.interim3Date} onChange={set('interim3Date')} /></label>
+                                <label className="sub-form-label">3차 비율 (%)<input className="sub-form-input" type="number" value={form.interim3Ratio} onChange={setNum('interim3Ratio')} /></label>
+                            </div>
+                            <label className="sub-form-label">잔금 납부일<input className="sub-form-input" type="date" value={form.balanceDate} onChange={set('balanceDate')} /></label>
+                        </div>
+                    )}
+
+                    {tab === '자금' && (
+                        <div className="sub-form-section">
+                            <p className="sub-form-section__hint">분양가 및 자금 계획을 입력하세요.</p>
+                            <label className="sub-form-label">
+                                분양가 (만원)
+                                <input className="sub-form-input" type="number" value={form.totalPrice} onChange={set('totalPrice')} placeholder="80000" />
+                            </label>
+                            <div className="sub-form-row sub-form-row--three">
+                                <label className="sub-form-label">계약금 비율 (%)<input className="sub-form-input" type="number" value={form.depositRatio} onChange={setNum('depositRatio')} /></label>
+                                <label className="sub-form-label">중도금 비율 (%)<input className="sub-form-input" type="number" value={form.interimRatio} onChange={setNum('interimRatio')} /></label>
+                                <label className="sub-form-label">잔금 비율 (%)<input className="sub-form-input" type="number" value={form.balanceRatio} onChange={setNum('balanceRatio')} /></label>
+                            </div>
+                            <div className="sub-form-row">
+                                <label className="sub-form-label">
+                                    대출 금액 (만원)
+                                    <input className="sub-form-input" type="number" value={form.loanAmount} onChange={set('loanAmount')} placeholder="30000" />
+                                </label>
+                                <label className="sub-form-label">
+                                    대출 유형
+                                    <select className="sub-form-input" value={form.loanType} onChange={set('loanType')}>
+                                        {LOAN_TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+                                    </select>
+                                </label>
+                            </div>
+                            <label className="sub-form-label">
+                                자기자금 (만원)
+                                <input className="sub-form-input" type="number" value={form.ownFunds} onChange={set('ownFunds')} placeholder="20000" />
+                            </label>
+                        </div>
+                    )}
+
+                    <div className="sub-modal__footer">
+                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
+                        <button type="submit" className="button primary">{item ? '저장' : '추가'}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+// ── 메인 컴포넌트 ──────────────────────────────────────────────────────────────
+const Subscription = () => {
+    const [profile, setProfile] = useState(DEFAULT_PROFILE);
+    const [items, setItems] = useState(SAMPLE_ITEMS);
+    const [selected, setSelected] = useState(null);
+    const [activeTab, setActiveTab] = useState('청약 목록');
+    const [filterStatus, setFilterStatus] = useState('전체');
+    const [showProfileModal, setShowProfileModal] = useState(false);
+    const [showSubModal, setShowSubModal] = useState(false);
+    const [editingItem, setEditingItem] = useState(null);
+
+    // API 연동 (실패 시 localStorage + 샘플 데이터 fallback)
+    useEffect(() => {
+        const saved = localStorage.getItem('sub_profile');
+        if (saved) setProfile(JSON.parse(saved));
+        apiGet('/api/subscription/profile').then((d) => { if (d) setProfile(d); }).catch(() => {});
+    }, []);
+
+    useEffect(() => {
+        const saved = localStorage.getItem('sub_items');
+        if (saved) { const parsed = JSON.parse(saved); if (parsed.length > 0) setItems(parsed); }
+        apiGet('/api/subscription/items').then((d) => { if (Array.isArray(d) && d.length > 0) setItems(d); }).catch(() => {});
+    }, []);
+
+    const saveProfile = async (data) => {
+        setProfile(data);
+        localStorage.setItem('sub_profile', JSON.stringify(data));
+        setShowProfileModal(false);
+        try { await apiPut('/api/subscription/profile', data); } catch {}
+    };
+
+    const persist = (newItems) => {
+        setItems(newItems);
+        localStorage.setItem('sub_items', JSON.stringify(newItems));
+    };
+
+    const handleAdd = async (data) => {
+        const n = { ...data, id: Date.now() };
+        const next = [...items, n];
+        persist(next);
+        setShowSubModal(false);
+        try { await apiPost('/api/subscription/items', data); } catch {}
+    };
+
+    const handleUpdate = async (data) => {
+        const next = items.map((i) => (i.id === data.id ? data : i));
+        persist(next);
+        if (selected?.id === data.id) setSelected(data);
+        setEditingItem(null);
+        setShowSubModal(false);
+        try { await apiPut(`/api/subscription/items/${data.id}`, data); } catch {}
+    };
+
+    const handleDelete = async (id) => {
+        if (!confirm('삭제하시겠습니까?')) return;
+        const next = items.filter((i) => i.id !== id);
+        persist(next);
+        if (selected?.id === id) setSelected(null);
+        try { await apiDelete(`/api/subscription/items/${id}`); } catch {}
+    };
+
+    const handleModalSave = (data) => {
+        if (editingItem) handleUpdate({ ...editingItem, ...data });
+        else handleAdd(data);
+    };
+
+    const filtered = useMemo(() => {
+        if (filterStatus === '전체') return items;
+        return items.filter((i) => i.status === filterStatus);
+    }, [items, filterStatus]);
+
+    const stats = useMemo(() => ({
+        total: items.length,
+        upcoming: items.filter((i) => i.status === '신청예정').length,
+        won: items.filter((i) => i.status === '당첨').length,
+        passed: items.filter((i) => checkRequirements(i, profile).every((c) => c.pass)).length,
+    }), [items, profile]);
+
+    return (
+        <div className="sub">
+            {/* 헤더 */}
+            <header className="sub-header">
+                <div>
+                    <p className="sub-kicker">청약 관리</p>
+                    <h1>청약 대시보드</h1>
+                    <p className="sub-desc">청약 자격 비교, 일정 관리, 자금 계획을 한 곳에서 관리합니다.</p>
+                    <div className="sub-header-actions">
+                        <button className="button primary" onClick={() => { setEditingItem(null); setShowSubModal(true); }}>
+                            + 청약 추가
+                        </button>
+                        <Link to="/realestate/property" className="button ghost">부동산 정보 →</Link>
+                        <a href="https://www.applyhome.co.kr" target="_blank" rel="noreferrer" className="button ghost">청약홈 →</a>
+                    </div>
+                </div>
+                <div className="sub-stats-bar">
+                    <div className="sub-stat-item">
+                        <p className="sub-stat-item__value">{stats.total}</p>
+                        <p className="sub-stat-item__label">관심 청약</p>
+                    </div>
+                    <div className="sub-stat-item">
+                        <p className="sub-stat-item__value" style={{ color: '#00d4ff' }}>{stats.upcoming}</p>
+                        <p className="sub-stat-item__label">신청 예정</p>
+                    </div>
+                    <div className="sub-stat-item">
+                        <p className="sub-stat-item__value" style={{ color: '#34d399' }}>{stats.won}</p>
+                        <p className="sub-stat-item__label">당첨</p>
+                    </div>
+                    <div className="sub-stat-item">
+                        <p className="sub-stat-item__value" style={{ color: '#f43f5e' }}>{stats.passed}</p>
+                        <p className="sub-stat-item__label">요건 충족</p>
+                    </div>
+                </div>
+            </header>
+
+            {/* 내 조건 카드 */}
+            <ProfileCard profile={profile} onEdit={() => setShowProfileModal(true)} />
+
+            {/* 탭 바 */}
+            <div className="sub-tabs-bar">
+                <div className="sub-tabs">
+                    {TABS.map((t) => (
+                        <button key={t} className={`sub-tab ${activeTab === t ? 'is-active' : ''}`} onClick={() => setActiveTab(t)}>
+                            {t}
+                        </button>
+                    ))}
+                </div>
+                {activeTab === '청약 목록' && (
+                    <div className="sub-filter">
+                        {['전체', ...Object.keys(STATUS_CONFIG)].map((s) => (
+                            <button key={s} className={`sub-filter-btn ${filterStatus === s ? 'is-active' : ''}`} onClick={() => setFilterStatus(s)}>
+                                {s}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* 청약 목록 탭 */}
+            {activeTab === '청약 목록' && (
+                <div className="sub-list-layout">
+                    <div className="sub-card-grid">
+                        {filtered.length === 0 ? <p className="sub-empty">등록된 청약이 없습니다.</p> : (
+                            filtered.map((item) => (
+                                <SubCard
+                                    key={item.id}
+                                    item={item}
+                                    isSelected={selected?.id === item.id}
+                                    onClick={() => setSelected(item)}
+                                    profile={profile}
+                                />
+                            ))
+                        )}
+                    </div>
+                    <div className="sub-detail-panel">
+                        <SubDetail
+                            item={selected}
+                            profile={profile}
+                            onEdit={() => { setEditingItem(selected); setShowSubModal(true); }}
+                            onDelete={() => handleDelete(selected.id)}
+                        />
+                    </div>
+                </div>
+            )}
+
+            {activeTab === '일정' && (
+                <div className="sub-panel">
+                    <div className="sub-panel__head">
+                        <div>
+                            <p className="sub-panel__eyebrow">타임라인</p>
+                            <h3>전체 청약 일정</h3>
+                            <p className="sub-panel__sub">청약 접수부터 잔금 납부까지 모든 일정을 확인합니다.</p>
+                        </div>
+                    </div>
+                    <ScheduleTab items={items} />
+                </div>
+            )}
+
+            {activeTab === '자금' && <FinanceTab items={items} />}
+
+            {showProfileModal && (
+                <ProfileModal profile={profile} onClose={() => setShowProfileModal(false)} onSave={saveProfile} />
+            )}
+            {showSubModal && (
+                <SubModal
+                    item={editingItem}
+                    onClose={() => { setShowSubModal(false); setEditingItem(null); }}
+                    onSave={handleModalSave}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Subscription;
diff --git a/src/routes.jsx b/src/routes.jsx
index d0c217b..095ca85 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -4,6 +4,7 @@ import {
     IconBlog,
     IconLotto,
     IconStock,
+    IconBuilding,
     IconTravel,
     IconLab,
     IconTodo,
@@ -15,6 +16,8 @@ const Lotto = lazy(() => import('./pages/lotto/Lotto'));
 const Travel = lazy(() => import('./pages/travel/Travel'));
 const Stock = lazy(() => import('./pages/stock/Stock'));
 const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
+const RealEstate = lazy(() => import('./pages/realestate/RealEstate'));
+const Subscription = lazy(() => import('./pages/subscription/Subscription'));
 const EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
 const Todo = lazy(() => import('./pages/todo/Todo'));
 
@@ -55,6 +58,15 @@ export const navLinks = [
         icon: <IconStock />,
         accent: '#60a5fa',
     },
+    {
+        id: 'realestate',
+        label: 'Realestate',
+        path: '/realestate',
+        subtitle: '부동산',
+        description: '청약 자격 비교, 일정 관리, 관심 단지 정보를 관리하는 공간',
+        icon: <IconBuilding />,
+        accent: '#f43f5e',
+    },
     {
         id: 'travel',
         label: 'Travel',
@@ -105,6 +117,14 @@ export const appRoutes = [
         path: 'stock/trade',
         element: <StockTrade />,
     },
+    {
+        path: 'realestate',
+        element: <Subscription />,
+    },
+    {
+        path: 'realestate/property',
+        element: <RealEstate />,
+    },
     {
         path: 'travel',
         element: <Travel />,