/* 공통 */
.form-label { cursor: inherit; }
.timer { color: #aaa; font-weight: 300; }
.text-danger { color: #0075be; position: absolute; padding-left: 10px; padding-top: 5px; }

/* UsrJoin1 */

/* ==================== Base (PC, ≥1025px) ==================== */
.join_wrap { width: 35%; min-width: 400px; max-width: 520px; padding: 5vh 3rem 3vh; text-align: center; background: #fff; border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,.08); transform: translateY(-30px); margin: auto; box-sizing: border-box; }
.join_wrap .form-title { font-size: 1.3rem; font-weight: 500; margin-bottom: 1vh; }

/* 라벨/행/입력 공통 */
.join_wrap .joinbox-group { text-align: left; padding-bottom: 1vh; display: flex; flex-direction: column; box-sizing: border-box; }
.join_wrap .joinbox-group .form-label {padding-bottom:3px;}
.join_wrap .join-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; }
.join_wrap .join-row .form-control { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid #eee; border-radius: 10px; padding: 0 6px; font-size: 14px; }
.join_wrap .join-row .input-group-text { height: 44px; line-height: 44px; padding: 0 10px; border-radius: 10px; white-space: nowrap; color: #777; }

/* 버튼은 항상 동일 크기(PC) */
.join_wrap .btn-join1,
.join_wrap .btn-join2 { flex: 0 0 120px; height: 44px; line-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 500; text-align: center; white-space: nowrap; box-sizing: border-box; }
.join_wrap .btn-join1 { background: #333; color: #fff; }
.join_wrap .btn-join2 { background: #0075be; color: #fff; }

/* ==================== Tablet (601–1024px) ==================== */
@media (max-width:1024px) and (min-width:601px) {
    .join_wrap { width: 60%; min-width: 320px; max-width: 600px; padding: 40px 30px; transform: translateY(-20px); }
    .join_wrap .join-row .form-control,
    .join_wrap .join-row .input-group-text { height: 42px; line-height: 42px; font-size: 13px; }
    .join_wrap .btn-join1,
    .join_wrap .btn-join2 { flex: 0 0 110px; height: 42px; line-height: 42px; font-size: 13px; }
}

/* ==================== Mobile (≤600px) ==================== */
@media (max-width:600px) {
    .join_wrap { width: 82%; min-width: unset; padding: 22px 20px; border-radius: 20px; transform: none; box-shadow: 0 4px 12px rgba(0,0,0,.10); }

    /* 한 줄 정렬을 Grid 로 변경: 입력 1fr + 버튼 auto (+ 타이머 auto) */
    .join_wrap .join-row { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
    .join_wrap .join-row:has(.input-group-text) { grid-template-columns: 1fr auto auto; }

    /* 입력/타이머/버튼 높이 & 글꼴 통일 */
    .join_wrap .join-row .form-control { height: 40px; font-size: 13px; }
    .join_wrap .join-row .input-group-text { height: 40px; line-height: 40px; font-size: 13px; padding: 0 8px; }

    /* 모바일 버튼 크기 고정 */
    .join_wrap .btn-join1,
    .join_wrap .btn-join2 { flex: 0 0 auto; width: 110px; height: 40px; line-height: 40px; font-size: 13px; }
}



/* UsrJoin2 */

/* ================= Base (PC, ≥1025px) ================= */
.join-form { width: 36%; min-width: 400px; max-width: 560px; padding: 2vh 0; background: #fff; border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,.08); box-sizing: border-box; margin: auto; }
.join-form .join-scroll { max-height: 72vh; /* 스크롤 영역 과도하지 않게 */ overflow-y: auto; padding: 0 5%; box-sizing: border-box; }

/* 타이틀 */
.join-form .form-title { padding: 0 4%; padding-bottom: 10px; font-size: 1.4rem; font-weight: 600; color: #0075be; border-bottom: 1px solid #eee; }
.join-form .terms-title { margin: 18px 0 8px; font-size: 1.2rem; font-weight: 600; color: #333; }

/* 입력 그룹 */
.join-form .joinbox-group { text-align: left; padding: 0 0 10px; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; }
.join-form .joinbox-group .form-label { font-size: 14px; font-weight: 500; /*color: #333;*/ }
.join-form .joinbox-group:first-child {padding-top:15px;}
/* 한 줄 레이아웃 */
.join-form .join-row,
.join-form .join2-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; }

/* 인풋/셀렉트 */
.join-form .joinbox-group .form-control,
.join-form .join2-row .form-control, .join-form .join2-row .pw-wrap .form-input { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid #eee; border-radius: 10px; padding: 0 8px; font-size: 14px; box-sizing: border-box; }
.join-form .join2-row .form-select { flex: 0 0 40%; /* ✅ 고정 폭, 필요에 따라 조절 가능 */ height: 44px; border: 1px solid #eee; border-radius: 10px; padding: 0 10px; font-size: 14px; box-sizing: border-box; }


/* 인풋/셀렉트 4:6 비율 */
.row-4-6 .form-control:first-child { flex: 0 0 40%; }
.row-4-6 .form-control:last-child { flex: 0 0 58%; }
.row-4-6 .form-select:first-child { flex: 0 0 40%; }
.row-4-6 .form-select:last-child { flex: 0 0 58%; }

/* 포커스 */ .join-form .joinbox-group .form-control:focus, .join-form .joinbox-group .form-control:hover, .join-form .join-row .form-control:focus, .join-form .join-row .form-control:hover { outline: none; border: 2px solid #0091db; transition: border-color .3s, box-shadow .3s; }

/* [251022 SYE] 회원가입 내 약관 CSS */
.join-form .terms { height: 180px; border: 1px solid #eee; border-radius: 10px; margin-top: 12px; box-sizing: border-box; overflow: hidden; }
/* 스크롤 영역 */
.join-form .terms-inner { height: 100%; overflow-y: auto; font-size: 14px; line-height: 1.5; text-align: left; padding: 0 12px 8px; box-sizing: border-box; color: #333; scrollbar-color: rgba(0, 0, 0, 0.35) transparent; }
/* WebKit (Chrome, Edge, Safari 등) */
.join-form .terms-inner::-webkit-scrollbar { width: 8px; }
.join-form .terms-inner::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
.join-form .terms-inner::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.join-form .terms-inner::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.55); }
.join-form .terms-inner::-webkit-scrollbar-corner { background: transparent; }
/* 본문 컨테이너 */
.join-form .terms .terms-section { padding: 10px 3px 7px; border-top: 1px dashed #e5e7eb; color: #333; }
.join-form .terms .terms-section:first-of-type { border-top: none; }
.join-form .terms .terms-section:last-child { padding-bottom: 2px; }
/* 제목/문단/리스트 */
.join-form .terms .terms-section h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.1px; color: #222; }
.join-form .terms .terms-section h4 { font-size: 14px; font-weight: 600; margin: 8px 0 3px; line-height: 1.45; color: #333; }
.join-form .terms .terms-section p { margin: 2px 0; line-height: 1.5; font-size: 13px; color: #333; }
/* 리스트 */
.join-form .terms .terms-ctt .terms-section ul { list-style: disc; padding-left: 1.1rem; margin: 6px 0 8px; }
.join-form .terms .terms-ctt .terms-section ul > li { margin: 2px 0; line-height: 1.4; font-size: 13px; font-weight: 400; color: #333; }
/* 2뎁스 대시 목록 */
.join-form .terms .terms-ctt .terms-section ul ul { list-style: none; padding-left: 0.5rem; margin: 4px 0; }
.join-form .terms .terms-ctt .terms-section ul ul > li { position: relative; padding-left: 0.9rem; margin: 3px 0; line-height: 1.4; color: #333; }
.join-form .terms .terms-ctt .terms-section ul ul > li::before { content: "–"; position: absolute; left: 0; top: 0; color: #555; }
/* 빈 섹션 숨김 */
.join-form .terms .terms-section:empty { display: none; }
/* 반응형 */
@media (max-width:380px) {
    .join-form .terms-inner { font-size: 13.5px; }
    .join-form .terms .terms-section h3 { font-size: 15px; }
}

/* 체크박스/버튼 영역 */
.join-form .form-check { text-align: left; font-size: 14px; padding: 10px 2% 18px; }
.join-form .btn-join2 { display: block; width: 44%; min-width: 220px; height: 44px; line-height: 44px; font-size: 15px; font-weight: 600; border-radius: 10px; margin: 14px auto 6px; background: #0075be; color: #fff; text-align: center; }

/* 도움말 텍스트(비밀번호 안내 등) */
.join-form .form-text.text-muted { color: #777; font-size: 13px; margin-top: 6px; }


/* ================= Tablet (601–1024px) ================= */
@media (max-width:1024px) and (min-width:601px) {
    .join-form { width: 60%; min-width: 340px; max-width: 640px; padding: 24px 0; border-radius: 20px; }
    .join-form .join-scroll { max-height: 70vh; padding: 0 5%; }

    .join-form .form-title { font-size: 1.45rem; padding-bottom: 14px; }
    .join-form .terms-title { font-size: 1.1rem; }

    .join-form .joinbox-group { padding-bottom: 18px; }
    .join-form .joinbox-group .form-label { font-size: 13.5px; }

    .join-form .joinbox-group .form-control,
    .join-form .join2-row .form-control,
    .join-form .join2-row .form-select { height: 42px; font-size: 13.5px; }

    .join-form .terms { height: 170px; font-size: .98rem; line-height: 1.55rem; }

    .join-form .form-check { font-size: 13.5px; }
    .join-form .btn-join2 { width: 50%; min-width: 220px; height: 42px; line-height: 42px; font-size: 13.5px; }
}


/* ================= Mobile (≤600px) ================= */
@media (max-width:600px) {
    .join-form { width: 92%; min-width: unset; max-width: unset; padding: 12px 0; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .join-form .join-scroll { max-height: 74vh; padding: 0 10px; }
    .join-form .form-title { font-size: 1.25rem; line-height: 30px; padding: 0 20px 10px; margin-bottom: 10px; }
    .join-form .terms-title { padding: 0 10px; }

    .join-form .joinbox-group { padding: 0 10px 10px; gap: 5px; }
    .join-form .joinbox-group .form-label { font-size: 13px; }

    /* 모바일에선 Grid로 한 줄 정렬 안정화 (입력 1fr) */
    .join-form .join2-row { display: grid; grid-template-columns: 1fr; /* 버튼 붙는 줄이 아니므로 1열 */ gap: 8px; }

    .join-form .joinbox-group .form-control,
    .join-form .join2-row .form-control,
    .join-form .join2-row .form-select { font-size: 13px; padding: 0 10px; }
    .join-form .joinbox-group .form-control, .join-form .join2-row .form-control, .join-form .join2-row .pw-wrap .form-input {height:40px; }
    .join-form .terms { height: 160px; margin: 10px 10px 0; border-radius: 10px; font-size: .97rem; line-height: 1.5rem; padding: 3px; }

    .join-form .form-check { font-size: 13px; padding: 10px 15px 0; }

    .join-form .btn-join2 { width: 90%; min-width: unset; height: 42px; line-height: 42px; font-size: 13.5px; margin: 10px auto; }
    .join-form .form-text.text-muted { margin-top: 0; }
}