@charset "utf-8";
/* 프로그램 */

/* 상단 타이틀 + 기준 뱃지 (온라인 할인패키지 · 세차 회원권 공통) */
.membership-section .program-head, .package-section .program-head {display: flex; align-items: flex-end; justify-content: space-between; column-gap: var(--space-24);}
.membership-section .program-head .sub-section-tit-wrap .body-small, .package-section .program-head .sub-section-tit-wrap .body-small {margin-top: var(--space-12); color: var(--color-font3);}
.membership-section .program-head .badge, .package-section .program-head .badge {flex: none; height: auto; min-height: 36px; padding-inline: var(--space-12); font-weight: 500; background-color: var(--section-bg1); color: var(--color-font3);}

/* 프로그램 안내 */
.program-page, .price-page {padding-bottom: var(--space-100);}
.program-intro-section {padding-top: var(--space-100);}
.program-intro-section .program-intro-wrap {display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 860fr); align-items: start; column-gap: 100px;}
.program-intro-section .program-intro-txt .sub-section-tit {color: var(--color-font1);}
.program-intro-section .program-intro-txt .body-small {margin-top: var(--space-12); color: var(--color-font3);}
.program-intro-section .program-intro-txt .btn-list {column-gap: var(--space-20); margin-top: var(--space-24);}
.program-intro-section .program-intro-img {position: relative; overflow: hidden; border-radius: 16px; background-color: var(--section-bg1);}
.program-intro-section .program-intro-img > img {width: 100%; aspect-ratio: 860 / 420; object-fit: cover;}
.program-intro-section .program-intro-badge {position: absolute; left: var(--space-30); bottom: var(--space-30); display: flex; align-items: center; column-gap: 12px; padding: 12px var(--space-20) 12px var(--space-16); border-radius: var(--radius); background-color: var(--color-white); box-shadow: var(--box-shadow);}
.program-intro-section .program-intro-badge .ico {flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--section-bg1);}
.program-intro-section .program-intro-badge .ico img {width: 28px; height: 28px;}
.program-intro-section .program-intro-badge .txt {color: var(--color-font3);}
.program-intro-section .program-intro-badge strong {display: block; font-weight: 600; color: var(--color-font1);}

.program-list-section {padding-top: var(--space-100);}
.program-list-section .sub-section-tit-wrap .body-small {margin-top: var(--space-12); color: var(--color-font3);}
.program-list-section .program-card-list, .price-result-section .program-card-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-30) 20px; margin-top: var(--space-50);}
.program-list-section .program-item, .price-result-section .program-item {display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--color-border1); border-radius: 16px; background-color: var(--color-white);}
.program-list-section .program-item .img-wrap, .price-result-section .program-item .img-wrap {aspect-ratio: 364 / 260; overflow: hidden; background-color: var(--section-bg1);}
.program-list-section .program-item .img-wrap img, .price-result-section .program-item .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.program-list-section .program-item .txt-wrap, .price-result-section .program-item .txt-wrap {display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; padding: var(--space-24) var(--space-24) var(--space-30);}
.program-list-section .program-item .tit-wrap, .price-result-section .program-item .tit-wrap {display: flex; align-items: center; column-gap: 8px;}
.program-list-section .program-item .tit-wrap .card-tit, .price-result-section .program-item .tit-wrap .card-tit {color: var(--color-font1);}
.program-list-section .program-item-desc, .price-result-section .program-item-desc {margin-top: 8px; color: var(--color-font3);}
.program-list-section .program-item-tag, .price-result-section .program-item-tag {margin-top: auto; padding-top: var(--space-16);}   /* 설명 길이 달라도 태그 · 가격 · 버튼 줄 맞춤 */
.program-list-section .program-item-tag .badge, .price-result-section .program-item-tag .badge {height: auto; min-height: 30px; padding-inline: var(--space-12); font-weight: 500;}
.program-list-section .program-item-price, .price-result-section .program-item-price {margin-top: var(--space-16); color: var(--color-static2);}
.program-list-section .program-item .square-btn, .price-result-section .program-item .square-btn {margin-top: var(--space-20);}

