* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans', 'Noto Sans KR', sans-serif;
}

button,
input,
select,
textarea {
    font-family: 'Inter', 'Noto Sans', 'Noto Sans KR', sans-serif !important;
}

/* 모바일 친화적 배경 설정 */
body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    color: #333;
}

/* 어플리케이션 화면 크기 제한 (모바일 화면처럼 보이게 함) */
#app-container {
    width: 100%;
    max-width: 480px;
    /* 스마트폰 최대 너비 정도 */
    min-height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow-x: hidden;
}

/* 상단 헤더 스타일 */
.app-header {
    background-color: #007bff;
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 좌우 양 끝으로 정렬 */
    gap: 15px;
    /* 양옆 버튼과 제목 사이의 최소 안전 간격 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-height: 64px;
}

.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* 버튼 영역이 찌그러지지 않게 보호 */
}

/* 분리된 언어 변경 바 스타일 */
.lang-switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
}

.lang-label {
    font-size: 14px;
    font-weight: 700;
    color: #444;
}

.lang-dropdown {
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    background-color: white;
    cursor: pointer;
    font-weight: 500;
}

.app-header h1 {
    font-size: clamp(13px, 3.8vw, 17px);
    font-weight: 700;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    /* 남는 공간을 모두 차지하며 양옆 버튼과 밀어내기 (절대 겹치지 않음) */
    margin: 0;
    min-width: 0;
    /* flex 자식의 최소 너비 제한 해제 */
}

/* 헤더 우측 텍스트 버튼 스타일 */
.text-btn {
    background-color: rgba(255, 255, 255, 0.15);
    /* 약간 투명한 흰색 배경 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* 얇은 테두리 */
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0;
    z-index: 2;
    /* 글자보다 위로 올라오도록 설정 */
    transition: background-color 0.2s;
}

.text-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* 뒤로가기 버튼 스타일 */
#back-btn {
    background: none;
    border: none;
    font-size: 15px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    flex-shrink: 0;
}

/* 화면 전환용 유틸리티 클래스 */
.hidden {
    display: none !important;
}

/* 뷰(화면) 기본 설정 */
.view-section {
    padding-bottom: 80px;
    /* 하단 버튼 공간 확보 */
}

#detail-view {
    padding-bottom: 140px; /* 여러 줄로 겹치는 하단 고정 버튼을 위한 여유 공간 추가 */
}

/* -------------------------------------
 * 메인 화면 (리스트 뷰) 및 검색창 스타일
 * ------------------------------------- */
.search-container {
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
}

/* 필터 영역 (종류, 지역, 가격) */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.flex-select {
    flex: 1 1 100%;
    /* 글자가 잘리지 않도록 드롭다운을 한 줄에 하나씩 넓게 배치 */
    min-width: 100%;
    /* 가로 너비 꽉 채우기 */
    padding: 12px 10px;
    /* 터치하기 편하게 높이 약간 증가 */
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background-color: #fff;
    cursor: pointer;
}

.flex-select:focus {
    border-color: #007bff;
}

.search-submit-btn {
    padding: 10px 20px;
    font-size: 14px;
    flex: 1 1 100%;
    /* 버튼은 보통 한 줄을 차지하도록 하거나 옆에 붙음 */
}

#property-list {
    list-style: none;
    padding: 15px;
}

/* 리스트의 각 매물 카드 디자인 */
.property-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    cursor: pointer;
    /* 클릭 가능하다는 표시 */
    transition: transform 0.2s;
    position: relative;
}

.property-card:active {
    transform: scale(0.98);
    /* 터치/클릭 시 살짝 눌리는 효과 */
}

/* 큼직한 메인 사진 영역 */
.card-image-container {
    width: 100%;
    height: 200px;
    position: relative;
    background-color: #eee;
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지가 찌그러지지 않고 꽉 차게 표시 */
}

/* 계약 완료 상태를 나타내는 반투명 검은색 덮개 (오버레이) */
.sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* 반투명 검정 배경 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 10;
}

/* 남은 등록 기간 (D-Day) 뱃지 */
.expire-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 123, 255, 0.9);
    /* 파란색 배경 */
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    z-index: 20;
    /* 계약 완료 오버레이(z-index: 10) 위로 명확히 올라오게 설정 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 기간이 얼마 남지 않았을 때 (예: 3일 이하) 경고 색상 */
