@charset "utf-8";
@import url(./font.css);
@import url(./reset.css);
@import url(./styleguide.css);
/* @import url(./category.css); */

html {
  font-size: 62.5%;
  height:100%; 
}
body {
  font-size: 1rem;
  height:100%; 
}

/* 웹접근성 */
.ir {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  text-indent: -9999px;
  font-size: 0;
}

/* 정렬 */
.m0auto {
  margin: 0 auto;
}

.btn-wrap {
  gap: 0.8rem;
}

.align {
  display: flex;
  &.center {
    justify-content: center !important;
  }
  &.right {
    justify-content: flex-end !important;
  }
  &.gaps {
    gap: 1.2rem;
  }
  .flex1 {
    flex: 1;
  }
}

/* 여백 */
.mgt10 {
  margin-top: 1rem;
}
.mgt15 {
  margin-top: 1.5rem;
}
.mgt20 {
  margin-top: 2rem;
}
.mgt24 {
  margin-top: 2.4rem;
}
.mgt32 {
  margin-top: 3.2rem;
}
.mgt40 {
  margin-top: 4rem;
}

/* width */
.w100 {
  width: 100% !important;
}

.table-scroll {
  max-height: 400px;   /* 원하는 높이 (px, rem 단위 조정 가능) */
  overflow-y: auto;    /* 세로 스크롤 */
  border: 1px solid #ddd; /* 스크롤 영역 구분선 */
}

/* 헤더는 고정하고 싶으면 */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #f9f9f9;
  z-index: 2;
}

/* table */
.table-type1 {
  border-top: 2px solid var(--graye6);
  border-bottom: 1px solid var(--graye6);
  tr {
    &:hover {
      background: rgba(245, 245, 250, 0.3);
    }
  }
  & th {
    background: var(--grayf5);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--gray64);
    letter-spacing: -0.035rem;
    min-height: 5.2rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--graye6);
    padding: 1.6rem 0.2rem;
    + th {
      border-left: 1px solid var(--graye6);
    }
  }
  & td {
    padding: 1rem 0.2rem;
    color: var(--black);
    font-size: 1.6rem;
    text-align: center;
    border-bottom: 1px solid var(--graye6);
    vertical-align: middle;
    + td {
      border-left: 1px solid var(--graye6);
    }
  }
}

/* table */
.table-type2 {
  border-top: 2px solid var(--graye6);
  border-bottom: 1px solid var(--graye6);
  tr {
    &:hover {
      background: rgba(245, 245, 250, 0.3);
    }
  }
  & th {
    background: var(--grayf5);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--gray64);
    letter-spacing: -0.035rem;
    min-height: 2.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--graye6);
    padding: 1.3rem 0.2rem;
    + th {
      border-left: 1px solid var(--graye6);
    }
  }
  & td {
    padding: 1rem 0.2rem;
    color: var(--black);
    font-size: 1.6rem;
    text-align: center;
    border-bottom: 1px solid var(--graye6);
    vertical-align: middle;
    + td {
      border-left: 1px solid var(--graye6);
    }
  }
}

.filter-table {
  label {
    font-size: 1.4rem;
    font-weight: 600;
  }
  input[type="text"],
  select {
    width: 100%;
  }
  input[type="date"] {
    width: calc(50% - 0.7rem);
  }
  tr {
    td {
      padding-top: 2rem;
    }
    &:first-child td {
      padding-top: 0;
    }
    td {
      padding-right: 1.2rem;
      &:last-child {
        padding-right: 0;
      }
    }
  }
}

