@charset "UTF-8";
/*전체 layout*/
.page-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 28px;
  background: var(--white);
  min-height: fit-content;
  height: 100%;
}

.cnt-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--light500);
}

.cnt-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cnt-sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.df-aic p.tit {
  margin: 0;
}

.wrapper .main-wrapper #content .content-wrapper {
  background: none;
}

/*선*/
.line-h {
  width: 100%;
  height: 1px;
  background: var(--dark900);
  margin: 0;
}

/*헤더*/
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 1rem;
  border-bottom: 1px solid var(--light500);
  background: var(--light600);
}
.header-logo {
  width: 180px;
  padding: 12px 20px;
}
.header-logo img {
  width: 100%;
}
.header-center {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-right: 12px;
}
.header-center .main-menu {
  display: flex;
}
.header-center .main-menu li {
  cursor: pointer;
  margin: 8px 0;
  padding: 10px 20px;
  min-width: 80px;
  border-radius: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-center .main-menu li.active {
  background: #2e4d8c;
  color: white;
  font-weight: bold;
}
.header-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-info .select {
  width: auto;
  min-width: 180px;
  padding: 8px 8px 8px 16px;
  background-color: var(--white);
  border: none;
  margin: 0;
}
.header-info .info-wrap {
  position: absolute;
  width: 252px;
  right: 12px;
  top: 62px;
  background: white;
  border-radius: 15px;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

button:has(.profile-h) {
  width: 40px;
  height: 40px;
}

.profile-h {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 빈 화면 */
[class*=empty-] {
  display: flex;
  justify-content: center;
  align-items: center;
}
[class*=empty-] > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
[class*=empty-] > div p {
  text-align: center;
}

.empty-file {
  height: fit-content;
  min-height: 600px;
  background: var(--white);
}
.empty-file > div img {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
}
.empty-file .add-box {
  width: 600px;
  height: 320px;
  border: 1px dashed var(--dark600);
  border-radius: 20px;
}

/* 메뉴, 프로그램, 사용자 관리, 모달 - 빈 화면 */
.empty-content {
  height: calc(100% - 250px);
  min-height: 200px;
}
.empty-content > div img {
  width: 80px;
  height: 80px;
}

/*날짜 인풋*/
.date {
  height: 40px;
  padding: 4px 10px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--light100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.date input[type=text] {
  color: var(--dark600);
  text-align: center;
  font-size: 16px;
  border: none;
}
.date input[type=text]::placeholder {
  text-align: center;
}

/*날짜 인풋(기간)*/
.date-range {
  display: flex;
  align-items: center;
  gap: 4px;
}

/*검색 인풋 + 버튼*/
.search-wrap {
  display: flex;
  justify-content: space-between;
  background: var(--light700);
  border-radius: 25px;
}
.search-wrap input {
  background: transparent;
  border: none;
  padding: 0;
  flex: 1;
}
.search-wrap input:active + .bt-wrap button:has(.ico-close-bg) {
  display: inline-flex;
}
.search-wrap input:focus + .bt-wrap button:has(.ico-close-bg) {
  display: inline-flex;
}
.search-wrap .bt-wrap button:has(.ico-close-bg) {
  display: none;
}
.search-wrap:hover .bt-wrap button:has(.ico-close-bg) {
  display: inline-flex;
}

/*인풋 패스워드*/
.inp-pwd {
  position: relative;
}
.inp-pwd > i {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translate(-50%, -50%);
}
.inp-pwd > button {
  position: absolute;
  top: 68%;
  right: 20px;
  transform: translate(-50%, -50%);
}
.inp-pwd .pwd-hid i {
  color: var(--dark600);
}

/*사용자관리 그리드*/
.grid-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* splash 애니메이션 */
@keyframes jump-shaking {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateY(-9px);
  }
  35% {
    transform: translateY(-9px) rotate(5deg);
  }
  55% {
    transform: translateY(-9px) rotate(-5deg);
  }
  65% {
    transform: translateY(-9px) rotate(5deg);
  }
  75% {
    transform: translateY(-9px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
div.constant-jump-shake {
  animation: jump-shaking 1s 1;
}

div.splash {
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 60px);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

/*테이블*/
.table-board {
  margin-bottom: 0;
}
.table-board tbody tr.bg-y td {
  background: var(--yellow);
}
.table-board tbody tr.bg-y td input[readonly] {
  background: var(--yellow);
}
.table-board tr {
  cursor: pointer;
}
.table-board th, .table-board td {
  vertical-align: middle;
  border: 1px solid var(--light500);
  cursor: initial;
  text-align: center;
}
.table-board th.check-wrap .check, .table-board td.check-wrap .check {
  justify-content: center;
}
.table-board th.left, .table-board td.left {
  text-align: left;
}
.table-board th {
  color: var(--dark900);
  font-weight: initial;
}
.table-board td .input-r {
  height: 40px;
  border-radius: 12px;
}

.table-focus tbody tr:hover td {
  background: var(--blue50);
  cursor: pointer;
}

.bg-gry {
  background: #ddd !important;
}

/* 게시글 작성 */
.content-body:has(.board-box) {
  padding-bottom: 60px;
}

.board-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  grid-gap: 60px;
  gap: 40px;
}

.board-box .bs-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* 게시글 첨부파일 */
.add-file {
  padding: 20px;
  background: var(--light300);
  border-radius: 10px;
}

.add-file > .add-file-tit {
  display: flex;
  justify-content: space-between;
}

.file-wrap {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.file-wrap div.file {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.file-wrap > div.file > p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 게시글 상세 */
.b-title {
  padding: 12px 0;
}

.b-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--light500);
  border-top: 1px solid var(--light500);
  padding: 12px 4px;
}

.b-profile {
  display: flex;
  align-items: center;
}

.b-profile > img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
}

.b-time {
  color: var(--dark700);
}

.b-reply {
  padding: 16px 10px;
  background: var(--light600);
}

.bc-top {
  border-bottom: 1px solid var(--light500);
  border-top: 1px solid var(--light500);
  padding: 12px 4px;
}

.bc-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--light500);
}

.bc-comment > img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.bc-comment .bc-bottom {
  display: flex;
  align-items: center;
}

.bc-comment-w {
  padding: 16px 0;
  border-bottom: 1px solid var(--light500);
}

.bc-comment-w > .txt-cnt > textarea {
  border: 1px solid var(--light500);
  padding: 16px;
}

.bc-comment-w > .txt-cnt .bcw-bottom {
  border: 1px solid var(--light500);
  border-collapse: collapse;
  display: flex;
  align-items: center;
  margin-top: -8px;
}

.bc-comment-w > .txt-cnt .bcw-bottom > span.counter {
  flex-grow: 1;
  padding: 0 16px;
}

.bc-comment-w > .txt-cnt .bcw-bottom > .btn-p {
  border-radius: 0px;
}

/*답글 작성*/
.section:has(.toggle-area) {
  border-bottom: 1px solid #ddd;
}

.toggle-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.toggle-area .tit {
  flex: 1;
}

.toggle-area + .toggle-cont {
  padding: 10px 0;
}

/*답글 상세*/
.bd-th {
  width: 100%;
  height: 10px;
  background: var(--light300);
}

.board-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.board-profile {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}

.board-profile img {
  width: 100%;
}

.board-cont {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.reply-mcnt {
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid var(--light500);
  border-radius: 10px;
  background: var(--light600);
}

/*사진 첨부파일*/
.img-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.img-wrap .img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  border: 1px solid var(--light500);
}
.img-wrap .img img {
  width: 100%;
}
.img-wrap .img .btn-ico12 {
  position: absolute;
  top: 0;
  right: 4px;
  display: none;
}
.img-wrap .img .btn-ico12 img {
  position: absolute;
}
.img-wrap .img:hover .btn-ico12 {
  display: block;
}

/*위험성평가 : 상단 스텝*/
.steps {
  display: flex;
  gap: 2px;
}
.steps .step {
  flex-basis: 20%;
  text-align: center;
  padding: 10px 0;
  background: var(--light300);
}
.steps .step.on {
  background: var(--blue500);
  color: var(--white);
  font-weight: 500;
}
.steps .step:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.steps .step:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.step-detail {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 5px;
  background: var(--light600);
}
.step-detail p {
  flex-grow: 1;
}
.step-detail button {
  height: fit-content;
}

/*select*/
.sel-flex {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.sel-flex .select-n {
  flex: 1;
  border: 1px solid var(--light500);
  border-radius: 10px;
  text-align: left;
}
.sel-flex .select-n .current {
  height: 40px;
  line-height: 40px;
  background: var(--white);
  border-radius: 10px;
}
.sel-flex .select-n .current:after {
  height: 40px;
}

.sel-grid {
  width: 80%;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 152px 1fr 152px 1fr;
  align-items: center;
}

.sel-grid2 {
  width: 80%;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 152px 280px 152px 1fr;
  align-items: center;
}

.sel-grid3 {
  width: 80%;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 152px 1fr;
  align-items: center;
}

/*step1 평가대상선택 수정*/
.sel-edit {
  width: 100% !important;
  gap: 8px;
}
.sel-edit .input-r {
  flex: 1;
}
.sel-edit button {
  min-width: 80px !important;
}

/*사용자 훈련/교육 상세 td 높이 지정*/
.scroll-td {
  max-height: calc(100vh - 300px);
  overflow: overlay;
}

/*회원정보 설정 - 비밀번호 입력란 아이콘 */
.section > .pwd {
  position: relative;
}

.section > .pwd > button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(-50%, -50%);
}

.section > .pwd > button.pwd-hid > i {
  color: var(--dark600);
}

/* 게시판 ckeditor 최소 높이 */
.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  min-height: 600px;
}

.ck-content > div {
  min-height: calc(100vh - 602px);
  padding: 10px;
}

/* 안전교육일지 구분 */
.educheck {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  border: 1px solid var(--light500);
  border-radius: 10px;
  margin-bottom: 20px;
}

.educheck > .file {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/*# sourceMappingURL=style.css.map */