@charset "utf-8";

/* ==========================================================================
   게시판 스킨 (gallery) — 재디자인
   ========================================================================== */

#bo_gall { position: relative; margin-bottom: 24px; }

/* 분류 탭 */
#bo_gall #bo_cate { margin: 0 0 20px; }
#bo_gall #bo_cate ul { display: flex; flex-wrap: wrap; gap: 6px; }
#bo_gall #bo_cate a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 500;
}
#bo_gall #bo_cate a:hover { background: var(--surface-2); color: var(--text); }
#bo_gall #bo_cate #bo_cate_on { background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 600; }

/* 상단 툴바 */
#bo_gall #bo_btn_top { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#bo_gall #bo_btn_top:after { display: none; }
#bo_gall #bo_list_total { float: none; line-height: 38px; font-size: 13px; color: var(--text-3); }
#bo_gall .bo_fx { float: none; margin: 0 0 0 auto; }
#bo_gall .btn_bo_user { float: none; display: flex; align-items: center; gap: 6px; }
#bo_gall .btn_bo_user li { float: none; width: auto; margin: 0; background: transparent; }
#bo_gall .btn_bo_user .btn_b01 {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
#bo_gall .btn_bo_user .btn_b01:hover { background: var(--surface-2); color: var(--text); }
#bo_gall .btn_bo_user .btn_b02 { width: auto; padding: 0 16px; }
#bo_gall .btn_bo_user a[title="글쓰기"] { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
#bo_gall .btn_bo_user a[title="글쓰기"]:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); color: var(--on-accent); }

/* 그리드 */
#gall_ul.gall_row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 20px;
  margin: 0;
}
#gall_ul.gall_row:after { display: none; }
#gall_ul > li { float: none; width: auto; margin: 0; padding: 0; list-style: none; min-width: 0; }

.gall_box { position: relative; }

/* 체크박스 */
.gall_chk {
  position: absolute; top: 10px; left: 10px; z-index: 3;
}
.gall_chk label { cursor: pointer; }
.gall_chk input[type="checkbox"] + label span {
  float: none; display: block; width: 20px; height: 20px;
  background: rgba(255, 255, 255, .92); border: 1.5px solid var(--border-2);
  border-radius: 6px; box-shadow: var(--shadow-1);
}
.gall_chk input[type="checkbox"]:checked + label span {
  background: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 50% 50%; background-size: 14px;
}

/* 썸네일 */
.gall_con { min-width: 0; }
.gall_img {
  display: block; position: relative; width: 100%;
  height: auto !important; max-height: none !important;
  aspect-ratio: 4 / 3; line-height: normal !important;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.gall_img a { display: block; width: 100%; height: 100%; }
.gall_img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.gall_box:hover .gall_img img { transform: scale(1.045); }

.gall_img .no_image,
.gall_img .is_notice {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: normal !important;
  color: var(--text-3); font-size: 13px; background: var(--surface-2);
}
.gall_img .is_notice { color: var(--notice); background: var(--notice-soft); font-weight: 700; }

/* 제목 영역 */
.gall_text_href {
  display: block; margin: 12px 0 0; min-width: 0;
}
.gall_text_href .bo_cate_link { margin-bottom: 6px; }
.gall_text_href .bo_tit {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text);
}
.gall_text_href .bo_tit:hover { color: var(--accent); }
.gall_text_href .cnt_cmt {
  color: var(--accent); font-weight: 700; font-size: 12px; margin-left: 4px;
}
.gall_text_href .cnt_cmt:before { content: "["; }
.gall_text_href .cnt_cmt:after  { content: "]"; }

/* 제목줄 아이콘 (icon_hot 은 원시 <i class="fa fa-heart"> 로 출력됨) */
.gall_text_href .bo_tit .fa-heart { color: var(--hot); font-size: 12px; margin-left: 3px; }
.gall_text_href .bo_tit .fa-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 4px; font-size: 10px;
  color: var(--text-2); background: var(--surface-3); border-radius: 5px; vertical-align: middle;
}
.gall_text_href .new_icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px;
  font-size: 10px; font-weight: 800; line-height: 1; border-radius: 5px;
  color: var(--new); background: var(--new-soft); vertical-align: middle;
}

/* 본문 미리보기 */
.bo_cnt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 6px;
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}

/* 메타 */
.gall_info {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.gall_info span, .gall_info strong { font-weight: 400; color: var(--text-3); }
.gall_info .sv_member, .gall_info .sv_guest { color: var(--text-2); font-weight: 500; }
.gall_date, .gall_view { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.gall_info i { font-size: 11px; color: var(--text-3); }
.gall_option { margin-left: auto; display: inline-flex; gap: 8px; }

/* 검색 모달은 board/basic 과 동일 (default.css / basic skin 에서 상속) */
.bo_sch_wrap { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; }
.bo_sch {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; background: var(--surface); text-align: left; width: 380px; max-width: calc(100vw - 32px);
  max-height: 80vh; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.bo_sch h3 { padding: 18px 20px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 700; }
.bo_sch form { padding: 20px; display: block; }
.bo_sch select { border: 1px solid var(--border-2); width: 100%; height: 42px; border-radius: var(--radius-sm); }
.bo_sch .sch_bar {
  display: flex; align-items: center; width: 100%; margin-top: 12px;
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.bo_sch .sch_bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.bo_sch .sch_input { flex: 1 1 auto; width: auto; height: 42px; border: 0; padding: 0 12px; background: transparent; float: none; }
.bo_sch .sch_btn { height: 42px; float: none; color: var(--text-2); background: none; border: 0; width: 44px; font-size: 14px; }
.bo_sch .bo_sch_cls {
  position: absolute; right: 12px; top: 12px; color: var(--text-3); border: 0;
  padding: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 15px; background: transparent;
}
.bo_sch .bo_sch_cls:hover { background: var(--surface-2); color: var(--text); }
.bo_sch_bg { background: rgba(0, 0, 0, .34); width: 100%; height: 100%; }

/* 더보기 드롭다운 */
#bo_gall .more_opt {
  display: none; position: absolute; top: 46px; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-3); z-index: 999; padding: 5px; min-width: 130px;
}
#bo_gall .more_opt:before, #bo_gall .more_opt:after { display: none; }
#bo_gall .more_opt li { border: 0; padding: 0; float: none; width: auto; margin: 0; text-align: left; }
#bo_gall .more_opt li button, #bo_gall .more_opt li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-2); font-size: 13.5px; text-align: left;
}
#bo_gall .more_opt li:hover a, #bo_gall .more_opt li:hover button { color: var(--text); background: var(--surface-2); }

/* 반응형 */
@media (max-width: 1023px) {
  #gall_ul.gall_row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #gall_ul.gall_row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}
@media (max-width: 440px) {
  #gall_ul.gall_row { grid-template-columns: minmax(0, 1fr); }
}