@charset "utf-8";
/* plugin/attendance/style.css */

/* ------------------------------
 * 달력 헤더
 * ------------------------------ */
#attendance_layer .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* 오늘 날짜 - 왼쪽 */
#attendance_layer .calendar-header .calendar-today {
  flex: 1;
  text-align: left;
  font-size: 17px;
  color: #666;
  font-weight: normal;
  margin: 0;
}

/* 현재 월 - 가운데 */
#attendance_layer .calendar-header .current-month {
  flex: 2;
  text-align: center;
  font-size: 18px;       /* 크게 */
  font-weight: bold;
  color: #000;
  line-height: 1.4;
}

/* 화살표 - 오른쪽 */
#attendance_layer .calendar-header .calendar-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

#attendance_layer .calendar-header .calendar-nav a img {
  width: 17px;
  height: auto;
}

/* ------------------------------
 * 공통 컨테이너
 * ------------------------------ */
#attendance_layer,
#attendance_list {
  width: 100%;
  margin: 20px auto 0;     /* 중앙 정렬 (위 20px) */
  padding: 0 15px;         /* 좌우 여백 */
  box-sizing: border-box;
  text-align: center;
}

/* ------------------------------
 * 달력
 * ------------------------------ */
#attendance_layer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
#attendance_layer ul li {
  flex: 1 0 14.28%; /* PC: 7열 */
  text-align: center;
}
#attendance_layer a {
  text-decoration: none;
}

#attendance_layer .today { font-weight: bold; font-size: 16px; margin-bottom: 10px; }
#attendance_layer .w     { font-weight: bold; font-size: 16px; line-height: 20px; color: #333; }

#attendance_layer .title  { font-size: 12px; line-height: 30px; color: #565656; }
#attendance_layer .title1 { font-size: 12px; line-height: 30px; color: #82d4ff; }
#attendance_layer .title2 { font-size: 12px; line-height: 30px; color: #fe7676; }

#attendance_layer .sun1 { color: #fe7676; font-size: 12px; }
#attendance_layer .sat1 { color: #82d4ff; font-size: 12px; }
#attendance_layer .day1 { color: #333;    font-size: 12px; }

#attendance_layer .sun2 { font-weight: bold; font-size: 12px; line-height: 20px; color: #fe7676; }
#attendance_layer .sat2 { font-weight: bold; font-size: 12px; line-height: 20px; color: #82d4ff; }
#attendance_layer .day2 { font-weight: bold; font-size: 12px; line-height: 20px; color: #ff9933; }

#attendance_layer .sun3 { color: #ffbebe; font-size: 11px; }
#attendance_layer .sat3 { color: #b8b8ff; font-size: 11px; }
#attendance_layer .day3 { color: #999;    font-size: 11px; }

#attendance_layer .dot   { font-size: 12px; color: #000; }
#attendance_layer .check { font-size: 11px; color: #126420; }
#attendance_layer .check2{ font-size: 11px; color: #999; }

/* ------------------------------
 * 출석 리스트
 * ------------------------------ */
#attendance_list { margin: 20px 0; }

#attendance_list .input {
  width: 100%;
  height: 40px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
  box-sizing: border-box;
}

#attendance_list .attendance_list_info1,
#attendance_list .attendance_list_info3 {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

#attendance_list .attendance_list_info1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}

/* 출석 리스트 안내 박스 */
#attendance_list .attendance_list_info2 {
  margin: 15px auto;         /* 중앙 배치 */
  max-width: 100%;          /* 원하는 폭 제한 */
  text-align: center;          /* 내용은 왼쪽 정렬 */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px 18px;
  background: #fafafa;
  box-sizing: border-box;
}
#attendance_list .attendance_list_info2 ul {
  margin: 0;
  padding-left: 18px;        /* 불릿 대신 여백 */
  list-style: none;          /* 기본 불릿 제거 */
}
#attendance_list .attendance_list_info2 li {
  text-align: left;          /* 내용은 왼쪽 정렬 */
  font-size: 13px;
  line-height: 20px;
  color: #444;
  margin-bottom: 4px;
}

#attendance_list .sub { flex: 1; padding: 5px; }
#attendance_list .submit { flex: 0 0 auto; padding: 5px; }

#attendance_list .title { font-weight: bold; font-size: 12px; color: #333; }
#attendance_list .list  { font-size: 11px; color: #898989; }

#attendance_list .title_attendance1,
#attendance_list .title_attendance2 {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  color: #333;
}
#attendance_list .title_attendance1 { background: url(./img/line_01.gif) center right no-repeat; }

#attendance_list .no { font-size: 12px; line-height: 25px; color: #898989; }

#attendance_list .name_attendance_52 img,
#attendance_list .name_attendance img {
  border-radius: 50%;
  margin: 5px 5px 5px 0;
}
#attendance_list .name_attendance_52 img { width: 22px; height: 22px; }
#attendance_list .name_attendance img    { width: 55px; height: 55px; }

#attendance_list textarea {
  width: 100%;
  height: 50px;
  border-radius: 3px;
  box-sizing: border-box;
}
#attendance_list .btn_submit {
  height: 50px;
  padding: 0 20px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1.083em;
}

#attendance_list .bgcolor0 { background: #fff; }
#attendance_list .bgcolor1 { background: #f1f1f1; }
#attendance_list .bgcolor2 { background: #fff; }

/* 출석현황 테이블 공통 */
.attendance-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.attendance-table th, .attendance-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

/* 페이징 중앙정렬 강제 */
#attendance_list .pg_wrap {
    width: 100%;
    text-align: center !important;  /* nav 박스를 중앙 */
    margin: 20px 0 !important;
}

#attendance_list .pg_wrap .pg {
    display: inline-block !important; /* 숫자 링크 묶음을 inline-block */
    float: none !important;           /* float 제거 */
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .attendance-table, .attendance-table thead, .attendance-table tbody, 
  .attendance-table th, .attendance-table td, .attendance-table tr {
    display: block;
    width: 100%;
  }
  .attendance-table thead { display: none; }
  .attendance-table tr {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    background: #fff;
  }
  .attendance-table td {
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 40%;
  }
  .attendance-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
    color: #333;
  }
  .attendance-table td:last-child { border-bottom: none; }

  #attendance_layer ul li { flex: 1 0 25%; font-size: 11px; } /* 4열 */
  #attendance_layer, #attendance_list { padding: 0 10px; }

  /* 리스트 영역도 가운데 정렬 */
  #attendance_list .attendance_list_info1,
  #attendance_list .attendance_list_info2,
  #attendance_list .attendance_list_info3 {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  #attendance_layer,
  #attendance_list {
    padding: 0 6px;
    text-align: center; /* 모바일에서는 기본 가운데 정렬 */
  }
  #attendance_layer ul li { flex: 1 0 50%; font-size: 13px; } /* 2열 */
  #attendance_list .attendance_list_info1 { padding: 5px; flex-direction: column; align-items: flex-start; }
  #attendance_list .btn_submit { height: 40px; font-size: 0.95em; }
  #attendance_list .attendance_hidden { display: none; }

  /* 리스트 영역도 가운데 정렬 */
  #attendance_list .attendance_list_info1,
  #attendance_list .attendance_list_info2,
  #attendance_list .attendance_list_info3 {
    text-align: center !important;
  }

  /* 테이블 안의 텍스트도 가운데 */
  #attendance_list table td {
    text-align: center !important;
  }

  /* 한마디 입력폼 정렬 */
  #attendance_list textarea {
    text-align: center;
  }

  /* 모바일에서 flex로 나뉜 영역도 세로+가운데 */
  #attendance_list .attendance_list_info1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}