@charset "utf-8";
 {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }


/* 로딩 이미지 스타일 */
#loadingSpinner {
	display: none; /* 초기에는 숨김 */
	position: fixed; /* 화면에 고정 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 중앙 정렬 */
	z-index: 1000; /* 다른 요소 위에 표시 */

	/* 스피너 모양 정의 */
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3; /* 연한 회색 테두리 (스피너의 기본 원형) */
	border-top: 5px solid #3498db; /* 파란색 테두리 (회전하는 부분) */
	border-radius: 50%; /* 원형으로 만듦 */

	/* 애니메이션 적용 */
	animation: spin 1s linear infinite; /* spin이라는 애니메이션을 1초 동안 선형(linear)으로 무한 반복 */
}

/* 애니메이션 키프레임 정의 */
@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); } /* 시작 시 0도 회전 */
	100% { transform: translate(-50%, -50%) rotate(360deg); } /* 끝 시 360도 회전 */
}

/* (선택 사항) 로딩 중 오버레이 */
#loadingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3); /* 반투명 검은색 */
	z-index: 999; /* 스피너보다 아래에 위치 */
}
		
.top_btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #3498db;
	color: white;
	border: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.top_btn i {
	font-size: 20px;
}

.top_btn:hover {
	transform: scale(1.1);
}

/*패스워드 폼*/

/*패스워드 폼*/
#pass-form {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    min-height: 100vh; 
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#pass-form .pass-container {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}
#pass-form .pass-container   h2 {
          font-size: 1.5rem;
          font-weight: 500;
          text-align: center;
          color: #1f2937;
          margin-bottom: 1.5rem;
      }
#pass-form .pass-container   .input-wrapper {
          position: relative;
          margin-bottom: 2rem;
      }

#pass-form .pass-container   .password-input {
          width: 100%;
          padding: 0.75rem 1rem 0.75rem 2.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          background-color: #f9fafb;
          font-size: 1rem;
          color: #1f2937;
		  margin-top:7px;
      }
 #pass-form .pass-container      .password-input:focus {
          outline: none;
          border-color: #4F46E5;
          box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
      }
 #pass-form .pass-container      .password-input::placeholder {
          color: #9ca3af;
      }
  #pass-form .pass-container     .button-group {
          display: flex;
          gap: 1rem;
      }
#pass-form .pass-container       .button {
          flex: 1;
          padding: 0.75rem 1rem;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          cursor: pointer;
          transition: background-color 0.2s;
          white-space: nowrap;
      }
#pass-form .pass-container       .button-cancel {
          background-color: #e5e7eb;
          color: #4b5563;
      }
 #pass-form .pass-container      .button-cancel:hover {
          background-color: #d1d5db;
      }
 #pass-form .pass-container      .button-submit {
          background-color: #4F46E5;
          color: white;
      }
 #pass-form .pass-container      .button-submit:hover {
          background-color: #4338ca;
      }
	  
 #pass-form .pass-container #passwordError{color:#ff0000; margin-top:10px; font-size:14px;}
 #pass-form .pass-container #emailError{color:#ff0000; margin:10px 0; font-size:14px;}
  #pass-form .pass-container #forgotPasswordError{color:#ff0000; margin:10px 0; font-size:14px;}
   #pass-form .pass-container #tempPasswordDisplay{color:#333; margin:10px 0; font-size:14px;}
   

/* ==========================================================================
   4. Pagination
   ========================================================================== */

.cm-pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.cm-pagination {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.cm-pagination-item {
    margin: 0 4px;
}

.cm-pagination-link {
    display: block;
    padding: 8px 12px;
    color: #555;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.cm-pagination-link:hover {
    color: #3498db;
    border-color: #3498db;
    background-color: #f8f9fa;
}

.cm-pagination-item.cm-pagination-active .cm-pagination-link {
    font-weight: bold;
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
    cursor: default;
}

.cm-pagination-item.cm-pagination-active .cm-pagination-link:hover {
    color: #fff;
}