@charset "utf-8";

/* 재사용 유틸리티 클래스 */

/* 정렬 */
.half-box {display: flex; gap: 2.6rem;}
.half-box .half {flex: 0 0 auto; width: calc(50% - 1.3rem);}


.col-red {color: var(--col-red);}
.col-blue {color: var(--col-blue);}
.col-pink {color: var(--col-pink);}
.col-green {color: var(--col-green);}


/*============================================================*/
/* text */
/*============================================================*/
.ellipsis {display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; vertical-align: bottom;}
.ellipsis-2 {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; word-break: break-all; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.comment {position: relative; padding-left: 20px; font-size: 14px; font-weight: 300; word-break: break-all;}
.comment::before {content: ""; position: absolute; top: 1px; left: 0; width: 15px; aspect-ratio: 15/14;  background: url('/img/icon/info_gray.svg') center/auto no-repeat;}
.comment + .comment {margin-top: 5px;}

.icon-blank {display: flex; justify-content: center; align-items: center; gap: 0.4rem;}
.exlink:hover {color: blue; text-decoration: underline; text-underline-offset: 3px;}




/*============================================================*/
/* state */
/*============================================================*/
.pill {display: inline-block; padding: 6px 8px; border: 1px solid; border-radius: 1.4rem; background: #fff; font-size: 14px; font-weight: 700;line-height: 1;}
.pill.gray {border-color: 1px solid var(--col-gray); color: var(--col-gray);}
.pill.red {border-color: 1px solid var(--col-red); color: var(--col-red);}
.pill.blue {border-color: 1px solid var(--col-blue); color: var(--col-blue);}
.pill.pink {border-color: 1px solid var(--col-pink); color: var(--col-pink);}
.pill.green {border-color: 1px solid var(--col-green); color: var(--col-green);}




/*============================================================*/
/* button */
/*============================================================*/
.inline-btn {display: flex; align-items: center; gap: .8rem;}

.btn-sm {position: relative; display: inline-flex; justify-content: center; align-items: center; text-align: center; height: 3rem; padding: 0 1rem; border-radius: var(var(--border-radius-sm)); font-size: 1.4rem; font-weight: 600;}
.btn-md {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; min-width: 8rem; height: 3.6rem; padding: 0 1rem; border-radius: var(--border-radius-sm); font-weight: 500;}
.btn-lg {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; width: 100%; max-width: 20rem; height: 4.7rem; padding: 0 1rem; border-radius: var(--border-radius-sm); font-size: 1.8rem; font-weight: 600;}

.btn-theme {background: var(--col-theme); color: #fff; transition: var(--trans-25);}
.btn-black {background: var(--col-black); color: #fff; transition: var(--trans-25);}
.btn-gray {background: var(--col-gray); color: #fff; transition: var(--trans-25);}
.btn-red {background: var(--col-red); color: #fff; transition: var(--trans-25);}
.btn-blue {background: #C8DEEF; color: #1E3B62; transition: var(--trans-25);}
.btn-blue2 {background: #345FCD; color: #fff; transition: var(--trans-25);}
.btn-purple {background: var(--col-purple); color: #fff; transition: var(--trans-25);}
.btn-green {background: #1F97B8; color: #fff; transition: var(--trans-25);}
.btn-yellow {background: var(--col-yellow); color: #fff; transition: var(--trans-25);}

.btn-bd-theme {background: #fff; border: 1px solid var(--col-theme); color: var(--col-theme); font-weight: 700; transition: var(--trans-25);}
.btn-bd-black {background: #fff; border: 1px solid var(--col-black); color: var(--col-black); font-weight: 700; transition: var(--trans-25);}
.btn-bd-gray {border: 1px solid var(--col-bd-gray); color: var(--col-darkgray); transition: var(--trans-25);}
.btn-bd-red {background: #FFEBEB; border: 1px solid var(--col-red); color: var(--col-red); transition: var(--trans-25);}
.btn-bd-blue {background: #EDF1FF; border: 1px solid var(--col-blue); color: var(--col-blue); transition: var(--trans-25);}




/*============================================================*/
/* error */
/*============================================================*/
.errorPage {position: relative; display: flex; width: 100dvw; height: 100dvh; background: url("/img/login/background.png") center/cover no-repeat; color: #0A1317; overflow: hidden;}
.error-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.error-wrap .img-warn {margin-bottom: 3.2rem;}
.error-wrap h1 {margin-bottom: 3rem; font-size: 5.6rem; font-weight: 700;}
.error-wrap .txt {text-align: center;}
.error-wrap .txt p {font-size: 2rem; font-weight: 500;}
.error-wrap .txt p + p {margin-top: 1rem;}
.error-wrap .btn-area {display: flex; align-items: center; gap: 1rem; margin-top: 6rem;}




/*============================================================*/
/* tab - react-tabs */
/*============================================================*/
.react-tabs .react-tabs__tab-list {margin-bottom: 2.6rem; border-bottom: 2px solid var(--col-theme);}
.react-tabs .react-tabs__tab {bottom: -2px; min-width: 20rem; text-align: center; padding: 1.8rem 1rem; border-top: 1px solid var(--col-bd-gray); border-right: 1px solid var(--col-bd-gray); background: #f7f8f9; font-weight: 700; line-height: 1;}
.react-tabs .react-tabs__tab--selected {border: 2px solid var(--col-theme); border-bottom-color: transparent; border-radius: 0; background: #fff;}




/*============================================================*/
/* ant-modal */
/*============================================================*/
.ant-modal .ant-modal-container {overflow: hidden; border-radius: 1rem; box-shadow: none;}
.ant-modal-root .ant-modal-mask {background: rgba(217,217,217,80%);}
.ant-modal-root .ant-modal-wrap {overflow: hidden;}
.ant-modal {width: 50rem; max-width: 80%; max-height: calc(100vh - 100px); font-family: 'Pretendard', sans-serif; overflow: hidden;}
.ant-modal-wrap .ant-modal-content {padding: 2.4rem 3rem; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0,0,0,5%);}
.ant-modal .ant-modal-close {top: 1.6rem; right: 1.8rem; color: #71747B;}
.ant-modal .ant-modal-body {max-height: calc(100dvh  - 30rem); line-height: 1.25; overflow: hidden;}

.ant-modal-body .ant-modal-confirm-title,
.ant-modal .ant-modal-title {font-size: 2rem; font-weight: 600;}
.ant-modal-body .ant-modal-confirm-paragraph {gap: 1rem;}
.ant-modal .ant-modal-header {margin-bottom: 2rem;}
.ant-modal-body .ant-modal-confirm-content {min-height: 3rem;}

.ant-modal-body .ant-modal-confirm-btns,
.ant-modal .ant-modal-footer {display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin-top: 3.2rem;}
.ant-modal-body .ant-modal-confirm-btns button,
.ant-modal .ant-modal-footer button {min-width: 16.2rem; height: 4.2rem; margin: 0; margin-inline: 0 !important; border-radius: .4rem;}

.ant-modal-body .ant-btn.btn-theme:hover,
.ant-modal-footer .ant-btn.btn-theme:hover {background: var(--col-theme);}
.ant-modal-body .ant-btn.btn-bd-gray:hover,
.ant-modal-footer .ant-btn.btn-bd-gray:hover {border: 1px solid var(--col-gray); color: var(--col-darkgray);}
.ant-modal-body .ant-btn.btn-red:hover,
.ant-modal-footer .ant-btn.btn-red:hover {background: var(--col-red);}

.ant-modal-body table th,
.ant-modal-body table td {font-size: 1.5rem;}
.ant-modal-body table th {line-height: 1;}