@charset "utf-8";
.benefit-page .benefit-page-tit {padding-block: var(--space-24) 0; color: var(--color-gray9);}
.benefit-group {padding-top: var(--space-24);}
.benefit-group + .benefit-group {margin-top: var(--space-8);}
.benefit-group .benefit-group-tit {margin-bottom: var(--space-12); color: var(--color-gray9);}
.benefit-group-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-12); color: var(--color-gray9);}
.benefit-group-head .txt-btn {margin-right: -4px;}

/* 혜택 요약 */
.benefit-menu {padding-bottom: var(--space-24); border-bottom: 1px solid var(--color-border);}
.benefit-menu a {display: flex; align-items: center; column-gap: var(--space-8); min-height: 52px;}
.benefit-menu .ico {color: var(--color-gray7);}
.benefit-menu .benefit-menu-name {flex: 1 1 auto; color: var(--color-gray9);}
.benefit-menu .benefit-menu-value {font-weight: 500; color: var(--color-static1);}

/* 추천 혜택 배너 */
.benefit-reco {position: relative; display: block; aspect-ratio: 362 / 160; border-radius: var(--radius-small); overflow: hidden; background-color: var(--color-gray8);}
.benefit-reco img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;}
.benefit-reco::after {content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--rgb-black) / 0.75) 0%, rgb(var(--rgb-black) / 0) 70%);}
.benefit-reco .benefit-reco-txt {position: absolute; left: var(--space-20); right: var(--space-20); bottom: var(--space-20); z-index: 1; color: var(--color-white);}

/* 기부 연결 */
.benefit-donate {position: relative; padding: var(--space-20) var(--space-16) var(--space-12); border-radius: var(--radius-small); background-color: var(--color-bg2);}
.benefit-donate .benefit-donate-logo {position: absolute; top: var(--space-16); right: var(--space-16); width: auto; height: 24px;}
.benefit-donate .benefit-donate-msg {padding-top: var(--space-24); color: var(--color-gray9);}
.benefit-donate .benefit-donate-foot {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-8); margin-top: var(--space-16); padding-top: var(--space-4); border-top: 1px solid var(--color-gray3); color: var(--color-gray7);}
.benefit-donate .benefit-donate-foot strong {margin-left: var(--space-4); color: var(--color-gray9);}
.benefit-donate .benefit-donate-foot .txt-btn {margin-right: -4px; color: var(--color-gray9);}

/* 진한 카드 */
.benefit-sub {display: flex; flex-direction: column; padding-top: var(--space-20);}
.benefit-sub .benefit-group {margin-top: var(--space-40); padding-top: 0;}
.benefit-card {padding: var(--space-20); border-radius: var(--radius-small); background: linear-gradient(0deg, var(--color-static1) 0%, color-mix(in srgb, var(--color-static1) 75%, var(--color-black)) 100%); color: var(--color-white);}
.benefit-card .benefit-card-head, .benefit-card .benefit-card-foot {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-8);}
.benefit-card .benefit-card-label, .benefit-card .benefit-card-desc {color: rgb(var(--rgb-white) / 0.85);}
.benefit-card .benefit-card-num {margin-top: var(--space-4);}
.benefit-card .benefit-card-desc {margin-top: var(--space-20);}
.benefit-card .benefit-card-foot .txt-btn {min-height: 32px; margin-right: -4px; color: var(--color-white);}
.benefit-card .benefit-card-foot strong {font-weight: 600;}

/* 내역 목록 */
.benefit-history {padding-inline: var(--space-20); border: 1px solid var(--color-gray3); border-radius: var(--radius-small);}
.benefit-history li {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); padding-block: var(--space-16);}
.benefit-history li + li {border-top: 1px solid var(--color-border);}
.benefit-history .benefit-history-tit {color: var(--color-gray9);}
.benefit-history .benefit-history-date {margin-top: 2px; color: var(--color-gray6);}
.benefit-history .benefit-history-value {flex: none; color: var(--color-gray9);}
.benefit-history .benefit-history-state {flex: none; color: var(--color-gray7);}
.benefit-group .info-box {margin-top: var(--space-30);}
.benefit-btn {position: static; margin-top: auto; padding-top: var(--space-20);}
.benefit-btn .ico {width: 20px; height: 20px;}

