/* 
 * post-view.css
 * 포스트 읽기 페이지 스타일
 * 포스트 헤더 (제목, 날짜, 태그) 관련 스타일
 */

/* ========== 포스트 헤더 ========== */

/* 포스트 헤더 가운데 정렬 */
.post-header-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-300);
}

.post-header-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.post-header-title {
    font-size: var(--size-font-500);
    font-weight: var(--font-weight-bold);
    margin: 0;
    text-align: center;
    line-height: var(--line-height-tight);
    color: var(--bs-body-color);
}

.post-header-date {
    color: var(--bs-secondary);
    font-size: var(--size-font-200);
}

.post-header-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-100);
}

.post-header-tags .tag-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-100);
}

/* ========== 다크 모드 ========== */

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

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

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

@media (max-width: 768px) {
    .post-header-title {
        font-size: var(--size-font-500);
    }
    
    .post-header-centered {
        gap: var(--spacing-200);
    }
}