.expire-badge.warning {
    background-color: rgba(220, 53, 69, 0.9);
    /* 붉은색 경고 배경 */
}

/* 카드 하단 텍스트 정보 영역 */
.card-info {
    padding: 15px;
}

.card-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #222;
}

.price-text {
    font-size: 16px;
    font-weight: 700;
    color: #e53935;
    /* 가격을 강조하는 붉은색 */
    margin-bottom: 5px;
}

.address-preview {
    font-size: 14px;
    color: #777;
}

/* -------------------------------------
 * 상세 화면 스타일
 * ------------------------------------- */
.detail-image-container {
    width: 100%;
    height: 350px; /* 세로 사진이 더 크게 보일 수 있도록 높이 대폭 확장 */
    position: relative;
    background-color: #000; /* 양옆 여백을 검은색으로 처리해 시선 분산 방지 */
}

#detail-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 사진 상하좌우가 절대 짤리지 않음 */
    object-position: center;
}

.detail-content {
    padding: 20px;
}

#detail-title {
    font-size: 22px;
    margin-bottom: 10px;
}

/* 구분된 정보 박스 스타일 */
.section-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

.section-box h3 {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.section-box p {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.address-text {
    margin-bottom: 10px;
    font-weight: 500;
}

/* 지도 영역 크기 설정 */
#map-container {
    width: 100%;
    height: 200px;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

/* -------------------------------------
 * 하단 연락처 버튼 (고정 영역)
 * ------------------------------------- */
.bottom-action-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    /* 전체 컨테이너와 동일한 너비 유지 */
    background-color: #fff;
    padding: 15px 20px;
    border-top: 1px solid #eaeaea;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
}

.primary-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
}

.primary-btn:hover {
    background-color: #0056b3;
}

/* 계약 완료된 상태일 때 버튼 비활성화 스타일 */
.primary-btn.disabled {
    background-color: #ccc;
    pointer-events: none;
    /* 클릭 방지 */
}

/* -------------------------------------
 * 매물 등록 화면 (폼) 스타일
 * ------------------------------------- */
.form-container {
    padding: 20px;
    background-color: #fff;
}

.form-group {
    margin-bottom: 20px;
}

.input-with-btn {
    display: flex;
    gap: 8px;
}

.input-with-btn input {
    flex: 1;
}

.secondary-btn {
    padding: 12px 15px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: normal;
    /* 번역 글자가 길어지면 줄바꿈 허용 */
    word-break: keep-all;
    /* 단어 단위로 줄바꿈 */
    transition: background-color 0.2s;
}

.secondary-btn:hover {
    background-color: #5a6268;
}

.row-group {
    display: flex;
    gap: 10px;
}

.half-input {
    flex: 1;
}

.form-group label,
.half-input label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.form-group input,
.form-group textarea,
.form-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    background-color: #fff;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-select:focus {
    border-color: #007bff;
}

/* 사진 업로드 미리보기 */
.preview-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.preview-item {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 상세 뷰 썸네일 리스트 */
.thumbnail-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 15px;
    background: #f9f9f9;
}

