:root {
  --background: #0a0a0a;
  --foreground: #ededed;
}

.logo {
  filter: invert(1);
}

html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 100%;
  scrollbar-width: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-width: none;
  -ms-overflow-style: none;
  word-break: break-all;
  font-size: 20px;
  color: var(--foreground);
  background: var(--background);
  height: 100%;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style-type: none;
  list-style: none;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.subtitle {
  font-size: 14px;
  color: #aaa;
  margin-top: 4px;
}
.logo {
  width: 180px;
  height: auto;
  transition: filter 0.3s ease-in-out;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 세로 가운데 정렬 */
  min-height: 100vh; /* 화면 전체 높이를 사용 */
  padding-top: 20px;
  padding-bottom: 100px;
}

.btn-container {
  display: flex;
  justify-content: space-between; /* 버튼을 양 끝에 배치 */
  align-items: center; /* 수직 가운데 정렬 */
  width: 100%; /* 가로 크기 100% */
  margin-top: 20px; /* 상단 여백 추가 */
}

.btn-container a {
  font-size: 16px;
  padding: 8px 16px; /* 버튼 크기 적절히 설정 */
  margin: 5px;
}

.btn-container span {
  font-size: 16px;
  color: var(--foreground); /* 텍스트 색상 설정 */
}

.highlight {
  color: #ff5733;
  font-weight: bold;
}

/* 전체 항목 컨테이너 스타일 */
.item-card {
  display: flex;
  flex-direction: column;
  background-color: #2c2c2c; /* 어두운 배경 색 */
  border-radius: 8px; /* 둥근 모서리 */
  padding: 20px; /* 내부 여백 */
  margin-bottom: 20px; /* 항목 간 간격 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 그림자 */
  transition: transform 0.3s, box-shadow 0.3s; /* 호버 시 애니메이션 */
}

.item-card:hover {
  transform: translateY(-5px); /* 호버 시 살짝 위로 올리기 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 강조 */
}

/* 항목 제목과 상태 영역 스타일 */
.item-header {
  display: flex;
  justify-content: space-between; /* category와 status를 양쪽 끝으로 배치 */
  align-items: center;
  margin-bottom: 10px; /* 제목과 내용 사이 간격 */
  width: 100%; /* 가로 100% */
}

.category {
  font-size: 14px;
  font-weight: bold;
  color: #f0f0f0; /* 밝은 색으로 수정 */
  white-space: nowrap; /* 텍스트가 한 줄에 배치되도록 설정 */
  overflow: hidden; /* 텍스트가 넘치지 않도록 숨김 처리 */
  text-overflow: ellipsis; /* 텍스트가 넘칠 경우 '...' 표시 */
  flex-grow: 1; /* category가 가능한 많은 공간을 차지하도록 설정 */
  flex-shrink: 0; /* category가 줄어들지 않도록 설정 */
  min-width: 0; /* 부모 컨테이너에 맞춰 최소 너비 설정 */
}

.status {
  font-size: 14px;
  font-weight: bold;
  color: #4caf50; /* 활성 상태는 초록색으로 */
}

.status .active {
  color: #4caf50; /* 활성 상태 색상 */
}

.status .inactive {
  color: #f44336; /* 비활성 상태는 빨간색으로 */
}

/* 항목 정보 영역 스타일 */
.item-info,
.item-actions {
  display: flex;
  justify-content: space-between; /* 두 요소가 한 줄에 배치되도록 함 */
  align-items: center; /* 세로 가운데 정렬 */
  width: 100%; /* 전체 너비 차지 */
}

/* item-info의 내용이 잘 보이도록 수정 */
.item-info {
  flex-grow: 1; /* 남는 공간을 item-info가 차지하게 함 */
  white-space: nowrap; /* 텍스트가 한 줄로 배치되도록 */
  overflow: hidden; /* 넘치는 텍스트는 숨김 처리 */
  text-overflow: ellipsis; /* 넘칠 경우 '...' 표시 */
  font-size: 16px;
  margin-bottom: 15px; /* 정보와 액션 사이 간격 */
  color: #f0f0f0; /* 항목 정보 텍스트 색상 밝게 수정 */
}

.item-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff; /* 항목 이름을 흰색으로 수정 */
}

