/* =================================================================
   Manin-Post | Frontend Form Redesign by Gemini (v3 - 최종 수정)
   - Date: 2025-07-30
   - Focus: Modern Design + Functional Integrity
================================================================= */
/*최상단버튼2개*/
/* 버튼들을 감싸는 컨테이너 */
.form-top-buttons {
    display: flex;
    justify-content: flex-end; /* 'right'가 아닌 'flex-end'가 표준 방식입니다 */
    max-width: 800px;
    gap: 20px;
    margin: 0 auto 20px; /* 상단 0, 좌우 auto(중앙정렬), 하단 20px */
}

/* 상단 버튼 기본 스타일 */
.stb-button {
    background-color: #007bff;
    color: white !important;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

/* 마우스를 올렸을 때의 효과 */
.stb-button:hover {
    background-color: #0056b3;
    color: white; /* 링크(a 태그)의 경우 hover 시 색상 변경을 방지하기 위해 명시 */
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

/* --- 1. 기본 & 폼 전체 레이아웃 --- */
#frontend-form {
    font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    max-width: 800px;
    margin: auto;
    padding: 30px 40px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
}

#frontend-form *,
#frontend-form *::before,
#frontend-form *::after {
    box-sizing: border-box;
}

/* --- 2. 타이포그래피 & 텍스트 요소 --- */
#form-title {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
    text-align: center;
}

#frontend-form p, #frontend-form ul, #frontend-form li, #frontend-form small {
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

#frontend-form hr {
    border: 0;
    height: 1px;
    background-color: #e9ecef;
    margin: 2.5rem 0;
}

/* --- 3. 폼 그룹 & 레이블 --- */
.form-group {
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.6rem;
}

/* --- 4. 기본 입력 필드 (단독 사용) --- */
#frontend-form .form-group > input[type="text"],
#frontend-form .form-group > input[type="password"],
#frontend-form .form-group > select,
#frontend-form .form-group > textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#frontend-form .form-group > input:focus,
#frontend-form .form-group > select:focus,
#frontend-form .form-group > textarea:focus {
    outline: none;
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

#frontend-form ::placeholder {
    color: #adb5bd;
    opacity: 1;
}

/* --- 5. 복합 입력 필드 --- */
#frontend-form .floor-input-container,
#frontend-form .input-with-unit {
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 48px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#frontend-form .floor-input-container:focus-within,
#frontend-form .input-with-unit:focus-within {
    outline: none;
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

#frontend-form .floor-input-container input,
#frontend-form .floor-input-container select,
#frontend-form .input-with-unit input {
    border: none !important;
    background-color: transparent !important;
    height: 100%;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 1rem;
    flex-grow: 1;
    width: 100%;
    outline: none !important;
}

#frontend-form .floor-input-container span,
#frontend-form .input-with-unit span {
    margin-left: 8px;
    font-size: 1rem;
    color: #495057;
    white-space: nowrap;
}

/* --- 6. 특정 필드별 상세 스타일 --- */
#floor_number::-webkit-inner-spin-button, 
#floor_number::-webkit-outer-spin-button,
#phone1::-webkit-inner-spin-button, 
#phone1::-webkit-outer-spin-button,
#phone2::-webkit-inner-spin-button, 
#phone2::-webkit-outer-spin-button,
#phone3::-webkit-inner-spin-button, 
#phone3::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#floor_number, #phone1, #phone2, #phone3 {
  -moz-appearance: textfield;
  appearance: textfield;
}

#frontend-form .floor-input-container #floor_type {
    margin-right: 10px;
    flex-grow: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
    padding-right: 25px !important;
}
#frontend-form .floor-input-container #floor_number {
    text-align: right;
}

#area, #deposit, #monthly_rent, #premium, #monthly_sales, #net_income, #maintenance_fee {
    text-align: right;
}

/* [수정됨] 연락처 입력 필드 */
#phone1, #phone2, #phone3 {
    width: 100px;
    text-align: center;
    height: 48px;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#phone1:focus, #phone2:focus, #phone3:focus {
    outline: none;
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
label[for="contact_info"] + div {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
label[for="contact_info"] + div > span {
    font-size: 1rem;
    color: #adb5bd;
}           

/* [추가됨] Textarea 상세 스타일 */
#post_content {
  min-height: 400px;
  resize: vertical;
}

