@charset "utf-8";

/* board_area 내부 Flex 설정 */
#comm_wrap .board_area {
  /* display: flex !important; */
  /*gap: 20px !important; /* 요소 간 간격 */
  width: 100% !important;
  max-width: 1061px !important; /* 기존 너비 유지 */
}

/* 각 박스 공통 스타일 */
.dleft3,
.dmiddle3,
.dright3 {
  flex: 1 !important; /* 균등 분할 */
  min-width: 0 !important; /* 내용물 오버플로 방지 */
  box-sizing: border-box !important; /* 패딩/보더 포함 */
}

/* 내부 board_box 너비 조정 */
.board_box {
  width: 100% !important; /* 부모 너비에 맞춤 */
  max-width: none !important; /* 최대 너비 제한 */
}

.dright3 {
  flex: 2;
}

/* 날짜 셀 크기 조정 */
table td,
table th {
  width: 14.28% !important;
  padding: 8px !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .dright3 {
    flex: 1 1 100% !important;
  }
  .table-responsive {
    min-width: 100% !important;
  }
}

/* 탭 공통 스타일 통일 */
.tab li {
  float: left;
  width: 100%;
  max-width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 2em !important; /* 공지사항과 동일한 폰트 크기 */
  font-weight: 700 !important;
  color: #000 !important;
  text-overflow: unset !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* 날짜 버튼 폰트 스타일 통일 */
.card-header .btn-sm.fs-5 {
  font-size: 2em !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .tab li,
  .card-header .btn-sm.fs-5 {
    font-size: 1.5em !important; /* 모바일 폰트 크기 조정 */
  }
}

.circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: #747474;
  background: bg-light;
}
.circle2 {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: #747474;
  background: #e7e7e7;
  padding: 0;
}
.circle_f {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: blue;
  background: bg-light;
}
.circle_s {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: red;
  background: bg-light;
}
.circle_fs {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: #b6b6b6;
  background: #ececec;
}
.btn-hover {
  background: #ffff99;
}
.btn-blue {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.2em;
  color: black;
  background: white;
}
.btn-yellow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 1.2em;
  color: white;
  background: #254683;
  display: flex; /* 추가 */
  justify-content: center; /* 추가 */
  align-items: center; /* 추가 */
  box-sizing: border-box; /* 추가 */
  padding: 0; /* 추가 */
}
.fs-5 {
  font-size: 18px !important;
  font-weight: 400;
}

@media only screen and (max-width: 680px) {
  .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: #747474;
    background: bg-light;
  }
  .circle2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: #747474;
    background: #e7e7e7;
    padding: 0;
  }
  .circle_f {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: blue;
    background: bg-light;
  }
  .circle_s {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: red;
    background: bg-light;
  }
  .circle_fs {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: #b6b6b6;
    background: #fafafa;
  }
  .btn-hover {
    background: #ffff99;
  }
  .btn-blue {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: white;
    background: #465fee;
  }
  .btn-yellow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1em;
    color: white;
    background: #254683;
  }
  .fs-5 {
    font-size: 18px !important;
    font-weight: 300;
  }
}

.fs-10 {
  font-size: 13px;
}

@media (max-width: 768px) {
  .d-flex.flex-responsive {
    flex-direction: column !important;
    height: auto !important; /* ✅ 핵심: height 제한 해제 */
  }

  .calendar-box,
  .schedule-box {
    min-width: 100% !important;
    width: 100% !important;
    flex: none !important; /* ✅ flex 비율 제거로 높이 줄어들지 않게 */
  }

  .calendar-box {
    display: block !important; /* 혹시 안 보이면 block 강제 */
  }

  .schedule-box {
    margin-top: 1rem;
  }
}