/* 게시판 관련 CSS 작성 */

/* 게시판 - 상단(카테고리, 검색) { */
.board-search {display: flex; align-items: flex-end; justify-content: center; background-color: #F8F8F8; padding: 25px; border-radius: 10px;}
.board-search-wrap {border: none;}
.board-search-inner {display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0;}
.board-search-item {}
.board-search-select {position: relative; min-width: 160px; height: 50px; padding: 0 44px 0 20px; background: var(--white-color) url("../img/arrow-drop-down.svg") no-repeat center right 10px / 24px auto; border: 1px solid var(--color-ddd); color: var(--color-666); appearance: none; font-size: 16px; font-weight: 400; border-radius: 3px; cursor: pointer;}
.board-search-select > option {color: #333;}
.board-search-input {display: inline-block; width: 390px; height: 50px; padding: 0 20px; vertical-align: middle; border: 1px solid var(--color-ddd); color: var(--color-666); font-size: 16px; border-radius: 3px 0 0 3px;}
.board-search-input::placeholder {color: var(--gray-color);}
.board-search-button {display: inline-block; vertical-align: middle; width: 50px; height: 50px; background: var(--main-color); border: none; color: var(--white-color); border-radius: 0 3px 3px 0;}
.board-search-button::before {content: "\F0D1"; font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px;}
/* } 게시판 - 상단(카테고리, 검색) */

/* 게시판 - 페이징 { */
.board-pagination {}
.board-pagination-list {display: flex; align-items: center; justify-content: center; gap: 4px;}
.board-pagination-list .page-link {display: inline-flex; align-items: center; justify-content: center; width: 40px; aspect-ratio: 1 / 1; border-radius: 50%; color: var(--gray-color); line-height: 1;}
.board-pagination-list > .i.disabled > .page-link {color: var(--color-666); cursor: default; pointer-events: none;}
.board-pagination-list > .i > .page-link {border: 1px solid var(--color-ddd); font-size: 20px;}

.board-pagination-list > .num {}
.board-pagination-list > .num  > .page-link {font-size: 16px; font-weight: 400; transition: 0.3s; border-radius: 4px;}
.board-pagination-list > .num  > .page-link:is(:hover, :active, :focus) {background-color: #f4f4f4;}
.board-pagination-list > .num.active {}
.board-pagination-list > .num.active  > .page-link {background-color: var(--main-color); color: var(--white-color);}
/* } 게시판 - 페이징 */

/* 텍스트 게시판 - 목록 { */
.board-info {margin-bottom: 20px;}
.board-count {color: var(--color-666); font-size: 15px; font-weight: 400;}
.board-count > .count {color: var(--main-color); font-weight: 600;}

.board-list {border-top: 1px solid var(--black-color);}
.board-list-row {display: flex; border-bottom: 1px solid var(--color-ddd);}
.board-list-td {display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 128px; height: 60px; padding: 10px; color: var(--color-666);; font-size: var(--font-16); font-weight: 400; line-height: 1;}
.board-list-td ~ .board-list-td {border-left: 1px solid var(--color-ddd);}

.board-list-th {color: var(--black-color); font-size: var(--font-18); font-weight: 700; line-height: 1;}

.board-list-td[data-th="번호"], .board-list-td[data-th="첨부"] {width: 70px;}
.board-list-td[data-th="게시일"] {width: 140px;}
.board-list-td[data-th="제목"] {flex: 1;}
.board-list-td:not(.board-list-th)[data-th="제목"] {justify-content: start;}
.board-list-td .title {max-width: calc(100% - 50px);}
.board-list-td .title:is(:hover, :active, :focus) {text-decoration: underline; text-underline-offset: 2px;}

.badge {display: inline-block; font-size: 15px; font-weight: 500; line-height: 1;}
.badge.notice {color: var(--main-color); font-size: 18px;}
.badge.new {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background-color: var(--main-color); color: var(--white-color); font-size: 12px;}

.board-list-row.notice {}
.board-list-row.notice .board-list-td {background-color: #F8F8F8;}
.board-list-row.notice .board-list-td .title {font-weight: 600;}
/* } 텍스트 게시판 - 목록 */

/* 갤러리(사진 갤러리) 게시판 - 목록 { */
.board-gallery {border-top: 1px solid var(--black-color); padding-top: 40px; display: flex; align-items: flex-start; gap: 40px 36px; flex-wrap: wrap;}
.board-gallery-item {width: calc((100% - (36px * 3)) / 4);}
.board-gallery-link {}
.board-gallery-thumb {font-size: 0; position: relative; overflow: hidden; height: 0; padding-bottom: 57.641%;}
.board-gallery-thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; transition: .3s;}
.board-gallery-info {padding-top: 20px;}
.board-gallery-info .title {font-weight: 400; font-size: 20px; color: var(--black-color); line-height: 1.35; transition: .3s;}
.board-gallery-info .date {font-weight: 400; font-size: 15px; color: var(--color-666); line-height: 1.6; margin-top: 10px;}
.board-gallery-info .writer {font-weight: 400; font-size: 15px; color: var(--color-999); line-height: 1.6;}
.board-gallery-info .content {font-weight: 300; font-size: 18px; color: var(--black-color); line-height: 1.35; max-height: 2.7em;}
.board-gallery-link:hover {}
.board-gallery-link:hover .board-gallery-thumb {box-shadow: 0 4px 4px rgba(0,0,0,0.25);}
.board-gallery-link:hover .board-gallery-thumb img {transform: translate(-50%,-50%) scale(1.1);}
.board-gallery-link:hover .board-gallery-info .title {color: var(--main-color);}
/* } 갤러리(사진 갤러리) 게시판 - 목록 */

/* 갤러리(월간 소식지) 게시판 - 목록 { */
.board-gallery.webzine {display: flex; flex-direction: column; gap: 0; padding-top: 0;}
.webzine .board-gallery-item {width: 100%; padding: 40px 0; border-bottom: 1px solid var(--color-ddd);}
.webzine .board-gallery-link {display: flex; align-items: center;}
.webzine .board-gallery-thumb {width: 236px; padding-bottom: 8.5%; border-radius: 10px;}
.webzine .board-gallery-info {width: calc(100% - 236px); padding-top: 0; padding-left: 30px;}
.webzine .board-gallery-info .info-row {display: flex; align-items: center; gap: 14px; margin: 14px 0 20px;}
.webzine .board-gallery-info .info-item {position: relative;}
.webzine .board-gallery-info .info-item::before {content: ''; width: 1px; height: 13px; background-color: var(--color-ddd); position: absolute; top: 6px; left: -6px;}
.webzine .board-gallery-info .info-item:first-child::before {display: none;}
.webzine .board-gallery-info .date {margin-top: 0;}
/* } 갤러리(월간 소식지) 게시판 - 목록 */

/* 게시판 - 상세(공통) { */
.board-view {border-top: 1px solid var(--black-color);}
.board-view-head {border-bottom: 1px solid var(--color-ddd); padding: 25px 20px;}
.board-title {display: flex; align-items: flex-start; gap: 15px;}
.board-title .badge {font-size: 24px;}
.board-title .title {flex: 1; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--black-color);}
.board-view-info {display: flex; align-items: flex-start; gap: 10px 20px; padding-top: 8px;}
.board-view-info-item {display: flex; gap: 10px;}
.board-view-info-item .icon {color: var(--color-666);}
.board-view-info-item .info {display: flex; align-items: center; gap: 7px;}
.board-view-info-item .info p {font-size: 16px; color: var(--color-666);}
.board-view-info-item .info .t1 {font-weight: 500; color: var(--black-color);}
.board-view-info-item .info .t2 {font-weight: 400;}

.board-view-body {}
.board-view-content {padding: 30px 20px; border-bottom: 1px solid var(--color-ddd);}
.board-view-img {text-align: center; font-size: 0; margin-bottom: 30px;}
.board-view-text {font-weight: 400; font-size: 18px; color: var(--color-666); line-height: 1.555;}

.board-view-add {padding: 20px; border-bottom: 1px solid var(--color-ddd);}
.board-view-add-title {display: flex; align-items: center; gap: 3px;}
.board-view-add-title .icon {color: var(--color-666);}
.board-view-add-title .title {font-weight: 600; font-size: 16px; color: var(--black-color);}
.board-view-add-list {padding-top: 10px;}
.board-view-add-item {display: flex; align-items: center; gap: 10px;}
.board-view-add-item ~ .board-view-add-item {margin-top: 5px;}
.board-view-add-item .link {font-weight: 400; font-size: 16px; color: var(--black-color); max-width: calc(100% - 110px);}
.board-view-add-item a.link {transition: .3s;}
.board-view-add-item a.link:hover {color: var(--main-color); text-decoration: underline; text-underline-offset: 2px;}
.board-view-add-item .download-btn {display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; border-radius: 4px; border: 1px solid var(--color-ddd); font-weight: 600; font-size: 14px; color: var(--color-999); gap: 5px; transition: .3s;}
.board-view-add-item .download-btn i {font-weight: 400; font-size: 16px;}
.board-view-add-item .download-btn:hover {background-color: var(--main-color); color: var(--white-color); border-color: var(--main-color);}

.board-btns {display: flex; align-items: center; justify-content: center; gap: 5px;}
.board-btn {min-width: 195px; padding: 0 20px; display: flex; align-items: center; justify-content: center; height: 45px; border-radius: 5px; font-weight: 600; font-size: 16px; border: 1px solid transparent; transition: .3s;}
.board-btn.type-01 {background-color: var(--main-color); border-color: var(--main-color); color: var(--white-color);}
.board-btn.type-02 {background-color: var(--white-color); border-color: var(--main-color); color: var(--main-color);}
.board-btn:hover {background-color: #127F58!important; border-color: #127F58!important; color: var(--white-color)!important;}

.board-ctrl {border-top: 1px solid var(--black-color);}
.board-ctrl-page {display: flex; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--color-ddd); gap: 20px;}
.board-ctrl-title {display: flex; align-items: center; gap: 6px;}
.board-ctrl-title .icon {color: var(--color-666); font-size: 20px;}
.board-ctrl-title .title {font-weight: 600; font-size: 16px; color: var(--black-color);}
.board-ctrl-page-link {font-weight: 400; font-size: 16px; color: var(--black-color); max-width: calc(100% - 100px); transition: .3s;}
.board-ctrl-page-link:hover {font-weight: 500; color: var(--main-color);}
/* } 게시판 - 상세(공통) */

/* ====================  반응형 ==================== */
@media screen and (max-width:1440px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */

  /* 텍스트 게시판 - 목록 */

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery {padding-top: 20px; gap: 20px;}
  .board-gallery-item {width: calc((100% - (20px * 3)) / 4);}
  .board-gallery-info .title {font-size: 18px;}

  /* 갤러리(월간 소식지) 게시판 - 목록 */
  .webzine .board-gallery-info .info-row {margin: 10px 0;}
  .board-gallery-info .content {font-size: 16px;}

  /* 게시판 - 상세(공통) */
}
@media screen and (max-width:1024px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search {padding: 20px;}

  /* 텍스트 게시판 - 목록 */
  .board-count {font-size: 14px;}
  .board-info {margin-bottom: 10px;}
  .board-list-row.head {display: none;}
  .board-list-row {flex-direction: column;}
  .board-list-td {padding: 5px 10px; font-size: 15px; height: auto; width: 100%!important; justify-content: flex-start; position: relative; padding-left: 60px;}
  .board-list-td::before {content: attr(data-th); font-weight: 500; color: var(--black-color); width: 50px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
  .board-list-td ~ .board-list-td {border-left: none;}

  .badge.new {width: 16px; height: 16px; font-size: 10px;}
  .badge.notice {font-size: 16px;}

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery {padding-top: 10px; gap: 10px;}
  .board-gallery-item {width: calc((100% - (10px * 2)) / 3);}
  .board-gallery-info {padding-top: 10px;}
  .board-gallery-info .title {font-size: 16px;}
  .board-gallery-info .date {font-size: 14px;}

  /* 갤러리(월간 소식지) 게시판 - 목록 */
  .webzine .board-gallery-item {padding: 20px 0;}
  .webzine .board-gallery-info {padding-left: 20px;}
  .webzine .board-gallery-thumb {}
  .board-gallery-info .content {font-size: 14px;}
  .board-gallery-info .writer {font-size: 14px;}
  .webzine .board-gallery-info .info-item::before {top: 5px; left: -7px;}

  /* 게시판 - 상세(공통) */
  .board-view-head {padding: 14px;}
  .board-title {gap: 10px;}
  .board-title .badge {margin-top: 3px;}
  .board-title .title {font-size: 17px;}
  .board-view-info-item {gap: 5px;}
  .board-view-info-item .info p {font-size: 14px;}
  .board-view-info-item .icon {font-size: 14px;}

  .board-view-content {padding: 14px;}
  .board-view-text {font-size: 16px;}

  .board-view-add {padding: 14px;}
  .board-view-add-title .icon {font-size: 16px;}
  .board-view-add-item .link {font-size: 14px; max-width: calc(100% - 100px);}
  .board-view-add-item .download-btn {width: 86px; height: 34px; font-size: 13px;}
  .board-view-add-item .download-btn i {font-size: 14px;}

  .board-btn {min-width: 115px; height: 38px; font-size: 15px;}

  .board-ctrl-page {padding: 10px 6px;}
  .board-ctrl-title .title {font-size: 15px;}
  .board-ctrl-title .icon {font-size: 18px;}
  .board-ctrl-page-link {font-size: 15px; max-width: calc(100% - 70px);}
}
@media screen and (max-width:768px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search-wrap {width: 100%;}
  .board-search-inner {flex-direction: column; width: 100%; gap: 5px;}
  .board-search-item {width: 100%;}
  .board-search-select {width: 100%; font-size: 14px; height: 38px; min-width: auto; padding: 0 32px 0 12px; background: var(--white-color) url("../img/arrow-drop-down.svg") no-repeat center right 8px / 18px auto;}
  .board-search-input {width: calc(100% - 38px); height: 38px; font-size: 14px; padding: 0 12px;}
  .board-search-button {width: 38px; height: auto; aspect-ratio: 1 / 1;}
  .board-search-button::before {font-size: 16px;}

  .board-pagination-list .page-link {width: 32px;}
  .board-pagination-list > .num > .page-link {font-size: 13px;}

  /* 텍스트 게시판 - 목록 */
  .board-count {font-size: 13px;}
  .board-list-td {font-size: 14px;}

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery-item {width: calc((100% - (10px * 1)) / 2);}
  .board-gallery-info .title {font-size: 15px;}
  .board-gallery-info .date {font-size: 13px; line-height: 1.3;}

  /* 갤러리(월간 소식지) 게시판 - 목록 */
  .webzine .board-gallery-thumb {width: 150px;}
  .webzine .board-gallery-info {width: calc(100% - 150px); padding-left: 16px;}
  .webzine .board-gallery-info .info-row {margin: 5px 0;}
  .board-gallery-info .content {font-size: 13px;}
  .board-gallery-info .writer {font-size: 14px;}

  /* 게시판 - 상세(공통) */
  .board-view-head {padding: 14px 10px;}
  .board-title .title {font-size: 16px;}
  .board-view-info {gap: 0; flex-direction: column;}

  .board-view-content {padding: 14px 10px;}
  .board-view-img {margin-bottom: 20px;}
  .board-view-text {font-size: 15px;}

  .board-view-add {padding: 14px 10px;}
  .board-view-add-title .title {font-size: 15px;}
  .board-view-add-item {gap: 5px;}
  .board-view-add-item .link {font-size: 13px; max-width: calc(100% - 75px);}
  .board-view-add-item .download-btn {font-size: 11px; gap: 3px; width: 70px; height: 26px;}
  .board-view-add-item .download-btn i {font-size: 11px;}

  .board-btn {font-size: 13px; min-width: 80px; height: 34px;}

  .board-ctrl-page {gap: 5px; padding: 6px;}
  .board-ctrl-title .title {display: none;}
  .board-ctrl-page-link {font-size: 14px; max-width: calc(100% - 24px);}
}
@media screen and (max-width:425px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search {padding: 16px;}
  .board-search-select {font-size: 13px;}
  .board-search-input {font-size: 13px;}

  .board-pagination-list > .num > .page-link {font-size: 12px;}
  .board-pagination-list .page-link {width: 28px;}
  .board-pagination-list > .i > .page-link {font-size: 16px;}

  /* 텍스트 게시판 - 목록 */
  .board-list-td {font-size: 13px;}
  .board-list-td .title {max-width: calc(100% - 38px);}

  .badge {font-size: 14px;}
  .badge.new {width: 14px; height: 14px; font-size: 8px;}
  .badge.notice {font-size: 14px;}

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery-info .title {font-size: 13px;}
  .board-gallery-info .date {font-size: 11px;}

  /* 갤러리(월간 소식지) 게시판 - 목록 */
  .webzine .board-gallery-link {flex-direction: column;}
  .webzine .board-gallery-thumb {width: 100%; padding-bottom: 48%;}
  .webzine .board-gallery-info {width: 100%; padding-left: 0; padding-top: 14px;}
  .board-gallery-info .writer {font-size: 11px;}
  .board-gallery-info .content {font-size: 12px;}

  /* 게시판 - 상세(공통) */
  .board-view-text {font-size: 14px;}
  .board-ctrl-page-link {font-size: 13px;}
}