/* [추가됨] 이미지 용량 경고 색상 */
#image-preview-container + p {
    font-size: 14px;
    color: #555555;
}

/* [추가됨] 비밀번호 불일치 메시지 기본 숨김 */
#password-match-message {
  display: none;
  color: #d9534f;
  font-size: 0.9rem;
  margin-top: 1rem;
}


#category, #store_subcategory, #store_type {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* --- 7. Flex 레이아웃 & 반응형 --- */
.form-flex {
    display: flex;
    gap: 20px;
}
.form-flex > .form-group {
    flex: 1;
    min-width: 150px;
}

@media (max-width: 768px) {
    .form-flex {
        flex-direction: column;
        gap: 0;
    }
    #frontend-form {
        padding: 20px;
    }
}

/* --- 8. 기본 체크박스/라디오 버튼 --- */
#agreement-line, 
#delete_period_3month, 
#delete_period_6month {
    width: auto;
    height: auto;
    opacity: 1;
    position: static;
    margin-right: 8px;
    vertical-align: middle;
}

label[for="delete_period_3month"],
label[for="delete_period_6month"] {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    font-weight: 500;
}


/* --- 9. 기타 요소 & 추가 보완 코드 --- */
#submit-property-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}
#submit-property-button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}
.property-form-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.address-detail-wrapper {
    position: relative;
    padding-bottom: 2rem;
}
.address-detail-wrapper > div {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.address-detail-wrapper > div > label {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0;
}

hr + p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
}
.floor-area-wrapper > .form-group[style*="visibility: hidden"] {
    visibility: hidden;
}

#property_password,
#property_password_confirm {
    width: 50% !important;
}

.form-group h3, .form-group h4 {
    color: #333;
    margin-bottom: 1rem;
}
.form-group ul { list-style: none; padding-left: 0; }
.form-group ul ul { padding-left: 20px; margin-top: 5px; }
.form-group strong > p { font-size: 1rem; color: #FF0000; margin-bottom: 1rem; }

#frontend-form p[style*="color: green"] {
    color: #28a745 !important;
    font-weight: bold;
    text-align: center;
    background-color: #e9f7ef;
    border: 1px solid #a6d9b8;
    padding: 15px;
    border-radius: 8px;
}
#frontend-form div[style*="color:red"] {
    color: #721c24 !important;
    text-align: left !important;
    border: 1px solid #f5c6cb !important;
    background-color: #f8d7da !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
}
#frontend-form div[style*="color:red"] h3 { margin-top: 0 !important; color: #721c24; font-size: 1.2rem; }
#frontend-form div[style*="color:red"] ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* =================================================================
   추가 CSS: v3.1 자잘한 디자인 수정
================================================================= */

/* 대분류 아래 안내 문구 스타일 */
.category-help-text {
    font-size: 13px;       /* 글자 크기를 조금 작게 */
    color: #5d7ca6;        /* 강조를 위해 붉은색 계열 (혹은 회색 #888) */
    margin-top: 5px;       /* 선택 상자와의 간격 */
    margin-bottom: 0;      /* 불필요한 하단 여백 제거 */
    font-weight: 500;      /* 적당한 굵기 */
}

/* --- 2. 서비스 이용약관 폰트 크기 조정 --- */
/* 약관 섹션 전체에 적용됩니다. */
.terms-section h3 { font-size: 1.3rem !important; }
.terms-section h4 { font-size: 1.1rem !important; }
.terms-section p,
.terms-section li,
.terms-section span,
.terms-section strong {
    font-size: 0.9rem !important;
    line-height: 1.7;
}

/* --- 4. 매물 삭제 기간 스타일 수정 --- */
/* 설명 텍스트 크기를 키웁니다. */
.delete-period-section p {
    font-size: 0.9rem;
    line-height: 1.7;
}
/* 제목('매물삭제 기간 설정(필수)')은 더 크게 설정합니다. */
.delete-period-section strong > p {
    font-size: 1.1rem !important;
}

/* 라디오 버튼을 감싸는 div를 가로로 정렬합니다. */
.delete-period-section .form-group {
    flex-direction: row;
    align-items: center;
    gap: 1rem; /* 선택지 사이 간격 */
    justify-content: center;
}

