/* 게시판 공통사항 */

/* 라운드 버튼 */
.roundBtns {
  background-color: var(--mainColor);
  color: var(--whiteColor);
  padding: 8px 20px;
  font-size: 15px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  font-weight: 400;
}
.roundBtns:hover {
  background-color: var(--hoverColor);
}

.roundLineBtns {
  color: var(--txt9Color);
  border: 1px solid var(--txt9Color);
  padding: 8px 20px;
  font-size: 15px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
}
.roundLineBtns:hover {
  background-color: var(--backColor);
}

.required {
  color: var(--warningColor);
}



/* 텍스트 스타일 */
.txtPoint {
  color: var(--mainColor);
}

/* 페이지네이션 */
.pageNation {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pageBtn {
  display: flex;
  align-items: center;
  gap: 10px;
}
.num {
  display: flex;
  align-items: center;
  gap: 6px;
}
.num > div {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--txtColor);
  font-weight: 400;
  border: 1px solid var(--borderLine);
  border-radius: 4px;
}
.num > div.on {
  background-color: var(--mainColor);
  color: var(--whiteColor);
  border: 1px solid var(--mainColor);
}
.num > div.on:hover {
  background-color: var(--mainColor);
}

.num > div:hover {
  background-color: var(--anColor);
}

.pageArrow {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--borderLine);
  border-radius: 4px;
}

.pageArrow:hover {
  background-color: var(--anColor);
}

