/* 협업 화면과 홈페이지가 동일한 공용 선택창과 옵션 목록을 사용합니다. */
.select-arrow-wrapper.is-enhanced-select {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

/* 폼의 테두리형 선택창은 입력 영역 전체 너비를 유지합니다. */
.select-arrow-wrapper.is-enhanced-select.is-full-width {
    display: flex;
    width: 100%;
}

.select-arrow-wrapper.is-enhanced-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.select-menu-trigger {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: var(--k-input-height);
    padding: 0 14px;
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    color: var(--ref-ink);
    font-family: var(--fm-font-family);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

/* 테두리형의 화살표는 선택 문구 길이와 무관하게 오른쪽 끝에 고정합니다. */
.select-arrow-wrapper.is-enhanced-select > .select-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-2);
    width: 100%;
    background-image: none;
}

/* 텍스트형 래퍼는 내부 버튼의 실제 너비를 따르도록 중첩된 플렉스 너비 계산을 제거합니다. */
.select-arrow-wrapper.is-enhanced-select.list-toolbar-select-freemode.is-text {
    display: inline-block;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

/* 문구와 화살표를 독립된 그리드 열로 배치하여 두 영역의 너비와 간격을 명확하게 확보합니다. */
.select-arrow-wrapper.is-enhanced-select.list-toolbar-select-freemode.is-text > .select-menu-trigger {
    display: inline-grid;
    grid-template-columns: max-content 16px;
    column-gap: var(--fm-space-2);
    justify-content: start;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* 텍스트형 문구는 줄이거나 말줄임표로 치환하지 않고 고유 너비로 표시합니다. */
.select-arrow-wrapper.is-enhanced-select.list-toolbar-select-freemode.is-text > .select-menu-trigger > span {
    overflow: visible;
    text-overflow: clip;
}

.select-arrow-wrapper.is-enhanced-select > .select-arrow-icon {
    display: none;
}

.select-menu-trigger::after {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: url('/images/customer-search-chevron.svg') center / contain no-repeat;
    transition: transform 0.25s ease;
}

.select-arrow-wrapper.open > .select-menu-trigger::after {
    transform: rotate(180deg);
}

.select-menu-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-menu-trigger:focus {
    border-color: var(--ref-ink);
    outline: none;
    box-shadow: none;
}

.select-menu-trigger:disabled {
    color: var(--fm-color-text-disabled);
    cursor: default;
}

.select-menu-freemode {
    position: fixed;
    z-index: 20000;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 8px);
    overflow-y: auto;
    padding: 6px 0;
    border: 0;
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-surface);
    box-shadow: var(--fm-shadow-modal);
}

.select-menu-freemode[hidden] {
    display: none;
}

.select-menu-freemode .custom-option {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 21px;
    border: 0;
    background: var(--fm-color-surface);
    color: var(--ref-ink);
    font-family: var(--fm-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.select-menu-freemode .custom-option:hover,
.select-menu-freemode .custom-option:focus,
.select-menu-freemode .custom-option[aria-selected="true"] {
    outline: 0;
    background: var(--fm-color-canvas);
}

/* 선택창과 같은 너비의 목록에서는 긴 문구를 말줄임으로 표시합니다. */
.select-menu-freemode.is-trigger-width {
    max-width: 100vw;
}

.select-menu-freemode.is-trigger-width .custom-option {
    overflow: hidden;
    text-overflow: ellipsis;
}