/*
 * 게시판형 최신글 위젯 (m_board)
 * — 카드 안에 게시판 제목 헤더 + 글 목록 (제목 / 작성자 / 댓글수 / 시간)
 * — theme/basic 의 --m-* 토큰 그대로 사용
 */

.m-latest {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.m-latest:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-md);
    border-color: var(--m-border-hover);
}

.m-latest-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--m-border);
}
.m-latest-title { margin: 0; font-size: var(--m-text-lg); font-weight: 700; min-width: 0; }
.m-latest-title a { color: var(--m-text); text-decoration: none; transition: color 0.2s; }
.m-latest-title a:hover { color: var(--m-primary); }

.m-latest-more {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--m-text-sm); color: var(--m-text-muted);
    text-decoration: none; flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.m-latest-more:hover { color: var(--m-primary); transform: translateX(2px); }

.m-latest-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.m-latest-item {
    border-bottom: 1px solid var(--m-border);
    transition: background-color 0.25s ease;
}
.m-latest-item:last-child { border-bottom: 0; }
.m-latest-item:hover { background: var(--m-surface-2); }

.m-latest-link {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    padding: 12px 20px 4px;
    color: var(--m-text); text-decoration: none;
    font-size: var(--m-text-md);
    transition: color 0.2s;
}
.m-latest-link:hover .m-latest-subject { color: var(--m-primary); }
.m-latest-secret { color: var(--m-text-faint); flex-shrink: 0; }

.m-latest-subject {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--m-text); font-weight: 500;
    transition: color 0.2s;
}

/* 공지 뱃지 — 반투명 캡슐 스타일 */
.m-latest-notice {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px; font-weight: 700; line-height: 1.2;
    background: rgba(239, 68, 68, 0.12); color: #ef4444;
    flex-shrink: 0;
}
[data-theme="dark"] .m-latest-notice {
    background: rgba(239, 68, 68, 0.22); color: #f87171;
}

.m-latest-cmt {
    display: inline-flex; align-items: center;
    padding: 2px 6px;
    background: var(--m-primary-soft);
    color: var(--m-primary);
    border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 1.2;
    flex-shrink: 0;
}

.m-latest-tag {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px; font-weight: 700; line-height: 1.2;
    flex-shrink: 0;
}
.m-latest-tag-new { 
    background: rgba(239, 68, 68, 0.12); color: #ef4444; 
}
[data-theme="dark"] .m-latest-tag-new {
    background: rgba(239, 68, 68, 0.22); color: #f87171;
}

.m-latest-tag-hot { 
    background: rgba(245, 158, 11, 0.12); color: #d97706; 
}
[data-theme="dark"] .m-latest-tag-hot {
    background: rgba(245, 158, 11, 0.22); color: #fbbf24;
}

.m-latest-mark { color: var(--m-text-faint); flex-shrink: 0; }

.m-latest-meta {
    display: flex; gap: 8px;
    padding: 0 20px 12px 20px;
    font-size: var(--m-text-xs); color: var(--m-text-faint);
}
.m-latest-meta .m-latest-name {
    color: var(--m-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 120px;
}
.m-latest-meta .m-latest-date { margin-left: auto; }

.m-latest-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--m-text-faint);
    font-size: var(--m-text-sm);
}