/* 프로그램 상세 (view.php) - 서브 비주얼 없이 시작 */
.program-view-page {padding-bottom: var(--space-100);}
.program-view-hero {padding-block: var(--space-80) var(--space-100);}
.program-view-hero .program-view-hero-wrap {display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 680px); justify-content: space-between; align-items: start; column-gap: var(--space-60);}
.program-view-hero .program-view-tit {color: var(--color-font1);}   /* 크기는 .hero-tit */
.program-view-hero .program-view-txt > .body-small {margin-top: var(--space-20); color: var(--color-font3);}
.program-view-hero .program-view-info {display: flex; margin-top: var(--space-20);}
.program-view-hero .program-view-info > div {flex: 1 1 0;}
.program-view-hero .program-view-info > div + div {padding-left: var(--space-20); border-left: 1px solid var(--color-border2);}
.program-view-hero .program-view-info dt {color: var(--color-font3);}
.program-view-hero .program-view-info dd {margin-top: 6px; font-weight: 500; color: var(--color-font1);}
.program-view-hero .program-view-info small {display: block; color: var(--color-font3);}
.program-view-hero .program-view-work {margin-top: var(--space-20);}
.program-view-hero .program-view-work h2 {font-weight: 600; color: var(--color-font1);}
.program-view-hero .program-view-work dl {display: flex; flex-direction: column; row-gap: var(--space-20); margin-top: var(--space-20);}
.program-view-hero .program-view-work dt {color: var(--color-static3);}
.program-view-hero .program-view-work dd {margin-top: 4px; color: var(--color-font2);}
.program-view-hero .program-view-btn {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-20);}
.program-view-hero .program-view-btn .square-btn {width: 100%;}
.program-view-hero .program-view-btn .square-btn:only-child {grid-column: 1 / -1;}
.program-view-hero .program-view-img {overflow: hidden; border-radius: 16px; background-color: var(--section-bg1);}
.program-view-hero .program-view-img img {width: 100%; aspect-ratio: 680 / 420; object-fit: cover;}
.program-view-hero .program-view-back {display: flex; justify-content: center; margin-top: var(--space-40);}

/* 펼침 박스 - details.program-acc > summary + .program-acc-body
 * - PC : 내용은 버튼 아래로 떠서 펼쳐짐 (absolute - 주변 레이아웃 그대로) · 바깥 클릭 · Esc 로 닫힘
 * - 768 이하 : 모달 (js/program.js) */
.program-price-section .program-acc, .program-view-hero .program-acc {position: relative; margin-top: var(--space-20); border: 1px solid var(--color-border1); border-radius: var(--radius); background-color: var(--color-white);}
.program-price-section .program-acc[open], .program-view-hero .program-acc[open] {z-index: 20; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 8px 24px rgb(var(--rgb-black) / 0.08);}
.program-price-section .program-acc-btn, .program-view-hero .program-acc-btn {display: flex; align-items: center; justify-content: space-between; column-gap: 12px; padding: var(--space-20) var(--space-24); font-weight: 600; color: var(--color-font1); cursor: pointer; list-style: none;}
.program-price-section .program-acc-btn::-webkit-details-marker, .program-view-hero .program-acc-btn::-webkit-details-marker {display: none;}
.program-price-section .program-acc-btn::after, .program-view-hero .program-acc-btn::after {content: ''; flex: none; width: 20px; height: 20px; background: url(../img/select-arrow.svg) center / contain no-repeat; transition: transform 0.4s var(--ease-out);}
.program-price-section .program-acc[open] .program-acc-btn::after, .program-view-hero .program-acc[open] .program-acc-btn::after {transform: rotate(180deg);}
.program-price-section .program-acc-btn:focus-visible, .program-view-hero .program-acc-btn:focus-visible {outline: 2px solid var(--color-static2); outline-offset: -2px; border-radius: var(--radius);}
.program-price-section .program-acc-body, .program-view-hero .program-acc-body {position: absolute; top: 100%; left: -1px; right: -1px; max-height: min(560px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-24) var(--space-24); border: 1px solid var(--color-border1); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background-color: var(--color-white); box-shadow: 0 16px 24px rgb(var(--rgb-black) / 0.08);}
.program-price-section .program-acc[open] .program-acc-body, .program-view-hero .program-acc[open] .program-acc-body {animation: accOpen 0.5s var(--ease-out) both;}
@keyframes accOpen {from {opacity: 0; transform: translateY(-8px);}}
.acc-modal .modal-inner {max-width: 560px; padding: var(--space-30) var(--space-20);}
.acc-modal .modal-tit {padding-right: 40px;}

