/* 공통 */
.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: 92%; min-width: unset; padding: 22px 16px; 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: 28px 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-bottom: 10px; margin-bottom: 10px; font-size: 1.4rem; font-weight: 600; color: #0075be; border-bottom: 1px solid #eee; }
.join_form .terms-title { padding: 0 3%; margin: 18px 0 8px; font-size: 1.2rem; font-weight: 600; color: #333; }

/* 입력 그룹 */
.join_form .joinbox-group { text-align: left; padding: 0 2% 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 .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 { 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; }

/* 약관 박스 */
.join_form .terms { height: 180px; border: 1px solid #eee; border-radius: 10px; margin: 12px 2% 0; box-sizing: border-box; overflow: hidden; }
.join_form .terms-inner { height: 100%; overflow-y: auto; white-space: pre-wrap; font-size: 1rem; line-height: 1.6rem; text-align: left; padding: 10px; box-sizing: border-box; /* Firefox */ 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 .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 10px 10px; margin-bottom: 10px; }
    .join_form .terms-title { padding: 0 16px; }

    .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 { height: 40px; font-size: 13px; padding: 0 10px; }

    .join_form .terms { height: 160px; margin: 10px 16px 0; border-radius: 10px; font-size: .97rem; line-height: 1.5rem; padding: 8px; }

    .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; }
}