/* ------------------------------------------------------------------
 * landsummary.css — 토지 검토보고서(요약생성) 모드 전용 스타일
 *
 * 기존 합필분석 패널(.map-land)을 재사용하고, .summary-mode 클래스로
 * 상단 주소검색 / 하단 액션 영역만 갈아끼운다. 합필분석 스타일은 건드리지 않는다.
 * ------------------------------------------------------------------ */

/* ==================================================================
 * [공통 레이아웃 보정] 합필분석·요약생성 패널 하단이 잘리는 문제
 *
 * content.css:2982 의 `.map-land { overflow:auto }` 는 패널 전체를 한 덩어리로
 * 스크롤시킨다. 선택 필지 목록(.ml-info)이 길어지면 하단(합필분석 / 요약 생성)이
 * 화면 밖으로 밀려 스크롤해야만 보였다.
 * → 패널을 flex 컬럼으로 바꿔 목록만 스크롤하고 하단은 항상 고정한다.
 *   (합필분석에도 함께 적용되는 기존 버그 수정)
 * ================================================================== */
@media (min-width: 992px) {
    .map-land {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .map-land .ml-title,
    .map-land .ml-search,
    .map-land .ml-section-title,
    .map-land .ml-summary,
    .map-land .ml-analysis,
    .map-land .ml-report {
        flex: 0 0 auto;
    }

    /* 선택 필지 목록만 스크롤. min-height:0 이 없으면 flex 자식이 줄지 않아 스크롤이 생기지 않는다. */
    .map-land .ml-info {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* 모바일 요약 모드 — 데스크톱과 같은 flex 컬럼 구조로 하단 버튼을 고정한다.
   요약 모드는 상단 검색·섹션제목·매도희망가·요약생성 버튼이 함께 있어,
   펼쳤을 때(.full, 높이 100%) 목록이 남는 공간을 다 먹으면 하단 버튼이 밀려난다.
   합필분석 모드는 기존 height 계산식을 그대로 두어야 하므로 summary-mode 로 한정한다. */
@media (max-width: 991px) {
    .map-land.summary-mode {
        display: flex;
        flex-direction: column;
    }
    .map-land.summary-mode .ml-title,
    .map-land.summary-mode .ml-search,
    .map-land.summary-mode .ml-section-title,
    .map-land.summary-mode .ml-summary,
    .map-land.summary-mode .ml-report {
        flex: 0 0 auto;
    }
    .map-land.summary-mode .ml-info {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;          /* content.css 의 calc 높이를 무효화 */
        overflow-y: auto;
    }

    /* 합필분석 모드는 기존 방식 유지(스크롤만 허용) */
    .map-land:not(.summary-mode) .ml-info {
        overflow-y: auto;
    }

    /* 면적 합계·공시지가 합계 박스 — 모바일에서 상하 여백 축소(좌우는 유지) */
    .map-land .ml-summary ul li {
        padding: 10px 20px;
    }
    .map-land .ml-summary ul li div {
        margin-top: 6px;
    }
}

/* ==================================================================
 * [모바일] 합필분석·요약생성 패널 위치를 실거래가 상세창과 맞춘다.
 *
 * 세 창(실거래 상세 / 합필분석 / 요약생성)은 항상 하나만 보이므로,
 * 손잡이도 같은 위치에 하나만 있어야 한다.
 * 기존 .map-land 는 top:100%(+.full 시 top:0)이라 손잡이가 화면 맨 위/아래에
 * 생겨 실거래 손잡이와 위치가 어긋났다.
 * → 실거래 상세창(.map-content)과 동일한 top 으로 맞추고 .full 은 쓰지 않는다.
 * ================================================================== */
@media (max-width: 991px) {
    /* 열린 기본 위치 = 실거래 상세창과 동일(손잡이가 화면 하단 부근에 위치).
       .full(펼침) 일 때는 제외해야 한다 — 그때는 content.css 의 top:0(전체화면)이
       적용돼야 손잡이 펼치기가 동작한다.
       (:not(.full) 없이 .active 만 쓰면 클래스 2개라, 클래스 3개인 .active.full 규칙에
        명시도가 밀려도 top 은 이 규칙이 이겨 버려 펼침이 막힌다) */
    .map-land.active:not(.full) {
        top: calc(100vh - 175px);
        top: calc(100dvh - 175px);
        margin-top: -25px;
        height: calc(100vh - 125px);
        height: calc(100dvh - 125px);
    }
    /* 손잡이 위 여백 = 실거래 상세창과 동일 */
    .map-land .ml-title {
        padding-top: 30px;
    }

    /* 합필분석·요약생성이 열리면 실거래 상세창 패널 전체를 숨긴다.
       실거래 wrapper 는 열려 있으면 화면을 꽉 채우므로(top:0, height:100%),
       손잡이만 가려선 그 흰 몸통이 그대로 남아 여백이 생기고 손잡이도 막힌다.
       두 패널이 형제가 아니라 CSS 로 가리키기 어려워, body 상태 클래스로 제어한다.
       (클래스 부착은 landSummary.js 에서) */
    body.landpanel-open .map-content-wrapper {
        display: none !important;
    }
}

/* ==================================================================
 * 합필분석 · 요약생성 버튼 활성 색상
 *
 * mystyle.css 의 공통 active 규칙에는 "합필분석 제외"로 되어 있어 두 버튼이 빠져 있다.
 * 그 파일을 고치지 않고, 뒤에 로드되는 여기서 메모관리와 같은 파란색을 입힌다.
 * ================================================================== */
.map-option > button#mapOptionLandOpen.active,
.map-option > button#mapOptionSummaryOpen.active,
#mapOptionLandOpen.active,
#mapOptionSummaryOpen.active {
    background: #1e90ff !important;
    background-color: #1e90ff !important;
    border-color: #1e90ff !important;
}

.map-option > button#mapOptionLandOpen.active i,
.map-option > button#mapOptionLandOpen.active span,
.map-option > button#mapOptionSummaryOpen.active i,
.map-option > button#mapOptionSummaryOpen.active span,
#mapOptionLandOpen.active i,
#mapOptionLandOpen.active span,
#mapOptionSummaryOpen.active i,
#mapOptionSummaryOpen.active span,
#mapOptionLandOpen.active *,
#mapOptionSummaryOpen.active * {
    color: #ffffff !important;
}

/* ==================================================================
 * 필지 선택 모드에서 지도 조건 UI 잠금
 * ================================================================== */
.map-ui-disabled {
    pointer-events: none !important;
    opacity: 0.4 !important;
    filter: grayscale(1);
    transition: opacity 0.15s;
}

/* 기본(합필분석 모드)에서는 요약 전용 블록을 숨긴다 */
.map-land .ml-search,
.map-land .ml-section-title,
.map-land .ml-report {
    display: none;
}

/* 요약 모드에서는 합필분석 블록을 숨기고 요약 전용 블록을 보인다 */
.map-land.summary-mode .ml-analysis {
    display: none;
}

.map-land.summary-mode .ml-search {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 10px 16px 0;
    position: relative;   /* 자동완성 목록의 기준 */
}

/* 주소 자동완성 목록 */
.ml-search-list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 16px;
    right: 16px;
    z-index: 20;
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ml-search-list li {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}
.ml-search-list li:last-child { border-bottom: 0; }
.ml-search-list li:hover,
.ml-search-list li.on { background: #eff6ff; }

.ml-search-list .ss-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}
.ml-search-list .ss-addr {
    font-size: 12px;
    color: #6b7280;
}
.ml-search-list .ss-tag {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border-radius: 2px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
}
.ml-search-list .ss-empty {
    padding: 10px;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    cursor: default;
}

.map-land.summary-mode .ml-section-title {
    display: block;
    padding: 14px 16px 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.map-land.summary-mode .ml-report {
    display: block;
    padding: 12px 16px 16px;
    border-top: 1px solid #e5e7eb;
}

/* 주소 검색 */
.map-land .ml-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}

.map-land .ml-search input:focus {
    outline: none;
    border-color: #438bfa;
}

.map-land .ml-search .btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: #e64a35;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.map-land .ml-search .btn:hover {
    background: #cf3f2c;
}

