/* ==========================================================
   DevType 회원가입 전용 스타일
   ========================================================== */

/* ==========================================================
   레이아웃
   ========================================================== */
.signup-wrapper {
    max-width: 480px;
    margin: 40px auto;
}

.signup-title {
    text-align: center;
    margin-bottom: 30px;
}

.signup-input { margin-top: 5px; margin-bottom: 15px; }
.signup-input-no-margin { margin-top: 5px; margin-bottom: 0; }
.signup-input-tight { margin-top: 5px; margin-bottom: 5px; }

.pw-match-text {
    font-size: 12.5px;
    margin-bottom: 18px;
    min-height: 18px;
}

.signup-btn { width: 100%; }

.signup-login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #8b949e;
}

.signup-login-link a {
    color: #00e5a0;
    text-decoration: none;
}

/* ==========================================================
   연락처 입력
   ========================================================== */
.phone-row {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.phone-row select {
    width: 150px;
    flex-shrink: 0;
    font-size: 13px;
}

.phone-row input { flex: 1; }

/* ==========================================================
   ⭐ 비밀번호 조건 (간단 버전)
   ========================================================== */
.pw-hint {
    margin-top: 8px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    transition: opacity .3s;
}

/* 통과 시 흐리게 */
.pw-hint.all-valid {
    opacity: 0.4;
}

.pw-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(139, 148, 158, .12);
    color: #8b949e;
    border: 1px solid #30363d;
    transition: all .2s;
}

.pw-tag.valid {
    background: rgba(63, 185, 80, .15);
    color: #3fb950;
    border-color: rgba(63, 185, 80, .4);
}

.pw-tag.valid::before {
    content: "✓";
    font-weight: 700;
}

.pw-tag.invalid {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
    border-color: rgba(248, 81, 73, .4);
}

/* ⭐ [Phase 2 작업3] 미사용 (HTML에서 토글 span 제거됨)
   - 클래스 정의는 유지: 다른 화면이나 추후 재사용 대비
   - 실제로는 마크업에 더 이상 등장하지 않음 */
.pw-special-toggle {
    margin-left: auto;
    font-size: 11px;
    color: #58a6ff;
    cursor: pointer;
    text-decoration: underline;
}

/* ⭐ [Phase 2 작업3] 특수문자 안내 박스
   - 변경 전: display:none (.show 클래스로 토글)
   - 변경 후: 항상 block 노출
   - 폰트 사이즈: 11.5px → 13px (가독성 ↑, 비밀번호 변경 디자인 톤)
   - "사용 가능 특수문자: ..." 라벨 포함된 한 줄 형태 */
.pw-special-list {
    display: block;
    margin-top: 8px;
    padding: 10px 14px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #79c0ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.6;
    word-break: break-all;
}

/* ⭐ [Phase 2 작업3] 라벨 부분 - 라이트 그레이로 강조 */
.pw-special-list .pw-special-label {
    color: #c9d1d9;
    font-family: 'Sora', 'Pretendard', sans-serif;
    font-weight: 600;
    margin-right: 6px;
    letter-spacing: normal;
}

/* ⭐ [Phase 2 작업3] .show 클래스는 더 이상 토글 용도가 아니지만,
   기존 HTML에 남아있어도 영향 없도록 유지 */
.pw-special-list.show { display: block; }

/* ==========================================================
   약관 동의 모달
   ========================================================== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active { display: flex; }

.modal-box {
    background: #161b22;
    border: 1.5px solid #30363d;
    border-radius: 14px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 22px 26px;
    border-bottom: 1.5px solid #30363d;
}

.modal-header h2 {
    font-size: 18px;
    color: #f0f6fc;
}

.modal-body {
    padding: 22px 26px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 18px 26px;
    border-top: 1.5px solid #30363d;
    display: flex;
    gap: 10px;
}

.modal-btn { flex: 1; }

/* ==========================================================
   약관 박스
   ========================================================== */
.agree-box {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.agree-box.agree-all {
    background: linear-gradient(135deg, #1c2330, #0d1f12);
    border-color: #00e5a0;
}

.agree-box label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #c9d1d9;
}

.agree-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00e5a0;
    flex-shrink: 0;
    cursor: pointer;
}

.agree-all-label {
    color: #f0f6fc;
    font-weight: 700;
    font-size: 15px;
}

.agree-all-desc {
    margin-top: 6px;
    margin-left: 28px;
    font-size: 12px;
    color: #8b949e;
    line-height: 1.5;
}

.required {
    color: #ff7b72;
    font-weight: 700;
    margin-left: 4px;
    font-size: 12px;
}

.optional {
    color: #79c0ff;
    margin-left: 4px;
    font-size: 12px;
}

.view-btn {
    margin-left: auto;
    color: #58a6ff;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.agree-content {
    background: #0a0f14;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 10px;
    font-size: 13px;
    color: #b1bac4;
    line-height: 1.7;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.agree-content.show { display: block; }

.agree-content p {
    margin: 6px 0;
}

.agree-content strong {
    color: #f0f6fc;
}

.view-full-link {
    display: inline-block;
    margin-top: 10px;
    color: #00e5a0;
    font-size: 12px;
    font-weight: 600;
}