/* 게임정보 게시판 — 시스템 · 레이드 · 퀘스트 (2026-09-22)

   커뮤니티 게시판과 아무것도 나누지 않는다. site.css 의 토큰만 빌려 쓰고
   생김새는 페트도감·페트탑승 쪽(우리가 만든 쪽)에 맞춘다.
   표가 아니라 카드 격자다 — 읽을거리는 줄보다 판이 낫다. */

#sa_info_list,#sa_info_view{ position:relative; z-index:2 }

/* ── 목록 머리 ── */
.sa-info-top{
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.sa-info-count{margin:0; font-size:13px; color:var(--ink-mute); letter-spacing:.02em}
.sa-info-count b{color:var(--gold); font-variant-numeric:tabular-nums}
.sa-info-adm{margin-left:auto; display:flex; gap:8px}
.sa-info-adm a{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border:1px solid var(--line); border-radius:9px;
  font-size:13px; color:var(--ink-dim);
}
.sa-info-adm a:hover{border-color:var(--gold); color:var(--gold)}
.sa-info-adm a.on{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:transparent; color:#2a1a08; font-weight:700;
}

/* ── 분류 단추 ── */
.sa-info-cate{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 20px; padding:0; list-style:none;
}
.sa-info-cate li{margin:0}
.sa-info-cate a{
  display:inline-flex; align-items:center; height:34px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px;
  font-size:13px; color:var(--ink-dim);
}
.sa-info-cate a:hover{border-color:var(--gold); color:var(--gold)}
.sa-info-cate a#bo_cate_on{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:transparent; color:#2a1a08; font-weight:700;
}

/* ── 제목 격자 ──
   가로 3 · 세로 10. 그림도 미리보기도 없이 제목만 본다. 자료 게시판은
   훑고 고르는 곳이라, 한 화면에 많이 보이는 편이 낫다. */
.sa-info-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:0; padding:0; list-style:none;
}
.sa-info-grid > li{min-width:0}
.sa-info-grid a{
  display:flex; align-items:center; gap:12px;
  height:100%; padding:10px 14px 10px 10px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(27,22,17,.55); color:var(--ink-dim); font-size:14px;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.sa-info-grid a:hover{
  border-color:rgba(255,200,97,.45); background:rgba(35,28,21,.75); color:var(--gold);
}

/*  왼쪽 그림 한 칸. 글 첫 그림을 잘라 쓴다 */
.sa-info-thumb{
  flex:0 0 auto; width:62px; height:62px; overflow:hidden;
  border:1px solid var(--line); border-radius:9px;
  background:rgba(10,8,6,.55);
}
.sa-info-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.sa-info-grid a:hover .sa-info-thumb{border-color:rgba(255,200,97,.35)}
/*  그림이 없는 글은 마름모로 자리를 지킨다 */
.sa-info-thumb.none{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,200,97,.3); font-size:18px;
}

