/* ============================================================
   library.css  ─  자료실 페이지 전용 스타일
   평생학습도시 기초자료 조사 시스템
============================================================ */

/* ── 페이지 레이아웃 ── */
.lib-page { background: var(--color-bg, #f0f4fa); min-height: 100vh; }

.lib-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ── 페이지 타이틀 바 ── */
.lib-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.lib-title-bar h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a3a6b;
  display: flex;
  align-items: center;
  gap: 9px;
}
.lib-title-bar h2 i { color: #7d3c98; }
.lib-breadcrumb {
  font-size: 12.5px;
  color: #7a8a9a;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lib-breadcrumb a { color: #7a8a9a; text-decoration: none; }
.lib-breadcrumb a:hover { color: #1a3a6b; }
.lib-breadcrumb i { font-size: 10px; }

/* ── 통계 카드 ── */
.lib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.lib-stat-card {
  background: #fff;
  border: 1.5px solid #d0dce8;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(26,58,107,.05);
}
.lib-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.lib-stat-icon.all   { background: #eef3fb; color: #1a3a6b; }
.lib-stat-icon.prog  { background: #fef0f8; color: #9b2d8e; }
.lib-stat-icon.guide { background: #edf7f0; color: #1e8449; }
.lib-stat-icon.etc   { background: #fdf6e8; color: #d68910; }
.lib-stat-info { flex: 1; min-width: 0; }
.lib-stat-label { font-size: 12px; color: #7a8a9a; margin-bottom: 2px; }
.lib-stat-num   { font-size: 22px; font-weight: 700; color: #1a2a3a; }

/* ── 툴바 ── */
.lib-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lib-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lib-filter-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid #d0dce8;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
  color: #4a5a6a;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Noto Sans KR', sans-serif;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lib-filter-tab:hover,
.lib-filter-tab.active {
  background: #1a3a6b;
  border-color: #1a3a6b;
  color: #fff;
}
.lib-filter-tab .tab-cnt {
  background: rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
}
.lib-filter-tab.active .tab-cnt { background: rgba(255,255,255,.25); }
.lib-filter-tab:not(.active) .tab-cnt { background: #e8eef6; color: #4a6a9a; }

.lib-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lib-search-wrap { display: flex; gap: 6px; }
.lib-search-input {
  padding: 7px 12px;
  border: 1.5px solid #d0dce8;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #2a3a4e;
  background: #fff;
  width: 210px;
  transition: border-color .15s;
}
.lib-search-input:focus { outline: none; border-color: #7d3c98; }
.lib-search-btn {
  padding: 7px 16px;
  background: #1a3a6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.lib-search-btn:hover { background: #2c5aa0; }
.lib-write-btn {
  padding: 8px 18px;
  background: #7d3c98;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
  white-space: nowrap;
}
.lib-write-btn:hover { background: #6c3483; }

/* ── 자료실 목록 테이블 ── */
.lib-table-wrap {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #d0dce8;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,58,107,.06);
}
.lib-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.lib-table thead th {
  background: #f0f4fa;
  color: #1a3a6b;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1.5px solid #d0dce8;
  white-space: nowrap;
}
.lib-table thead th.col-no     { width: 56px;  text-align: center; }
.lib-table thead th.col-cat    { width: 100px; text-align: center; }
.lib-table thead th.col-title  { }
.lib-table thead th.col-file   { width: 80px;  text-align: center; }
.lib-table thead th.col-date   { width: 100px; text-align: center; }
.lib-table thead th.col-view   { width: 64px;  text-align: center; }
.lib-table thead th.col-dl     { width: 64px;  text-align: center; }

.lib-table tbody tr {
  border-bottom: 1px solid #e8eef6;
  transition: background .12s;
  cursor: pointer;
}
.lib-table tbody tr:last-child { border-bottom: none; }
.lib-table tbody tr:hover { background: #f5f8fd; }
.lib-table tbody tr.is-pinned { background: #fdfbff; }
.lib-table tbody tr.is-pinned:hover { background: #f5f0ff; }

.lib-table td {
  padding: 13px 16px;
  vertical-align: middle;
  color: #2a3a4e;
}
.lib-table td.col-no,
.lib-table td.col-date,
.lib-table td.col-view,
.lib-table td.col-dl   { text-align: center; color: #7a8a9a; font-size: 12.5px; }
.lib-table td.col-cat  { text-align: center; }
.lib-table td.col-file { text-align: center; }

/* 구분 배지 */
.lib-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.lib-cat-프로그램  { background: #f5eaf8; color: #7d3c98; }
.lib-cat-조사지침  { background: #d5f5e3; color: #1e8449; }
.lib-cat-기타      { background: #eaeaea; color: #555; }

/* 파일 타입 배지 */
.lib-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .3px;
}
.lib-file-PDF  { background: #fde8e8; color: #c0392b; border: 1px solid #f5c6cb; }
.lib-file-XLSX { background: #d5f5e3; color: #1e8449; border: 1px solid #c3e6cb; }
.lib-file-XLS  { background: #d5f5e3; color: #1e8449; border: 1px solid #c3e6cb; }
.lib-file-DOCX { background: #dbe8f8; color: #1a3a6b; border: 1px solid #b8d4f0; }
.lib-file-DOC  { background: #dbe8f8; color: #1a3a6b; border: 1px solid #b8d4f0; }
.lib-file-MP4  { background: #fef0f8; color: #9b2d8e; border: 1px solid #e8c5e8; }
.lib-file-ZIP  { background: #fdf6e8; color: #d68910; border: 1px solid #fce4b0; }
.lib-file-ETC  { background: #f0f0f0; color: #666;    border: 1px solid #ddd; }

/* 제목 셀 */
.lib-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-pin-icon  { color: #7d3c98; font-size: 12px; flex-shrink: 0; }
.lib-new-badge {
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.lib-title-text {
  font-weight: 500;
  color: #1a2a3a;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 페이지네이션 ── */
.lib-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
}
.lib-page-btn {
  min-width: 34px;
  height: 34px;
  border: 1.5px solid #d0dce8;
  background: #fff;
  color: #4a5a6a;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-family: 'Noto Sans KR', sans-serif;
}
.lib-page-btn:hover { background: #f0f4fa; border-color: #7d3c98; color: #7d3c98; }
.lib-page-btn.active { background: #7d3c98; border-color: #7d3c98; color: #fff; font-weight: 700; }
.lib-page-btn:disabled { opacity: .4; cursor: default; }

/* ── 결과 없음 ── */
.lib-empty {
  text-align: center;
  padding: 60px 20px;
  color: #7a8a9a;
}
.lib-empty i { font-size: 40px; margin-bottom: 12px; color: #c8b4d8; display: block; }
.lib-empty p { font-size: 14px; }

/* ── 로딩 ── */
.lib-loading {
  text-align: center;
  padding: 50px 20px;
  color: #7a8a9a;
  font-size: 14px;
}
.lib-loading i { display: block; font-size: 28px; margin-bottom: 10px; color: #7d3c98; }

/* ══════════════════════════════════════════════
   자료실 상세 뷰
══════════════════════════════════════════════ */
.lib-detail-wrap {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #d0dce8;
  box-shadow: 0 2px 8px rgba(26,58,107,.06);
  overflow: hidden;
}
.lib-detail-header {
  background: #f7f0fb;
  border-bottom: 3px solid #7d3c98;
  padding: 22px 28px 18px;
}
.lib-detail-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lib-detail-title {
  font-size: 19px;
  font-weight: 700;
  color: #1a2a3a;
  line-height: 1.5;
  margin-bottom: 12px;
}
.lib-detail-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12.5px;
  color: #7a8a9a;
  flex-wrap: wrap;
}
.lib-detail-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 본문 */
.lib-detail-body {
  padding: 26px 28px;
  font-size: 14px;
  line-height: 1.85;
  color: #2a3a4e;
  min-height: 100px;
  border-bottom: 1px solid #e8eef6;
}
.lib-detail-body p { margin-bottom: 10px; }

/* 첨부파일 다운로드 박스 */
.lib-download-box {
  margin: 0 28px 24px;
  padding: 20px 22px;
  background: #f7f0fb;
  border: 1.5px solid #d4a8e8;
  border-radius: 10px;
}
.lib-download-title {
  font-size: 13px;
  font-weight: 700;
  color: #6c3483;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #d0dce8;
  border-radius: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.lib-download-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.lib-download-item-info i { font-size: 28px; color: #7d3c98; flex-shrink: 0; }
.lib-download-item-text { flex: 1; min-width: 0; }
.lib-download-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a2a3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.lib-download-item-meta {
  font-size: 12px;
  color: #7a8a9a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lib-download-btn {
  padding: 9px 20px;
  background: #7d3c98;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.lib-download-btn:hover { background: #6c3483; }

/* 하단 버튼 */
.lib-detail-footer {
  padding: 16px 28px;
  border-top: 1px solid #e8eef6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
}
.lib-detail-footer-left,
.lib-detail-footer-right { display: flex; gap: 8px; }

.ld-btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1.5px solid #d0dce8;
  font-size: 13px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.ld-btn-list   { background: #fff; color: #4a5a6a; }
.ld-btn-list:hover { background: #f0f4fa; border-color: #4a7fc1; color: #1a3a6b; }
.ld-btn-edit   { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.ld-btn-edit:hover { background: #2c5aa0; }
.ld-btn-delete { background: #fff; color: #c0392b; border-color: #e0b0b0; }
.ld-btn-delete:hover { background: #fde8e8; }

/* 이전/다음 글 */
.lib-nav-posts {
  margin-top: 20px;
  border: 1.5px solid #d0dce8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.lib-nav-row {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 14px;
  border-bottom: 1px solid #e8eef6;
  cursor: pointer;
  transition: background .12s;
  font-size: 13.5px;
}
.lib-nav-row:last-child { border-bottom: none; }
.lib-nav-row:hover { background: #f5f8fd; }
.lib-nav-label { font-size: 12px; font-weight: 600; color: #7a8a9a; min-width: 40px; }
.lib-nav-title { flex: 1; color: #2a3a4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-nav-date  { font-size: 12px; color: #7a8a9a; }

/* ══════════════════════════════════════════════
   자료실 작성/수정 폼
══════════════════════════════════════════════ */
.lib-form-wrap {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #d0dce8;
  box-shadow: 0 2px 8px rgba(26,58,107,.06);
  padding: 30px 32px;
}
.lib-form-title {
  font-size: 17px;
  font-weight: 700;
  color: #7d3c98;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #e8d5f5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-form-group { margin-bottom: 18px; }
.lib-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2a3a4e;
  margin-bottom: 6px;
}
.lib-form-label .req { color: #e74c3c; margin-left: 2px; }
.lib-form-input,
.lib-form-select,
.lib-form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d0dce8;
  border-radius: 6px;
  font-size: 13.5px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #2a3a4e;
  background: #fff;
  transition: border-color .15s;
  box-sizing: border-box;
}
.lib-form-input:focus,
.lib-form-select:focus,
.lib-form-textarea:focus {
  outline: none;
  border-color: #7d3c98;
  box-shadow: 0 0 0 3px rgba(125,60,152,.1);
}
.lib-form-textarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.lib-form-select { cursor: pointer; }
.lib-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lib-form-checkrow {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lib-form-check {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13.5px;
  color: #2a3a4e;
}
.lib-form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #7d3c98;
  cursor: pointer;
}
.lib-form-hint {
  font-size: 12px;
  color: #8899aa;
  margin-top: 5px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}

/* 첨부파일 업로드 영역 */
.lib-attach-zone {
  border: 2px dashed #c8b4d8;
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  background: #faf5fd;
  cursor: pointer;
  transition: all .15s;
}
.lib-attach-zone:hover,
.lib-attach-zone.dragover { border-color: #7d3c98; background: #f5eafc; }
.lib-attach-zone.has-file  { border-color: #7d3c98; background: #f5eafc; border-style: solid; }
.lib-attach-zone i { font-size: 32px; color: #c8b4d8; margin-bottom: 8px; display: block; }
.lib-attach-zone.has-file i { color: #7d3c98; }
.lib-attach-zone p { font-size: 13px; color: #7a8a9a; margin-bottom: 6px; }
.lib-attach-zone .file-name-display {
  font-size: 13.5px;
  font-weight: 600;
  color: #6c3483;
  margin-top: 6px;
  word-break: break-all;
}

/* 다중 파일 목록 아이템 */
.lib-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f5eafc;
  border: 1px solid #d9b8ee;
  border-radius: 7px;
  font-size: 13px;
}
.lib-file-item .file-item-icon { color: #7d3c98; font-size: 15px; flex-shrink: 0; }
.lib-file-item .file-item-name { flex: 1; color: #3a1a5e; font-weight: 500; word-break: break-all; }
.lib-file-item .file-item-size { font-size: 11.5px; color: #8a6aaa; white-space: nowrap; flex-shrink: 0; }
.lib-file-item .file-item-del  {
  background: none; border: none; cursor: pointer;
  color: #b07acc; font-size: 13px; padding: 2px 4px;
  border-radius: 4px; flex-shrink: 0; transition: color .15s;
}
.lib-file-item .file-item-del:hover { color: #c0392b; }
.lib-attach-zone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: #7d3c98;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}
.lib-attach-zone-btn:hover { background: #6c3483; }
.lib-attach-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.lib-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e8eef6;
}
.lib-form-cancel-btn {
  padding: 9px 24px;
  background: #fff;
  color: #4a5a6a;
  border: 1.5px solid #d0dce8;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.lib-form-cancel-btn:hover { background: #f0f4fa; }
.lib-form-submit-btn {
  padding: 9px 28px;
  background: #7d3c98;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.lib-form-submit-btn:hover { background: #6c3483; }

/* ── 삭제 확인 모달 ── */
.lib-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lib-modal {
  background: #fff;
  border-radius: 12px;
  padding: 30px 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  text-align: center;
}
.lib-modal i   { font-size: 40px; color: #e74c3c; margin-bottom: 14px; }
.lib-modal h3  { font-size: 17px; font-weight: 700; color: #1a2a3a; margin-bottom: 8px; }
.lib-modal p   { font-size: 13.5px; color: #5a6a7a; margin-bottom: 24px; line-height: 1.6; }
.lib-modal-btns { display: flex; gap: 10px; justify-content: center; }
.lib-modal-cancel  { padding: 9px 28px; background: #fff; color: #4a5a6a; border: 1.5px solid #d0dce8; border-radius: 6px; font-size: 14px; font-family: 'Noto Sans KR',sans-serif; cursor: pointer; transition: all .15s; }
.lib-modal-cancel:hover { background: #f0f4fa; }
.lib-modal-confirm { padding: 9px 28px; background: #c0392b; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-family: 'Noto Sans KR',sans-serif; font-weight: 700; cursor: pointer; transition: background .15s; }
.lib-modal-confirm:hover { background: #a93226; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .lib-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .lib-wrap { padding: 20px 12px 40px; }
  .lib-toolbar { flex-direction: column; align-items: stretch; }
  .lib-toolbar-right { flex-direction: column; align-items: stretch; }
  .lib-search-input { width: 100%; }
  .lib-table thead th.col-dl,
  .lib-table td.col-dl { display: none; }
  .lib-form-row { grid-template-columns: 1fr; }
  .lib-attach-meta-row { grid-template-columns: 1fr; }
  .lib-detail-header { padding: 16px 16px 14px; }
  .lib-detail-body   { padding: 16px; }
  .lib-download-box  { margin: 0 16px 16px; }
  .lib-detail-footer { padding: 12px 16px; }
  .lib-form-wrap { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .lib-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lib-table thead th.col-view,
  .lib-table td.col-view { display: none; }
  .lib-table thead th.col-date,
  .lib-table td.col-date { display: none; }
}