/* 포함 공정 */
.program-acc-body .program-step-list li {display: flex; align-items: flex-start; column-gap: var(--space-16); padding-block: var(--space-20); border-bottom: 1px solid var(--color-border1);}
.program-acc-body .program-step-list li:first-child {padding-top: 4px;}
.program-acc-body .program-step-num {flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--section-bg3); color: var(--color-static2);}
.program-acc-body .program-step-list h3 {font-weight: 500; color: var(--color-font1);}
.program-acc-body .program-step-list p {margin-top: 10px; color: var(--color-font2);}
/* 공정 안내 · 공통 / 구성별 추가 공정 (패밀리 세이프) */
.program-acc-body .program-step-intro {margin-bottom: var(--space-16); padding: 12px var(--space-16); border-radius: 6px; background-color: var(--section-bg1); color: var(--color-font2);}
.program-acc-body .program-step-sub {padding-block: 4px 8px; font-weight: 600; color: var(--color-font1);}
.program-acc-body .program-step-variant {margin-top: var(--space-24);}
.program-acc-body .program-step-box {margin-top: 12px; padding: var(--space-16) var(--space-20); border: 1px solid var(--color-border1); border-radius: var(--radius);}
.program-acc-body .program-step-box-tit {font-weight: 600; color: var(--color-static3);}
.program-acc-body .program-step-box .program-step-list li:last-child {padding-bottom: 0; border-bottom: 0;}
.program-acc-body .program-step-list :is(h4, h5) {padding-top: 6px; font-weight: 500; color: var(--color-font1);}
.program-acc-body .program-step-exclude {margin-top: var(--space-16); padding: 12px var(--space-16); border-radius: 6px; background-color: var(--section-bg1); color: var(--color-font2);}
.program-acc-body .program-step-exclude strong {font-weight: 600;}

/* 예상 가격 계산 - 좌 선택 910 : 우 금액 467 */
.program-price-section {padding-block: var(--space-80); background-color: var(--section-bg1);}
.program-price-section .sub-section-tit-wrap .body-small {margin-top: var(--space-12); color: var(--color-font3);}
.program-price-section .program-price-box {display: grid; grid-template-columns: minmax(0, 910fr) minmax(0, 467fr); align-items: start; column-gap: var(--space-60); margin-top: var(--space-40); padding: var(--space-60) var(--space-40); border-radius: 20px; border: 1px solid var(--color-border1); background-color: var(--color-white);}
.program-price-section .program-price-item + .program-price-item {margin-top: var(--space-40);}
.program-price-section .program-price-label {display: flex; align-items: center; justify-content: space-between; column-gap: 12px; margin-bottom: 12px; font-weight: 600; color: var(--color-font1);}
.program-price-section p.program-price-label {justify-content: flex-start; column-gap: 8px; margin-bottom: 0;}
.program-price-section .program-price-sub {color: var(--color-font4);}
.program-price-section .program-price-link {display: inline-flex; align-items: center; column-gap: 2px; text-decoration: underline; text-underline-offset: 3px; color: var(--color-font1);}
.program-price-section .program-price-link img {width: 16px; height: 16px;}
.program-price-section .program-option-group {margin-top: var(--space-16);}
.program-price-section fieldset.program-price-item > legend {width: 100%; justify-content: flex-start; column-gap: 8px;}
.program-price-section .program-option-tit {margin-bottom: 8px; color: var(--color-font3);}
.program-price-section .program-price-form .program-acc {margin-top: var(--space-30);}
.program-acc-body .program-size-table {width: 100%; border-collapse: collapse; text-align: left;}   /* 크기는 .body-small */
.program-acc-body .program-size-table th {padding: 0 0 12px; border-bottom: 1px solid var(--color-border1); font-weight: 400; color: var(--color-font3);}
.program-acc-body .program-size-table td {padding: 10px 0 0; color: var(--color-font2);}
.program-acc-body .program-size-table:not(.multi) :is(th, td) {width: 40%;}
.program-acc-body .program-size-table:not(.multi) :is(th, td):last-child {width: 20%;}
.program-acc-body .program-size-table.multi :is(th, td) {padding-right: 12px; white-space: nowrap;}   /* 구성별 가격 열 여러 개 */
.program-acc-body .program-size-note {margin-top: var(--space-20); color: var(--color-font3);}