.alert-time {
  font-size: 14px;
  color: #b0b0b0; /* 알림 시간 색상은 회색으로 수정 */
}

/* 항목 액션 및 상태 영역 스타일 */
.item-actions {
  justify-content: flex-end; /* 오른쪽 정렬 */
}

.item-actions a {
  color: #ffffff; /* 링크 색상 흰색 */
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
}

.item-actions input {
  margin-right: 5px;
}

.item-actions label {
  font-size: 14px;
  color: #f0f0f0; /* 라벨 색상도 밝게 수정 */
}

footer {
  display: flex;
  justify-content: center; /* 이미지들을 가운데로 배치 */
  gap: 15px; /* 이미지들 간의 간격 */
  align-items: center; /* 이미지들 수직 가운데 정렬 */
  position: fixed; /* 고정 위치 */
  bottom: 0;
  width: 100%;
  background-color: var(--background); /* 배경색 */
  padding: 20px 20px 40px; /* 상단 여백 20px, 하단 여백 40px */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

footer img {
  width: auto; /* 고정된 width, height 대신 비율에 맞게 크기 조정 */
  height: 30px; /* 높이를 통일 */
  max-width: 100%; /* 이미지 크기를 화면에 맞게 제한 */
}

.select-input {
  width: 20%;
  padding: 0;
}

.select-input select {
  border: none;
  height: 32px;
}

/* 폼 컨테이너 */
.form-container {
  max-width: 600px;
  margin: 5px auto;
  padding: 20px;
  background-color: #1f1f1f;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 이미지 및 텍스트 */
.form-container img {
  display: block;
  margin: 0 auto;
  filter: invert(1);
}

.form-container p {
  text-align: center;
  color: #e0e0e0;
  font-size: 16px;
  margin: 10px 0;
}

/* 에러 메시지 */
form span {
  color: #4caf50;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

/* 전체 폼 스타일 */
.user-form {
  display: flex;
  flex-wrap: wrap; /* 항목들이 화면에 맞게 줄 바꿈 */
  gap: 20px; /* 항목 간 간격 */
  padding: 20px;
}

.user-form li {
  list-style: none;
  margin: 0;
}

/* 각 항목에 대한 그룹화 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%; /* 각 항목의 너비를 30%로 설정하여 가로로 배치 */
}

.form-group.radio-group {
  display: flex;
  flex-direction: row; /* 라디오 버튼을 가로로 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 10px; /* 버튼 간격 조정 */
}

label {
  font-size: 14px;
  color: #b0b0b0;
}

/* 입력 필드 스타일 */
input[type="text"], select {
  background-color: #2c2c2c;
  color: #e0e0e0;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 14px;
}

/* 라디오 버튼과 레이블을 가로로 배치 */
.form-group input[type="radio"] {
  margin-right: 5px;
}

.form-group label {
  color: #b0b0b0;
  font-size: 14px;
}

input[type="radio"] + label {
  color: #b0b0b0;
  font-size: 14px;
}

/* 버튼 스타일 */
button[type="button"] {
  background-color: #e74c3c; /* 붉은색 */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button[type="button"]:hover {
  background-color: #c0392b; /* 더 어두운 붉은색 */
}

/* 선택상자 스타일 */
select {
  background-color: #2c2c2c;
  color: #e0e0e0;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 14px;
}

/* 검색 입력 필드 */
#searchInput {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 10px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.button-right{
  display: flex;
  justify-content: flex-end; /* 버튼을 오른쪽 끝으로 정렬 */
  width: 100%; /* 버튼이 form 너비를 꽉 채우게 설정 */
}

.credit-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-bottom: 16px;
}
.credit-info strong {
  color: #ff7eb3;
}

