/* =========================================================
   자료실 「올바른 자료(무료)」 전용 스타일 (#view-board)

   목록·글쓰기 기능은 그대로 두고 겉모습만 새로 입힌 화면이다.
   공용 목록 클래스(.board-outer · .board-row · .br-*)는 영재의논리·검색결과·
   문의 화면이 같이 쓰기 때문에 건드리지 않는다. 이 화면은 rs- 접두사만 쓴다.

   색·라운드·그림자는 아래 토큰 범위 안에서만 쓴다.
     남색 #0B2B62 #0B3A86 / 파랑 #1769D2 #2479E8 / 연파랑 #EAF2FF #F1F6FF
     테두리 #E2E8F1 #E8EDF5 / 글자 #101B35 #60718D #8491A5 / 좋아요 #F05272
========================================================= */

/* ---- 바깥 패널: 흰 종이 위에 정돈한 자료 목록 ---- */
.rs-panel {
  position: relative;
  padding: 0 0 26px;
  background: transparent;
}

/* ---- 상단: 그림 대신 얇은 세로선과 제목으로 성격을 드러낸다 ---- */
.rs-hero { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 5px 0 20px; }
.rs-hero::before { content: ""; flex: 0 0 4px; width: 4px; height: 52px; margin-top: 3px; background: #365D8D; border-radius: 0; }
.rs-hero-ic, .rs-hero-art { display: none; }
.rs-hero-tx { min-width: 0; padding: 0; }
.rs-hero-tx h1 {
  margin: 0 0 8px; font-size: 29px; font-weight: 800; line-height: 1.25;
  letter-spacing: -1px; color: #17243A;
}
.rs-hero-tx p { margin: 0; font-size: 14px; line-height: 1.75; color: #6B778A; }
.rs-operator-links { align-self: flex-start; display: flex; gap: 7px; margin-left: auto; }
.rs-operator-links[hidden] { display: none; }
.rs-md-admin-link {
  align-self: flex-start; margin-left: 0; padding: 8px 11px; border: 1px solid #B7CAE0;
  border-radius: 8px; background: #F7FBFF; color: #315B87; font-size: 12px; font-weight: 800;
  line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.rs-md-admin-link:hover { border-color: #7197C0; background: #EEF6FF; color: #1F4D7B; }

/* ---- 1차 분류: 가벼운 밑줄 탭 + 검색 ---- */
.rs-navrow {
  display: flex; align-items: center; gap: 22px;
  padding: 0 0 12px; border-bottom: 1px solid #DCE3EB;
}
.rs-tabs { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.bd-tab {
  height: 38px; padding: 0 14px; box-sizing: border-box;
  background: transparent; color: #718096;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  font-size: 14px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.bd-tab:hover { background: transparent; border-color: #B5C6D8; color: #365D8D; }
.bd-tab.active, .bd-tab.active:hover { background: transparent; border-color: #365D8D; color: #1E436D; }
/* 기본 선택인 '전체'는 다른 분류보다 한 단계 또렷하게 보여 현재 범위를 바로 알린다. */
.bd-tab.active[data-sec="all"] { color: #1769D2; font-size: 16px; font-weight: 800; border-bottom-width: 3px; border-color: #1769D2; }

.rs-search { flex: 0 1 320px; min-width: 232px; position: relative; }
.rs-search input {
  width: 100%; height: 38px; box-sizing: border-box;
  padding: 0 38px 0 13px; margin: 0;
  background: #fff; border: 1px solid #D7E0E9; border-radius: 7px;
  font: inherit; font-size: 14px; color: #101B35; box-shadow: none;
  transition: border-color .16s ease, background .16s ease;
}
.rs-search input::placeholder { color: #8491A5; }
.rs-search input:focus { outline: none; background: #fff; border-color: #6D8EAF; }
.rs-search-ic {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 17px; height: 17px; color: #718096; pointer-events: none;
}
.rs-search-ic svg { width: 100%; height: 100%; display: block; }

/* ---- 2차 분류: 필요한 자료만 빠르게 좁히는 작은 버튼 ---- */
.rs-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px 0 12px;
}
.rs-bulkbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid #DCE3EB; border-radius: 8px; background: #F8FAFC;
  color: #526174; font-size: 13px; font-weight: 700;
}
.rs-check-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-check-label { margin-right: auto; }
.rs-bulkbar input[type="checkbox"], .rs-select-cell input { width: 15px; height: 15px; margin: 0; accent-color: #365D8D; cursor: pointer; }
.rs-bulk-count { margin-right: auto; color: #718096; font-size: 12px; }
.rs-bulk-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; box-sizing: border-box; padding: 0 11px; border: 1px solid #9DB4C8; border-radius: 6px; background: #fff; color: #365D8D; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
.rs-bulk-btn:hover:not(:disabled) { background: #EDF4FA; }
.rs-bulk-btn:disabled { opacity: .45; cursor: default; }
.rs-bulk-delete { border-color: #E6B8BE; color: #B34D58; }
.rs-bulk-delete:hover:not(:disabled) { background: #FFF4F4; }
.rs-bulk-picker { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .42); }
.rs-bulk-picker-card { width: min(100%, 340px); display: grid; gap: 12px; padding: 18px; border: 1px solid #d5e0ea; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15, 23, 42, .2); color: #1f2937; }
.rs-bulk-picker-card strong { font-size: 15px; }
.rs-bulk-picker-select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1f2937; }
.rs-bulk-picker-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rs-bulk-picker-actions button { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 34px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; font-weight: 700; }
.rs-bulk-picker-actions [data-bulk-confirm] { border-color: #2563eb; background: #2563eb; color: #fff; }
.rs-fil-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 12px; box-sizing: border-box;
  background: #fff; border: 1px solid #DCE3EB; border-radius: 6px;
  box-shadow: none; font-size: 12.5px; font-weight: 700; color: #5B6779; white-space: nowrap;
  cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rs-fil-tab:hover { background: #F6F8FA; border-color: #B8C7D5; color: #365D8D; }
.rs-fil-tab.active {
  background: #365D8D; border-color: #365D8D; color: #fff; font-weight: 700;
}
.rs-fil-tab.active[data-cat="전체"] { background: #1769D2; border-color: #1769D2; font-size: 13.5px; font-weight: 800; }

/* ---- 목록 카드 ---- */
.rs-card {
  background: #fff; border: 1px solid #DDE5EC;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
}

/* 머리줄과 글줄은 같은 6칸(자료 | 분류 | 작성자 | 작성일 | 조회수 | 좋아요)을 쓴다 */
.rs-thead, .rs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 154px 70px 90px 56px 64px;
  align-items: center; gap: 10px; padding: 0 20px;
}
.rs-card.is-manage .rs-thead, .rs-card.is-manage .rs-row { grid-template-columns: 24px minmax(0, 1fr) 154px 70px 90px 56px 64px; }
.rs-select-cell { display: none; align-items: center; justify-content: center; }
.rs-card.is-manage .rs-row .rs-select-cell { display: flex; }
.rs-thead .rs-select-cell { display: none; }
.rs-card.is-manage .rs-thead .rs-select-cell { display: flex; }
.rs-thead {
  padding-top: 10px; padding-bottom: 9px;
  background: #F7F9FB; font-size: 12px; font-weight: 700; color: #7B8797;
}
.rs-thead span:not(:first-child) { text-align: center; }
.rs-thead .rs-th-cat { text-align: center; }

.rs-list { border-top: 1px solid #E7ECF1; min-height: 260px; transition: opacity .14s ease; }
.rs-list.is-loading { opacity: .55; pointer-events: none; }
.rs-item { border-bottom: 1px solid #E7ECF1; }
.rs-item:last-child { border-bottom: none; }
.rs-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; cursor: pointer; transition: background .18s ease; }
.rs-row:hover { background: #F7F9FB; }
.rs-item.is-read .rs-row { background: #F3F6F9; }

/* 자료 칸: [종류 아이콘] [제목 · NEW · 댓글 / 설명] */
.rs-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-fic {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px;
  background: #F0F4F8; border: 1px solid #E0E7EE; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.rs-fic svg { width: 18px; height: 20px; display: block; }
.rs-fic-tag {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 1px 4px; border-radius: 3px;
  font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; background: #8491A5; line-height: 1.4;
}
.rs-fic-pdf .rs-fic-tag { background: #E0453F; }
.rs-fic-doc .rs-fic-tag { background: #2479E8; }
.rs-fic-ppt .rs-fic-tag { background: #D9622F; }
.rs-fic-xls .rs-fic-tag { background: #1E8E3E; }
.rs-fic-zip .rs-fic-tag { background: #6D4FD3; }
.rs-fic-img .rs-fic-tag { background: #D9822B; }

.rs-tx { min-width: 0; display: flex; flex-direction: column; }
.rs-tt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rs-title {
  font-size: 14px; font-weight: 700; color: #1E293B; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s ease;
}
.rs-row:hover .rs-title { color: #2F5A86; }
.rs-new {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 4px;
  background: #EDF3F8; color: #52728F; font-size: 10px; font-weight: 800; line-height: 1.4;
}
.rs-cmt { flex: 0 0 auto; color: #1769D2; font-size: 13px; font-weight: 700; }
.rs-desc {
  margin-top: 2px; font-size: 12px; line-height: 1.25; color: #7B8797;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rs-cat {
  justify-self: center; max-width: 100%; box-sizing: border-box;
  padding: 4px 8px; border-radius: 4px;
  background: #F3F6F8; color: #5B6779; font-size: 11.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-author, .rs-date { text-align: center; font-size: 12px; font-weight: 500; color: #6B778A; }
.rs-views {
  text-align: center; font-size: 12px; font-weight: 700; color: #526174;
  font-variant-numeric: tabular-nums;
}
.rs-likes {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #526174; font-variant-numeric: tabular-nums;
}
.rs-likes svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #8491A5; stroke-width: 1.8; }
.rs-likes.is-on svg { fill: #F05272; stroke: #F05272; }

/* 목록이 비었을 때 · 불러오는 중 */
.rs-blank { padding: 74px 24px; text-align: center; }
.rs-blank-ic { display: inline-flex; color: #C3D2E8; margin-bottom: 14px; }
.rs-blank-ic svg { width: 34px; height: 34px; }
.rs-blank-t { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #101B35; }
.rs-blank-s { margin: 0; font-size: 13px; color: #8491A5; }

/* ---- 아래 줄: 총 개수 · 페이지 · 글쓰기 ---- */
.rs-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 16px;
}
.rs-count { font-size: 13.5px; font-weight: 600; color: #60718D; }
.rs-pager { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rs-pg {
  min-width: 36px; height: 36px; padding: 0 9px; box-sizing: border-box;
  background: #fff; color: #60718D; border: 1px solid #DDE5EC; border-radius: 6px;
  box-shadow: none; font-size: 13.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rs-pg:hover:not(:disabled):not(.active) { border-color: #BFD3F2; color: #123F82; }
.rs-pg:disabled { opacity: .4; cursor: default; }
.rs-pg.active { background: #365D8D; border-color: #365D8D; color: #fff; }
.rs-pg svg { width: 15px; height: 15px; }
.rs-foot-r { display: flex; justify-content: flex-end; }
.rs-write {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  background: #365D8D; color: #fff; border: none; border-radius: 6px; box-shadow: none;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .16s ease;
}
.rs-write:hover { background: #294E78; }
.rs-write[hidden] { display: none; }
.rs-write svg { width: 16px; height: 16px; }

/* ---- 글쓰기 폼 (연합 선생님) ---- */
.rs-form {
  position: relative; z-index: 1; display: block;
  margin-top: 16px; padding: 22px 24px 24px;
  background: #fff; border: 1px solid #E8EDF5; border-radius: 22px;
  box-shadow: 0 10px 35px rgba(35, 55, 90, .06);
}
.rs-form[hidden] { display: none; }
.rs-form label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #60718D; }
.rs-form label + input, .rs-form label + select, .rs-form label + textarea { margin-bottom: 14px; }
.rs-form input[type="text"], .rs-form select, .rs-form textarea {
  width: 100%; box-sizing: border-box; padding: 11px 14px;
  background: #fff; border: 1px solid #E2E8F1; border-radius: 14px;
  font: inherit; font-size: 14px; color: #101B35;
}
.rs-form textarea { min-height: 130px; resize: vertical; }
.rs-form input:focus, .rs-form select:focus, .rs-form textarea:focus { outline: none; border-color: #9EBEF0; }
.rs-form-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.rs-form-file .hint { font-size: 12.5px; color: #8491A5; }
.rs-pvset {
  margin: -4px 0 18px;
  padding: 12px 14px;
  border: 1.5px dashed #c7d2fe;
  border-radius: 10px;
  background: #f4f7ff;
}
.rs-pv-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.rs-pv-on {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: #2563eb; cursor: pointer;
}
.rs-pv-on input { width: 16px; height: 16px; accent-color: #2563eb; }
.rs-pv-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #334155; white-space: nowrap;
}
.rs-pv-row[hidden] { display: none; }
.rs-pv-row input {
  width: 62px; box-sizing: border-box; text-align: center;
  font-family: inherit; font-size: 13.5px;
}
.rs-pv-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: #64748b; }
.rs-form-btns { display: flex; gap: 8px; }
.rs-form-btns button {
  height: 44px; padding: 0 22px; border-radius: 999px; box-shadow: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.post-preview {
  width: 100%;
  background: #f4f7ff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.post-preview:hover { border-color: #9ebef0; background: #eaf1ff; }
.rs-form-btns .rs-sub { background: #0B3A86; color: #fff; border: none; }
.rs-form-btns .rs-sub:hover:not(:disabled) { background: #1769D2; }
.rs-form-btns .rs-sub:disabled { opacity: .5; cursor: default; }
.rs-form-btns .rs-ghost { background: #fff; color: #60718D; border: 1px solid #E2E8F1; }
.rs-form-btns .rs-ghost:hover { border-color: #BFD3F2; color: #123F82; }

/* =========== 태블릿(≤900px) =========== */
@media (max-width: 900px) {
  .rs-panel { padding: 8px 0 22px; }
  .rs-navrow { flex-wrap: wrap; }
  .rs-search { flex: 1 1 100%; }
  .rs-thead, .rs-row { grid-template-columns: minmax(0, 1fr) 146px 64px 84px 50px 58px; padding: 0 18px; }
  .rs-card.is-manage .rs-thead, .rs-card.is-manage .rs-row { grid-template-columns: 24px minmax(0, 1fr) 146px 64px 84px 50px 58px; }
}

/* =========== 폰(≤640px) =========== */
@media (max-width: 640px) {
  .rs-panel { padding: 0 0 18px; }
  .rs-hero { gap: 11px; padding: 3px 0 16px; }
  .rs-hero::before { width: 3px; flex-basis: 3px; height: 43px; }
  .rs-hero-tx h1 { font-size: 22px; margin-bottom: 8px; }
  .rs-hero-tx p { font-size: 13.5px; line-height: 1.7; }
  .rs-md-admin-link { padding: 7px 9px; font-size: 11.5px; }

  .rs-navrow { margin-top: 0; gap: 10px; padding-bottom: 9px; }
  .rs-tabs {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0; padding: 0;
  }
  .rs-tabs::-webkit-scrollbar { display: none; }
  .bd-tab { flex: 0 0 auto; height: 36px; padding: 0 12px; font-size: 13px; }
  .bd-tab.active[data-sec="all"] { font-size: 14px; }
  .rs-search input { height: 42px; font-size: 13.5px; }

  .rs-filter { gap: 5px; margin: 16px 0 10px; }
  .rs-fil-tab { flex: 0 0 auto; height: 32px; padding: 0 10px; font-size: 11.5px; }
  .rs-fil-tab.active[data-cat="전체"] { font-size: 12.5px; }

  .rs-card { border-radius: 10px; }
  .rs-thead { display: none; }   /* 칸 이름 대신 글줄 안에 정보를 적는다 */
  .rs-list { min-height: 200px; }

  /* 글줄: 제목 아래로 분류·작성자·날짜·조회·좋아요를 작은 한 줄로 내린다 */
  .rs-row {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 8px 10px; padding: 15px 14px; min-height: 0;
  }
  .rs-row { padding-left: 62px; }
  .rs-card.is-manage .rs-row { padding-left: 14px; }
  .rs-card.is-manage .rs-select-cell { flex: 0 0 16px; margin-top: 12px; }
  .rs-card.is-manage .rs-main { flex: 0 0 calc(100% - 26px); margin-left: 0; }
  .rs-main { flex: 0 0 calc(100% + 48px); margin-left: -48px; align-items: flex-start; gap: 12px; }
  .rs-fic { width: 40px; height: 40px; border-radius: 8px; }
  .rs-fic svg { width: 21px; height: 25px; }
  .rs-fic-tag { bottom: 8px; font-size: 7px; }
  .rs-title { font-size: 14.5px; white-space: normal; word-break: keep-all; }
  .rs-tt { flex-wrap: wrap; gap: 6px; }
  .rs-desc { font-size: 12.5px; margin-top: 4px; }

  .rs-cat, .rs-author, .rs-date, .rs-views, .rs-likes {
    justify-self: auto; text-align: left; font-size: 12px; font-weight: 600; color: #8491A5;
  }
  .rs-cat { padding: 4px 10px; font-size: 11.5px; }
  .rs-views::before { content: '조회 '; }
  .rs-likes { gap: 4px; }
  .rs-likes svg { width: 13px; height: 13px; }

  .rs-foot { grid-template-columns: 1fr auto; gap: 10px 12px; margin-top: 14px; }
  .rs-count { order: 1; }
  .rs-foot-r { order: 2; }
  .rs-pager { order: 3; grid-column: 1 / -1; }
  .rs-write { height: 42px; padding: 0 18px; font-size: 13.5px; }
  .rs-form { padding: 18px 16px 20px; border-radius: 18px; }
  .rs-bulkbar { align-items: flex-start; padding: 10px; }
  .rs-check-label { margin-right: 0; }
}

/* 눈에는 안 보이지만 화면 낭독기에는 읽히는 이름표 (검색창 label) */
.rs-search .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 쓰던 AI 로 만들어 오기 (2026-08-29, 아직 비공개) ── */
.an-box { margin: 14px 0; padding: 13px 14px; border: 1px solid #c7dbfa;
  border-radius: 12px; background: linear-gradient(180deg, #f4f8ff, #fbfdff); }
.an-ttl { font-size: 13px; font-weight: 800; color: #1d4ed8; margin-bottom: 4px; }
.an-steps { font-size: 12px; color: #64748b; line-height: 1.7; margin-bottom: 9px; }
.an-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.an-report { font-size: 12.5px; line-height: 1.75; padding: 10px 12px;
  border-radius: 9px; margin: 0 0 9px; white-space: pre-wrap; font-family: inherit; }
.an-report.is-ok { background: #e7f6ec; color: #0f7b3f; }
.an-report.is-bad { background: #fdecea; color: #c0392b; }