/* BASIC css start */
/* ============================================================================
   회원가입 1단계 약관동의 (join_terms) — 인클리어
   ----------------------------------------------------------------------------
   넣는 곳 : 디자인 관리 > 개별 디자인 > 회원 > 회원 가입 약관

   ⚠ 메이크샵은 이 페이지의 CSS 탭을 통째로 교체한다. 원본 규칙에 기대면 안 된다.
     특히 .form-terms / .join-step 은 공통 스킨(common.css)에 없다(실측).
     여기서 직접 정의하지 않으면 아무 스타일 없이 나온다.

   ⚠ 가입 흐름 네 페이지(유형선택·약관동의·가입인증·가입완료)가 같은 모양을
     쓰도록 아래 '공통' 부분은 네 파일에 똑같이 들어간다. 한쪽만 고치지 말 것.
     정보입력 단계는 join_unify(= new_join) 가 담당한다.

   ⚠ 브랜드 색은 var(--color-brand-blue) 를 쓴다(인클리어 네이비).
     같은 파일을 어헤이(out_urhey/member/)에도 두는데, 그쪽은 body.brand-urhey 가
     이 토큰을 로즈로 재정의해 자동으로 로즈가 된다(novels.css).
     그래서 색을 직접 박지 않는다 — 대체값만 브랜드별로 다르게 적는다.
   ============================================================================ */