/* 쿠폰 */
.coupon-top {display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--space-12) * -1); color: var(--color-gray8);}
.coupon-top strong {font-weight: 600; color: var(--color-gray9);}
.coupon-list {display: flex; flex-direction: column; row-gap: var(--space-12); margin-top: var(--space-4); padding-bottom: var(--space-40);}
.coupon-card {padding: var(--space-20) var(--space-16) var(--space-16); border: 1px solid var(--color-gray3); border-radius: var(--radius-small); color: var(--color-gray9);}
.coupon-card .coupon-cond {margin-top: var(--space-8); color: var(--color-gray6);}
.coupon-card .coupon-date {margin-top: 2px; color: var(--color-gray6);}
.coupon-card .square-btn {margin-top: var(--space-20);}

/* 회원권 */
.membership-bar {height: 6px; margin-top: var(--space-24); border-radius: 999px; background-color: rgb(var(--rgb-white) / 0.25); overflow: hidden;}
.membership-bar span {display: block; height: 100%; border-radius: inherit; background-color: var(--color-white);}
.benefit-card .membership-bar + .benefit-card-foot {margin-top: var(--space-12);}
.membership-free {display: flex; flex-direction: column; row-gap: var(--space-6); margin-top: var(--space-20); padding: var(--space-20); border-radius: var(--radius-small); background-color: var(--color-bg2); color: var(--color-gray8);}
.membership-free .membership-free-tit {display: flex; align-items: center; column-gap: var(--space-6); color: var(--color-static1);}
.membership-buy-img {aspect-ratio: 362 / 150; border-radius: var(--radius-small); overflow: hidden; background-color: var(--color-gray2);}
.membership-buy-img img {width: 100%; height: 100%; object-fit: cover;}
.membership-buy-tit {margin-top: var(--space-16); color: var(--color-gray9);}
.membership-buy-desc {color: var(--color-gray8);}
.membership-buy-btn {margin-top: var(--space-16);}
.benefit-page > .benefit-group:last-child {padding-bottom: var(--space-40);}

@media (hover: hover) {
    .benefit-menu a:hover .benefit-menu-name {color: var(--color-static1);}
    .benefit-reco:hover img {transform: scale(1.04);}
}

/* 회원권 이용내역 */
.mhist-page .benefit-card .benefit-card-foot {margin-top: var(--space-20);}
.mhist-page .benefit-card .membership-bar {margin-top: var(--space-8);}
.mhist-tool {display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-20); color: var(--color-gray8);}
.mhist-list > li {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); padding-block: var(--space-16) var(--space-20);}
.mhist-list {padding-bottom: var(--space-40);}
.mhist-list > li + li {border-top: 1px solid var(--color-border);}
.mhist-list .mhist-txt {min-width: 0;}
.mhist-list .mhist-tit {color: var(--color-gray9);}
.mhist-list .mhist-date {margin-top: 2px; color: var(--color-gray6);}
.mhist-list .mhist-meta {margin-top: 2px; color: var(--color-gray6);}
.mhist-list .mhist-meta span + span::before {content: ''; display: inline-block; width: 1px; height: 10px; margin-inline: var(--space-6); background-color: var(--color-gray4); vertical-align: -1px;}
.mhist-list .badge {flex: none;}

/* 회원권 구매 */
.mbuy-head {padding-block: var(--space-24) var(--space-32);}
.mbuy-head .mbuy-tit {color: var(--color-gray9);}
.mbuy-head .mbuy-desc {margin-top: var(--space-4); color: var(--color-gray6);}
.mbuy-car {margin-top: var(--space-24); padding: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-small);}
.mbuy-car .mbuy-car-info {display: flex; align-items: center; column-gap: var(--space-12);}
.mbuy-car .mbuy-car-img {flex: none; width: 88px; aspect-ratio: 620 / 280;}
.mbuy-car .mbuy-car-img img {width: 100%; height: 100%; object-fit: contain;}
.mbuy-car .mbuy-car-txt {min-width: 0;}
.mbuy-car .mbuy-car-name {color: var(--color-gray9);}
.mbuy-car .mbuy-car-size {margin-top: var(--space-4); color: var(--color-gray8);}
.mbuy-car .mbuy-car-date {margin-top: 2px; color: var(--color-gray6);}
.mbuy-car .mbuy-car-btn {display: flex; justify-content: flex-end; margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-gray9);}
.mbuy-car .mbuy-car-btn .ico {width: 20px; height: 20px;}

