/* 
 * comment/list.css
 * 댓글 목록 스타일 - 프레임워크 독립적
 */

/* 댓글 카드 컨테이너 */
.comment-card {
    background-color: var(--bg-primary);
    border: 0px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.comment-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

/* 댓글 헤더 */
.comment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* 댓글 본문 */
.comment-card-body {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-loose);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 댓글 작성자 */
.comment-author {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* 댓글 날짜 */
.comment-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* 답글 영역 */
.comment-replies {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-200);
}

/* 다크 모드 */
[data-theme="dark"] .comment-card,
[data-bs-theme="dark"] .comment-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .comment-card:hover,
[data-bs-theme="dark"] .comment-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

[data-theme="dark"] .comment-card-header,
[data-bs-theme="dark"] .comment-card-header {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .comment-card-body,
[data-bs-theme="dark"] .comment-card-body {
    color: var(--text-primary);
}

[data-theme="dark"] .comment-author,
[data-bs-theme="dark"] .comment-author {
    color: var(--text-primary);
}

[data-theme="dark"] .comment-date,
[data-bs-theme="dark"] .comment-date {
    color: var(--text-secondary);
}