/* :root 영역에서 CSS 변수 정의 */
  :root {
    --primary-color:rgb(11, 189, 19); /* 기준 색상 */
    --primary-dark:rgb(4, 184, 4);  /* 어두운 변형 */
    --primary-light:rgb(11, 189, 19); /* 밝은 변형 */
    --background-color: #f9f9ff; /* 전반적인 배경색 */
    --text-color: #333333;       /* 기본 텍스트 색상 */
    --border-color: #dddddd;     /* 경계선 색상 */
    --error-color: #e74c3c;      /* 에러 색상 */
    --secondary-color: #2ef9b6;  /* 보조 색상 */
  }

  /* 전체 페이지 스타일 */
  body {
    margin: 0; /* 기본 마진 제거 */
    font-family: 'Helvetica', 'Arial', sans-serif; /* 깔끔한 폰트 */
    background-color: #f5fff6; /* 배경색 적용 */
    color: var(--text-color); /* 텍스트 색상 */
  }
  .logo {
    cursor:pointer;
  }

  /* 상단 헤더 영역 */
  header {
    /* 상단 고정 내비게이션 바 스타일 */
    background-color: #2277ff; /* 상단 배경색 */
    color: #fff; /* 텍스트 흰색 */
    padding: 10px 20px; /* 여백 */
    display: flex; /* 가로배치 */
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
  }

  /* 헤더 왼쪽 제목 */
  header .logo {
    font-size: 1.2rem; /* 로고 글자 크기 */
    font-weight: bold; /* 볼드 처리 */
  }

  /* 헤더 내비게이션 */
  header nav a {
    margin-left: 20px; /* 링크 간 간격 */
    color: #fff; /* 링크 글자색 흰색 */
    text-decoration: none; /* 밑줄 제거 */
    font-size: 0.9rem; /* 글자 크기 조금 작게 */
  }

  header nav a:hover {
    text-decoration: underline; /* 호버 시 밑줄 */
  }

  /* 메인 컨테이너 */
  .jobcontainer {
    max-width: 1200px; /* 최대 너비 */
    margin: 20px auto; /* 중앙 정렬 */
    padding: 0 20px;   /* 좌우 패딩 */
  }

  /* 페이지 타이틀 */
  .page-title {
    font-size: 1.5rem; /* 큰 글자 크기 */
    margin-bottom: 10px; /* 아래 여백 */
    border-bottom: 2px solid var(--primary-light); /* 아랫줄 */
    padding-bottom: 5px; /* 아랫줄과의 거리 */
    font-weight: bold; /* 볼드 */
  }

  /* 페이지 설명 텍스트 */
  .page-description {
    font-size: 0.9rem; /* 작은 글자 크기 */
    color: #666;       /* 흐린 텍스트 색상 */
    margin-bottom: 20px; /* 아래 여백 */
  }

  /* 필터 영역 */
  .filters {
    display: flex; /* 필터들을 가로로 나열 */
    flex-wrap: wrap; /* 줄바꿈 허용 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-bottom: 20px; /* 아래 여백 */
    justify-content: center;
  }

  .filters select,
  .filters input[type="radio"] {
    margin-right: 10px; /* 항목 간 간격 */
    padding: 5px;       /* 기본 패딩 */
    font-size: 0.9rem;  /* 글자 크기 */
    border: 1px solid var(--primary-color); 
    border-radius: 4px; /* 모서리 둥글게 */
    height: 40px;
  }

  .filters label {
    margin-right: 10px; /* 라벨 간격 */
    font-size: 0.9rem;  /* 글자 크기 */
  }

  /* 테이블 스타일 */
  table {
    width: 100%; /* 가로 100% 사용 */
    border-collapse: collapse; /* 테이블 셀 경계선 겹침 제거 */
    margin-bottom: 20px; /* 아래 여백 */
    background: #fff; /* 테이블 배경색 흰색 */
  }

  /* 테이블 헤더 */
  thead th {
    background-color: var(--primary-light); /* 헤더 배경색 */
    color: #fff; /* 헤더 텍스트 색상 */
    padding: 10px; /* 패딩 */
    font-size: 0.9rem; /* 글자 크기 */
    font-weight: normal; /* 굵기 기본 */
    text-align: left; /* 왼쪽 정렬 */
    border-bottom: 2px solid var(--primary-dark); /* 아래 경계선 */
  }

  /* 테이블 바디 */
  tbody tr {
    border-bottom: 1px solid var(--border-color); /* 행 아래 경계선 */
  }

  tbody td {
    padding: 10px; /* 셀 패딩 */
    font-size: 0.9rem; /* 글자 크기 */
    vertical-align: middle; /* 수직 중앙정렬 */
  }

  tbody tr:hover {
    background-color: #fafafa; /* 호버 시 약간 다른 배경색 */
  }

  /* 글쓰기 버튼 */
  .write-btn, .reset-btn {
    display: inline-block; /* 인라인 블록 */
    padding: 7px 15px; /* 패딩 */
    background-color: var(--primary-color); /* 배경색 */
    color: #fff; /* 글자색 흰색 */
    text-decoration: none; /* 밑줄 제거 */
    border-radius: 4px; /* 모서리 둥글게 */
    font-size: 0.9rem; /* 글자 크기 */
    cursor: pointer; /* 커서 포인터 */
    margin-right:30px;
  }

  .write-btn:hover {
    background-color: var(--primary-dark); /* 호버 시 색상 어둡게 */
  }

  /* 모달 배경 */
  .modal-overlay {
    position: fixed; /* 스크롤해도 고정 */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); /* 반투명 검은 배경 */
    display: flex; /* 중앙정렬 위한 flex */
    justify-content: center; /* 가로 중앙정렬 */
    align-items: center; /* 세로 중앙정렬 */
    opacity: 0; /* 초기 투명 */
    visibility: hidden; /* 초기 비가시 */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* 부드러운 전환 */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  /* 모달창 */
  .modal {
    background: #fff; /* 모달 배경 흰색 */
    width: 90%; /* 넓이(모바일 대응) */
    max-width: 500px; /* 최대 넓이 */
    padding: 20px; /* 패딩 */
    border-radius: 5px; /* 모서리 둥글게 */
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* 그림자 */
    position: relative; /* 닫기 버튼 위치 조정 */
    height: 70vh;
    overflow-y: auto;
  }

  .show {
    opacity: 1; /* 불투명 */
    visibility: visible; /* 가시화 */
  }

  /* 모달 헤더 */
  .modal h2 {
    margin-top: 0; /* 상단 여백 제거 */
    margin-bottom: 10px; /* 아래 여백 */
    border-bottom: 2px solid var(--primary-light); /* 아래 경계선 */
    padding-bottom: 5px; /* 경계선과 거리 */
    font-size: 1.2rem; /* 글자 크기 */
    font-weight: bold; /* 볼드 */
  }

  /* 모달 폼 스타일 */
  .modal form {
    display: flex; /* 가로배치 */
    flex-direction: column; /* 세로 방향 정렬 */
  }

  .modal form label {
    /* font-size: 0.9rem; 글자 크기 */
    margin-top: 10px;  /* 위 여백 */
  }

  .modal form input[type="text"],
  .modal form select,
  .modal form textarea {
    margin-top: 5px; /* 라벨과의 거리 */
    padding: 8px; /* 패딩 */
    font-size: 0.9rem; /* 글자 크기 */
    /* border: 1px solid var(--border-color);  */
    border-radius: 4px; /* 모서리 둥글게 */
    
    border:none;
    outline:none;
  }

  .modal form input[type="radio"] {
    margin-right: 5px; /* 라디오와 텍스트 사이 간격 */
  }

  .modal form textarea {
    height: 100px; /* 텍스트 영역 높이 */
    resize: vertical; /* 세로 리사이즈 허용 */
  }

  /* 모달 하단 버튼 영역 */
  .modal-buttons {
    display: flex; /* 가로 배치 */
    justify-content: flex-end; /* 오른쪽 정렬 */
    margin-top: 20px; /* 위 여백 */
  }

  .modal-buttons button {
    padding: 8px 15px; /* 패딩 */
    margin-left: 10px; /* 버튼 간격 */
    border: none; /* 테두리 제거 */
    border-radius: 4px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 포인터 */
    font-size: 0.9rem; /* 글자 크기 */
  }

  .modal-buttons .save-btn {
    background-color: var(--primary-color); /* 배경색 */
    color: #fff; /* 글자색 */
  }

  .modal-buttons .cancel-btn {
    background-color: #ccc; /* 배경색 회색 */
    color: #333; /* 글자색 */
  }

  .modal-buttons .save-btn:hover {
    background-color: var(--primary-dark); /* 호버 시 색상 어둡게 */
  }

  .modal-buttons .cancel-btn:hover {
    background-color: #bbb; /* 호버 시 조금 더 어둡게 */
  }

  /* 닫기 버튼 (X 버튼) */
  .close-modal {
    position: absolute; /* 모달 내부 절대 위치 */
    top: 20px; 
    right: 10px; 
    cursor: pointer; /* 커서 포인터 */
    font-size: 1.5rem; /* 크기 */
    color: var(--primary-dark); /* 색상 */
  }

  .close-modal:hover {
    color: var(--error-color); /* 호버 시 에러 색상 */
  }
  .jobwrap {
    border:1px solid #efefef;
    border-radius: 5px;
    padding:6px 10px;
    display: flex;
    align-items: center;
    height: 30px;
    margin-top:10px;
  }
  .jobtitle {
    color:#afafaf;
    font-size:12px;
  }

  .selectedSiName, #selectedDongName,.mainselectedSiNamewrap, .mainselectedDongNamewrap {
    font-size: 14px;
    cursor:pointer;
    width: 100px;
  }
  .siList, .dongList, .siListwrap, .dongListwrap {
    display:none;
  }
  .si-item, .topsi-item, .topdong-item {
    padding:4px;
    font-size:14px;
    cursor:pointer;
  }
  .mainselectedSiNamewrap, .mainselectedDongNamewrap {
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    height: 20px;
    padding:7px;
    width:100px;
    display:flex;
    align-items:center;
    justify-content: space-around;
    margin-right:20px;
    font-size:12px;
    background-color: #fff;
  }
  .t_1 {
    margin-left: 20px;
    width: 5%;
}
.t_2 {
    width: 15%;
}
.t_3 {
    width: 40%;
    text-align: center;
}
.t_4 {
    width: 5%;
}
.t_5 {
    width: 10%;
}
.t_6 {
    width: 5%;
}
.t_7 {
    width: 10%;
}
.t_8 {
    width: 5%;
}
.t_9 {
    width: 5%;
}
.inn{
  border:1px solid #bcd6ff;
  border-radius: 5px;
  color: blue;
  padding:3px;
  font-size:12px;
}
.out{
  border:1px solid #bdf5b5;
  border-radius: 5px;
  color: #28b316;
  padding:3px;
  font-size:12px;
}