/* input-checkbox, radiobutton 공통*/
label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  span {
    font-size: 1.4rem;
    font-weight: 600;
  }
}
input[type="checkbox"],
input[type="radio"] {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--graydd);
  transition: all 0.2s ease-in-out;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  border: 0.6rem solid var(--blue);
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 0.2rem dotted var(--blue);
  outline-offset: 2px;
}
input[type="radio"]:hover,
input[type="checkbox"]:hover {
  box-shadow: 0 0 0 4px var(--grayf5);
  cursor: pointer;
}
input[type="radio"]:hover + span,
input[type="checkbox"]:hover + span {
  cursor: pointer;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  background-color: var(--graye5);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
input:not([type="radio"], [type="checkbox"], [type="file"]) {
  width: 14.6rem;
  height: 4rem;
  border: 1px solid var(--grayeb);
  background: var(--grayfe);
  border-radius: 0.4rem;
  padding-inline: 1.2rem;
  &::placeholder {
    color: var(--black);
    font-weight: 500;
  }
}
select {
  width: 15.6rem;
  height: 4rem;
  padding-left: 1.2rem;
  border: 1px solid var(--grayeb);
  border-radius: 0.4rem;
  background: var(--white) url(../images/ico_arw_gray7e_down.svg) no-repeat
    right 1.6rem center;
}
textarea {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px var(--grayeb);
  background-color: var(--grayfe);
  font-size: 1.4rem;
  color: var(--black);
  resize: auto;
  line-height: 1.4rem;
}

/* 버튼 */
.btn {
  /* padding-block: 1.15rem; */
  min-width: 10.0rem;
  width: max-content;
  height: 4rem;
  line-height: 3.8rem;
  border-radius: 0.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.064rem;
  padding-inline: 2.6rem;
  transition: all 0.2s;
  &.btn-reset,
  &.btn-calendar,
  &.btn-db,
  &.btn-list {
    min-width: 10.6rem;
    border: 2px solid var(--blue);
    background: var(--white);
    span {
      color: var(--blue);
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
    }
    &:hover {
      color: var(--black);
      background: rgba(4, 88, 169, 0.2);
      border: 2px solid var(--blue);
    }
  }
  &.btn-reset {
    span {
      &::before {
        content: "";
        width: 1.433rem;
        height: 1.433rem;
        line-height: normal;
        background: url(../images/ico_reset.svg) no-repeat;
      }
    }
  }
  &.btn-calendar {
    span {
      &::before {
        content: "";
        width: 1.4rem;
        height: 1.6rem;
        line-height: normal;
        background: url(../images/ico_calendar.svg) no-repeat;
      }
    }
  }
  &.btn-db {
    span {
      &::before {
        content: "";
        width: 1.4rem;
        height: 1.8rem;
        line-height: normal;
        background: url(../images/ico_refresh.svg) no-repeat;
      }
    }
  }
  &.btn-list {
    span {
      &::before {
        content: "";
        width: 1.317rem;
        height: 1.094rem;
        line-height: normal;
        background: url(../images/ico_list.svg) no-repeat;
      }
    }
  }

  &.btn-search {
    min-width: 10.6rem;
    border: 2px solid var(--blue);
    background: var(--blue);
    span {
      color: var(--white);
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      &::before {
        content: "";
        width: 1.433rem;
        height: 1.433rem;
        line-height: normal;
        background: url(../images/ico_zoom.svg) no-repeat;
      }
    }
    &:hover {
      background: #004e9a;
      border: 2px solid #004e9a;
    }
  }
  &.btn-searchfilter {
    height: 100%;
    line-height: unset;
    border-radius: 1rem;
    border: 2px solid var(--blue);
    background: var(--blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    justify-content: center;
    i {
      width: 2.9rem;
      height: 2.9rem;
      background: url(../images/ico_filter.svg) center no-repeat;
    }
    span {
      color: var(--white);
    }
    &:hover {
      background: #004e9a;
      border: 2px solid #004e9a;
    }
  }
  &.btn-excel {
    min-width: 10.6rem;
    border: 2px solid #107c41;
    background: var(--white);
    span {
      color: #107c41;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      &::before {
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        line-height: normal;
        background: url(../images/ico_excel.svg) no-repeat;
      }
    }
    &:hover {
      background: rgba(16, 124, 65, 0.05);
      border: 2px solid #107c41;
    }
  }
  &.blue,
  &.btn-save {
    color: var(--white);
    border: 1px solid var(--blue);
    background: var(--blue);
    &:hover {
      background: #004e9a;
      border: 1px solid #004e9a;
    }
  }
  &.gray {
    color: var(--black);
    border: 1px solid var(--grayef);
    background: var(--grayef);
    white-space: nowrap;
    min-width: unset;
    &:hover {
      background: #e6e5e5;
      border: 1px solid #e6e5e5;
    }
  }
  &.white,
  &.btn-cancel {
    color: var(--black);
    border: 1px solid var(--graydd);
    background: var(--white);
    &:hover {
      color: var(--white);
      background: var(--blue);
      border: 1px solid var(--blue);
    }
  }
  &.red,
  &.btn-delete {
    color: var(--white);
    border: 1px solid var(--red);
    background: var(--red);
    &:hover {
      background: #004e9a;
      border: 1px solid #004e9a;
    }
  }
}

.btn-move {
  min-width: unset;
  height: unset;
  line-height: unset;
  padding-inline: unset;
  padding: 1.2rem;
  border-radius: 100%;
  transition: background-color 0.3s;
  &.right {
    color: var(--blue);
  }
  &.left {
    color: var(--gray64);
  }
  &:hover {
    background-color: var(--grayf5);
  }
}

.btn-middle {
  min-width: 10.0rem;
  width: max-content;
  height: 3.2rem;
  line-height: 2.8rem;
  border-radius: 0.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.064rem;
  padding-inline: 2.6rem;
  transition: all 0.2s;
  &.red {
    color: var(--white);
    border: 1px solid var(--red);
    background: var(--red);
    &:hover {
      background: #004e9a;
      border: 1px solid #004e9a;
    }
  }
}

.btn-small {
  padding-block: 0.35rem;
  padding-inline: 0.4rem;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  color: var(--white);
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  &.memo {
    background: var(--blue);
    &::before {
      content: "";
      width: 1.775rem;
      height: 1.189rem;
      background: url(../images/ico_note.svg) no-repeat center;
    }
  }
  &.view {
    background: var(--blue);
  }
  &.del {
    background: var(
      --red
    ); /* &::before { content: ''; width: 1.775rem; height: 1.189rem; background: url(../images/ico_note.svg) no-repeat center; } */
  }
  &.modify {
    background: var(--grayef);
    color: var(
      --black
    ); /* &::before { content: ''; width: 1.775rem; height: 1.189rem; background: url(../images/ico_note.svg) no-repeat center; } */
  }
}

/* alink */
.link {
  font-size: 1.5rem;
  line-height: 1.4;
  padding-bottom: 2px;
  transition: all 0.2s;
  &.pink {
    color: var(--pink);
    border-bottom: 1px solid var(--pink);
    &:hover {
      border-bottom: 2px solid var(--pink);
    }
  }
  &.memo {
    /* background-color: #0083c8; */
    /* border-radius: 0.4rem; */
    color: #0083c8;
    border-bottom: 1px solid #0083c8;
    padding-inline: 0.4rem;
    /* padding-block: 0.35rem; */
    &:hover {
      border-bottom: 2px solid #0083c8;
    }
    &::after {
      content: "";
      display: inline-block;
      margin-left: 0.4rem;
      width: 1rem;
      height: 1rem;
      background: url(../images/ico_arw_popup.svg) no-repeat;
      background-size: cover;
    }
  }
  &.num {
    /* background-color: #00aac5; */
    /* border-radius: 0.4rem; */
    color: #0083c8;
    border-bottom: 1px solid #0083c8;
    padding-inline: 0.4rem;
    /* padding-block: 0.35rem; */
    &:hover {
      border-bottom: 2px solid #0083c8;
    }
    &::after {
      content: "";
      display: inline-block;
      margin-left: 0.4rem;
      width: 1rem;
      height: 1rem;
      background: url(../images/ico_arw_popup.svg) no-repeat;
      background-size: cover;
    }
  }
  &:hover {
    font-weight: 500;
  }
}

/* list */

.dl-type1 {
  display: grid;
  grid-template-columns: 30% 1fr;
  font-size: 1.6rem;
  border-top: 2px solid var(--graye6);
  dt,
  dd {
    padding: 1.2rem 2.4rem;
  }
  dt {
    font-weight: 500;
    color: var(--gray64);
    letter-spacing: -0.035rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--graye6);
    background: var(--grayf5);
  }
  dd {
    color: var(--black);
    border-bottom: 1px solid var(--graye6);
  }
}

