/* ------------------------- board Side-Bar ----------------------------- */
.board-sidebar-wrapper {
  padding: 0px 0px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.board-sub-side-bar {
  background-color: #ffffff;
  width: 190px;
  /*width: 11.3%;*/
  height: 100%;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px 0 0 10px;
  position: relative;
  z-index: 10000;
}

.board-sub-side-bar ul ul {
  display: none;
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
  top: 0; /* 중메뉴와 동일 선상 */
  left: 100%;
  z-index: 10;
  width: 190px; /* 상위 메뉴와 동일한 width */
}

.board-sub-side-bar ul > li > a {
  display: block;
  padding: 8px 48px;
  width: 180px; /* 상위 메뉴와 동일한 width */
  height: 40px; /* 대메뉴 hover 박스 height */
  border-radius: 7px;
  background-color: #5c5fc0cc;
  color: white;
  margin-top: 5px;
  margin-left: 5px;
  box-sizing: border-box; /* 패딩 포함 크기 계산 */
}

.board-sub-side-bar ul ul > li > a {
  display: block;
  padding: 4px 25px;
  width: 180px; /* 상위 메뉴와 동일한 width */
  height: 31px; /* 중메뉴 및 소메뉴 hover 박스 height */
  border-radius: 7px;
  background-color: #ffffff;
  color: #4c4c4c;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  text-align: left;
}

.board-sub-side-bar ul > li:hover > ul,
.board-sub-side-bar ul > li > ul > li:hover > ul {
  display: block;
}

.board-sub-side-bar ul > li:hover > a {
  background-color: #5c5fc0;
  color: white;
  height: 40px; /* 대메뉴 hover height 유지 */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.board-sub-side-bar ul ul > li:hover > a {
  background-color: #5c5fc0;
  color: white;
  height: 31px; /* 중메뉴 hover height */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.board-sub-side-bar ul ul li a {
  text-align: left;
}

.board-side-list {
  padding: 10px 20px;
  color: #4c4c4c;
  transition: color 0.2s, font-weight 0.2s;
}

.board-side-list:hover {
  cursor: pointer;
  color: #5c5fc0;
  font-weight: bold;
}
/* ------------------------- board Side-Bar ----------------------------- */
.board-list-complete {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.board-list-complete-table-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  /*width: 1430px;*/
  background-color: #ffffff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 10px;
}

.board-list-complete-table-top {
  display: flex;
  border: 1px solid #5c5fc0;
  border-radius: 10px 10px 0px 0px;
  background-color: #5c5fc0;
  color: white;
  width: 100%;
  height: 47px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--xlg-font);
  font-weight: var(--normal-font);
  padding: 0 0 0 20px;
  box-shadow: 0px 3px 6px #00000029;
}

.board-list-complete-table-bottom {
  display: flex;
  border-radius: 0px 0px 10px 10px;
  justify-content: space-between;
  flex-direction: column;
  background-color: #ffffff;
  width: 100%;
  /*width: 1430px;*/
  height: 100%;
  max-height: 100%;
  box-shadow: 0px 3px 6px #00000029;
}

.board-list-complete-table th {
  color: #4c4c4c;
  font-size: var(--sm-font);
  font-weight: var(--normal-font);
}

.board-list-complete-table th:first-child {
  padding: 4px 0 0 9px;
}

.board-list-complete-table tr {
  height: 50px;
}
.board-list-complete-table tbody tr:hover {
  filter: brightness(90%);
}
.board-list-complete-table tbody tr:active {
  opacity: 0.9;
}

.board-list-complete-table td {
  color: #4c4c4c;
  font-size: var(--md-font);
  font-weight: var(--normal-font);
  border-left: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
}

.board-list-complete-table tr td:first-child {
  padding: 4px 0 0 9px;
}

.board-list-complete-table tr td:nth-child(2) {
  padding: 8px 0 0 0;
}

.board-list-complete-icon-color {
  color: #888888;
  cursor: pointer;
}

.number-area {
  display: flex;
  color: #888888;
  gap: 38px;
  cursor: pointer;
}

.board-list-complete-info {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 20px;
  padding-top: 20px;
}

.fill-in-red {
  color: #ff5a81;
}

.fill-in-blue {
  color: #3376d0;
}

.fill-in-yellow {
  color: #ffde00;
}

.board-list-complete-bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  bottom: 0;
}

.board-list-complete-button {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}

.board-list-complete-search-detail {
  display: flex;
  border: 1px solid white;
  border-radius: 5px;
  background-color: #5c5fc0;
  color: white;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  cursor: pointer;
}

.board-list-complete-search-detail:hover {
  display: flex;
  border: 1px solid white;
  border-radius: 5px;
  background-color: white;
  color: #5c5fc0;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  cursor: pointer;
}

.board-list-complete-search {
  display: flex;
  flex-direction: row;
}

.board-list-complete-search-input {
  border: 1px solid #5c5fc0;
  padding: 8px 40px 8px 12px; /* 좌측 여백: 12px, 우측 여백(돋보기 공간): 40px */
  border-radius: 100px;
  width: 350px;
  height: 30px;
  outline: none;
  transition: border-color 0.3s ease; /* 하이라이트 효과를 부드럽게 */
}

.board-list-complete-search-input:focus {
  border-color: #5c5fc0; /* 클릭했을 때 하이라이트 색상 */
  box-shadow: 0 0 4px #5c5fc0; /* 약간의 하이라이트 효과 */
}

/*FILE-TEST-AREA*/
.file-test-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 30%;
  gap: 0.5rem;
  padding-top: 50px;
}

