@charset "UTF-8";
@import "./tokens.css";
/* 새로운 팝업 공통 */
.modal .guide-txt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
  text-align: center;
}

.modal .guide-txt strong {
  color: var(--warning);
  display: block;
}

.modal .guide-txt span {
  display: block;
}

.modal .alert-box {
    color: var(--primary);
    background-color: var(--primary-5);
    padding: 1rem;
    border-radius: var(--number-5);
    text-align:center;
}


/* 인증결과 팝업 */
#certResultPopup .def-list dt {
  width: 7rem;
}

#certResultPopup .def-list dd {
  width: calc(100% - (7rem + var(--gap-7)));
  color: var(--gray-50);
}

#certResultPopup .def-list img.auto {
  max-width: 80%;
  max-height: 80%;
}

#certResultPopup .link-detail {
  all: unset;
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  color: var(--text-color);
  gap: var(--gap-4);
  cursor: pointer;
  text-decoration: none;
  
}

#certResultPopup .link-detail .svg-icon {
  width: 1em;
  height: 1em;
  transition: all .3s ease;
}

#certResultPopup .link-detail:hover,
#certResultPopup .link-detail:focus,
#certResultPopup .link-detail:active {
  background: none !important;
  color: var(--text-color) !important;
}

#certResultPopup .link-detail:hover i{
  transform: translateX(5px);
}

#certResultPopup.modal.shown {
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}

/* 인증결과 오류 팝업 */
#certResultPopup.errorPop {}

#certResultPopup.errorPop .guide-txt{
  font-size: 1rem;
  text-align: center;
}

#certResultPopup.errorPop.modal .modal-dialog .modal-conts {
  padding-bottom: var(--number-17);
}


/* 발급문서 진위확인 팝업 */
#docIssuePopup .def-list dt {
  width: 7rem;
}

#docIssuePopup .def-list dd {
  width: calc(100% - (7rem + var(--gap-7)));
  color: var(--gray-50);
}

#docIssuePopup .def-list dd p {
  margin-bottom: var(--gap-3);
}

#docIssuePopup .btn.file {
  background-color: var(--primary-5);
  color: var(--primary-60);
}

#docIssuePopup .file.btn:hover {
  background-color: var(--white);
}


#docIssuePopup.modal.shown {
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}


/* 발급문서 진위확인 오류 팝업 */
#docIssuePopup.errorPop .guide-txt {
  font-size: 1rem;
  text-align: center;

}


/* 로그인 실패 시 팝업 */
#customPopup .guide-txt span {display: block;}

/* 비밀번호 찾기 팝업 */

#pwFindPopup .form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gray-70);
}
#pwFindPopup .form-control {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--gray-30);
  border-radius: 4px;
  font-size: 0.95rem;
}
#pwFindPopup.modal.shown {
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}

/* 아이디 찾기 팝업 */
#findIdPopup .form-label.required::after {
  content: '*';
  color: var(--danger);
  margin-left: 0.25rem;
}

#findIdPopup .form-row {
  margin-bottom: 1rem;
}

#findIdPopup .form-control {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--gray-30);
  border-radius: 4px;
  font-size: 0.95rem;
}

#findIdPopup .phone-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#findIdPopup .dash {
  font-size: 1rem;
  color: #aaa;
}

/* 아이디 찾기 결과 - 성공 및 실패 팝업 */
#findIdResultPopup .modal-btn.double {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}


/* 비밀번호 변경 팝업 */
#pwEditPopup .guide-txt {
  background-color: var(--blue-5);
  color: var(--primary);
  font-size: 0.95rem;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 2rem;
  line-height: 1.5;
}

#pwEditPopup .form-row {
  margin-bottom: 1.25rem;
}

#pwEditPopup .form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--gray-70);
}

#pwEditPopup .form-label.required::after {
  content: '*';
  color: var(--danger);
  margin-left: 0.25rem;
}

