@charset "utf-8";

/* ============================================
   회원 가입 안내 (mber_guide) 전용 스타일
   원본 컴포넌트(con_tit/dot_list/table/pay_info) + 개선 컴포넌트(카드/스텝/CTA)
   ============================================ */

/* --- 기본 헬퍼(원본 추출) --- */
.con_tit {display:flex;}
.con_tit::before {content:''; background:url(images/icon_con_tit.png) 0 0 no-repeat; background-size:contain; /* border:6px solid #4ec8aa; border-radius:50rem; */ flex:0 0 1.25rem; width:1.25rem; height:1.25rem; margin:0.625rem 8px 0 0;}
.dot_list > li {position:relative; padding-left:12px; text-align:left;}
.dot_list > li::before {content:''; display:block; background:#aaa; border-radius:50px; width:4px; height:4px; position:absolute; top:10px; left:0;}
.dot_list > li + li {margin-top:5px;}

/* --- 테이블(원본 추출) --- */
table {width:100%; border-top:2px solid #555;}
table th, table td {border-bottom:1px solid var(--line); padding:8px 10px;}
table th {text-align:center;}
table td {background:#fff;}
table thead th {background:#f4f5f8;}
table + h4 {margin-top:40px;}
.tb_col th, .tb_col td {border:1px solid var(--line);}
.tb_col th:first-child, .tb_col td:first-child {border-left:0;}
.tb_col th:last-child, .tb_col td:last-child {border-right:0;}
.tb_col thead th {border-bottom-color:#555;}
.tb_col td {text-align:center;}
.tb_col.tl td, .tb_col td.tl {text-align:left;}

.tb_row th, .tb_row td {border:1px solid var(--line);}
.tb_row th:first-child, .tb_row td:first-child {border-left:0;}
.tb_row th:last-child, .tb_row td:last-child {border-right:0;}
.tb_row th {background:#f4f5f8;}

/* --- 납부방법 pay_info(원본 추출) --- */
.pay_info {margin:-10px 0 0 -20px;}
.pay_info > dl {border:1px solid #b2b7c7; border-radius:var(--bnround); padding:1.25rem 1.875rem; margin:20px 0 0 20px;}
.pay_info > dl > dt {border-bottom:1px dashed #b2b7c7; padding-bottom:10px; margin-bottom:0.938rem; font-size:1.125rem; font-weight:700; display:flex; align-items:center;}
.pay_info > dl > dt .icons {display:inline-flex; justify-content:center; align-items:center; background:#e4efff; border-radius:50rem; width:45px; height:45px; flex:0 0 45px; margin-right:10px;}
.pay_info > dl > dt .icons::before {content:'\efd1'; font-family:var(--material); font-size:1.5rem; font-weight:400; color:var(--color);}
.pay_info > dl.pay_haksul > dt .icons::before {content:'\ea67';}
.pay_info > dl.pay_common > dt .icons::before {content:'\eb86';}
.pay_info > dl > dd span {display:inline-block; font-size:1.25rem;}
.pay_info > dl > dd span:not(.bank_user) {font-weight:600;}
.pay_info .bank_user {display:block; font-size:0.938rem;}
.pay_info .pay_common dd {padding-left:0;}
.pay_info .pay_common .bycard {display:block; max-width:70px; margin:0 auto; text-align:center;}
.pay_info .pay_common .bycard::before {content:''; display:block; background:url(images/icon_bycard.png) 0 0 no-repeat; background-size:contain; width:70px; height:54px; margin-bottom:5px;}

/* --- 가로스크롤 --- */
.scroll_in {display:block; max-width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
.scroll_in table {table-layout:auto;}

@media screen and (min-width:1025px) {
.pay_info {display:flex; flex-wrap:wrap; justify-content:space-between;}
.pay_info > dl {flex:1;}
.pay_info > dl.pay_common {flex:0 0 250px;}
.pay_info > dl > dd {padding-left:55px;}
}

/* ============================================
   개선 컴포넌트 (본 페이지 확장)
   ============================================ */
.mber_guide section {margin-top:3.25rem;}
.mber_guide section:first-child {margin-top:0;}
.mber_guide .con_tit {display:flex; align-items:flex-start; margin-bottom:1.25rem;}
.mber_guide .con_tit::before {content:''; background:url(images/icon_con_tit.png) 0 0 no-repeat; background-size:contain; flex:0 0 1.25rem; width:1.25rem; height:1.25rem; margin:0.5rem 8px 0 0;}

/* --- 가입 절차 스텝 --- */
.join_steps {display:grid; grid-template-columns:1fr; gap:0.875rem; margin-bottom:3rem;}
.join_steps .step {position:relative; display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid #e3e9f2; border-radius:16px; padding:1.25rem 1.375rem; box-shadow:0 5px 16px rgba(30,50,90,0.05);}
.join_steps .step .no {flex:0 0 46px; width:46px; height:46px; display:inline-flex; justify-content:center; align-items:center; background:var(--gradient); color:#fff; border-radius:14px; font-size:1.375rem; font-weight:800; font-family:"Roboto", sans-serif;}
.join_steps .step .tx strong {display:block; font-size:1.0938rem; color:#1e2a44;}
.join_steps .step .tx span {font-size:0.9063rem; color:#7a869a;}

/* --- 회원 종류 카드 --- */
.member_cards {display:grid; grid-template-columns:1fr; gap:0.875rem;}
.member_cards > li {display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid #e5e9f0; border-left:5px solid var(--color); border-radius:14px; padding:1.125rem 1.375rem; box-shadow:0 4px 14px rgba(30,50,90,0.04); transition:transform .2s, box-shadow .2s;}
.member_cards > li:hover {transform:translateY(-3px); box-shadow:0 10px 22px rgba(30,50,90,0.1);}
.member_cards > li .tag {flex:0 0 92px; text-align:center; font-size:1rem; font-weight:700; color:#fff; background:var(--color); border-radius:50rem; padding:6px 4px;}
.member_cards > li .ds {font-size:1.0313rem; color:#444; line-height:1.55;}
.member_cards > li:nth-child(1) {border-left-color:#2b62c4;} .member_cards > li:nth-child(1) .tag {background:#2b62c4;}
.member_cards > li:nth-child(2) {border-left-color:#2c8fb5;} .member_cards > li:nth-child(2) .tag {background:#2c8fb5;}
.member_cards > li:nth-child(3) {border-left-color:#2ca985;} .member_cards > li:nth-child(3) .tag {background:#2ca985;}
.member_cards > li:nth-child(4) {border-left-color:#c9781c;} .member_cards > li:nth-child(4) .tag {background:#c9781c;}
.member_cards > li:nth-child(5) {border-left-color:#8659c4;} .member_cards > li:nth-child(5) .tag {background:#8659c4;}

/* --- 혜택 카드 --- */
.benefit_cards {display:grid; grid-template-columns:1fr; gap:0.875rem;}
.benefit_cards > li {display:flex; align-items:flex-start; gap:0.875rem; background:#f7f9fc; border:1px solid #e2e7f0; border-radius:14px; padding:1.25rem;}
.benefit_cards > li .ic {flex:0 0 46px; width:46px; height:46px; display:inline-flex; justify-content:center; align-items:center; background:#eef3fb; color:var(--color); border-radius:50rem;}
.benefit_cards > li .ic .material-icons-outlined {font-size:1.5rem;}
.benefit_cards > li p {line-height:1.55; color:#3a465c;}

/* --- 회비표 강조 --- */
.mber_guide .tb_col thead th {background:#eef3fb; color:#26364f;}
.mber_guide .tb_col tbody th {background:#f8fafd; color:var(--color); font-weight:700;}
.mber_guide .tb_col td {font-weight:500;}

/* --- 환불표 --- */
.mber_guide .tb_row th {background:#f4f6fb; color:#26364f;}
.mber_guide .tb_row .dot_list {display:inline-block; text-align:left;}

/* --- CTA --- */
.join_cta {margin-top:3.25rem; background:linear-gradient(120deg, #33528f 0%, #2c8f9a 100%); border-radius:20px; padding:2.25rem; text-align:center; color:#fff;}
.join_cta strong {display:block; font-size:1.5rem; font-weight:800; margin-bottom:0.5rem;}
.join_cta p {color:rgba(255,255,255,0.85); margin-bottom:1.5rem;}
.join_cta .btns {display:inline-flex; justify-content:center; align-items:center; gap:8px; background:#fff; color:var(--color); font-size:1.0938rem; font-weight:700; border-radius:50rem; padding:0.875rem 2rem; transition:transform .2s;}
.join_cta .btns:hover {transform:translateY(-2px);}
.join_cta .btns .material-icons-outlined {font-size:1.25rem;}

@media screen and (min-width:769px) {
	.join_steps {grid-template-columns:repeat(3, 1fr);}
	.join_steps .step:not(:last-child)::after {content:'\e5cc'; font-family:var(--material); position:absolute; top:50%; right:-0.6rem; transform:translateY(-50%); color:#c2cee1; font-size:1.375rem; z-index:1;}
	.member_cards {grid-template-columns:repeat(1, 1fr);}
	.benefit_cards {grid-template-columns:repeat(2, 1fr);}
}

@media screen and (max-width:768px) {
	.member_cards > li {flex-direction:column; align-items:flex-start; gap:0.625rem;}
	.member_cards > li .tag {flex-basis:auto; padding:5px 16px;}
	.join_cta {padding:1.75rem 1.375rem;}
	.join_cta strong {font-size:1.25rem;}
}