.program-price-section .program-price-summary {position: sticky; top: calc(var(--header-height) + var(--space-20)); padding: var(--space-40) var(--space-30); border-radius: 20px; background-color: var(--section-bg1);}
.program-price-section .program-summary-list {display: flex; flex-direction: column; row-gap: var(--space-14);}
.program-price-section .program-summary-list > div {display: flex; justify-content: space-between; column-gap: 12px;}
.program-price-section .program-summary-list dt {flex: none; color: var(--color-font3);}
.program-price-section .program-summary-list dd {font-weight: 500; color: var(--color-font1); text-align: right;}
.program-price-section .program-summary-list + .program-summary-list {margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border2);}
.program-price-section .program-summary-total {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: var(--space-20); padding-top: var(--space-24); border-top: 1px solid var(--color-border2);}
.program-price-section .program-summary-total .card-tit {color: var(--color-font1);}
.program-price-section .program-summary-price {display: flex; align-items: baseline; column-gap: 2px;}
.program-price-section .program-summary-price strong {color: var(--color-static2);}
.program-price-section .program-summary-price small {color: var(--color-font3);}
.program-price-section .program-summary-note {margin-top: var(--space-16); color: var(--color-font3);}
.program-price-section .program-price-summary .square-btn {margin-top: var(--space-24);}

/* 다른 프로그램 */
.program-other-section {padding-top: var(--space-100);}
.program-other-section .sub-section-tit {color: var(--color-font1);}
.program-other-section .program-other-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-30);}
.program-other-section .program-other-card {display: flex; flex-direction: column; height: 100%; padding: var(--space-30); border: 1px solid var(--color-border1); border-radius: 20px; background-color: var(--color-white); transition: border-color 0.2s;}
.program-other-section .program-other-head {display: flex; align-items: center; justify-content: space-between; column-gap: 12px;}
.program-other-section .program-other-head .tit-wrap {display: flex; align-items: center; column-gap: 8px;}
.program-other-section .program-other-head .card-tit {color: var(--color-font1);}
.program-other-section .program-other-more {flex: none; display: inline-flex; align-items: center; column-gap: 4px; color: var(--color-font2);}
.program-other-section .program-other-more img {width: 16px; height: 16px; transition: transform 0.3s var(--ease-out);}
.program-other-section .program-other-desc {margin-top: 12px; color: var(--color-font3);}
.program-other-section .program-other-card:focus-visible {outline: 2px solid var(--color-static2); outline-offset: 2px;}

/* 내 차 가격 찾기 */
/* 검색 박스 - 검색 + 추천 검색어 + 브랜드 */
.price-search-section {padding-top: var(--space-100);}
.price-search-section .sub-section-tit-wrap .body-small {margin-top: var(--space-12); color: var(--color-font3);}
.price-search-section .price-search {margin-top: var(--space-20); padding: var(--space-30); border-radius: 20px; background-color: var(--section-bg1);}
.price-search-section .price-search .search-input {border-color: var(--color-white);}
.price-search-section .price-search .search-input:focus {border-color: var(--color-static2);}
.price-search-section .price-keyword-list {display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-16);}
.price-search-section .price-keyword-list button {display: inline-flex; align-items: center; min-height: 36px; padding-inline: var(--space-14); border: 1px solid var(--color-border2); border-radius: 99px; background-color: var(--color-white); color: var(--color-font1); transition: border-color 0.2s, color 0.2s;}
.price-search-section .price-brand {width: 400px; max-width: 100%; margin-top: var(--space-30);}
.price-search-section .price-brand-label {display: block; margin-bottom: 12px; color: var(--color-font2);}
.price-search-section .price-brand .custom-dropdown-btn {border-color: var(--color-white);}
.price-search-section .price-brand .custom-dropdown-btn[aria-expanded="true"], .price-search-section .price-brand .custom-dropdown-btn:focus-visible {border-color: var(--color-static2);}

