@charset "utf-8";
.my-page .my-page-tit {padding-block: var(--space-20) var(--space-14); color: var(--color-gray11);}
/* 회원 정보 */
.my-user {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); margin-inline: var(--gutter); padding-block: var(--space-16) var(--space-24); border-bottom: 2px solid var(--color-gray2);}
.my-user .my-user-name {color: var(--color-gray11);}
.my-user .my-user-tel {margin-top: 2px; color: var(--color-gray6);}
.my-user .txt-btn {flex: none;}
.my-user .txt-btn .ico {width: 24px; height: 24px; color: var(--color-gray6);}
.my-menu {padding-top: var(--space-30);}
.my-user + .my-menu {padding-top: var(--space-40);}
.my-menu:last-child {padding-bottom: var(--space-40);}
.my-menu .my-menu-tit {margin-bottom: var(--space-6); color: var(--color-gray9);}
.my-menu a {display: flex; align-items: center; column-gap: var(--space-8); min-height: var(--size-52); color: var(--color-gray8);}
.my-menu a > .body-medium {min-width: 0;}
.my-menu a > .ico {flex: none; margin-left: auto; color: var(--color-gray6);}
.my-count {display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: var(--space-6); border-radius: 999px; font-weight: 600; background-color: var(--color-static3); color: var(--color-static1);}

/* 예약 내역 */
.history-card .my-work-btn {margin-top: var(--space-16);}
.history-card .my-work-btn .ico {width: 18px; height: 18px;}

/* 하위 화면 공통 */
.my-sub {display: flex; flex-direction: column;}
.my-sub .my-sub-tit {padding-block: var(--space-20) var(--space-24); color: var(--color-gray9);}
.my-bottom-btn {position: static; padding-top: var(--space-24);}
.my-bottom-btn .ico {width: 20px; height: 20px;}

/* 시공 진행 현황 */
.work-summary {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-gray1);}
.work-summary .work-summary-car {min-width: 0; color: var(--color-gray7);}
.work-summary .work-summary-car strong {margin-right: var(--space-4); color: var(--color-gray9);}
.work-summary .work-summary-car span {color: var(--color-gray6);}
.work-summary .work-summary-car p + p {margin-top: var(--space-4);}
.work-summary .work-summary-end {flex: none; text-align: right;}
.work-summary .work-summary-end dt {color: var(--color-gray6);}
.work-summary .work-summary-end dd {display: flex; align-items: center; justify-content: flex-end; column-gap: var(--space-4); color: var(--color-static1);}

/* 진행 단계 */
.work-timeline {margin-block: var(--space-24) var(--space-32);}
.work-timeline > li {position: relative; display: flex; align-items: center; column-gap: var(--space-12); padding: var(--space-8) 0 var(--space-8) 46px;}
.work-timeline > li::before {content: ''; position: absolute; top: 0; bottom: 0; left: 12px; width: 1px; background-color: var(--color-gray3);}
.work-timeline > li:first-child::before {top: 50%;}
.work-timeline > li:last-child::before {bottom: 50%;}
.work-timeline > li.done::before {background-color: var(--color-static1);}
.work-timeline > li.current::before {background: linear-gradient(180deg, var(--color-static1) 50%, var(--color-gray3) 50%);}
.work-timeline .work-dot {position: absolute; top: 50%; left: 2.5px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--color-gray3); border-radius: 50%; background-color: var(--color-gray1); color: var(--color-white); transform: translateY(-50%);}
.work-timeline .work-dot::after {content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-gray3);}
.work-timeline .work-dot .ico {width: 14px; height: 14px;}
.work-timeline > li.done .work-dot {border: 0; background-color: var(--color-static1);}
.work-timeline > li.done .work-dot::after {content: none;}
/* 진행 중 */
.work-timeline > li.current {margin: 0 -10px; padding: var(--space-16) var(--space-8) var(--space-16) 50px; border-radius: var(--radius-small); background-color: color-mix(in srgb, var(--color-static3) 60%, var(--color-white)); box-shadow: var(--shadow);}
.work-timeline > li.current::before {left: 22px;}
.work-timeline > li.current .work-dot {left: 10.5px; width: 24px; height: 24px; border-color: var(--color-static1); background-color: transparent;}
.work-timeline > li.current .work-dot::after {width: 10px; height: 10px; background-color: var(--color-static1);}
.work-timeline .work-txt {flex: 1 1 auto; min-width: 0;}
.work-timeline .work-tit {color: var(--color-gray7);}
.work-timeline .work-desc {color: var(--color-gray6);}
.work-timeline > li.done .work-tit {color: var(--color-gray8);}
.work-timeline > li.current .work-tit {color: var(--color-static1);}
.work-timeline > li.current .work-desc {margin-top: 2px; color: var(--color-gray8);}
.work-timeline .work-time {flex: none; color: var(--color-gray6);}

/* 케어리포트 버튼 */
.my-bottom-btn .line-btn {border-color: var(--color-static1); color: var(--color-static1);}
/* 추가 작업 확인 */
.work-add-btn {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); width: 100%; padding: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-bg2); text-align: left;}
.work-add-btn .work-add-btn-txt {display: flex; flex-direction: column; row-gap: var(--space-4); min-width: 0;}
.work-add-btn .work-add-tit {display: flex; align-items: center; column-gap: var(--space-8); color: var(--color-static1);}
.work-add-btn .work-add-tit .ico {flex: none;}
.work-add-btn .work-add-desc {color: var(--color-gray8);}
.work-add-btn > .ico {flex: none; color: var(--color-gray6);}
.work-add-modal .work-add-item {margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border);}
.work-add-modal .work-add-label {color: var(--color-gray6);}
.work-add-modal .work-add-name {margin-top: var(--space-6); color: var(--color-gray9);}
.work-add-modal .work-add-item-desc {margin-top: var(--space-4); color: var(--color-gray8);}
.work-add-modal .work-add-cost {display: flex; flex-direction: column; row-gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-bg2);}
.work-add-modal .work-add-cost > div {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12);}
.work-add-modal .work-add-cost dt {color: var(--color-gray7);}
.work-add-modal .work-add-cost dd {color: var(--color-gray9);}
.work-add-modal .work-add-note {margin-top: var(--space-12); color: var(--color-gray6);}

.work-bottom-btn {padding-top: var(--space-12);}

/* 케어 리포트 */
.report-head {padding-block: var(--space-24) var(--space-24); color: var(--color-gray7);}
.report-head .report-tit {margin-block: var(--space-12) var(--space-4); color: var(--color-gray9);}
.report-section {padding-block: var(--space-24) var(--space-32); border-top: 8px solid var(--color-gray2);}
.report-section .report-section-tit {margin-bottom: var(--space-16); color: var(--color-gray9);}
.report-info {row-gap: var(--space-12);}
.report-info dt {color: var(--color-gray7);}
.report-info-last {margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-border);}
.report-block {margin-top: var(--space-32);}
.report-block + .report-block {margin-top: var(--space-40);}
.report-section:has(+ .report-bottom-btn) {padding-bottom: var(--space-20);}
.report-bottom-btn {padding-top: 0;}

/* 시공 전후 비교 */
.compare-box {--skew: 21%; position: relative; aspect-ratio: 365 / 200; border-radius: var(--radius-small); overflow: hidden; background-color: var(--color-gray2); touch-action: pan-y; user-select: none;}
.compare-box img {width: 100%; height: 100%; object-fit: cover;}
.compare-box .compare-before {position: absolute; inset: 0; clip-path: polygon(0 0, calc(var(--pos) - var(--skew)) 0, calc(var(--pos) + var(--skew)) 100%, 0 100%);}
.compare-box .compare-line {position: absolute; top: 50%; left: var(--pos); width: 1px; height: 130%; background-color: var(--color-white); transform: translate(-50%, -50%) rotate(-37.5deg); pointer-events: none;}
.compare-box .compare-handle {position: absolute; top: 50%; left: var(--pos); display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; background-color: var(--color-white); color: var(--color-static1); line-height: 1; box-shadow: var(--shadow); transform: translate(-50%, -50%); pointer-events: none;}
.compare-box .compare-label {position: absolute; bottom: var(--space-10); display: inline-flex; align-items: center; height: 24px; padding-inline: var(--space-10); border-radius: 999px; background-color: rgb(var(--rgb-black) / 0.6); color: var(--color-white); pointer-events: none;}
.compare-box .compare-label.before {left: var(--space-10);}
.compare-box .compare-label.after {right: var(--space-10);}
/* 비교 range */
.compare-box .compare-range {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;}
.compare-box:has(.compare-range:focus-visible) {outline: 2px solid var(--color-static1); outline-offset: 2px;}

/* 시공 상세내역 */
.report-items {padding: var(--space-20); border: 1px solid var(--color-gray3); border-radius: var(--radius-small);}
.report-items li {display: flex; align-items: center; column-gap: var(--space-8); min-height: 36px;}
.report-items li + li {margin-top: var(--space-12);}
.report-items .report-item-ico {flex: none; display: flex; width: 24px; height: 24px; color: var(--color-static1);}
.report-items li:not(.done) .report-item-ico::before {content: ''; width: 20px; height: 20px; margin: 2px; border: 2px solid var(--color-gray6); border-radius: 50%;}
.report-items .report-item-name {flex: 1 1 auto; min-width: 0; color: var(--color-gray6);}
.report-items li.done .report-item-name {color: var(--color-gray9);}
.report-items .report-item-state {flex: none; color: var(--color-gray6);}
.report-more-btn {display: flex; align-items: center; justify-content: center; column-gap: var(--space-4); width: 100%; min-height: 40px; margin-top: var(--space-4); color: var(--color-gray6);}

/* 관리 메모 */
.report-memo {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); margin-top: var(--space-14); padding: var(--space-20); border: 1px solid var(--color-gray3); border-radius: var(--radius-small); background-color: var(--color-white); color: var(--color-gray8);}
.report-memo > .ico {flex: none; color: var(--color-gray6);}
.report-memo .report-memo-txt {display: flex; flex-direction: column; row-gap: var(--space-6); min-width: 0;}
.report-memo .report-memo-tit {display: flex; align-items: center; column-gap: var(--space-6); color: var(--color-static1);}

/* 결제 내역 */
.pay-card {padding-bottom: var(--space-20);}
.pay-card .history-card-head {color: var(--color-gray8);}
.pay-card .pay-amount {margin-top: var(--space-10); color: var(--color-gray9);}
.pay-card .pay-item {color: var(--color-gray7);}
.pay-card .pay-info {row-gap: 2px; margin-top: var(--space-14); padding-top: var(--space-14); border-top: 1px solid var(--color-border);}
.pay-card .pay-info dt {color: var(--color-gray7);}
.pay-card .square-btn {margin-top: var(--space-16);}
.pay-card .square-btn .ico {width: 18px; height: 18px;}

@media (hover: hover) {
    .my-menu a:hover > .body-medium {color: var(--color-static1);}
    .report-more-btn:hover {color: var(--color-static1);}
    .report-memo:hover .report-memo-tit {text-decoration: underline; text-underline-offset: 3px;}
}

/* 회원정보 관리 */
.account-section {padding-block: var(--space-24) var(--space-32);}
.account-section + .account-section {border-top: 8px solid var(--color-gray2);}
.account-section .account-tit {margin-bottom: var(--space-20); color: var(--color-gray9);}
.account-section .input-item + .input-item {margin-top: var(--space-20);}
.account-section .check-item label {color: var(--color-gray9);}
.account-section .info-msg {margin-top: calc(var(--space-4) * -1);}
.account-section .account-desc {color: var(--color-gray6);}
.account-section .account-note {margin-top: var(--space-16); color: var(--color-gray6);}
.account-tel-btn {align-self: flex-end; min-height: 32px; margin-top: calc(var(--space-4) * -1); color: var(--color-gray9);}
.account-tit + .account-agree {margin-top: calc(var(--space-8) * -1);}
.account-agree .account-desc {margin-top: 2px;}
.account-fields {margin-top: var(--space-32); transition: opacity 0.2s;}
.account-fields:disabled {opacity: 0.5;}
.account-fields:disabled .custom-input {background-color: var(--color-white); color: var(--color-gray8);}
.account-cash-desc {margin-top: calc(var(--space-12) * -1); margin-bottom: var(--space-24);}
.account-cash-fields {margin-top: var(--space-20);}
.account-cash-fields .input-item .check-item {margin-top: var(--space-4);}
.account-cash-agree {margin-top: var(--space-8);}
.account-cash-agree + .account-note {margin-top: var(--space-4);}
.account-menu {padding-top: var(--space-16); border-top: 8px solid var(--color-gray2);}
.account-menu a {color: var(--color-gray9);}
.account-submit {padding-bottom: var(--space-40);}

