@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

.hidden {display: none;}
.main-box {margin-left: 260px; margin-top: 60px;}
.navbar-container.close + .main-box {margin-left: 68px}
.inner {padding: 80px;}

/* page 공통 */
.top-line {margin-bottom: 40px}
.page-title {font-size: 32px; color: #812B27; font-weight: 800;}
.search-box {border-bottom: 1px solid #d9d9d9; padding-bottom: 24px; margin-bottom: 24px;}
.sectionTitle {font-size: 20px; color: #812B27; font-weight: 800;}

/* table */
table {width:100%; border: 1px solid #d9d9d9; font-size: 14px;}
table thead {width:100%; background: #f5f5f5; color: #72777A;}
table thead th, table tbody td {padding: 8px 12px; vertical-align: middle; text-align: center; min-height: 58px; line-height: 1.2;}
table thead th {border-bottom: 1px solid #d9d9d9;}

table tbody {width:100%; background: #fff; color:#222;}
table tbody td {border-bottom: 1px solid #eee; position: relative;}
table tbody tr:last-child td {border-bottom: 1px solid #d9d9d9;}
table:not(.calendarTable) tbody td:not(:last-child)::after {content: ''; position: absolute; right: 0; top: calc(50% - 10px); width: 1px; height: 20px; background: #d9d9d9;}
table .numCell {width: 56px;}
table .w100 {width: 100px;}
table .w180 {width: 180px;}
table .w200 {width: 200px;}
table .w240 {width: 240px;}
table .addressCell {max-width: 400px; text-align: left;}


/* pagination */
.pagination {display: flex; justify-content: center; margin-top: 24px;}
.pagination button {padding: 12px 16px; font-size: 18px; color: #72777A; border-bottom: 2px solid transparent; border-radius: 0;}
.pagination button.active { font-weight: 500;background: #812B27; color: #fff;}
.pagination button:hover {background: #812B27; color: #fff;}

/* Tag */
.dfTag {display: inline-flex; align-items: center; height: 24px; border-radius: 4px; font-size: 14px; font-weight: 600; padding: 0 6px; flex-shrink: 0;}
.dfTag._green {color: #318d00; background: #E8F6E6;}
.dfTag._orange {color: #FF5C39; background: #FBF4ED;}
.dfTag._blue {color: #1C84ED; background: #E5F2FF;}
.dfTag._red {border: 1px solid #D61919; color: #D61919; background: #FFF3F3;}
.dfTag._paleGrayL {color: #5B657E; background: #ECEEF3;}
.dfTag._paleGrayB {color: #ECEEF3; background: #5B657E;}
.dfTag .material-symbols-outlined {font-size: 16px;}
.nextToTag {min-height: 24px; line-height: 24px;}

/* tooltip */
.tooltipBox {position: relative; cursor: pointer;}
.tooltipIcon {margin-left: 4px; font-size: 16px;}
.tooltipCont {display: none; position: absolute; left: 0; background: #F3EBEB; border-radius: 8px; min-width: 160px; box-shadow: 0 0 10px rgba(0,0,0,0.1); padding: 8px;}
.tooltipCont::after {content: ''; position: absolute; top: 0; left: 16%; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #F3EBEB; border-top: 0; margin-left: -8px; margin-top: -8px;}

/* 로그인 */
.login-container {height: 100vh;}
.login-container .inner {height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(129,43,39,0.7) url("/img/login/login-bg.jpg") no-repeat center; background-size: cover; position: relative; color: #fff;}
.login-container .inner .logo-text {color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 16px;}
.login-container .loginBox {width: 400px; padding: 40px; background: rgba(255,255,255,0.1)}
.login-container .loginBox input {color: #222;}
.login-container .btn-group {margin-top: 32px; text-align: center;}

/* calendar */
.calendarBox {width: 380px;}
.calendarBox .calendarIn {width: 100%;}
.calendarBox .calenderHead {display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;}
.calendarBox .calenderHead .calenderTit {font-size: 24px; color: #812B27; font-weight: 800;}
.calendarBox .calenderHead .dfIcon {cursor: pointer; color: #812B27; font-size: 30px;}
.calendarBox .calendarTable {width: 100%;}
.calendarBox .calendarTable td {text-align: center; padding: 8px 0;}
.calendarBox .calendarTable thead {background: none;}
.calendarBox .calendarTable thead td {color: #72777A;}
.calendarBox .calendarTable tbody td {cursor: pointer; position: relative;}
.calendarBox .calendarTable tbody td > span {display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 15px;}
.calendarBox .calendarTable .currentMonthDay > span.on {background: #812B27; color: #fff;}
.calendarBox .calendarTable .currentMonthDay > ul {width: 100%; position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center;}
.calendarBox .calendarTable .currentMonthDay > ul .point {display: inline-block; width: 6px; height: 6px; border-radius: 3px; margin: 0 2px;}
.calendarBox .calendarTable .currentMonthDay > ul .point._blue {order: 1; background: #1C84ED;}
.calendarBox .calendarTable .currentMonthDay > ul .point._orange {order: 2; background: #ED4F00;}
.calendarBox .calendarTable .currentMonthDay > ul .point._gray {order: 3; background: #888;}

.calendarBox .calendarTable .prevMonthDay > span, .calendarBox .calendarTable .nextMonthDay > span {color: #ccc;}
.calendarBox .calendarTable .prevMonthDay > ul, .calendarBox .calendarTable .nextMonthDay > ul {display: none;}

/* todo */
.dashboardTodo {height: 310px;}
.dashboardTodo .otherCard {padding: 16px; background: linear-gradient(29deg, rgba(129,43,39,1) 50%, rgba(87,4,0,1) 100%); color: #fff; border-radius: 4px; font-size: 24px; position: relative;}
.dashboardTodo .otherCard .badge {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 40px; background: rgba(255,255,255,0.2); color: #fff;}
.dashboardTodo .otherCard a.material-symbols-outlined {font-size: 32px; position: relative; z-index: 1;}
.dashboardTodo .otherCard .bg {position: absolute; right: 0; top: 0; color: #fff; opacity: 0.1; font-size: 88px;}

.todoBox .todos {display: flex;}
.todoList {padding: 16px; border-radius: 4px; cursor: pointer; width: 133px; background: #fff; text-align: center;}
.todoList._all {width: 100%; text-align: left;}
.todoList._blue {border: 1px solid #1C84ED; color: #1C84ED;}
.todoList._blue .todoName {border-bottom: 1px solid #1C84ED;}
.todoList._orange {border: 1px solid #ED4F00; color: #ED4F00;}
.todoList._orange .todoName {border-bottom: 1px solid #ED4F00;}
.todoList._gray {border: 1px solid #333; color: #333;}
.todoList._gray .todoName {border-bottom: 1px solid #333;}
.todoList._green {border: 1px solid #318d00; color: #318d00;}
.todoList._green .todoName {border-bottom: 1px solid #318d00;}

.todoList._blue.active, .todoList._blue:hover {background: linear-gradient(30deg, rgba(28,132,237,1) 50%, rgba(0,108,217,1) 100%); color: #fff;}
.todoList._orange.active, .todoList._orange:hover {background: linear-gradient(30deg, rgba(237,79,0,1) 50%, rgba(214,46,0,1) 100%); color: #fff;}
.todoList._gray.active, .todoList._gray:hover {background: linear-gradient(30deg, rgba(51,51,51,1) 50%, rgba(0,0,0,1) 100%); color: #fff;}
.todoList._green.active, .todoList._green:hover {background: linear-gradient(30deg, rgb(49, 141, 0) 50%, rgb(39, 104, 1) 100%); color: #fff;}

.todoList.active .todoName, .todoList:hover .todoName {border-bottom: 1px solid rgba(255,255,255,0.3);}
.todoList .todoName {display: block; font-size: 18px; margin-bottom: 8px; padding-bottom: 8px; color: inherit; font-weight: 700;}
.todoList .todoQty {display: block; font-size: 25px; font-weight: 800; color: inherit;}

.hidden-span { visibility: hidden; position: absolute; white-space: nowrap; font-size: 16px; font-family: inherit;}
.chartBox {width: 250px; position: relative;}
.chartBox h2 {height: 32px;}
.chartBox h3 {height: 30px; width: 100%; position: absolute; left: 0; top: calc(50% - 65px);}
.chartBox h3 p {font-size: 14px; display: flex; align-items: center; justify-content: center; gap:8px; font-weight: 400;}
.chartBox ul {width: 100%; display: flex; gap:12px; font-size: 16px; margin-top: 10px;}
.chartBox li {flex: 1;  background: #f8f8f8; padding: 8px;}
.chartBox li > span {color: #888; font-size: 14px; font-weight: 500;}
.chartBox li > div {height: 36px; margin-top: 4px; line-height: 40px; font-weight: 700; text-align: right; justify-content: flex-end;}
.chartBox li > div input {height: 36px;}
.chartInput {font-size: 16px; background: none; padding: 5px; border: 1px solid #ccc; border-radius: 4px; outline: none; min-width: 50px; max-width: 100%;  transition: width 0.2s ease-in-out; margin-right: 4px;}
.myChart {width: 200px !important; height: 200px !important; margin: 0 auto;}

/* dashboardList */
.dashboardList:not(:last-of-type) {margin-bottom: 32px;}
.dashboardList .dashboardListTit {font-size: 24px; font-weight: 700; color: #812B27; margin-bottom: 8px;}
.dashboardWrap .list-section table tr:hover {cursor: pointer; background: #fffaf5;}
.dashboardWrap .list-section table th tr:hover {cursor: unset; background: #f5f5f5;}

/* signup */
.main-box.signup {margin-left: 0; padding: 0 0 80px;}
.main-box.signup2 {justify-content: flex-start;}
.main-box.signup form {width: 480px;}
.main-box.signup .form-group {margin-bottom: 40px;}
.main-box.signup .form-group label {display: block; font-size: 16px; font-weight: 700; flex-shrink: 0; margin-bottom: 12px;}
.main-box.signup .form-group
input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
}
.main-box.signup .button-group {margin-top: 24px;}
.main-box.signup .address-row input:not(:last-child), .signup .address-details-row input:not(:last-child) {display: flex; margin-bottom: 8px;}
.main-box.signup .positionR {position: relative;}
.main-box.signup .toggle-password.material-symbols-outlined {cursor: pointer; position: absolute; right: 12px; top: 36px;}


/* 내 정보 */
.main-box.profile .fullBg {position: relative;}
/* .main-box.profile .fullBg::after {content: ""; display: block; position: absolute; top:0; left:-80px; z-index: -1; width: calc(100vw - 260px); height: 100%; background: #fffaf5;} */
.main-box.profile .fullBg section {padding: 32px; background: #fff; margin-bottom: 0; border: 1px solid #eee;}
.main-box.profile section .titleLine {padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #eee; width: 100%; display: flex; align-items: center; justify-content: space-between; height: 45px;}
.main-box.profile li:not(:last-child) {margin-bottom: 12px;}
.main-box.profile .listTitle {display: inline-block; width: 120px; color: #888;}
.main-box.profile .listValue {display: inline-block; color: #222;}

.main-box.profile .borderSec {margin-top: 40px; border: 1px solid #eee; background: #fff;}
.main-box.profile .borderSec .titleLine {padding: 16px 32px; height: auto; margin-bottom: 0;}
.main-box.profile .borderSec ul:nth-child(2) {border-left: 1px solid #eee;}
.main-box.profile .borderSec ul:nth-child(2) li {padding-left: 52px;}
.main-box.profile .borderSec li {padding: 16px 32px; margin-bottom: 0; max-height: 48px; display: flex; align-items: center;}
.main-box.profile .borderSec li:not(:last-child) {border-bottom: 1px solid #eee;}

.main-box.profile .sectionTitle {color: #222; font-weight: 500;}
.main-box.profile section {margin-bottom: 32px;}

.main-box.profile .userCard {border: 1px solid #eee; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); padding: 24px; max-width: 440px; height: 220px;}
.main-box.profile .userCard .userName {font-size: 24px; font-weight: 700; margin-bottom: 4px;}
.main-box.profile .userCard .userPosition {display: block; color:#888; margin-bottom: 32px;}
.main-box.profile .userCard .companyName {font-size: 18px; font-weight: 700; margin-bottom: 8px;}
.main-box.profile .userCard > ul li {margin-bottom: 0; margin-top: 4px;display: flex; align-items: flex-start; font-size: 14px;}
.main-box.profile .userCard > ul li .listTitle {line-height: 1.2; width: 65px; font-weight: 700; color: #222;}
.main-box.profile .userCard > ul li .listValue {line-height: 1.2;}


.main-box.profile .creditCard {width: 100%; max-width: 400px; height: 220px; border-radius: 16px; background: linear-gradient(30deg, rgba(204 192 191) 0%, rgb(173 162 162) 40%, rgba(223 215 209) 100%); color: #fff; padding: 24px; box-shadow: 0 0 8px rgb(0 0 0);}
.main-box.profile .creditCard h3 {opacity: 0.5;}
.main-box.profile .creditCard p {margin: 23px 0; font-size: 23px; font-weight: 700; letter-spacing: 3px;}
.main-box.profile .creditCard li {margin-bottom: 0}
.main-box.profile .creditCard .listTitle {color: #fff; opacity: 0.5; margin-bottom: 6px;}
.main-box.profile .creditCard .listValue {color: #fff; font-size: 16px; margin-bottom: 0}

/* 계약 조회 */
.employee-filter-container {width: 100%; gap:16px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; cursor: grab; scrollbar-width: thin;}
.employee-filter-container.dragging {cursor: grabbing; user-select: none;}
.employee-filter-container::-webkit-scrollbar {height: 6px;}
.employee-filter-container::-webkit-scrollbar-thumb {background: #c9c9c9; border-radius: 3px;}
.employee-filter-container > div {flex: 0 0 auto;}
/* 직원 그룹 JS 렌더 전, 정적 플레이스홀더("팀 별 필터" 라벨 / "전체 선택" 박스)가
   잠깐 보이는 깜빡임 방지. 모든 렌더러가 innerHTML 으로 교체하므로(컴포넌트·adjustment.js·
   contract-create.js) 동적 칩(.employee-dropdown)에는 영향이 없다. */
.employee-filter-container > h3,
.employee-filter-container > .employee-checkbox {display: none;}
/* 패딩을 summary 로 옮겨 박스 어디를 눌러도(텍스트 밖 여백 포함) 드롭다운이 열리도록 한다 */
.employee-filter-container > div {position: relative; min-width: 120px; padding: 0; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; font-size: 16px; display: flex; align-items: center;}
.employee-filter-container > div > details.dropdownCheck {width: 100%;}
.dropdown-summary {cursor: pointer; padding: 8px 12px; box-sizing: border-box;}
.dropdown-options {position: absolute; top:32px; left: -1px; z-index: 1; padding: 12px; border-radius: 4px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.15); background: #fff; width: calc(100% + 2px); box-sizing: border-box;}
.dropdown-option {display: flex; align-items: center;}
.dropdown-option:not(:last-child) {margin-bottom: 12px;}
.contractBtn.red-text {height: 32px; padding: 8px 12px; border: 1px solid #812B27; cursor: pointer; position: relative; border-radius: 4px; min-width: 96px; display: inline-block; text-align: center;}
.contractBtn.red-text:hover::before {content: "입금내역 연결"; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 31px;  border-radius: 2px; background: #812B27; border: 1px solid #812B27; color: #fff;}

.contractBtn.green-text {height: 32px; padding: 8px 12px; border: 1px solid #228335; cursor: pointer; position: relative; border-radius: 4px; min-width: 96px; display: inline-block; text-align: center;}
.contractBtn.green-text:hover::before {content: "입금내역 연결"; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 31px;  border-radius: 2px; background: #3b8127; border: 1px solid #418127; color: #fff;}

.contractBtn.green-matched-text {height: 32px; padding: 8px 12px; cursor: not-allowed; pointer-events: none; color: green; position: relative; border-radius: 4px; min-width: 96px; display: inline-block; text-align: center;}

.contractBtn.black-matched-text {height: 32px; padding: 8px 12px; cursor: not-allowed; pointer-events: none; color: #000000; position: relative; border-radius: 4px; min-width: 96px; display: inline-block; text-align: center;}
.contractBtn.blue-matched-text {height: 32px; font-weight: bold; padding: 8px 12px; cursor: not-allowed; pointer-events: none; color: #0052ff; position: relative; border-radius: 4px; min-width: 96px; display: inline-block; text-align: center;}



/* 계약 등록 */
.main-box.contract-create .basicBox {display: flex; margin-bottom: 40px;}
.main-box.contract-create .basicBox > ul {flex: 1;}
.main-box.contract-create .pr200 {padding-right: 200px;}
.main-box.contract-create .formList.mb0 {margin-bottom: 0;}
.main-box.contract-create .basicBox {padding: 16px 24px;}

.phone-section {display: flex;}
.phone-input-group {display: flex; align-items: center;}
.phone-input-group input {width: 80px}
.phone-input-group .separator {margin: 0 4px;}

.formList {display: flex;}
.formList:not(:last-of-type) {margin-bottom: 20px;}
.formList label {display: inline-block; width:120px; line-height: 40px; flex-shrink: 0; font-weight: 700;}
.formList.address-group > .flex1 {max-width: 320px;}

.radioList {display: flex;}
.radioList input {margin-right: 8px;}
.radioList label {width: auto; margin-right: 24px;}

.input-row {display: flex; align-items: center; margin-bottom: 20px;}
.input-row input {margin-right: 8px;}

#dynamic-fields {width: 100%;}
.fee-group {display: flex; border-top: 1px solid #d9d9d9; padding-top: 20px; margin-top: 20px; width: 100%;}
.fee-group .control-box label {width: 100%; margin-bottom: 0;}
.fee-group .control-box:first-child {margin-bottom: 20px;}
.tenant-fee-section {flex-shrink: 0; width: 50%; border-right: 1px solid #d9d9d9; margin-right: 40px;}

.additional-fields-container, .additional-fields-container {width: 100%;}
.additional-tenant-fields, .additional-landlord-fields {width: 100%; border-top: 1px solid #d9d9d9; padding-top: 20px; margin-top: 20px;}

/* adjustment */
.main-box.adjustment .summary-box .payIcon {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50px; background: #F3EBEB; color: #812B27;}
.main-box.adjustment .summary-box li {flex:1;}
.main-box.adjustment .salary-table input {width: 60px;}
.main-box.adjustment .summary-box .tooltipCont {top:64px;}
.main-box.adjustment .summary-box .tooltipBox:hover .tooltipCont {display: block;}

/* tree */
.main-box.treeview .pbAll80 {height: calc(100vh - 60px); display: flex; flex-direction: column; padding: 40px}
.main-box.treeview .top-line {margin-bottom: 40px;}
.main-box.treeview .leftSec {position: relative; margin-right: 32px}
.main-box.treeview .rightSec {width: 280px; flex-shrink: 0;}

/* pricing */
.pricingSec {height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.pricingSec .secTitle {font-size: 48px; font-weight: 700; margin-bottom: 16px;}
.pricingSec .secSubTitle {font-size: 18px; color: #707076;}
.pricingList {display: flex; gap:64px; margin-top: 64px;}
.pricingList > li {position: relative; padding: 40px; border: 1px solid #ddd; border-radius: 8px; background: #fff; width: 360px;}
/* .pricingList > li.standard {border: 3px solid #F45845;} */
/*.pricingList > li.standard {border: 3px solid #812B27;}*/
.pricingList > li.active {border: 3px solid #812B27;}

.pricingList > li h3 {font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center;}
/* .pricingList > li.basic h3 {color: #22A75D;}
.pricingList > li.standard h3 {color: #F45845;} */
.pricingList > li.basic h3 {color: #E9AFA3;}
.pricingList > li.standard h3 {color: #812B27;}
.pricingList > li.premium h3 {color: #A6ACAF;}
/* .pricingList > li.standard .bedge {position: absolute; left: 40px; top: -10px; padding: 4px 8px; font-size: 12px; line-height: 1; background: #F45845; color: #fff; z-index: 1; border-radius: 20px;} */
.pricingList > li.standard .bedge {position: absolute; left: 40px; top: -10px; padding: 4px 8px; font-size: 12px; line-height: 1; background: #812B27; color: #fff; z-index: 1; border-radius: 20px;}

.pricingList > li .simbol {display: inline-flex; align-items: center; justify-content: center; line-height: 1; width: 20px; height: 20px; border-radius: 20px; font-size: 12px; color: #fff; margin-right: 8px;}
/* .pricingList > li.basic .simbol {border: 1px solid #4DBF7F; background: linear-gradient(90deg, #22A75D 0%, #07803C 100%);}
.pricingList > li.standard .simbol {border: 1px solid #FF7B6B; background: linear-gradient(90deg, #F45845 0%, #CD1F09 100%);} */
.pricingList > li.basic .simbol {border: 1px solid #E9BAB0; background: linear-gradient(90deg, #E9AFA3 0%, #CE8576 100%);}
.pricingList > li.standard .simbol {border: 1px solid #9B4D49; background: linear-gradient(90deg, #812B27 0%, #4B0906 100%);}
.pricingList > li.premium .simbol {border: 1px solid #B2B6B7; background: linear-gradient(90deg, #A6ACAF 0%, #80878A 100%);}

.pricingList > li .price {font-size: 32px; text-align: center; font-weight: 700; margin: 24px 0;}
.pricingList > li .price .before {color: #BBB; text-decoration: line-through; font-weight: 400;}
.pricingList > li .price .gray {color: #888; font-weight: 400;}

.pricingList .functionList {display: flex; align-items: center; font-size: 16px;}
.pricingList .functionList:not(:last-child) {margin-bottom: 8px;}
/* .pricingList .functionList._ture .material-symbols-outlined {color: #22A75D;} */
.pricingList .functionList._ture .material-symbols-outlined {color: #812B27;}
.pricingList .functionList._false {color: #aaa;}

.pricingList > li button {display: inline-block; width: 100%; height: 48px; border-radius: 48px; font-size: 20px; font-weight: 500; margin-top: 32px;}
/* .pricingList > li button.lineBtn {border: 1px solid #F45845; color: #F45845;}
.pricingList > li button.fillBtn {background: #F45845; color: #fff;} */
.pricingList > li button.lineBtn {border: 1px solid #555; color: #555;}
.pricingList > li button.fillBtn {background: #812B27; color: #fff;}

.pricingList > li .info {font-size: 14px; margin-top: 8px; color: #888; text-align: center;}
.pricingList > li .info .fw700 {color: #222;}

.pricingList > li.premium .coming {display: flex; align-items: center; justify-content: center; height: 100%; font-size: 36px; font-weight: 100; color: #797F82;}



/* popup */
.df-popup::backdrop {background-color: rgba(0,0,0,0.5); backdrop-filter: blur(1px) opacity(1);}
.df-popup {padding: 32px; border-radius: 4px; border: none; box-shadow: 0 0 5px 0 rgba(0,0,0,0.10); background: #fff; max-width: 90vw; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; min-width: 540px; min-height: 75vh;}
.df-popup[open] {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;}
.df-popup .popup-content {width: 100%; overflow-y: auto;}
.df-popup .popupTitle {font-size: 24px; font-weight: 700; margin-bottom: 24px;}
.df-popup .popup-close-button {position: absolute; right: 32px; top: 28px; cursor: pointer;}
.df-popup .requestPopup-close-button {position: absolute; right: 6px;top: 7px;cursor: pointer;}

.df-popup .form-group {margin-bottom: 20px;}
.df-popup .form-group label {display: flex; align-items: center; font-size: 16px; font-weight: 700; flex-shrink: 0; margin-bottom: 12px;}

.btns {margin-top: auto; padding-top: 16px;}
.popup-content {display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.popup-message {flex-grow: 1;display: flex;justify-content: center; align-items: center; text-align: center; font-size: 1.2rem; font-weight: 500; padding: 16px;}


.popup-info-overlay.df-popup .form-group {display: flex; align-items: center;}
.popup-info-overlay.df-popup .form-group label {width: 130px;}
.popup-info-overlay.df-popup .form-group > input {width: 100%;}

.df-popup .popupForm {width: 100%;}
.df-popup .popupForm li {display: flex; align-items: center;}
.df-popup .popupForm li:not(:last-child) {margin-bottom: 20px;}
.df-popup .popupForm label {font-size: 16px; font-weight: 700; width: 160px; margin-bottom: 0;}
.df-popup .popupForm li input {flex: auto;}
.df-popup .popupForm li select {min-width: 120px;}

.df-popup .btn-group {position: absolute; width: calc(100% - 64px); left: 32px; bottom: 32px; display: flex; align-items: center; justify-content: space-between; margin-top: 24px;}

/* 매칭 팝업: 다음/이전/완료 버튼이 콘텐츠 아래 배치 */
#match-popup .btn-group {position: static; width: 100%; left: auto; bottom: auto; margin-top: 24px;}

/* 입금내역 추가 팝업: 화면 중앙 배치 */
#deposit-popup.df-popup {min-height: 500px;}
/* 입금내역 추가 팝업: flatpickr static 캘린더가 잘리지 않도록 popup-content overflow 해제
   (전역 .df-popup .popup-content {overflow-y: auto} 가 캘린더를 가리는 문제 회피) */
#deposit-popup .popup-content {overflow: visible !important;}
/* flatpickr static 캘린더가 다른 요소 위에 표시되도록 z-index 보장 */
#deposit-popup .flatpickr-calendar {z-index: 999 !important;}

/* 계약 상태 아이콘 */
.status-icon{max-width: 22px; height: auto;}

/* date-picker */
.flatpickr-day.selected {
    background-color: rgb(50, 3, 3) !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50%; /* 완전한 원형 */
    height: 40px; /* 높이를 설정 */
    width: 40px; /* 높이와 동일한 너비를 설정 */
    line-height: 40px; /* 텍스트가 중앙에 위치하도록 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
    display: flex; /* 필요한 경우 inline-block 유지 */
}

/* 행 테두리 표시 */
.selected-row {border: 3px solid #812B27;}

/* 새로고침 버튼 */
.refresh-button {position: absolute;right: 16px;transform: translateY(-50%);border: none;background: none;cursor: pointer;font-size: 24px;padding: 8px;color: #000;z-index: 999;}

/* 선택된 직원 영역 스타일 */
.selected-employees {margin-top: 16px; display: flex; flex-wrap: wrap;gap: 8px;}

/* 선택된 직원 텍스트 스타일 */
.selected-employee {display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #812B27; border-radius: 50px;}

/* 삭제 버튼 스타일 */
.selected-employee .remove-employee {color: #fff; cursor: pointer; font-size: 12px; padding: 0; opacity: 0.8; transition: all 0.2s;}

/* 삭제 버튼 호버 스타일 */
.selected-employee .remove-employee:hover {color: #fff; opacity: 1; transition: all 0.2s;}

/* 직원 이름 텍스트 스타일 */
.employee-name {color: #fff; font-size: 12px; font-weight: 500;}


/* Standard 표시 */
.grade-circle {
    display: inline-block;
    background-color: #ffffff;
    color: #812B27;
    font-size: 18px;
    font-weight: bold;
    padding: 0px 13px;
    border-radius: 50px;
    text-align: center;
    min-width: 120px;
    border: 2px solid #812B27;
}

/* 결제 등록하러 가기 버튼*/
.payment-button {
    display: inline-block;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 5px;
    background-color: white; /* 기본 배경색 */
    color: black; /* 글자 색 */
    font-weight: bold;
    width: 100%;
    border: 2px solid black; /* 테두리 검은색 */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.payment-button:hover {
    background-color: #812B27; /* 호버 시 배경색 변경 */
    color: white; /* 호버 시 글자 색 흰색으로 변경 */
}

/* 로그인 실패 메시지 */
.alert-danger {
    position: absolute;
    top: -40px; /* 로그인 입력 필드 위로 이동 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    display: none; /* 기본적으로 숨김 */
}

.alert-danger.show {
    display: block; /* 오류 발생 시 보이도록 설정 */
}


/* footer */
html, body {
    min-height: 140vh; /* 기본적으로 스크롤이 생기도록 설정 */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* 로그인 페이지에서는 min-height 제거 */
html,body.login-page {
    min-height: auto; /* 기본 높이만 적용 */
}

main {
    flex-grow: 1; /* 컨텐츠가 부족하면 자동 확장 */
}

.footer {
    width: 100%;
    background: #ffffff;
    color: #000000;
    text-align: left;
    padding: 30px 15px;
    font-size: 14px;
    position: static; /* 푸터를 화면 고정이 아닌 페이지 끝으로 이동 */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 500px;
}

.footer-left, .footer-right {
    flex: 1;
    min-width: 250px;
}

.footer-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.customer-number {
    font-size: 22px;
    font-weight: bold;
    color: #812B27;
    margin-bottom: 5px;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #a39c9c4a;
}

.social-icons {
    margin-top: 10px;
}

.social-icons a img {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.social-icons a img:hover {
    opacity: 1;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-left, .footer-right {
        text-align: center;
    }
}

.label {
    font-weight: bold;
    color: #ddd; /* 강조를 위한 밝은 회색 */
}

.value {
    color: #fff; /* 일반 텍스트 */
}



/* 페이드인 및 슬라이드 업 애니메이션 */
@keyframes fadeInSlideUp {0% {opacity: 0;transform: translateY(10px);}100% {opacity: 1;transform: translateY(0);}}

/* excel button */
/* 엑셀 다운로드 버튼 스타일 */
.excel-button {
    background-color: #217346; /* 엑셀 대표 색상 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.excel-button:hover {
    background-color: #1a5a30; /* 어두운 초록색 */
}


@media screen and (max-width: 1760px) {
    .main-box {margin-left: 220px;}
    .calendarBox {width: 280px;}
    .chartBox {width: 220px;}
    .todoList {width: 103px; padding: 16px 12px;}
    .todoList .todoName {font-size: 14px;}
    .todoList .todoQty {font-size: 20px;}
    .dashboardTodo {height:285px;}
    .dashboardTodo .otherCard {padding: 16px 12px;}

    .calendarBox .calendarTable td {padding: 6px 0;}
    .myChart {width: 170px !important; height: 170px !important; margin: 0 auto;}
}

/* reset Button */
#reset-btn {
    background-color: #ffffff;
    border: 2px solid #007BFF;
    color: #007BFF;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reset-btn .material-symbols-outlined {
    font-size: 20px;
}

#reset-btn:hover {
    background-color: #007BFF;
    color: #ffffff;
}
dialog:not([open]) { display: none; }

/* ratio-info-fields 영역 전용 스타일 */
.ratio-info-fields .ratio-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

/* 테이블 헤더/바디 셀 기본 정렬 */
.ratio-info-fields .ratio-table th,
.ratio-info-fields .ratio-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

/* 금액·비율 입력창 오른쪽 정렬 */
.ratio-info-fields .amount-input,
.ratio-info-fields .percent-input {
    box-sizing: border-box;
    text-align: right;
}

/* 전체 발행 금액 레이블(cell) 우측 정렬, 강조 */
.ratio-info-fields .ratio-table .total-label {
    text-align: center;
    font-weight: bold;
    padding-right: 12px;
}

/* 전체 발행 금액 값(cell) 우측 정렬, 강조 */
.ratio-info-fields .ratio-table .total-value {
    text-align: center;
    font-weight: bold;
}

.ratio-box-width{
    width: 30%;
}

.deposit-box-width{
    width: 40%;
}
/* total-row 푸터 셀 경계선 조정 */
.ratio-info-fields .ratio-table tfoot tr.total-row td.total-label {
    /* 오른쪽 경계만 없애고 나머지 경계는 그대로 */
    border-right: none;
}

.ratio-info-fields .ratio-table tfoot tr.total-row td.total-value {
    /* 왼쪽 경계만 없애고 나머지 경계는 그대로 */
    border-left: none;
}

.contractBtn.disabled-gray {
    height: 32px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    cursor: default;
    pointer-events: none;
    position: relative;
    border-radius: 4px;
    min-width: 96px;
    display: inline-block;
    text-align: center;
    background-color: #f9f9f9;
    color: #999;
}

/* 합치기 팝업 스타일 */
.merge-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.merge-popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
}

.merge-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    cursor: pointer;
}

.merge-popup-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.merge-popup-section-title {
    font-size: 22px;
    font-weight: bold;
    margin: 15px 0;
    color: #333;
}

.merge-popup-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.merge-popup-table th, .merge-popup-table td {
    /*border: 1px solid #ddd;*/
    padding: 12px;
    text-align: center;
}

.merge-popup-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.merge-popup-no-data {
    margin: 20px 0;
    color: #666;
    text-align: center;
}

.merge-popup-divider {
    margin: 20px 0;
    border: none;
    border-top: 2px solid #ddd;
}
.merge-popup-actions {
    margin-top: 20px;
    text-align: center;
}

.merge-popup-btn {
    background-color: #812B27;
    color: white;
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.merge-popup-btn:hover {
    background-color: #812B27;
}

/* 발행 옵션 디자인 */

/* 팝업 중앙에 고르게 배치하기 위한 컨테이너 */
.option-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* 팝업 전체 높이 차지 */
    margin: 0 auto;
}

/* 옵션 제목 스타일 */
.option-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* 발행 옵션 버튼 그룹 정렬 */
.merge-option-button-group {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    gap: 20px; /* 버튼 간 간격 조정 */
    margin-top: 20px; /* 버튼과 제목 간 간격 */
}

/* 버튼 스타일 조정 */
.merge-issue-btn {
    padding: 12px 20px;
    min-width: 150px;
    font-size: 1.2rem;
    border-radius: 8px;
    margin: 10px;
    transition: all 0.2s ease;
}

/* 버튼 호버 효과 */
.merge-issue-btn:hover {
    background-color: #812B27;
    color: #fff;
}


/* 팝업 중앙 정렬 */
.match-step {
    display: block;
    justify-content: center;
    align-items: center;
    height: 60vh;
}

.has-alert {
    position: relative;
    padding-right: 1.5em;
}

/* badge */
.has-alert::after {
    content: "!";
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: #e74c3c;
    color: #fff;
    font-size: 0.75em;
    line-height: 1;
    width: 1.2em;
    height: 1.2em;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    pointer-events: none;
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60, 0.7); }
    50%    { box-shadow: 0 0 0 6px rgba(231,76,60, 0); }
}


/* footer 디자인 */
#footer {
    padding: 80px 0 110px;
    background: #222222;
    height: auto !important;
}

#footer .footer_in {
    display: flex;
    flex-wrap: wrap;
}

.w1350 {
    max-width: 1350px;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}
#footer .footer_in h2 {
    width: 290px;
    font-size: 40px;
    font-family: 'Poppins';
    color: #fff;
    font-weight: bold;
}
#footer .footer_in .foot_info {
    width: calc(100% - 290px);
    box-sizing: border-box;
}
#footer .footer_in .foot_info .foot_menu {
    display: flex;
    font-weight: bold;
}
#footer .footer_in .foot_info .foot_menu li a {
    display: block;
    font-size: 1rem;
    letter-spacing: -0.35pt;
    line-height: 120%;
    color: white;
    transition: all .3s linear;
}
#footer .footer_in .foot_info .foot_menu li {
    padding: 0 32px 0 0;
    position: relative;
    font-weight: bold;
}
#footer .footer_in .foot_info dl {
    margin: 30px 0 0;
    font-size: 0;
    font-weight: bold;
}
#footer .footer_in .foot_info dl dd {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    color: #999;
    letter-spacing: -0.35pt;
    line-height: 150%;
    padding: 0 30px 8px 0;
    box-sizing: border-box;
}
#footer .footer_in .foot_info dl dd b {
    display: inline-block;
    margin: 0 9px 0 0;
    font-weight: 700;
    color: white;
}
#footer .footer_in .foot_info .copyright {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 140%;
    color: #999;
    padding: 80px 0 0;
}
ol, ul, li {
    list-style: none;
}
span, b, strong, br {
    line-height: inherit;
    font-family: inherit;
}
.calendar-icon {
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}
.calendar-input {
    margin-left: 4px;
    font-size: 0.9em;
}

/**
레이아웃 테스트 디자인
*/
/* layoutTest.html 전용 프레임 스타일 */
/* ──────────────────────────── */
/* layoutTest.html 전용 프레임 */
.layout-test-page .layout-test-frame {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 30px;
    background: #fafafa;
}

/* 매물 리스트 디자인 */
/* 리스트 전체 */
.property-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}

/* 한 행 레이아웃: 체크박스 | 썸네일 | 정보 | 우측박스 */
.property-item {
    display: grid;
    grid-template-columns: 24px 160px 1fr 220px; /* 썸네일/우측 너비 조절 포인트 */
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
}

/* 체크박스 라벨은 그리드 1열 */
.property-item > .checkbox { align-self: start; }

/* 썸네일 고정 크기 */
.property-item .thumb { position: relative; }
.property-item .thumb .img {
    width: 160px; height: 120px;         /* 👈 썸네일 크기 */
    object-fit: cover; border-radius: 8px; display: block;
}
.property-item .thumb .wish {
    position: absolute; top: 6px; right: 6px;
    border: none; background: rgba(255,255,255,.85);
    border-radius: 999px; padding: 4px 6px; cursor: pointer;
}

/* 가운데 정보영역 */
/* 가운데 정보영역 */
.property-item .info {
    min-width: 0; /* ellipsis 위해 */
    align-self: start; /* 위쪽으로 붙이기 */
    display: flex;
    flex-direction: column;
}
.property-item .title {
    margin: 5px 0 16px;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.property-item .sizes {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
}
.property-item .desc  {
    color: #000000;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.property-item .dates {
    color: #000000;
    font-size: 13px;
    margin-top: 16px;
    font-weight: bold;
    display: flex;
    gap: 12px;
}

/* 우측 박스 */
.property-item .right {
    justify-self: end; text-align: right;
    display: flex; flex-direction: column; gap: 8px;
}
.property-item .price .type { margin-right: 6px; font-weight: 600; }
.property-item .price .amount { font-size: 18px; font-weight: 800; }
.property-item .fee-note { font-size: 12px; color:#888; }
.property-item .badges { display:flex; gap:8px; justify-content: flex-end; color:#666; font-size:12px; }
.property-item .cta {
    border: none; border-radius: 9999px; padding: 8px 12px; cursor: pointer;
    background: #812B27; color: #fff; font-weight: 700;
}

/* ──────────────────────────── */
/* (글로벌) 우측 네비게이션 기본 스타일 */
.right-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    z-index: 1000;
}



/* ──────────────────────────── */
/* layoutTest.html 전용 오버라이드: 위치, 크기, 색상 등 */
.layout-test-page .right-nav {
    position: fixed;
    right: 10px;              /* 화면 우측에서 살짝 띄우기 */
    top: 50%;                 /* 세로 중앙 */
    transform: translateY(-50%);
    width: 100px;             /* 너비 100px */
    height: auto;            /* 높이 150px */
    background-color: #812B27;/* 인주색 배경 */
    color: #FFFFFF;           /* 텍스트 흰색 */
    border-radius: 12px;      /* 둥근 모서리 */
    padding: 10px 8px;        /* 내부 여백 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    overflow-y: auto;
    z-index: 1000;
    transition: transform 0.3s ease-out;  /* transform 변경 시 0.3초 지연+완화 */
    will-change: transform;               /* 성능 최적화 */
}

/* layoutTest.html 전용: li 사이 구분선 */
.layout-test-page .right-nav ul li + li {
    border-top: 1px solid rgba(255,255,255,0.7);
    padding-top: 8px;         /* 선과 텍스트 간격 */
}

/* layoutTest.html 전용: 링크 색상 & 장식 */
.layout-test-page .right-nav a {
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.25s ease; /* hover 전환 부드럽게 */
}

/* layoutTest.html 전용: Hover 효과 */
.layout-test-page .right-nav .filter-btn:hover,
.layout-test-page .right-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 옅은 흰 배경 */
    color: #FFD700; /* 강조 색상 (예: 골드) */
    transform: scale(1.08); /* 살짝 확대 */
    font-weight: 700; /* 굵게 */
    padding: 4px 8px; /* hover 시 약간의 패딩으로 버튼 느낌 */
    border-radius: 8px; /* 배경 둥글게 */
}

.right-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center;    /* 가로 중앙 정렬 */
}

.right-nav ul li {
    text-align: center;     /* li 내부 텍스트 중앙 정렬 */
    margin: 4px 0;          /* 항목 간 간격 */
}

.right-nav ul li a {
    display: inline-block;
    text-decoration: none;
}


/* 부모 컨테이너를 상대위치로 설정 */
.property-map-filter-filter {
    position: relative;
}

/* 필터 전체 래퍼 */
.property-filter-container {
    position: relative;
}

/* 토글 버튼 래퍼 */
.property-filter-button-wrapper {
    margin-bottom: 0; /* 버튼 바로 밑으로 */
}

/* 필터 토글 버튼 */
.property-filter-toggle-btn {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}

/* 필터 패널 */
.property-filter-panel {
    /* 오버레이 제거 */
    position: static;     /* or relative */
    left: auto;
    top: auto;
    z-index: auto;
    width: 100%;

    /* 접힘 기본 상태 */
    display: block;       /* 트랜지션 위해 block 유지 */
    max-height: 0;        /* 닫힘 */
    overflow: hidden;     /* 내용 숨김 */
    opacity: 0;           /* 시각적 부드러움 */
    transform: translateY(-4px);
    transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.2s ease;

    /* 기존 스타일 유지 */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: none;     /* 오버레이 아님 */
    padding: 0;           /* 열릴 때 패딩 적용 위해 0으로 두고, 열린 상태에서 주기 */
    margin-top: 8px;
}
.property-filter-panel.is-open {
    max-height: 1200px;   /* 패널 최대 예상 높이보다 넉넉히 */
    opacity: 1;
    transform: translateY(0);
    padding: 20px;        /* 열렸을 때만 패딩 보이도록 */
}

.property-filter-topbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
}

/* 검색창 영역 */
.property-filter-search {
    display: flex;
    flex: 0 0 auto; /* 더 이상 100% 안 먹음 */
    width: 240px;   /* 검색창 원하는 고정 너비 */
}
.property-filter-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.property-filter-search-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.property-filter-dropdown {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* 각 필터 섹션 */
.property-filter-section {
    margin-bottom: 16px;
}
.property-filter-section-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}
.property-filter-section-label small {
    font-weight: 400;
    color: #777;
    margin-left: 4px;
}

/* 옵션 버튼 */
.property-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin: 0 6px 6px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
}

/* 비활성 → 호버: 텍스트가 흰색으로 안 바뀌게 명시 */
.property-filter-option:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]):not(.is-active):hover,
.property-filter-option:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]):not([aria-pressed="true"]):hover {
    background-color: #F6EAEA; /* #812B27의 연한 톤 */
    border-color: #C48E8B;
    color: #812B27;            /* 텍스트는 진한 색으로 */
}

/* 활성(액티브) 상태 */
.property-filter-option.is-active:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]),
.property-filter-option[aria-pressed="true"]:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]) {
    background-color: #812B27;
    border-color: #812B27;
    color: #fff;
}

/* 활성 + 호버(살짝 어둡게) */
.property-filter-option.is-active:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]):hover,
.property-filter-option[aria-pressed="true"]:not([data-option="private"]):not([data-option="exclusive"]):not([data-option="general"]):hover {
    background-color: #6E241F;
    border-color: #6E241F;
    color: #fff;
}


/* (선택) 포커스 가시성 */
.property-filter-option:focus-visible {
    outline: 2px solid #812B27;
    outline-offset: 2px;
}

/* (권장) 전환 부드럽게 */
.property-filter-option {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* 전속 = 빨간 테두리 */
.property-filter-option[data-option="exclusive"]{
    border-color:#ff4d4f; color:#ff4d4f; background:#fff;
}
.property-filter-option[data-option="exclusive"]:hover{
    background:rgba(255,77,79,.08);
}
/* 전속 활성(선택) 상태 */
.property-filter-option.is-active[data-option="exclusive"],
.property-filter-option[aria-pressed="true"][data-option="exclusive"]{
    background:#ff4d4f; color:#fff; border-color:#ff4d4f;
}

/* 개인 = 파란 테두리 */
.property-filter-option[data-option="private"]{
    border-color:#4f7cff; color:#4f7cff; background:#fff;
}
.property-filter-option[data-option="private"]:hover{
    background:rgba(79,124,255,.08);
}
/* 개인 활성(선택) 상태 */
.property-filter-option.is-active[data-option="private"],
.property-filter-option[aria-pressed="true"][data-option="private"]{
    background:#4f7cff; color:#fff; border-color:#4f7cff;
}

/* 일반 = 테두리 없음 + 회색 텍스트 */
.property-filter-option[data-option="general"]{
    border:none; background:transparent; color:#777;
}
.property-filter-option[data-option="general"]:hover{
    background:rgba(0,0,0,.04);
}
/* 일반 활성(선택) 상태(원하면 살짝 강조) */
.property-filter-option.is-active[data-option="general"],
.property-filter-option[aria-pressed="true"][data-option="general"]{
    background:#f2f4f7; color:#555;
}
/* ─────────────────────────────────────────────────────────
   연락처 전체 행을 flex 컨테이너로 묶음
──────────────────────────────────────────────────────── */
.registration-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ─────────────────────────────────────────────────────────
   연락처 구분 (select)
──────────────────────────────────────────────────────── */
.registration-contact-method {
    display: flex;
    align-items: center;
}
.registration-contact-method-label {
    margin-right: 8px;
    white-space: nowrap;
    font-weight: 500;
}
.registration-contact-method-select {
    min-width: 120px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────
   전화번호 입력 그룹
──────────────────────────────────────────────────────── */
.registration-phone-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.registration-phone-input {
    width: 60px;
    padding: 4px 6px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.registration-phone-input--area {
    width: 50px;
}
.registration-phone-input--prefix,
.registration-phone-input--line {
    width: 70px;
}
.registration-phone-separator {
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────
   추가/제거 버튼
──────────────────────────────────────────────────────── */
.registration-contact-actions {
    display: flex;
    gap: 4px;
}
.registration-contact-action-btn {
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.registration-contact-action-btn--add {
    /* 필요시 추가 스타일 */
}
.registration-contact-action-btn--remove {
    /* 필요시 추가 스타일 */
}
/* 폼 섹션 공통 */
.form-section {
    margin-bottom: 32px;
}
.form-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
}

/* 매물주소 + 지도 래퍼 */
.address-map-wrapper {
    display: flex;
    align-items: flex-start; /* 레이블과 입력부 상단 맞춤 */
    /*gap: 24px;*/
}
/* 레이블: 고정 너비, flex 아이템 */
.address-map-label {
    flex: 0 0 120px;         /* .formList 레이블 너비와 일치시켜도 좋습니다 */
    font-weight: bold;
    line-height: 1.6;
    white-space: nowrap;
}

/* 좌측 60% */
.address-map-wrapper__left {
    flex: 0 0 50%;
}

/* 우측 나머지 40% */
.address-map-wrapper__right {
    flex: 1;
}

/* map-container 는 이미 정의된 스타일 재사용 */
.address-map-wrapper__right .map-container {
    width: 100%;
    height: 100%;
    min-height: 300px;  /* 필요에 따라 조정 */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* 동/호 입력 그룹: 가로 정렬 */
.address-detail-group {
    display: flex;
    gap: 12px;            /* 두 항목 사이 간격 */
}

/* 개별 아이템: 세로 정렬 (라벨 위, 인풋 아래) */
.input-box-detail-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* ← 추가 */
    flex: 0 0 auto;              /* 동일 비율로 늘이려면, 아니면 width 지정 가능 */
}

/* 라벨: 작은 폰트, 좌측 정렬 */
.formList .input-box-detail-item .input-box-detail-label {
    font-size: 12px;
    color: #777;
    text-align: left;
    /*margin-bottom: 4px;*/
    line-height: 20px;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.checkbox-input {
    width: 16px;
    height: 16px;
}
.checkbox-label {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-weight: bold;
}

.size-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;  /* ← center → flex-end 로 변경 */
    gap: 12px;
}

.formList--size {
    display: flex;          /* 이미 .formList 에서 flex 인 경우 중복됩니다 */
    align-items: center;    /* 세로 중앙 정렬 */
}

/* (옵션) 레이블 너비나 margin 조정이 필요하면 이 부분도 함께 조절할 수 있습니다 */
.formList--size > label {
    /* 예: margin-bottom 제거 등 */
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────
   form-list--room-info: 레이블과 컨트롤 그룹 중앙 정렬
──────────────────────────────────────────────────────── */
.form-list--room-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.form-list--room-info .form-list__label {
    width: 120px;
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────
   room-info-group: 한 줄에 바닥선 기준 정렬
──────────────────────────────────────────────────────── */
.registration-room-info-group {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

/* ─────────────────────────────────────────────────────────
   방 수 항목
──────────────────────────────────────────────────────── */
.registration-room-count-item {
    display: flex;
    flex-direction: column;
    gap: 4px;  /* 라벨 ↔ input+unit 사이 간격 */
}
.registration-room-count-label {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
    text-align: left;
    flex-basis: 100%;
}
.registration-room-count-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}
.registration-room-count-unit {
    font-size: 14px;
    line-height: 1;        /* 입력창과 바닥선을 맞추기 위해 */
}

/* ─────────────────────────────────────────────────────────
   방 거실 형태 항목
──────────────────────────────────────────────────────── */
.registration-room-layout-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.registration-room-layout-label {
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}
.registration-room-layout-options label {
    margin-right: 12px;
    cursor: pointer;
}
.registration-room-layout-radio {
    margin-right: 4px;
}

/* ─────────────────────────────────────────────────────────
   방 특징(선택) 항목
──────────────────────────────────────────────────────── */
.registration-room-feature-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.registration-room-feature-label {
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}
.registration-room-feature-options label {
    margin-right: 12px;
    cursor: pointer;
}
.registration-room-feature-checkbox {
    margin-right: 4px;
}
.registration-room-count-item input,
.registration-room-count-item .registration-room-count-unit {
    /* 바닥선 정렬을 위해 이 항목들은 flex-end 기준으로 위치합니다 */
    align-self: flex-end;
}
.registration-room-count-field {
    display: flex;
    align-items: flex-end; /* 입력창 밑바닥에 단위가 붙음 */
    gap: 4px;              /* 입력창과 단위 사이 간격 */
}
/* 2) 건축물용도 항목만 wrapper 로 세로 배치 */
.formList--building-usage .building-usage-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;               /* input-text 만큼 가로 공간 차지 */
    gap: 8px;              /* input ↔ note 간격 */
}

/* 3) 레이블 영역 고정 너비(다른 formList 와 동일하게) */
.formList--building-usage .formList__label {
    width: 120px;
}

/* 4) input-note 는 wrapper 안에서 block */
.alert-message {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* 가격정보 전체를 한 줄에 나란히 */
.registration-price-info {
    display: flex;           /* flex 컨테이너 */
    align-items: flex-end;   /* 모든 입력창 바닥선을 맞춰서 정렬 */
    gap: 24px;               /* 각 그룹 사이 간격 */
}

/* 각 가격 아이템은 세로(column) 배치 유지 */
.registration-price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;                /* 라벨 ↔ 인풋 간격 */
}

/* 체크박스 그룹도 한 줄에 정렬 */
.registration-price-checkboxes {
    display: flex;
    align-items: center;
    gap: 12px;               /* 체크박스 사이 간격 */
}

/* disabled 된 input 에 회색톤 배경 및 금지 커서 적용 */
.input-text:disabled {
    background-color: #f5f5f5;
    color: #777;
    border-color: #ccc;
    cursor: not-allowed;
}
/* input + 단위 묶음 컨테이너 */
.input-with-unit {
    position: relative;
    display: inline-block;
}

/* 오른쪽 여백 확보 */
.input-with-unit .input-text {
    padding-right: 28px; /* 단위가 겹치지 않도록 */
}

/* 단위 텍스트 */
.input-with-unit .unit {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #777;
    pointer-events: none;
}
.formList--floor-info {
    display: flex;
    align-items: center;    /* 레이블과 registration-floor-info 를 중앙 정렬 */
}

/* 레이블 자체에 있던 아래 여백(또는 line-height) 초기화 */
.formList--floor-info > .formList__label {
    margin-bottom: 0;
    line-height: normal;
}

/* 1) 그룹 전체는 바닥선 기준 정렬 */
.registration-floor-info {
    display: flex;
    align-items: flex-end;  /* 입력창 바닥선 기준으로 정렬 */
    gap: 16px;
}

/* 2) 체크박스만 바닥선에 맞춰서 내려오기 */
.registration-floor-info .checkbox-item {
    align-self: flex-end;   /* 이 요소만 바닥선(flex-end)에 정렬 */
    display: flex;
    align-items: center;    /* 내부 checkbox+label 은 중앙 맞춤 */
    margin-bottom: 0;
}
/* 기존 .formList label 보다 specificity 높은 셀렉터 */
.formList--floor-info .registration-floor-info .checkbox-item .checkbox-label {
    display: inline-flex;    /* inline-block → inline-flex */
    width: auto;             /* 120px 같은 고정 너비 해제 */
    line-height: normal;     /* 40px → 기본 line-height */
    font-weight: 400;        /* 기존 700 → 일반 굵기 */
    align-items: center;     /* 텍스트와 체크박스 수직 중앙 정렬 */
    margin-bottom: 0;
}
/* ─────────────────────────────────────────────────────────
   2. 방향 기준/방향: 두 개의 드롭다운을 한 줄에
───────────────────────────────────────────────────────── */
.registration-direction {
    display: flex;            /* flex 컨테이너로 */
    align-items: center;      /* 세로 중앙 정렬 */
    gap: 16px;                /* 드롭다운 사이 간격 */
}
/* ─────────────────────────────────────────────────────────
   사진 등록 섹션
───────────────────────────────────────────────────────── */
.basicBox--photo-upload .photo-upload-header {
    display: flex;
    align-items: center;  /* 기본적으로 버튼은 중앙 정렬 */
    gap: 8px;
    margin-bottom: 16px;
}
.btn-photo-add {
    padding: 8px 16px;
    background-color: #8e392b;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.photo-upload-note {
    font-size: 12px;
    color: #777;
}
.photo-upload-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 16px;
}
.photo-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* 예: 썸네일 스타일 */
.photo-preview-container .photo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────
   상세 설명 섹션
───────────────────────────────────────────────────────── */
/* formList__label 은 기존 너비·폰트 그대로 재사용 */

.input-with-counter {
    position: relative;
    width: 100%;
}
.input-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}
.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: #999;
    pointer-events: none;
}

/* “최대 10장” 문구를 바닥선에 붙이기 */
.basicBox--photo-upload .photo-upload-note {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
}

/* 단지명 검색 전용 경량 스타일 */
.complex-search { width: 100%; }
.complex-row { display: flex; gap: 12px; }
.complex-field { min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.complex-label { font-size: 12px; color: #666; }
.complex-select { height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.complex-select:disabled, #complexName:disabled, #complexSearchBtn:disabled { background: #f7f7f7; color: #aaa; }
.complex-search-input { display: flex; gap: 12px; align-items: center; }

.complex-result { margin-top: 10px; border: 1px solid #eee; border-radius: 8px; padding: 8px; max-height: 220px; overflow: auto; }
.complex-result-item { padding: 8px 10px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.complex-result-item:last-child { border-bottom: none; }
.complex-result-item:hover { background: #fafafa; }
/* 인풋만 감싸는 래퍼 */
.complex-input-wrap {
    position: relative;   /* ★ 이것이 핵심 */
    flex: 1;              /* 인풋 영역이 가변폭이면 */
    min-width: 0;
}
/* 리스트 박스 스타일 */
.complex-listbox {
    position: absolute;
    left: 0;
    right: 0;               /* 인풋 너비에 맞춰 자동 확장 */
    top: calc(100% + 6px);  /* 인풋 바로 아래 */
    max-height: 260px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 1000;
}

/* 항목 */
.complex-option {
    padding: 10px 12px;
    cursor: pointer;
    line-height: 1.4;
    font-size: 14px;
}
.complex-option:hover,
.complex-option[aria-selected="true"] {
    background: #f5f7fb;
}

/* “결과 없음” 표시 */
.complex-empty {
    padding: 12px;
    color: #888;
    font-size: 13px;
}

/* 2열 레이아웃 */
.formList--cadastral .cadastral-grid{
    display:grid;
    grid-template-columns: 420px 1fr; /* 왼쪽 폭만 조절하면 우측은 자동으로 모두 차지 */
    gap:16px;
    align-items:start;
}

/* 좌측 입력 컬럼 */
.formList--cadastral .cadastral-form-col{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* 이미지 슬롯(디자인 최소화: 크기만) */
.formList--cadastral .cadastral-image{
    width:400px;
    height:320px;              /* 필요시 높이 조절 */
    overflow:hidden;
    border: 1px solid #e0e0e0;
}

/* 우측 이미지 컬럼: 상/하 분할 */
.formList--cadastral .cadastral-view-col{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

.formList--cadastral .view-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    padding:12px;
    min-height: 160px;                 /* 필요 시 조절 */
}

.formList--cadastral .view-card__title{
    font-size:12px;
    color:#6b7280;
}

/* API 이미지 슬롯 공통 */
.formList--cadastral .api-image-slot{
    flex:1;
    min-height: 140px;
    border:1px dashed #d1d5db;
    border-radius:10px;
    background:#fafafa;
    display:flex; align-items:center; justify-content:center;
}
.formList--cadastral .api-placeholder-text{ color:#6b7280; font-size:12px; }

/* 단위를 인풋 내부 오른쪽에 붙이는 옵션 */
.input-with-unit--inside{ position:relative; display:inline-block; }
.input-with-unit--inside .input-text{ padding-right:28px; }
.input-with-unit--inside .unit{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    white-space:nowrap; pointer-events:none;
}
/* 왼쪽 폼 폭만 정하면, 오른쪽은 나머지 전부 */
:root { --cadastral-form-width: 420px; } /* 원하는 값으로 조절 */

.formList__subLabel{
    margin-top:12px;
    margin-bottom:6px;
    font-weight:600;
    font-size:13px;
    color:#374151;
}
/* 수수료 비율 경고 */
.fee-rate-warning {
    display: none;            /* 기본 숨김 */
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}
.fee-rate-warning.is-visible {
    display: inline-flex;     /* 보일 때 인라인 플로우 유지 */
    align-items: center;
}
.fee-rate-warning .aster {
    color: #e11d48;           /* 빨간색 별표 */
    font-weight: 700;
    margin-right: 6px;
}
.fee-rate-warning .text {
    color: #111;              /* 검정 텍스트 */
}

/* 상단 컨트롤 바 정렬 */
.prop-controls{
    display:flex; align-items:center; justify-content:space-between;
    margin: 8px 0 12px;
}

/* 정렬 버튼/패널 */
.btn-sort{
    border:1px solid #cfd6e4; background:#fff; padding:6px 12px; border-radius:8px; cursor:pointer;
}
.sort-panel{
    margin-top:8px; width:180px; background:#fff; border:1px solid #cfd6e4;
    border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.08); padding:10px;
}
.sort-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px; }
.sort-row .arrows{ display:flex; gap:6px; }
.sort-row .arrow{
    width:28px; height:28px; border-radius:6px; border:1px solid #e1e5ef; background:#fff; cursor:pointer;
    font-weight:700;
}
.sort-row .arrow.active{ background:#30353f; color:#fff; border-color:#30353f; }

/* 전체 선택 */
.select-all{ display:flex; align-items:center; gap:6px; }

.sort-wrap {
    position: relative; /* 기준 컨테이너 */
}

.sort-panel {
    position: absolute; /* 절대 위치 */
    top: 100%;          /* 버튼 바로 아래 */
    right: 0;       /* 버튼 오른쪽에 맞춤 */
    left: auto;     /* left 무효화 */
    margin-top: 4px;
    z-index: 2000;      /* 다른 요소 위에 표시 */

    width: 180px;
    background: #fff;
    border: 1px solid #cfd6e4;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 10px;
}

/* 리스트 카드(이미 있는 스타일 유지) … */

/* 매물 관심 목록 추가 영역 */
/* ─────────────────────────────
   FAVORITE TOP AREA (scoped)
   상단 영역만 스타일링
   ───────────────────────────── */
#fav-page .fav-group-box {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px 16px 12px;
    margin-bottom: 16px;
}

/* 제목 (좌측, 적갈색) */
#fav-page .fav-group-head {
    margin: 0 0 10px 0;
    font-weight: 800;
    font-size: 18px;
    color: #8b0000;
}

/* 툴바: 좌/우 배치 */
#fav-page .fav-group-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* 왼쪽: "새 그룹 추가+"(텍스트처럼), 입력, 저장(외곽선 버튼) */
#fav-page .fav-group-toolbar .left {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

/* "새 그룹 추가+" 버튼을 텍스트 라벨처럼 보이게 */
#fav-page .fav-group-toolbar .btn.ghost {
    background: transparent;
    border: 0;
    padding: 0;
    color: #111827;
    font-weight: 700;
    cursor: default;
    pointer-events: none; /* 클릭 아님 */
}

/* 입력창 */
#fav-page .fav-group-toolbar .inp {
    height: 30px;
    min-width: 220px;
    padding: 0 10px;
    border: 1px solid #cfd5dc;
    border-radius: 6px;
    font-size: 13px;
}

/* 저장 = 작은 외곽선 버튼 */
#fav-page .fav-group-toolbar .btn.primary {
    height: 30px;
    padding: 0 10px;
    background: #fff;
    color: #111827;
    border: 1px solid #cfd5dc;
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* 오른쪽: 그룹관리 버튼(우측 상단 작은 칩 느낌) */
#fav-page .fav-group-toolbar .right .btn {
    height: 30px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #cfd5dc;
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* 중앙 세로 구분선(상단 캡쳐처럼) */
/*#fav-page .fav-group-box::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 44px;         !* 제목 아래부터 시작 *!*/
/*    bottom: 12px;*/
/*    width: 1px;*/
/*    background: #eeeeee;*/
/*}*/

/* 그룹 나열 영역: 텍스트 나열 형태(‘그룹 1 x’) */
#fav-page #groupGrid.group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;     /* 행/열 간격 */
    padding: 8px 2px 0;
}

/* 칩을 텍스트 형태로 */
#fav-page .group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 이름은 기본 텍스트 */
#fav-page .chip-name {
    font-size: 14px;
    color: #111827;
    font-weight: 600;
}

/* x 는 빨간색, 작게 */
#fav-page .chip-del {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: #d11a2a;        /* 빨강 */
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
#fav-page .chip-del:hover { transform: scale(1.05); }

/* 빈 상태 문구 */
#fav-page .group-grid .empty {
    color: #9ca3af;
    padding: 6px 0;
    width: 100%;
}

.prop-modal__overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center;
    z-index: 3000;
}
.prop-modal{
    width:min(960px, 94vw); max-height:90vh; overflow:auto;
    background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.prop-modal__header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid #eee;
}
.prop-modal__header .title{ font-weight:800; color:#b40000; } /* 상단 빨강 타이틀 느낌 */
.prop-modal__header .close{ border:none; background:transparent; font-size:20px; cursor:pointer; }

.prop-modal__summary{
    display:flex; gap:12px; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid #eee;
}
.prop-modal__summary .addr{
    grid-column:1;
    font-weight:700;
    font-size:15px;
    color:#111827;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.price-meta{
    grid-column:1; grid-row:2;
    list-style:none; padding:0;
    display:flex; align-items:center; gap:16px; margin-top: 12px;
}
.price-meta .meta-item{
    display:flex; align-items:center; gap:6px;
    color:#6b7280; font-size:14px;
    position:relative; padding-left:16px;
}
.price-meta .meta-item + .meta-item{
    border-left:1px solid #e5e7eb;
    padding-left:16px;  /* 구분선과 간격 */
}
.price-meta .price-main{
    color:#1d4ed8;                 /* 파란색 강조 */
    font-weight:800;
    padding-left:0; border-left:0; /* 첫 항목은 구분선 없음 */
}
.price-meta .price-main .type{ margin-right:4px; font-weight:700; }
.price-meta .price-main .amount{ font-size:18px; font-weight:800; }

.prop-modal__summary .summary-main{ min-width:0; }
.prop-modal__summary .prices .type{ margin-right:6px; font-weight:600; }
.prop-modal__summary .prices .amount{ font-size:18px; font-weight:800; }
.prop-modal__summary .summary-cta{
    grid-column:2; grid-row:1 / span 2;   /* 우측 상단 고정 */
    align-self:start;
}
.prop-modal__summary .cta{
    border:none; border-radius:9999px; padding:8px 12px; cursor:pointer;
    background:#812B27; color:#fff; font-weight:700;
}
.prop-modal__media{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    padding:12px 16px; border-bottom:1px solid #eee;
}
.prop-modal__media .photo img,
.prop-modal__media .map img{
    width:100%; height:280px; object-fit:cover; border-radius:8px;
}
.prop-details-v2 .detail-rows{
    display: grid;
    gap: 16px;
    margin-top: 8px;
}
/* 상세설명은 기존 테이블 스타일 재사용 */
.prop-details-v2 .section--desc .detail-table td{ padding: 10px 6px; }

/* 매물 관리 정보 그리드 (2열) */
.prop-details-v2 .mgmt-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.prop-details-v2 .mgmt-grid .row{
    display: flex; align-items: center; gap: 10px;
}
.prop-details-v2 .mgmt-grid .row .label{
    min-width: 96px; color:#6b7280; font-weight:700;
}
.prop-details-v2 .mgmt-grid .row .value{
    color:#111; font-weight:600;
}


.prop-modal__details{ padding:16px; }
.prop-modal__details h3{ margin:0 0 12px; font-size:16px; }
.detail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
/* 각 행을 중앙 정렬용 베이스로 */
.detail-list li{
    position: relative;
    padding: 12px 8px;
    border-bottom: 1px solid #eef0f3;
    min-height: 44px;                 /* 세로 높이 확보 */
}

/* 라벨: 좌측 정렬 유지 */
.detail-list .label{
    display: inline-block;
    text-align: left;
    color: #4b5563;
    font-weight: 600;
}

/* 값: 행의 정중앙에 배치 */
.detail-list .val{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 가로/세로 중앙 */
    text-align: center;
    font-weight: bold;

    display: inline-flex;
    align-items: center;
    gap: 6px 8px;

    max-width: 70%;                   /* 너무 길면 줄바꿈 */
    white-space: normal;              /* 줄바꿈 허용 */
    word-break: keep-all;
}

/* 칩(배지) 유지 */
.detail-list .chip{
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background:#e9edf2; color:#3b3f45; font-size:12px; font-weight:700;
}
.detail-list .sep{ color:#9aa1aa; margin:0 2px; }
.detail-list .affil{ margin-left:6px; font-size:12px; color:#9aa1aa; }

.prop-modal__footer{
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* 왼쪽부터 배치 */
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}
.prop-modal__footer .btn{
    border:1px solid #cfd6e4;
    background:#8b0000;
    padding:8px 12px;
    color: white;
    border-radius:8px; cursor:pointer;
}
/* 관리 버튼을 오른쪽 끝으로 밀기 */
.prop-modal__footer .btn.primary{
    margin-left: auto;
}
.prop-modal__footer .btn.ghost{ background:#277182; color: #ffffff; }

/* 상세정보 v2 레이아웃 */
.prop-details-v2{ padding:16px; }
.prop-details-v2 .detail-grid{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prop-details-v2 .grid-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
/*.prop-details-v2 .column{ flex:1 1 48%; display:flex; flex-direction:column; gap:16px; min-width:280px;align-self: flex-start; }*/

.prop-details-v2 .section{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #eef0f3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.prop-details-v2 .section-title{
    font-size:18px; font-weight:700; margin:0 0 12px;
    border-left:5px solid #5a9cff; padding-left:10px; color:#111827;
}

.prop-details-v2 .detail-table{ width:100%; border-collapse:collapse; }
.prop-details-v2 .detail-table td{ padding:10px 6px; vertical-align:top; }
.prop-details-v2 .detail-table td.label{
    width:35%; color:#666; font-weight:700;
}
.prop-details-v2 .detail-table td.value{
    width:65%; color:#111;
}

/* 태그 */
.prop-details-v2 .tag{
    display:inline-block; background:#eef3fb; color:#2a6fd2;
    padding:3px 8px; border-radius:8px; font-size:13px; margin:2px 4px 2px 0;
}


.basicBox--change-log .table-wrap { overflow-x:auto; }
.table--change-log{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table--change-log th, .table--change-log td{
    border-bottom:1px solid #eef0f3; padding:10px 8px; font-size:13px; word-break:break-all;
}
.table--change-log thead th{ background:#f8fafc; font-weight:700; color:#374151; }
.table--change-log tbody tr:nth-child(even){ background:#fafbfc; }
.table--change-log td:nth-child(1){ width:56px; text-align:center; }  /* 순번 */
.table--change-log td:nth-child(2){ width:100px; text-align:center; } /* 수정자 */
.table--change-log td:nth-child(5){ width:140px; text-align:center; } /* 수정 날짜 */
.table--change-log td:nth-child(6){ width:110px; text-align:center; } /* 항목 */
/* 줄바꿈 가능하고 간격 유지 */
.formList--cooling .cooling-list{
    display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
}


/* 각 옵션 라벨: 가로 정렬 고정 */
.formList--cooling .cooling-option{
    display:inline-flex !important;  /* 외부 스타일 덮어씀 */
    align-items:center;
    padding:2px 0;
}

/* 체크박스가 숨겨지는 전역 규칙 무력화 */
.formList--cooling .cooling-option > input[type="checkbox"]{
    display:inline-block !important;
    position:static !important;
    opacity:1 !important;
    width:auto !important;
    height:auto !important;
    margin:0 6px 0 0;
    appearance:auto; -webkit-appearance:auto; /* 혹시 appearance:none 먹었다면 복구 */
    pointer-events:auto !important;           /* pointer-events:none 방지 */
}

/* 텍스트는 줄바꿈 없이 */
.formList--cooling .cooling-text{ white-space:nowrap; }

/* 수량칸: 기본 숨김(공간 차지 X) → 보일 때만 inline-flex로 나타나서 옆 항목을 밀어냄 */
.formList--cooling .cooling-qty-wrap{
    display:none; align-items:center; gap:6px;
}

/* 보이는 상태 클래스(라벨에 붙음) */
.formList--cooling .cooling-option.show-qty .cooling-qty-wrap{
    display:inline-flex;
}

/* 숫자 인풋이 쓸데없이 커지지 않도록 고정 */
.formList--cooling .cooling-qty-wrap .input-text{
    width:64px !important; min-width:64px; box-sizing:border-box; padding-right: 0;
}
.formList--cooling .cooling-qty-wrap .unit{ margin-left:4px; }

/* 이 컴포넌트 안에서는 position 영향 없도록 */
.formList--cooling .input-with-unit{ position:static; }

/* 반응형(모바일에서 좌우 여백/배치) */
@media (max-width: 768px) {
    #fav-page .fav-group-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #fav-page .fav-group-toolbar .left { width: 100%; }
    #fav-page .fav-group-toolbar .inp { min-width: 0; width: 100%; }
    /* 중앙선은 모바일에서 살짝 내려도 OK */
    #fav-page .fav-group-box::after { top: 48px; }
}
/* ======================== */
/*  Property Move Modal     */
/*  (scoped to .pm-modal)   */
/* ======================== */

.pm-modal{border:0;padding:0}
.pm-modal::backdrop{background:rgba(0,0,0,.35)}

.pm-modal .pm-sheet{
    width:1100px;max-width:95vw;background:#fff;border:1px solid #ddd;border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);padding:14px 14px 16px;position:relative
}

/* header */
.pm-modal .pm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pm-modal .pm-title{font-size:18px;font-weight:700;color:#a8a8a8}
.pm-modal .pm-close{position:absolute;right:12px;top:8px;border:0;background:transparent;
    font-size:18px;line-height:1;cursor:pointer}

/* layout */
.pm-modal .pm-body{display:grid;grid-template-columns:1fr 240px;gap:16px}

/* buttons (scoped) */
.pm-modal .pm-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
    border:1px solid #cfcfcf;background:#f7f7f7;border-radius:8px;height:36px;padding:0 12px;
    font-size:13px;color:#222
}
.pm-modal .pm-btn--sm{height:28px;font-size:12px;padding:0 10px}
.pm-modal .pm-btn--primary{background:#2476ff;border-color:#2476ff;color:#fff}
.pm-modal .pm-btn:disabled{opacity:.5;cursor:not-allowed}

/* left: employee filter */
.pm-modal .pm-emp-filter{border:1px solid #e8e8e8;border-radius:8px;padding:10px;margin-bottom:10px}
.pm-modal .pm-filter-label{font-weight:700;color:#666;margin-right:8px}
.pm-modal .pm-filter-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* list */
.pm-modal .pm-list{list-style:none;margin:0;padding:0;border:1px solid #e8e8e8;border-radius:8px}
.pm-modal .pm-row{
    display:grid;grid-template-columns:22px 120px 1fr 160px;gap:12px;
    padding:12px;border-bottom:1px solid #efefef;align-items:center
}
.pm-modal .pm-row:last-child{border-bottom:0}
.pm-modal .pm-check input{width:16px;height:16px}

.pm-modal .pm-thumb{width:120px;height:80px;border-radius:6px;overflow:hidden;background:#f3f3f3}
.pm-modal .pm-thumb-img{width:100%;height:100%;object-fit:cover}

.pm-modal .pm-main{min-width:0;position:relative}
.pm-modal .pm-title-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pm-modal .pm-title-text{font-weight:700;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-modal .pm-inline-filter-btn{
    border:1px solid #e0e0e0;background:#fff;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer
}

.pm-modal .pm-meta{display:flex;gap:10px;color:#666;font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden}
.pm-modal .pm-dates{display:flex;gap:12px;color:#999;font-size:11px;margin-top:6px}

.pm-modal .pm-side{justify-self:end;text-align:right}
.pm-modal .pm-price-type{font-size:12px;color:#777}
.pm-modal .pm-price-amount{font-size:16px;font-weight:800;color:#111;margin-top:2px}
.pm-modal .pm-fee{font-size:11px;color:#777;margin-top:2px}
.pm-modal .pm-manager{font-size:12px;color:#555;margin-top:8px}

/* inline popover */
.pm-modal .pm-inline-filter-pop{
    position:absolute;right:8px;top:36px;width:260px;border:1px solid #dfe1e5;border-radius:10px;
    background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:10px;z-index:5
}
.pm-modal .pm-inline-filter-pop .pop-sec{margin-bottom:8px}
.pm-modal .pm-inline-filter-pop .pop-label{font-size:12px;color:#666;margin-bottom:4px;display:block}
.pm-modal .pm-inline-filter-pop .pop-input{
    width:100%;height:30px;border:1px solid #e3e3e3;border-radius:6px;padding:0 8px
}

/* tag buttons in popover */
.pm-modal .pm-tag{
    border:1px solid #e3e3e3;background:#fafafa;border-radius:999px;padding:4px 8px;font-size:12px;cursor:pointer
}
.pm-modal .pm-tag:focus{outline:2px solid #2476ff;outline-offset:2px}

/* pagination */
.pm-modal .pm-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0 6px}
.pm-modal .pm-page{
    border:1px solid #ddd;background:#fff;border-radius:6px;height:32px;min-width:32px;padding:0 8px;cursor:pointer
}
.pm-modal .pm-page.is-active{background:#222;color:#fff;border-color:#222}

/* right pane */
.pm-modal .pm-right{border:1px solid #e8e8e8;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
.pm-modal .pm-right-head{font-size:16px;font-weight:700;margin:0 0 4px}
.pm-modal .pm-accounts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pm-modal .pm-account{display:flex;align-items:center;gap:8px}
.pm-modal .pm-account input{accent-color:#2476ff}
.pm-modal .pm-chip{border:1px solid #d8d8d8;background:#f7f7f7;border-radius:999px;padding:6px 10px;font-size:13px}

/* move button */
.pm-modal .pm-move-btn{margin-top:auto;align-self:flex-end;width:100%}

/* focus helpers */
.pm-modal .pm-row:has(.pm-row-check:focus),
.pm-modal .pm-close:focus,
.pm-modal .pm-inline-filter-btn:focus,
.pm-modal .pm-page:focus{outline:2px solid #2476ff;outline-offset:2px}
.pm-filter-group-selects{display:flex;gap:8px;flex-wrap:wrap;}
.pm-dd{position:relative}
.pm-dd summary{list-style:none;cursor:pointer;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;background:#fff;font-size:14px;white-space:nowrap}
.pm-dd summary::-webkit-details-marker{display:none}
.pm-dd summary::before{content:"▸ ";margin-right:4px}
.pm-dd[open] summary::before{content:"▾ "}
.pm-dd-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:20;min-width:100px}
.pm-dd-menu label{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 2px}

.formList--loft .series-range{
    display:inline-flex; align-items:center; gap:6px;
}
.formList--loft .series-range .tilde{margin:0 6px;}

/* + 버튼 영역 */
.deal-add-wrapper {
    display:flex; justify-content:center; margin:16px 0 32px;
}
.deal-add-btn {
    width:48px; height:48px; border-radius:50%;
    border:1px solid #e0d7d5; background:#f6efee; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.deal-add-btn .plus { font-size:28px; line-height:1; color:#7a3a35; }
.deal-add-btn:disabled { opacity:.4; cursor:not-allowed; }

/* 클론 카드의 삭제(X) 버튼 */
.deal-card { position:relative; }
.deal-card.is-clone .deal-card-remove{
    position:absolute; top:8px; right:8px;
    width:28px; height:28px; border:1px solid #ddd; border-radius:6px;
    background:#fff; cursor:pointer; line-height:26px; text-align:center;
}

/* ===== Modal Shell ===== */
.mgmt-modal[hidden]{display:none;}
.mgmt-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9998;
}
.mgmt-dialog{
    position:fixed; top:5%; left:50%; transform:translateX(-50%);
    width:min(900px, calc(100% - 40px)); max-height:90vh; overflow:auto;
    background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
    padding:20px 24px; z-index:9999; outline:0;
}
.mgmt-close{
    position:absolute; top:10px; right:12px; border:0; background:transparent;
    font-size:24px; cursor:pointer; line-height:1;
}
.mgmt-title{font-size:20px; font-weight:700; margin:0 0 12px;}
.mgmt-footer{display:flex; justify-content:flex-end; gap:8px; padding-top:8px}


/* ===== Section headings (이미지 톤) ===== */
.mgmt-section{margin-top:16px;margin-bottom: 12px;}
.mgmt-section-title{
    color:#b61c1c; font-size:18px; font-weight:700; margin:6px 0 8px;
}

/* 포함 항목 라인 */
.mgmt-incl-title{color:#555; margin-left:8px; margin-right:4px;}

/* 모달 열렸을 때 스크롤 잠금(선택) */
body.is-modal-open{overflow:hidden;}


/* 카드 크기를 200px 너비로 고정, 높이는 내용(이미지)에 맞춰 자동 */
.photo-card {
    position: relative;
    width: 200px;          /* ← 요청: 너비 200px */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* 이미지 비율 유지: 가로 100%, 세로 자동 */
.photo-card img {
    display: block;
    width: 100%;
    height: auto;          /* ← 요청: 높이 auto */
    border-radius: 6px;
    /* object-fit은 필요 없음(높이 auto로 원본 비율 유지) */
}

/* 삭제 버튼(겹쳐 보이도록) */
.photo-card .thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 9999px;
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
    line-height: 24px;
    text-align: center;
}

/* 파일명은 한 줄로 말줄임 */
.photo-card .thumb-name {
    margin-top: 6px;
    font-size: 12px;
    color: #374151;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prop-modal__media .map .kmap {
    width: 100%;
    height: 280px;          /* 필요시 240~320px로 조절 */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
}


/* 프로퍼티 이미지 디자인*/
/* 라이트박스 스타일 */
.imgbox__overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:9999}
.imgbox{position:relative;width:min(92vw,1200px);height:min(86vh,800px);display:grid;grid-template-rows:1fr auto;gap:12px;outline:none}
.imgbox__close{position:absolute;top:-40px;right:0;border:none;background:transparent;color:#fff;font-size:28px;cursor:pointer}
.imgbox__stage{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:8px;overflow:hidden;background:#000}
.imgbox__img{max-width:100%;max-height:100%;object-fit:contain}
.imgbox__nav{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.4);color:#fff;width:46px;height:46px;border-radius:23px;font-size:28px;cursor:pointer}
.imgbox__nav.prev{left:10px}.imgbox__nav.next{right:10px}
.imgbox__nav:disabled{opacity:.3;cursor:default}
.imgbox__meta{display:flex;justify-content:space-between;align-items:center;color:#fff}
.imgbox__download{border:none;background:rgba(255,255,255,.15);color:#fff;padding:6px 10px;border-radius:6px;cursor:pointer}

/* 상세 모달 오버레이 (있을 경우) */
.prop-modal__overlay { z-index: 9000; }

/* 라이트박스 오버레이: 모달 위 */
.imgbox__overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.86);
    display:grid; place-items:center; z-index:10000;  /* ✅ 모달보다 큼 */
}
.imgbox{
    position:relative; width:min(92vw,1200px); height:min(86vh,800px);
    display:grid; grid-template-rows:1fr auto; gap:12px; outline:none
}
.imgbox__close{
    position:absolute; top:-40px; right:0; border:none; background:transparent;
    color:#fff; font-size:28px; cursor:pointer
}
.imgbox__stage{
    position:relative; width:100%; height:100%; display:grid; place-items:center;
    border-radius:8px; overflow:hidden; background:#000
}
.imgbox__img{ max-width:100%; max-height:100%; object-fit:contain }
.imgbox__nav{
    position:absolute; top:50%; transform:translateY(-50%); border:none;
    background:rgba(0,0,0,.4); color:#fff; width:46px; height:46px;
    border-radius:23px; font-size:28px; cursor:pointer
}
.imgbox__nav.prev{ left:10px } .imgbox__nav.next{ right:10px }
.imgbox__nav:disabled{ opacity:.3; cursor:default }
.imgbox__meta{ display:flex; justify-content:space-between; align-items:center; color:#fff }
.imgbox__download{ border:none; background:rgba(255,255,255,.15); color:#fff; padding:6px 10px; border-radius:6px; cursor:pointer }

.nv-cluster{
    display:flex; align-items:center; justify-content:center;
    border-radius:9999px; box-shadow:0 2px 6px rgba(0,0,0,.25);
    font-weight:700; color:#fff; user-select:none;
}
.nv-c1{ width:34px;height:34px; background: #d86d68; }
.nv-c2{ width:40px;height:40px; background: #bd4d49; }
.nv-c3{ width:48px;height:48px; background: #a13735; }
.nv-c4{ width:56px;height:56px; background: #7c2a25; }
.nv-c5{ width:68px;height:68px; background: #682321; }
.nv-cluster span{ font-size:14px; line-height:1; }


.sgg-badge{
    padding:6px 10px;border-radius:14px;background:#ffffffcc;
    box-shadow:0 2px 6px rgba(0,0,0,.15);backdrop-filter:blur(2px);
    font-size:12px;display:inline-flex;gap:8px;align-items:center
}
.sgg-badge b{font-weight:700}
.sgg-badge .sgg-count{font-weight:700}

#mapView .map-container {
    z-index: 2 !important;
}




/* 담당자 컨테이너 */
.property-item .manager {
    font-size: 15px;      /* 기존보다 조금 키움 */
    font-weight: 700;     /* 굵게 */
    color: #000;          /* 검정 */
    margin-top: 4px;
}

/* 매니지먼트 타입 뱃지 */
.property-item .manager .mgmt-type {
    display: inline-block;
    font-size: 11px;       /* 이름보다 작게 */
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 5px;
    background-color: #f3f3f3;
    color: #666;
    vertical-align: middle;
}
/* 계좌 등록 팝업 폼 정렬 */
.account-popup-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-popup-form .row-two-col {
    display: flex;
    gap: 12px;
}
.account-popup-form .row-one-col {
    display: flex;
}
.account-popup-form .field {
    display: flex;
    align-items: center;
    flex: 1;
}
/* label 고정 너비, input은 나머지 영역 채움 */
.account-popup-form .field > label {
    width: 110px;            /* 필요하면 숫자 조금 조정 */
    flex-shrink: 0;
    font-size: 14px;
}
.account-popup-form .field .field-input {
    flex: 1;
}
.account-popup-form .field .field-input input,
.account-popup-form .field .field-input select {
    width: 100%;
    box-sizing: border-box;
}

/* === 입금계좌 하단 배너 스타일 === */
.account-register-banner{
    margin-bottom: 5px;
    background: #f7f8fa;
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    padding: 14px 24px;
    box-sizing: border-box;

    width: 100%;
    max-width: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}



.banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bank-icon {
    font-size: 22px;
}

.text-area h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #2e2e2e;
}

.text-area p {
    font-size: 13px;
    margin: 3px 0 0;
    color: #666;
}

.register-btn {
    margin-left: auto;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 6px;
    background: #7a0000;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.register-btn:hover {
    background: #9a0000;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.register-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/*!*입금계좌 팝업 디자인*!*/
#accountDialog { display:none; }

/* 열림 */
#accountDialog[open]{
    display:flex;
    flex-direction:column;
    overflow: visible !important;
    max-height: 53vh;   !important;  /* 여기서 조절 */
    min-height: 35vh; !important;
    height: auto;         /* 공통 CSS의 height 강제값 무력화 */
}

/* form만 스크롤 */
#accountDialog[open] #registerForm{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#accountDialog .bank-quickhelp-tooltip {
    position: fixed !important;
}
/* 헤더/버튼은 고정, 가운데 내용(form)만 스크롤 */
#accountDialog .popup-header {
    flex-shrink: 0;
}

#accountDialog #registerForm {
    flex: 1;
    min-height: 0;              /* ✅ flex 자식 스크롤 버그 방지(매우 중요) */
    overflow-y: auto;           /* ✅ 폼만 스크롤 */
}

/* 하단 보안 안내 문구 - 팝업 내부에서 버튼 위에 고정 */
.account-security-note {
    flex-shrink: 0;
    /*margin: 8px 24px 0;*/
    padding-top: 8px;
    border-top: 1px solid #f1f1f1;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
}

/* 버튼 영역도 고정 */
#accountDialog .btn-group {
    flex-shrink: 0;
    /*padding: 12px 24px 20px;*/
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* === 빠른조회 물음표 아이콘 & 라벨 === */
.label-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quickhelp-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: help;
}

/* === 빠른조회 설명 툴팁 === */
.bank-quickhelp-tooltip{
    animation: fadeInScale 0.15s ease-out;
    position: fixed;           /* ✅ 화면 기준 */
    left: 0;
    top: 0;
    width: 520px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    padding: 14px;
    box-sizing: border-box;
    font-size: 12px;
    color: #444;
    display: none;
    z-index: 9999;             /* ✅ 팝업보다 위 */
    pointer-events: auto;      /* ✅ 툴팁 위로 마우스 이동 허용 */
}

.bank-quickhelp-tooltip.show {
    display: block;
}

.bank-quickhelp-image {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    border: none;
    overflow: hidden;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    margin-bottom: 8px;
}

.bank-quickhelp-desc {
    line-height: 1.4;
}

.bank-warning-row{
    display: none;              /* 기본 숨김 */
}

/* 실제 문구 스타일 */
.bank-warning-text{
    margin-top: 4px;
    padding-left: 2px;          /* 계좌유형 input 정렬 맞춤 */
    font-size: 12px;
    color: #d32f2f;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
}

/* 하단 배너 스택 컨테이너 (겹침 방지) */
.bottom-banner-stack{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;

    display: block;
    flex-direction: column;
    gap: 12px;
    align-items: center;

    z-index: 999;
    width: min(820px, calc(100vw - 24px)); /* 스택 자체 폭을 배너 폭으로 고정 */
}

/* 각 배너 래퍼는 스택 폭을 그대로 사용 */
#deposit-banner,
#certificate-banner{
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
}

#bankQuickHelpImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


@keyframes fadeInScale{
    from{
        opacity: 0;
        transform: scale(0.96);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}
.logo-text {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}


.logo-beta {
    font-size: 12px;              /* beta는 작게 */
    font-weight: 600;
    color: #9CA3AF;               /* 살짝 톤 다운 */
    line-height: 1;
    margin-top: 4px;              /* 위로 살짝 올려 로고 느낌 */
    letter-spacing: 0.02em;
}


.loading-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    display: flex;
}

.loading-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.loading-box {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 220px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
    align-items: center;
}

.loading-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.55);
    animation: spin 0.85s linear infinite;
}

.loading-text {
    font-size: 14px;
    color: rgba(0,0,0,0.78);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.readonly {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.merge-summary-card {
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    background: #5e5e5e;
}

.merge-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.merge-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.merge-summary-row.total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
    font-weight: 700;
}

.merge-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merge-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.merge-detail-row.is-base {
    background: #f8f4f1;
    border-color: #d8c8bf;
}

.merge-detail-badge {
    min-width: 90px;
    font-size: 13px;
    font-weight: 700;
}

.merge-detail-main {
    flex: 1;
    margin: 0 16px;
}

.merge-detail-name {
    font-weight: 600;
}

.merge-detail-date {
    font-size: 13px;
    color: #6b3737;
    margin-top: 4px;
}

.merge-detail-amount {
    font-weight: 700;
}