/* 헤더 */
.nl-head .nl-eyebrow{
  font-size:.9rem; letter-spacing:.08em; font-weight:600;
  color:#9aa0a6; text-transform:uppercase;
}
.nl-head .nl-title{
  margin:.25rem 0 0; font-size:clamp(1.3rem,1rem + 1.2vw,2rem); font-weight:800;
}

/* 리스트 아이템 */
.nl-list .nl-item{
  border:0; border-radius:16px; margin-bottom:.3rem;
  transition:background-color .2s ease, box-shadow .2s ease, transform .15s ease;
  padding:.5rem 1rem;
  border:1px solid #e5e5e5;
}
.nl-list .nl-item:hover{
  background:#eef1f5; box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-1px);
}
.nl-list .nl-item:hover .nl-subject{
  color:#000;
}
.nl-line{ min-height:40px; }

/* ===== 카테고리 뱃지 (요청하신 형식) ===== */
.bo_cate_link{
  float:left;                     /* 기존 코드와 동일 동작 보장 */
  display:inline-block;
  margin-right:10px;
  padding:10px 15px;
  border-radius:20px;
  font-size:0.85rem;
  line-height:120%;
  color:#fff !important;
  background:#6b7280;             /* 기본색(매칭 안 될 때) */
  text-decoration:none;
}

/* 카테고리별 색상 매핑 */
.bo_cate_link[data-cate="공지사항"]     { background:#2563eb; } /* 파랑 */
.bo_cate_link[data-cate="이벤트"]       { background:#6e6e6e; } /* 회색(요청 주석 설명 반영) */
.bo_cate_link[data-cate="알려드립니다"] { background:#108500; } /* 녹색 */

/* 제목/NEW */
.nl-subject{
  font-size:1rem; font-weight:normal; min-width:0; /* text-truncate 동작용 */
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal;
  color:#666;
}
.nl-new{
  margin-left:.5rem; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  background:#ffeb3b; color:#333; padding:.15rem .4rem; border-radius:6px;
}

/* 날짜 */
.nl-date{
  font-size:.95rem; color:#6b7280; white-space:nowrap; flex:0 0 auto;
}

/* 접근성 포커스 */
.nl-item:focus{
  outline:none; box-shadow:0 0 0 .25rem rgba(37,99,235,.15);
}

/* 반응형: 모바일에서 날짜 줄바꿈 (배지 폭이 가변이라 들여쓰기 제거) */
@media (max-width: 576px){
  .nl-list .nl-item{
    padding:.5rem;
  }
  .bo_cate_link{
    margin-right:0;
    padding:7px 10px;
    font-size:0.75rem;
  }
  .nl-subject{
    display: inline-block;
    font-size:0.85rem;
    max-width:180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
  }
  .nl-line{ flex-wrap:wrap; }
  .nl-date{
    font-size:0.75rem;
    width:80px; margin-left:0; margin-top:0;
  }
}