/* ===========================================================
   app-join.css — 회원가입(/join) 레이아웃 (Step 4 → CF-3 리스킨 · 3미러 공용 1벌).
   새 디자인 시스템 X. app-login.css 의 app-input / app-btn /
   app-login-card / app-login-page 토큰을 재사용하고, 폼 레이아웃만 보강.
   CF-3: §A-1 검은 래디얼 페이지 배경(캡처 2 톤 — 리포 내 자산 아님·신규 구현) ·
   §A-2 세로 1열(jf_grid2 폐기·jf_req 별표·힌트 붉은 소문구) · §C-1 도어리스 모달(jf_doorless).
   =========================================================== */

/* 가입 폼은 로그인보다 길어 카드 폭 확대 + 세로 스크롤 허용.
   CF-3 §A-1 — 배경 = 검은 래디얼 톤. width 100%(구 .app-login-page 100vw = 스크롤바 폭 포함
   → overflow-x:hidden 클리핑 = 캡처 1 "카드 우측 잘림" 진범 — §0-2 판정) 교정. */
.app-join-page {
    width: 100%;
    overflow-y: auto;
    padding: 32px 0;
    background-color: rgb(16, 16, 16);
    background-image: radial-gradient(circle at 50% 18%,
        rgb(63, 63, 63) 0%, rgb(28, 28, 28) 45%, rgb(16, 16, 16) 100%);
    /* CF-3b ② — 폭 점프 봉합: 페이지를 자체 스크롤 컨테이너로 승격(height 캡) + scrollbar-gutter.
       실측 — 확인 모달 경로엔 body 잠금이 없고(잠금은 popup-host.js 전용) 점프 축 = 문서 스크롤바
       등장·소멸(개폐 재렌더로 문서 높이가 100vh 경계를 넘나들 때 뷰포트 폭 ±17px). 문서 스크롤을
       없애고 컨테이너 스크롤 + 고정 거터로 폭을 상수화한다. */
    height: 100vh;
    scrollbar-gutter: stable;
    /* height 캡 + 부모(.app-login-page) align-items:center = 긴 폼 상단 클리핑 → flex-start로 해제.
       세로 중앙은 자식 margin:auto(안전 중앙 관용구 — 짧은 콘텐츠 중앙·긴 콘텐츠 상단부터 스크롤). */
    align-items: flex-start;
}

/* CF-3b ② — 가입 폼 폭 600px. 마커 클래스(jf_center) 스코프 = /join 한정 —
   .app-login-center 원본 380px 은 Login·JoinCoin·PopupHost 공유라 무접촉.
   max-height:100% = 카드가 "로고를 뺀 남은 높이"까지만 자라게 하는 축(구 고정 캡 calc(100vh-120px)은
   로고 높이를 못 빼 1068px 뷰포트에서 하단 버튼이 화면 밖으로 밀렸다 — 실측 후 교정). */
.jf_center {
    max-width: 600px;
    margin: auto;
    max-height: 100%;
}

/* 구 45% 검정 오버레이(배경 이미지 전제) — 자체 배경이 이미 어두워 불요(이중 감광 제거). */
.app-join-page::before {
    content: none;
}

.app-join-card {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    text-align: left;
}

/* CF-3b 정정 ② — 카드(가입 폼 전용 마커 jf_card)는 더 이상 스크롤 주체가 아니다:
   입력부(jf_body)가 스크롤하고 버튼(jf_foot)은 하단 고정.
   ⚠️ 진범 기록: .app-login-card = flex column 이고 카드에 max-height 가 걸려 있어, 기본 flex-shrink:1 인
      자식(버튼 포함)이 카드 높이 부족 시 눌렸다(= 버튼 축소). 스크롤 주체를 안으로 옮기고
      버튼은 flex:0 0 auto + min-height 로 못박아 두 증상(축소·제출 버튼 숨음)을 함께 없앤다.
   ⚠️ 마커 스코프 이유: .app-join-card 는 JoinCoin 과 공유 — 거기엔 jf_body 스크롤러가 없어
      base 를 overflow:hidden 으로 바꾸면 내용이 잘린다(회귀). base 는 원래대로 두고 /join 만 갈아탄다. */
.jf_card {
    overflow: hidden;
    min-height: 0;      /* flex 자식 기본 min-height:auto 해제 = 남은 높이에 맞춰 축소 허용 */
    flex: 0 1 auto;
}

.app-join-field {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app-join-label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}

/* 입력 + 우측 버튼/셀렉트 한 줄 배치 (중복확인, 통신사+번호) */
.app-join-inline {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.app-join-inline .app-input {
    flex: 1 1 auto;
    min-width: 0;
}

.app-join-check-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 14px;
}

.app-join-carrier {
    flex: 0 0 120px;
}

.app-join-ok {
    font-size: 12px;
    color: #4ade80;
}

.app-join-error {
    font-size: 12px;
    color: #f87171;
}

/* B-102b · 정책별 입력 가이드(상시 안내) — CF-3 §A-2: 라벨 아래 붉은 소문구 톤(캡처 3 문법).
   에러(#f87171 굵은 빨강)와는 채도/크기로 구분. */
.app-join-hint {
    display: block;
    font-size: 11.5px;
    color: #e07b7b;
    line-height: 1.4;
}

/* CF-3 §A-2 — 필수 별표(표기 전용·검증 축 무변경) */
.jf_req {
    color: #e5484d;
    font-weight: 700;
    margin-left: 1px;
}

