/* ==========================================================================
   /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);
}