/* 개인정보 동의 체크박스 정렬 (최종) */
.agreement-line {
    display: flex;         /* flexbox로 정렬 */
    align-items: center;   /* 수직 중앙 정렬 */
  }
  
  .agreement-line input[type="checkbox"] {
    flex-shrink: 0;        /* 체크박스가 찌그러지지 않도록 고정 */
    margin-right: 8px;     /* 오른쪽 텍스트와의 간격 */
  }
  
  .agreement-line label {
    /* 라벨이 다른 스타일에 의해 블록 요소로 변경되는 것을 방지 */
    display: inline !important;
  }

 /*▽▽▽▽▽▽▽▽▽▽▽▽▽*/
/* 팝업창 배경 오버레이 */
/*▽▽▽▽▽▽▽▽▽▽▽▽▽*/
#liability-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 팝업창 콘텐츠 박스 (데스크탑 기본값으로 복원) */
#liability-popup-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: left;
    max-height: 80vh;
    overflow-y: auto; /* 데스크탑에서는 필요할 때만 스크롤바가 나타나도록 auto로 복원 */
}

#liability-popup-content h2 {
    margin-top: 0;
    text-align: center;
    font-size: 23px;
    color: #d9534f; /* 경고색 */
}

#liability-popup-content p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 14px;
}

#liability-popup-content .agree-section {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
}

#liability-popup-content label {
    cursor: pointer;
    font-size: 16px;
}

#liability-popup-content input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

/* 팝업창 확인 버튼 */
#popup-confirm-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    background-color: #337ab7; /* 부드러운 파란색 */
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* ▽▽▽ 모바일 화면 전용 스타일 (새로 추가된 부분) ▽▽▽ */
@media screen and (max-width: 768px) {
    /* 화면 너비가 768px 이하일 때 (태블릿 및 모바일) 아래 스타일 적용 */

    #liability-popup-content {
        overflow-y: scroll; /* 모바일에서는 스크롤바 항상 표시 */
        overflow-x: hidden;
    }

    /* 스크롤바 디자인 */
    #liability-popup-content::-webkit-scrollbar {
        width: 12px;
    }
    #liability-popup-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    #liability-popup-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 6px;
    }
}
/* △△△ 모바일 화면 전용 스타일 △△△ */


/* 이미지 미리보기 컨테이너 통합 스타일 */
#image-preview-container {
    /* 기존 점선 박스 스타일 */
    position: relative;
    min-height: 110px;
    background-color: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 5px;
    padding: 10px; /* 간격을 조금 더 줍니다 */
    box-sizing: border-box;
    width: 100%;

    /* 가로 정렬을 위한 스타일 추가 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 스피너 오버레이: 반투명 배경 */
#stb-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex; /* flex를 이용해 스피너를 중앙 정렬 */
    justify-content: center;
    align-items: center;
    border-radius: 5px; /* 부모 요소와 동일하게 */
}

/* 스피너 애니메이션 */
.stb-spinner {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

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

/* =================================================================
    가이드 박스 최종본 (기존 기능 + 형광 녹색 테마)
================================================================= */

/* --- 0. Wrapper 및 공통 스타일 --- */

/* Wrapper를 위치 기준점으로 삼음 (기존과 동일) */
#frontend-form .textarea-guide-wrapper {
    position: relative;
}

/* summary 공통 스타일 (기존과 동일) */
#frontend-form .textarea-guide-wrapper>details>summary {
    cursor: pointer;
    list-style: none; /* 기본 마커(화살표) 제거 */
}

#frontend-form .textarea-guide-wrapper>details>summary::-webkit-details-marker {
    display: none; /* 웹킷 브라우저용 마커 제거 */
}

/* --- 1. 닫혀있을 때 (텍스트박스 아래) --- */
#frontend-form .textarea-guide-wrapper>details:not([open])>summary {
    background-color: rgba(80, 247, 177, 0.9);
    color: #1E2A32;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 12px 20px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(80, 247, 177, 0.3);
}
#frontend-form .textarea-guide-wrapper>details:not([open])>summary:hover {
    background-color: rgba(80, 247, 177, 1);
}