.file-upload-area {
  display: flex;
  height: 40%;
  width: 100%;
  gap: 0.5rem;
}

.file-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  width: 100px;
}

.file-upload-box {
  border: 1px solid black;
  background-color: white;
  width: 300px;
}

.file-download-area {
  display: flex;
  height: 40%;
  width: 100%;
  gap: 0.5rem;
}

.file-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  width: 100px;
}

.file-download-box {
  border: 1px solid black;
  background-color: white;
  width: 300px;
}
.board-table .board-title {
  cursor: pointer;
}
.board-table .board-title:hover {
  text-decoration: underline;
}
.pin-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pin-icon {
  transform: rotate(45deg);
  transform-origin: center center;
}

/*************************************************************/

.page[data-board] .board-list {
  flex: 1;
  min-height: 0;
  max-height: 100%;
}
.page[data-board] .board-list.ss-container {
  --ss-scroll-right-bottom: -13px;
}
/* #region board-list COMMON */
.page[data-board] .board-list[data-board-type="COMMON"] {
}
.page[data-board] .expense-table-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.page[data-board] .board-list[data-board-type="COMMON"] .empty-row {
  cursor: default;
  pointer-events: none;
}

.page[data-board] .board-list[data-board-type="COMMON"] .comment-count {
  color: var(--default-gray-color);
}

.page[data-board] .container:not(.m-container) .common-header .common-col {
  border: none;
}
.page[data-board] .container:not(.m-container) .common-col .comment-count {
  flex-shrink: 0;
  min-width: 0;
  display: inline-block;
}
.page[data-board] .container:not(.m-container) .common-col.board-title-cell {
  display: block;
  line-height: 50px;
}

.page[data-board] .container:not(.m-container) .common-row {
  border-bottom: none;
  width: 100%;
  height: 50px;
}
/* #endregion */

/* #region board-list FRAME */
.page[data-board] .board-list[data-board-type="FRAME"] .card-list {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 220px;
  min-width: 200px;
  height: 240px;
  box-shadow: 0 0 6px 0 var(--default-box-shadow-color);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card:has(.board-title .last-update-time) {
  height: 260px;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-image-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main-background-color);
  min-height: 0;
}
.page[data-board] .board-list[data-board-type="FRAME"] .board-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  /* border: none; */
  /* borer-radius: 5px 5px 0 0; */
}

