/* Shared apartment/officetel detail-page styles. */
    .header-container { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; background: #fff; }
    .header-left { display: flex; align-items: center; }
    .header-logo { text-decoration:none;color:#000;font-size:18px;font-weight:700;padding:15px;margin:0;white-space:nowrap; }
    .header-logo img { height:26px;padding:0 6px 4px 6px;vertical-align:middle;box-sizing:border-box; }
    .back-button { width:44px; min-height:44px; border:none; background:none; cursor:pointer; padding:0; margin-right:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .back-button svg { width:28px; height:28px; stroke:rgba(0,12,30,0.9); }
    .logo { font-size: 18px; font-weight: 700; padding: 15px; margin: 0px; }
    .menu { display: flex; /* gap: 7.5px; */ padding: 15px; }
    .menu a, .menu button { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
    .back-button:focus-visible, .menu a:focus-visible, .menu button:focus-visible, .toggle-btn:focus-visible { outline:2px solid #104be0; outline-offset:2px; }
    .menu svg { width: 20px; height: 20px; stroke: rgb(130, 130, 130); stroke-width: 3; position: relative; bottom: 2px; }
    .menu #recently-visited-btn svg { width: 20px; height: 20px; stroke: rgb(130, 130, 130); stroke-width: 2.5; position: relative; bottom: 2px; }
    h1, h2, h3 { margin: 0px; padding: 0px; font-weight: inherit; font-size: inherit; }
    button {
        cursor: pointer;
        font-family: inherit;
        border: none;
        background: none;
        padding: 0;
    }
    button:focus-visible {
        outline: 2px solid dodgerblue;
        outline-offset: 2px;
    }

    .cdeal { opacity: 0.5; text-decoration-line: line-through; text-decoration-color: rgb(107, 118, 132); }
    .max-dot, .min-dot { fill: rgb(245, 130, 141); }

    /* Styles for Deal Type Toggle Buttons */
    .deal-type-toggles {
        display: flex;
        gap: 6px;
        margin-top: 15px;
        margin-bottom: 8px;
    }
    .toggle-btn { /* For 매매, 전세, 월세 buttons */
        flex: 1; min-height:44px; box-sizing:border-box; padding: 7px 10px; font-size: 13px; font-weight: 500;
        border: 1px solid #e0e0e0; border-radius: 5px;
        background-color: #f8f9fa; color: #555;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        text-align: center;
    }
    .toggle-btn:hover { background-color: #e9ecef; border-color: #d0d0d0; color: #333; }
    .toggle-btn.active { color: white; font-weight: 600; }
    .toggle-btn.active[data-type="매매"] { background-color: rgb(240, 68, 82); border-color: rgb(240, 68, 82); }
    .toggle-btn.active[data-type="전세"] { background-color: rgb(2, 147, 89); border-color: rgb(2, 147, 89); }
    .toggle-btn.active[data-type="월세"] { background-color: rgb(27, 100, 218); border-color: rgb(27, 100, 218); }
    .toggle-btn.active[data-type="매매"]:hover { background-color: rgb(220, 53, 69); border-color: rgb(220, 53, 69); }
    .toggle-btn.active[data-type="전세"]:hover { background-color: rgb(1, 127, 77); border-color: rgb(1, 127, 77); }
    .toggle-btn.active[data-type="월세"]:hover { background-color: rgb(23, 88, 190); border-color: rgb(23, 88, 190); }

    @media (max-width: 360px) {
        .menu { padding-left:4px; padding-right:4px; }
    }

    .trade-data-scroll-region { position: relative; }
    .trade-filters-sticky { position: sticky; top: 59px; z-index: 10; background: #fff; padding-top: 1px; }

    /* Styles for Area Filter Toggle Buttons - UPDATED FOR WRAPPING LAYOUT */
    .area-filter-toggles-container {
        display: flex;
        flex-wrap: nowrap; /* Prevent wrapping to ensure a single row */
        overflow-x: auto; /* Enable horizontal scrolling */
        gap: 6px; /* Spacing between buttons */
        padding: 5px 0px 8px 0px; /* Vertical padding, no horizontal padding on container */
        margin-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap; /* Ensure content stays on one line for scrolling */
        position: relative; /* For positioning pseudo-elements */
        cursor: grab;

        /* Re-hide scrollbars */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .area-filter-toggles-container::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .area-filter-toggles-container::before, /* Left fade */
    .area-filter-toggles-container::after { /* Right fade */
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px; /* Width of the fade effect */
        pointer-events: none; /* So they don't interfere with clicks on buttons */
        z-index: 2;
        transition: opacity 0.2s ease-in-out;
        opacity: 0; /* Hidden by default */
    }

    .area-filter-toggles-container::before {
        left: 0;
    }

    .area-filter-toggles-container::after {
        right: 0;
    }

    /* Classes to be toggled by JavaScript */
    .area-filter-toggles-container.show-left-fade::before {
        opacity: 1;
    }
    .area-filter-toggles-container.show-right-fade::after {
        opacity: 1;
    }

    .area-toggle-btn {
        width: 120px; /* ADDED: Set a fixed width for all area toggle buttons */
        height: 50px;
        box-sizing: border-box; /* ADDED: Ensure padding and border are included in the width */
        padding: 6px 8px; /* Existing padding */
        font-size: 13px; font-weight: 500;
        border: 1px solid #e0e0e0; border-radius: 5px;
        background-color: #f8f9fa; color: #555;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        text-align: center; /* Existing: centers text within the button */
        flex-shrink: 0;
        white-space: nowrap;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
        cursor: pointer; /* Existing */
    }
    .area-toggle-btn .area-size {
        /* Styles for the main area text e.g., "84m²" */
    }
    .area-toggle-btn .area-avg-price {
        font-size: 11px;
        color: #555;
        font-weight: 400;
        margin-top: 2px;
        white-space: nowrap;
    }
    /* ADDED: Style for '최근 10거래 평균' text inside '전체' button */
    .area-toggle-btn .area-avg-price-explanation {
        font-size: 10px;
        color: #777; /* Muted color for default state */
        font-weight: 400;
        margin-top: 1px; /* Space between '전체' and this line */
        white-space: nowrap;
        line-height: 1.2;
    }

    .area-toggle-btn:hover { background-color: #e9ecef; border-color: #d0d0d0; color: #333; }
    .area-toggle-btn.active {
        background-color: #343a40; color: white;
        border-color: #343a40; font-weight: 600;
    }
    .area-toggle-btn.active .area-avg-price {
        color: #ccc;
    }
    /* ADDED: Style for '최근 10거래 평균' text when '전체' button is active */
    .area-toggle-btn.active .area-avg-price-explanation {
        color: #bbb; /* Lighter muted color for active state */
    }
    .area-toggle-btn.active:hover { background-color: #23272b; border-color: #1d2124; }
    /* Styles for Trend Analysis Section */
    .trend-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 18px;
        font-size: 13px;
    }
    .trend-label {
        flex-shrink: 0;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 5px;
        margin-right: 10px;
        font-size: 12px;
        width: 35px;
        text-align: center;
        position: relative;
        top: 1px;
    }
    .trend-details {
        line-height: 1.6;
        color: #343a40;
        margin: 2px 0;
    }
    .trend-details > p {
        margin: 0 0 6px 0;
    }
    .trend-comparison {
        display: block;
        font-size: 12px;
        margin-top: 2px;
    }
    .trend-comparison svg {
        width: 12px;
        height: 12px;
        vertical-align: middle;
        position: relative;
        bottom: 1px;
        margin-right: 2px;
    }
    .trend-up { color: rgb(240, 68, 82); }
    .trend-down { color: rgb(49, 130, 246); }
    .trend-neutral { color: rgb(107, 118, 132); }
    .trend-up svg { fill: rgb(240, 68, 82); }
    .trend-down svg { fill: rgb(49, 130, 246); }
    .trend-neutral svg { fill: rgb(107, 118, 132); }
    
    /* Tooltip Styles */
    .tooltip-container {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    .tooltip-icon {
        color: #adb5bd;
    }
    .tooltip-container .tooltip-text {
        visibility: hidden;
        width: 240px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px;
        position: absolute;
        z-index: 10;
        bottom: 140%;
        left: 50%;
        margin-left: -120px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
    }
    .tooltip-container .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    .apartment-public-price-section {
        margin: 24px 0 0;
        padding: 0;
    }
    .apartment-public-price-container {
        padding: 15px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        background: #f8f9fa;
    }
    .apartment-public-price-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }
    .apartment-public-price-header h2 {
        color: #191f28;
        font-size: 17px;
        font-weight: 700;
    }
    .apartment-public-price-unit {
        width: min(100%, 180px);
        min-height: 44px;
        border: 1px solid #d9dee5;
        border-radius: 8px;
        background: #fff;
        color: #4e5968;
        padding: 7px 10px;
        font-size: 12px;
    }
    .apartment-public-price-status,
    .apartment-public-price-note {
        margin: 0;
        color: #8b95a1;
        font-size: 11px;
        line-height: 1.5;
    }
    .apartment-public-price-status { margin-bottom: 8px; }
    .apartment-public-price-note { padding-top: 8px; }
    .apartment-public-price-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        background: #fff;
        font-size: 12px;
    }
    .apartment-public-price-table th,
    .apartment-public-price-table td {
        border: 1px solid #e5e7eb;
        padding: 9px 5px;
        text-align: center;
    }
    .apartment-public-price-table th {
        background: #f3f4f6;
        color: #4b5563;
        font-weight: 600;
    }
    .apartment-public-price-table td:last-child {
        color: #1f2937;
        font-weight: 600;
        text-align: right;
        padding-right: 9px;
    }
    .apartment-public-price-table tr:nth-child(even) td { background: #fafafa; }
    .apartment-public-price-table tr.latest td:last-child { color: #2563eb; }
    .apartment-public-price-message {
        margin: 0;
        padding: 20px 0;
        color: #6b7280;
        font-size: 13px;
        text-align: center;
    }
    .apartment-public-price-message.error { color: #ef4444; }
    @media (max-width: 360px) {
        .apartment-public-price-header { align-items: flex-start; flex-direction: column; }
        .apartment-public-price-unit { width: 100%; }
    }

    .officetel-ranking-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        background: #fff;
        font-size: 13px;
    }
    .officetel-ranking-table th,
    .officetel-ranking-table td {
        padding: 10px 6px;
        border-bottom: 1px solid #f1f3f5;
        text-align: center;
        vertical-align: middle;
    }
    .officetel-ranking-table th {
        color: #4b5563;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .officetel-ranking-table th:first-child,
    .officetel-ranking-table td:first-child { width: 52px; }
    .officetel-ranking-table th:last-child,
    .officetel-ranking-table td:last-child { width: 92px; text-align: right; }
    .officetel-ranking-table td:nth-child(2) {
        text-align: left;
        font-weight: 500;
        overflow-wrap: anywhere;
    }
    .officetel-ranking-table td:nth-child(2) a {
        display: block;
        color: inherit;
        text-decoration: none;
    }
    .officetel-ranking-table tr.current td {
        background: #212529;
        color: #fff;
        font-weight: 700;
    }
    .officetel-ranking-table tr.current td:first-child {
        border-radius: 8px 0 0 8px;
    }
    .officetel-ranking-table tr.current td:last-child {
        border-radius: 0 8px 8px 0;
    }
    .officetel-ranking-table tr.current td:nth-child(2) a { color: #fff; }
    .officetel-ranking-table tr.ranking-gap td {
        padding: 4px;
        color: #adb5bd;
        font-size: 12px;
    }
    .officetel-ranking-meta {
        margin: 15px 0 0;
        color: #8b95a1;
        font-size: 11px;
        line-height: 1.5;
    }