/* ── 공통 ─────────────────────────────────────────────────────────── */
.nv-jf {
  --nv-brand: var(--color-brand-blue, #0d277d);
  --nv-ink:   var(--cw-heading-color, #121212);
  --nv-sub:   var(--cw-color-80, #555);
  --nv-muted: var(--cw-color-60, #999);
  --nv-line:  var(--cw-color-30, #dedede);
  --nv-line2: var(--cw-color-20, #ededed);
  --nv-soft:  var(--cw-color-10, #f6f6f6);
}
.nv-jf, .nv-jf * { box-sizing: border-box; }
.nv-jf ul, .nv-jf li { list-style: none; margin: 0; padding: 0; }
.nv-jf p { margin: 0; }
.nv-jf a { text-decoration: none; color: inherit; }
.nv-jf h2 { margin: 0; }

/* 기둥 — 내용 폭에 맞춰 좁게. 넓으면 가운데만 쓰고 양옆이 비어 어수선하다 */
.nv-jf .join-content { max-width: 30rem; margin: 0 auto; padding: 1.75rem 0 3.5rem; }

/* ── 제목 ─────────────────────────────────────────────────────────── */
.nv-jf .page-title-wrap { margin: 0 !important; padding: 0 !important; text-align: center; }
.nv-jf .page-title-wrap h2 {
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; color: var(--nv-ink);
}
/* ⚠ 공통 스킨(common.css)이 .page-title-wrap h2 를 두 구간에서 숨긴다(실측) :
     @media (min-width:768px) and (max-width:991.98px)  ← 태블릿
     @media (max-width:767.98px)                        ← 모바일
   모바일 블록에서만 되살리면 태블릿에서 제목이 사라진다.
   미디어쿼리 밖에서 한 번 되살려 모든 폭에서 나오게 한다. */
.nv-jf .page-title-wrap h2 { display: block !important; }

.nv-jf .page-title-wrap p {
  margin-top: .625rem; font-size: .8438rem; line-height: 1.75; color: var(--nv-sub);
}
.nv-jf .page-title-wrap p + p { margin-top: .375rem; font-size: .8125rem; color: var(--nv-muted); }

/* ── 가입 단계 표시 ───────────────────────────────────────────────────
   원본은 단계 사이 화살표를 스킨 SVG 로 그렸다. 로딩 실패에 안전하도록
   CSS 로 그린다. 아이콘 자체는 스킨 SVG 를 그대로 쓰되, 현재 단계만
   브랜드색 원 위에 흰색으로 반전시킨다. */
.nv-jf .join-step {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 2.5rem; margin-top: 1.75rem; text-align: center;
}
.nv-jf .join-step li { position: relative; }
.nv-jf .join-step li:not(:last-child)::after {
  content: ""; position: absolute; right: -1.5rem; top: 1.375rem;
  width: .4375rem; height: .4375rem;
  border-top: 1.5px solid var(--nv-line); border-right: 1.5px solid var(--nv-line);
  transform: rotate(45deg);
}
.nv-jf .join-step li .icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin: 0 auto; border-radius: 50%;
  background: var(--nv-soft);
}
.nv-jf .join-step li .icon img { width: 1.375rem; height: 1.375rem; opacity: .45; }
.nv-jf .join-step li p { padding-top: .5rem; font-size: .8125rem; color: var(--nv-muted); }
.nv-jf .join-step li.active .icon { background: var(--nv-brand); }
.nv-jf .join-step li.active .icon img { opacity: 1; filter: brightness(0) invert(1); }
.nv-jf .join-step li.active p { font-weight: 700; color: var(--nv-ink); }

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.nv-jf .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; padding: 0 1.75rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  transition: filter .16s, transform .16s, border-color .16s, color .16s;
}
.nv-jf .btn-lg { height: 3.25rem; }
.nv-jf .btn-primary { border: 0; background: var(--nv-brand); color: #fff; }
.nv-jf .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nv-jf .btn-white { border: 1px solid var(--nv-line); background: #fff; color: var(--nv-ink); }
.nv-jf .btn-white:hover { border-color: var(--nv-brand); color: var(--nv-brand); }

/* ── 약관 ─────────────────────────────────────────────────────────── */
/* ⚠ .form-terms / .join-terms 는 공통 스킨에 없다(실측). 여기서 전부 정의한다. */
.nv-jf .form-terms { margin-top: 2rem !important; }
.nv-jf .form-terms label { cursor: pointer; font-size: .875rem; font-weight: 500; }
.nv-jf .form-terms .form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.nv-jf input[type="checkbox"], .nv-jf .form-check-input {
  width: 1.0625rem; height: 1.0625rem; margin: 0; accent-color: var(--nv-brand); cursor: pointer;
}
/* 전체 동의 : 한 번에 끝낼 수 있는 자리라 눈에 띄게 묶어 둔다 */
.nv-jf .form-terms .all-check {
  padding: 1rem 1.125rem; border: 1px solid var(--nv-line2); border-radius: .75rem;
  background: var(--nv-soft);
}
.nv-jf .form-terms .all-check .form-check { margin-bottom: .625rem; }
.nv-jf .form-terms .all-check label { font-size: .9375rem; font-weight: 700; color: var(--nv-ink); }
.nv-jf .form-terms .all-check ul { padding-top: .75rem; border-top: 1px solid var(--nv-line2); }
.nv-jf .form-terms .all-check ul li { font-size: .78125rem; line-height: 1.7; color: var(--nv-sub); }
.nv-jf .form-terms .all-check ul.bullet li:not(:last-child) { padding: 0 0 .375rem .5rem; text-indent: -.5rem; }

.nv-jf .form-terms .join-terms { margin-top: 1.25rem; }
.nv-jf .form-terms .join-terms textarea {
  width: 100%; height: 6.25rem; padding: .75rem; border: 0; border-radius: .5rem;
  background: var(--nv-soft); font-size: .75rem; line-height: 1.7; color: var(--nv-sub);
}
.nv-jf .form-terms .join-terms .terms-content { display: none; padding-bottom: 1.25rem; }
.nv-jf .form-terms .join-terms .terms-content.active { display: block; }
/* 펼침 표시 — 스킨 이미지 대신 CSS 꺾쇠 */
.nv-jf .form-terms .join-terms .form-check { position: relative; padding-right: 1.5rem; }
.nv-jf .form-terms .join-terms .form-check::after {
  content: ""; position: absolute; right: .375rem; top: .4375rem;
  width: .4375rem; height: .4375rem;
  border-right: 1.5px solid var(--nv-muted); border-bottom: 1.5px solid var(--nv-muted);
  transform: rotate(45deg); transition: transform .2s;
}
.nv-jf .form-terms .join-terms .form-check.active::after { transform: rotate(-135deg); top: .625rem; }
.nv-jf .form-terms .join-terms .cw-tbl { overflow-x: auto; }
.nv-jf .form-terms .join-terms .cw-tbl table {
  width: 100%; table-layout: fixed; border-spacing: 0; background: #fff;
}
.nv-jf .form-terms .join-terms .cw-tbl caption { display: none; }
.nv-jf .form-terms .join-terms .cw-tbl th,
.nv-jf .form-terms .join-terms .cw-tbl td {
  padding: .625rem; border: 1px solid var(--nv-line); font-size: .78125rem;
  font-weight: 400; color: var(--nv-sub);
}
.nv-jf .form-terms .join-terms .cw-tbl th { background: var(--nv-soft); text-align: center; }
.nv-jf .form-terms .join-terms .msg {
  margin-top: .625rem; padding-left: .5rem; text-indent: -.5rem;
  font-size: .78125rem; color: var(--nv-sub);
}
.nv-jf .btn-agree { display: flex; align-items: center; justify-content: center; margin-top: 2rem; }
.nv-jf .btn-agree .btn { min-width: 18.75rem; }


/* ⚠ 체크박스가 <label> 안에 들어가는 구조라(.form-check-label > input + 텍스트)
     .form-check 에 준 gap 이 둘 사이에 적용되지 않는다. 라벨 자체를 flex 로 만든다. */
.nv-jf .form-check-label {
  display: inline-flex; align-items: center; gap: .5rem;
}

/* ── 반응형 ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* ⚠ 공통 스킨이 좁은 화면에서 .page-title-wrap h2 를 숨긴다 → 되살린다 */
  .nv-jf .page-title-wrap h2 { display: block !important; font-size: 1.125rem; }
  .nv-jf .join-content { padding: 1.25rem 0 3rem; }
  .nv-jf .join-step { gap: 2rem; margin-top: 1.25rem; }
  .nv-jf .join-step li:not(:last-child)::after { right: -1.25rem; top: 1.125rem; }
  .nv-jf .join-step li .icon { width: 2.5rem; height: 2.5rem; }
  .nv-jf .join-step li .icon img { width: 1.125rem; height: 1.125rem; }
  .nv-jf .join-step li p { font-size: .75rem; }
  .nv-jf .btn, .nv-jf .btn-lg { width: 100%; }
}

/* BASIC css end */