/* login */
.sign-up-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}
.visual {
  overflow: hidden;
  background: url(../images/login_visual.png) no-repeat center/cover;
}
.container {
  display: grid;
  grid-template-rows: 1fr;
  height: 100vh;
}
.sign-up {
  align-self: center;
  text-align: center;
}
.sign-up__title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--black);
}
.sign-up__subtitle {
  color: var(--gray64);
  font-size: 1.6rem;
  /* font-weight: 500; */
  margin-top: 1.8rem;
}
.sign-up__form {
  width: 32rem;
  margin-inline: auto;
  margin-top: 6rem;
  /* [type="text"] { 
        background: url(../images/ico_person_black.svg) no-repeat 1.633rem center;
    }
    [type="password"] { 
        background: url(../images/ico_lock_black.svg) no-repeat 1.633rem center;
    } */
  fieldset {
    display: grid;
    gap: 1.6rem;
  }
  .sign-up__id,
  .sign-up__pw {
    position: relative;
  }
  .sign-up__id::before,
  .sign-up__pw::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 4.2rem;
    height: 2.8rem;
    z-index: 10;
  }
  .sign-up__id::before {
    background: url(../images/ico_person_black.svg) no-repeat 1.633rem center;
  }
  .sign-up__pw::before {
    background: url(../images/ico_lock_black.svg) no-repeat 1.633rem center;
  }
  input[type="text"],
  input[type="password"] {
    color: var(--gray7e);
    width: 100%;
    height: 4.4rem;
    padding-inline: 4.2rem 0.8rem;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--black);
    position: relative;
  }
  input::placeholder {
    font-size: 1.4rem;
    color: var(--gray7e);
  }
}
.sign-up__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  margin-block: 0.4rem 2.4rem;
  p {
    color: var(--gray64);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.035rem;
    text-align: right;
  }
}
.sign-up__chk {
  display: inline-block;
  position: relative;
  min-width: 1.8rem;
  min-height: 1.8rem;
  text-align: left;
  word-wrap: break-word;
  word-break: break-all;
  label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  span {
    font-size: 1.4rem;
    font-weight: 600;
  }
  /* input[type="checkbox"] {
        position: absolute;
        width: 1.8rem;
        height: 100%;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        opacity: 0;
    }
    input[type="checkbox"]:checked + label:before { 
        background-color: var(--blue);
        border-color: var(--blue);
    }
    input[type="checkbox"]:checked + label:after { 
        position: absolute;
        top: 3px;
        left: 7px;
        z-index: 1;
        display: inline-block;
        width: 5px;
        height: 10px;
        border: solid 1px #fff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
    }
    label {
        display: inline-block;
        padding: .3rem 0 0 2.6rem;
        font-size: 1.4rem;
        font-weight: 600;
        
        color: var(--black);
        cursor: pointer;
        &::before {
            position: absolute;
            top: 0;
            z-index: 1;
            left: 0;
            display: inline-block;
            width: 1.8rem;
            height: 1.8rem;
            border: 1px solid var(--graydd);
            background: var(--grayfe);
            content: '';
        }
    } */
}
.sign-up__find {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.4rem;
  li {
    position: relative;
  }
  li ~ li::before {
    content: "";
    width: 0.1rem;
    height: 1.2rem;
    background-color: var(--gray64);
    position: absolute;
    left: -1.2rem;
    top: 0.1rem;
  }
  a {
    font-size: 1.4rem;
    color: var(--black);
    transition: color 0.3s;
    &:hover {
      color: var(--gray64);
    }
  }
}
.sign-up__btnset {
  display: grid;
  gap: 2rem;
  text-align: center;
  .btn-login {
    width: 100%;
    height: 5.3rem;
    color: var(--white);
    font-size: 1.6rem;
    line-height: 5.3rem;
    padding-inline: 4.05rem;
    border-radius: 0.4rem;
    background-color: var(--black);
  }
  .sign-up__membership {
    width: 100%;
    height: 5.3rem;
    color: var(--black);
    font-size: 1.6rem;
    line-height: 5.3rem;
    padding-inline: 4.05rem;
    border-radius: 0.4rem;
    border: 1px solid var(--black);
    background-color: var(--white);
  }
}
.error-msg {
  padding: 5rem 0 0;
  color: var(--red);
  font-size: 1.6rem;
}
.form-group {
  label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.8rem;
  }
  input[type="text"],
  [type="email"],
  [type="password"] {
    width: 100%;
  }
  .form-select {
    width: 100%;
  }
}
.form-group ~ .form-group {
  margin-top: 2rem;
}

