.auth-main-wrap { width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
.auth-inner { max-width:320px; margin:0 auto; padding:24px 0; }
.auth-inner h1 { font-size:20px; margin-bottom:12px; }

.auth-inner .row { margin:12px 0; }
.auth-inner label { display:block; margin-bottom:6px; font-weight:600; }

.auth-inner input { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }

.auth-inner input[type="text"],
.auth-inner input[type="email"],
.auth-inner input[type="password"],
.auth-inner input[type="tel"] { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; outline:0; }

.sns-btn-wrapper { display: flex; flex-direction: column; gap: 6px; }
.sns-login-btn { width: 100%; height: 52px; display: flex; align-items: center; box-sizing: border-box; font-size: 15px; font-weight: 500; border-radius: 8px; justify-content: center; position: relative; }
.sns-login-naver { color: white; background-color: #03C75A; }
.sns-login-btn.sns-login-kakao > img { width: 100%; }
.sns-login-btn.sns-login-naver > img  { width: 50px; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; }
.sns-login-btn.sns-login-naver { padding-left: 4%; }
.sns-login-btn.sns-login-naver.more-fix { padding-left: 6%; }
input.is-error { border-color:#c00; background:#fff6f6; }

button:disabled { opacity:.6; cursor:not-allowed; }

.hint { font-size:12px; color:#666; }

.gayp-btn { width:100%; padding:12px; border:0; border-radius:10px; background:#111; color:#fff; font-weight:700; cursor:pointer; }

button[type="submit"] { width:100%; }

.err { color:#c00; font-size:13px; margin-top:6px; }

/* 약관 체크 + 보기 버튼 라인 */
.terms-row { display:flex; justify-content:space-between; gap:8px; font-size:14px; flex-direction:column; text-align:left; }
.terms-label { display:flex; align-items:center; gap:6px; margin-bottom:0; }
.terms-label input[type="checkbox"] { width:auto; margin:0; }
.terms-view-btn { padding:6px 10px; border-radius:6px; font-size:12px; background:#f1f3f5; color:#333; white-space:nowrap; border:0; cursor:pointer; }
.terms-view-btn:hover { background:#e5e7eb; }

/* 딤드 + 모달 */
.dimmed { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:999; }
.dimmed.is-open { opacity:1; pointer-events:auto; }

.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000; }
.modal.is-open { display:flex; }

.modal-dialog { background:#fff; width:100%; max-width:420px; max-height:80vh; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; }

.modal-header { padding:14px 16px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:15px; font-weight:600; }
.modal-close { border:none; background:none; padding:4px 8px; font-size:18px; line-height:1; cursor:pointer; }

.modal-body { padding:12px 16px; font-size:13px; line-height:1.6; overflow-y:auto; }
.modal-body h3 { font-size:14px; margin:6px 0; }
.modal-body p,
.modal-body li { margin:4px 0; }

.modal-footer { padding:10px 16px 12px; border-top:1px solid #eee; }
.modal-footer .btn-primary { width:100%; padding:10px; border-radius:8px; font-size:14px; border:0; cursor:pointer; }

/* 모달 안에서 약관 텍스트가 길어질 걸 대비한 약간의 정돈용 */
.modal-body .terms-text { font-size:13px; line-height:1.7; color:#333; }
.modal-body .terms-text h5 { margin:8px 0 4px; font-size:14px; font-weight:600; }
.modal-body .terms-text ol,
.modal-body .terms-text ul { margin:4px 0 4px 16px; padding-left:4px; }
.modal-body .terms-text li { margin:2px 0; }

/* 반응형 */
@media (max-width:480px) {
    body { margin:24px auto; padding:0 12px; }
    .modal-dialog { max-width:100%; max-height:85vh; border-radius:10px; }
    .modal-body { font-size:12px; }
    .terms-row { flex-direction:row; align-items:flex-start; }
    .terms-view-btn { padding:6px 8px; }
}

@media (max-width:1024px) {
    #signupForm { width:100%; max-width:100%; }
}