/* 안내 + 차량 가격 분류 안내 (모달 - program/price-class-modal.php) */
.price-search-section .price-list-top {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-24); margin-top: var(--space-30);}
.price-search-section .price-list-top > .body-small {color: var(--color-font3);}
.price-search-section .price-class-btn {flex: none; display: inline-flex; align-items: center; column-gap: 4px; min-height: 44px; font-weight: 500; color: var(--color-font1); text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s;}
.price-search-section .price-class-btn img {width: 16px; height: 16px;}
.price-search-section .price-class-btn:focus-visible {outline: 2px solid var(--color-static2); outline-offset: 2px;}

/* 차량 가격 분류 안내 모달 (내 차 가격 찾기 · 프로그램 상세 공통) - 크기 5개 가로 */
.price-class-modal .modal-inner {max-width: 1000px; padding: var(--space-30);}
.price-class-modal .modal-tit {margin-bottom: 0; padding-right: 40px; color: var(--color-font1);}
.price-class-modal .price-class-desc {margin-top: 8px; color: var(--color-font3);}
.price-class-modal .price-class-list {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-40);}
.price-class-modal .price-class-list > li {display: flex; flex-direction: column; row-gap: 8px; min-height: 122px; padding: var(--space-24) var(--space-16); border-radius: var(--radius); background-color: var(--section-bg1);}
.price-class-modal .price-class-size {font-weight: 500; color: var(--color-static2);}
.price-class-modal .price-class-body {font-weight: 500; color: var(--color-font1);}
.price-class-modal .price-class-note {margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border1); color: var(--color-font2);}

/* 차량 목록 - 사진 + 차명 · 분류 + 화살표 (선택 : 배경 · 체크) */
.price-search-section .price-car-list {display: flex; flex-direction: column; row-gap: var(--space-20); margin-top: var(--space-24);}
.price-search-section .price-car-list > li[hidden] {display: none;}
.price-search-section .price-car-btn {display: flex; align-items: center; column-gap: var(--space-40); width: 100%; padding: 16px var(--space-30); border: 1px solid var(--color-border1); border-radius: 16px; background-color: var(--color-white); text-align: left; transition: background-color 0.2s, border-color 0.2s;}
.price-search-section .price-car-btn .img-wrap, .price-result-section .price-selected .img-wrap {flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 12px; background-color: var(--color-white);}
.price-search-section .price-car-btn .img-wrap img, .price-result-section .price-selected .img-wrap img {width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;}
.price-search-section .price-car-txt {display: flex; flex: 1 1 auto; align-items: center; flex-wrap: wrap; gap: 4px var(--space-28); min-width: 0;}
.price-search-section .price-car-name {color: var(--color-font1);}
.price-search-section .price-car-class {color: var(--color-font3);}
.price-search-section .price-car-ico {flex: none; width: 20px; height: 20px; border-radius: 50%; background: url(../img/chevron-ico.svg) center / 20px no-repeat;}
.price-search-section .price-car-btn[aria-pressed="true"] {border-color: var(--section-bg3); background-color: var(--section-bg3);}
.price-search-section .price-car-btn[aria-pressed="true"] .price-car-ico {background: var(--color-static2) url(../img/check-ico-white.svg) center / 14px no-repeat;}
.price-search-section .price-car-btn:focus-visible {outline: 2px solid var(--color-static2); outline-offset: 2px;}