/* 타이틀 영역 */
.topTitArt {
  width: 100%;
  height: 200px;
  background-color: var(--mainColor);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.topTitMenus {
  width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.topTitMenus > a {
  color: var(--whiteColor);
}

.topTitMenus > a > i {
  font-size: 20px;
}

.topBar {
  color: var(--whiteColor);
}

.topMenuTxt {
  font-size: 13px;
}
.topMenuTxt:hover {
  text-decoration: underline;
}

.topTxts {
  width: 70%;
  height: 130px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.topTxts span {
  cursor: default;
}

.topTxtBox {
  font-size: 25px;
  color: var(--whiteColor);
  border-bottom: 2px solid var(--whiteColor);
  padding: 0 0 7px 0;
  font-weight: 700;
}
.topTxtSmall {
  color: var(--whiteColor);
  font-size: 15px;
}

/* 버튼 항목 */
.pageBottomBtns {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 테이블 영역 */
.boardTable table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
}
.boardTable table > thead th {
  background-color: var(--tableBack);
  font-weight: 700;
  color: var(--titColor);
  border: 1px solid var(--tableLine);
}

.boardTable table > tbody td {
  border: 1px solid var(--tableLine);
  color: var(--txtColor);
}

/* 세로 정렬 테이블 */
.columnTable > table > thead {
  float: left;
  width: 30%;
}
.columnTable > table > thead tr {
  display: flex;
  flex-direction: column;
}

.columnTable > table > tbody {
  float: left;
  width: 70%;
}
.columnTable > table > tbody tr {
  display: flex;
  flex-direction: column;
}

/* 팝업 */

.popupDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  /* 기본은 팝업창 안보이게 */
  display: none;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 팝업창 */
.popupBox {
  /* 높이, 넓이는 각 CSS에서 조절 */
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* 팝업 제목 */
.popupHeader {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  font-size: 15px;
}
.popupHeaderX {
  display: flex;
  justify-content: end;
}

.popupHeader i {
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  color: var(--txt9Color);
}

.popupTitBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.popupTit {
  color: var(--titColor);
  font-size: 17px;
}
.popupSubTit {
  font-size: 15px;
}

/* 팝업 내용 */
.popupContents {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.popupContent {
  width: 100%;
  flex: 1;
}

/* 팝업 버튼 */
.popupBtns {
  display: flex;
  gap: 10px;
}

.contentsArt {
  flex: 1;
  width: 80%;
  margin: 60px auto 200px;
  display: flex;
  gap: 30px;
}

.contentsArt > div {
  width: 85%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 사이드 메뉴 */

aside {
  width: 15%;
  max-width: 230px;
}

.asideMenu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.asideMenu > li {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.asideMenu > li > span {
  width: 100%;
  height: 45px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  background-color: #F5F5F5;
  font-size: 15px;
  border-radius: 5px;
  cursor: default;
  font-weight: 700;
}

.asideSubMenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0 0;
}

.asideSubMenu > li {
  display: flex;
  padding: 0 15px;
  min-height: 26px;
}

.asideSubMenu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  color: var(--txtColor);
  word-break: keep-all;
  font-weight: 400;
}
.asideSubMenu > li > a::before {
  content: '●';
  display: inline-block;
  color: var(--txtColor);
  font-size: 6px;
  border-radius: 20px;
}

.asideSubMenu > li > a:hover {
  color: var(--txtPColor);
}


/* 페이지 타이틀 영역 */
.pageTop {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--backColor);
  border: 1px dotted var(--pageLine);
  color: var(--titColor);
  font-weight: 700;
  font-size: 17px;
}

.boardBtn {
  width: 100px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--whiteColor);
  font-size: 13px;
}

/* 생성 */
.registerBtn {
  background-color: var(--mainColor);
}

/* 첨부파일 */
/* 첨부파일 영역 */
.fileDiv {
  display: flex;
}

.fileth {
  width: 30%;
  min-height: 60px;
  background-color: var(--tableBack);
  border-top: 1px solid var(--tableLine);
  border-left: 1px solid var(--tableLine);
  border-bottom: 1px solid var(--tableLine);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--titColor);
  gap: 3px;
  font-weight: 700;
}

.fileBox {
  width: 70%;
  border: 1px solid var(--tableLine);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fileAdd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fileAdd input[type=file] {
  width: 60%;
  height: 35px;
  line-height: 35px;
  border: 1px solid var(--borderLine);
  padding: 0 10px;
  color: var(--txtColor);
}

.fileAdd input[type=file]::file-selector-button {
  display: none;
}

.fileAdd label {
  width: 90px;
  height: 35px;
  background-color: var(--subColor);
  border: 1px solid var(--borderLine);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--titColor);
}


.addFiles {
  border: 1px solid var(--borderLine);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.addFileBox {
  width: fit-content;
  font-size: 13px;
}

.fileTxt {
  color: var(--txt6Color);
}
.volNum {
  color: var(--txt9Color);
}

.fileDeleteBtn {
  font-weight: 600;
  color: var(--warningColor);
  font-size: 16px;
  cursor: pointer;
}

.filesBox {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mAside {
  display: none !important;
  width: 100%;
}
.mAsideUl {
  width: 100%;
}

.mAside details {
  width: 100%;
}

.mAside summary{
  display: flex;
  position: relative;
  z-index: 99;
  list-style-type: none;
}
.mAside summary::-webkit-details-marker { 
  display: none;
}


.mAsideTit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border-radius: 5px;
  border: 1px solid var(--mainColor);
  padding: 0 15px;
}

.mAsideTit > span {
  font-size: 15px;
  color: var(--mainColor);
}
.mAsideTit > i {
  color: var(--mainColor);
  font-weight: 600;
}

.mAsideSub {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mAsideSub > li {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--whiteColor);
  position: relative;
  z-index: 99;
  border-bottom: 1px solid var(--borderLine);
}

.mAsideSub > li:last-of-type {
  border-radius: 0 0 5px 5px;
  border-bottom: none;
}

.mAsideSub > li > a {
  font-size: 14px;
  color: var(--txtColor);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 열린 경우 */
.mAside details[open] .mAsideTit {
  background-color: var(--mainColor);
  border-radius: 5px 5px 0 0;
}
.mAside details[open] .mAsideTit span {
  color: var(--whiteColor);
}
.mAside details[open] .mAsideTit i {
  color: var(--whiteColor);
}

.mAsideBack {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 9;
  display: none;
}
.mAside details[open] .mAsideBack {
  display: block;
}

/* 리스트페이지 검색창 */
.boardSearch {
  height: 35px;
  display: flex;
  margin: 0 auto;
  gap: 10px;
  align-items: center;
}

.boardSearchSelect {
  width: 80px;
  height: 100%;
  background-color: var(--whiteColor);
  border: 1px solid var(--tableLine);
  font-size: 13px;
}

.boardSearchBox {
  height: 100%;
  display: flex;
  align-items: center;
}

.boardSearchIcon {
  width: 24px;
  height: 100%;
  background-color: var(--anColor);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--tableLine);
  border-left: 1px solid var(--tableLine);
  border-bottom: 1px solid var(--tableLine);
  padding: 0 2px;
}

.boardSearchInput {
  width: 170px;
  height: 100%;
  border-left: none;
  border-top: 1px solid var(--tableLine);
  border-right: 1px solid var(--tableLine);
  border-bottom: 1px solid var(--tableLine);
  background-color: var(--anColor);
  padding: 0 5px;
  font-size: 13px;
}
.boardSearchInput:focus {
  outline: none;
}

.boardSearchBtn {
  width: 80px;
  height: 100%;
  background-color: var(--mainColor);
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

/* 페이지 평가 */
.pageReviewBox {
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--tableBack);
}

.pageReviewTop {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--tableBack);
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
}
.reviewIcon {
  width: 24px;
  height: 24px;
}
.pageReviewTop > p {
  font-size: 15px;
  color: #444;
  font-weight: 500;
}

.reviewChecks {
  display: flex;
  gap: 10px;
}

.pageReviewChecks {
  display: flex;
  align-items: center;
  padding: 20px;
  font-size: 15px;
  gap: 15px;
  background-color: var(--whiteColor);
  border-radius: 0 0 10px 10px;
}

.reviewCheck {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 체크박스 커스텀 */
.reviewCheck label {
  color: var(--txt6Color);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.reviewCheck input[type='radio'] {
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none; 
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none; 
  cursor: pointer;
  background-color: var(--whiteColor);
}

.reviewCheck input[type='radio']:checked {
  background-color: var(--mainColor); 
  border: 3px solid white;
  box-shadow: 0 0 0 1.2px var(--mainColor); 
}
.reviewCheck input[type='radio']:checked + label {
  color: var(--txtColor);
}

.reviewTxtBox {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviewTxtBox input[type=text] {
  width: 85%;
  height: 32px;
  border: 1px solid var(--tableLine);
  padding: 0 5px;
}
.reviewBtn {
  width: 15%;
  height: 35px;
  background-color: var(--checkColor);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--subColor);
  color: var(--titColor);
  font-weight: 700;
}

.filePsTxt {
  color: var(--warningColor);
  font-size: 14px;
  font-weight: 400;
}

/* 반응형 */
@media screen and (max-width: 1440px) { 
  .contentsArt {
    width: 90%;
  }

  .asideMenu > li > span {
    font-size: 14px;
    word-break: keep-all;
  }
  .asideSubMenu > li > a {
    font-size: 13px;
  }
}

@media screen and (max-width: 1300px) { 
  .topTxtBox {
    font-size: 22px;
  }

  aside {
    width: 20%;
  }

  .contentsArt > div {
    width: 80%;
  }
} 

@media screen and (max-width: 1200px) { 
  .pageReviewChecks {
    width: 100%;
    flex-direction: column;
    align-items: start;
  }

  .reviewTxtBox {
    width: 100%;
  }
}

@media screen and (max-width: 1000px) { 
  .topTitMenus {
    width: 90%;
  }
  .topTxts {
    width: 90%;
  }
  .topTxtBox {
    font-size: 20px;
  }
  .topTxtSmall {
    font-size: 13px;
  }

  .contentsArt {
    flex-direction: column;
  }

  .mAside {
    display: block !important;
    width: 100%;
  }

  /* 팝업 */
  .popupSubTit {
    font-size: 13px;
  }

  .contentsArt > div {
    width: 100%;
  }
  .pageTop {
    font-size: 14px;
  }



}

@media screen and (max-width: 800px) {
  .addFileBox {
    font-size: 13px;
  }

  .addFiles {
    gap: 15px;
  }

  .boardSearchSelect {
    width: 60px;
  }

  .boardSearchInput {
    width: 140px;
  }

  .boardSearchBtn {
    width: 70px;
  }

  .filePsTxt {
    font-size: 13px;
    word-break: keep-all;
  }
}


@media screen and (max-width: 600px) {
  .pageBtn {
    gap: 8px
  }
  
  .num > div {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  .pageArrow {
    width: 22px;
    height: 22px;
  }

  .topTitArt {
    height: 160px;
  }
  .topTitMenus > a > i {
    font-size: 18px;
  }
  .topMenuTxt {
    font-size: 13px;
  }
  .topTxtBox {
    font-size: 18px;
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--whiteColor);
  }
  .topTxts {
    gap: 10px;
  }

  /* 팝업 */
  .popupTit {
    font-size: 16px;
  }

  .addFileBox {
    font-size: 13px;
  }

  .roundBtns {
    height: 35px;
  }
  .roundLineBtns {
    height: 35px;
  }
}

@media screen and (max-width: 500px) { 
  .contentsArt {
    margin: 30px auto 100px;
    gap: 25px;
  }
  .contentsArt > div {
    gap: 20px;
  }

  .mAsideTit > span {
    font-size: 13px;
  }
  .mAsideSub > li > a {
    font-size: 13px;
  }
  .pageTop {
    font-size: 13px;
    height: 45px;
  }

  .reviewTxtBox input[type=text] {
    width: 70%;
    height: 28px;
  }
  .reviewBtn {
    width: 30%;
    height: 30px;
    font-size: 13px;
  }

  .reviewChecks {
    flex-wrap: wrap;
  }

  .pageReviewTop > p {
    font-size: 13px;
  }

  .pageReviewChecks {
    font-size: 13px;
  }
}