/* static/css/components/header.css */

/* --- 1. 헤더 레이아웃의 기본 컨테이너 --- */
.header-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header-title {
    flex-grow: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* [수정] 폰트 크기, 패딩은 각 템플릿에서 인라인 스타일로 직접 제어 */
    /* [수정] 기본 패딩 0으로 설정, 필요시 템플릿에서 오버라이드 */
    padding: 0;
}

/* --- 2. 페이지 유형별 상세 레이아웃 --- */
/* 목록 페이지 (타이틀 좌측 정렬) */
.page-list .header-left { flex-grow: 1; }
/* [수정] 폰트 크기 관련 모든 설정 제거. 이제 템플릿에서 직접 제어 */
.page-list .header-title {
    text-align: left;
    /* 템플릿에서 padding:0, margin-bottom:0 으로 직접 제어 */
}
.page-list .header-right { justify-content: flex-end; }

/* [핵심 수정] 상세 페이지와 폼 페이지는 동일한 중앙 정렬 헤더를 사용 */
.page-detail .header-left,
.page-detail .header-right,
.page-form .header-left,
.page-form .header-right {
    flex-basis: 70px;
}
.page-detail .header-left,
.page-form .header-left {
    justify-content: flex-start;
}
.page-detail .header-right,
.page-form .header-right {
    justify-content: flex-end;
}
.page-detail .header-title,
.page-form .header-title {
    font-size: 18px; /* 18px는 유지하되, 인라인 스타일과 충돌하지 않도록 !important 제거 */
    text-align: center;
    /* [추가] 상세 페이지 타이틀의 마진도 0으로 설정하여 일관성 확보 */
    margin-bottom: 0;
}

/* [유지] hymns 앱의 상세 페이지 타이틀 숨김 */
[data-current-app="hymns"].page-detail .header-title {
    display: none;
}
/* [유지] ccm 앱의 상세 페이지 타이틀은 기본값(18px, 중앙정렬)을 따름 */


/* --- 3. 헤더 내부 공용 컴포넌트 --- */
.header-action-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.header-add-button {
    padding: 6px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    color: var(--color-primary);
    transition: background-color 0.2s, color 0.2s;
}
.header-add-button:hover {
    background-color: var(--color-primary);
    color: var(--color-content-bg);
}
.search-icon-link { display: block; padding: 8px; }
.search-icon { width: 18px; height: 18px; display: block; }

/* 브레드크럼 헤더 스타일 */
.breadcrumb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.breadcrumb-list {
    display: flex; align-items: center;
    font-size: 14px; padding: 0; margin: 0;
    list-style: none; flex-grow: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb-item a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb-item.active { font-weight: 600; color: var(--color-text-primary); }
.breadcrumb-separator { margin: 0 8px; color: var(--color-text-secondary); }