/* BASIC css start */
/* 가입순서 */
.join-step { display: flex; flex-wrap:wrap; gap: 48px; align-items: center; justify-content: center; padding: 24px 0; text-align: center; }
.join-step li { position: relative; }
.join-step li:not(:last-child)::after { position: absolute; right: -32px; top: 27px; width: 16px; height: 16px; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_arrow_step.svg') no-repeat; content: ''; }
.join-step li .icon { display: block; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background: var(--cw-color-10); }
.join-step li p { padding-top: 4px; font-size: .875rem; color: var(--cw-color-60); }
.join-step li.active .icon { background: var(--cw-point-color-pri); }
.join-step li.active p { font-weight: 600; color: var(--cw-heading-color); }

.btn-agree { display: flex; align-items: center; justify-content: center; }
.btn-agree .btn { margin: 40px 0; width: 300px; }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .join-step { padding: 0 0 24px; }
}

/* 모바일 */
@media (max-width: 767.98px) {
    .join-step { padding: 0 0 24px; gap: 40px; }
    .join-step li::after { right: -28px; }
    .join-step li p { font-size: .813rem; }
    .form-terms .all-check ul li { font-size: .75rem; }
    .form-terms label,
    .form-terms .join-terms .form-check { font-size: .813rem; }
}

/* 모바일 */
@media (max-width: 480px) {
    .btn-agree .btn { width: 100%; }
}


/* ═══ 세인트크로익스 · 회원가입 약관동의 덧칠 · 2026-09-04 ═══
   위쪽은 메이크샵 기본 스타일입니다. 지우지 않습니다.
   아래만 이 쇼핑몰 모양으로 덮어씁니다. 전용 클래스는 .scj- 로 시작합니다. */

.sc h1,.sc h2,.sc h3,.sc p,.sc li,.sc label{word-break:keep-all;overflow-wrap:break-word}

.scj-box{max-width:760px}

.scj-all{margin-top:var(--sc-s5);padding:clamp(20px,3.4vw,28px);background:var(--sc-tile)}
.scj-chk{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:500;
  color:var(--sc-ink);cursor:pointer}
.scj-chk input{width:18px;height:18px;accent-color:var(--sc-ink);margin:0}
.scj-note{margin:14px 0 0;padding:0;list-style:none}
.scj-note li{position:relative;padding-left:12px;font-size:13px;line-height:1.85;color:var(--sc-sub)}
.scj-note li:before{content:"";position:absolute;left:0;top:12px;width:5px;height:1px;
  background:var(--sc-gold)}

.scj-terms{margin-top:var(--sc-s5)}
.scj-btns{margin-top:var(--sc-s6)}


/* ═══ 260905 · 약관 안쪽 정렬 바로잡기 ═══
   메이크샵이 새 개인정보 약관을 통째로 넣어 주는데 그 안의 표와 글상자에 꾸밈이 없어
   표가 358px 로 쭈그러들고 글상자가 185x62 로 나왔습니다. 그 자리를 채웁니다. */

/* 제목과 빵부스러기를 본문과 같은 기둥에 세웁니다 */
.sc-bread,.sc-phead{max-width:720px;margin-left:auto;margin-right:auto}
.sc-phead{padding:56px 0 28px}

/* 약관 한 덩어리 */
.scj-terms .form-wrap{padding:22px 0;border-top:1px solid var(--sc-line)}
.scj-terms .form-wrap:first-child{border-top:0;padding-top:4px}

/* 동의 체크 줄 */
.scj-terms .form-check{display:flex;align-items:center;margin:0 0 12px}
.scj-terms .form-check-label{display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;color:var(--sc-ink);cursor:pointer}
.scj-terms .form-check-input{width:18px;height:18px;accent-color:var(--sc-ink);margin:0;flex:none}

/* 약관 글상자 */
.scj-terms .terms-content{width:100%}
.scj-terms textarea,.scj-terms .cw-textfield{width:100%;height:200px;box-sizing:border-box;
  padding:16px 18px;border:1px solid var(--sc-line);background:#FFFFFF;resize:vertical;
  font-family:"Pretendard",sans-serif;font-size:13.5px;font-weight:300;line-height:1.9;
  color:var(--sc-sub)}

/* 개인정보 표 */
.scj-terms .cw-tbl{width:100%;overflow-x:auto}
.scj-terms .cw-tbl table{width:100%;border-collapse:collapse;table-layout:fixed}
.scj-terms .cw-tbl col{width:auto}
.scj-terms .cw-tbl th,.scj-terms .cw-tbl td{padding:12px 14px;border:1px solid var(--sc-line);
  font-size:13.5px;line-height:1.7;text-align:left;vertical-align:middle}
.scj-terms .cw-tbl th{width:120px;white-space:nowrap;background:var(--sc-tile);
  font-weight:500;color:var(--sc-ink)}
.scj-terms .cw-tbl th br{display:none}
.scj-terms .cw-tbl td{color:var(--sc-sub);font-weight:300;word-break:keep-all;overflow-wrap:break-word}
.scj-terms .cw-tbl td[rowspan]{width:64px;text-align:center}

/* 표 아래 안내 */
.scj-terms .msg,.scj-terms .terms-content > p{margin:10px 0 0;font-size:12.5px;
  line-height:1.8;color:var(--sc-sub)}

@media(max-width:820px){
  .scj-terms .cw-tbl th{width:92px}
  .scj-terms textarea,.scj-terms .cw-textfield{height:170px}
}

/* BASIC css end */