.wrapper {
  width: 100%;
  height: 100vh;
  background: var(--grayf5);
}
.header {
  width: 100%;
  height: 6rem;
  padding-inline: 3.2rem;
  display: flex;
  background: var(--white);
  justify-content: space-between;
  align-items: center;
}
.logo {
  a {
    color: var(--black);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.055rem;
  }
}
.user {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.4rem;
  div {
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid #ddd;
    background: #fff;
    transition: border 0.3s;
    &:hover {
      /* border: 1px solid var(--blue); */
      background: var(--grayef);
    }
  }
  a {
    color: var(--gray7e);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.035rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.4rem;
  }
  .user__info {
    a:before {
      content: "";
      width: 2rem;
      height: 2rem;
      background: url(../images/ico_person7e.svg) no-repeat center;
    }
  }
  .user__logout {
    a:before {
      content: "";
      width: 2rem;
      height: 2rem;
      background: url(../images/ico_logout7e.svg) no-repeat center;
    }
    a:hover {
      color: var(--red);
    }
  }
}
.dashboard-container {
  display: grid;
  grid-template-columns: 22rem 1fr;
  height: calc(100vh - 6rem);
}
.gnb-wrap {
  width: 100%;
  padding-block: 1.6rem;
  background: linear-gradient(180deg, #0458a9 76.67%, #004383 100%);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.gnb {
  ul {
    li {
      a {
        padding-left: 3.2rem;
        padding-block: 1.9rem;
        display: block;
        font-size: 1.5rem;
        color: var(--white);
        font-weight: 600;
        letter-spacing: -0.0375rem;
        transition: background-color 0.5s;
      }
      ul {
        display: none;
        a {
          display: block;
          padding-left: 5rem;
          padding-block: 1rem;
          line-height: normal;
          font-size: 1.4rem;
          font-weight: 400;
          color: #fff;
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            margin: 0 0.4rem 0 0;
            width: 0.3rem;
            height: 0.1rem;
            background: var(--white);
            vertical-align: 0.5rem;
          }
          &:hover {
            background: #002c56;
          }
        }
      }
      &.on {
        a {
          &.dep {
            background: url(../images/ico_arw_white_up.svg) no-repeat right
              1.7rem center;
          }
        }
      }
      a {
        &.dep {
          background: url(../images/ico_arw_white_down.svg) no-repeat right
            1.7rem center;
        }
      }
    }
    .my-dashboard {
      a {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        &::before {
          content: "";
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 50%;
          background: var(--white) url(../images/ico_my_emoticon.svg) center
            no-repeat;
          margin-right: 0.7rem;
        }
      }
    }
  }
}