.mbuy-section {padding-block: var(--space-24) var(--space-32); border-top: 8px solid var(--color-gray2);}
.mbuy-list {display: flex; flex-direction: column; row-gap: var(--space-12);}
.mbuy-card {padding: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-small);}
.mbuy-card .mbuy-card-name {margin-top: var(--space-12); color: var(--color-gray9);}
.mbuy-card .mbuy-card-sub {color: var(--color-gray7);}
.mbuy-card .mbuy-card-normal {margin-top: var(--space-16); color: var(--color-gray6);}
.mbuy-card .mbuy-card-price {color: var(--color-static1);}
.mbuy-card .mbuy-card-avg {color: var(--color-gray7);}
.mbuy-card .mbuy-card-body {margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-border);}
.mbuy-card .mbuy-card-label {color: var(--color-gray9);}
.mbuy-card .mbuy-card-label .body-small {color: var(--color-gray7);}
.mbuy-card .mbuy-card-label ~ .mbuy-card-label {margin-top: var(--space-20);}
.mbuy-card .dot-ul {margin-top: var(--space-8); color: var(--color-gray8);}
.mbuy-card .mbuy-card-period {margin-top: var(--space-6); color: var(--color-gray8);}
.mbuy-card .mbuy-card-btns {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-24);}
.mbuy-note {margin-top: var(--space-16); color: var(--color-gray6);}

.mbuy-acc {border-top: 8px solid var(--color-gray2);}
.mbuy-acc .mbuy-acc-btn {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); width: 100%; min-height: var(--size-56); padding-block: var(--space-20); color: var(--color-gray9); text-align: left;}
.mbuy-acc .mbuy-acc-btn .ico {flex: none; color: var(--color-gray7);}
.mbuy-acc .mbuy-acc-panel {padding-bottom: var(--space-24);}
.mbuy-table-scroll {margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto;}
.mbuy-table {width: max-content; min-width: 100%; border-collapse: collapse; color: var(--color-gray8); text-align: center;}
.mbuy-table th, .mbuy-table td {padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); font-weight: 400; vertical-align: middle; white-space: nowrap;}
.mbuy-table thead th {border-bottom: 0; background-color: var(--color-static3); color: var(--color-gray8);}
.mbuy-table th:first-child {text-align: left;}
.mbuy-table tbody th {color: var(--color-gray7);}
.mbuy-guide > li + li {border-top: 1px solid var(--color-border);}
.mbuy-guide .mbuy-guide-btn {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); width: 100%; padding-block: var(--space-16); color: var(--color-gray9); text-align: left;}
.mbuy-guide .mbuy-guide-btn .ico {flex: none; color: var(--color-gray6);}
.mbuy-guide .mbuy-guide-txt {padding-bottom: var(--space-20); color: var(--color-gray8);}
.mbuy-foot {padding-block: var(--space-8) var(--space-40);}
.mbuy-foot .ico {width: 20px; height: 20px;}

/* 회원권 자세히 */
.mview-page .mview-calc {row-gap: var(--space-8); margin-top: var(--space-16); padding: var(--space-16); background-color: var(--color-white);}
.mview-page .mview-calc dt {flex: 1 1 auto;}
.mview-page .mview-calc .total {padding-block: var(--space-8); border-block: 1px solid var(--color-border);}
.mview-page .mview-calc .total dt, .mview-page .mview-calc .total dd {font-weight: 600; color: var(--color-gray9);}
.mview-page .mview-equal {margin-top: var(--space-12); padding: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-static3); color: var(--color-gray8); text-align: center;}
.mview-page .mview-equal del {color: var(--color-gray6);}
.mview-page .mview-equal .mview-equal-gain {margin-top: var(--space-4); font-weight: 600; color: var(--color-static1);}
.mview-page .view-product-info .dot-ul + .view-product-link {margin-top: var(--space-12);}

