/* 공통 모듈이 만든 장식은 PC에서 표시하지 않고 원래 입력 배치를 유지합니다. */
.fm-mobile-search-added {
    display: none;
}

.fm-mobile-search-wrapped {
    display: contents;
}

@media (max-width: 1023.98px) {
    /* 별도 레이아웃의 검색도 견적 목록과 같은 기존 토큰을 사용합니다. */
    :is(body, #communityPage, #mobileSearchDialog, #mobileEstimateSearchForm) .fm-mobile-search {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 0 16px;
        border: 1px solid var(--fm-color-border);
        border-radius: var(--fm-radius-pill);
        background: var(--a-card-surface, var(--fm-color-surface));
        box-shadow: none;
    }

    :is(body, #communityPage, #mobileSearchDialog, #mobileEstimateSearchForm) .fm-mobile-search input {
        flex: 1;
        width: 0;
        min-width: 0;
        height: 50px;
        min-height: 0;
        margin: 0;
        padding: 1px 2px;
        border: 0;
        border-radius: 0;
        outline: none;
        background: transparent;
        box-shadow: none;
        color: var(--fm-color-text-primary);
        font-size: var(--a-font-input, 16px);
    }

    .fm-mobile-search input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .fm-mobile-search input::placeholder {
        font-size: 14px;
    }

    :is(body, #communityPage, #mobileSearchDialog) .fm-mobile-search .fm-mobile-search-action,
    :is(body, #communityPage, #mobileSearchDialog) .fm-mobile-search .fm-mobile-search-icon {
        position: relative;
        inset: auto;
        display: grid;
        place-items: center;
        order: 1;
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
        height: var(--a-control-height, 44px);
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: url('/images/cooperation/list-search.svg') center no-repeat;
        color: var(--k-text-gray);
        box-shadow: none;
        transform: none;
    }

    .fm-mobile-search-icon svg,
    .fm-mobile-search-icon > circle,
    .fm-mobile-search-icon > path,
    .fm-mobile-search-action svg,
    .fm-mobile-search-action img {
        display: none;
        width: var(--a-search-icon, 20px);
        height: var(--a-search-icon, 20px);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    @media (prefers-color-scheme: dark) {
        .fm-mobile-search .fm-mobile-search-action,
        .fm-mobile-search .fm-mobile-search-icon {
            filter: brightness(0) invert(1);
        }
    }

    :is(body, #communityPage, #mobileSearchDialog) .fm-mobile-search .fm-mobile-search-clear {
        display: block;
        order: 2;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--k-text-gray);
        font-size: 24px;
        box-shadow: none;
    }

    :is(body, #communityPage, #mobileSearchDialog) .fm-mobile-search .fm-mobile-search-clear[hidden],
    .a-mail-search.fm-mobile-search:not(:has(#mailLogKeywordCondition.is-active)) .fm-mobile-search-clear {
        display: none;
    }

    /* 메일 검색의 조건별 입력과 실행 버튼을 같은 검색 표면 안에 유지합니다. */
    .a-mail-search.fm-mobile-search > .select-arrow-wrapper {
        flex: 0 0 86px;
        width: 86px;
        min-width: 0;
        padding-right: 10px;
        border-right: 1px solid var(--fm-color-border);
    }

    .a-mail-search.fm-mobile-search .settle-search-condition {
        flex: 1;
        min-width: 0;
    }

    .a-mail-search.fm-mobile-search .settle-search-input-wrap {
        display: flex;
        width: 100%;
    }

    .a-mail-search.fm-mobile-search :is(.select-menu-trigger, select) {
        min-height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 13px;
    }

    /* 발송일은 조건과 실행 버튼 아래에 기간 입력을 두어 좁은 화면에서도 값을 읽을 수 있게 합니다. */
    .a-mail-search.fm-mobile-search:has(#mailLogDateCondition.is-active) {
        flex-wrap: wrap;
    }

    .a-mail-search.fm-mobile-search #mailLogDateCondition {
        order: 3;
        flex: 0 0 100%;
    }

    .a-mail-search.fm-mobile-search #mailLogDateCondition .settle-date-range {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
    }

    .a-mail-search.fm-mobile-search #mailLogDateCondition input {
        width: 100%;
    }

    .a-mail-search.fm-mobile-search #mailLogDateCondition .settle-date-separator {
        display: block;
    }

    #mobileSearchDialog .a-global-search-field {
        width: auto;
        margin: var(--k-space-form-label) 24px 0;
    }

    /* 자동완성은 후보 선택 구조를 유지하고 입력의 높이·표면만 맞춥니다. */
    .coop-mobile-layout input[role="combobox"] {
        min-height: var(--a-search-height);
        border-radius: var(--a-button-radius);
        background-color: var(--a-card-surface);
        font-size: var(--a-font-input);
    }
}