/* 선택 차량 + 프로그램 (차량 선택 후) */
.price-result-section {padding-top: var(--space-100);}
.price-result-section[hidden] {display: none;}
.price-result-section .price-selected {display: flex; align-items: center; column-gap: var(--space-40); padding: 16px var(--space-30); border: 1px solid var(--color-static4); border-radius: 16px; background-color: var(--section-bg3);}
.price-result-section .price-selected-txt {display: flex; flex: 1 1 auto; align-items: center; flex-wrap: wrap; gap: 4px var(--space-28); min-width: 0;}
.price-result-section .price-selected-txt .card-tit {color: var(--color-font1);}
.price-result-section .price-selected-txt .body-small {color: var(--color-font3);}
.price-result-section .price-selected .square-btn {flex: none; min-width: 136px;}
.price-result-section > .inner > .sub-section-tit {margin-top: var(--space-60); color: var(--color-font1);}
.price-result-section .program-card-list {margin-top: var(--space-30);}
.price-result-section .program-item {transition: background-color 0.2s, border-color 0.2s;}
.price-result-section .program-item:has(input:checked) {border-color: var(--color-static3); background-color: var(--section-bg3);}
.price-result-section .program-select-btn {cursor: pointer;}
.price-result-section .program-select-btn .check-ico {display: none; flex: none; width: 18px; height: 18px; border-radius: 50%; background-color: var(--color-white);}
.price-result-section .program-select-btn .check-ico::before {content: ''; display: block; width: 100%; height: 100%; background-color: var(--color-static2); -webkit-mask: url(../img/check-ico-white.svg) center / 12px no-repeat; mask: url(../img/check-ico-white.svg) center / 12px no-repeat;}
.price-result-section .program-select-btn:has(input:checked) .check-ico {display: block;}
.price-result-section .program-select-btn:has(input:focus-visible) {outline: 2px solid var(--color-static2); outline-offset: 2px;}

/* 예상 견적 결과 (프로그램 선택 후) - 좌 항목 910 : 우 금액 467 + 하단 안내 · 버튼 */
.price-result-section .price-estimate {margin-top: var(--space-60); padding: var(--space-30); border: 1px solid var(--color-border1); border-radius: 20px; background-color: var(--color-white);}
.price-result-section .price-estimate[hidden] {display: none;}
.price-result-section .price-estimate > .sub-section-tit {color: var(--color-font1);}
.price-result-section .price-estimate-wrap {display: grid; grid-template-columns: minmax(0, 910fr) minmax(0, 467fr); align-items: start; column-gap: var(--space-80); margin-top: var(--space-30);}
.price-result-section .price-estimate-list {display: flex; flex-direction: column; row-gap: var(--space-16);}
.price-result-section .price-estimate-list > div {display: flex; justify-content: space-between; column-gap: 12px;}
.price-result-section .price-estimate-list dt {flex: none; color: var(--color-font3);}
.price-result-section .price-estimate-list dd {font-weight: 500; color: var(--color-font1); text-align: right;}
.price-result-section .price-estimate-box {padding: var(--space-30); border-radius: 16px; background-color: var(--section-bg1);}
.price-result-section .price-estimate-total {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;}
.price-result-section .price-estimate-total .body-large {color: var(--color-font1);}
.price-result-section .price-estimate-price {display: flex; align-items: baseline; column-gap: 2px;}
.price-result-section .price-estimate-price strong {color: var(--color-static2);}
.price-result-section .price-estimate-price small {color: var(--color-font3);}
.price-result-section .price-estimate-note {margin-top: var(--space-20); color: var(--color-font3);}
.price-result-section .price-estimate-bottom {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-40); margin-top: var(--space-30); padding-top: var(--space-30); border-top: 1px solid var(--color-border1);}
.price-result-section .price-estimate-bottom > .body-small {color: var(--color-font2);}
.price-result-section .price-estimate-bottom .btn-list {flex: none; column-gap: var(--space-16);}

/* 온라인 할인패키지 */
.package-section {padding-block: var(--space-100);}
.package-section .package-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: var(--space-50);}
/* 카드 = 사진 + .txt-wrap(제목 · 가격 · 정보) - 4줄 subgrid 로 옆 카드와 줄 높이 맞춤 (제목 2줄이어도 가격 위치 같음) */
.package-section .package-list > li, .package-section .package-card {display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;}
.package-section .package-list > li {margin-bottom: var(--space-30);}
.package-section .package-card {overflow: hidden; border-radius: 16px; background-color: var(--color-white); box-shadow: 0 4px 16px rgb(var(--rgb-black) / 0.06);}
.package-section .package-card .img-wrap {aspect-ratio: 360 / 260; overflow: hidden; background-color: var(--section-bg1);}
.package-section .package-card .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.package-section .package-card .txt-wrap {display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-30); padding: var(--space-30);}
.package-section .package-tit-wrap .card-tit {margin-top: 12px; color: var(--color-font1);}
.package-section .package-price {display: flex; flex-direction: column;}
.package-section .package-price del {color: var(--color-font4);}
.package-section .package-price strong {color: var(--color-font1);}
.package-section .package-info {display: flex; flex-direction: column; row-gap: var(--space-16);}
.package-section .package-info dt {color: var(--color-font3);}
.package-section .package-info dd {margin-top: 4px; color: var(--color-font1);}
.package-section .package-note {margin-top: calc(var(--space-20) - var(--space-30)); color: var(--color-font3); text-align: right;}

.package-section .program-guide, .program-list-section .program-guide {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-40); margin-top: var(--space-60); padding: var(--space-40) var(--space-30); border-radius: 20px; background-color: var(--section-bg1);}
.package-section .program-guide .body-small, .program-list-section .program-guide .body-small {color: var(--color-font2);}
.package-section .program-guide .btn-list, .program-list-section .program-guide .btn-list {flex: none; column-gap: var(--space-30);}

/* 세차 회원권 */
.membership-page {padding-bottom: var(--space-100);}
.membership-section {padding-top: var(--space-100);}
.membership-section .membership-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-30) var(--space-30); margin-top: var(--space-40);}
.membership-section .membership-card {display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--space-30); border: 1px solid var(--color-border1); border-radius: 16px; background-color: var(--color-white); box-shadow: 0 4px 16px rgb(var(--rgb-black) / 0.04);}
.membership-section .membership-card .card-tit {margin-top: 12px; color: var(--color-font1);}
.membership-section .membership-price {margin-top: var(--space-30); color: var(--color-font1);}
.membership-section .membership-use {align-self: stretch; margin-top: var(--space-30); padding-top: var(--space-30); border-top: 1px solid var(--color-border1);}
.membership-section .membership-use-tit {font-weight: 600; color: var(--color-static2);}
.membership-section .membership-use ul {display: flex; flex-direction: column; row-gap: 6px; margin-top: 8px; color: var(--color-font1);}
.membership-section .membership-note {margin-top: var(--space-20); color: var(--color-font3);}
.membership-section .program-note {margin-top: var(--space-20); color: var(--color-font3); text-align: right;}

/* 추가 할인 쿠폰 - 좌 타이틀 : 우 표 1071 */
.membership-coupon-section {padding-top: var(--space-100);}
.membership-coupon-section .membership-coupon-wrap {display: grid; grid-template-columns: minmax(0, 349fr) minmax(0, 1071fr); align-items: start; column-gap: 100px;}
.membership-coupon-section .membership-coupon-head .section-tit {color: var(--color-font1);}
.membership-coupon-section .membership-coupon-head .body-small {margin-top: var(--space-20); color: var(--color-font3);}
.membership-coupon-section .membership-coupon-body .sub-section-tit {color: var(--color-font1);}
.membership-coupon-section .membership-coupon-body .table-wrap {margin-top: var(--space-24);}

/* 문의 박스 */
.membership-cta-section {padding-top: var(--space-60);}
.membership-cta-section .program-cta {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-40); padding: var(--space-40) var(--space-30); border-radius: 20px; background-color: var(--section-bg1);}
.membership-cta-section .program-cta .card-tit {color: var(--color-font1);}
.membership-cta-section .program-cta .body-small {margin-top: 8px; color: var(--color-font3);}
.membership-cta-section .program-cta .square-btn {flex: none;}

/* 호버 */
@media (hover: hover) {
    .program-list-section .program-item .img-wrap img, .price-result-section .program-item .img-wrap img {transition: transform 0.8s var(--ease-out);}
    .program-list-section .program-item:hover .img-wrap img, .price-result-section .program-item:hover .img-wrap img {transform: scale(1.04);}
    .price-search-section .price-keyword-list button:hover {border-color: var(--color-static2); color: var(--color-static2);}
    .price-search-section .price-class-btn:hover {color: var(--color-static2);}
    .price-search-section .price-car-btn:hover {border-color: var(--color-border3);}
    .program-price-section .program-acc-btn:hover, .program-view-hero .program-acc-btn:hover {color: var(--color-static2);}
    .program-price-section .program-price-link:hover {color: var(--color-static2);}
    .program-other-section .program-other-card:hover {border-color: var(--color-border3);}
    .program-other-section .program-other-card:hover .program-other-more img {transform: translateX(4px);}
}

