@charset "utf-8";

:root {
    --header-height: 0px;

    /* static */
    --hans-green: #2E7D5B;
    --hans-yellow: #F2C94C;
    --hans-yellow-hover: #E5BA36;
    --hans-red: #C83227;
    --hans-red-hover: #A92720;
    --hans-softred: #FEF3F2;
    --hans-softred-hover: #FDE7E5;
    --hans-blue: #005EDE;
    --hans-blue-hover: #0052C2;
    --rgb-hans-blue: 0 94 222;
    --hans-softblue: #EAF2FF;
    --rgb-hans-softblue: 234 242 255;
    --hans-navy: #17243A;
    --hans-navy-hover: #0E192B;
    --rgb-hans-navy: 23 36 58;
    --color-white: #fff;
    --rgb-white: 255 255 255;
    --color-black: #000;
    --rgb-black: 0 0 0;

    /* text */
    --gray900: #17243A;
    --gray700: #344054;
    --gray500: #667085;
    --gray400: #98A2B3;
    --gray300: #D0D5DD;
    --gray200: #E4E7EC;
    --gray100: #F1F3F6;
    --gray50: #F8F9FB;

    /* font size */
    --fs-72: clamp(42px, 5vw, 72px);
    --fs-64: clamp(38px, 4.44vw, 64px);
    --fs-52: clamp(36px, 3.61vw, 52px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-48: clamp(34px, 3.33vw, 48px);
    --fs-44: clamp(32px, 3.05vw, 44px);
    --fs-40: clamp(30px, 2.78vw, 40px);
    --fs-36: clamp(28px, 2.5vw, 36px);
    --fs-34: clamp(27px, 2.4vw, 34px);
    --fs-32: clamp(26px, 2.22vw, 32px);
    --fs-30: clamp(24px, 2.08vw, 30px);
    --fs-28: clamp(22px, 1.94vw, 28px);
    --fs-26: clamp(21px, 1.8vw, 26px);
    --fs-24: clamp(20px, 1.67vw, 24px);
    --fs-22: clamp(19px, 1.53vw, 22px);
    --fs-20: clamp(18px, 1.39vw, 20px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-17: clamp(15px, 1.18vw, 17px);
    --fs-16: clamp(14px, 1.11vw, 16px);
    --fs-15: clamp(13px, 1.04vw, 15px);
    --fs-14: clamp(12px, 0.97vw, 14px);
    --fs-13: clamp(11px, 0.90vw, 13px);
    --fs-12: clamp(10px, 0.83vw, 12px);

    --space-60: clamp(48px, 4.17vw, 60px);
    --space-80: clamp(56px, 5.56vw, 80px);
    --space-100: clamp(64px, 6.94vw, 100px);
    --space-120: clamp(80px, 8.33vw, 120px);
    --space-140: clamp(96px, 9.72vw, 140px);
    --space-160: clamp(112px, 11.11vw, 160px);

    /* shadow */
    --box-shadow:0px 2px 10px #17243A24;

    --floating-offset: var(--space-100);
}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.w100 {width: 100%;}

.blue-txt {color: var(--hans-blue);}

/* 텍스트 */
.hero-tit {font-size: var(--fs-52); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em;}
.section-tit {font-size: var(--fs-32); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em;}
.card-tit {font-size: var(--fs-17); font-weight: 600; line-height: 1.4; letter-spacing: -0.03em;}
.eyebrow {font-size: var(--fs-14); font-weight: 700; line-height: 1.4; letter-spacing: 0.08em;}
.body-large {font-size: var(--fs-17); line-height: 1.65;}
.body-default {font-size: var(--fs-15); line-height: 1.6;}
.nav-txt {font-size: var(--fs-15); line-height: 1.6; letter-spacing: -0.01em;}

/* 필터 */
.filter-white {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.filter-black {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

/* 버튼 */
.btn-list {display: flex; align-items: center; column-gap: var(--fs-14);}
.square-btn {justify-content: center; white-space: nowrap; width: fit-content; display: flex; align-items: center; column-gap: 6px; transition: background-color 0.2s; padding: 10px var(--fs-20); font-size: var(--fs-14); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; border-radius: 8px; border: 1px solid transparent;}
.round-btn {justify-content: center; white-space: nowrap; width: fit-content; display: flex; align-items: center; column-gap: 6px; transition: background-color 0.2s; padding: 8px 12px; font-size: var(--fs-14); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; border-radius: 99px; border: 1px solid transparent;}
.square-btn.w100 {justify-content: center;}
.line-btn {border-color: var(--hans-navy); color: var(--hans-navy); background-color: var(--color-white);}
.line-btn:hover {background-color: var(--gray50);}
.white-btn {box-shadow: var(--box-shadow); color: var(--hans-navy); background-color: var(--color-white);}
.white-btn:hover {background-color: var(--gray50);}
.blue-btn {background-color: var(--hans-blue); color: var(--color-white);}
.blue-btn:hover {background-color: var(--hans-blue-hover);}
.navy-btn {background-color: var(--hans-navy); color: var(--color-white);}
.navy-btn:hover {background-color: var(--hans-navy-hover);}
.yellow-btn {background-color: var(--hans-yellow); color: var(--color-white);}
.yellow-btn:hover {background-color: var(--hans-yellow-hover);}
.red-btn {background-color: var(--hans-red); color: var(--color-white);}
.red-btn:hover {background-color: var(--hans-red-hover);}
.red-line-btn {border-color: var(--hans-red); background-color: var(--hans-softred); color: var(--hans-red);}
.red-line-btn:hover {background-color: var(--hans-softred-hover);}
.white-line-btn {border-color: rgb(var(--rgb-white) / 18%); color: var(--gray50);}
.yellow-line-btn {border-color: var(--hans-yellow); color: var(--hans-yellow);}

.txt-btn {display: flex; align-items: center; column-gap: 8px; transition: opacity 0.2s; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;}
.txt-btn:hover {opacity: 0.7;}
.txt-btn.red {color: var(--hans-red);}
.txt-btn.blue {color: var(--hans-blue);}
.txt-btn.gray {color: var(--gray500);}

.ico-btn {position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.ico-btn img {transition: opacity 0.2s; max-height: 100%;}
.ico-btn:hover img {opacity: 0.7;}
.ico-btn[data-title]::after { content: attr(data-title); position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-4px); padding: 6px 10px; border-radius: 6px; background: #222; color: #fff; font-size: 12px; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; z-index: 10;}
.ico-btn[data-title]::before { content: ""; position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%) translateY(-4px); border-width: 6px; border-style: solid; border-color: transparent transparent #222 transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; z-index: 10;}
.ico-btn[data-title]:hover::before,
.ico-btn[data-title]:hover::after {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}

/* 탭 */
.tab-list {display: flex; align-items: center; column-gap: var(--fs-14);}
.tab {transition: border-color 0.2s, background-color 0.2s, color 0.2s; padding: 10px var(--fs-20); font-size: var(--fs-14); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; border-radius: 99px; border: 1px solid var(--gray200); color: var(--hans-navy); background-color: var(--color-white);}
.tab:hover {border-color: var(--hans-yellow);}
.tab.active {background-color: var(--hans-yellow); color: var(--color-white);}
.tab-swiper {width: fit-content; margin: 0; overflow: hidden; padding-bottom: 1px;}
.tab-swiper .tab-list {column-gap: 0;}
.tab-swiper .tab {width: auto; flex-shrink: 0;}

/* 뱃지 */
.badge-list {display: flex; align-items: center; column-gap: var(--fs-20);}
.badge {padding: 10px var(--fs-20); font-size: var(--fs-14); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; border-radius: 99px; border: 1px solid var(--gray200); color: var(--hans-navy); background-color: var(--color-white);}
.badge.yellow {border-color: transparent; background-color: var(--hans-yellow); color: var(--color-white);}

/* 상태뱃지 */
.status {padding: 6px 10px; border-radius: 99px; font-size: var(--fs-12); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-white); background-color: var(--color-black);}
.status.available {background-color: var(--hans-green);}
.status.rented {background-color: var(--gray500);}

.toolbar {display: flex; align-items: center; justify-content: space-between; column-gap: 14px;}

.desc-box {padding: 10px; background-color: var(--hans-softblue); width: 100%;}
.desc-box p {color: var(--hans-blue);}

/* 커스텀체크 */
.check-area p {color: var(--gray400); margin-top: 8px;}
.custom-chk {display: flex; align-items: center; gap: 7px; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--gray900);}
.custom-chk input[type="checkbox"] {display: none;}
.custom-chk label {cursor: pointer; display: flex; align-items: center; column-gap: var(--fs-12);}
.custom-chk label span {flex-shrink: 0; display: inline-block; width: 24px; height: 24px; border: 1px solid var(--gray200); border-radius: 4px; background-color: var(--color-white); background-image: url(../img/check-ico.svg); background-size: 60%; background-repeat: no-repeat; background-position: center center; transition: all 0.2s ease;}
.custom-chk label em {display: flex; align-items: center; column-gap: 8px; font-style: normal; font-size: var(--fs-16); line-height: 1.65; color: var(--gray900);}
.custom-chk.required label em::after {content: '*'; color: var(--hans-blue); word-break: keep-all;}
.custom-chk.optional label em::after {content: '(선택)'; color: var(--gray500); word-break: keep-all;}
.custom-chk input[type="checkbox"]:checked + label span {background-color: var(--hans-blue); border-color: var(--hans-blue);}
.custom-chk:hover span {border-color: var(--hans-blue);}

/* 인풋 */
form, fieldset {width: 100%;}
fieldset {margin: 0; padding: 0; border: 0;}
form {display: flex; flex-direction: column; row-gap: var(--space-80);}
.submit-btn-wrap {display: flex; align-items: center; column-gap: var(--fs-14); justify-content: flex-end;}
.form-block {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.form-tit {color: var(--hans-navy); display: flex; align-items: center; column-gap: var(--fs-20);}
.form-tit h3 {flex-shrink: 0;}
.form-tit::after {flex: 1; content: ''; width: 100%; height: 1px; background-color: var(--gray200);}
.blind {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.input-list {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.input-list > * {width: 100%;}
.input-wrap {width: 100%; display: flex; flex-wrap: wrap; gap: var(--fs-20);}
.input-wrap > * {width: calc(50% - var(--fs-20) / 2);}
.input-wrap > .w30 {width: calc(100% / 3 - var(--fs-20) * 2 / 3);}
.input-item-label > .custom-select-box,
.input-item-label > .custom-input {width: 100%;}
.input-item-label {display: flex; flex-direction: column; row-gap: 6px; align-items: flex-start;}
.input-item-label label,
.input-item-label .label {padding: 0; font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--gray900); display: flex; align-items: center; column-gap: 6px;}
.input-item-label label.required::after,
.input-item-label .label.required::after {content: '*'; color: var(--hans-blue);}
.input-item-label .hidden-label {opacity: 0;}
.input-item-label.row {display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; column-gap: var(--fs-20); row-gap: 0;}
.input-item-label.row > .input-content {min-width: 0;}
.input-item-label.row > .input-content input {width: 100%;}
.input-item-btn,
.input-item-email {width: 100%; display: flex; align-items: center; column-gap: 6px;}
.input-item-email span {width: var(--fs-16); text-align: center;}
.input-item-email .custom-input,
.input-item-email .custom-select-box {width: calc((100% - var(--fs-16) - 12px) / 3) !important;}
.input-item-btn .custom-input {width: auto; flex: 1;}

.custom-textarea,
.custom-select-box select,
.custom-input {transition: border-color 0.2s; background-color: var(--color-white); border: 1px solid var(--gray300); padding: var(--fs-12) var(--fs-16); font-size: var(--fs-15); color: var(--gray900); line-height: 1.6; letter-spacing: -0.2px;}
.custom-textarea {width: 100%; height: 180px; resize: none; border-radius: 10px;}
.custom-textarea::placeholder,
.custom-input::placeholder {color: var(--gray400); font-size: var(--fs-16); line-height: 1.6; letter-spacing: -0.2px;}
.search-input-wrap {width: 100%; max-width: 417px; position: relative;}
.search-input-wrap .custom-input.search {width: 100%; padding-right: var(--fs-50);}
.search-input-wrap .search-btn {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: var(--fs-24); height: var(--fs-24); display: flex; align-items: center; justify-content: center;}
.search-input-wrap .search-btn img {width: 100%; height: 100%; object-fit: contain;}
.custom-select-box {position: relative;}
.custom-select-box select {width: 100%; cursor: pointer; padding-right: calc(10px + var(--fs-24)); appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.custom-select-box::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: var(--fs-24); height: var(--fs-24); background-color: var(--color-white); background-image: url('/img/select-arrow.svg'); background-repeat: no-repeat; background-position: center center; pointer-events: none;}
.custom-input,
.custom-select-box select,
.custom-input-btn {height: var(--fs-50); border-radius: 10px; flex-shrink: 0; white-space: nowrap; padding-block: 0;}
/* 비밀번호 입력 - 눈 아이콘 토글 */
.password-input-wrap {position: relative; width: 100%;}
.password-input-wrap .custom-input {width: 100%; padding-right: calc(var(--fs-16) + 24px);}
.password-input-wrap .pw-toggle-btn {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: var(--fs-24); height: var(--fs-24); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer;}
.password-input-wrap .pw-toggle-btn img {width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(69%) sepia(9%) saturate(573%) hue-rotate(178deg) brightness(94%) contrast(89%);}
.password-input-wrap .pw-toggle-btn[aria-pressed="true"] img {filter: none;}

.custom-input:hover,
.custom-select-box:hover select {border-color: var(--gray400);}
.custom-input:focus,
.custom-select-box select:focus {border-color: var(--hans-navy); outline: none;}

.input-desc {font-size: var(--fs-15); line-height: 1.6; color: var(--gray500);}
.input-desc.error {display: flex; align-items: center; column-gap: 6px; color: var(--hans-red);}
.input-desc.error::before {content: ''; display: block; width: 12px; height: 12px; background-image: url('/img/error-ico.svg'); background-size: contain; background-repeat: no-repeat; background-position: center center;}
.desc-box.input-desc {margin-top: 10px; background-color: var(--gray50); color: var(--gray700);}
.custom-input.error {border-color: var(--hans-red);}
.custom-input:read-only {background-color: var(--gray50); color: var(--gray500); pointer-events: none;}
.custom-input[type="month"]::-webkit-calendar-picker-indicator,
.custom-input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0; position: absolute; right: 10px; width: var(--fs-24); height: var(--fs-24); cursor: pointer;}
.custom-input[type="month"],
.custom-input[type="date"] {position: relative; padding-right: calc(10px + var(--fs-24)); background-image: url('/img/calendar-ico.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: var(--fs-24);}
.custom-input:disabled {background-color: var(--gray100); color: var(--gray400);}

.textarea-wrap {position: relative;}
.textarea-wrap .textarea-count {position: absolute; right: var(--fs-20); bottom: var(--fs-20); color: var(--gray400);}

/* pagination */
.pagination {display:flex; align-items:center; justify-content:center; gap: var(--fs-16);}
.pagination a,
.pagination span {transition:background-color 0.2s, border-color 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid transparent; border-radius:99px; font-size:var(--fs-16); font-weight: 500;; color:var(--gray500);}
.pagination a:hover {color: var(--gray900);}
.pagination a.active {background-color:var(--hans-blue); color:var(--color-white);}
.pagination a.arrow.prev img {transform: rotate(-180deg);}
.pagination a.arrow.disable {pointer-events: none;}
.pagination a.arrow.disable img {opacity: 0.4;}
.pagination a.arrow:hover img {opacity: 0.7;}

.num-ol, .a-ol, .dot-ul {padding-left: 1.2em;}
.num-ol > li {list-style-type: decimal;}
.a-ol > li {list-style-type: lower-alpha;}
.dot-ul > li {list-style-type: disc;}
/* 모달 */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; align-items: center; justify-content: center; }
.modal.open { display: flex; }
.modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--rgb-black) / 40%); z-index: 999; }
.modal.open + .modal-bg { display: block; }
.modal .modal-content {display: flex; flex-direction: column; row-gap: var(--fs-30); background-color: var(--color-white); border-radius: 10px; padding: var(--fs-30); max-width: 600px; position: relative; z-index: 1001; }
.modal .modal-tit-wrap {display: flex; flex-direction: column; row-gap: 10px;}
.modal .modal-tit {color: var(--gray900);}
.modal .modal-desc {color: var(--gray500);}
.modal .btn-list {width: 100%;}
.modal .btn-list .square-btn {flex: 1;}
/* 모달 닫기 버튼 */
.modal-tit-wrap {position: relative;}
.modal-close-btn {position: absolute; top: 0; right: 0; width: var(--fs-24); height: var(--fs-24); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer;}
.modal-close-btn img {width: 100%; height: 100%; object-fit: contain;}

/* 섹션타이틀 */
.section-tit-wrapper {display: flex; align-items: flex-end; justify-content: space-between;}
.section-tit-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px;}
.section-tit-wrap .eyebrow {color: var(--hans-blue);}
.section-tit-wrap .section-tit {color: var(--hans-navy);}
.section-tit-wrap .body-default {color: var(--gray500);}

/* 카드타이틀 */
.card-tit-wrap {display: flex; align-items: center; column-gap: 8px;}

/* 부동산 리스트 */
.rental-list {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--fs-44); row-gap: var(--fs-50);}
.rental-card {transition: box-shadow 0.2s; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--gray200);}
.rental-card .thumb-wrap {width: 100%; height: auto; aspect-ratio: 412/280; position: relative;}
.rental-card .thumb-wrap img {width: 100%; height: 100%; object-fit: cover;}
.rental-card .thumb-wrap .badge {position: absolute; top: var(--fs-20); left: var(--fs-20); z-index: 10;}
.rental-card .thumb-wrap .status {position: absolute; top: var(--fs-20); right: var(--fs-20); z-index: 10;}
.rental-card .txt-wrap {padding: var(--fs-30) var(--fs-20); display: flex; flex-direction: column; align-items: flex-start;}
.rental-card .txt-wrap .card-tit {color: var(--hans-navy);}
.rental-card .txt-wrap .body-default {color: var(--gray500); margin-top: 4px;}
.rental-card .txt-wrap .txt-btn {transition: color 0.2s; color: var(--gray400); margin-top: var(--fs-20);}
.rental-card:hover {box-shadow: var(--box-shadow);}
.rental-card:hover .txt-wrap .txt-btn {color: var(--hans-blue);}


@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1024px) {
    .section-tit-wrapper {flex-direction: column; align-items: flex-start; row-gap: var(--fs-40);}
    .rental-list {grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 30px;}
}

@media screen and (max-width: 768px) {
    .rental-list {grid-template-columns: repeat(1, 1fr);}
    .rental-card .txt-wrap {padding: 20px 16px;}
    .rental-card .thumb-wrap .badge {top: 20px; left: 16px;}
    .rental-card .thumb-wrap .status {top: 20px; right: 16px;}
}

@media screen and (max-width: 480px) {
    .input-wrap {flex-direction: column;}
    .input-wrap > * {width: 100%;}
}

@media screen and (max-width: 375px) {
    .badge {padding: 6px 10px;}
    .pagination {gap: 4px;}
    .rental-card .txt-wrap {padding: 14px 12px;}
    .rental-card .thumb-wrap .badge {top: 14px; left: 12px;}
    .rental-card .thumb-wrap .status {top: 14px; right: 12px;}
}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */