@charset "utf-8";
.car-page .car-page-tit {padding-block: var(--space-24) var(--space-20); color: var(--color-gray9);}

/* 차량 카드 */
.car-main-area {padding-inline: var(--gutter);}
.car-main-area.swiper {margin-top: -10px; padding: 10px 0 0;}
.car-main-area.swiper .swiper-wrapper {padding-bottom: var(--space-20);}
.car-main-area.swiper .swiper-slide {width: calc(100% - var(--gutter) * 2 - var(--space-24)); height: auto;}
.car-main-area .swiper-pagination {position: static; display: flex; justify-content: center; column-gap: var(--space-8); margin-top: -4px; line-height: 0;}
.car-main-area .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 !important; background-color: var(--color-gray4); opacity: 1;}
.car-main-area .swiper-pagination-bullet-active {background-color: var(--color-static2);}
.car-main-card {display: flex; flex-direction: column; height: 100%; padding: var(--space-24) var(--space-24) var(--space-20); border-radius: var(--radius); background: linear-gradient(180deg, var(--color-gray3) 0%, var(--color-gray2) 100%); box-shadow: var(--shadow);}
.car-main-card .car-main-head {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-8);}
.car-main-card .car-main-name {color: var(--color-gray9);}
.car-main-card .car-main-num {color: var(--color-gray8);}
.car-main-card .car-main-head .txt-btn {min-height: 32px; margin-top: -4px; margin-right: -4px; white-space: nowrap;}
.car-main-card .car-main-img {width: 100%; max-width: 420px; margin: var(--space-16) auto var(--space-20); aspect-ratio: 620 / 280;}
.car-main-card .car-main-img img {width: 100%; height: 100%; object-fit: contain;}
.car-main-card .car-main-spec {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto;}
.car-main-card .car-main-spec > div {position: relative; display: flex; flex-direction: column; row-gap: 2px; padding-left: var(--space-16);}
.car-main-card .car-main-spec > div:first-child {padding-left: 0;}
.car-main-card .car-main-spec > div + div::before {content: ''; position: absolute; top: 2px; bottom: 2px; left: 0; width: 1px; background-color: var(--color-gray4);}
.car-main-card .car-main-spec dt {color: var(--color-gray7);}
.car-main-card .car-main-spec dd {color: var(--color-gray9);}

/* 다음 관리 안내 */
.next-care-banner {display: flex; align-items: center; column-gap: var(--space-16); margin-top: var(--space-30); padding: var(--space-24) var(--space-20); border-radius: var(--radius-small); background-color: var(--color-static1); color: var(--color-white); transition: background-color 0.2s;}
.next-care-banner .next-care-txt {display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0;}

/* 최근 관리 이력 */
.care-card {padding: var(--space-16);}
.care-card .care-card-head {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-8); color: var(--color-gray8);}
.care-card .care-card-program {margin-top: var(--space-6); color: var(--color-gray9);}
.care-card .care-card-store {color: var(--color-gray8);}
.care-photo {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-16);}
.care-photo li {position: relative; aspect-ratio: 161 / 100; border-radius: var(--radius-small); overflow: hidden; background-color: var(--color-gray2);}
.care-photo img {width: 100%; height: 100%; object-fit: cover;}
.care-photo span {position: absolute; inset: auto 0 0; padding: var(--space-16) var(--space-10) var(--space-6); background: linear-gradient(0deg, rgb(var(--rgb-black) / 0.5) 0%, rgb(var(--rgb-black) / 0) 100%); color: var(--color-white);}

/* 관리 메모 */
.care-memo {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); margin-top: var(--space-20); padding: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-bg2); color: var(--color-gray7);}
.care-memo .care-memo-txt {display: flex; flex-direction: column; row-gap: var(--space-4); min-width: 0;}
.care-memo .care-memo-tit {display: flex; align-items: center; column-gap: var(--space-6); color: var(--color-static1);}

/* 차량 정보 등록 · 수정 */
.car-register {display: flex; flex-direction: column;}
.car-register .car-form {display: flex; flex: 1 0 auto; flex-direction: column;}
.car-section {padding-block: var(--space-24) var(--space-32);}
.car-section + .car-section {border-top: 8px solid var(--color-gray2);}
.car-section .car-section-tit {margin-bottom: var(--space-20); color: var(--color-gray9);}
.car-section .input-item + .input-item {margin-top: var(--space-20);}
.car-section .input-item .check-item {margin-top: var(--space-4);}
.car-section .check-item label {color: var(--color-gray9);}
.car-section .car-new-info {margin-top: var(--space-8); color: var(--color-gray6);}
.car-section .car-field {min-width: 0;}
.car-section .car-field + .car-field {margin-top: var(--space-24);}
.car-section .car-sub-tit {display: block; margin-bottom: var(--space-12); color: var(--color-gray9);}
.car-section .car-agree-desc {margin-top: var(--space-8); color: var(--color-gray6);}
.car-section .info-msg {margin-top: calc(var(--space-4) * -1);}
.car-section .car-care-note {margin-top: var(--space-12); color: var(--color-gray6);}
/* 선택정보 */
.car-pref-fields {margin-top: var(--space-32); transition: opacity 0.2s;}
.car-pref-fields .input-item + .car-field, .car-pref-fields .car-field + .car-field {margin-top: var(--space-32);}
.car-pref-fields:disabled {opacity: 0.5;}
.car-pref-fields:disabled .custom-input, .car-pref-fields:disabled .custom-select {background-color: var(--color-white); color: var(--color-gray8);}
.car-pref-fields:disabled .custom-checkbox {border-color: var(--color-gray3); background-color: var(--color-white);}
.car-pref-fields:disabled .check-card {color: var(--color-gray9);}
.car-confirm {padding-block: var(--space-24) var(--space-8); border-top: 8px solid var(--color-gray2);}
.car-confirm .check-item {margin-top: var(--space-20);}
.car-confirm .check-item label {color: var(--color-gray9);}
.car-register .car-submit {position: static;}

/* 내 차 관리 메모 */
.car-memo {display: flex; flex-direction: column;}
.car-memo .car-memo-form {display: flex; flex: 1 0 auto; flex-direction: column;}
.car-memo .car-memo-body {padding-bottom: var(--space-32);}
.car-memo .car-memo-tit {padding-block: var(--space-16) var(--space-20); color: var(--color-gray9);}
.car-memo .input-item + .input-item {margin-top: var(--space-20);}
.car-memo .custom-textarea {min-height: 120px;}

@media (hover: hover) {
    .next-care-banner:hover {background-color: var(--color-static2);}
    .care-memo:hover .care-memo-tit {text-decoration: underline; text-underline-offset: 3px;}
}

/* 차량 선택 · 변경 */
.car-select {display: flex; flex-direction: column;}
.car-select .car-select-head {padding-block: var(--space-32) var(--space-40);}
.car-select .car-select-tit {color: var(--color-gray9);}
.car-select .car-select-desc {margin-top: var(--space-8); color: var(--color-gray6);}
.car-select .car-select-list-tit {margin-bottom: var(--space-20); color: var(--color-gray9);}
.car-select .car-select-list {display: flex; flex-direction: column; row-gap: var(--space-12); padding-bottom: var(--space-40);}
.car-select .car-select-empty {padding-bottom: var(--space-40);}
.car-select .car-card {padding-right: var(--space-16);}

/* 차량번호로 등록 */
.car-reg {padding-bottom: var(--space-40);}
.car-reg .car-reg-head {padding-top: var(--space-32);}
.car-reg .car-reg-tit {color: var(--color-gray9);}
.car-reg .car-reg-desc {margin-top: var(--space-8); color: var(--color-gray6);}
.car-reg .num-step {margin-top: var(--space-32);}
.car-reg .car-reg-sub-tit {margin-bottom: var(--space-20); color: var(--color-gray9);}
/* 조회 */
.car-reg-form {padding-top: var(--space-40);}
.car-reg-form .input-item + .input-item {margin-top: var(--space-24);}
.car-reg-form .info-msg, .car-reg-form .error-msg {margin-top: calc(var(--space-4) * -1);}
.car-reg-agree {margin-top: var(--space-32);}
.car-reg-agree .check-item {align-items: flex-start; column-gap: var(--space-12);}
.car-reg-agree .check-item .custom-checkbox {margin-top: 3px;}
.car-reg-agree .check-item label {color: var(--color-gray8);}
.car-reg-notice {margin-top: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-bg2);}
.car-reg-notice .car-reg-notice-btn {display: flex; align-items: center; column-gap: var(--space-12); width: 100%; min-height: var(--size-56); padding-inline: var(--space-20); color: var(--color-gray9); text-align: left;}
.car-reg-notice .car-reg-notice-btn .ico {color: var(--color-static1);}
.car-reg-notice .car-reg-notice-panel {display: flex; flex-direction: column; row-gap: 1.5em; padding: 0 var(--space-16) var(--space-20); color: var(--color-gray7);}
.car-reg-notice .car-reg-notice-panel[hidden] {display: none;}
.car-reg-btns {display: flex; flex-direction: column; align-items: center; row-gap: var(--space-4); margin-top: var(--space-30);}
.car-reg-btns .square-btn .ico {width: 20px; height: 20px;}
.car-reg-btns .txt-btn {margin-top: var(--space-12); color: var(--color-gray9);}
.car-reg-btns .txt-btn .ico {width: 20px; height: 20px; color: var(--color-gray7);}
.car-reg-btns .car-reg-btns-note {color: var(--color-gray6); text-align: center;}

/* 정보 확인 */
.car-reg-confirm {background-color: var(--color-gray1);}
.car-reg-found {padding-top: var(--space-40);}
.car-found .car-found-name {padding-inline: var(--space-12); color: var(--color-gray9);}
.car-found .car-found-img {width: 70%; max-width: 360px; margin: var(--space-24) auto 0; aspect-ratio: 620 / 280;}
.car-found .car-found-img img {width: 100%; height: 100%; object-fit: contain;}
.car-found .car-found-img-note {margin-top: var(--space-20); color: var(--color-gray6); text-align: center;}
.car-found .car-found-spec {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); margin-top: var(--space-24);}
.car-found .car-found-spec > div {padding: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-white);}
.car-found .car-found-spec dt {color: var(--color-gray7);}
.car-found .car-found-spec dd {margin-top: var(--space-4); color: var(--color-gray9);}
.car-found .car-found-note {margin-top: var(--space-16); color: var(--color-gray6);}
.car-found .car-found-edit {column-gap: var(--space-8); margin-top: var(--space-8); color: var(--color-gray9);}
.car-found .car-found-edit .ico {width: 20px; height: 20px; color: var(--color-static1);}
.car-found-price {margin-top: var(--space-32);}
.car-found-price .car-reg-sub-tit {margin-bottom: var(--space-16);}
.car-price-box {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-static3);}
.car-price-box > div {position: relative; padding-inline: var(--space-16);}
.car-price-box > div + div::before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--color-gray4);}
.car-price-box dt {color: var(--color-gray8);}
.car-price-box dd {margin-top: var(--space-4); color: var(--color-gray9);}
.car-found-price .car-price-note {margin-top: var(--space-8); color: var(--color-gray6); text-align: right;}
.car-save-info {margin-top: var(--space-24); padding: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-bg2); color: var(--color-gray7);}
.car-save-info .car-save-info-tit {margin-bottom: var(--space-8); color: var(--color-gray9);}
.car-reg-check {margin-top: var(--space-16);}
.car-reg-check label {color: var(--color-gray8);}
.car-reg-found .car-reg-btns {margin-top: var(--space-16);}

/* 등록 완료 */
.car-done-head {display: flex; flex-direction: column; align-items: center; padding-block: var(--space-48) var(--space-40); text-align: center;}
.car-done-head > .ico {width: 40px; height: 40px; color: var(--color-static1);}
.car-done-head .car-done-tit {margin-top: var(--space-20); color: var(--color-gray9);}
.car-done-head .car-done-desc {margin-top: var(--space-4); color: var(--color-gray6);}
.car-done-info {padding-top: var(--space-40); border-top: 8px solid var(--color-gray2);}
.car-done-info .car-done-img {width: 70%; max-width: 360px; margin: var(--space-24) auto 0; aspect-ratio: 620 / 280;}
.car-done-info .car-done-img img {width: 100%; height: 100%; object-fit: contain;}
.car-done-info .car-done-img-note {margin-top: var(--space-24); color: var(--color-gray6); text-align: center;}
.car-done-card {margin-top: var(--space-24); padding: var(--space-20);}
.car-done-card .car-done-name {color: var(--color-gray9);}
.car-done-card .car-done-spec {margin-top: 2px; color: var(--color-gray6);}
.car-done-card .car-done-sep {margin-inline: var(--space-6);}
.car-done-card .car-done-pref {margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-border); color: var(--color-gray6);}
.car-done-info .car-done-note {margin-top: var(--space-16); color: var(--color-gray8);}
.car-done-info .car-done-btns {margin-top: var(--space-30);}
.car-done-info .car-done-btns .ico {width: 20px; height: 20px;}

@media (hover: hover) {
    .car-reg-notice .car-reg-notice-btn:hover {color: var(--color-static1);}
}

/* 차량명으로 등록 */
.car-reg-name {padding-bottom: 0;}
.car-reg-name .car-reg-head {padding-bottom: var(--space-8);}