/**
 * this_car 사용자 공통 스타일
 * - 지역 자동완성 리스트 및 입력 필드 레이아웃 정의
 */

/* 주소 선택 래퍼 */
.address-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 주소 입력 그룹 (자동완성 + 셀렉트 병행 구성) */
.address-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: stretch;
}

/* 자동완성 입력 영역 */
.autocomplete-wrapper {
    position: relative;
}

/* 자동완성 드롭다운 */
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    border: 2px solid #e0e7ff;
    border-top: none;
    box-shadow: 0 18px 35px rgba(94, 114, 228, 0.25);
    z-index: 200;
    display: none;
    animation: dropdownFade 0.18s ease-out;
}

.autocomplete-dropdown.active {
    display: block;
}

/* 자동완성 아이템 */
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #2f2f2f;
    font-weight: 600;
    background: radial-gradient(circle at top left, rgba(94, 114, 228, 0.08), transparent 55%);
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid rgba(224, 231, 255, 0.8);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item::before {
    content: attr(data-icon);
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', sans-serif;
    font-weight: 900;
    color: #5e72e4;
    font-size: 13px;
    width: 20px;
    text-align: center;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: linear-gradient(135deg, rgba(94, 114, 228, 0.12), rgba(130, 94, 228, 0.08));
    color: #3c4fe0;
}

/* 검색어 하이라이트 */
.autocomplete-item .highlight {
    background: rgba(94, 114, 228, 0.2);
    padding: 0 3px;
    border-radius: 3px;
    color: #3d4be0;
}

/* 결과 없음 */
.autocomplete-no-match {
    padding: 18px 16px;
    text-align: center;
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

/* 드롭다운 애니메이션 */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .address-input-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}