@media screen and (max-width: 1280px) {
    .package-section .package-list, .membership-section .membership-list, .program-list-section .program-card-list, .price-result-section .program-card-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .program-intro-section .program-intro-wrap {column-gap: var(--space-60);}
    .membership-coupon-section .membership-coupon-wrap {column-gap: var(--space-60);}
}

@media screen and (max-width: 1024px) {
    .membership-coupon-section .membership-coupon-wrap, .program-intro-section .program-intro-wrap, .program-view-hero .program-view-hero-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40);}
    .program-price-section .program-price-box {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40);}
    .program-price-section .program-price-summary {position: static;}
    .program-view-hero .program-view-img {order: -1;}   /* 1열이면 사진 먼저 */
    .program-other-section .program-other-list {grid-template-columns: minmax(0, 1fr);}
    .price-class-modal .price-class-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .price-result-section .price-estimate-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30);}
    .price-result-section .price-estimate-bottom {flex-direction: column; align-items: flex-start; row-gap: var(--space-20);}
    .package-section .program-guide, .program-list-section .program-guide {flex-direction: column; align-items: flex-start; row-gap: var(--space-24);}
}

@media screen and (max-width: 768px) {
    .membership-section .program-head, .package-section .program-head {flex-direction: column; align-items: flex-start; row-gap: var(--space-16);}
    .package-section .package-list, .membership-section .membership-list, .program-list-section .program-card-list, .price-result-section .program-card-list {grid-template-columns: minmax(0, 1fr);}
    .price-search-section .price-search {padding: var(--space-20);}
    .price-class-modal .modal-inner {padding: var(--space-30) var(--space-20);}
    .price-class-modal .price-class-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-24);}
    .price-class-modal .price-class-list > li {min-height: 0; padding: var(--space-16);}
    .price-search-section .price-brand {width: 100%;}
    .price-search-section .price-list-top {flex-direction: column; align-items: flex-start; row-gap: 12px;}
    .price-search-section .price-car-list {row-gap: 12px;}
    .price-search-section .price-car-btn, .price-result-section .price-selected {column-gap: var(--space-16); padding: 12px var(--space-16);}
    .price-search-section .price-car-btn .img-wrap, .price-result-section .price-selected .img-wrap {width: 64px; height: 64px;}
    .price-search-section .price-car-btn .img-wrap img, .price-result-section .price-selected .img-wrap img {width: 56px;}
    .price-search-section .price-car-txt, .price-result-section .price-selected-txt {flex-direction: column; align-items: flex-start;}
    .price-result-section .price-selected {flex-wrap: wrap; row-gap: 12px;}
    .price-result-section .price-selected-txt {flex-basis: 0;}
    .price-result-section .price-selected .square-btn {width: 100%;}
    .price-result-section .price-estimate {padding: var(--space-30) var(--space-20);}
    .price-result-section .price-estimate-box {padding: var(--space-24) var(--space-20);}
    .price-result-section .price-estimate-bottom .btn-list {width: 100%; flex-direction: column; align-items: stretch; row-gap: 8px;}
    .price-result-section .price-estimate-bottom .btn-list .square-btn {width: 100%;}
    .program-intro-section .program-intro-badge {left: var(--space-16); bottom: var(--space-16);}
    .program-price-section .program-price-box {padding: var(--space-30) var(--space-20);}
    .program-view-hero .program-view-btn {grid-template-columns: minmax(0, 1fr);}
    .program-price-section .program-price-label {flex-wrap: wrap; row-gap: 4px;}
    .acc-modal .program-acc-body {position: static; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none;}
    .program-price-section .program-variant-list {grid-template-columns: minmax(0, 1fr);}
    .package-section .package-note, .membership-section .program-note {text-align: left;}
    .membership-cta-section .program-cta {flex-direction: column; align-items: flex-start; row-gap: var(--space-24); padding: var(--space-30) var(--space-20);}
    .package-section .program-guide, .program-list-section .program-guide {padding: var(--space-30) var(--space-20);}
    .package-section .program-guide .btn-list, .program-list-section .program-guide .btn-list {width: 100%; flex-direction: column; align-items: stretch; row-gap: 8px;}
    .package-section .program-guide .btn-list .square-btn, .program-list-section .program-guide .btn-list .square-btn {width: 100%;}
}