/* ===== 리셋 & 기본 스타일 ===== */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", sans-serif; color: #2d3748; background: #fafbfc;}
section {padding: 0;}

/* ===== 헤더 ===== */
header {padding: 8px 0; background: #fff; color: #2d3748; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #e6f2ff;}
header .inner {display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 20px;}
header .inner h1 {margin: 0;}
header .inner h1 a.logo-link {display: flex; align-items: center; transition: opacity 0.3s;}
header .inner h1 a.logo-link:hover {opacity: 0.8;}
header .inner h1 a svg, header .inner h1 a img {width: 140px; height: auto; display: block;}
header .inner ul {display: flex; align-items: center; gap: 12px; margin-left: auto;}
header .inner ul li a {display: inline-flex; align-items: center; gap: 6px; background: #d9ebff; padding: 10px 20px; color: #2d3748; font-size: 14px; font-weight: 600; border-radius: 8px; transition: all 0.3s; text-decoration: none;}
header .inner ul li a:hover {background: #c0deff; transform: translateY(-2px);}

/* ===== 섹션1: 히어로 ===== */
#section1 {background: linear-gradient(135deg, #f8fafb 0%, #ecf4ff 100%); color: #2d3748; padding: 90px 20px; min-height: auto; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
#section1::before {content: ''; position: absolute; top: 50%; right: 5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(66,153,225,0.08) 0%, transparent 70%); border-radius: 50%; z-index: 1;}
#section1::after {content: ''; position: absolute; bottom: -10%; left: -5%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(66,153,225,0.05) 0%, transparent 70%); border-radius: 50%; z-index: 1;}
#section1 .inner {position: relative; z-index: 2; text-align: center; max-width: 1000px; margin: 0 auto;}
#section1 .hero_icon {margin-bottom: 32px; animation: float 3s ease-in-out infinite; display: flex; justify-content: center;}
#section1 .hero_icon svg {width: 240px; height: 200px; opacity: 0.95; filter: drop-shadow(0 10px 30px rgba(66,153,225,0.15));}
#section1 .hero_content h1 {font-size: 68px; font-weight: 900; margin-bottom: 16px; letter-spacing: -2px; line-height: 1.2; color: #1a202c; background: linear-gradient(135deg, #2d3748 0%, #4299e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
#section1 .hero_content p {font-size: 24px; font-weight: 400; color: #4a5568; margin-bottom: 44px; line-height: 1.8; letter-spacing: -0.3px;}
#section1 .cta_buttons {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
@keyframes float {0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); }}
.btn_primary {background: #4299e1; color: #fff; padding: 18px 56px; font-weight: 800; font-size: 17px; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 16px rgba(66,153,225,0.3); letter-spacing: -0.3px;}
.btn_primary:hover {background: #3182ce; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(66,153,225,0.4);}
.btn_secondary {background: #fff; color: #4299e1; padding: 18px 56px; font-weight: 800; font-size: 17px; border: 2px solid #4299e1; border-radius: 10px; cursor: pointer; transition: all 0.3s; letter-spacing: -0.3px;}
.btn_secondary:hover {background: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(66,153,225,0.2);}

/* ===== 섹션2: 폼 ===== */
#section2 {background: #fff; padding: 100px 20px;}
#section2 .inner {max-width: 900px; margin: 0 auto;}
#section2 .inner .title_wrap {text-align: center; margin-bottom: 70px;}
#section2 .inner .title_wrap h2 {font-size: 48px; font-weight: 800; margin-bottom: 18px; color: #2d3748; letter-spacing: -1px;}
#section2 .inner .title_wrap p {font-size: 18px; font-weight: 400; color: #718096;}

/* 주소 그리드 */
.address-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 32px; padding: 28px 24px; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0;}

/* 폼 리스트 */
#section2 .inner ul {display: grid; grid-template-columns: repeat(1, 1fr); gap: 32px; margin-bottom: 50px;}
#section2 .inner ul li label {font-size: 17px; font-weight: 700; margin-bottom: 16px; display: block; color: #1a202c;}

/* 입력 필드 */
#section2 .inner ul li input {border: 1px solid #cbd5e0; border-bottom: 2px solid #cbd5e0; width: 100%; padding: 16px 14px; display: inline-block; font-size: 16px; border-radius: 8px; transition: all 0.3s; background: #fff; color: #1a202c;}
#section2 .inner ul li input:focus {outline: none; border-color: #4299e1; border-bottom: 2px solid #4299e1; background: #fff; box-shadow: none;}
#section2 .inner ul li input::placeholder {color: #999; font-weight: 400;}

/* 보증금/월세 */
#section2 .inner ul li.money_list {display: flex; align-items: flex-start; gap: 24px; padding: 28px 28px; background: #f8fafb; border-radius: 12px; border: 1px solid #e2e8f0;}
#section2 .inner ul li.money_list .input-group {flex: 1;}
#section2 .inner ul li.money_list .input-group label {font-size: 17px; font-weight: 700; margin-bottom: 16px; color: #1a202c;}
#section2 .inner ul li.money_list .input-group .input-with-unit {position: relative; display: block; width: 100%;}
#section2 .inner ul li.money_list .input-group .input-with-unit input {width: 100%; padding-right: 55px !important; border: 1px solid #cbd5e0; border-bottom: 2px solid #cbd5e0; padding: 16px 14px; font-size: 16px; border-radius: 8px; transition: all 0.3s; background: #fff; color: #1a202c;}
#section2 .inner ul li.money_list .input-group .input-with-unit input:focus {border-color: #4299e1; border-bottom: 2px solid #4299e1; background: #fff; box-shadow: none;}
#section2 .inner ul li.money_list .input-group .input-with-unit input::placeholder {color: #a0aec0;}
#section2 .inner ul li.money_list .input-group .input-with-unit .unit {position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #a0aec0; font-weight: 700; font-size: 14px; pointer-events: none;}

/* 부동산 유형 */
.property_type_section {display: block !important; margin-bottom: 32px; padding: 36px 32px; background: #f8fafb; border-radius: 12px; border: 1px solid #e2e8f0;}
.property_type_section > label:first-child {display: block; font-size: 17px; font-weight: 700; margin-bottom: 24px; color: #1a202c;}
.property_type_grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; margin-bottom: 32px;}
.property_type_label {position: relative; cursor: pointer; display: block;}
.property_type_label input[type="radio"] {display: none !important;}
.property_type_label span {display: block; padding: 13px 12px; border: 1px solid #dfe7ef; font-weight: 700; font-size: 14px; text-align: center; background: #fff; color: #2d3748; border-radius: 8px; transition: all 0.3s; cursor: pointer;}
.property_type_label:hover span {border-color: #cbd5e0; background: #fff;}
.property_type_label input[type="radio"]:checked + span {border-color: #4299e1; background: #4299e1; color: #fff;}

/* 건물명 선택 */
.building-select-wrap {margin-top: 0; padding: 28px 24px; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0;}
.building-select-wrap > label {font-size: 17px; font-weight: 700; margin-bottom: 16px; display: block; color: #1a202c;}

/* 제출 버튼 */
#section2 .inner button {background: #4299e1; color: #fff; text-align: center; width: 100%; padding: 18px 0; font-size: 18px; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; box-shadow: 0 6px 20px rgba(66,153,225,0.3); margin-top: 12px;}
#section2 .inner button:hover {background: #3182ce; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(66,153,225,0.4);}
#section2 .inner button:disabled {background: #cbd5e0; color: #a0aec0; border: none; cursor: not-allowed; transform: none;}

/* ===== 커스텀 드롭다운 ===== */
.custom-dropdown {position: relative; width: 100%;}
.dropdown-header {border: 1px solid #cbd5e0; border-bottom: 2px solid #cbd5e0; display: flex; align-items: center; justify-content: space-between; background: #fff; cursor: pointer; font-size: 16px; color: #1a202c; padding: 0 14px; position: relative; height: 48px; border-radius: 8px; transition: all 0.3s;}
.dropdown-header:disabled {opacity: 0.4; cursor: not-allowed; background: #fff;}
.dropdown-header .dropdown-placeholder {padding: 0; flex: 1; display: flex; align-items: center; height: 100%;}
.dropdown-header:hover {border-color: #a0aec0; background: #fff;}
.dropdown-header.active {border-color: #4299e1; border-bottom: 2px solid #4299e1; background: #fff; box-shadow: none;}
.dropdown-header.disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none;}
.dropdown-placeholder {color: #a0aec0;}
.dropdown-header.active .dropdown-placeholder {color: #2d3748;}
.dropdown-arrow {color: #a0aec0; flex-shrink: 0; margin-right: 0; width: 14px !important; height: 14px !important; transform-origin: center; transition: transform 0.3s;}
.dropdown-header.active .dropdown-arrow {color: #4299e1; transform: rotate(180deg);}

/* 드롭다운 메뉴 */
.dropdown-menu {position: absolute; top: 48px; left: 0; right: 0; background: #fff; border: 1px solid #dfe7ef; border-top: none; border-radius: 0; max-height: 300px; overflow-y: auto; z-index: 999; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.dropdown-menu.active {display: block;}
.dropdown-item {padding: 14px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #2d3748; transition: all 0.2s;}
.dropdown-item:last-child {border-bottom: none;}
.dropdown-item:hover {background: #f7fafc;}
.dropdown-item.selected {background: #fff; color: #4299e1; font-weight: 800; border-left: 4px solid #4299e1; padding-left: 16px;}

/* 건물명 검색 input */
.building-search-input {flex: 1; border: none !important; padding: 0; font-size: 15px; line-height: 48px; color: #2d3748; background: transparent; outline: none !important; box-shadow: none !important; box-sizing: border-box; height: 100%; font-weight: 600;}
.building-search-input:focus {border: none !important; outline: none !important; box-shadow: none !important;}
.building-search-input::placeholder {color: #a0aec0; font-weight: 400;}

/* ===== 로딩 스피너 ===== */
.loading-spinner-hidden {display: none !important;}
.loading-spinner-visible {display: flex !important;}
#loading_spinner {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 99999 !important; align-items: center; justify-content: center; pointer-events: auto !important;}
.spinner-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99998 !important;}
.spinner-container {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 50px 60px; z-index: 99999 !important; pointer-events: auto !important; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); border: 1px solid #e2e8f0;}
.spinner {width: 60px; height: 60px; border: 4px solid #e2e8f0; border-top: 4px solid #4299e1; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 26px;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
.spinner-container p {color: #2d3748; font-size: 17px; font-weight: 700; margin: 0;}

/* 비활성화 상태 */
.disabled {opacity: 0.8 !important; pointer-events: none !important;}

/* ===== 반응형 (태블릿: 768px 이하) ===== */
@media (max-width: 768px) {
    header {padding: 14px 20px;}
    header .inner h1 a svg {width: 100px; height: 50px;}
    header .inner ul {gap: 8px; flex-wrap: wrap;}
    header .inner ul li a {padding: 8px 14px; font-size: 12px;}

    #section1 {padding: 80px 20px; min-height: auto;}
    #section1::before {width: 300px; height: 300px; top: 30%;}
    #section1::after {width: 280px; height: 280px;}
    #section1 .hero_icon {margin-bottom: 24px;}
    #section1 .hero_icon svg {width: 160px; height: 135px;}
    #section1 .hero_content h1 {font-size: 42px; margin-bottom: 14px;}
    #section1 .hero_content p {font-size: 19px; margin-bottom: 32px;}
    .btn_primary, .btn_secondary {padding: 14px 36px; font-size: 15px;}

    #section2 {padding: 80px 20px;}
    #section2 .inner .title_wrap {margin-bottom: 60px;}
    #section2 .inner .title_wrap h2 {font-size: 36px; margin-bottom: 14px;}
    #section2 .inner .title_wrap p {font-size: 17px;}
    #section2 .inner ul {gap: 24px; margin-bottom: 40px;}
    #section2 .inner ul li label {font-size: 16px;}
    #section2 .inner ul li input {font-size: 15px; padding: 14px 0;}
    #section2 .inner button {padding: 16px 0; font-size: 16px;}

    .address-grid {grid-template-columns: 1fr 1fr 1fr; gap: 10px;}
    .property_type_grid {grid-template-columns: repeat(4, 1fr); gap: 8px;}
    .property_type_label span {padding: 10px 8px; font-size: 12px;}
    .dropdown-header {height: 44px; font-size: 14px;}
    .dropdown-menu {top: 44px; max-height: 280px;}
    .dropdown-item {padding: 12px 14px;}
    .building-search-input {line-height: 44px; font-size: 14px;}
}

/* ===== 모바일 (480px 이하) ===== */
@media (max-width: 480px) {
    header {padding: 12px 16px;}
    header .inner h1 a svg {width: 90px; height: 45px;}
    header .inner ul {gap: 6px; flex-wrap: wrap;}
    header .inner ul li a {padding: 6px 10px; font-size: 11px;}

    #section1 {padding: 70px 16px; min-height: auto;}
    #section1::before {width: 250px; height: 250px; top: 40%;}
    #section1::after {width: 230px; height: 230px;}
    #section1 .hero_icon {margin-bottom: 20px;}
    #section1 .hero_icon svg {width: 120px; height: 100px;}
    #section1 .hero_content h1 {font-size: 32px; margin-bottom: 12px;}
    #section1 .hero_content p {font-size: 17px; margin-bottom: 32px;}
    #section1 .cta_buttons {gap: 12px;}
    .btn_primary, .btn_secondary {padding: 13px 28px; font-size: 14px;}

    #section2 {padding: 70px 16px;}
    #section2 .inner .title_wrap {margin-bottom: 50px;}
    #section2 .inner .title_wrap h2 {font-size: 28px; margin-bottom: 12px;}
    #section2 .inner .title_wrap p {font-size: 15px;}
    #section2 .inner ul {gap: 20px; margin-bottom: 32px;}
    #section2 .inner ul li label {font-size: 15px;}
    #section2 .inner ul li input {font-size: 14px; padding: 13px 0;}
    #section2 .inner button {padding: 15px 0; font-size: 15px;}

    .address-grid {grid-template-columns: 1fr; gap: 10px;}
    .property_type_grid {grid-template-columns: repeat(2, 1fr); gap: 8px;}
    .property_type_label span {padding: 10px 6px; font-size: 11px;}
    .dropdown-header {height: 42px; font-size: 12px;}
    .dropdown-menu {top: 42px; max-height: 220px;}
    .dropdown-item {padding: 10px 12px;}
    .building-search-input {line-height: 42px; font-size: 12px;}

    .spinner-container {padding: 40px 50px;}
    .spinner {width: 45px; height: 45px; border-width: 3px; margin-bottom: 18px;}
    .spinner-container p {font-size: 14px;}
}