@charset "utf-8";

body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Noto Sans KR', sans-serif;
}

ul, li { list-style: none outside; margin: 0; padding: 0; }
a { text-decoration: none; color: #82d4ff; transition: 0.2s; }
a:hover { color: #ffffff; }

/* date */
#date_layer { text-align: left; }

#date_layer #box { width: 120px; }
#date_layer #box .top2 { width: 20px; float: left; }
#date_layer #box .day { width: 80px; float: left; }

#date_layer .w { font-weight: bold; line-height: 20px; color: #fff; font-size: 16px; }
#date_layer .title  { color: #cccccc; font-size: 12px; background: #1f1f1f; }
#date_layer .title1 { color: #82d4ff; font-size: 12px; background: #1f1f1f; }
#date_layer .title2 { color: #fe7676; font-size: 12px; background: #1f1f1f; }

#date_layer .sun1 { color: #fe7676; font-size: 12px; float: left; }
#date_layer .sat1 { color: #82d4ff; font-size: 12px; float: left; }
#date_layer .day1 { color: #e0e0e0; font-size: 12px; float: left; }

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

#date_layer .sun3 { color: #704848; font-size: 11px; }
#date_layer .sat3 { color: #4b5a88; font-size: 11px; }
#date_layer .day3 { color: #555555; font-size: 11px; }

#date_layer .dot { color: #cccccc; font-size: 12px; }

#date_layer .check { color: #4caf50; font-size: 11px; }
#date_layer .check2 { color: #777777; font-size: 11px; }

/* list */
#list_layer .input {
    width: 600px;
    height: 22px;
    background-color: #1f1f1f;
    border: 1px solid #333;
    padding: 5px 2px;
    font-weight: bold;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
}

#list_layer .msg { padding: 6px 0 0 3px; float: left; color: #e0e0e0; }
#list_layer .sub { padding: 5px 0 0 3px; float: left; }
#list_layer .submit { padding: 3px 0 0 5px; float: left; }

#list_layer #info li { line-height: 18px; color: #aaaaaa; font-size: 11px; }

#list_layer .title { font-weight: bold; color: #cccccc; font-size: 12px; }
#list_layer .list { line-height: 20px; color: #bbbbbb; font-size: 11px; }

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

#list_layer .bgcolor0 { background-color: #181818; }
#list_layer .bgcolor1 { background-color: #202020; }
#list_layer .bgcolor2 { background-color: #181818; }

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border-color: #333333;
}

#BoardText {
    background-color: #121212;
}

#info {
    position: relative;
    bottom: -9px;
}

img {
    filter: brightness(0.85);
}
/* ────────────────────────────────
   📱 반응형 (모바일 대응)
──────────────────────────────── */
@media screen and (max-width: 768px) {

  body {
    font-size: 14px;
    background-color: #111;
  }

  #BoardText {
    padding: 10px;
  }

  /* 달력 테이블 자동 스크롤 가능하도록 */
  #date_layer table {
    display: block;
    overflow-x: auto;

  }

  #date_layer td {
    font-size: 11px;
    padding: 4px;
  }

  #list_layer .input {
    width: 100%;
    font-size: 12px;
  }

  #list_layer table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-spacing: 0;
  }

  #list_layer td,
  #list_layer th {
    font-size: 11px;
    padding: 5px;
  }

  /* 테이블 줄어들 때 스크롤로 대응 */
  table {
    display: block;
    overflow-x: auto;
  }

  /* 버튼, 이미지 크기 줄이기 */
  img {
    max-width: 100%;
    height: auto;
    filter: brightness(0.9);
  }

  /* form 내부 정렬 */
  #list_layer .msg,
  #list_layer .sub,
  #list_layer .submit {
    float: none;
    display: block;
    padding: 5px 0;
  }

  /* 출석 리스트 항목 간 간격 */
  .bgcolor0, .bgcolor1, .bgcolor2 {
    /*display: table-row;*/
    font-size: 12px;
  }

  /* 한 줄씩 보기 좋게 줄바꿈 */
  .list {
    line-height: 1.6;
  }
}