.project_wrap { min-width:auto!important; }
main { width:100%; height:100%; position:relative; background:#4F46E5; }

/* ══════════════════════════════════════════════════════════════════
   회원가입 — 좌우 분할 (#join.join_split). 로그인(login.css)과 같은 규칙을 쓴다.
   약관 동의 · 이메일 인증 · 정보 입력을 한 화면에 합쳤다(예전 joinPolicy 페이지 없음).
   ────────────────────────────────────────────────────────────────
   ⚠ common.css 의 `* { color:#1E293B }` 가 자손에 color 를 직접 선언한다.
     head.html 로드 순서가 header.css → join.css → common.css 라서
     `:where(...) *{color:inherit}` 같은 0-명시도 우회는 통하지 않는다.
     브랜드 패널 안 텍스트는 하나도 빠짐없이 color 를 직접 지정할 것.
   ══════════════════════════════════════════════════════════════════ */
#join.join_split { display:grid; grid-template-columns:1.05fr 1fr; background:none; }

/* ── 좌: 브랜드 패널 ── */
#join.join_split .join_brand {
    width:auto; border:0;   /* header.css 의 전역 aside 규칙 대비 안전장치 */
    position:relative; overflow:hidden; padding:56px 52px; color:#fff;
    display:flex; flex-direction:column; justify-content:space-between;
    background:linear-gradient(155deg,#4F46E5 0%,#4338CA 55%,#312BA5 100%);
}
#join.join_split .join_brand::before {
    content:''; position:absolute; width:520px; height:520px; right:-160px; top:-160px; border-radius:50%;
    background:radial-gradient(circle,rgba(6,182,212,.35),transparent 65%);
}
#join.join_split .join_brand::after {
    content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:48px 48px;
}
/* 넓은 화면에서 글이 왼쪽 끝에 붙지 않도록 콘텐츠 컬럼을 가운데로 모은다 */
#join.join_split .join_brand > * { position:relative; z-index:1; width:100%; max-width:520px; margin-left:auto; margin-right:auto; }

/* 헤드라인 — 문구가 길어져 38px·자간 3px 로는 520px 컬럼을 넘친다. 28px·자간 -.3px 로 맞췄다 */
#join.join_split .brand_copy h2 { font-size:28px; line-height:1.46; font-weight:800; letter-spacing:-.3px; color:#fff; text-align:left; }
#join.join_split .brand_copy h2 i { font-style:normal; color:#67E8F9; }
#join.join_split .brand_copy p { margin-top:14px; max-width:520px; font-size:14.5px; line-height:1.72; text-align:left; color:rgba(255,255,255,.72); }
/* 기능 소개 카드 6개 (2열 3행) — 홈페이지 기능 카드를 축소해 옮긴 것.
   ⚠ common.css 의 `* { color:#1E293B }` 가 자손에 color 를 직접 선언하므로
     strong·span 에 색을 하나도 빠뜨리지 않고 지정해야 한다(상속에 기대면 검게 나온다). */
#join.join_split .brand_feats { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#join.join_split .brand_feats li { list-style:none; padding:13px 14px; border-radius:12px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); }
#join.join_split .brand_feats .ic { display:block; width:19px; height:19px; }
#join.join_split .brand_feats .ic img { width:100%; height:100%; display:block; }
#join.join_split .brand_feats strong { display:block; margin-top:7px; font-size:13.5px; font-weight:700; letter-spacing:-.2px; color:#fff; }
#join.join_split .brand_feats .d { display:block; margin-top:4px; font-size:11.5px; line-height:1.55; color:rgba(255,255,255,.62); }
#join.join_split .brand_note { font-size:12.5px; color:rgba(255,255,255,.5); text-align:left; }

#join.join_split .brand_logo { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:800; letter-spacing:-.7px; }
#join.join_split .brand_logo img { width:32px; height:32px; flex-shrink:0; }
#join.join_split .brand_logo em { font-style:normal; }
#join.join_split .join_brand .brand_logo { color:#fff; }
#join.join_split .join_brand .brand_logo em { color:#fff; }
#join.join_split .join_brand .brand_logo em span { color:#67E8F9; }
#join.join_split .brand_logo_sm { display:none; margin-bottom:24px; color:#4F46E5; }
#join.join_split .brand_logo_sm em span { color:#06B6D4; }