/* B-99 · blur 검증 실패 시 빨간 테두리(크롬식). 모든 app-input 공통. */
.app-input.app-input-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 1px #dc3545;
}

.app-join-submit {
    margin-top: 8px;
}

.app-join-desc {
    color: #cbd5e1;
    text-align: center;
    padding: 16px 0;
}

/* JoinCodeModal — app-login-modal 재사용 + 설명/에러 텍스트만 */
.app-join-modal-desc {
    color: #cbd5e1;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: center;
}

.app-join-modal-error {
    color: #f87171;
    font-size: 13px;
    margin: 8px 0 0;
    text-align: center;
}

/* ===========================================================
 * CF §B · 가입 리뉴얼(JoinForm — 페이지/모달 공용) — 톤 = 로그인 리뉴얼 토큰(login_* 벤치마크).
 * 구획(계정/입금 정보/본인 정보) + 구분선 + 2열 행(jf_grid2 — 375px 모바일 1열).
 * =========================================================== */
.jf_sec { font-size: 13px; font-weight: 700; color: var(--app-text-primary, #e8edf2); margin: 4px 0 2px; }
.jf_div { border: 0; border-top: 1px solid var(--app-border, rgba(255, 255, 255, .12)); margin: 12px 0 8px; }
/* CF-3 §A-2 — 구 2열(jf_grid2) 폐기: 세로 1열이라 375px 반응형 분기도 불요(규칙 삭제). */
.jf_code_btn { flex: 0 0 auto; width: auto; padding: 0 18px; }

/* ── CF-3b 정정 ② · 폼 구조: 입력부만 스크롤 / 버튼 영역 카드(모달) 하단 고정 ── */
.jf_root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;   /* flex 자식의 스크롤 성립 조건(없으면 컨테이너가 콘텐츠만큼 늘어남) */
}

.jf_body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
}

.jf_foot {
    flex: 0 0 auto;   /* 스크롤 없이도 제출·취소 버튼이 항상 보인다 */
}

/* CF-3b ③ — 버튼 2종 = 로그인 창 문법 축(.login_btn 베이스 공유 = 미러별 로그인 실렌더와 같은 높이·색).
   CF-3b 정정 ① — 축소 금지: flex:0 0 auto + min-height 못박음.
   ⚠️ min-height 값 = "로그인 버튼 실측값"을 미러별로 자동 정합시키는 관용구 —
      front·c1 은 --login-btn-h(48px)를 정의하므로 그 값, s2 는 변수 미정의라 폴백 46px(= s2 .login_btn 리터럴).
      (.login_btn 자체의 flex:0 0 auto 는 front·c1 에만 있고 s2 정의엔 없어 미러별로 증상이 갈렸다.) */
.jf_submit,
.jf_cancel {
    flex: 0 0 auto;
    min-height: var(--login-btn-h, 46px);
}
.jf_submit { width: 100%; margin-top: 12px; }
/* CF-3 §B — 하단 보조 [가입취소] = 로그인 창 「회원가입」 보조(login_btn_sub) css 그대로 */
.jf_cancel { display: block; width: 100%; margin-top: 10px; }
/* 모달 형태 — 폼이 길어 세로 스크롤 허용(닫기 X·타이틀은 고정 톤 유지).
   CF-3b 정정 ② — 스크롤 주체를 안쪽(jf_body)으로 넘기고 여기는 높이 캡 + flex 컨테이너 역할만
   (모달에서도 버튼 영역이 하단 고정). */
.jf_modal { max-width: 420px; width: calc(100vw - 32px); }
.jf_modal_body {
    display: flex;
    flex-direction: column;
    max-height: min(72vh, 640px);
    overflow: hidden;
    padding-right: 4px;
}
@media (max-width: 480px) {
    .jf_modal_body { max-height: 70vh; }
}

/* ===========================================================
 * CF-3 §C-1 · 도어리스 가입 모달 — PM 지정 CSS 리터럴(JoinModal 인스턴스 한정 · 전역 모달 무접촉).
 * backdrop: flex 중앙 정렬 해제(margin: 5% auto 0 문법 성립) + 세로 스크롤.
 * =========================================================== */
.app-login-modal-backdrop.jf_doorless_bd {
    display: block;
    overflow-y: auto;
    scrollbar-gutter: stable;   /* CF-3b ② — 모달 자체 스크롤바 등장·소멸 폭 점프 동일 봉합 */
}

.app-login-modal.jf_doorless {
    /* 지정 리터럴 (§C-1 — CF-3b ①: width 300px → calc(100vw - 32px) 갱신 + max-width 600px 병행) */
    background-image: linear-gradient(134deg, rgb(63,63,63) 0px, rgb(16,16,16) 5%,
        rgba(28,28,28,.68) 30%, rgba(0,0,0,.45) 50%, rgba(41,41,41,.59) 70%,
        rgb(16,16,16) 95%, rgb(63,63,63));
    width: calc(100vw - 32px);
    max-width: 600px;   /* CF-3b ② 센터 600px 정합 — 데스크톱 과대 확장 방지(구 .jf_modal 420 캡 대체) */
    border: 2px solid rgb(33,33,33);
    border-image: none;
    border-radius: 15px;
    overflow: hidden;
    padding: 20px;
    margin: 5% auto 0;
    /* 지정값 보존 보조 — 기본 모달의 슬레이트 반투명 배경색이 그라디언트 투명 구간에 비치는 것 중화 */
    background-color: rgb(16, 16, 16);
}