/*――――――――――――――――
  멤버십 선택 (2026-08-21) — /membership/index.php
  팔레트: 프로젝트 표준 (#1E2124 / #464C53 / #757B82 / #2C7BFE / #F7F8FA)
――――――――――――――――――*/
#membership .page_top {margin-bottom: 4rem;}
#membership .page_top h2 {margin-bottom: 1.2rem;}
#membership .page_top p {line-height: 2.6rem;}

/* 현재 이용 중인 멤버십 배너 */
#membership .my_mem {gap: 1.2rem; background-color: #2C7BFE0D; border: 1px solid #2C7BFE33; border-radius: 1.2rem; padding: 1.8rem 2.4rem; margin-bottom: 3.2rem;}
#membership .my_mem strong {color: #2C7BFE;}

/* 등급 칩 — N(연블루) / S(블루) / V(블랙) */
#membership .tier {display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; height: 3.2rem; padding: 0 1rem; border-radius: 0.8rem; line-height: 1;}
#membership .tier_n {background-color: #2C7BFE1A; color: #2C7BFE;}
#membership .tier_s {background-color: #2C7BFE; color: #fff;}
#membership .tier_v {background-color: #1E2124; color: #fff;}

/* 카드 3열 */
#membership .mem_list {gap: 2.4rem; align-items: stretch;}
#membership .mem_card {flex: 1; display: flex; flex-direction: column; background-color: #fff; border: 1px solid #EDEFF2; border-radius: 1.6rem; padding: 3.2rem 2.8rem; transition: box-shadow 0.3s, border-color 0.3s;}
#membership .mem_card:hover {border-color: #2C7BFE66; box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.06);}
#membership .mem_card.mine {border-color: #2C7BFE;}

#membership .card_head {padding-bottom: 2.4rem; border-bottom: 1px solid #EDEFF2;}
#membership .card_head .tier {margin-bottom: 1.6rem;}
#membership .card_head h3 {margin-bottom: 2rem;}
#membership .card_head .price_label {margin-bottom: 0.4rem;}
#membership .card_head .price {line-height: 4.4rem;}

#membership .card_body {flex: 1; padding: 2.4rem 0 2.8rem 0;}
#membership .card_body .prog_label {margin-bottom: 1.4rem;}
#membership .prog_list li {position: relative; padding-left: 2.4rem; line-height: 2.4rem; margin-bottom: 1rem; font-weight: 500;}
#membership .prog_list li:last-child {margin-bottom: 0;}
#membership .prog_list li::before {content: ""; position: absolute; left: 0; top: 0.5rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #2C7BFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat;}
#membership .prog_list li .sub {display: block; margin-top: 0.2rem; line-height: 2rem;}

/* 공통 안내 — 1:1 전담 멘토링 */
#membership .mentor_note {margin-top: 3.2rem; background-color: #2C7BFE0D; border: 1px solid #2C7BFE33; border-radius: 1.2rem; padding: 2rem 2.4rem;}
#membership .mentor_note strong {color: #2C7BFE;}

/* 신청(PG) 버튼 */
#membership .btn_pay {width: 100%; height: 5.6rem; border-radius: 0.8rem; background-color: #1E2124; color: #fff; cursor: pointer; transition: opacity 0.3s;}
#membership .btn_pay:hover {opacity: 0.85;}
#membership .btn_pay.now {background-color: #2C7BFE1A; color: #2C7BFE; cursor: default;}
#membership .btn_pay.now:hover {opacity: 1;}

#membership .mem_note {margin-top: 3.2rem;}

/* 서비스 제공·취소·환불 안내 (2026-09-17, PG 심사 요건) */
/* 이용 기간 한 줄 안내 (2026-10-06) — policy_note(환불 요약 박스) 대체. 눈에 띄지 않게: 작은 회색 글씨, 우측 정렬 */
#membership .term_note {margin-top: 1.6rem; text-align: right; line-height: 2rem;}
#membership .term_note a {color: inherit; text-decoration: underline; text-underline-offset: 0.2rem;}

/* ── 모바일 ── */
@media screen and (max-width: 880px) {
    #membership .container {padding: 10rem 2rem 8rem 2rem;}
    #membership .page_top {margin-bottom: 2.8rem;}
    #membership .page_top h2 {font-size: 2.4rem; margin-bottom: 0.8rem;}
    #membership .page_top p {font-size: 1.4rem; line-height: 2.2rem;}
    #membership .my_mem {padding: 1.4rem 1.6rem; margin-bottom: 2.4rem; gap: 0.8rem;}
    #membership .my_mem p {font-size: 1.4rem;}
    #membership .mem_list {flex-direction: column; gap: 1.6rem;}
    #membership .mem_card {padding: 2.4rem 2rem; background-color: #f0f5fc;}
    #membership .mentor_note {margin-top: 2.4rem; padding: 1.6rem 2rem;}
    #membership .mentor_note p {font-size: 1.5rem; text-align: center;}
    #membership .card_head .price {font-size: 2.8rem; line-height: 3.6rem;}
    #membership .btn_pay {height: 5.2rem;}
    #membership .mem_note {margin-top: 2.4rem;}
    #membership .term_note {margin-top: 1.2rem; font-size: 1.2rem; text-align: center; line-height: 1.8rem;}
}