.sa-info-body{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.sa-info-title{
  display:flex; align-items:center; gap:6px; min-width:0; line-height:1.45;
}
.sa-info-subject{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/*  레벨제한 · 보상. 글을 들일 때 표에서 뽑아 둔 것이다 */
.sa-info-meta{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:12px; color:var(--ink-mute);
}
.sa-info-meta i{
  font-style:normal; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sa-info-lv{
  flex:0 0 auto; padding:1px 8px; border-radius:999px;
  border:1px solid rgba(255,200,97,.3); background:rgba(255,200,97,.10);
  color:var(--gold); font-style:normal; font-size:11px;
  font-variant-numeric:tabular-nums;
}
.sa-info-grid a:hover .sa-info-meta i{color:var(--ink-dim)}

.sa-info-pin,.sa-info-new{
  flex:0 0 auto; padding:1px 7px; border-radius:999px;
  font-style:normal; font-size:10px; letter-spacing:.04em;
}
.sa-info-pin{background:rgba(255,200,97,.16); color:var(--gold)}
.sa-info-new{background:rgba(255,106,61,.18); color:var(--ember)}
.sa-info-grid > li.is-pin a{border-color:rgba(255,200,97,.3)}

.sa-info-empty{
  margin:0; padding:70px 0; text-align:center;
  font-size:14px; color:var(--ink-mute);
}

/* ── 쪽번호 (그누보드가 찍는 것) ── */
#sa_info_list .pg_wrap{margin:34px 0 0; text-align:center}
#sa_info_list .pg{display:inline-flex; gap:6px}
#sa_info_list .pg_page,#sa_info_list .pg_current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:9px;
  border:1px solid var(--line); font-size:13px; color:var(--ink-dim);
}
#sa_info_list .pg_page:hover{border-color:var(--gold); color:var(--gold)}
#sa_info_list .pg_current{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:transparent; color:#2a1a08; font-weight:700;
}

/* ═══════════ 글읽기 ═══════════ */
.sa-iv-head{
  padding:0 0 18px; margin:0 0 26px; border-bottom:1px solid var(--line);
}
.sa-iv-head h1{
  margin:0; font-size:clamp(20px,2.4vw,28px); line-height:1.35; color:var(--ink);
}
.sa-iv-meta{
  margin:10px 0 0; display:flex; gap:14px;
  font-size:12.5px; color:var(--ink-mute);
}
.sa-iv-meta i{font-style:normal; font-variant-numeric:tabular-nums}
.sa-iv-adm{margin:12px 0 0; display:flex; gap:8px}
.sa-iv-adm a{
  display:inline-flex; align-items:center; height:30px; padding:0 12px;
  border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; color:var(--ink-mute);
}
.sa-iv-adm a:hover{border-color:var(--gold); color:var(--gold)}

.sa-iv-con{
  min-height:180px; font-size:15px; line-height:1.85; color:var(--ink-dim);
  word-break:break-word;
}
.sa-iv-con img{max-width:100%; height:auto; border-radius:10px; margin:10px 0}
.sa-iv-con a{color:var(--gold); border-bottom:1px solid rgba(255,200,97,.35)}
.sa-iv-con b,.sa-iv-con strong{color:var(--ink)}
.sa-iv-con table{max-width:100%; border-collapse:collapse}
.sa-iv-con td,.sa-iv-con th{border:1px solid var(--line); padding:8px 10px}

.sa-iv-file,.sa-iv-link{
  margin:26px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.sa-iv-file li,.sa-iv-link li{border-bottom:1px solid var(--line)}
.sa-iv-file a,.sa-iv-link a{
  display:flex; align-items:center; gap:10px; padding:12px 4px;
  font-size:13.5px; color:var(--ink-dim);
}
.sa-iv-file a:hover,.sa-iv-link a:hover{color:var(--gold)}
.sa-iv-file b{font-weight:400}
.sa-iv-file span{margin-left:auto; font-size:12px; color:var(--ink-mute)}

/* ── 앞뒤 글 ── */
.sa-iv-nb{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin:30px 0 0;
}
.sa-iv-nb a{
  padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:rgba(27,22,17,.5); min-width:0;
}
.sa-iv-nb a:hover{border-color:rgba(255,200,97,.4)}
.sa-iv-nb span{display:block; font-size:11px; letter-spacing:.12em; color:var(--ink-mute)}
.sa-iv-nb b{
  display:block; margin-top:5px; font-size:14px; color:var(--ink-dim); font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sa-iv-nb a:hover b{color:var(--gold)}
.sa-iv-nb .next{text-align:right}

/* ── 아래 단추 ── */
.sa-iv-btns{display:flex; gap:8px; margin:26px 0 0}
.sa-iv-list,.sa-iv-write{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 26px; border-radius:11px;
  border:1px solid var(--line); font-size:15px; color:var(--ink-dim);
}
.sa-iv-list{flex:1}
.sa-iv-list:hover{border-color:var(--gold); color:var(--gold)}
.sa-iv-write{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:transparent; color:#2a1a08; font-weight:700;
}

/* ── 좁은 화면 ── */
@media (max-width:960px){
  .sa-info-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .sa-info-grid{grid-template-columns:1fr}
  .sa-iv-nb{grid-template-columns:1fr}
  .sa-iv-nb .next{text-align:left}
}

/* ── 선택삭제 (관리자에게만 보인다) ── */
.sa-info-allchk{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-dim); cursor:pointer;
}
.sa-info-allchk input{accent-color:var(--gold); width:15px; height:15px}
.sa-info-adm button{
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  border:1px solid var(--line); border-radius:9px;
  background:none; color:var(--ink-dim); font-size:13px; cursor:pointer;
}
.sa-info-adm button.warn:hover{
  border-color:var(--ember); color:var(--ember); background:rgba(255,106,61,.08);
}
/*  체크칸은 칸 왼쪽 위 모서리에 얹는다 */
.sa-info-grid > li{position:relative}
.sa-info-chk{
  position:absolute; left:6px; top:6px; z-index:2;
  width:16px; height:16px; accent-color:var(--gold); cursor:pointer;
}