footer {
  margin-inline: 1.2rem;
  padding-top: 1.2rem;  
  hr {
	border-top: 1px solid #4376a8;
  }  
  span {
	color: var(--graydd);
    font-size: 1.2rem;
  }
  p {
    margin-top: 0.8rem;
    font-size: 1.0rem;
    color: var(--white);
  }
}

/* index */
.main {
  width: calc(100% - 7.2rem);
  margin-inline: 3.6rem 3.2rem;
  margin-block: 3.6rem;
}

/* 타이틀 */
.h2-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--graydd);
  padding-bottom: 1rem;
  h2 {
    color: var(--black);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.06rem;
  }
  .add-buttons {
    display: flex;
    align-items: center;
  }
  .btn-useradd {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--blue);
    padding-inline: 1.4rem;
    padding-block: 0.7rem;
    border: 1px solid var(--blue);
    border-radius: 0 0.4rem 0.4rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 2.4rem;
    transition: all 0.2s;
    i {
      width: 2.1125rem;
      height: 1.4616rem;
      background: url(../images/ico_personblue.svg) no-repeat center;
    }
    &:hover {
      background: var(--lightblue);
    }
  }

  .btn-listadd {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--blue);
    padding-inline: 1.4rem;
    padding-block: 0.7rem;
    border: 1px solid var(--blue);
    border-radius: 0 0.4rem 0.4rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: 2.4rem;
    transition: all 0.2s;
    i {
      width: 1.465rem;
      height: 1.355rem;
      background: url(../images/ico_list_add.svg) no-repeat center;
    }
    &:hover {
      background: var(--lightblue);
    }
  }
}
.h3-wrap {
  /* border-bottom: 1px solid var(--graydd); */
  padding-bottom: 1rem;
  h3 {
    color: var(--black);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.06rem;
  }
}