/* 회원 탈퇴 */
.withdraw-page {display: flex; flex-direction: column;}
.withdraw-page .withdraw-form {display: flex; flex: 1 0 auto; flex-direction: column;}
.withdraw-body {padding-block: var(--space-32) var(--space-40);}
.withdraw-body .withdraw-tit {color: var(--color-gray9);}
.withdraw-point {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16); margin-top: var(--space-32); padding: var(--space-20) var(--space-16); border: 1px solid var(--color-gray3); border-radius: var(--radius-small);}
.withdraw-point dt {color: var(--color-gray8);}
.withdraw-body .withdraw-note {margin-top: var(--space-16); color: var(--color-gray6);}
.withdraw-bottom .info-box {column-gap: var(--space-12);}
.withdraw-bottom .info-box .ico {width: 16px; height: 16px; margin-top: 2px;}
.withdraw-bottom .info-box {padding-inline: var(--space-16) var(--space-20); color: var(--color-gray7);}
.withdraw-bottom .check-item {margin-block: var(--space-8) var(--space-16); padding-left: 3px;}
.withdraw-bottom .check-item label {color: var(--color-gray9);}

/* 후기 작성 */
.review-write-section {padding-block: var(--space-32);}
.review-write-section + .review-write-section {border-top: 8px solid var(--color-gray2);}
.review-write-section:last-child {padding-bottom: var(--space-40);}
.review-write-section .review-write-tit {color: var(--color-gray9);}
.review-write-section .review-write-desc {margin-top: var(--space-4); color: var(--color-gray6);}
.review-write-section .review-cc-tit {color: var(--color-gray9);}
.review-label {display: block; margin-bottom: var(--space-12); color: var(--color-gray9);}
.review-visit {margin-top: var(--space-32);}
.review-naver {margin-top: var(--space-20); padding: var(--space-24) var(--space-16) var(--space-20); border: 1px solid var(--color-gray3); border-radius: var(--radius-small);}
.review-naver .review-naver-tit {color: var(--color-gray9);}
.review-naver .review-naver-desc {color: var(--color-gray8);}
.review-naver .square-btn {margin-top: var(--space-16);}
.review-naver .square-btn .ico {width: 18px; height: 18px;}
.review-naver .review-naver-note {margin-top: var(--space-16); color: var(--color-gray6);}
.review-field {min-width: 0; margin-top: var(--space-32);}
.review-rate {display: flex; column-gap: 0;}
.review-rate-star {display: flex; align-items: center; justify-content: center; width: 36px; height: var(--size-44); color: var(--color-gray3); cursor: pointer;}
.review-rate-star .ico {width: 34px; height: 34px;}
.review-rate-star.on {color: var(--color-static1);}
.review-rate-star:has(input:focus-visible) {outline: 2px solid var(--color-static1); outline-offset: 2px; border-radius: var(--radius-small);}
.review-tags .check-card:has(input:checked) {border-color: var(--color-static1); background-color: var(--color-static3);}
.review-text {min-height: 80px;}
.review-photo-info {margin-top: var(--space-12); color: var(--color-gray6);}
.review-public {margin-top: var(--space-16);}
.review-public .check-item label {color: var(--color-gray9);}
.review-public .review-public-desc {color: var(--color-gray6);}
.review-submit {margin-top: var(--space-24);}

/* 후기 내역 */
.my-review .my-review-tool {padding-block: var(--space-16) var(--space-6);}
.my-review .review-list {padding-bottom: var(--space-40);}
.my-review-item {padding-top: var(--space-20);}
.my-review-head {display: flex; align-items: flex-start; column-gap: var(--space-16);}
.my-review-head .my-review-thumb {flex: none; width: 52px; height: 52px; border-radius: var(--radius-small); background-color: var(--color-gray2);}
.my-review-head .my-review-info {flex: 1 1 auto; min-width: 0; padding-top: var(--space-4);}
.my-review-head .my-review-course {color: var(--color-gray9);}
.my-review-head .my-review-meta {margin-top: 2px; color: var(--color-gray7);}
.my-review-stars {margin-top: var(--space-14);}
.my-review-stars .ico {width: 20px; height: 20px;}
.my-review-item .review-tit {margin-top: var(--space-12);}
/* 더보기 메뉴 */
.more-menu {position: relative; flex: none; margin: -6px -12px 0 0;}
.more-menu-btn .ico {color: var(--color-gray7);}
.more-menu-list {position: absolute; top: calc(100% - 4px); right: 12px; z-index: 10; min-width: 160px; padding-block: var(--space-4); border-radius: var(--radius-small); background-color: var(--color-white); box-shadow: 0 4px 16px rgb(var(--rgb-black) / 0.12);}
.more-menu-list li + li {border-top: 1px solid var(--color-border);}
.more-menu-item {display: flex; align-items: center; column-gap: var(--space-10); width: 100%; min-height: var(--size-48); padding-inline: var(--space-16); color: var(--color-gray9); text-align: left;}
.more-menu-item .ico {flex: none; color: var(--color-gray7);}