/* --- 2. 펼쳐졌을 때 (화면 중앙 오버레이) --- */
#frontend-form .textarea-guide-wrapper>details[open] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 90%;
    
    /* [변경 1] 본문 배경을 기존의 반투명 색상으로 복원 */
    background-color: rgb(231, 234, 236);
    /* [변경 2] 외곽 테두리(border) 제거 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); /* 테두리 대신 그림자를 조금 더 선명하게 */
    border-radius: 15px;
    padding: 0;
}

/* 펼쳐졌을 때의 summary 스타일 */
#frontend-form .textarea-guide-wrapper>details[open]>summary {
    background-color: rgba(80, 247, 177, 0.9);
    color: #1E2A32;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 20px;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    border-bottom: 2px solid rgba(80, 247, 177, 0.5);
}

/* --- 3. 내부 콘텐츠 스타일 (기존 코드 거의 그대로 사용) --- */

#frontend-form .textarea-guide-wrapper .guide-content {
    padding: 15px 20px; /* 내부 여백 조정 */
}

/* 아래는 기존 코드와 동일합니다. 색상, 폰트 등 세부 스타일은 그대로 유지됩니다. */
#frontend-form .textarea-guide-wrapper .guide-content h3 {
    padding: 8px 5px; font-size: 18px; color: #0056b3;
}
#frontend-form .textarea-guide-wrapper .guide-content p,
#frontend-form .textarea-guide-wrapper .guide-content li {
    line-height: 1.5; font-size: 0.95rem;
}
#frontend-form .textarea-guide-wrapper .guide-content p {
    margin-bottom: 0.7rem;
}
#frontend-form .textarea-guide-wrapper .guide-content p:last-child {
    margin-bottom: 0;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-description {
    color: #495057;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-highlight {
    color: #0056b3; font-weight: 700;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-notice {
    color: #c82333; font-weight: 600; font-size: 0.9rem;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-subtitle {
    display: block; font-size: 1.05rem; color: #212529;
    margin-top: 1rem; margin-bottom: 0.5rem; padding-bottom: 0.3rem;
    border-bottom: 1px solid #e9ecef;
}
#frontend-form .textarea-guide-wrapper .guide-content a {
    color: #007bff; font-weight: 600; text-decoration: underline;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-list {
    margin: 0; padding-left: 1.5rem;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-list li {
    margin-bottom: 0.5rem;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-list-bullet {
    margin: 0; padding-left: 1.2rem;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-list-bullet li {
    margin-bottom: 0.3rem;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-example {
    color: #6c757d; font-size: 0.9rem; margin-top: 0.4rem;
    padding: 0.5rem 0.75rem; border-left: 3px solid #e9ecef;
}
#frontend-form .textarea-guide-wrapper .guide-content .guide-divider {
    border: 0; height: 1px; background-color: #e9ecef; margin: 1rem 0;
}

/* --- 4. 모바일 반응형 (기존 코드와 동일) --- */
@media (max-width: 768px) {
    #frontend-form .textarea-guide-wrapper>details[open] {
        width: 100%;
        border-radius: 12px;
        padding: 0;
    }
}

/* --- 기간 연장 섹션 스타일 (개선안) --- */

/* '매물 게시 기간 연장' 제목 */
.extension-period-section > strong > p {
    font-size: 16px;            /* 너무 크지 않은 제목 폰트 */
    font-weight: 600;           /* 살짝 굵게 (semi-bold) */
    color: #2c3e50;            /* 세련된 다크 블루 색상 */
    margin: 0 0 10px 0;         /* 아래 설명과의 간격 */
    padding-bottom: 10px;       /* 밑줄과의 간격 */
}

/* '현재 만료 예정일' 등 설명 텍스트 */
.extension-period-section > div > p {
    font-size: 14px;      /* 본문보다 살짝 작은 폰트 */
    color: #596275;      /* 부드러운 회색 */
    line-height: 1.6;     /* 줄 간격 */
    margin: 0 0 15px 0;   /* 아래 라디오 버튼과의 간격 */
}

/* 설명 텍스트 안의 '날짜' 강조 */
.extension-period-section > div > p > strong {
    color: #d35400;      /* 눈에 띄는 오렌지 색상 */
    font-weight: bold;
}

/* 라디오 버튼들을 감싸는 컨테이너 - 중앙 정렬 수정본 */
.extension-period-section .form-group {
    display: flex;
    flex-direction: row !important;
    justify-content: center !important; /* ★★★ 중앙 정렬로 변경 */
    gap: 80px !important;               /* ★★★ 두 선택지 사이의 간격 (원하는대로 조절) */
    align-items: center;

    /* 다른 스타일과의 충돌을 막기 위한 초기화 */
    border-top: none;
    margin-top: 0;
    padding-top: 15px;
}

/* 개별 라디오 버튼 + 텍스트 라벨 */
.extension-period-section .form-group label {
    display: inline-flex;  /* 라벨 안의 버튼과 텍스트를 나란히 정렬 */
    align-items: center;
    cursor: pointer;
    font-size: 15px;
}

.customer-center {
  /* 1. div 블록 자체의 간격 설정 */
  width: 100%;
  margin-top: 25px;    /* 위 요소(ol)와 간격 */
  margin-bottom: 15px; /* <details>가 닫히기 전 간격 */

  /* 2. 내부 요소(span, a)들을 한 줄로, 가운데로 정렬 */
  display: flex;
  justify-content: center; /* 가로축 중앙 정렬 */
  align-items: center;     /* 세로축 중앙 정렬 */
  gap: 8px;                /* 텍스트와 링크 사이의 간격 */
}

/* =========================================
   등록 성공 페이지 디자인 (카드 UI 스타일)
   ========================================= */

/* 전체 컨테이너를 카드처럼 꾸미기 */
.registration-success-message {
    text-align: center;
    padding: 60px 40px; /* 내부 여백을 넉넉하게 */
    max-width: 600px; /* 너무 넓게 퍼지지 않도록 */
    margin: 60px auto; /* 화면 중앙 배치 */
    
    background-color: #ffffff; /* 카드 배경색 */
    border-radius: 20px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* ★ 핵심: 은은하고 깊은 그림자 */
    border: 1px solid #f0f0f0; /* 아주 연한 테두리 */
}

/* 성공 아이콘과 메시지 스타일 */
.registration-success-message h3 {
    font-size: 24px;
    color: #333; /* 글자는 진한 회색으로 가독성 높임 */
    margin-bottom: 40px;
    font-weight: 700;
    line-height: 1.4;
}

/* 체크 표시(✔)를 좀 더 예쁘게 꾸미기 위해 가상 요소 사용 (선택 사항) */
.registration-success-message h3::before {
    content: "🎉"; /* 이모지 사용 (이미지 트래픽 0) */
    display: block;
    font-size: 60px;
    margin-bottom: 20px;
    animation: popIn 0.5s ease-out; /* 뽕! 하고 나타나는 애니메이션 */
}

/* 버튼 그룹 (Flexbox) */
.button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* 버튼 공통 스타일 (업그레이드) */
.registration-success-message a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 0 !important; /* 세로 길이 살짝 더 키움 */
    text-decoration: none !important;
    border-radius: 10px !important; /* 버튼도 둥글게 */
    font-weight: bold !important;
    font-size: 16px !important;
    width: 180px !important;
    border: none !important;
    
    /* 부드러운 움직임 설정 */
    transition: all 0.3s ease; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 버튼 자체 그림자 */
}

/* 마우스 올렸을 때 효과 (호버) */
.registration-success-message a:hover {
    transform: translateY(-3px); /* 살짝 위로 떠오름 */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* 그림자가 진해짐 */
    opacity: 1; /* 투명도 변화 없음 */
}

/* 파란 버튼 (매물 확인) */
.btn-check-property {
    background: linear-gradient(135deg, #007bff, #0056b3) !important; /* 단순 색상 대신 그라데이션 */
    color: white !important;
}

/* 회색 버튼 (홈으로) */
.btn-go-home {
    background-color: #bebebe !important; /* 배경을 밝은 회색으로 */
    color: #495057 !important; /* 글자를 진한 회색으로 */
    border: 1px solid #dee2e6 !important; /* 테두리 추가 */
}
.btn-go-home:hover {
    background-color: #e2e6ea !important;
}

/* 팝인 애니메이션 정의 */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* 모바일 전용 스타일 */
@media (max-width: 600px) {
    .registration-success-message {
        margin: 20px; /* 모바일에서는 여백 줄임 */
        padding: 40px 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 모바일은 그림자 약하게 */
    }

    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .registration-success-message a {
        width: 100% !important;
        max-width: 100% !important;
    }
}