.page[data-board] .board-list[data-board-type="FRAME"] .board-image.empty {
  background-color: var(--main-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page[data-board] .board-list[data-board-type="FRAME"] .list-card .card-text {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 10px;
  gap: 3px;
  /* height: 100%; */
  justify-content: space-between;
  background-color: #ffffff;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .card-text.bottom {
  display: flex;
  padding: 5px 10px 5px 10px;
  gap: 3px;
  justify-content: space-between;

  border-top: 1px solid var(--default-box-shadow-color);
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .card-text .card-div {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
}

.page[data-board] .board-list[data-board-type="FRAME"] .list-card .left-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-category {
  font-size: var(--sm-font);
  font-weight: var(--bold-font);
  border-radius: 5px;
  background-color: var(--main-background-color);
  padding: 2px 5px;
  width: fit-content;
  height: fit-content;
  text-align: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-title {
  display: block;
  font-weight: var(--bold-font);
  padding: 2px 0px;
  /* text-align: flex-start; */
  /* justify-content: flex-start; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 120px; */
  max-width: 100%;
  flex: 1;
  min-width: 0;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-title:has(.last-update-time) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  height: auto;
  white-space: normal;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-title .last-update-time {
  display: block;
  line-height: var(--sm-height);
  font-size: var(--sm-font);
}

.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-date {
  font-size: var(--sm-font);
  /* padding: 0px 5px; */
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-view-count {
  font-size: var(--sm-font);
  display: flex;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-view-count .view-count-number {
  font-size: var(--sm-font);
  font-weight: var(--bold-font);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .board-post-user {
  font-size: var(--sm-font);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* cornerTag*/
.page[data-board] .board-list[data-board-type="FRAME"] .list-card .corner-tag {
  --corner-tag-size: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--corner-tag-size);
  height: var(--corner-tag-size);
  border-radius: 10px 0 0 0;
  background-color: #fff;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  padding: 5px 3px;
  z-index: 1;
  clip-path: polygon(100% 0, 0% 100%, 0 0);
}
/* #endregion */
/* #region board-pagenation  */
.page[data-board] .board-pagenation {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page[data-board] .offset-area {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex: 1;
}
/* #endregion */
/* .page[data-board] {
  --board_list_common-point-color: #5c5fc0;
}

.page[data-board] .page-block-header {
  min-height: 60px;
}

.page[data-board] .board-table-area {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  height: calc(100vh - 120px);
}

.page[data-board] .board-table-bottom {
  flex: 1;
  overflow-y: hidden;
  box-shadow: none;
}

.page[data-board] .board-table th {
  font-size: var(--sm-font);
}

.page[data-board] .board-table tr {
  height: 50px;
}

.page[data-board] .board-table td {
  border-right: 2px solid #e2e2e2;
}

.page[data-board] .board-table td:last-child {
  border-right: none;
}

.page[data-board] .board-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  left: 0;
}

.page[data-board] .board-table tbody tr:hover {
  filter: brightness(90%);
}

.page[data-board] .default-checkbox .checkmark {
  margin-right: 0;
}

.page[data-board] .board-table-bottom-wrap {
  flex-shrink: 0;
}

.page[data-board] .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  height: 60px;
}

.page[data-board] .number-area .current {
  font-weight: var(--bold-font);
  color: var(--board_list_common-point-color);
}

.page[data-board] .offset-area {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex: 1;
  padding: 10px 0;
}
.page[data-board] .button.hide {
  display: none;
} */

.page[data-board] .last-update-time {
  color: var(--default-red-color);
}

/*******************************************************************/

/* #region BOARD_TYPE에 대한 처리 */
.page[data-board] .list-toggle {
  display: flex;
  /* background-color: var(--default-bg-color); */
  /* box-shadow: 0 0 6px 0 var(--default-box-shadow-color); */
  justify-content: center;
  align-items: center;
  /* padding: 10px 20px; */
  gap: 10px;
  padding: 0 15px;
  height: 100%;
}

.page[data-board] .toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0;
  height: 100%;
}
.page[data-board] .toggle-container.hide {
  display: none;
}

.page[data-board] .toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 3px;
  gap: 5px;
  cursor: pointer;
  height: 35px;
  width: 80px;
}

.page[data-board] .toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 5px;
}

.page[data-board] .toggle-btn .material-icons {
  font-size: var(--xlg-font);
}

.page[data-board] .toggle-btn {
  border: 1px solid var(--sub-text-color);
  /* width: 0px; */
}

.page[data-board] .toggle-btn span {
  color: var(--sub-text-color);
}

.page[data-board] .toggle-btn.active {
  /* background-color: var(--sub-active-color);*/
  background-color: var(--default-bg-color);
  /* outline: none; */
}

.page[data-board] .toggle-btn.active span {
  color: var(--tab-active-color);
  /* font-weight: var(--bold-font); */
}

.page[data-board] .toggle-btn.left {
  border-radius: 10px 0 0 10px;
}

.page[data-board] .toggle-btn.left:not(.active) {
  border-right: none;
}

.page[data-board] .toggle-btn.right {
  border-radius: 0 10px 10px 0;
}

.page[data-board] .toggle-btn.right:not(.active) {
  border-left: none;
}

/* #endregion */

/**************** 검색 ***************/

.page[data-board] .search-area {
  padding: 20px;
  display: flex;
  gap: 10px 20px;
  background-color: #fff;
  min-width: fit-content;
  flex-wrap: wrap;
}

.page[data-board] .search-area.hide {
  display: none;
}

.page[data-board] .search-area .search-content-area {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.page[data-board] .search-area .custom-select-box {
  border-color: var(--input-border-color);
}

.page[data-board] .search-area .calendar-input {
  --input-box-width: 200px;
}

.page[data-board] .search-area .search-group {
  display: flex;
  gap: 10px 20px;
  align-items: center;
  flex-wrap: wrap;
}

.page[data-board] .search-area .search-content {
  display: flex;
  gap: 10px;
  align-items: center;
}

.page[data-board] .search-area .search-btn-area {
  display: flex;
  align-items: end;
}

.page[data-board] .search-area .search-content .search-text {
  width: 80px;
  height: 100%;
  word-break: keep-all;
  font-weight: var(--bold-font);
  text-align: center;
}

.page[data-board] .search-area .search-content .calendar-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/******************************************************************
** media query
*******************************************************************/

/* #region 모바일 전체 (해상도 1023px ~ ) */
@media all and (max-width: 1023px) {
  .page[data-board] .page-block-wrapper.no-padding .page-block-header {
    /* padding: 15px 15px 0 15px; */
    /* padding-top: 15px; */
  }
  .page[data-board] .page-block-wrapper.no-padding .page-block-body {
    padding-bottom: 15px;
  }
  /* #region 검색영역 */
  .page[data-board] .search-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
    width: 100%;
    border-top: 1px solid #d9d9d9;
    padding-top: 10px;
  }
  .page[data-board] .search-area.hide {
    display: none;
  }
  .page[data-board] .search-group {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
  }
  .page[data-board] .search-group .text-input,
  .page[data-board] .search-group .calendar-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .page[data-board] .search-text {
    width: 65px;
  }
  /* #endregion */

  /* #region board-list */
  .page[data-board] .board-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .page[data-board] .board-list {
    border-top: 1px solid #d9d9d9;
  }
  .page[data-board] .board-item {
    border-bottom: 1px solid #d9d9d9;
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px;
  }
  .page[data-board] .board-header {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
    font-weight: var(--bold-font);
  }
  .page[data-board] .board-header .important-icon {
    font-size: var(--md-font);
  }
  .page[data-board] .board-header .board-tag,
  .page[data-board] .board-header .new-board {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .page[data-board] .board-header .board-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    max-width: fit-content;
  }
  .page[data-board] .board-list .board-content {
    font-size: var(--sm-font);
    display: flex;
    justify-content: end;
    gap: 5px;
    color: #888888;
  }
  .page[data-board] .board-content span {
    color: inherit;
  }
  .page[data-board] .new-board {
    color: var(--default-blue-color);
  }
  .page[data-board] .board-item.board-item-empty {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page[data-board] .board-item .board-comment-count {
    color: var(--default-gray-color);
    font-weight: var(--normal-font);
  }
  /* 20251223 frame 처리를 위한 추가 */
  .page[data-board] .page-block-header {
    color: var(--default-gray-color);
    font-weight: var(--normal-font);
    flex-direction: column;
    align-items: initial;
    gap: 0;
  }
  .page[data-board] .block-header-text {
    padding: 15px 15px 15px 15px;
  }
  .page[data-board] .block-header-contents {
    gap: 5px 10px;
    justify-content: space-between;
    padding: 0 15px;
    padding-top: 10px;
    border-top: 1px solid #d9d9d9;
  }
  .page[data-board] .board-type-toggle {
    display: flex;
    gap: 10px;
  }
  .page[data-board] .board-type-toggle.hide {
    display: none;
  }
  .page[data-board] .board-type-toggle .board-type.active {
    color: #5c5fc0;
  }
  .page[data-board] .board-type-toggle .board-type.hide {
    display: none;
  }
  .page[data-board] .board-list[data-board-type="FRAME"] .card-list {
    padding: 15px;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .page[data-board] .board-list[data-board-type="FRAME"] .list-card {
    min-width: 100px;
  }
  .page[data-board] .board-list[data-board-type="FRAME"] .board-title {
    font-size: var(--sm-font);
  }
  .page[data-board] .block-header-contents:has(.board-type-toggle.hide) {
    justify-content: end;
  }
  /* #endregion */

  /* #region 더보기 버튼 */
  .page[data-board] .board-plus-button {
    padding: 15px 15px 0 15px;
  }
  .page[data-board] .board-plus-button .count {
    color: inherit;
  }
  /* #endregion */
}
/* #endregion */