/* 현재위치 */
.breadcrumb {
  ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    li {
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--grayce);
      letter-spacing: -0.035rem;
    }
    li ~ li::before {
      content: ">";
      display: inline-block;
      color: var(--grayce);
      margin-right: 0.4rem;
    }
  }
}

/* 블럭공통 */
.block {
  /* padding: 1.2rem; */
  padding-inline: 2.4rem;
  padding-block: 2.2rem;
  border-radius: 1.2rem;
  background: var(--white);
  .inner {
    width: 100%;
    /* padding-inline: 2.4rem; */
    p {
      font-size: 1.6rem;
    }
  }
}

/* 검색영역 old*/
/* .search-wrap {
  padding-inline: 2.4rem;
  background-image: linear-gradient(to right bottom, #e5f0ff, #d7e8ff);
  fieldset {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.2rem;
    align-items: center;
    justify-content: flex-start;

    .search-group,
    select.search-group,
    input.search-group {
      flex: 1 1 100px;
      min-width: 100px;
      width: 100px;
    }

    .search__btnset {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      flex: 1 1 100px;
      width: 100px;
    }
  }
}

.search-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0;
    white-space: nowrap;
  }
} */

/* 검색영역 */
.search-wrap {
  padding-inline: 2.4rem;
  background-image: linear-gradient(to right bottom, #e5f0ff, #d7e8ff);
  fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
    /* overflow-x: auto; */
  }
  .search__btnset {
    display: inline-flex;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    margin-left: 1.2rem;
    .btn ~ .btn {
      /* margin-left: 2.2rem; */
    }
  }
}
.search-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-end;
  label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.8rem;
  }
}

/* paging */
/* 페이징 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2.4rem;
  > a {
    line-height: 1;
  }
  .num_list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    li {
      position: relative;
      width: 3.2rem;
      height: 3.2rem;
      font-size: 1.4rem;
      border-radius: 0.4rem;
      text-align: center;
      transition: all 0.3s;
      a {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        line-height: 3.2rem;
        transition: all 0.4s;
        &::before {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: 100%;
          height: 100%;
          border-radius: 0.4rem;
          color: (--white);
          background: var(--grayef);
          transform: translate(-50%, -50%);
          transition: all 0.4s;
          z-index: -1;
        }
      }
      &.active {
        a {
          color: var(--white);
          font-weight: 500;
          &:before {
            background-color: var(--black);
          }
        }
      }
    }
  }
  .first,
  .last {
    width: 3.2rem;
    height: 3.2rem;
  }
  .first {
    margin-right: 0.8rem;
    background: url(../images/ico_arw_first.svg) no-repeat center;
  }
  .last {
    margin-left: 0.8rem;
    background: url(../images/ico_arw_last.svg) no-repeat center;
  }
  .none {
    opacity: 0.4;
    cursor: default;
  }
}

/* Modal Popup */
.popup-wrap {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  min-width: 100rem;
  height: fit-content;
  border-radius: 1.2rem;
  background: var(--white);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gray64);
  z-index: 210;
  .inner {
    max-width: 94%;
    margin: 3rem auto;
    .btn-wrap {
      width: 100%;
      margin-top: 2.4rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .close {
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
    width: 3.6rem;
    height: 3.6rem;
    text-indent: -999em;
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      background-color: var(--black);
    }
    &::before {
      -webkit-transform: rotate(135deg) translateX(0%);
      transform: rotate(135deg) translateX(0%);
    }
    &:after {
      -webkit-transform: rotate(45deg) translateX(0%);
      transform: rotate(45deg) translateX(0%);
    }
  }
}
.popup__h2 {
  border-bottom: 1px solid var(--black);
  padding-bottom: 1.2rem;
  margin-bottom: 2.4rem;
  h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
  }
  p {
    font-size: 1.4rem;
    color: var(--gray64);
    font-weight: 400;
    strong {
      font-weight: 600;
    }
  }
}
.popup__conts {
  position: relative;
  width: 100%;
  /* height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 5rem; */
  /* 동영상삽입시 반응형 */
}
.dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: 200;
}
.popup-wrap {
  .inner {
    width: 100%; /* 전체 화면 가로에 맞추고 싶을 경우 */
    /*  max-width: 600px; 혹은 최대 너비 지정 */
    padding-inline: 0;
    background: var(--white);
  }
  .popup-body textarea {
    width: 100%;
    box-sizing: border-box; /* 패딩 포함해서 width 계산 */
    color: var(--black); /* ✅ 폰트 컬러 설정 */
    font-size: 1.6rem;
    line-height: 1.5; /* 기본 줄 간격: 글자 크기의 1.5배 */
  }
  .popup-footer {
    gap: 1.2rem;
  }
}

