/* 크레존 관리자 추가 스타일. common.css(admin_html_template 원본)는 수정하지 않고 이 파일에서 보완한다. */

/* AJAX 결과 메시지 영역(가이드 6.7.1절) */
.result_message{margin:0;padding:0 60px;font-size:15px;line-height:24px;color:#0A7F8C;}
.result_message:not(:empty){padding-top:24px;}
.result_message:not(:empty) + .contents{padding-top:24px;}

/* 입력 필드 오류 */
.field-error{margin-top:6px;font-size:13px;line-height:20px;color:#EE605F;}
.field-error:empty{display:none;}
[aria-invalid="true"]{border-color:#EE605F !important;}

/* 공통코드 관리 */
.code_group_area{margin-bottom:40px;}
.code_group_area .board_col_list table tr.on td{background:#F2FAFB;font-weight:500;}
.board_col_list table .use_n{color:#999;}
.board_col_list .no_data{padding:40px 16px;color:#666;}

/* 헤더 로그아웃(POST 폼) */
.user_info form{float:left;}

/* 역할별 접근 권한: 권한 체크박스 목록 */
.authority_chk_list::after{content:'';display:block;clear:both;}
.authority_chk_list li{float:left;width:50%;padding:4px 0;}

/* 구글 OTP 등록(login-otp.html) */
.otp_setup .otp_qr{padding:16px 0;text-align:center;}
.otp_setup .otp_qr img{background:#fff;padding:8px;}
.otp_setup .otp_key{padding-bottom:16px;text-align:center;color:#fff;word-break:break-all;}

/* 작성자: zang0885. 로그인·가입·OTP 화면은 흰색 카드 안에서 대비를 확보한다. */
.wrap.login_wrap { height: auto; min-height: 100%; padding: 40px 20px; box-sizing: border-box; }
.login_wrap .right_box { width: 100%; max-width: 560px; }
.login_wrap .login_box { width: 100%; margin: 0 auto; padding: 32px; box-sizing: border-box; border: 1px solid #d6dee6; border-radius: 16px; background: #fff; color: #1f2937; line-height: 1.6; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24); }
.login_wrap .login_box .tit { padding-bottom: 20px; color: #1f2937; font-size: 28px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.login_wrap .login_box .tit em { color: #087682; }
.login_wrap .login_box .txt_notice { padding-top: 16px; color: #475569; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.login_wrap .login_box .txt_notice span { color: inherit; }
.login_wrap .login_box [role="alert"] { color: #b42318; font-weight: 500; }
.login_wrap .login_box .txt_notice a { color: #075e68; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.login_wrap .login_box .form_box dt { color: #1f2937; font-size: 16px; font-weight: 500; line-height: 1.5; }
.login_wrap .login_box .form_box input { background-color: #fff; color: #1f2937; border-color: #94a3b8; }
.login_wrap .login_box .form_box input::placeholder { color: #64748b; opacity: 1; }
.login_wrap .login_box .form_box input:disabled { background-color: #f1f5f9; color: #475569; }
.login_wrap .login_box .btn_wrap { padding-top: 24px; }
.login_wrap .login_box .btn_wrap button { background: #087682; color: #fff; font-weight: 700; }
.login_wrap .login_box .btn_wrap button:hover { background: #075e68; }
.login_wrap .login_box .btn_wrap button:disabled { background: #e2e8f0; color: #475569; }
.login_wrap .login_box :is(a, button, input):focus-visible { outline: 3px solid #075e68; outline-offset: 3px; }
.login_wrap .login_box .otp_key { margin: 8px 0; padding: 12px; border-radius: 6px; background: #f1f5f9; color: #1f2937; font-size: 14px; line-height: 1.7; }
.login_wrap .login_box .otp_qr img { width: 200px; max-width: 100%; height: auto; box-sizing: border-box; }
@media (max-width: 600px) {
    .wrap.login_wrap { padding: 24px 16px; }
    .login_wrap .login_box { padding: 24px 20px; }
    .login_wrap .login_box .tit { font-size: 24px; }
}

/* 작성자: zang0885. 외부관리자 가입 동의문과 체크박스의 가독성을 보완한다. */
.login_wrap .join_box { max-width: 520px; }
.login_wrap .join_step { margin: 4px 0 12px; color: #075e68; font-size: 15px; font-weight: 700; }
.login_wrap .join_terms { margin: 16px 0; padding: 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #1f2937; font-size: 15px; line-height: 1.8; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
.login_wrap .join_terms_tit { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.login_wrap .join_draft { margin-bottom: 8px; color: #b42318; font-size: 14px; font-weight: 500; }
.login_wrap .join_check { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; margin-top: 12px; color: #1f2937; font-size: 15px; font-weight: 500; cursor: pointer; }
.login_wrap .join_check input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; margin: 0; flex: 0 0 20px; appearance: auto; -webkit-appearance: auto; accent-color: #087682; cursor: pointer; }
.login_wrap .join_errors { padding-left: 20px; list-style: disc; color: #b42318; text-align: left; }