/*
 * 모바일 화면 전용 최종 보정 레이어.
 * 기존 지도·목록·상세 스타일 뒤에 로드해 데스크톱에는 영향을 주지 않는다.
 */

@media screen and (max-width: 768px) {
    :root {
        --mobile-edge: 8px;
        --mobile-control-height: 44px;
        --mobile-radius: 12px;
    }

    html {
        overflow-x: hidden;
        scroll-padding-top: 64px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        overflow-x: hidden;
        font-size: 14px;
        line-height: 1.45;
    }

    /* mobile.css의 전역 transition/will-change가 지도와 스크롤 성능을 떨어뜨리지 않게 한다. */
    * {
        min-width: 0;
        transition-property: none !important;
        will-change: auto !important;
    }

    button,
    a,
    select,
    input {
        touch-action: manipulation;
    }

    button,
    a,
    select,
    input,
    .tab-button,
    .search-tag {
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease !important;
    }

    canvas,
    img,
    svg {
        max-width: 100%;
    }

    /* 메인 검색 영역 */
    .main-header {
        padding: max(10px, env(safe-area-inset-top)) var(--mobile-edge) 10px !important;
    }

    .search-box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .location-selectors {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .location-select,
    #search-input,
    .view-region-btn,
    .location-btn,
    .filter-toggle-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: var(--mobile-control-height) !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .location-select,
    #search-input {
        padding: 10px 11px !important;
        background: #fff;
    }

    .search-input-wrapper {
        grid-column: 1 / -1;
        width: 100%;
    }

    .view-region-btn {
        grid-column: 1 / -1;
        justify-content: center;
        background: #1769e0 !important;
        color: #fff !important;
        font-weight: 700;
    }

    .location-btn,
    .filter-toggle-btn {
        justify-content: center;
        padding: 9px 10px !important;
    }

    .search-container {
        width: 100%;
        padding: 0 !important;
    }

    .advanced-search-filters {
        margin: 8px 0 0 !important;
        padding: 13px !important;
        border-radius: var(--mobile-radius) !important;
    }

    .filter-row,
    .filter-group {
        display: block !important;
        width: 100%;
    }

    .filter-row {
        margin-bottom: 12px !important;
    }

    .filter-group label {
        display: block;
        min-width: 0 !important;
        margin-bottom: 7px;
        font-size: 13px !important;
    }

    .range-inputs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 7px !important;
    }

    .range-inputs input {
        width: 100%;
        min-height: 42px;
        padding: 8px !important;
        font-size: 13px !important;
    }

    .filter-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .apply-filters-btn,
    .reset-filters-btn {
        width: 100%;
        min-height: var(--mobile-control-height);
        padding: 9px !important;
    }

    #search-results,
    .search-results {
        max-height: min(56dvh, 460px) !important;
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: var(--mobile-radius) !important;
        overscroll-behavior: contain;
    }

    /* 상단 광고가 늦게 채워져도 아래 콘텐츠가 크게 밀리지 않게 공간을 선점한다. */
    #header-ad {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: clamp(120px, 30vw, 180px) !important;
        margin: 8px 0 10px !important;
        background: #f5f7fa !important;
        contain: layout paint;
        overflow: hidden;
    }

    #header-ad .adsbygoogle {
        display: block !important;
        width: 100% !important;
        min-height: clamp(120px, 30vw, 180px) !important;
    }

    main {
        width: 100% !important;
        padding: 0 var(--mobile-edge) 16px !important;
    }

    .tab-navigation {
        position: sticky;
        top: 0;
        z-index: 25;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
        margin: 0 calc(var(--mobile-edge) * -1) 8px;
        padding: 8px var(--mobile-edge) !important;
        border-bottom: 1px solid rgba(226, 231, 239, 0.9);
        background: rgba(245, 247, 250, 0.94);
        backdrop-filter: blur(10px);
    }

    .tab-button {
        width: 100%;
        min-height: var(--mobile-control-height) !important;
        justify-content: center;
        padding: 8px !important;
        border-radius: 10px;
        font-size: 13px !important;
    }

    .trade-status-section,
    .national-trends {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .card {
        margin: 0 !important;
        padding: 12px !important;
        border-radius: var(--mobile-radius) !important;
    }

    .chart-container {
        width: 100%;
        height: clamp(205px, 56vw, 280px) !important;
        margin: 6px 0 !important;
    }

    /* 지도는 브라우저 주소창 높이 변화에도 과도하게 커지거나 작아지지 않게 한다. */
    .map-section.apartment-layout {
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        overflow: visible !important;
    }

    .map-section.apartment-layout .map-pane {
        width: 100% !important;
        height: clamp(320px, 56dvh, 460px) !important;
        min-height: clamp(320px, 56dvh, 460px) !important;
        border-radius: var(--mobile-radius) !important;
    }

    .map-section.apartment-layout #korea-map {
        width: 100% !important;
        height: 100% !important;
    }

    .map-section.apartment-layout #apt-info-panel {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(72%, 420px) !important;
        padding: 14px !important;
        border-radius: 16px 16px 0 0 !important;
        overscroll-behavior: contain;
    }

    #apt-info-panel .detail-btn,
    #apt-info-panel .close-btn {
        min-height: var(--mobile-control-height) !important;
    }

    .apt-list-panel {
        width: 100% !important;
        height: auto !important;
        max-height: min(62dvh, 520px) !important;
        margin-top: 10px !important;
        border-radius: var(--mobile-radius) !important;
    }

    .apt-list-header {
        padding: 13px 13px 9px !important;
    }

    .apt-list-header h3 {
        font-size: 17px !important;
    }

    .apt-list-controls {
        padding: 8px 13px !important;
    }

    .apt-list-controls select {
        min-height: 42px;
        font-size: 13px;
    }

    .apt-list {
        max-height: min(50dvh, 410px) !important;
        overscroll-behavior: contain;
    }

    .apt-list-state {
        min-height: 150px !important;
        padding: 20px !important;
    }

    .apt-list-focus-btn {
        min-height: 112px;
        padding: 12px 12px 10px !important;
    }

    .apt-list-item-top strong,
    .apt-list-price {
        font-size: 14px !important;
    }

    .apt-list-address,
    .apt-list-meta {
        font-size: 12px !important;
    }

    .apt-list-detail-btn {
        right: 9px !important;
        bottom: 9px !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }

    .apt-list-item .apt-list-map-hint {
        min-height: 42px;
        padding-right: 112px !important;
    }

    footer {
        margin-top: 14px !important;
        padding: 22px 12px calc(22px + env(safe-area-inset-bottom)) !important;
    }

    /* 상세페이지 모바일 압축 및 터치 영역 */
    .detail-topbar {
        min-height: 56px !important;
        padding: max(7px, env(safe-area-inset-top)) 10px 7px !important;
    }

    .back-button,
    .home-link,
    .primary-button,
    .secondary-button,
    .area-button,
    .period-button,
    .load-more-button {
        min-height: var(--mobile-control-height) !important;
    }

    .detail-container {
        width: calc(100% - 16px) !important;
        padding: 10px 0 calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .apartment-hero {
        gap: 16px !important;
        margin-bottom: 10px !important;
        padding: 18px 14px !important;
        border-radius: 15px !important;
    }

    .apartment-heading h1 {
        overflow-wrap: anywhere;
        font-size: clamp(23px, 7vw, 29px) !important;
    }

    .apartment-meta {
        gap: 6px !important;
        margin-top: 10px !important;
        font-size: 13px !important;
    }

    .hero-actions {
        gap: 8px !important;
    }

    .hero-actions button {
        width: 100%;
        padding: 9px 8px !important;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .summary-card {
        min-height: 112px !important;
        padding: 14px !important;
        border-radius: 13px !important;
    }

    .summary-label {
        margin-bottom: 8px !important;
        font-size: 11px !important;
    }

    .summary-value,
    .summary-value-small {
        min-height: 26px !important;
        overflow-wrap: anywhere;
        font-size: clamp(17px, 5.2vw, 22px) !important;
        line-height: 1.3 !important;
    }

    .summary-value-small {
        font-size: clamp(14px, 4.2vw, 18px) !important;
    }

    .summary-subtext {
        margin-top: 7px !important;
        font-size: 11px !important;
    }

    .comparison-notice {
        margin-bottom: 10px !important;
        padding: 12px 13px !important;
        font-size: 13px !important;
    }

    .detail-card {
        margin-bottom: 10px !important;
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }

    .section-heading {
        margin-bottom: 14px !important;
    }

    .section-heading h2 {
        font-size: 19px !important;
    }

    .area-filter,
    .period-filter {
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .area-filter::-webkit-scrollbar,
    .period-filter::-webkit-scrollbar {
        display: none;
    }

    .area-button,
    .period-button {
        padding: 8px 13px !important;
    }

    .area-stat-panel {
        gap: 8px !important;
    }

    .area-stat-item {
        padding: 12px !important;
    }

    .chart-wrapper {
        height: clamp(235px, 68vw, 290px) !important;
    }

    .sort-control select {
        min-height: var(--mobile-control-height) !important;
    }

    .mobile-transaction-list {
        gap: 8px !important;
    }

    .transaction-mobile-card {
        padding: 13px !important;
    }

    .nearby-grid {
        gap: 8px !important;
    }

    .nearby-card {
        min-height: 44px;
        padding: 14px !important;
    }

    /* 상세 광고는 실제 모바일 광고가 들어올 높이를 미리 확보한다. */
    .detail-ad-zone {
        min-height: 180px !important;
        margin: 10px 0 !important;
        padding: 24px 6px 8px !important;
        border-radius: 13px !important;
        contain: layout paint;
    }

    .detail-ad-zone .adsbygoogle {
        min-height: 146px !important;
    }

    .detail-ad-zone[data-ad-position='chart'] {
        min-height: 250px !important;
    }

    .detail-ad-zone[data-ad-position='chart'] .adsbygoogle {
        min-height: 216px !important;
    }

    .detail-ad-zone.is-collapsed {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 430px) {
    .map-section.apartment-layout .map-pane {
        height: clamp(300px, 52dvh, 380px) !important;
        min-height: clamp(300px, 52dvh, 380px) !important;
    }

    .apt-list-panel {
        max-height: min(58dvh, 470px) !important;
    }

    .apt-list {
        max-height: min(46dvh, 365px) !important;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .summary-card {
        min-height: 108px !important;
        padding: 12px !important;
    }

    .summary-value,
    .summary-value-small {
        font-size: 17px !important;
    }

    #header-ad,
    #header-ad .adsbygoogle {
        min-height: 120px !important;
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
    .map-section.apartment-layout .map-pane {
        height: clamp(300px, 72dvh, 430px) !important;
        min-height: clamp(300px, 72dvh, 430px) !important;
    }

    .apt-list-panel {
        max-height: 72dvh !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}