.login-form {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.login-group {
  margin-bottom: 16px;
}

.invalid-feedback {
  color: #ff7b72;
  font-size: 14px;
  margin-top: 4px;
}

input.form-control {
    background: #222;
    color: white;
    border: 1px solid white;
    border-radius: 6px;
    padding: 10px;
    transition: all 0.2s;
}

input.form-control:focus {
    border-color: #ff758c;
    box-shadow: 0 0 8px rgba(255, 117, 140, 0.4);
}

.signup-form {
  max-width: 600px; /* 기존보다 넓게 */
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.signup-form ol {
  list-style: none;
  padding: 0;
}

.signup-form li {
  margin-bottom: 16px;
}

.signup-form label {
  font-weight: bold;
  color: #ddd;
  display: block; /* 줄 바꿈 */
  margin-bottom: 4px;
}

.signup-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid white;
  border-radius: 6px;
  background: #222;
  color: white;
  transition: all 0.2s;
}

.signup-form input:focus {
  border-color: white;
  box-shadow: 0 0 8px rgba(255, 117, 140, 0.4);
}

.signup-form button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #2ecc71, #58d68d);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.signup-form button:hover {
  background: linear-gradient(135deg, #2ecc71, #58d68d);
  box-shadow: 0 4px 8px rgba(255, 120, 150, 0.4);
}

/* 모바일 친화적 스타일 추가 */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* 폰트 크기 조정 */
  }

  .container {
    padding-top: 15%; /* 화면 크기에 맞게 상단 여백 조정 */
    padding-bottom: 80px; /* 푸터와의 간격을 위해 여백 조정 */
  }

  .btn-container {
    flex-direction: column; /* 모바일에서는 버튼을 세로로 정렬 */
    gap: 10px; /* 버튼 사이의 간격 */
  }

  .btn-container a {
    width: 100%; /* 모바일에서는 버튼 너비를 100%로 설정 */
    text-align: center; /* 버튼 텍스트 중앙 정렬 */
    padding: 10px; /* 버튼 패딩 조금 더 키움 */
  }

  .btn-container span {
    text-align: center; /* 텍스트 중앙 정렬 */
    margin-bottom: 10px; /* 텍스트 아래에 간격 추가 */
  }

  footer img {
    height: 25px; /* 모바일에서 이미지 크기 작게 */
  }

  .select-input {
    width: 40%; /* 드롭다운 너비 조정 */
  }

  .select-input select {
    height: 28px; /* 드롭다운의 높이를 조금 더 작게 */
  }

  .btn {
    font-size: 14px; /* 버튼 크기 조정 */
    padding: 8px 12px; /* 버튼 패딩 조정 */
  }

  .item-card {
    padding: 15px; /* 패딩 줄이기 */
  }

  .item-header {
    flex-direction: row; /* category와 status가 한 줄에 배치되도록 설정 */
    justify-content: space-between;
  }

  .status {
    margin-top: 5px;
    justify-content: flex-end; /* status도 오른쪽으로 정렬 */
  }

  .item-info {
    font-size: 14px; /* 정보 크기 줄이기 */
  }

  .item-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .item-actions a {
    margin-top: 10px; /* 수정 링크 간격 조정 */
  }
  
  .form-container {
    padding: 15px;
  }

  .user-form {
      gap: 15px;
  }

  .form-group {
    gap: 8px;
    width: 100%; /* 모바일에서는 각 항목을 전체 너비로 표시 */
  }

  label {
      font-size: 13px;
  }

  input[type="text"], select, button[type="submit"] {
      font-size: 14px;
      padding: 8px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px; /* 작은 화면에서 폰트 크기 더 줄임 */
  }

  .container {
    padding-top: 10%; /* 화면 크기에 맞춰 상단 여백 추가 */
    padding-bottom: 60px; /* 여백 추가 */
  }

  .btn-container a {
    font-size: 14px; /* 작은 화면에서는 버튼 텍스트 크기 줄임 */
    padding: 8px 12px; /* 버튼 패딩을 줄임 */
  }

  footer img {
    height: 20px; /* 작은 화면에서 더 작게 설정 */
  }

  .select-input {
    width: 50%; /* 드롭다운 너비 늘리기 */
  }

  .select-input select {
    height: 24px; /* 더 작은 높이 */
  }

  .btn {
    font-size: 12px; /* 더 작은 버튼 크기 */
    padding: 6px 10px; /* 버튼 패딩 더 줄임 */
  }

  .container p {
    font-size: 12px; /* 텍스트 크기 축소 */
    text-align: center; /* 텍스트 중앙 정렬 */
  }

  ol {
    font-size: 12px; /* 리스트 아이템 폰트 크기 축소 */
  }
}