.board__desc{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:28px;
  padding:18px 22px;
  background:var(--c-primary-l);
  border-radius:var(--radius);
  color:var(--c-text-sub);
  font-size:var(--fs-sm);
  line-height:1.65;
}
.board__desc-icon{
  flex-shrink:0;
  width:19px;height:19px;
  margin-top:2px;
  color:var(--c-primary);
}
/* 카테고리 탭 */
.board-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--gap-sm)}
.board-cats__item{padding:8px 16px;border:1px solid var(--c-line);border-radius:999px;font-size:var(--fs-sm);color:var(--c-text-sub);transition:var(--tr)}
.board-cats__item:hover{border-color:var(--c-primary);color:var(--c-primary)}
.board-cats__item.is-on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* 3단 분야 — 탭 아래 줄, 왼쪽부터. 연한 띠 + 글자 링크로 탭과 단계를 구분한다
   ⚠️ 탭과 같은 줄 오른쪽에 두면 같은 단계로 보여 눈에 안 들어온다(실제 피드백) */
.board-cats__sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;flex-basis:100%;margin-top:6px;padding:12px 18px;background:var(--c-bg-alt);border-radius:10px}
.board-cats__sub-item{position:relative;padding:4px 0;font-size:var(--fs-sm);color:var(--c-text-sub);transition:var(--tr)}
.board-cats__sub-item + .board-cats__sub-item::before{content:"";position:absolute;left:-8px;top:50%;width:1px;height:10px;margin-top:-5px;background:var(--c-line)}
.board-cats__sub-item:hover{color:var(--c-primary)}
.board-cats__sub-item.is-on{color:var(--c-primary);font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

@media (max-width:768px){
  .board-cats{gap:6px}
  .board-cats__item{padding:6px 12px;font-size:13px}
  .board-cats__sub{padding:10px 14px}
  .board-cats__sub-item{font-size:13px}
}

@media (max-width:1024px){
  .board__desc{
    gap:9px;
    padding:14px 16px;
    font-size:13px;
  }
  .board__desc-icon{width:17px;height:17px;margin-top:1px}
}
.board-list{border-top:2px solid var(--c-text)}

.board-list__head,
.board-list__row{
  display:grid;
  grid-template-columns:90px 1fr 130px 120px 90px;
  align-items:center;
}

.board-list__head{
  padding:16px 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-sm);
  font-weight:700;
  text-align:center;
}
.board-list__head .board-list__title{text-align:center}

.board-list__row{
  padding:18px 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-sm);
  color:var(--c-text-sub);
  text-align:center;
  transition:background var(--tr);
}
.board-list__row:hover{background:var(--c-bg-alt)}

.board-list__title{
  padding:0 20px;
  text-align:left;
  color:var(--c-text);
  font-size:var(--fs-body);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.board-list__row.is-notice{background:var(--c-primary-l)}
.board-list__row.is-notice .board-list__title{font-weight:700}

.board-list__badge{
  display:inline-block;
  padding:3px 10px;
  background:var(--c-primary);
  color:#fff;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  font-style:normal;
}

.board-list__empty{
  padding:80px 0;
  border-bottom:1px solid var(--c-line);
  text-align:center;
  color:var(--c-text-mute);
}
/* --a  기본 (번호 있음) */

/* --b  번호 없음 */
.board-list--b .board-list__head,
.board-list--b .board-list__row{grid-template-columns:1fr 130px 120px 90px}
.board-list--b .board-list__num{display:none}
.board-list--b .board-list__row.is-notice .board-list__num{
  display:block;position:absolute;
}

/* --c  날짜 강조 */
.board-list--c .board-list__head,
.board-list--c .board-list__row{grid-template-columns:110px 1fr 130px 90px}
.board-list--c .board-list__num{display:none}
.board-list--c .board-list__date{
  order:-1;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--c-primary);
}
.board-list__clip{
  margin-left:6px;
  font-style:normal;
  font-size:12px;
  color:var(--c-primary);
}

.board-page{
  display:flex;justify-content:center;
  margin-top:40px;
}
.board-page svg{width:18px;height:18px}
.paging{display:flex;gap:4px;align-items:center}
.paging__item{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;
  padding:0 6px;
  border:1px solid var(--c-line);
  border-radius:var(--btn-radius);
  font-size:var(--fs-sm);
  color:var(--c-text-sub);
  transition:var(--tr);
}
.paging__item:hover{border-color:var(--c-primary);color:var(--c-primary)}
.paging__item.is-active{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
  font-weight:700;
}
.paging__item.is-disabled{opacity:.35}
.paging__item.is-dots{border:0}

/* 페이지가 많으면(아티스트 등) 번호 줄이 휴대폰 폭을 넘어 화면 전체가 좌우로 밀렸다 — 줄바꿈 + 작게 */
.paging{flex-wrap:wrap;justify-content:center;max-width:100%}
@media (max-width:640px){
  .paging{gap:3px}
  .paging__item{min-width:32px;height:32px;padding:0 4px;font-size:13px}
}

/* 게시판 목록은 서브헤더 바로 아래라 상단 여백을 줄인다 */
.board-cats{margin-bottom:28px}
.sec--board{padding-top:50px}

@media (max-width:1024px){
  .board-list__head{display:none}

  .board-list__row{
    grid-template-columns:1fr;
    gap:6px;
    padding:16px 4px;
    text-align:left;
  }
  .board-list__title{padding:0;white-space:normal}
  .board-list__num{display:none}
  .board-list__row.is-notice .board-list__num{display:block}

  .board-list__writer,
  .board-list__date,
  .board-list__hit{
    display:inline;
    font-size:13px;
    color:var(--c-text-mute);
  }
  .board-list__date::before{content:' · '}
  .board-list__hit::before{content:' · 조회 '}
}