/**
------------------------------------------------------------
 * @프로그램명:login 스타일시트
 * @파일명:rag_style.css
 * @작성일:2026. 3. 19.
 * @수정자:엄윤섭

------------------------------------------------------------
*/

/*===========================================================================================================================
													공통 
=============================================================================================================================*/
@font-face {
   font-family:'Pretendard';
   font-weight:100;
   src:url(../font/Pretendard/Pretendard-Thin.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-Thin.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Thin.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Thin.ttf) format('truetype');
}
@font-face {
   font-family:'Pretendard';
   font-weight:200;
   src:url(../font/Pretendard/Pretendard-ExtraLight.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-ExtraLight.otf) format('otf'),
      url(../font/Pretendard/Pretendard-ExtraLight.woff) format('woff'),
      url(../font/Pretendard/Pretendard-ExtraLight.ttf) format('truetype');
}
@font-face {
   font-family:'Pretendard';
   font-weight:300;
   src:url(../font/Pretendard/Pretendard-Light.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-Light.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Light.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Light.ttf) format('truetype');
}
@font-face {
   font-family:'Pretendard';
   font-weight:400;
   src:url(../font/Pretendard/Pretendard-Regular.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-Regular.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Regular.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Regular.ttf) format('truetype');
}
@font-face {
   font-family:'Pretendard';
   font-weight:500;
   src:url(../font/Pretendard/Pretendard-Medium.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-Medium.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Medium.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Medium.ttf) format('truetype');
}
@font-face {
   font-family:'Pretendard';
   font-weight:600;
   src:url(../font/Pretendard/Pretendard-SemiBold.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-SemiBold.otf) format('otf'),
      url(../font/Pretendard/Pretendard-SemiBold.woff) format('woff'),
      url(../font/Pretendard/Pretendard-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family:'Pretendard';
    font-weight:700;
    src:url(../font/Pretendard/Pretendard-Bold.woff2);
    src:local('☺'),
      url(../font/Pretendard/Pretendard-Bold.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Bold.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Bold.ttf) format('truetype');
}
@font-face {
font-family:'Pretendard';
   font-weight:800;
   src:url(../font/Pretendard/Pretendard-ExtraBold.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-ExtraBold.otf) format('otf'),
      url(../font/Pretendard/Pretendard-ExtraBold.woff) format('woff'),
      url(../font/Pretendard/Pretendard-ExtraBold.ttf) format('truetype');
}
@font-face {
font-family:'Pretendard';
   font-weight:900;
   src:url(../font/Pretendard/Pretendard-Black.woff2);
   src:local('☺'),
      url(../font/Pretendard/Pretendard-Black.otf) format('otf'),
      url(../font/Pretendard/Pretendard-Black.woff) format('woff'),
      url(../font/Pretendard/Pretendard-Black.ttf) format('truetype');
}



/* popup */
.modal-content {border-radius:15px; border:0; box-shadow:none; padding:10px 10px 25px; background:#494949; box-shadow:0 10px 10px rgba(0,0,0,0.2);}
.layerTop h4 {font-size:18px; font-weight:600; color:#fff;}
.layerTop .close {opacity:1; margin-right:0; font-size:0; margin-top:2px; width:30px; height:30px; background:url(../images/icon/btn_close.png) no-repeat center center; transition:0.2s; border:none; outline:none;}
.layerTop .close:hover {transform:rotate(90deg);}
.layerCon {background:transparent; color:#ccc; font-size:14px;}
.layerIn {padding-bottom:0 !important;}
.modal-content .layerCon {width:100%;}
.layerCon .popContents {margin-top:10px; padding:10px 10px 0;}
.modal-content .layerCon .msg {padding:15px 0; color:#ccc;}
.modal-content .layerCon .msg p {font-size:16px; font-weight:500;}
.modal-content .layerCon .btnArea {margin:20px 0 0; font-size:0; text-align:center; padding:0;}
.modal-content .layerCon .btnArea button {display:inline-block; padding:0 15px; margin:0; font-size:13px; text-align:center; border:1px solid #686868; border-radius:15px; position:relative; overflow:hidden; 
	color:#fff; background:#686868; font-weight:500; transition:0.2s; height:30px; line-height:28px; vertical-align:middle; min-width:100px;}
.modal-content .layerCon .btnArea button:hover {outline:none !important; box-shadow:none !important; text-decoration:none; color:#000; border-color:#dedede; background:#dedede;}
.modal-content .layerCon .btnArea button + button {margin-left:10px;}
.modal-content .layerCon .btnArea #btn_confirmOk {}
.modal-content .layerCon .btnArea #btn_confirmCancel {} 

.wrap_layer {height:100%; left:0; position:fixed; top:0; width:100%; z-index:10001; background-color:rgba(0, 0, 0, .2);}
.layerCon .msg {padding:10px; display:table; height:calc(100% - 54px); width:100%; color:#4b5f71;}
.layerCon .msg .p {display:table-cell; vertical-align:middle; text-align:center; font-weight:700; font-size:12px; width:100%;}

/* ********** 기본 설정 ********** */
*, *:before, *:after {box-sizing:border-box}

/* 일반 */
body {font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; font-size:14px; font-weight:400; line-height:1.4271; background:#000; color:#fff;
	min-width:320px; overflow-x:auto; overflow-y:hidden;}
	
.container {max-width:none !important;}
	
a {color:#fff; text-decoration:none; transition:0.2s;}
a:focus {outline:none}
a:focus, 
a:hover {color:#54b9ff; text-decoration:none; cursor:pointer;}
a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline:0}

label {padding:0; margin:0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; font-weight:600; line-height:1.1; color:inherit; color:#fff;
	margin:0 0 10px;}

/* login_bg */
.bg_video_wrap {position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden;}
.bg_video {display:block; width:100%; height:100%; object-fit:cover;}
.bg_video_dim {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.38);}


/* login */
.login_section {width:100%; height:100vh; overflow-x:auto; position:relative; background:transparent;}

.login_section .text_area {position:absolute; left:0; bottom:0; padding:0; height:100%; width:calc(50% + 100px);}
.login_section .text_area .login_logo {color:#fff; font-weight:800; font-size:100px; letter-spacing:-5px; margin:0; display:inline-block; width:607px; height:126px; text-indent:-9999px;
	background:url(../images/common/logo_rag_bg.png) no-repeat left top; position:absolute; width:100%; left:8%; top:50%; transform:translate(0, 80px); height: 200px;}
.login_section .text_area .copyright {color:#929292; font-size:14px; font-weight:300; line-height:18px; width:100%; position:absolute; left:8%; bottom:5%;}
.login_section .text_area .copyright span {display:block;}
.login_section .text_area .copyright span + span {margin-top:12px;}

.login_area {width:100%; max-width:540px; padding:45px 70px 55px; position:absolute; top:50%; left:50%; transform:translate(100px,-50%); border-radius:20px;
	/* background:
		linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.04) 30%, rgba(0,0,0,0.15) 100%),
		linear-gradient(135deg, rgba(32,35,45,0.35) 0%, rgba(45,49,59,0.3) 100%); */
	border:1px solid rgba(255,255,255,0.1);
	box-shadow:
		inset 0 1px 1px rgba(255,255,255,0.2),  /* 위쪽 하이라이트 */
		inset 0 -10px 30px rgba(0,0,0,0.2),   /* 내부 어두움 */
		0 10px 60px rgba(0,0,0,0.6);         /* 외부 그림자 */
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	z-index:1;
}
.login_area *{color:#fff; font-size:12px;font-weight:100;letter-spacing:0.5px;}
.login_area h3{display:block;width:0;height:0;overflow:hidden;}
.login_area .login_input{padding:0;margin:0;list-style:none;}
.login_area .login_input > li{padding:0;margin:0;position:relative;}
.login_area .login_input > li + li {padding-top:20px;}
.login_area .login_input > li input {display:block; width:100%; padding:0 15px; font-size:16px; font-weight:400; line-height:45px; height:45px; color:#fff;
	background:linear-gradient(90deg, rgba(39,43,54,0.55) 0%, rgba(50,50,50,0.6) 50%, rgba(50,50,50,0.6) 100%);
	background-clip:padding-box; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
	box-shadow:inset 0 3px 5px rgba(21,21,21,0.5), inset 0 -1px 2px rgba(255,255,255,0.15);
	transition:0.2s;
	font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", "Apple SD Gothic Neo", "돋움", dotum, Arial, sans-serif;
	caret-color:#fff;}

.login_area .login_input > li input:hover,
.login_area .login_input > li input:focus {border-color:#5875f0; box-shadow:inset 0 3px 5px rgba(21,21,21,0.5), inset 0 -1px 2px rgba(255,255,255,0.15), 0 0 0 1px rgba(88,117,240,0.25);}

.login_area .login_input > li input:-webkit-autofill,
.login_area .login_input > li input:-webkit-autofill:hover,
.login_area .login_input > li input:-webkit-autofill:focus,
.login_area .login_input > li input:-webkit-autofill:active {
	-webkit-text-fill-color:#fff !important;
	-webkit-box-shadow:
		0 0 0 1000px rgba(39,43,54,0.55) inset,
		inset 0 3px 5px rgba(21,21,21,0.5),
		inset 0 -1px 2px rgba(255,255,255,0.15) !important;
	box-shadow:
		0 0 0 1000px rgba(39,43,54,0.55) inset,
		inset 0 3px 5px rgba(21,21,21,0.5),
		inset 0 -1px 2px rgba(255,255,255,0.15) !important;
	border:1px solid rgba(255,255,255,0.12) !important;
	background-color:transparent !important;
	background-image:none !important;
	caret-color:#fff;
	transition:background-color 9999s ease-out 0s;
}

/* 자동완성 상태에서도 hover / focus 색 변경 */
.login_area .login_input > li input:-webkit-autofill:hover,
.login_area .login_input > li input:-webkit-autofill:focus {
	border:1px solid #5875f0 !important;
	-webkit-box-shadow:
		0 0 0 1000px rgba(39,43,54,0.55) inset,
		inset 0 3px 5px rgba(21,21,21,0.5),
		inset 0 -1px 2px rgba(255,255,255,0.15),
		0 0 0 1px rgba(88,117,240,0.25) !important;
	box-shadow:
		0 0 0 1000px rgba(39,43,54,0.55) inset,
		inset 0 3px 5px rgba(21,21,21,0.5),
		inset 0 -1px 2px rgba(255,255,255,0.15),
		0 0 0 1px rgba(88,117,240,0.25) !important;
}

.login_area .login_input > li label{display:block;line-height:30px;margin:0 0 5px; color:#fff; font-size:18px; font-weight:500;}
.login_area .login_input#inp_loginPwd {padding-right:65px;}
.login_area .login_input .btn_show_pwd{display:block;width:45px; height:45px;line-height:45px;font-size:12px;position:absolute;right:0;bottom:0;border:0;background-color:transparent; text-indent:-9999px; z-index:90;}
.login_area .login_input .btn_show_pwd:after {content:""; display:block; width:45px; height:45px; position:absolute; left:0; top:0; text-indent:0; font-family:"Font Awesome 6 Free"; font-size:16px; font-weight:900;}
.login_area .login_input .btn_show_pwd.hide:after {content:"\f070";}
.login_area .login_input .btn_show_pwd.show:after {content:"\f06e";}

.login_area .login_btn {margin-top:50px;width:100%;height:56px;font-size:20px;text-align:center;border-radius:30px;
	background:
		linear-gradient(180deg, 
		rgba(255,255,255,0.3) 0%, 
		rgba(190,200,210,0.2) 40%, 
		rgba(90,100,120,0.1) 100%);
	border:none;
	color:#fff; font-weight:800;
	box-shadow:
		inset 0 2px 4px rgba(255,255,255,0.1),   /* 상단 밝은 하이라이트 */
		inset 0 -8px 20px rgba(0,0,0,0.1),      /* 하단 어두움 */
		0 6px 15px rgba(0,0,0,0.2);              /* 바깥 그림자 */
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	transition:all .2s ease-in-out;
}
.login_area .login_btn:before {content:""; position:absolute; left:0; top:0;
	width:100%; height:100%; border-radius:30px;
	background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 20%);
	opacity:0.4; pointer-events:none; transition:all .2s ease-in-out;
}



.login_area .login_btn:hover {border-color:rgba(255,255,255,0.1);
	background:
		linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 28%),
		linear-gradient(180deg, #4d5bc8 0%, #6170f7 45%, #7985dc 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0),
		inset 0 -1px 0 rgba(255,255,255,0.12),
		0 6px 15px rgba(0,0,0,0.4);}

.login_area .login_btn:hover:before {content:""; display:block; width:72%; height:34px; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
	border-radius:50%;
	background:radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(185,200,255,0.42) 38%, rgba(98,120,255,0.18) 62%, rgba(98,120,255,0) 100%);
	pointer-events:none; top:auto;}
.login_area .login_btn:hover:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; bottom:0;
	border-radius:30px 30px 22px 22px;
	background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 60%, rgba(255,255,255,0.15) 100%);
	pointer-events:none;}


@media all and (max-width:1400px) {
	.login_area {left:45%;}    
}


@media all and (max-width:1280px) {
	.login_area {position:absolute; left:50%; top:50%; transform:translate(-50%,-110px); margin:0 auto;}
	
	.login_area .login_btn {margin-top:40px;}
	
	.login_section .text_area {position:static; left:auto; bottom:auto; margin:0 auto; text-align:center;}
	.login_section .text_area .login_logo {font-size:60px; letter-spacing:-4px; margin:-247px 0 0; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%;
		height:170px;
		/* background-color:red; */
		
		background-image:
			url(../images/common/logo_rag_simbol.png),
			url(../images/common/logo_rag_text.png);
	
		background-repeat:
			no-repeat,
			no-repeat;
	
		/* 심볼: 위쪽 중앙 / 텍스트: 아래쪽 중앙 */
		background-position:
			center top,
			center bottom;
	
		/* 사이즈 개별 조절 */
		background-size:
			/* 118px auto,
			464px auto; */
			
			100px auto,   /* 심볼 */
			250px auto;   /* 텍스트 */
	}
	
	.login_section .text_area .copyright span:first-child {display:none;}
	.login_section .text_area .copyright span:last-child {position:fixed; left:50%; bottom:30px; transform:translate(-50%,0); width:100%;}    
}


@media all and (max-width:640px) {
	.login_area {padding:35px 50px 45px; max-width:calc(100% - 80px);}
	.login_section .text_area .login_logo {font-size:50px;
		background-size:
			70px auto, /* 심볼 */
			160px auto; /* 텍스트 */
		margin-top:-210px; height:120px;}
}


/* ==========================================================================
   비밀번호 재설정 팝업  (로그인 화면 전용 · 두 팝업 공용)
     · SaveMemberJoinPw.jsp       — 아이디/이름으로 재설정 링크 메일 발송
     · SaveMemberJoinPwChange.jsp — 최초 로그인 시 강제 변경
   화면 전용 셀렉터: .pwc_wrap
   로그인 화면(Login.jsp)은 rag_style.css / smart_cdrs_common.css 를 로드하지 않으므로
   ragStudio 공통 스킨(.form_control · .m_btn)을 이 팝업 스코프 안에서 동일 값으로 정의한다.
   (전역으로 두면 로그인 폼·다른 팝업까지 영향을 받으므로 반드시 .pwc_wrap 하위로 스코프할 것)
   ========================================================================== */
.pwc_wrap {display:flex; flex-direction:column; gap:14px; color:#e6e6e6; padding:4px 2px 2px;}
.pwc_wrap .pwc_form {display:flex; flex-direction:column; gap:14px; margin:0;}

/* 제목 + 안내 문구 */
.pwc_wrap .pwc_head {margin-bottom:2px;}
.pwc_wrap .pwc_title {font-size:18px; font-weight:600; color:#fff; margin:0;}
.pwc_wrap .pwc_guide {font-size:12.5px; line-height:1.7; color:#8a8a8a; margin:7px 0 0;}

/* 입력 필드 */
.pwc_wrap .pwc_field {display:flex; flex-direction:column; gap:6px; min-width:0;}
.pwc_wrap .pwc_field > label {font-size:12px; color:#acacac; margin:0; font-weight:400;}
.pwc_wrap .pwc_field > label b {color:#ed6e5b; font-weight:600;}
.pwc_wrap .pwc_row {display:flex; align-items:center; gap:8px; min-width:0;}
.pwc_wrap .pwc_row .form_control {flex:1; min-width:0;}
.pwc_wrap .pwc_row .pwc_code {flex:none; width:150px;}

/* 안내/검증 문구 */
.pwc_wrap .pwc_hint {display:inline-block; font-size:11.5px; line-height:1.6; color:#8a8a8a;}
.pwc_wrap .pwc_hint.is-error {color:#ff9b98;}
.pwc_wrap .pwc_hint.is-ok {color:#4ade80;}
.pwc_wrap .pwc_row .pwc_hint {flex:none; white-space:nowrap;}

/* 하단 실행 버튼 — 팝업 푸터 정본(.wkc_footer 등)과 동일하게 우측 정렬 */
.pwc_wrap .pwc_footer {display:flex; justify-content:flex-end; gap:8px; margin-top:8px;}

/* ragStudio 공통 form_control (rag_style.css 동일 값) */
.pwc_wrap .form_control {display:block; width:100%; padding:0 15px; font-size:14px; font-weight:400; line-height:44px; height:44px; color:#fff;
	background:linear-gradient(90deg, rgba(39,43,54,0.9) 0%, rgba(50,50,50,1) 50%, rgba(50,50,50,1) 100%);
	background-clip:padding-box; border:1px solid transparent; border-radius:10px;
	transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;
	box-shadow:inset 0 3px 5px rgba(21,21,21,0.5), inset 0px -1px 2px rgba(256,255,255,.25);}
.pwc_wrap .form_control::placeholder {color:#797979; opacity:1;}
.pwc_wrap .form_control:hover,
.pwc_wrap .form_control:focus,
.pwc_wrap .form_control.active {border-color:#5875f0; outline:none;}
.pwc_wrap .form_control[disabled],
.pwc_wrap .form_control[readonly] {opacity:0.5; cursor:default;}

/* ragStudio 공통 m_btn — rag_style.css 의 ".m_btn" 절(기본/투명/강조/사각/on·off)을 셀렉터만 스코프해 그대로 옮긴 것.
   ⚠️ rag_style.css 쪽이 바뀌면 이 블록도 같이 갱신해야 한다(로그인 화면은 rag_style.css 를 로드하지 않아 자동 반영되지 않는다).
   값을 화면 사정에 맞춰 임의로 손대면 두 화면의 버튼이 달라지므로 금지. */
.pwc_wrap .m_btn {display:inline-block; padding:0 15px; margin:0; font-size:13px; text-align:center; border:1px solid #686868; border-radius:15px; position:relative; overflow:hidden;
	color:#fff; background:#686868; font-weight:500; transition:0.2s; height:30px; line-height:28px; vertical-align:middle;}
.pwc_wrap .m_btn i {font-size:13px; margin-right:7px; line-height:1; vertical-align:baseline;}
.pwc_wrap .m_btn + .m_btn {margin-left:5px;}
.pwc_wrap .m_btn + .btn-group {margin-left:3px;}
.pwc_wrap .btn-group + .btn-group {margin-left:3px;}
.pwc_wrap .m_btn:hover,
.pwc_wrap .m_btn.active {outline:none !important; box-shadow:none !important; text-decoration:none; color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.active i {color:#000;}
.pwc_wrap .m_btn:disabled,
.pwc_wrap .m_btn.disabled {background:#e9ecef; color:#adb5bd; border-color:#dee2e6; cursor:not-allowed; pointer-events:auto; opacity:0.65; box-shadow:none;}

/* 투명 버튼 */
.pwc_wrap .m_btn.btn_trp			{color:#fff; border-color:#686868; background:transparent;}
.pwc_wrap .m_btn.btn_trp:hover		{color:#fff; border-color:#ffffff; background:transparent;}
.pwc_wrap .m_btn.btn_trp:hover i	{color:#fff;}

.pwc_wrap .m_btn.btn_trp.focus			{color:#fff; border-color:#ffffff; background:transparent;}
.pwc_wrap .m_btn.btn_trp.focus:hover	{color:#fff; border-color:#ffffff; background:transparent;}
.pwc_wrap .m_btn.btn_trp.focus:hover i	{color:#fff;}

/* 버튼 강조(임시) */
.pwc_wrap .m_btn.focus			{color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.focus:hover	{color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.focus:hover i	{color:#000;}

/* 사각 버튼 */
.pwc_wrap .m_btn.btn_square			{color:#fff; border-color:#686868; background:#686868; border-radius:7px;}
.pwc_wrap .m_btn.btn_square:hover	{color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.btn_square:hover i	{color:#000;}

.pwc_wrap .m_btn.btn_square.focus		{color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.btn_square.focus:hover	{color:#000; border-color:#dedede; background:#dedede;}
.pwc_wrap .m_btn.btn_square.focus:hover i	{color:#000;}

.pwc_wrap .m_btn.btn_on			{color:#fff; border-color:#0ec742; background:#0ec742; border-radius:7px; pointer-events:none; padding:0 10px; height:25px; line-height:23px;}
.pwc_wrap .m_btn.btn_on:hover	{color:#fff; border-color:#0ec742; background:#0ec742;}

.pwc_wrap .m_btn.btn_off		{color:#fff; border-color:#ef6a6a; background:#ef6a6a; border-radius:7px; pointer-events:none; padding:0 10px; height:25px; line-height:23px;}
.pwc_wrap .m_btn.btn_off:hover	{color:#fff; border-color:#ef6a6a; background:#ef6a6a;}

/* 화면 배치용(공통 값 아님) — 입력창과 한 줄에 놓일 때 줄바꿈 방지 */
.pwc_wrap .pwc_row .m_btn {flex:none;}

/* 공통 폭 유틸 (rag_style.css 동일 값 — 버튼 폭은 이 유틸로만 지정) */
.pwc_wrap .w100 {width:100px !important;}
.pwc_wrap .w140 {width:140px !important;}


/* ==========================================================================
   비밀번호 재설정 화면  (SaveChangePwd.jsp — 재설정 메일 링크로 진입하는 독립 페이지)
   화면 전용 셀렉터: .pwr_page
   로그인 화면의 배경·카드(.login_area)·입력(.login_input)·버튼(.login_btn)을 그대로 재사용하고,
   좌측 로고 영역이 없는 화면이라 카드만 정가운데에 놓는다. 배경은 로그인 영상 대신 그 포스터 이미지.
   ========================================================================== */
.pwr_page .pwr_bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/login/loop_bg_4k_2.png) no-repeat center center; background-size:cover;}
.pwr_page .login_area {left:50%; transform:translate(-50%,-50%); max-width:480px; padding:45px 55px 50px;}
.pwr_page .login_area .pwr_logo {display:block; width:150px; height:42px; margin:0 auto 24px; background:url(../images/common/logo_rag.png) no-repeat center center; background-size:contain; text-indent:-9999px; overflow:hidden;}
.pwr_page .login_area .pwr_title {font-size:22px; font-weight:600; color:#fff; text-align:center; margin:0;}
.pwr_page .login_area .pwr_guide {font-size:13px; font-weight:300; color:#b9bcc4; text-align:center; line-height:1.7; margin:10px 0 28px;}
.pwr_page .login_area .pwr_hint {display:none; font-size:12.5px; font-weight:300; line-height:1.7; margin-top:12px;}
.pwr_page .login_area .pwr_hint.is-error {color:#ff9b98;}
.pwr_page .login_area .login_btn {margin-top:34px;}
.pwr_page .pwr_copyright {position:fixed; left:0; bottom:26px; width:100%; text-align:center; color:#929292; font-size:12px; font-weight:300; z-index:1;}
@media all and (max-width:640px) {
	.pwr_page .login_area {max-width:calc(100% - 40px); padding:35px 28px 40px;}
}


/* ==========================================================================
   공통 로딩 오버레이  (fn_ajax 가 #ajaxLoading 을 show/hide 한다)
   대상 마크업: Login.jsp 하단의 #ajaxLoading (Main.jsp 는 smart_cdrs_common.css 에서 같은 규칙을 쓴다)
   로그인 화면은 smart_cdrs_common.css 를 로드하지 않으므로 여기에 같은 값으로 정의한다.
   전 화면 공통 컴포넌트라 스코프 없이 두되, 클래스명을 바꾸지 말 것(공통 JS 가 이 이름으로 찾는다).
   ========================================================================== */
.ajax-loading-wrap {height:100%; left:0; position:fixed; top:0; width:100%; z-index:999999; background:rgba(0, 0, 0, 0.5); display:none; align-items:center;}
.ajax-loading-bar {position:absolute; left:calc(50% - 41px); top:calc(50% - 9px); z-index:1000000; display:flex; gap:14px;}
.ajax-loading-bar span {display:block; width:18px; height:18px; border-radius:50%; background:#5160d2; animation:ajaxBounce 1s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;}
.ajax-loading-bar span:nth-child(2) {background:#7d8bea; animation-delay:0.15s;}
.ajax-loading-bar span:nth-child(3) {animation-delay:0.3s;}
@keyframes ajaxBounce {0%, 100% {transform:translateY(8px); opacity:0.55;} 50% {transform:translateY(-20px); opacity:1;}}
@media (prefers-reduced-motion: reduce) {.ajax-loading-bar span {animation-duration:2.6s;}}
.ajax-loading-msg {position:absolute; left:0; width:100%; top:calc(50% + 33px); z-index:1000000; text-align:center; color:#e8e9ef; font-size:16px; letter-spacing:0.02em;}