.no_data {
  padding: 2.4rem;
  border-radius: 0.8rem;
  background: var(--grayf5);
  p {
    color: var(--gray64);
  }
}

/* 설비관리 */
.table_tip {
  margin-bottom: 0.6rem;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 300;
  span {
    color: var(--blue);
    display: inline-block;
    margin-right: 0.3rem;
  }
}
.result-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: 1rem;
  margin-bottom: 1rem;
  p {
    font-size: 1.4rem;
    color: var(--gray64);
    strong {
      color: var(--black);
      font-weight: 500;
    }
  }
}

.tabs-wrap {
  padding-inline: 2.4rem;
  .tabs {
    padding: 0;
    display: flex;
    gap: 2.4rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: start;
    li {
      font-size: 1.8rem;
      border-bottom: 2px solid var(--blue);
      padding: 2rem;
      cursor: pointer;
      &.active {
        color: var(--white);
        font-weight: 500;
        padding-bottom: 1.9rem;
        border-bottom: 2px solid var(--blue);
        background: var(--blue);
        border-radius: 1.2rem;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}
.tab-content {
  h2 {
    color: var(--black);
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 2rem;
  }
  table {
    tr {
      &.summary {
        background: var(--grayf5);
        font-weight: 500;
      }
    }
    td {
      font-size: 1.5rem;
    }
  }
}

.table-type1 {
  &.form1 {
    th {
      padding-inline: 3.2rem;
      span {
        color: var(--blue);
        font-size: 1.4rem;
      }
    }
    td {
      padding-inline: 1.2rem;
      input[type="text"],
      [type="number"],
      [type="password"],
      [type="email"],
      [type="date"],
      [type="file"],
      [type="tel"],
      [type="datetime-local"],
      select {
        width: 100%;
      }

      /* GSC 추가 */
      select.form-select-30 {
        width: 30%;
      }
      select.form-select-40 {
        width: 40%;
      }
      select.form-select-50 {
        width: 50%;
      }
      select.form-select-60 {
        width: 60%;
      }
      select.form-select-70 {
        width: 70%;
      }
      select.form-select {
        width: 100%;
      }

      textarea {
        height: 4rem;
      }
    }
    .select_list {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      li {
        flex: 1;
      }
    }
  }
}

/* 테이블 내부여백, 셀 간격 제거 */
.inner-table {
  border-collapse: collapse; /* 셀 테두리 겹침 제거 */
  margin: 0;                /* 외부 여백 제거 */
  width: 100%;              /* 필요시 전체폭 사용 */
}

/* 고장수리 */
.dashboard-summary {
  display: flex;
  justify-content: space-between;
  gap: 2.4rem;
}
.card-wrap {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1.6rem;
  width: 100%;
}
.card {
  padding: 1.6rem;
  border-radius: 1.2rem;
  background: var(--white);
  display: flex;
  align-items: flex-start;
  &.blue {
    background-color: #f5f9ff;
  }
  p,
  span {
    display: inline-block;
    font-size: 1.4rem;
  }
  p {
    font-weight: 600;
    position: relative;
    padding-left: 0.8rem;
    &::before {
      content: "";
      width: 0.3rem;
      height: 0.3rem;
      background-color: var(--black);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateX(-50%);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateX(-50%);
    }
  }
  .card_h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 4.4rem;
    padding-inline: 1.6rem 3.2rem;
    &.blue {
      color: var(--blue);
    }
  }
  .card_body {
    width: 100%;
    .card_total {
      border-radius: 0.8rem;
      padding-inline: 1.6rem;
      padding-block: 1rem;
      background-color: var(--grayf5);
      &.blue {
        background-color: #d7ecff;
      }
      /* width: 100%; */
      strong {
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--blue);
        display: inline-block;
        margin-inline: 1rem 0.5rem;
      }
    }
    .card_list {
      margin-top: 1rem;
      padding-inline: 1.6rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.8rem;
      strong {
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--blue);
        display: inline-block;
        margin-inline: 0.5rem 0.5rem;
      }
    }
  }
}

