/* ==========================================================================
   /assets/css/board/board-list.css  (FINAL CLEAN)
   - 대상: board.php (목록)
   - "현재 화면 레이아웃 유지" (PC 2열 / 모바일 1열)
   - 중복/구버전(.board-wrap/.board-grid...) 제거 ✅
   - 모바일에서 테이블을:
       A) PC형 표 유지  (옵션 ON)  ✅ 기본값
       B) 카드형(라벨:값) 변환 (옵션 OFF로 바꾸면 사용)
   ========================================================================== */


/* ==========================================================================
   0) 컨테이너 폭 / 정렬
   - 공통 .layout-inner 폭이 페이지마다 다를 수 있어 board에서만 통일
   - 지금 상태 유지: 1440 기준(= --w-chrome)로 맞춤
   ========================================================================== */
.page-board.page-board-list .layout-inner.board-page{
  max-width: var(--w-chrome) !important; /* 보통 1440px */
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.page-board.page-board-list .board-page{
  padding-top: 14px;   /* ✅ 상단 여백 조절 포인트 */
  padding-bottom: 28px;
}


/* ==========================================================================
   1) 상단(제목/메타/버튼)
   ========================================================================== */
.page-board.page-board-list .board-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 14px;
}

.page-board.page-board-list .board-title{
  font-size: 22px;
  letter-spacing:-.6px;
  margin:0;
}

.page-board.page-board-list .board-meta{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.page-board.page-board-list .board-meta .dot{
  opacity:.35;
}

.page-board.page-board-list .badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(37,99,235,.10);
  color: rgba(37,99,235,.95);
  font-weight: 900;
  font-size: 13px;
}

.page-board.page-board-list .board-top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* ==========================================================================
   2) 2열 레이아웃(PC) / 1열(모바일)
   - 지금 상태 유지: 왼쪽(목록) + 오른쪽(사이드)
   ========================================================================== */
.page-board.page-board-list .board-layout{
  display:grid;
  grid-template-columns: 1.2fr .55fr; /* ✅ 오른쪽 사이드 폭 느낌 조절 포인트 */
  gap: 16px;                          /* ✅ 컬럼 간격 조절 포인트 */
  align-items:start;
}


/* ==========================================================================
   3) 메인 카드(왼쪽) / 사이드(오른쪽)
   ========================================================================== */
.page-board.page-board-list .board-main.card{
  padding: 14px;
  border-radius: 16px;

  /* ✅ 글씨 흐려보임 방지(불투명 + 필터 제거) */
  background: #fff;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 오른쪽 사이드 카드들 간격 */
.page-board.page-board-list .board-side{
  display:grid;
  gap: 12px;
}

/* 사이드 카드 공통 */
.page-board.page-board-list .side-card{
  padding: 14px;
  border-radius: 16px;
}

.page-board.page-board-list .side-title{
  font-weight: 900;
  margin-bottom: 10px;
}

/* 사이드 링크 */
.page-board.page-board-list .side-links{
  display:grid;
  gap:8px;
}

.page-board.page-board-list .side-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,.03);
  text-decoration:none;
  color: rgba(15,23,42,.92);
  font-weight: 900;
}

@media (hover:hover){
  .page-board.page-board-list .side-link:hover{
    background: rgba(37,99,235,.08);
    color: rgba(37,99,235,.95);
  }
}

/* 인기글 리스트 */
.page-board.page-board-list .side-list{
  margin:0;
  padding-left: 24px;
}
.page-board.page-board-list .side-list li{
  margin: 8px 0;
}
.page-board.page-board-list .side-list a{
  text-decoration:none;
  font-weight: 850;
  color: rgba(15,23,42,.92);
}
.page-board.page-board-list .side-mini{
  display:block;
  font-size: 12px;
  margin-top: 2px;
  color: rgba(15,23,42,.55);
}


/* ==========================================================================
   4) 툴바(검색 + 표시 개수)
   - 요구사항: height 36px + 한 줄 정렬(모바일에서도 안정)
   ========================================================================== */
.page-board.page-board-list .board-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: 12px;
}

.page-board.page-board-list .board-search{
  display:flex;
  gap:10px;
  flex:1 1 auto;
  align-items:center;
}

.page-board.page-board-list .board-search .input{
  height: 36px;
  line-height: 36px;
  padding: 12px 12px;          /* ✅ 패딩 조절 포인트 */
  font-size: 14px;
  width: 100%;
  min-width: 240px;         /* PC에서 너무 쪼그라들지 않게 */
  border-radius: 12px;
}