/* ── 우: 가입 폼 (길어서 이 영역만 스크롤한다) ── */
#join.join_split .join_panel {
    /* 기본 `main section`(절대중앙 카드)을 되돌린다 */
    width:auto; min-height:auto; padding:44px 24px; border-radius:0; position:static; transform:none;
    background:#fff; overflow-y:auto;
}
#join.join_split .join_form { width:100%; max-width:404px; margin:0 auto; }
#join.join_split .back_btn {
    width:34px; min-width:0; height:34px; padding:0; margin-bottom:18px;
    border:1px solid #E2E8F0; border-radius:9px; background:#fff;
    display:flex; align-items:center; justify-content:center;
}
#join.join_split .back_btn img { width:16px; height:16px; }
#join.join_split .join_form h3 { margin:0; font-size:25px; font-weight:800; letter-spacing:-.6px; text-align:left; line-height:1.42; }
#join.join_split .join_form p.lead { margin-top:9px; font-size:14px; text-align:left; color:#64748B; }

/* ── 섹션 ── */
#join.join_split .sec { margin-top:30px; }
#join.join_split .sec_head { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #E2E8F0; }
#join.join_split .sec_head b { font-size:14px; font-weight:800; letter-spacing:-.3px; }
#join.join_split .sec_head span { font-size:12px; color:#94A3B8; }

/* ── 입력 ── */
#join.join_split .field { margin-top:16px; }
#join.join_split .field .lab { display:flex; align-items:center; gap:3px; margin-bottom:7px; font-size:13px; font-weight:600; color:#334155; }
#join.join_split .field .lab i { font-style:normal; color:#EF4444; }
#join.join_split .field .box { position:relative; display:flex; gap:8px; }
#join.join_split .field input {
    width:100%; height:50px; padding:0 15px; border:1px solid #E2E8F0; border-radius:11px;
    font-size:15px; font-family:inherit; background:#fff; transition:border-color .15s, box-shadow .15s;
}
#join.join_split .field input::placeholder { color:#A5B0C0; }
#join.join_split .field input:focus { border-color:#4F46E5; box-shadow:0 0 0 4px rgba(79,70,229,.12); }
#join.join_split .field input:disabled { background:#F8FAFC; color:#64748B; }
#join.join_split .field .side {
    min-width:96px; height:50px; padding:0 14px; border:1px solid #4F46E5; border-radius:11px; background:#fff;
    color:#4F46E5; font-family:inherit; font-size:13.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
}
#join.join_split .field .side:hover { background:#EEF2FF; }
#join.join_split .field .side.ghost { border-color:#E2E8F0; color:#64748B; }
#join.join_split .field .side:disabled { border-color:#E2E8F0; color:#CBD5E1; background:#fff; cursor:not-allowed; }
#join.join_split .field .hint { margin-top:6px; font-size:12px; color:#94A3B8; }
#join.join_split .field .err { margin-top:6px; font-size:12px; color:#EF4444; font-weight:600; }
#join.join_split .field .done_txt { margin-top:6px; font-size:12px; color:#16A34A; font-weight:600; }
#join.join_split .field .timer { position:absolute; right:112px; top:50%; transform:translateY(-50%); font-size:12.5px; font-weight:700; color:#EF4444; }
#join.join_split .field.ok input { border-color:#86EFAC; background:#F0FDF4; }

/* 비밀번호 보기 토글 (기존 iconBox 스프라이트 유지) */
#join.join_split .field .viewBtn {
    width:38px; min-width:0; height:38px; padding:0; border:0; border-radius:9px; background:none;
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
}
#join.join_split .field .viewBtn:hover { background:#F1F5F9; }
#join.join_split .field .viewBtn span { width:20px; height:20px; display:inline-block; background:url('/image/iconBox.svg') no-repeat -60px 0; background-size:80px; }
#join.join_split .field input[type='text'] + .viewBtn span { background-position:-40px 0; }