/* 나눔과 함께한 방문 */
.donate-intro {padding-block: var(--space-32) var(--space-30);}
.donate-intro .donate-intro-tit {color: var(--color-gray9);}
.donate-intro .donate-intro-desc {margin-top: var(--space-4); color: var(--color-gray6);}
.donate-intro .donate-intro-img {overflow: hidden; margin-top: var(--space-32); aspect-ratio: 362 / 260; border-radius: var(--radius-small); background-color: var(--color-gray2);}
.donate-intro .donate-intro-img img {width: 100%; height: 100%; object-fit: cover;}
.donate-intro .donate-intro-sub {margin-top: var(--space-20); color: var(--color-gray9);}
.donate-intro .donate-intro-txt {margin-top: var(--space-4); color: var(--color-gray7);}
.donate-intro .donate-intro-btn {margin-top: var(--space-30);}
.donate-intro .donate-intro-btn .ico {width: 20px; height: 20px;}
.donate-history {padding-block: var(--space-32) var(--space-40); border-top: 8px solid var(--color-gray2);}
.donate-history .donate-history-tit {margin-bottom: var(--space-16); color: var(--color-gray9);}
.donate-list > li {display: flex; align-items: center; column-gap: var(--space-12); padding-block: var(--space-16);}
.donate-list > li + li {border-top: 1px solid var(--color-border);}
.donate-list .donate-ico {display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-static3); color: var(--color-static1);}
.donate-list .donate-txt {display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;}
.donate-list .donate-date {color: var(--color-gray9);}
.donate-list .donate-course {color: var(--color-gray6);}
.donate-list .donate-amount {flex: none; font-weight: 500; color: var(--color-static1);}
.donate-history .donate-empty {align-items: center; column-gap: var(--space-12); padding: var(--space-16) var(--space-16);}
.donate-history .donate-empty .ico {width: 16px; height: 16px; margin-top: 0;}

/* 회원권 구매 확인 */
.mcheck-section {padding-block: var(--space-24) var(--space-32); border-top: 8px solid var(--color-gray2);}
.mcheck-section .mcheck-tit {margin-bottom: var(--space-20); color: var(--color-gray9);}
.mcheck-car {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); margin-bottom: var(--space-16);}
.mcheck-car .mcheck-car-name {min-width: 0; color: var(--color-gray9);}
.mcheck-car .mcheck-car-name .body-medium {color: var(--color-gray6);}
.mcheck-car .mcheck-car-btn {flex: none; color: var(--color-static1);}
.mcheck-car .mcheck-car-btn .ico {width: 20px; height: 20px;}
.mcheck-price > div, .mcheck-info > div {display: flex; justify-content: space-between; column-gap: var(--space-12);}
.mcheck-price {display: flex; flex-direction: column; row-gap: var(--space-16);}
.mcheck-price > div {align-items: flex-start;}
.mcheck-price dt {display: flex; flex-direction: column; color: var(--color-gray9);}
.mcheck-price dt .caption-m {color: var(--color-gray6);}
.mcheck-price dd {flex: none; color: var(--color-gray9);}
.mcheck-price .mcheck-total {align-items: center;}
.mcheck-price .mcheck-total dt {display: block;}
.mcheck-price .mcheck-total dd {color: var(--color-static1);}
.mcheck-info {display: flex; flex-direction: column; row-gap: var(--space-20); margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border);}
.mcheck-info > div {flex-direction: column; row-gap: var(--space-4);}
.mcheck-info dt {color: var(--color-gray9);}
.mcheck-info dd {color: var(--color-gray6);}
.mcheck-note {margin-top: var(--space-20); padding-top: var(--space-16); border-top: 1px solid var(--color-border); color: var(--color-gray6);}
.mcheck-agree {padding-block: var(--space-24) var(--space-8); border-top: 8px solid var(--color-gray2);}
.mcheck-notice {padding: var(--space-16); border-radius: var(--radius-small); background-color: var(--color-bg2);}
.mcheck-notice .mcheck-notice-tit {display: flex; align-items: center; column-gap: var(--space-8); color: var(--color-gray9);}
.mcheck-notice .mcheck-notice-tit .ico {flex: none; width: 15px; height: 15px; color: var(--color-gray7);}
.mcheck-notice .dot-ul {margin-top: var(--space-8); padding-left: var(--space-4); color: var(--color-gray7);}
.mcheck-agree .check-item {align-items: flex-start; margin-top: var(--space-16); color: var(--color-gray8);}
.mcheck-agree .check-item .custom-checkbox {flex: none; margin-top: 2px;}