/* 근태관리 */
.prentive-date {
  margin-left: 3.8rem;
  color: var(--black);
  font-weight: 600;
  font-size: 1.6rem;
  text-decoration: underline 2px solid var(--blue);
  text-underline-offset: 1.6rem;
  span {
    color: var(--gray7e);
    font-weight: 400;
  }
}

/* 근태관리 */
.tbl-equip {
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--graye6);
  border-right: 1px solid var(--graye6);
  /* border-bottom: 1px solid var(--graye6); */
}
.tbl-equip thead {
  display: block;
}
.tbl-equip tbody {
  display: block;
  max-height: 500px;
  overflow-y: auto;
}
.tbl-equip tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  &:hover {
    background: rgba(245, 245, 250, 0.3);
  }
}
.tbl-equip th {
  border-left: 1px solid var(--graye6);
  background: var(--grayf5);
  text-align: center;
  padding: 0.4rem;
  font-size: 13px;
  line-height: 1.4;
}
.tbl-equip td {
  border-bottom: 1px solid var(--graye6);
  border-left: 1px solid var(--graye6);
  text-align: center;
  padding: 0.4rem;
  font-size: 13px;
  line-height: 1.4;
}

.attendance_name {
  font-size: 1.4rem;
  background: var(--grayf5);
  min-height: 4rem;
  border-radius: 0.4rem;
  padding: 1.2rem;
}

.calendar-wrap {
}
.attendance-calendar {
  width: 100%;
  th,
  td {
    border: 1px solid var(--graye6);
  }
  th {
    padding: 1rem;
    font-size: 1.2rem;
    color: var(--gray7e);
  }
  td {
    padding: 0.5rem;
    height: 5rem;
    font-size: 1.4rem;
  }
  .weekend {
    background: rgba(245, 245, 250, 0.4);
  }
  .holiday {
    background: rgba(255, 247, 214, 0.4);
  }
  .annual {
    background: rgba(200, 230, 201, 0.2);
  }
  .education {
    background: rgba(187, 222, 251, 0.2);
  }
  .business {
    background: rgb(255, 249, 196, 0.2);
  }
  .vacation {
    background: rgb(255, 204, 188, 0.2);
  }
  .sick {
    background: rgb(225, 190, 231, 0.2);
  }
  .absent {
    background: rgb(255, 205, 210, 0.2);
  }
  .overtime {
    background: rgb(178, 235, 242, 0.2);
  }
  .work-holiday {
    background: rgb(220, 237, 200, 0.2);
  }
  .cal-date {
    font-size: 1.3rem;
    color: var(--gray64);
    margin-bottom: 0.5rem;
  }
  .cal-status {
    font-size: 1.4rem;
    color: var(--blue);
    font-weight: 500;
    padding: 0.2rem;
    background: rgba(229, 240, 255, 0.5);
    border-radius: 0.4rem;
    border: 1px solid #dfebfd;
  }
}

/* 시스템관리 */
.yearly-calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.action-buttons {
  display: flex;             /* 가로 배치 */
  align-items: center;       /* 세로 중앙 정렬 */
  gap: 8px;                  /* 버튼 사이 간격 */
}

.action-buttons .tg-count {
  margin-left: 8px;
  color: #666;
  font-size: 1.2rem;
}