/* 매도희망가 입력 */
.map-land .ml-report-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.map-land .ml-report-price label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

.map-land .ml-report-price label .unit {
    color: #9ca3af;
    font-size: 11px;
}

.map-land .ml-report-price input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    text-align: right;
    /* 입력값은 검정·굵게, 안내문(placeholder)은 회색 */
    color: #111827;
    font-weight: 600;
}

.map-land .ml-report-price input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.map-land .ml-report-price input:focus {
    outline: none;
    border-color: #438bfa;
}

/* 입력값 해석 결과 (예: = 82억원) */
.map-land .ml-report-preview {
    margin: 4px 0 0;
    font-size: 12px;
    color: #2563eb;
    text-align: right;
    min-height: 16px;
}

/* 미입력 상태에서는 미리보기 영역이 공간을 차지하지 않게 한다
   (min-height·margin 이 남아 매도희망가와 요약생성 버튼 사이가 벌어져 보였다) */
.map-land .ml-report-preview:empty {
    margin: 0;
    min-height: 0;
}

.map-land .ml-report-preview.is-error {
    color: #dc2626;
}

/* 하단 요약 생성 */
.map-land .ml-report #land_summary_btn {
    width: 100%;
}

.map-land .ml-report #land_summary_btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.map-land .ml-report-help {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
}

/* 요약생성 진행 중 오버레이 */
#summaryLoading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.45);
}

#summaryLoading.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#summaryLoading .sl-box {
    padding: 28px 36px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 14px;
}

#summaryLoading .sl-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

#summaryLoading .sl-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    border: 3px solid #e5e7eb;
    border-top-color: #438bfa;
    border-radius: 50%;
    animation: slspin 0.9s linear infinite;
}

@keyframes slspin {
    to {
        transform: rotate(360deg);
    }
}