/* 비밀번호 검증 시스템 스타일 */

/* 비밀번호 강도 표시 */
.password-strength {
 margin-top: 8px;
}

.strength-bar {
 width: 100%;
 height: 4px;
 background-color: #e1e5e9;
 border-radius: 2px;
 overflow: hidden;
}

.strength-fill {
 height: 100%;
 width: 0%;
 transition: width 0.3s ease, background-color 0.3s ease;
 border-radius: 2px;
}

.strength-text {
 font-size: 12px;
 margin-top: 4px;
 font-weight: 500;
}

/* 강도별 색상 */
.strength-weak .strength-fill { 
 background-color: #dc3545; 
}

.strength-fair .strength-fill { 
 background-color: #ffc107; 
}

.strength-good .strength-fill { 
 background-color: #17a2b8; 
}

.strength-strong .strength-fill { 
 background-color: #28a745; 
}

.strength-weak .strength-text { color: #dc3545; }
.strength-fair .strength-text { color: #ffc107; }
.strength-good .strength-text { color: #17a2b8; }
.strength-strong .strength-text { color: #28a745; }

/* 비밀번호 일치 확인 */
.password-match {
 font-size: 12px;
 margin-top: 4px;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 4px;
}

.password-match.match {
 color: #28a745;
}

.password-match.no-match {
 color: #dc3545;
}

.password-match.empty {
 color: #6c757d;
}

/* 비밀번호 규칙 */
.password-rules {
 background-color: #f8f9fa;
 border: 1px solid #e9ecef;
 border-radius: 8px;
 padding: 16px;
 margin: 16px 0 20px 0;
}

.password-rules h4 {
 margin: 0 0 12px 0;
 font-size: 14px;
 color: #495057;
 display: flex;
 align-items: center;
 gap: 8px;
}

.rules-list {
 list-style: none;
 margin: 0;
 padding: 0;
}

.rules-list li {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 6px 0;
 font-size: 13px;
 color: #6c757d;
 transition: color 0.3s ease;
}

.rules-list li.valid {
 color: #28a745;
}

.rules-list li.valid i {
 color: #28a745;
}

.rules-list li i {
 color: #dc3545;
 font-size: 12px;
 width: 12px;
}

.rules-list li.valid i:before {
 content: "\f058"; /* fa-check-circle */
}

.rules-list li:not(.valid) i:before {
 content: "\f057"; /* fa-times-circle */
}

/* 폼 입력 필드 검증 스타일 */
.form-group input.valid {
 border-color: #28a745;
}

.form-group input.invalid {
 border-color: #dc3545;
}

.form-group input.valid:focus {
 border-color: #28a745;
 box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.form-group input.invalid:focus {
 border-color: #dc3545;
 box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* 비밀번호 보기/숨기기 토글 */
.password-input-group {
 position: relative;
}

.password-toggle {
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translateY(-50%);
 background: none;
 border: none;
 color: #6c757d;
 cursor: pointer;
 font-size: 14px;
 padding: 4px;
}

.password-toggle:hover {
 color: #495057;
}

/* 애니메이션 효과 */
@keyframes checkmark {
 0% {
 opacity: 0;
 transform: scale(0.8);
 }
 50% {
 opacity: 1;
 transform: scale(1.1);
 }
 100% {
 opacity: 1;
 transform: scale(1);
 }
}

.rules-list li.valid i {
 animation: checkmark 0.3s ease-out;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
 .password-rules {
 margin: 12px 0 16px 0;
 padding: 12px;
 }
 
 .password-rules h4 {
 font-size: 13px;
 }
 
 .rules-list li {
 font-size: 12px;
 }
}