/* 상담 문의 내역 */
.inquiry-page {display: flex; flex-direction: column;}
.inquiry-tool {display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-16) var(--space-6); color: var(--color-gray8);}
.inquiry-list > li + li {border-top: 1px solid var(--color-border);}
.inquiry-item {display: flex; align-items: center; column-gap: var(--space-8); padding-block: var(--space-16);}
.inquiry-item .inquiry-txt {display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0;}
.inquiry-item .inquiry-tit {color: var(--color-gray9);}
.inquiry-item .inquiry-meta {color: var(--color-gray6);}
.inquiry-item > .ico {flex: none; color: var(--color-gray7);}

/* 상담 문의 상세 */
.inquiry-view-head {padding-block: var(--space-32) var(--space-24);}
.inquiry-view-head .inquiry-view-tit {margin-top: var(--space-12); color: var(--color-gray9);}
.inquiry-view-head .inquiry-view-no {margin-top: var(--space-4); color: var(--color-gray6);}
.inquiry-view-section {padding-block: var(--space-32); border-top: 8px solid var(--color-gray2);}
.inquiry-view-section:last-child {padding-bottom: var(--space-40);}
.inquiry-view-section .inquiry-view-sub {margin-bottom: var(--space-16); color: var(--color-gray9);}
.inquiry-info {row-gap: var(--space-8);}
.inquiry-info dt {color: var(--color-gray7);}
.inquiry-info dd {max-width: 66%; color: var(--color-gray9);}
.inquiry-answer {color: var(--color-gray8);}
.inquiry-answer-box {padding: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-bg2);}
.inquiry-answer-box .inquiry-answer {color: var(--color-gray9);}
.inquiry-more-btn {margin-top: var(--space-24);}
.inquiry-more-btn .ico {width: 20px; height: 20px;}

/* 방문 문의 내역 */
.visit-item {position: relative; padding-block: var(--space-16) var(--space-20);}
/* 항목 전체 클릭 */
.visit-item .visit-head::after {content: ''; position: absolute; inset: 0; z-index: 1;}
.visit-item .visit-head:focus-visible {outline: none;}
.visit-item .visit-head:focus-visible::after {outline: 2px solid var(--color-static1); outline-offset: -2px;}
.visit-item .review-more-btn {z-index: 2;}
.visit-item .visit-head {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-12);}
.visit-item .inquiry-meta {color: var(--color-gray6);}
.visit-txt-wrap {margin-top: var(--space-12);}
.visit-txt-wrap .review-txt {-webkit-line-clamp: 2;}

/* 방문 관련 문의 */
.visit-write {display: flex; flex-direction: column;}
.visit-form {display: flex; flex: 1 0 auto; flex-direction: column;}
.visit-body {padding-block: var(--space-32) var(--space-40);}
.visit-body .visit-tit {color: var(--color-gray9);}
.visit-body .visit-desc {margin-top: var(--space-4); margin-bottom: var(--space-32); color: var(--color-gray6);}
.visit-body .input-item + .input-item {margin-top: var(--space-24);}
.visit-body .custom-textarea {min-height: 120px;}
.visit-photo {min-width: 0; margin-top: var(--space-24);}
.visit-photo .input-item-label {display: block; margin-bottom: var(--space-8);}
.visit-photo-info {margin-top: var(--space-16); color: var(--color-gray6);}

/* 일반 문의 */
.qna-agree {margin-top: var(--space-20); padding-left: 3px;}
.qna-agree label {color: var(--color-gray9);}

/* 알림 설정 */
.alarm-list {padding-top: var(--space-16);}
.alarm-list > li + li {border-top: 1px solid var(--color-border);}
.alarm-item {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16); padding-block: var(--space-16);}
.alarm-item .alarm-txt {display: flex; flex-direction: column; row-gap: var(--space-4); min-width: 0; cursor: pointer;}
.alarm-item .alarm-tit {color: var(--color-gray9);}
.alarm-item .alarm-desc {color: var(--color-gray7);}