@charset "utf-8";

/* ==========================================================
   게시판 — mexus.kr 원본 board.css / responsive.css 수치 기준
   공통 서브 레이아웃은 sub.css 참조
   ========================================================== */

/* ==========================================================
   폼 컨트롤
   ========================================================== */
.input{
  height:44px;padding:6px 16px;
  border:1px solid #ddd;background:#fff;
  color:#505050;font-family:inherit;font-size:var(--fs-16);line-height:1.5em;
}
.input:focus{outline:none;border-color:var(--color-primary);}
.input[readonly]{background-color:#e8e8e8;color:#aaa;}
textarea.input{height:auto;padding:13px 16px;overflow:auto;resize:none;}
select.input{
  padding-right:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background:#fff url("https://mexus.kr/images/bbs/select.png") right 14px center no-repeat;
}

/* ==========================================================
   버튼 (.btn-pack)
   ========================================================== */
.btn-pack{
  display:inline-block;position:relative;overflow:visible;
  margin:0;padding:0 10px;
  background:#fafafa;color:#333;border:1px solid #ddd;
  font-family:inherit;
  text-align:center;vertical-align:top;white-space:nowrap;cursor:pointer;
}
.btn-pack--focus{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.btn-pack--dark{background:#555;border-color:#555;color:#fff;}
.btn-pack--border{background:#fff;border-color:var(--color-primary);color:var(--color-primary);}
.btn-pack--small{height:30px;padding:0 15px;line-height:28px;font-size:13px;}
.btn-pack--medium{height:44px;padding:0 20px;line-height:43px;font-size:16px;}
.btn-pack--large{min-width:130px;height:50px;padding:0 30px;line-height:48px;font-size:18px;font-weight:500;}

/* ==========================================================
   검색 영역 (.board-search)
   ========================================================== */
.board-search{display:flex;align-items:center;gap:15px;margin-bottom:20px;}
.board-search__total{color:#686868;font-size:15px;line-height:44px;}
.board-search__total strong{color:var(--color-primary);font-weight:700;}
.board-search__form{display:flex;gap:5px;margin-left:auto;}
.board-search__form .input{width:300px;}

/* ==========================================================
   목록 : 표 (.board-list)
   ========================================================== */
.board-list table{width:100%;border-collapse:collapse;border-spacing:0;border-top:2px solid #868686;}
.board-list thead th{
  height:53px;padding:9px 5px;background:#fafafa;border-bottom:1px solid #ddd;
  color:#333;font-size:16px;font-weight:700;line-height:1.5em;
}
.board-list tbody td{
  height:53px;padding:9px 5px;border-bottom:1px solid #ddd;
  color:#505050;font-size:16px;font-weight:400;line-height:1.5em;text-align:center;
}
.board-list tbody td.subject{text-align:left;padding-left:15px;}
.board-list tbody td a:hover{text-decoration:underline;}
.board-list tbody tr:hover td{background-color:#fafafa;}
.board-list__label{
  display:inline-block;padding:0 12px;border-radius:4px;
  background:#e84426;color:#fff;font-size:14px;font-weight:500;
}

/* 목록 : 모바일 (.board-list-m) */
.board-list-m{display:none;border-top:2px solid #868686;}
.board-list-m li{padding:14px 0;border-bottom:1px solid #ddd;}
.board-list-m__label{
  display:inline-block;vertical-align:middle;margin:-.2em 4px 0 0;padding:0 6px;
  border-radius:4px;background:#e84426;
  color:#fff;font-size:12px;font-weight:500;line-height:22px;
}
.board-list-m__tit{color:#333;font-size:15px;font-weight:700;line-height:1.4em;letter-spacing:-.03em;}
.board-list-m__info{margin-top:7px;color:#888;font-size:12px;font-weight:400;line-height:1.3em;}
.board-list-m__info span{margin-right:10px;}

/* ==========================================================
   목록 : 갤러리 (.gallery-list)
   ========================================================== */
.gallery-list{padding:25px 0 0;border-top:2px solid #868686;border-bottom:1px solid #ddd;}
.gallery-list__items{display:flex;flex-wrap:wrap;margin:0 -15px;}
.gallery-list__item{width:25%;padding:0 15px;margin-bottom:35px;text-align:center;}
.gallery-list__item a{display:block;}
.gallery-list__thumb{position:relative;padding-bottom:65%;margin-bottom:12px;overflow:hidden;}
.gallery-list__thumb img{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:100%;height:auto;max-width:100%;min-height:100%;object-fit:cover;
  transition:.4s ease-in-out;
}
.gallery-list__thumb::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.08);}
.gallery-list__item a:hover .gallery-list__thumb img{transform:translateY(-50%) scale(1.05);}
.gallery-list__tit{color:#333;font-size:16px;line-height:1.4em;}
.gallery-list__date{margin-top:6px;color:#767676;font-size:14px;line-height:1.3em;}

/* ==========================================================
   상세 (.board-view)
   ========================================================== */
.board-view{border-top:2px solid #868686;}
.board-view__tit{padding:16px;border-bottom:1px solid #ddd;}
.board-view__tit h3{color:#333;font-size:20px;font-weight:700;line-height:1.3em;letter-spacing:-.015em;}
.board-view__info{
  display:flex;flex-wrap:wrap;gap:15px;
  padding:13px 16px;border-bottom:1px solid #ddd;
  color:#767676;font-size:15px;line-height:1.3em;
}
.board-view__info strong{color:#333;font-weight:700;}
.board-view__info .hit{margin-left:auto;}
.board-view__cnt{padding:15px 16px 60px;border-bottom:1px solid #ddd;line-height:1.8;}
.board-view__cnt p + p{margin-top:1em;}
.board-view__cnt ul{list-style-type:disc;margin:1em 0 1em 1.25em;}
.board-view__cnt ol{list-style-type:decimal;margin:1em 0 1em 1em;}
.board-view__cnt figure{margin:var(--sp-30) 0;}
.board-view__cnt img{border-radius:8px;}

.board-view__files{
  position:relative;margin-top:10px;padding:0 16px 13px;
  text-align:right;font-size:14px;line-height:1.5em;border-bottom:1px solid #ddd;
}
.board-view__files a{color:var(--color-primary);text-decoration:underline;}

/* 이전 / 다음 글 */
.board-prev-next{border-top:1px solid #ddd;border-bottom:1px solid #ddd;font-size:16px;line-height:1.5em;}
.board-prev-next dl{display:flex;padding:12px 16px;}
.board-prev-next dl + dl{border-top:1px solid #eee;}
.board-prev-next dt{width:90px;flex:none;color:#333;font-weight:700;}
.board-prev-next dt::after{content:"";display:inline-block;vertical-align:middle;margin:-.2em 0 0 10px;}
.board-prev-next .prev dt::after{border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #aaa;}
.board-prev-next .next dt::after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #aaa;}
.board-prev-next dd{flex:1 1 auto;min-width:0;color:#505050;}
.board-prev-next dd a{
  display:inline-block;vertical-align:top;max-width:100%;height:1.5em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.board-prev-next dd a:hover{text-decoration:underline;}

/* ==========================================================
   버튼 줄 / 페이지네이션
   ========================================================== */
.buttons{display:flex;align-items:center;margin:20px 0;}
.buttons__right{margin-left:auto;}
.buttons + .paginate{margin-top:20px;}

.paginate{margin-top:40px;text-align:center;}
.paginate a,
.paginate strong{
  display:inline-block;width:38px;height:38px;margin:0 3px;padding:0;
  border-radius:100%;
  color:#555;font-size:15px;font-weight:500;line-height:38px;
  text-align:center;vertical-align:middle;
}
.paginate strong{background-color:var(--color-primary);color:#fff;font-weight:700;}
.paginate a:hover{background-color:#f4f4f4;}
/* .paginate a 보다 우선하도록 a 를 함께 명시 (원본 a.direction.prev 와 동일 의도) */
.paginate a.paginate__direction{background-position:50% 50%;background-repeat:no-repeat;font-size:0;}
.paginate a.paginate__direction--first{background-image:url("https://mexus.kr/images/bbs/page_first.svg");}
.paginate a.paginate__direction--prev{background-image:url("https://mexus.kr/images/bbs/page_prev.svg");margin-right:20px;}
.paginate a.paginate__direction--next{background-image:url("https://mexus.kr/images/bbs/page_next.svg");margin-left:20px;}
.paginate a.paginate__direction--last{background-image:url("https://mexus.kr/images/bbs/page_last.svg");}

/* ==========================================================
   Responsive — 원본 responsive.css (1024 / 900 / 640)
   ========================================================== */
@media (max-width:1024px){
  .input{height:40px;padding:5px 14px;}
  textarea.input{padding:12px 14px;}
  .board-search__form .input{width:240px;}
  .board-list thead th,
  .board-list tbody td{font-size:15px;}
  .gallery-list__tit{font-size:15px;}
  .btn-pack--medium{height:40px;padding:0 16px;font-size:15px;line-height:38px;}
  .btn-pack--large{min-width:140px;height:50px;font-size:18px;line-height:48px;}
  .board-view__tit{padding:14px 6px;}
  .board-view__tit h3{font-size:18px;}
  .board-view__info{padding:13px 6px;font-size:13px;}
  .board-view__cnt{padding:15px 6px 40px;}
  .board-prev-next{font-size:14px;}
}

@media (max-width:900px){
  .gallery-list__items{margin:0 -10px;}
  .gallery-list__item{width:33.33333333%;padding:0 10px;}
}

@media (max-width:640px){
  .input{height:38px;padding:0 10px;font-size:14px;}
  select.input{padding-right:26px;background-position:right 8px center;background-size:12px auto;}
  textarea.input{padding:7px 10px;}

  .board-search{display:block;margin-bottom:10px;}
  .board-search__total{font-size:13px;line-height:1.8;}
  .board-search__form{margin:0 0 5px;}
  .board-search__form .input{flex:1 1 auto;min-width:0;width:1%;}

  .board-list{display:none;}
  .board-list-m{display:block;}

  .gallery-list{padding-top:15px;}
  .gallery-list__items{margin:0 -7px;}
  .gallery-list__item{width:50%;padding:0 7px;margin-bottom:27px;}
  .gallery-list__thumb{margin-bottom:10px;}
  .gallery-list__tit{font-size:14px;}
  .gallery-list__date{font-size:12px;margin-top:4px;}

  .board-view__info .hit{margin-left:0;}
}