#pwEditPopup .form-control {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

#pwEditPopup .modal-btn.double {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

<!-- alert -->

.aBg{position:fixed;width:100%;height:100%;top:0;left:0;overflow:hidden;z-index:100;background:#000;opacity:.4;}
.aLayer{position:fixed;top:50%;margin-top:0;left:50%;margin-left:-377px;width:755px;display:none;max-height:100%;z-index:2000}
.aPopup{position:relative;width:100%;height:100%;z-index:101;border:1px solid #898989;background:#fff;}

.aPopup header{padding:12px 22px; /*background:#184f8c;*/overflow:hidden;}
.aPopup header h2{font-size:22px;font-weight:600;color:#fff;}
.aPopup header img{cursor:pointer;width:24px;height:24px;}

.aPopup .aBody{padding:26px 22px;}
.aPopup .aBody .text{margin:10px 0 30px;padding:0 10px;font-size:16px;font-weight:600;color:#555;}
.aPopup .aBody .red{color:#ff4800;text-align:center;margin-top:20px;margin-bottom:0;}
.aLayer .aPopup .aBody{max-height:700px;overflow-y:auto;}

.aAlert{width:374px;margin-left:-187px;top:50%;margin-top:-103px;}
.aAlert .aPopup{border:none;}
.aAlert .aPopup header{padding:14px 28px; /*background:#e6e6e6;*/}
.aAlert .aPopup header h2{font-size:20px; /*color:#000;*/}
.aAlert .aBody{padding:16px 0 60px;height:156px;width:374px;display:table-cell;vertical-align:middle;}
.aAlert .aBody article{font-size:16px;text-align:center;}

.aPopup iframe{width: 100%;height: 700px;position: relative;z-index: 99;}
.aPopup .close{cursor:pointer;width:24px;height:24px;position: absolute;z-index: 1000;right: 10px;top: 10px;background:#bbb}

.aPopup .loading{margin-top:30px}
.aPopup .loading:before{content:' ';background:url(/img/common/loading.gif) no-repeat 50% 50%;width:58px;height:58px;display:inline-block;vertical-align:middle;margin-right: 12px}
.aPopup .loading span{display:inline-block;vertical-align:middle;line-height: 32px}

.aButtons{overflow:hidden;text-align:center;vertical-align:middle;height:auto;width:auto}
.table_cover + .aButtons{margin-top: 15px}
.aAlert .aButtons{position:absolute;bottom:16px;width:100%;}
.search_form input + .aButtons{position:absolute;right:10px;top:10px;}
.search_form input + .aButtons .btn3, .search_form input + .aButtons .btn4{padding:6px 7px;}


.aBtn1{padding:8px 12px;font-size:14px;line-height:normal!important;display:inline-block;border:1px solid #b3b3b3;background:#f8f8f8;color:#000!important}
.aAlert .aBtn1{padding:8px 52px;}
.aBtn1+.aBtn1, .aBtn1+.aBtn2, .aBtn2+.aBtn2, .btn2+.aBtn1{margin-left:2px;}
.aPopup .aBtn2{padding:6px 24px;margin-bottom:6px;margin-top:-10px;}
.aPopup .aButtons .btn2{margin-top:0 !important;padding:8px 24px;}
.table_cover + .aButtons a{padding: 10px 26px;font-size:16px}

/* 팝업헤더*/
.pop-pop-header {
	background: var(--information-80);
	color: var(--white);
}
/* 팝업콘텐츠*/
.pop-pop-content {
	border-radius: var(--modal--wrap-radius);
	border: var(--modal--border-width) solid var(--modal--wrap-color-border);
	color: var(--modal--color-text);
	outline-color: transparent;
	background: var(--secondary-10);
}
/* 팝업버튼*/
.btn.confirm {
	background-color: var(--white);
	border-color: 1px solid var(--gray-40);
	color: var(--text-basic);
}