.thumbnail-item {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.thumbnail-item.active {
    border-color: #007bff;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-group textarea {
    resize: vertical;
}

/* 구글 번역 기본 UI 완벽 숨김 */
body {
    top: 0px !important;
    position: static !important;
}

.goog-te-banner-frame {
    display: none !important;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

.skiptranslate {
    display: none !important;
}

body>.skiptranslate {
    display: none !important;
}

/* -------------------------------------
 * 커스텀 알림 모달 스타일
 * ------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
}

.modal-content {
    background-color: #ffffff;
    padding: 25px 20px;
    border-radius: 16px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

#modal-message {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: keep-all;
}

.modal-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-btn:hover {
    background-color: #0056b3;
}

/* -------------------------------------
 * 로그인/회원가입 모달 스타일 추가
 * ------------------------------------- */
.auth-tab {
    color: #888;
    transition: all 0.25s ease;
}

.auth-tab.active {
    color: #007bff !important;
    border-bottom: 2px solid #007bff !important;
}

.auth-form {
    text-align: left;
}

.auth-close-x:hover {
    color: #000 !important;
}

.header-right .text-btn {
    padding: 5px 10px;
    font-size: 13px;
}

/* 알림 모달이 각종 관리 모달 레이어 위로 완벽히 올라오도록 설정 */
#custom-modal,
#custom-confirm-modal,
#loading-modal {
    z-index: 10005 !important;
}

/* -------------------------------------
 * 회원 권한 관리 모달 스타일
 * ------------------------------------- */
.user-table th,
.user-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.user-table tbody tr:hover {
    background-color: #fcfdfe;
}

.role-select {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.role-select:focus {
    border-color: #007bff;
}

.user-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
}

.user-action-btn:hover {
    opacity: 0.9;
}

.user-action-btn.delete-btn {
    background-color: #dc3545;
    color: white;
}

.user-action-btn.save-role-btn {
    background-color: #007bff;
    color: white;
    margin-right: 5px;
}

.user-action-btn.change-pwd-btn {
    background-color: #ffc107;
    color: #212529;
    margin-right: 5px;
}

.user-action-btn:disabled {
    background-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounceBar {
    0% {
        height: 10px;
        transform: translateY(0);
    }

    100% {
        height: 30px;
        transform: translateY(-4px);
    }
}

.cute-action-btn {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cute-action-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cute-action-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#photo-upload-btn {
    border: 2px dashed #007bff;
    background-color: #f8f9fa;
    color: #007bff;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#photo-upload-btn:hover {
    background-color: #e8f0fe;
    border-color: #0056b3;
    color: #0056b3;
    transform: translateY(-2px) scale(1.01);
}

#photo-upload-btn:hover svg {
    stroke: #0056b3;
}

#photo-upload-btn:active {
    background-color: #d2e3fc;
    transform: translateY(1px) scale(0.99);
}

/* 등록창 주소 입력란과 버튼의 모바일 가로 비율 보정 */
.input-with-btn {
    display: flex;
    gap: 8px;
    width: 100%;
}

.input-with-btn input {
    flex: 1.8;
    /* 인풋 창이 가로 공간을 더 많이 차지하도록 설정 */
    min-width: 0;
}

.input-with-btn .secondary-btn {
    flex: 1;
    /* 지도로 찾기 버튼은 한정된 비율만 사용 */
    padding: 12px 6px;
    font-size: 13px;
    white-space: nowrap;
    /* 텍스트 줄바꿈 방지 및 버튼이 지나치게 커지지 않도록 제한 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 글자가 넘치면 말줄임표 처리 */
    text-align: center;
    flex-shrink: 0;
}

/* 헤더 내부 버튼 및 제목 간 레이아웃 충돌 방지 컴팩트화 */
.app-header .text-btn {
    padding: 5px 8px !important;
    font-size: 12px !important;
}

.app-header #back-btn {
    font-size: 13px !important;
}
/* 새로운 위임 매물 강조 애니메이션 */
@keyframes highlightBlink {
    0% { background-color: #fff3cd; border: 2px solid #ffc107; box-shadow: 0 0 10px rgba(255,193,7,0.5); }
    50% { background-color: #ffffff; border: 2px solid #ffc107; box-shadow: 0 0 0px rgba(255,193,7,0); }
    100% { background-color: #fff3cd; border: 2px solid #ffc107; box-shadow: 0 0 10px rgba(255,193,7,0.5); }
}
.new-delegated-highlight {
    animation: highlightBlink 2s infinite;
    position: relative;
}
.new-delegated-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(45deg, #ff4757, #ff6b81);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(255,71,87,0.4);
    z-index: 10;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ���� �Ź� ��� ���� ����Ʈ ������ ��Ÿ�� */
.property-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.property-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.property-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    flex-shrink: 0;
}

.property-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.property-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    word-break: break-all;
    line-height: 1.3;
}

.property-price {
    font-size: 14px;
    font-weight: bold;
    color: #e53935;
    margin-bottom: 4px;
}

.property-desc {
    font-size: 12px;
    color: #777;
    word-break: break-all;
    line-height: 1.3;
}