@charset "utf-8";

  :root {
        --primary-blue: #0056b3;
        --accent-red: #d9534f;
        --border-color: #ddd;
        --bg-light: #f8f9fa;
        --widget-blue-bg: #f4f8ff;
        --widget-blue-border: #d1d9e4;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Malgun Gothic", sans-serif; }
    body { background-color: #f2f4f7; font-size: 12px; color: #333; line-height: 1.5; padding-bottom: 0; }
    ul { list-style: none; }
    a { text-decoration: none; color: inherit; }

    /* 1. 헤더 영역 */
    header { background: #fff; border-bottom: 2px solid var(--primary-blue); }
    .header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
    .logo { font-size: 24px; font-weight: 900; color: #1a4a8d; cursor: pointer; }
    .top-nav { display: flex; gap: 20px; font-size: 14px; font-weight: bold; }

    /* 2. 메인 배너 */
    .main-banner { max-width: 1200px; margin: 15px auto; display: flex; background: #fff; border: 1px solid var(--border-color); height: 100px; }
    .banner-info { width: 220px; padding: 20px; border-right: 1px solid var(--border-color); text-align: center; background: #fafafa; }
    .banner-info .tel { font-size: 20px; font-weight: bold; color: var(--primary-blue); }
    .banner-img { flex: 1; background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ad?w=1200') center/cover; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }

    /* 3. 메인 컨테이너 레이아웃 */
    .wrapper { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; padding-bottom: 50px; }

    /* 좌측 사이드바 */
    aside.left-sidebar { width: 220px; flex-shrink: 0; }
    .side-box { background: #fff; border: 1px solid var(--border-color); margin-bottom: 15px; }
    .side-title { background: #eee; padding: 8px 10px; font-weight: bold; border-bottom: 1px solid var(--border-color); font-size: 11px; }
    .side-content { padding: 10px; }
    .side-menu li { padding: 8px 0; border-bottom: 1px dotted #ddd; cursor: pointer; font-size: 11px; }

    .blue-widget { background: var(--widget-blue-bg); border: 1px solid var(--widget-blue-border); border-radius: 8px; margin-bottom: 15px; padding: 12px; }
    .widget-head { font-size: 13px; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; color: #333; }
    .widget-head::before { content: "●"; color: #7a9fec; font-size: 10px; }

    .theme-list li { padding: 4px 0; font-size: 11px; color: #444; cursor: pointer; }
    .calc-box { background: #fff; border: 1px solid #dce4f0; border-radius: 5px; padding: 8px; margin-top: 5px; }
    .calc-row { display: flex; align-items: center; gap: 4px; font-size: 11px; margin: 5px 0; }
    .calc-row input { width: 45px; height: 22px; border: 1px solid #ccc; text-align: right; }
    .calc-btn { background: #f8f8f8; border: 1px solid #bbb; padding: 2px 6px; cursor: pointer; font-size: 11px; }
    .dot-line { border-top: 1px dotted #ccc; margin: 8px 0; }
    .link-list li { padding: 5px 0; border-bottom: 1px dotted #eee; color: #555; }

    /* 메인 콘텐츠 */
    main { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border-color); padding: 20px; }
    .section-header { border-bottom: 2px solid var(--primary-blue); margin-bottom: 15px; padding-bottom: 5px; display: flex; justify-content: space-between; align-items: flex-end; }
    .section-header h2 { font-size: 16px; color: var(--primary-blue); }

    /* 매물 그리드 (5열 고정) */
    .item-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 40px; }
    .grid-card { border: 1px solid #eee; text-align: center; }
    .grid-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
    .grid-info { padding: 8px; }
    .grid-info .title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; font-size: 11px; }
    .grid-info .price { color: var(--accent-red); font-weight: bold; }

    /* --- [수정 부분] 추천 매물 테이블 및 반응형 디자인 --- */
    .table-wrapper { border-top: 2px solid var(--primary-blue); width: 100%; overflow-x: auto; }
    .list-table { width: 100%; border-collapse: collapse; min-width: 600px; }
    .list-table th { background: #f4f8ff; border-bottom: 1px solid var(--widget-blue-border); padding: 12px 8px; font-size: 11px; color: var(--primary-blue); }
    .list-table td { border-bottom: 1px solid #eee; padding: 15px 8px; text-align: center; font-size: 11px; vertical-align: middle; }

    .thumb-box { width: 110px; }
    .thumb-img { width: 100px; height: 75px; object-fit: cover; border: 1px solid #ccc; padding: 2px; display: block; margin: 0 auto; }

    .subject-cell { text-align: left !important; padding-left: 15px !important; }
    .subject-cell .loc-name { color: #666; font-size: 11px; display: block; margin-bottom: 2px; }
    .subject-cell strong { display: block; color: var(--primary-blue); font-size: 13px; font-weight: bold; cursor: pointer; }

    .type-text { color: #e84118; }
    .area-info { text-align: left; display: inline-block; }
    .area-badge { display: inline-block; width: 28px; padding: 1px 0; text-align: center; border-radius: 2px; color: #fff; font-size: 10px; margin-right: 5px; }
    .bg-land { background: #6ab04c; }
    .bg-build { background: #3498db; }

    .price-cell { width: 120px; }
    .price-val { color: #d35400; font-weight: bold; font-size: 15px; }
    /* ------------------------------------------- */

    /* 우측 퀵메뉴 */
    .right-quick { width: 100px; flex-shrink: 0; }
    .quick-item { background: #fff; border: 1px solid #ccc; margin-bottom: 5px; text-align: center; padding: 10px 5px; cursor: pointer; font-size: 11px; font-weight: bold; }

    /* 4. 푸터 영역 */
    footer { background: #fff; border-top: 1px solid #ccc; padding: 40px 0; margin-top: 20px; }
    .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: flex-start; }
    .footer-left .footer-logo { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 10px; display: block; }
    .footer-left p { color: #666; font-size: 11px; line-height: 1.8; }
    .footer-right { text-align: right; }
    .copyright { font-size: 11px; color: #999; margin-top: 10px; }

    .mobile-call-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: var(--primary-blue); color: #fff; text-align: center; line-height: 60px; font-size: 18px; font-weight: bold; z-index: 9999; }

    @media (max-width: 768px) {
        body { padding-bottom: 60px; }
        .mobile-call-bar { display: block; }
        .wrapper { flex-direction: column; padding: 10px; }
        aside.left-sidebar, .right-quick { width: 100%; }
        .item-grid { grid-template-columns: repeat(2, 1fr); }

        /* [수정] 모바일 반응형 테이블: 리스트 형태로 전환 */
        .table-wrapper { border-top: none; }
        .list-table { min-width: 100%; }
        .list-table thead { display: none; }
        .list-table tr { display: block; border: 1px solid #eee; margin-bottom: 15px; padding: 12px; background: #fff; overflow: hidden; }
        .list-table td { display: block; width: 100% !important; text-align: left; padding: 5px 0; border: none; }
        .list-table td.thumb-box { float: left; width: 110px !important; margin-right: 15px; }
        .list-table td.subject-cell { padding-left: 0 !important; min-height: 80px; }
        .list-table td.price-cell { clear: both; border-top: 1px dotted #eee; text-align: right; margin-top: 10px; padding-top: 10px; }

        .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
        .footer-right { text-align: center; width: 100%; }
    }