.sas-list-wrap {
    margin-top: 6px;
}

.sas-list-box {
    background: #262626;                 /* 카드형과 동일 */
    border-radius: 14px;
    border: 1px solid #33383f;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.sas-list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    color: #e5e7eb;
}

/* 헤더 */
.sas-list-table thead {
    background: #202228;
    color: #9ca3af;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sas-list-table thead th {
    padding: 7px 8px 6px;
    border-bottom: 1px solid #33383f;
    font-weight: 500;
}

/* 바디 공통 (행 높이 살짝 여유, 구분선만) */
.sas-list-table td {
    padding: 6px 8px;                    /* ← 살짝 여유 줌 */
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #30333a;    /* 연한 구분선 */
}

.sas-row {
    cursor: pointer;
    background: #262626;                 /* 전 행 동일 색 */
    transition: background-color 0.12s ease;
}

.sas-row:hover {
    background: #30333a;                 /* 호버만 강조 */
}

/* 번호: 중앙 정렬 + 더 좁게 */
.sas-col-num {
    width: 40px;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    padding-left: 4px;
    padding-right: 4px;
}

/* 제목 영역 */
.sas-col-title { overflow: hidden; }

.sas-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* 카테고리 배지: 다크에 어울리는 단색(블루 계열)로 변경 */
.sas-cat-label {
    flex-shrink: 0;
    padding: 2px 8px 3px;
    border-radius: 999px;
    /*background: #1f3a8a;                 !* 새 색상 포인트 *!*/
    background: #393732;
    font-size: 10px;
    font-weight: 600;
    color: #e5e7ff;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sas-title {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    font-weight: 470;
    color: #f9fafb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sas-title:hover {
    color: #5ea3ff;
}

.sas-cmt {
    margin-left: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #ff4b5c;
    flex-shrink: 0;
}

/* 이미지 아이콘 */
.sas-img-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-size: 12px;
    color: #9ca3af;
}
.sas-img-icon i {
    display: inline-block;
}

/* 작성자 / 작성일 / 조회 / 추천: 타이트하게 */
.sas-col-author,
.sas-col-date,
.sas-col-view,
.sas-col-up {
    font-size: 11px;
    color: #b0b6c3;
    text-align: center;
}

.sas-col-author { width: 82px; }
.sas-col-date   { width: 80px; }
.sas-col-view   { width: 44px; }
.sas-col-up     { width: 38px; }

.sas-col-view span,
.sas-col-up span {
    font-weight: 500;
    color: #e5e7eb;
}

/* ===== 반응형 ===== */

@media (max-width: 1024px) {
    .sas-list-table { font-size: 12px; }
    .sas-list-table thead th,
    .sas-list-table td {
        padding-left: 6px;
        padding-right: 6px;
    }
    .sas-cat-label {
        max-width: 70px;
        font-size: 9px;
    }
}

/* 768px 이하: 번호/조회/추천 숨기고 핵심만 */
@media (max-width: 768px) {
    .sas-col-num,
    .sas-col-view,
    .sas-col-up,
    .sas-list-table thead th:nth-child(1),
    .sas-list-table thead th:nth-child(5),
    .sas-list-table thead th:nth-child(6),
    .sas-list-table tbody td:nth-child(1),
    .sas-list-table tbody td:nth-child(5),
    .sas-list-table tbody td:nth-child(6) {
        display: none;
    }

    .sas-col-author { width: 72px; }
    .sas-col-date   { width: 76px; }

    .sas-title      { font-size: 12px; }
    .sas-cat-label  { max-width: 56px; }
}

/* 480px 이하: 제목 + 날짜 초슬림 */
@media (max-width: 480px) {
    .sas-col-author,
    .sas-list-table thead th:nth-child(3),
    .sas-list-table tbody td:nth-child(3) {
        display: none;
    }

    .sas-col-date {
        width: 74px;
        font-size: 10px;
    }

    .sas-list-table td {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}