@charset "utf-8";
/* ==========================================================================
   전체 새글 (new.skin.php) — .list-tools · .sort-btn · .board-list 는 rb.css/sub.css 에 있다.
   여기선 위 줄의 오른쪽 묶음 · 한 줄 배치 · 댓글 줄 · 빈 목록만.
   ========================================================================== */

/* 위 줄 — 전체 N건 · 회원 칩 | 전체/글/댓글 · 그룹 */
.new-tools-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.new-who {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 8px; vertical-align: middle;
  height: 30px; padding: 0 6px 0 12px;
  border-radius: var(--r-full);
  background: var(--sky-100);
  font-size: 13.5px; font-weight: 600; color: var(--sky-t3);
}
.new-who a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: inherit;
  transition: background .18s;
}
.new-who a:hover { background: var(--sky-200); }
.new-who .bf-ico { width: 13px; height: 13px; }
.new-filter select {
  height: 32px; padding: 0 30px 0 12px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA1AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 13.5px; color: var(--ink-600);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .18s;
}
.new-filter select:hover { border-color: var(--sky-b2); }

/* 한 줄 — [게시판] 제목 (댓글 수)                         글쓴이 · 시각 */
.new-list { margin: 0; padding: 0; list-style: none; }
.new-row {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px 0 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background .18s;
}
.new-row:last-child { border-bottom: 0; }
.new-row:hover { background: var(--sky-50); }
.new-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 0 12px 20px;
}
.new-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.new-subj {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-800);
}
.new-subj-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
.new-link:hover .new-subj-t { color: var(--sky-t3); }
.new-cnt {
  flex: none;
  min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--sky-100); color: var(--sky-t2);
  font-family: var(--font-en); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* 댓글 줄 — '댓글' 표시 + 원글 제목은 옅게, 아래에 댓글 내용 */
.new-kind {
  flex: none;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--mint) 14%, transparent);
  color: var(--mint);
  font-size: 11.5px; font-style: normal; font-weight: 700;
}
.new-row.is-cmt .new-subj { font-size: 13.5px; color: var(--ink-500); }
.new-cmt {
  position: relative;
  padding-left: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14.5px; color: var(--ink-800);
}
.new-cmt::before {   /* ㄴ 모양 — 원글에 달린 말 */
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 7px; height: 7px;
  border-left: 1.5px solid var(--ink-300); border-bottom: 1.5px solid var(--ink-300);
  border-bottom-left-radius: 2px;
}

/* 글쓴이 · 시각 */
.new-meta { flex: none; display: flex; align-items: center; gap: 14px; }
.new-meta .p-name { max-width: 120px; font-size: 13.5px; color: var(--ink-600); }
.new-meta .p-name .sv_wrap > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-meta .p-name .profile_img { display: none; }   /* 사이드뷰의 회원 사진 — 이 줄에는 이름만 */
.new-meta .p-date {
  min-width: 42px; text-align: right;
  font-family: var(--font-en); font-size: 13px; color: var(--ink-400);
}

/* 빈 목록 */
.new-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 56px 20px;
  text-align: center;
}
.new-empty::before {
  content: ""; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375BCEA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 6-2 7-2 7h16s-2-1-2-7Z'/%3E%3Cpath d='M13.7 20a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.new-empty p { margin: 0; font-size: 14.5px; color: var(--ink-500); }

.new-wrap .pg_wrap { margin-top: 24px; }

/* 좁은 화면 — 글쓴이 · 시각을 제목 아래로 */
@media (max-width: 640px) {
  .new-tools { align-items: flex-start; }
  .new-row { flex-wrap: wrap; gap: 0; padding: 0 16px 12px; }
  .new-link { flex-basis: 100%; min-height: 0; padding: 14px 0 6px; align-items: flex-start; }
  .new-link .p-cate { margin-top: 1px; }
  .new-meta { padding-left: 0; gap: 10px; }
  .new-meta .p-name, .new-meta .p-date { font-size: 12.5px; }
}