header {
    width: 100%;
    height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(90deg, #FFFFFF 0.01%, #DBF2FA 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;

}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 로고+시스템명 오른쪽 정렬 */
    gap: 10px; /* 이미지와 텍스트 간격 */
    flex-wrap: wrap; /* 작은 화면에서 줄바꿈 */
    color:
}

.logo__imge {
    position: absolute;
    height: 25px;
    left: 48px;
    top: 5px;
}

.system__name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.system__name .title {
    position: absolute;
    height: 15px;
    left: 150px;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    /* 상자 높이와 동일 */
    color: #000000;
}

.system__name .sub__title {
    position: absolute;
    height: 15px;
    left: 220px;
    top: 30px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    /* 상자 높이와 동일 */
    color: #000000;
    text-shadow: 0px 4px 4px rgba(4, 144, 183, 0.25);
}

section.login {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 122px);
  background: url(/images/com/login_bg.png) center/cover no-repeat;

  /* 가운데 정렬 핵심 */
  display: flex;
  justify-content: right; /* 가로 가운데 */
  align-items: flex-end;     /* 세로 가운데 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.login__box {
  display: flex;
  flex-direction: column;  /* 세로 배치 */
  align-items: center;      /* 가로 가운데 */
  justify-content: center;  /* 세로 가운데 */
  text-align: center;

  width: 500px;
  height: 200px;
  background: rgba(4, 144, 183, 0.25);
  border-radius: 8px;
  margin-bottom: 30px;
  margin-right: 30px;
}

.login__box form {
    width:70%;
}
/* ITSM 텍스트: 기존대로 상단 5px 띄우고 중앙 정렬 */
.login__box > span:first-child {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  font-size: 24px;
}

/* (IT Service Management) 텍스트는 ITSM 아래 5px 띄우기 */
.login__box > span:nth-child(2) {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  color: #555;  /* 필요 시 색상 조정 */
}

/* input 두 개를 포함하는 div: 세로 정렬 */
.login__box > div {
  margin-top: 20px;        /* 텍스트와 input 상단 간격 */
  display: flex;
  flex-direction: column;  /* 세로 배치 */
  gap: 10px;               /* input 사이 간격 */
  align-items: center;     /* 가로 가운데 정렬 */
}

/* input 박스 너비를 login__box 대비 100%로 하고, 실제 너비 70% 반영은 부모가 70%이니 보통 100%로 맞춤 */
.login__box input.login__id, input.login__password {
  width: 100%;             /* 부모 div(가운데 정렬된) 기준 100% */
  height: 30px;
  max-width: 400px;        /* 선택: 최대 너비 제한할 경우 */
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 14px;
}

ul {
  padding: 0;
  margin: 20px 0px 0px 0px;
  list-style: none;
}

ul li {
  margin-bottom: 12px; /* 기존 input 박스 간격 */
}

/* 로그인 버튼 li는 간격 없이 붙도록 하거나 조절 가능 */
ul li.login__button__li {
  margin-bottom: 0;
  text-align: right; /* 오른쪽 정렬 */
}

/* 버튼 스타일 */
.login__button {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background-color: #0456a0;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.login__button:hover {
  background-color: #023e70;
}

/*FOOTER*/
footer {
  background-color: #272727;
  border-top: 1px solid #333;
}
footer .inner {
  padding: 10px 0px 10px 0px;
}
footer .info {
  text-align: center;
}
footer .info span {
  color: #999;
  font-size: 12px;
}
footer .info span:last-child {
  margin-right: 0;
}
footer .copyright {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
}
footer .logo {
  margin: 30px auto 0;
}