/* Shared complex-page components. Per-page differences stay in their original sheets. */

/* Secondary actions and comparison chooser */
.hero-secondary-actions { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px; }
.hero-secondary-actions > span { flex:0 1 auto; }
.comparison-action { display:flex;align-items:center;flex:0 0 auto; }
.comparison-action button { min-height:28px;padding:4px 8px;border-radius:5px;background:rgb(242,244,246);color:#000;font-size:12px;font-weight:600;white-space:nowrap; }
.comparison-action button::before { content:'+ ';font-weight:700; }
.comparison-action button[data-mode="view"]::before { content:''; }
.comparison-action button:disabled { opacity:.45; }
.comparison-action span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.comparison-replace-modal { position:fixed;inset:0;z-index:10020;background:rgba(0,0,0,.42);padding:20px; }
.comparison-replace-modal[hidden] { display:none; }
.comparison-replace-modal > section { position:absolute;left:15px;right:15px;bottom:15px;box-sizing:border-box;max-width:520px;margin:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18); }
.comparison-replace-modal h2 { font-size:17px;font-weight:700;color:#191f28; }
.comparison-replace-modal p { margin:7px 0 15px;color:#6b7684;font-size:12px; }
.comparison-replace-modal [data-comparison-replace-choices] { display:grid;gap:8px; }
.comparison-replace-modal [data-comparison-replace-choices] button,.comparison-replace-modal [data-comparison-replace-cancel] { width:100%;min-height:44px;padding:10px;border-radius:9px;background:#f2f4f6;color:#171d2d;font-size:13px;font-weight:700; }
.comparison-replace-modal [data-comparison-replace-cancel] { margin-top:10px;background:#fff;border:1px solid #e5e8eb; }

/* Tooltips */
.tooltip-container { position: relative; display: inline-flex; align-items: center; align-self: center; line-height: 1; cursor: pointer; }
.tooltip-icon { display: block; flex: none; width: 1em; height: 1em; 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; }

/* Header chrome */
.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); }
.menu { display: flex; 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; }
@media (max-width: 360px) {
    .menu { padding-left: 4px; padding-right: 4px; }
}

/* Transaction filters */
.deal-type-toggles .toggle-btn::before { content: '✓'; display: inline-block; width: 1em; margin-right: 4px; visibility: hidden; }
.deal-type-toggles .toggle-btn.active::before { visibility: visible; }
.deal-type-toggles { display: flex; gap: 6px; margin-top: 15px; margin-bottom: 8px; }
.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); }
.trade-data-scroll-region { position: relative; }
.trade-filters-sticky { position: sticky; top: 59px; z-index: 10; background: #fff; padding-top: 1px; }
.area-filter-toggles-container::before, .area-filter-toggles-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.area-filter-toggles-container::before { left: 0; }
.area-filter-toggles-container::after { right: 0; }
.area-filter-toggles-container.show-left-fade::before { opacity: 1; }
.area-filter-toggles-container.show-right-fade::after { opacity: 1; }

/* Area selects retain their native control until JavaScript enhancement succeeds. */
.detail-area-select-native { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.detail-area-select { min-width:0; flex:none; }
.detail-area-select .acha-select__button { min-height:36px; width:auto; white-space:nowrap; cursor:pointer; }
.detail-area-select .acha-select__button:focus-visible, .detail-area-select .acha-select__menu [role=option]:focus-visible { outline:2px solid #104be0; outline-offset:2px; }
.detail-area-select .acha-select__button:disabled { opacity:.5; cursor:not-allowed; }

/* Chart/trend controls. Page-specific select transitions and minimum widths stay local. */
.trend-interval-btn { padding: 3px 9px; font-size: 12px; font-weight: 500; border: none; border-radius: 5px; background-color: transparent; color: #495057; cursor: pointer; transition: all 0.2s ease-in-out; }
.trend-interval-btn:hover { background-color: rgba(255,255,255,0.6); }
.trend-interval-btn.active { background-color: white; color: #212529; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.trend-interval-btn, #trend-area-select, #chart-area-select { touch-action: manipulation; }
#trend-area-select, #chart-area-select {
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    background-color: white;
    color: #212529;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    height: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--detail-area-arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    padding-right: 25px;
}
:root {
    --detail-area-arrow: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23495057%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.1%203.2-15.9%208.1-3.8%204.9-4.9%2011-3.4%2017.4l130.6%20130.6c2.8%202.8%206.7%204.3%2010.6%204.3s7.8-1.5%2010.6-4.3l130.6-130.6c3.8-3.8%205-9.9%203.4-17.4z%22%2F%3E%3C%2Fsvg%3E');
}
@media (max-width: 480px) {
    .trend-controls-header { flex-wrap: wrap; justify-content: space-between; gap: 12px; }
    .trend-controls-header > h3 { width: 100%; margin: 0; }
    .trend-controls-options { flex-grow: 1; justify-content: flex-end; width: 100%; }
}

/* Transaction metadata cells, shared by server-rendered and paginated rows. */
.trade-cell-date { text-align: left; padding: 10px 5px 10px 10px; font-size: 12px; color: rgb(107,118,132); }
.trade-cell-area { text-align: center; padding: 10px 5px; font-size: 12px; color: rgb(107,118,132); line-height: 1.4; }
.trade-cell-change { text-align: center; padding: 10px 5px; font-size: 12px; line-height: 1.4; }

/* Shared apartment/villa ranking cells; officetel retains its existing table layout. */
.complex-rank-cell { padding: 10px; vertical-align: middle; border-bottom: 1px solid #f1f3f5; font-size: 13px; }
.complex-rank-cell--rank { text-align: center; }
.complex-rank-cell--name { text-align: left; font-weight: 500; }
.complex-rank-cell--price { text-align: right; font-weight: 600; }
.complex-rank-row-current .complex-rank-cell { background-color: #212529; color: white; }
.complex-rank-row-current .complex-rank-cell--name,
.complex-rank-row-current .complex-rank-cell--price { font-weight: 700; }
.complex-rank-row-current .complex-rank-cell--rank { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.complex-rank-row-current .complex-rank-cell--price { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Compact ranking names: same fade on light and highlighted rows. */
.apartment-rank-table, .villa-rank-table { table-layout: fixed; }
.apartment-rank-name, .villa-rank-name, .officetel-ranking-table td:nth-child(2) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}

/* Area buttons and trend rows */
.area-toggle-btn {
    width: 120px;
    height: 50px;
    box-sizing: border-box;
    padding: 6px 8px;
    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;
    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;
}
.area-toggle-btn .area-avg-price { font-size: 11px; color: #555; font-weight: 400; margin-top: 2px; white-space: nowrap; }
.area-toggle-btn .area-avg-price-explanation { font-size: 10px; color: #777; font-weight: 400; margin-top: 1px; 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; }
.area-toggle-btn.active .area-avg-price-explanation { color: #bbb; }
.area-toggle-btn.active:hover { background-color: #23272b; border-color: #1d2124; }
.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); }