.page-board.page-board-list .board-search .btn{
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.page-board.page-board-list .board-filter{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.page-board.page-board-list .board-filter .input{
  height: 36px;
  line-height: 36px;
  border-radius: 12px;
}


/* ==========================================================================
   5) 테이블(목록) – PC 스타일
   ========================================================================== */
.page-board.page-board-list .board-table-wrap{
  width: 100%;
}

.page-board.page-board-list .board-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.page-board.page-board-list .board-table th{
  text-align:left;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.75);
  padding: 10px 10px;
}

.page-board.page-board-list .board-table td{
  padding: 12px 10px;
  border-top: 1px solid rgba(15,23,42,.08);
  vertical-align:middle;
  color: rgba(15,23,42,.92);
}

.page-board.page-board-list .board-table tr:hover td{
  background: rgba(2,6,23,.02);
}

.page-board.page-board-list .board-table .title a{
  font-weight: 900;
  text-decoration:none;
  color: rgba(15,23,42,.92);
}

@media (hover:hover){
  .page-board.page-board-list .board-table .title a:hover{
    color: rgba(37,99,235,.95);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.page-board.page-board-list .board-table .empty{
  text-align:center;
  padding: 26px 10px;
  color: rgba(15,23,42,.55);
  font-weight: 800;
}

/* 컬럼 폭(PC에서만 의미 큼) */
.page-board.page-board-list .col-id{ width: 70px; }
.page-board.page-board-list .col-name{ width: 120px; }
.page-board.page-board-list .col-date{ width: 160px; }
.page-board.page-board-list .col-views{ width: 80px; text-align:left; }

.page-board.page-board-list .board-bottom-hint{
  padding-top: 12px;
  font-size: 13px;
  color: rgba(15,23,42,.60);
}


/* ==========================================================================
   6) 반응형(레이아웃)
   ========================================================================== */
@media (max-width: 980px){
  .page-board.page-board-list .board-layout{
    grid-template-columns: 1fr; /* ✅ 모바일/태블릿 1열 */
  }
  .page-board.page-board-list .board-top{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* 모바일 툴바(검색+필터) 정리 */
@media (max-width: 560px){
  .page-board.page-board-list .board-title{
    font-size: 22px; /* ✅ 모바일 제목 */
  }

  .page-board.page-board-list .board-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* ✅ 모바일에서도 "검색 input + 버튼" 한 줄 유지 */
  .page-board.page-board-list .board-search{
    flex-direction: row;
  }

  .page-board.page-board-list .board-search .input{
    min-width: 0;     /* ✅ 핵심: flex 수축 시 깨짐 방지 */
    flex: 1;
  }

  .page-board.page-board-list .board-filter{
    justify-content: flex-end;
  }
}


/* ==========================================================================
   7) 모바일 테이블 표시 옵션
   --------------------------------------------------------------------------
   [옵션 A] ✅ 기본값: 모바일에서도 PC형 "표" 유지
     - 화면이 작아 글씨가 답답하면: padding / 숨길 컬럼만 조절

   [옵션 B] (원하면 사용) 모바일에서 표를 "카드형(라벨:값)"으로 변환
     - 아래 "옵션 B" 블록을 활성화하고,
       "옵션 A" 블록을 주석 처리하면 됩니다.
   ========================================================================== */


/* =========================
   옵션 A) 모바일에서도 표 유지 (DEFAULT ON)
   ========================= */
@media (max-width: 640px){

  /* ✅ 모바일에서 표가 너무 넓으면: 날짜/조회 같은 컬럼 숨기기 */
  /* .page-board.page-board-list .col-date{ display:none; } */
  /* .page-board.page-board-list .col-views{ display:none; } */

  .page-board.page-board-list .board-table th,
  .page-board.page-board-list .board-table td{
    padding: 10px 8px;   /* ✅ 모바일 밀도 조절 포인트 */
    font-size: 13px;
  }

  /* 제목 칸이 너무 좁으면 줄바꿈 허용 */
  .page-board.page-board-list .board-table td.title a{
    white-space: normal;
    word-break: break-word;
  }
}


/* =========================
   옵션 B) 모바일 카드형 변환 (DEFAULT OFF)
   - 쓰고 싶으면 이 블록 주석 해제 + 위 옵션A 주석 처리
   ========================= */
/*
@media (max-width: 640px){

  .page-board.page-board-list .board-table thead{ display:none; }

  .page-board.page-board-list .board-table,
  .page-board.page-board-list .board-table tbody,
  .page-board.page-board-list .board-table tr,
  .page-board.page-board-list .board-table td{
    display:block;
    width:100%;
  }

  .page-board.page-board-list .board-table tr{
    padding: 12px;
    border-top: 1px solid rgba(15,23,42,.08);
  }

  .page-board.page-board-list .board-table td{
    padding: 8px 0;
    border: 0;
  }

  .page-board.page-board-list .board-table td::before{
    display:inline-block;
    min-width: 56px;
    margin-right: 10px;
    font-weight: 900;
    color: rgba(15,23,42,.60);
  }

  .page-board.page-board-list .board-table td:nth-child(1)::before{ content:"번호"; }
  .page-board.page-board-list .board-table td:nth-child(2)::before{ content:"제목"; }
  .page-board.page-board-list .board-table td:nth-child(3)::before{ content:"작성자"; }
  .page-board.page-board-list .board-table td:nth-child(4)::before{ content:"작성일"; }
  .page-board.page-board-list .board-table td:nth-child(5)::before{ content:"조회"; }
}
*/

/* =========================================================
   HOTFIX: board.css가 모바일에서 표를 카드형으로 바꾸는 것을 되돌림
   - board.php(목록)에서만 강제 적용
   ========================================================= */
@media (max-width: 720px){

  .page-board.page-board-list .board-table thead{
    display: table-header-group !important;
  }

  .page-board.page-board-list .board-table{
    display: table !important;
    width: 100% !important;
  }

  .page-board.page-board-list .board-table tbody{
    display: table-row-group !important;
    width: auto !important;
  }

  .page-board.page-board-list .board-table tr{
    display: table-row !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .page-board.page-board-list .board-table th,
  .page-board.page-board-list .board-table td{
    display: table-cell !important;
    width: auto !important;
  }
}

@media (max-width: 720px){
  .page-board.page-board-list .board-table{
    min-width: 0 !important;
  }
}

/* =========================================================
 * board-list.css PATCH
 * 1) 우측 상단 "글쓰기/메인"을 버튼처럼 + 화살표
 * 2) 사이드 "바로가기"의 글쓰기만 튀는 문제(배경 없음) 해결
 * ========================================================= */

/* -----------------------------
 * [A] 우측 상단 액션(글쓰기/메인) 버튼화
 * - HTML 그대로: .board-top-actions 안의 a.quick-link
 * ----------------------------- */
.page-board.page-board-list .board-top-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* 공통 버튼 룩 */
.page-board.page-board-list .board-top-actions .quick-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height: 36px;                 /* ✅ 높이: 여기서 조절 */
  padding: 0 14px;              /* ✅ 좌우 여백: 여기서 조절 */
  border-radius: 999px;

  text-decoration:none;
  font-weight: 900;
  font-size: 13px;

  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.92);

  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

/* 화살표(아이콘) - HTML 수정 없이 CSS로 추가 */
.page-board.page-board-list .board-top-actions .quick-link::after{
  content: "→";
  font-weight: 1000;
  opacity: .75;
  transform: translateY(-.5px);
}

/* hover/active */
@media (hover:hover){
  .page-board.page-board-list .board-top-actions .quick-link:hover{
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.22);
    box-shadow: 0 10px 22px rgba(2,6,23,.10);
  }
}
.page-board.page-board-list .board-top-actions .quick-link:active{
  transform: translateY(1px);
}

/* 첫 번째 버튼(= 글쓰기)을 Primary로 강조 (순서가 글쓰기 → 메인 이라면 정확히 먹음) */
.page-board.page-board-list .board-top-actions .quick-link:first-child{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.28);
  color: rgba(15,23,42,.95);
}
.page-board.page-board-list .board-top-actions .quick-link:first-child::after{
  content: "✍︎";
  opacity: .9;
}

/* 두 번째 버튼(= 메인)은 홈 느낌 */
.page-board.page-board-list .board-top-actions .quick-link:nth-child(2)::after{
  content: "⌂";
  opacity: .85;
}

/* =========================================================
 * RIGHT SIDE CARD FONT SIZE TUNE (FINAL)
 * - 대상: 오른쪽 3개 카드(바로가기 / 인기글TOP5 / 사용팁)
 * - 목적: 좌측 본문(테이블/검색) 글씨 크기와 체감 동일하게 맞춤
 *
 * ✅ 사용자가 조절할 곳:
 *   --side-title-size  : 카드 제목 크기(바로가기/인기글TOP5/사용팁 제목)
 *   --side-body-size   : 카드 내부 글씨(링크/리스트/설명)
 *   --side-sub-size    : 보조 텍스트(조회수 등 작은 글씨)
 * ========================================================= */

.page-board.page-board-list{
  /* ✅ 여기 숫자만 조절하면 전체가 같이 움직입니다 */
  --side-title-size: 17px;  /* 기본 16~18 추천 */
  --side-body-size:  14.5px;  /* 좌측 테이블 13~14 느낌 맞추기 */
  --side-sub-size:   13px;  /* 조회수/보조 글씨 */
}

/* 1) 우측 카드 제목(바로가기 / 인기글 TOP5 / 사용 팁) */
.page-board.page-board-list .board-side .side-title{
  font-size: var(--side-title-size);
}

/* 2) 우측 카드 내부 공통 글씨(링크/텍스트) */
.page-board.page-board-list .board-side .side-link,
.page-board.page-board-list .board-side .quick-link,
.page-board.page-board-list .board-side .side-list a,
.page-board.page-board-list .board-side .side-tip li{
  font-size: var(--side-body-size);
  line-height: 1.35; /* ✅ 우측이 커보이면 line-height가 원인이기도 함 */
}

/* 3) 인기글 조회수 같은 보조 글씨 */
.page-board.page-board-list .board-side .side-mini{
  font-size: var(--side-sub-size);
}

.board-admin-bar{
  background: rgba(47,107,255,0.08);
  border: 1px solid rgba(47,107,255,0.25);
  color: #2f6bff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  margin: 0 0 16px;
  display: inline-block;
}
/* =========================
   Admin spam panel
   ========================= */
.board-spam-card{
  margin: 0 0 16px;
  padding: 14px 16px;
}
.spam-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.spam-title{ font-weight: 800; }
.spam-list{ display:flex; flex-direction:column; gap:10px; }
.spam-item{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.spam-main{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.spam-ip{ font-weight: 800; }
.spam-wait{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.18);
}
.spam-meta{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-all;
}
.spam-uri{ }
.spam-ua{ opacity:.9; }

/* =========================
   Mobile card list switch
   - Desktop: table on
   - Mobile/Tablet: cards on
   ========================= */
.board-cards{ display:none; margin-top: 10px; }
.bc-item{ padding: 12px 14px; }
.bc-title{
  display:block;
  font-weight: 800;
  text-decoration:none;
  margin-bottom: 6px;
}
.bc-meta{
  font-size: 12px;
  line-height: 1.35;
}
.bc-actions{
  display:flex;
  gap: 8px;
  margin-top: 10px;
}
.bc-id{
  font-weight: 700;
  opacity: .85;
}

/* 태블릿/모바일에서 표 숨기고 카드 표시 */
@media (max-width: 980px){
  .table-wrap{ display:none; }
  .board-cards{ display:block; }
}

/* =============================================================================
   [Board List] 검색창(검색 폼) "많이 줄이기"
   - 목표: 검색 입력창이 너무 길게 퍼지는 것을 줄이고,
           우측 '검색' 버튼과 '표시 n개' 셀렉트가 정돈되게 배치
   - 조절 포인트: ① input 폭 ② input 높이 ③ 버튼 간격 ④ 모바일 동작
   ============================================================================= */

/* ✅ (A) 검색 영역 전체 래퍼를 특정 (클래스명이 다르면 HTML에서 확인 후 바꾸면 됨)
   - 보통 .board-search, .board-filter, .board-toolbar 같은 이름을 씀 */
.page-board .board-search,
.page-board .board-toolbar,
.page-board .board-filter{
  /* 아무것도 안해도 되지만, gap/정렬을 보정할 때 여기에서 한다 */
}

/* ✅ (B) 검색 input 자체를 강제로 "짧게" 만들기
   - max-width 를 작게 잡으면 화면이 넓어도 입력창이 길어지지 않는다 */
.page-board input[type="search"],
.page-board input[name="q"],
.page-board .board-search input[type="text"]{
  /* ▼▼ 여기 숫자를 줄일수록 더 짧아짐 */
  margin-left: 16px;
  max-width: 520px;              /* PC에서 검색창 최대 폭 (많이 줄임) */
  width: 100%;                   /* 래퍼가 작으면 그 안에서 꽉 차게 */
  height: 38px;                  /* 입력창 높이 */
  font-size: 14px;               /* 입력 글자 크기 */
  padding: 0 14px;               /* 좌우 여백 */
  border-radius: 12px;           /* 둥글기 */
}

/* ✅ (C) 검색폼이 flex라면 input이 과하게 늘어나는 것을 방지
   - flex:1 때문에 input이 전부 먹는 경우가 많다 -> flex를 제한 */
.page-board .board-search input,
.page-board .board-toolbar input{
  flex: 0 1 520px;               /* 520px 기준으로 줄고 늘도록 */
  min-width: 260px;              /* 너무 작아지지 않게 최소값 */
}

/* ✅ (D) 검색 버튼/표시개수 셀렉트 정돈
   - 버튼이 너무 크거나, 간격이 넓으면 아래에서 조절 */
.page-board .board-search button,
.page-board .board-toolbar button{
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 12px;
}

.page-board select,
.page-board .board-search select,
.page-board .board-toolbar select{
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 12px;
}

/* ✅ (E) 검색 폼이 한 줄에 깔끔하게 모이도록
   - 래퍼 클래스가 다르면 너의 HTML에서 검색폼 컨테이너 class를 확인해 바꿔줘 */
.page-board .board-search form,
.page-board .board-toolbar form{
  display: flex;
  align-items: center;
  gap: 10px;                     /* input/버튼/셀렉트 사이 간격 */
  flex-wrap: wrap;               /* 좁아지면 자연스럽게 줄바꿈 */
}

/* ✅ (F) 모바일에서 더 줄이되, 사용성은 유지 */
@media (max-width: 760px){
  .page-board input[type="search"],
  .page-board input[name="q"],
  .page-board .board-search input[type="text"]{
    max-width: 100%;             /* 모바일은 꽉 차게(짧게 하면 불편) */
    height: 38px;
    font-size: 13px;
  }
  .page-board .board-search form,
  .page-board .board-toolbar form{
    gap: 8px;
  }
}
/* =============================================================================
   [Board Right Sidebar] 인기글 TOP5 / 사용 팁 타이포(글자크기) 조절
   - 목표: 제목은 단정하게, 리스트/설명은 더 작고 읽기 좋게
   - 조절 포인트:
       ① 카드 제목 크기 (h2/h3)
       ② 리스트 항목 글자 크기
       ③ 설명(부가 텍스트) 크기
   ============================================================================= */

/* ✅ (A) 오른쪽 카드 공통(바로가기/인기글/사용팁)을 잡는 래퍼
   - 클래스명이 다르면 우측 카드 HTML에서 class를 확인 후 교체 */
.page-board .board-side .card,
.page-board .board-right .card,
.page-board aside .card{
  /* 카드 내부 기본 폰트 기준 */
  font-size: 13.5px;
}

/* ✅ (B) 카드 제목(인기글 TOP 5, 사용 팁 같은 타이틀) */
.page-board .board-side .card h2,
.page-board .board-side .card h3,
.page-board .board-right .card h2,
.page-board .board-right .card h3,
.page-board aside .card h2,
.page-board aside .card h3{
  /* ▼▼ 제목 글자 크기: 여기만 바꾸면 “인기글/사용팁 제목”이 같이 바뀜 */
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
}

/* ✅ (C) 인기글 TOP5 리스트 항목(제목 텍스트) */
.page-board .board-side .card ol li,
.page-board .board-side .card ul li,
.page-board aside .card ol li,
.page-board aside .card ul li{
  /* ▼▼ 리스트 항목 글자 크기 */
  font-size: 13px;
  line-height: 1.25;
  margin: 6px 0;
}

/* ✅ (D) 인기글에 “조회 n” 같이 부가 텍스트가 있는 경우(스샷처럼) */
.page-board .board-side .card .muted,
.page-board .board-right .card .muted,
.page-board aside .card .muted{
  /* ▼▼ 설명/부가글자 크기 (조회, 안내문 등) */
  font-size: 12px;
  opacity: .75;
}

/* ✅ (E) 사용 팁의 bullet 설명 문장 더 작게 */
.page-board .board-side .card .tips li,
.page-board aside .card .tips li{
  font-size: 12px;     /* 팁 문장 크기 */
  line-height: 1.25;
}

/* ✅ (F) 모바일에서는 살짝 키워서 가독성 유지 */
@media (max-width: 760px){
  .page-board .board-side .card h2,
  .page-board .board-side .card h3,
  .page-board aside .card h2,
  .page-board aside .card h3{
    font-size: 15px;
  }

  .page-board .board-side .card ol li,
  .page-board .board-side .card ul li,
  .page-board aside .card ol li,
  .page-board aside .card ul li{
    font-size: 13px;
  }

  .page-board .board-side .card .muted,
  .page-board aside .card .muted{
    font-size: 12px;
  }
}