/* 비밀번호 규칙 체크리스트 */
#join.join_split .rules { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px 14px; }
#join.join_split .rules li { list-style:none; font-size:12px; color:#94A3B8; display:flex; align-items:center; gap:5px; }
#join.join_split .rules li .dot { width:14px; height:14px; border-radius:50%; background:#E2E8F0; display:inline-block; position:relative; }
#join.join_split .rules li.pass { color:#16A34A; }
#join.join_split .rules li.pass .dot { background:#DCFCE7; }
#join.join_split .rules li.pass .dot::after {
    content:''; position:absolute; left:4px; top:2px; width:4px; height:7px;
    border:solid #16A34A; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ── 약관 ── */
#join.join_split input[type=checkbox] { width:18px; height:18px; accent-color:#4F46E5; flex-shrink:0; margin:0; }
#join.join_split .term_all {
    margin-top:14px; padding:14px 15px; border:1px solid #C7D2FE; background:#EEF2FF; border-radius:12px;
    display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; cursor:pointer;
}
#join.join_split .term_list { margin-top:4px; }
#join.join_split .term_list li { list-style:none; display:flex; align-items:center; gap:9px; padding:9px 15px; font-size:13.5px; color:#334155; }
#join.join_split .term_list li label { margin:0; font-weight:400; cursor:pointer; }
#join.join_split .term_list li .req { color:#4F46E5; font-weight:700; }
#join.join_split .term_list li .opt { color:#94A3B8; font-weight:700; }
#join.join_split .term_list li .view_btn {
    margin-left:auto; min-width:0; width:auto; height:auto; padding:0; border:0; background:none;
    font-size:12.5px; color:#94A3B8; text-decoration:underline; font-family:inherit;
}
#join.join_split .term_list li .view_btn:hover { color:#4F46E5; }

/* ── 가입 버튼 ── */
#join.join_split .join_btn {
    width:100%; min-width:0; height:52px; margin-top:26px; padding:0; border:0; border-radius:11px;
    font-family:inherit; font-size:15.5px; font-weight:700; color:#fff; background:#4F46E5;
    box-shadow:0 6px 16px rgba(79,70,229,.28); transition:background .15s, box-shadow .15s, transform .06s;
}
#join.join_split .join_btn:hover { background:#4338CA; }
#join.join_split .join_btn:active { transform:translateY(1px); }
#join.join_split .signup { margin-top:18px; margin-bottom:8px; font-size:13.5px; text-align:center; color:#64748B; }
#join.join_split .signup a { color:#4F46E5; font-weight:700; }

/* ── 태블릿·모바일 ── */
@media only screen and (max-width:900px){
    .project_wrap { height:auto; min-height:100vh; min-height:100dvh; display:block; }
    main { height:auto; }
    #join.join_split { display:block; min-height:100vh; min-height:100dvh; background:#fff; }
    #join.join_split .join_brand { display:none; }
    #join.join_split .brand_logo_sm { display:flex; }
    #join.join_split .join_panel { width:100%; padding:36px 22px 40px; overflow:visible; }
}
@media only screen and (max-width:480px){
    #join.join_split .join_panel { padding:30px 20px 36px; }
    #join.join_split .join_form h3 { font-size:23px; }
    #join.join_split .field input { height:48px; font-size:16px; } /* 16px 미만이면 iOS 사파리가 화면을 확대한다 */
    #join.join_split .field .side { min-width:86px; height:48px; font-size:12.5px; padding:0 10px; }
    #join.join_split .field .timer { right:100px; }
    #join.join_split .join_btn { height:50px; }
    #join.join_split .term_list li { padding:9px 8px; font-size:13px; }
    #join.join_split .term_all { padding:13px 12px; font-size:14px; }
}

/* 인라인 에러 — 입력 오류를 모달 대신 칸 아래에 띄운다 */
#join.join_split .err { margin-top:6px; font-size:12px; color:#EF4444; font-weight:600; line-height:1.5; }
/* 필수 항목이 다 채워지기 전까지 가입 버튼은 비활성 */
#join.join_split .join_btn:disabled { background:#CBD5E1; box-shadow:none; cursor:not-allowed; transform:none; }